Создание настенной панели управления Node-RED UI для планшета
Содержание
Яндекс Браузер со встроенной Алисой — бесплатно
Интерактивная настенная панель управления — это удобный физический центр контроля всего умного дома. С ее помощью можно быстро оценить состояние датчиков, выключить свет во всем доме перед выходом или запустить сложный сценарий. Популярным инструментом для создания таких панелей является графический конструктор Node-RED Dashboard. В этой инструкции мы подробно разберем процесс верстки, стилизации и развертывания интерфейса для настенного планшета. Перед началом работы изучите руководство по базовой установке Node-RED для подготовки бэкенда.
Проектирование сетки и структуры интерфейса
Для настенных панелей критически важно избегать вертикальной прокрутки. Весь интерфейс должен умещаться на одном экране. Оптимальным решением является использование модульной сетки. В настройках Node-RED Dashboard задайте фиксированную сетку (например, 12 колонок). Ширину одной колонки установите в пределах 80-90 пикселей, в зависимости от разрешения вашего планшета.
Создайте логическую структуру групп виджетов:
- Левая колонка — системная информация, время, погода, статус охраны.
- Центральная колонка — быстрые кнопки управления освещением и розетками по комнатам.
- Правая колонка — управление климатом, вентиляцией и мультимедиа-устройствами.
Для адаптивной верстки используйте медиа-запросы @media в CSS. Это позволит автоматически адаптировать размеры шрифтов и отступов, если в будущем вы решите заменить планшет на модель с другой диагональю экрана или другим соотношением сторон.
IMPORTANT
При верстке дашборда ориентируйтесь на стандартное альбомное разрешение настенных планшетов (обычно это 1920x1080 пикселей). Задавайте фиксированные размеры групп виджетов, чтобы избежать непредсказуемого сдвига блоков при изменении масштаба в браузере.
Кастомизация визуального стиля через CSS
Стандартная тема оформления Node-RED Dashboard выглядит достаточно просто. Чтобы придать интерфейсу премиальный современный вид, используйте внедрение кастомных стилей CSS через узел ui_template. Добавьте его на рабочую область и переключите в режим интеграции в секцию <head>.
Используйте современные визуальные эффекты, такие как эффект матового стекла (glassmorphism):
.nr-dashboard-theme .v-card {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
}
.nr-dashboard-theme {
background-color: #0d0f12 !important;
}Этот код превратит стандартные серые плитки виджетов в полупрозрачные карточки со сглаженными углами, которые отлично смотрятся на темных обоях с абстрактным рисунком.
WARNING
Эффект размытия заднего плана backdrop-filter требует значительных аппаратных ресурсов графического процессора. Старые или дешевые планшеты могут испытывать серьезные задержки интерфейса при рендеринге размытия. В таком случае замените размытие на сплошной полупрозрачный цвет.
Создание пользовательских виджетов с динамическим контентом
Для вывода уникальной информации, такой как графики температуры или анимированные иконки погоды, стандартных узлов Dashboard бывает недостаточно. В этом случае на помощь приходит узел ui_template с поддержкой HTML и JavaScript. Вы можете создать кастомные часы с автообновлением:
<div style="font-size: 3em; text-align: center; font-weight: bold;">
<span id="time-display">00:00</span>
</div>
<script>
setInterval(() => {
const now = new Date();
const timeStr = now.toTimeString().substring(0, 5);
document.getElementById('time-display').innerText = timeStr;
}, 1000);
</script>Для вывода видеопотоков с камер безопасности настройте трансляцию MJPEG-потока. Чтобы снизить нагрузку на процессор планшета, настройте ограничение частоты кадров MJPEG-потока до 5-10 кадров в секунду. Это сохранит плавность работы интерфейса панели управления.
Организация безопасности и удаленного доступа к панели
Поскольку настенный планшет является постоянным физическим терминалом управления домом, необходимо ограничить несанкционированный доступ. В файле настроек Node-RED settings.js активируйте опцию httpNodeAuth для защиты веб-страницы панели логином и паролем. При использовании внешнего доступа (например, через VPN или обратный прокси-сервер NGINX) обязательно настройте шифрование SSL/TLS. Это предотвратит перехват сессии управления и защитит конфиденциальные данные вашей семьи. Также можно настроить автоматическое разлогинивание сессии при бездействии более 15 минут.
Настройка аппаратной части и киоск-режима
Настенный планшет должен работать в режиме 24/7 без отображения элементов управления операционной системы (адресной строки браузера, шторки уведомлений и системных кнопок).
Для операционной системы Android лучшим решением является установка специализированного приложения Fully Kiosk Browser. Оно блокирует систему, запускает дашборд в полноэкранном режиме и поддерживает постоянное соединение по протоколу Websocket для мгновенного обновления состояний.
В параметрах Fully Kiosk Browser рекомендуется включить автоматическую перезагрузку страницы при потере сетевого соединения. Это позволит дашборду мгновенно переподключиться к серверу после кратковременного сбоя в Wi-Fi сети 5 ГГц, восстанавливая интерактивность виджетов без участия пользователя.
Для стабильного питания планшета подведите в подрозетник скрытый кабель от качественного блока питания с параметрами 5 Вольт и током не менее 2 Аммера.
TIP
В настройках Fully Kiosk Browser активируйте функцию пробуждения экрана по фронтальной камере. При приближении человека к планшету экран будет автоматически включаться, а при отсутствии движения — гаснуть через 30 секунд, что снизит энергопотребление и предотвратит выгорание экрана.
NOTE
Не рекомендуется держать аккумулятор планшета постоянно заряженным на 100% при высокой температуре корпуса. Это может привести к его вздутию через год эксплуатации. Используйте умные розетки для циклической зарядки (например, поддержание заряда в диапазоне от 30% до 80%).
Инструкция по настройке
Установка модулей дашборда
Добавьте библиотеку node-red-dashboard в палитру вашего сервера автоматизации и создайте структуру страниц.
Разметка сетки интерфейса
Настройте фиксированную модульную сетку с шириной колонок под физическое разрешение экрана планшета.
Стилизация и кастомизация CSS
Интегрируйте пользовательские стили через узел template для реализации визуальных эффектов темной темы.
Настройка режима киоска
Установите на планшет специализированный браузер и настройте автоматическое управление подсветкой.