Начало работы с панелью инструментов Node-RED на Raspberry Pi


Эта статья представляет собой введение в панель инструментов (иногда ее еще называют панелью управления) Node-RED, установленной на Raspberry Pi. Мы рассмотрим, как установить панель инструментов Node-RED и покажем на примерах, как создать графический пользовательский интерфейс для ваших проектов Интернета вещей (IoT) и автоматизации дома (Home Automation).

Начало работы с панелью инструментов Node-RED на Raspberry Pi

Мы предполагаем, что вы знакомы с Raspberry Pi, знаете, как установить операционную систему, и знаете, как установить SSH-соединение с вашим Pi. Если вы еще не знакомы с системой Node-RED, то рекомендуем прочитать статью об установке Node-RED и началу работы с ней на Raspberry Pi.

Что такое панель инструментов Node-RED?

Node-RED Dashboard (панель инструментов) — это модуль, который предоставляет набор узлов в Node-RED для быстрого создания панели мониторинга данных в реальном времени. Например, он предоставляет узлы для быстрого создания пользовательского интерфейса с кнопками, ползунками, диаграммами, датчиками и т. д.

Дополнительную информацию о панели инструментов Node-RED можно узнать по следующим ссылкам:

Установка панели инструментов Node-RED

Вы можете установить узлы панели Node-RED, перейдя в Menu Manage Palette (Меню > Управление палитрой). Затем найдите узел node-red-dashboard и установите его.

Установка узла node-red-dashboard в Node-RED

После установки узлы панели инструментов отобразятся на палитре.

Узлы панели инструментов Node-RED

Узлы из раздела панели инструментов предоставляют виджеты, которые отображаются в пользовательском интерфейсе вашего приложения (UI). Пользовательский интерфейс доступен по следующему URL-адресу:

Например, в моем случае:

Доступ к панели инструментов Node-RED

На данный момент при доступе к пользовательскому интерфейсу вы увидите предыдущий экран. Это потому, что вы не добавили ни один из этих узлов панели в поток. Мы сделаем это в следующем разделе.

Создание пользовательского интерфейса (UI)

В этом разделе мы покажем вам, как создать свой пользовательский интерфейс (User Interface, UI) в Node-RED с помощью узлов панели инструментов Node-RED.

Макет панели инструментов

Пользовательский интерфейс организован во вкладки и группы. Вкладки — это разные страницы пользовательского интерфейса, как несколько вкладок в браузере. Внутри каждой вкладки есть группы, которые делят вкладки на разные разделы, чтобы вы могли организовать свои виджеты (кнопки, ползунки, диаграммы, датчики, формы и т. д.).

Каждый виджет должен иметь связанную с ним группу, которая определяет, где виджет должен отображаться в пользовательском интерфейсе.

Чтобы создать вкладку и группу, следуйте следующим инструкциям.

В правом верхнем углу нажмите на маленький значок стрелки и выберите Панель инструментов (Dashboard).

Пункт меню для работы с панелью инструментов

Создание вкладок и групп

Убедитесь, что выбрана вкладка Layout. Затем нажмите кнопку +tab, чтобы создать вкладку, по умолчанию она будет называться Tab 1.

После создания вкладки вы можете создать несколько групп под этой вкладкой. Вам нужно создать хотя бы одну группу, чтобы добавить свои виджеты. Чтобы добавить группу на созданную вкладку, вам нужно нажать на  кнопку +group .

Затем нажмите кнопку +group , чтобы создать группу внутри этой вкладки. По умолчанию она будет называться Group 1.

Создание вкладки и группы внутри нее в панели инструментов Node-RED

Вы можете нажать кнопки редактирования вкладки и группы, чтобы изменить их свойства.

Например, нажмите кнопку редактирования (edit) для вкладки 1 (Tab 1).

Редактирование параметров вкладки в панели инструментов Node-RED

Вы можете изменить название вкладки и ее значок:

  • Имя (Name): можете назвать как хотите
  • Значок (Icon): следует использовать имя, соответствующее именам значков в предоставленных ссылках. По умолчанию используется значок панели инструментов (dashboard icon).

После внесения изменений нажмите кнопку Обновить (Update).

Теперь отредактируйте группу, нажав на кнопку редактирования группы. Откроется следующее окно.

Редактирование параметров группы в панели инструментов Node-RED

Вы можете изменить его имя, выбрать соответствующую вкладку и изменить его ширину. Согласно документации панели Node-RED, каждый элемент группы имеет ширину 6 «единиц» (единица по умолчанию имеет ширину 48 пикселей с зазором 6 пикселей).

На данный момент вы создали вкладку и группу с помощью панели Node-RED. Чтобы их увидеть, вам нужно добавить виджет.

