Начало работы с Node-RED Dashboard на Raspberry Pi
Эта статья является введением в Node-RED Dashboard на Raspberry Pi. Мы рассмотрим, как установить Node-RED Dashboard, и покажем на примере, как создать графический пользовательский интерфейс для ваших проектов IoT и домашней автоматизации.
Содержание:
Предварительные требования
Вам понадобится плата Raspberry Pi — ознакомьтесь с лучшими стартовыми наборами Raspberry Pi. Мы предполагаем, что вы знакомы с Raspberry Pi, умеете устанавливать операционную систему и знаете, как установить SSH-соединение с вашим Pi. Сначала вы можете ознакомиться со следующими руководствами:
У вас должен быть установлен Node-RED на вашем Pi. Для введения в Node-RED прочитайте эту статью: Начало работы с Node-RED на Raspberry Pi.
Что такое Node-RED Dashboard?
Node-RED Dashboard — это модуль, который предоставляет набор узлов (nodes) в Node-RED для быстрого создания панели управления с данными в реальном времени. Например, он предоставляет узлы для быстрого создания пользовательского интерфейса с кнопками, ползунками, графиками, датчиками и т.д.
Чтобы узнать больше о Node-RED Dashboard, вы можете перейти по следующим ссылкам:
Сайт Node-RED: http://flows.nodered.org/node/node-red-dashboard
Установка Node-RED Dashboard
Вы можете установить узлы Node-RED Dashboard, перейдя в Menu > Manage Palette. Затем найдите node-red-dashboard и установите его.
После установки узлы Dashboard появятся в палитре.
Узлы из раздела Dashboard предоставляют виджеты, которые отображаются в пользовательском интерфейсе (UI) вашего приложения. Пользовательский интерфейс доступен по следующему URL:
http://Your_RPi_IP_address:1880/ui
Например, в моём случае:
http://192.168.1.106:1880/ui
На данный момент при переходе по этому адресу вы увидите экран, показанный выше. Это связано с тем, что вы ещё не добавили ни одного узла Dashboard в поток (flow). Мы сделаем это в следующем разделе.
Создание UI (пользовательского интерфейса)
В этом разделе мы покажем вам, как создать пользовательский интерфейс (UI) в Node-RED с использованием узлов Node-RED Dashboard.
Макет Dashboard
Пользовательский интерфейс организован с помощью вкладок (tabs) и групп (groups). Вкладки — это разные страницы вашего пользовательского интерфейса, подобно нескольким вкладкам в браузере. Внутри каждой вкладки есть группы, которые разделяют вкладки на разные секции, чтобы вы могли упорядочить свои виджеты (кнопки, ползунки, графики, датчики, формы и т.д.).
Каждый виджет должен быть привязан к определённой группе, которая определяет, где виджет будет отображаться в пользовательском интерфейсе.
Чтобы создать вкладку и группу, следуйте приведённым ниже инструкциям.
В правом верхнем углу нажмите на маленькую иконку стрелки и выберите Dashboard.
Создание вкладок и групп
Убедитесь, что у вас выбрана вкладка Layout. Затем нажмите кнопку +tab, чтобы создать вкладку — по умолчанию она будет называться Tab 1.
После создания вкладки вы можете создать несколько групп внутри неё. Для добавления виджетов необходимо создать хотя бы одну группу. Чтобы добавить группу к созданной вкладке, нажмите кнопку +group.
Затем нажмите кнопку +group, чтобы создать группу внутри этой вкладки — по умолчанию она будет называться Group 1.
Вы можете нажать кнопки редактирования Tab и Group, чтобы изменить их свойства.
Например, нажмите кнопку edit для Tab 1.
Вы можете изменить имя вкладки и её иконку:
Name: вы можете назвать её как угодно
Icon: вы должны использовать имя в соответствии с названиями иконок по предоставленным ссылкам. По умолчанию используется иконка dashboard.
После внесения изменений нажмите кнопку Update.
Теперь отредактируйте группу, нажав кнопку edit рядом с группой. Откроется следующее окно.
Вы можете изменить её имя, выбрать соответствующую вкладку и изменить ширину. Согласно документации Node-RED Dashboard, каждый элемент группы имеет ширину 6 «единиц» (по умолчанию единица равна 48 пикселям с промежутком в 6 пикселей).
На данный момент вы создали вкладку и группу в Node-RED Dashboard. Чтобы увидеть их, нужно добавить виджет.
Например, добавьте узел switch (из раздела dashboard, а не из раздела function — вам нужно прокрутить палитру вниз, чтобы найти узлы dashboard) в поток.
Дважды щёлкните по нему, чтобы проверить его свойства. По умолчанию он будет добавлен в группу и вкладку, которые вы создали ранее. Разверните (Deploy) ваше приложение.
Теперь перейдите по следующему URL, чтобы открыть созданный пользовательский интерфейс.
http://Your_RPi_IP_address:1880/ui
Например, в моём случае:
http://192.168.1.106:1880/ui
Вы увидите что-то подобное:
Тема Dashboard
Node-RED Dashboard имеет белый фон и светло-голубую панель по умолчанию. Вы можете изменить его цвета и шрифт на вкладке Theme, открыв параметр dashboard.
Измените стиль, разверните изменения и посмотрите, как Dashboard UI изменит свои цвета. Например, как на следующем рисунке:
Настройки сайта Dashboard
В окне dashboard есть ещё одна вкладка под названием Site, которая позволяет выполнить дополнительную настройку, как показано на рисунке ниже.
Не стесняйтесь изменять настройки, затем разверните изменения и посмотрите, как выглядит UI. На данный момент вы не увидите большой разницы, потому что у вас есть только один виджет. Эти изменения станут заметны, когда вы начнёте добавлять больше виджетов в UI.
Пример создания пользовательского интерфейса
В этом разделе мы создадим пример Dashboard, чтобы показать вам, как можно создавать и редактировать собственную панель управления — мы не будем добавлять функциональность к виджетам — мы сделаем это в будущих проектах. Эта панель управления будет иметь следующие возможности:
Две разные вкладки: одна называется Room (Комната), а другая — Garden (Сад)
Вкладка Room будет иметь две группы, а вкладка Garden — одну группу
Мы добавим палитру цветов (color picker) и переключатель (switch) в группы Room
Мы добавим график (chart) в группу Garden
Создание вкладок
В правом верхнем углу окна Node-RED выберите вкладку dashboard и создайте две новые вкладки, нажав кнопку +tab.
Отредактируйте одну вкладку со следующими свойствами:
Name: Room
Icon: tv
А другую — со следующими:
Name: Garden
Icon: local_florist
Затем добавьте две группы во вкладку Room и одну группу во вкладку Garden. На следующем рисунке показано, как выглядит макет вашей панели управления.
Добавление виджетов
Добавьте switch (переключатель), slider (ползунок), colour picker (палитру цветов) и gauge (датчик) в поток, как показано на следующем рисунке:
Дважды щёлкните по switch. Откроется новое окно.
В этом новом окне вы можете выбрать, где вы хотите разместить виджет кнопки в пользовательском интерфейсе. В данном случае мы хотим, чтобы он отображался во вкладке Room, Group 1, как выделено красным на предыдущем рисунке.
Затем сделайте то же самое для остальных виджетов, но добавьте их в следующие группы:
slider: Group 1 [Room]
colour picker: Group 2 [Room]
gauge: Group 1 [Garden]
Разверните изменения и перейдите в Dashboard UI, чтобы увидеть результат.
http://Your_RPi_IP_address:1880/ui
Ваша панель управления имеет две вкладки: Room и Garden, как показано на следующем рисунке:
Вот как выглядит вкладка Room с двумя группами.
А вот как выглядит вкладка Garden с одной группой.
Заключение
В этом руководстве вы узнали, как использовать узлы Node-RED Dashboard для создания пользовательского интерфейса. Вы можете добавлять различные виджеты, такие как ползунки, кнопки, формы, графики и датчики, чтобы создать красивое приложение для ваших проектов IoT или домашней автоматизации.
В представленном примере мы только создали пользовательский интерфейс, мы не добавляли никакой функциональности к виджетам. У нас есть несколько проектов, использующих Node-RED Dashboard, которые вы можете посмотреть, чтобы узнать, как добавить функциональность к вашему пользовательскому интерфейсу. Например:
ESP32 MQTT — публикация и подписка с Arduino IDE с интерфейсом Node-RED Dashboard
ESP8266 и Node-RED с MQTT (публикация и подписка) с интерфейсом Node-RED Dashboard
Надеемся, что это руководство было для вас полезным.
Спасибо за чтение!