Эта статья представляет собой введение в панель инструментов (иногда ее еще называют панелью управления) Node-RED, установленной на Raspberry Pi. Мы рассмотрим, как установить панель инструментов Node-RED и покажем на примерах, как создать графический пользовательский интерфейс для ваших проектов Интернета вещей (IoT) и автоматизации дома (Home Automation).
Мы предполагаем, что вы знакомы с Raspberry Pi, знаете, как установить операционную систему, и знаете, как установить SSH-соединение с вашим Pi. Если вы еще не знакомы с системой Node-RED, то рекомендуем прочитать статью об установке Node-RED и началу работы с ней на Raspberry Pi.
Что такое панель инструментов Node-RED?
Node-RED Dashboard (панель инструментов) — это модуль, который предоставляет набор узлов в Node-RED для быстрого создания панели мониторинга данных в реальном времени. Например, он предоставляет узлы для быстрого создания пользовательского интерфейса с кнопками, ползунками, диаграммами, датчиками и т. д.
Дополнительную информацию о панели инструментов Node-RED можно узнать по следующим ссылкам:
- Сайт Node-RED: http://flows.nodered.org/node/node-red-dashboard
- GitHub: https://github.com/node-red/node-red-dashboard
Установка панели инструментов Node-RED
Вы можете установить узлы панели Node-RED, перейдя в Menu > Manage Palette (Меню > Управление палитрой). Затем найдите узел node-red-dashboard и установите его.
После установки узлы панели инструментов отобразятся на палитре.
Узлы из раздела панели инструментов предоставляют виджеты, которые отображаются в пользовательском интерфейсе вашего приложения (UI). Пользовательский интерфейс доступен по следующему URL-адресу:
1 |
http://Your_RPi_IP_address:1880/ui |
Например, в моем случае:
1 |
http://192.168.1.106:1880/ui |
На данный момент при доступе к пользовательскому интерфейсу вы увидите предыдущий экран. Это потому, что вы не добавили ни один из этих узлов панели в поток. Мы сделаем это в следующем разделе.
Создание пользовательского интерфейса (UI)
В этом разделе мы покажем вам, как создать свой пользовательский интерфейс (User Interface, UI) в Node-RED с помощью узлов панели инструментов Node-RED.
Макет панели инструментов
Пользовательский интерфейс организован во вкладки и группы. Вкладки — это разные страницы пользовательского интерфейса, как несколько вкладок в браузере. Внутри каждой вкладки есть группы, которые делят вкладки на разные разделы, чтобы вы могли организовать свои виджеты (кнопки, ползунки, диаграммы, датчики, формы и т. д.).
Каждый виджет должен иметь связанную с ним группу, которая определяет, где виджет должен отображаться в пользовательском интерфейсе.
Чтобы создать вкладку и группу, следуйте следующим инструкциям.
В правом верхнем углу нажмите на маленький значок стрелки и выберите Панель инструментов (Dashboard).
Создание вкладок и групп
Убедитесь, что выбрана вкладка Layout. Затем нажмите кнопку +tab, чтобы создать вкладку, по умолчанию она будет называться Tab 1.
После создания вкладки вы можете создать несколько групп под этой вкладкой. Вам нужно создать хотя бы одну группу, чтобы добавить свои виджеты. Чтобы добавить группу на созданную вкладку, вам нужно нажать на кнопку +group .
Затем нажмите кнопку +group , чтобы создать группу внутри этой вкладки. По умолчанию она будет называться Group 1.
Вы можете нажать кнопки редактирования вкладки и группы, чтобы изменить их свойства.
Например, нажмите кнопку редактирования (edit) для вкладки 1 (Tab 1).
Вы можете изменить название вкладки и ее значок:
- Имя (Name): можете назвать как хотите
- Значок (Icon): следует использовать имя, соответствующее именам значков в предоставленных ссылках. По умолчанию используется значок панели инструментов (dashboard icon).
После внесения изменений нажмите кнопку Обновить (Update).
Теперь отредактируйте группу, нажав на кнопку редактирования группы. Откроется следующее окно.
Вы можете изменить его имя, выбрать соответствующую вкладку и изменить его ширину. Согласно документации панели Node-RED, каждый элемент группы имеет ширину 6 «единиц» (единица по умолчанию имеет ширину 48 пикселей с зазором 6 пикселей).
На данный момент вы создали вкладку и группу с помощью панели Node-RED. Чтобы их увидеть, вам нужно добавить виджет.
Например, добавьте в поток узел переключателя (switch) (из раздела панели мониторинга (dashboard section), а не из раздела функций (function section) — вам нужно прокрутить палитру вниз, чтобы найти узлы панели мониторинга).
Дважды щелкните по нему, чтобы проверить его свойства. По умолчанию он будет добавлен в группу и вкладку, которые вы создали ранее. Разверните свое приложение.
Теперь перейдите по следующему URL-адресу, чтобы получить доступ к созданному пользовательскому интерфейсу.
1 |
http://Your_RPi_IP_address:1880/ui |
Например, в моем случае:
1 |
http://192.168.1.106:1880/ui |
Вы увидите что-то вроде этого:
Тема панели инструментов
Панель инструментов Node-RED по умолчанию имеет белый фон и светло-голубую полосу. Вы можете редактировать ее цвета и шрифт на вкладке «Тема» (Theme) при открытии опции панели инструментов (dashboard).
Измените стиль, разверните изменения и увидите, как пользовательский интерфейс панели инструментов меняет свои цвета. Например, как на следующем рисунке:
Сайт панели инструментов
В окне панели инструментов есть еще одна вкладка под названием «Сайт» (Site), которая позволяет выполнять дальнейшую настройку, как показано на рисунке ниже.
Можете свободно менять настройки, затем развернуть изменения и посмотреть, как выглядит пользовательский интерфейс. На данный момент вы не увидите большой разницы, поскольку у вас только один виджет. Эти изменения будут заметны, когда вы начнете добавлять больше виджетов в пользовательский интерфейс.
Пример создания пользовательского интерфейса
В этом разделе мы собираемся сделать пример панели инструментов, чтобы показать вам, как вы можете создать и редактировать свою собственную панель – мы не будем добавлять функциональность к виджетам – мы сделаем это в будущих проектах. Эта панель будет иметь следующие функции:
- Две разные вкладки: одна называется «Комната» (Room), а другая — «Сад» (Garden).
- Вкладка «Комната» будет содержать две группы, а вкладка «Сад» — одну группу.
- Мы добавим палитру цветов и переключатель в группы комнат.
- Мы добавим диаграмму в группу Сад.
Создание вкладок
В правом верхнем углу окна Node-RED выберите вкладку «Панель инструментов» (dashboard tab) и создайте две новые вкладки, нажав кнопку +tab.
Отредактируйте одну вкладку со следующими свойствами:
- Name: Room
- Icon: tv
А другую со следующим:
- Name: Garden
- Icon: local_florist
Затем добавьте две группы на вкладку Room и одну группу на вкладку Garden. На следующем рисунке показано как выглядит макет вашей панели инструментов.
Добавление виджетов
Добавьте в поток переключатель, ползунок, палитру цветов и датчик, как показано на следующем рисунке:
Дважды щелкните по переключателю. Появится новое окно.
В этом новом окне вы можете выбрать, где вы хотите разместить виджет кнопки в пользовательском интерфейсе. В этом случае мы хотим, чтобы он появился на вкладке Room, Group 1, как выделено красным на предыдущем рисунке.
Затем проделайте то же самое для остальных виджетов, но добавьте их в следующие группы:
- слайдер (slider) : Группа 1 [Комната]
- Выбор цвета (colour picker): Группа 2 [Комната]
- gauge: Группа 1 [Сад]
Разверните изменения и перейдите в пользовательский интерфейс панели управления, чтобы увидеть, как это выглядит.
1 |
http://Your_RPi_IP_address:1880/ui |
Ваша панель инструментов имеет две вкладки: «Комната» и «Сад», как показано на следующем рисунке:
Вот как выглядит вкладка комнаты с двумя группами.
А вот как выглядит вкладка «Сад» с одной группой.
Подведение итогов
В этом уроке вы узнали, как использовать узлы панели Node-RED для создания пользовательского интерфейса. Вы можете добавить несколько виджетов, таких как слайдеры, кнопки, формы, диаграммы и датчики, чтобы создать хорошее приложение для ваших проектов интернета вещей (IoT) или автоматизации дома.
В представленном примере мы создали только пользовательский интерфейс, мы не добавляли никаких функций в виджеты.
20 просмотров