Например, добавьте в поток узел переключателя (switch) (из раздела панели мониторинга (dashboard section), а не из раздела функций (function section) — вам нужно прокрутить палитру вниз, чтобы найти узлы панели мониторинга).

Переключатель в панели инструментов Node-RED

Дважды щелкните по нему, чтобы проверить его свойства. По умолчанию он будет добавлен в группу и вкладку, которые вы создали ранее. Разверните свое приложение.

Кнопка для развертывания приложения в панели инструментов Node-RED

Теперь перейдите по следующему URL-адресу, чтобы получить доступ к созданному пользовательскому интерфейсу.

Например, в моем случае:

Вы увидите что-то вроде этого:

Внешний вид созданной нами панели инструментов Node-RED

Тема панели инструментов

Панель инструментов Node-RED по умолчанию имеет белый фон и светло-голубую полосу. Вы можете редактировать ее цвета и шрифт на  вкладке «Тема» (Theme) при открытии опции панели инструментов (dashboard).

Редактирование стиля и цвета панели инструментов Node-RED

Измените стиль, разверните изменения и увидите, как пользовательский интерфейс панели инструментов меняет свои цвета. Например, как на следующем рисунке:

Панель инструментов Node-RED с измененными цветами

Сайт панели инструментов

В окне панели инструментов есть еще одна вкладка под названием «Сайт» (Site), которая позволяет выполнять дальнейшую настройку, как показано на рисунке ниже.

Вкладка «Сайт» (Site) в панели инструментов Node-RED

Можете свободно менять настройки, затем развернуть изменения и посмотреть, как выглядит пользовательский интерфейс. На данный момент вы не увидите большой разницы, поскольку у вас только один виджет. Эти изменения будут заметны, когда вы начнете добавлять больше виджетов в пользовательский интерфейс.

Пример создания пользовательского интерфейса

В этом разделе мы собираемся сделать пример панели инструментов, чтобы показать вам, как вы можете создать и редактировать свою собственную панель – мы не будем добавлять функциональность к виджетам – мы сделаем это в будущих проектах. Эта панель будет иметь следующие функции:

  • Две разные вкладки: одна называется «Комната» (Room), а другая — «Сад» (Garden).
  • Вкладка «Комната» будет содержать две группы, а вкладка «Сад» — одну группу.
  • Мы добавим палитру цветов и переключатель в группы комнат.
  • Мы добавим диаграмму в группу Сад.

Создание вкладок

В правом верхнем углу окна Node-RED выберите вкладку «Панель инструментов» (dashboard tab) и создайте две новые вкладки, нажав  кнопку +tab.

Отредактируйте одну вкладку со следующими свойствами:

  • Name: Room
  • Icon: tv

А другую со следующим:

  • Name: Garden
  • Icon: local_florist

Затем добавьте две группы на вкладку Room и одну группу на вкладку Garden. На следующем рисунке показано как выглядит макет вашей панели инструментов.

Макет нашей панели инструментов

Добавление виджетов

Добавьте в поток переключательползунокпалитру цветов и датчик, как показано на следующем рисунке:

Добавление в поток переключателя, ползунка, палитры цветов и датчика

Дважды щелкните по переключателю. Появится новое окно.

Редактирование параметров узла переключателя

В этом новом окне вы можете выбрать, где вы хотите разместить виджет кнопки в пользовательском интерфейсе. В этом случае мы хотим, чтобы он появился на вкладке RoomGroup 1, как выделено красным на предыдущем рисунке.

Затем проделайте то же самое для остальных виджетов, но добавьте их в следующие группы:

  • слайдер (slider) : Группа 1 [Комната]
  • Выбор цвета (colour picker): Группа 2 [Комната]
  • gauge: Группа 1 [Сад]

Разверните изменения и перейдите в пользовательский интерфейс панели управления, чтобы увидеть, как это выглядит.

Ваша панель инструментов имеет две вкладки: «Комната» и «Сад», как показано на следующем рисунке:

Наша панель инструментов имеет две вкладки: «Комната» и «Сад»

Вот как выглядит вкладка комнаты с двумя группами.

Внешний вид вкладки комнаты с двумя группами

А вот как выглядит вкладка «Сад» с одной группой.

Внешний вид вкладки «Сад» с одной группой

Подведение итогов

В этом уроке вы узнали, как использовать узлы панели Node-RED для создания пользовательского интерфейса. Вы можете добавить несколько виджетов, таких как слайдеры, кнопки, формы, диаграммы и датчики, чтобы создать хорошее приложение для ваших проектов интернета вещей (IoT) или автоматизации дома.

В представленном примере мы создали только пользовательский интерфейс, мы не добавляли никаких функций в виджеты.

(Проголосуй первым!)
Загрузка...
20 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *