Модуль Node-RED Dashboard позволяет очень легко добавить (очень приятный) графический интерфейс в проект Node-RED. Этот модуль от команды разработчиков Node_red выпущен замен знаменитого но прекратившего свое развитие модуля UI . С помощью этого модуля вы можете добавлять информационные панели: датчиков, диаграммы, текста, уведомлений или свободного HTML-кода. Вы также можете добавлять поля для взаимодействия: кнопка, переключатель, слайдер (slider), поле ввода (текстовое или цифровое), список выбора и формы.
Если Вы ранее использовали IU (node-red-contrib-ui), необходимо удалить через терминал.
cd ~/.node-red
npm uninstall node-red-contrib-ui
Открываем Palette Manager и вводим в строке поиска -dashboard .
Создание Вкладок
Можно создавать группы и страницы непосредственно из панели управления каждого узла панели мониторинга. Когда модуль обнаружен, гораздо легче и яснее пройти через диапазон конфигурации, который добавлен рядом с консолью (debug). Если панель не отображается (или закрыта), перейдите в меню Вид и выберите Dashboard.
Выберите название. Оно будет отображаться как заголовок страницы в заголовке веб-браузера. Вы можете выбрать между двумя темами, темными с черным фоном (темным) или с белым фоном, графические элементы в синем (светлом).
нажмите + tab, чтобы добавить страницу.
Откройте окно редактирования, нажав edit
Добавьте группу
Элемент Button
Настройки элемента
- Group:выбрать группу расположения элемента.
- Size : Размер элемента. По умолчанию Авто
- Icon : Иконка слева от текста
- Label : Текст выводимый на кнопку
- Colour : индивидуальный цвет текста(в шестнадцетиричной системы. Пример #8000ff)
- Payload : выходное значение при нажатии на кнопку (true, false)
- Topic : label
- Name : Имя отображаемое на блоке в Node-Red
Выпадающий список
Элементы выпадающего списка позволяют возвращать 3 типа данных
- Строка
- Целое цифровое значение
- тип Boolean
Switch
горизонтальный переключатель позволяет возвратить "Логическое значение" когда он изменяет положение. Можно изменить логическое значение, путем инвертирования выходного значения в зависимости от состояния включения и выключения.
Так же можно выбрать любые другие состояния по мере необходимости:
- A Flow
- Сохранить в глобальной переменной(Global)
- Строка(String)
- Число (Number)
- JSON объект
- дата и время активации(timestamp)
Slder
Регулятор принимает в качестве параметра минимальное значение (min), максимальное (max) и шаг изменения (step).
Так же может проводить входящие сообщение на выход при установке галочки напротив текста If msg arrives on input, pass through to output:
Числовое поле (numeric)
Должен быть определен диапазон входа (min, max).
Текстовое поле (text input)
Это поле предлагает 9 режимов ввода . Если задана задержка (delay) (по умолчанию 300 мс), то значение введенного текста выводится автоматически. Если period равен нулю (0), то подтвердите запись, нажав клавишу Enter.
Text - собственно и добавить нечего. Просто поле для ввода текста
EmailAdress- в это случае осуществляется проверка правильності ввода (точнее наличие @)
Password - поле для ввода пароля
Number - поле для ввода исключительно цифр
telephoneinput - ничем не отличается от Text
color picker - поле выбора цвета, с передачей его кода (HEX) на выход
time (week, month) picker - поле ввода времени (дня недели, месяца)
Form (Форма)
Последний большой кусок Dashbord, форма . Это действительно очень мощный и очень простой в реализации компонент.
Как обычно, обозначенный пункт (Label)может дать тип, который будет отображаться в заголовке. Это для следующих вариантов:
- Текст
- Число
- Адрес эл. почты
- Пароль
- Флажок
- Переключатель
Каждый элемент может быть выбран обязательным (т.е. форма не будет отправлен без заполнения этого элемента).
Ну собственно на этом по элементам ввода данных, системы Dashboard Пользовательского Интерфейса Node-Red можно закончить. Подписывайтесь на канал, ставьте лайки.