Модуль Node-RED Dashboard позволяет очень легко добавить (очень приятный) графический интерфейс в проект Node-RED. Этот модуль от команды разработчиков Node_red выпущен замен знаменитого но прекратившего свое развитие модуля UI . С помощью этого модуля вы можете добавлять информационные панели: датчиков, диаграммы, текста, уведомлений или свободного HTML-кода. Вы также можете добавлять поля для взаимодействия: кнопка, переключатель, слайдер (slider), поле ввода (текстовое или цифровое), список выбора и формы. Все формы ввода были разобраны в данной здесь.
В настоящей статье речь пойдет о там как же выводить в веб интерфейс всю информацию .
Нам понадобится:
Зонд температуры и влажности DHT22 для генерации данных которые нужно вывести (показать). Чтобы проиллюстрировать работу различных выходных компонентов модуля приборной панели, я предлагаю использовать измерения от датчика температуры DHT22.
Страница MySensors
Откройте вкладку Dashboard tab и добавьте новую вкладку. Имя MySensors например. Добавите 2 группы:
- Measures
- Graphics
Приборная панель выглядит вот так.
Изменение страницы посредством программирования (ui-control)
Теперь добавим компонент ui-control, который позволяет программно изменять страницы (вкладки). Он принимает входной сигнал как данные в 2 формах
{Tab:” MySensors"}: Укажите имя целевой страницы. Внимание, необходимо будет сообщать о любом изменении названия страницы в панели мониторинга.
{Tab: 1}: или укажите номер страницы. То же самое, если мы изменим порядок страниц, нам придется применить новый индекс в коде.
Для этого добавьте функцию и вставьте этот код
msg = {};
msg.payload = {tab:"MySensors"}; // or 1
return msg;
msg является глобальной переменной для сообщений, поэтому не требует объявления.
Например, можно вызвать переключение на другую страницу с помощью командной кнопки.
Подключение и извлечение измерений температуры и влажности из MySensors
Теперь подключите Node-RED к шлюзу MySensors, чтобы получить измерения.Этот поток (код ниже) использует поток декодирования сообщений MySensors. Первый фильтр позволяет извлечь измерение температуры интересующего нас узла. Второй фильтр используется для извлечения измерения влажности.
Пример кода в конце статьи.
Вывод a gauge (or donut, compass, level)
Все, что остается, - это отобразить измерения в датчике. Добавьте в поток компонент датчика. Существует 4 типа отображения:
Gauge: Подходит для отображения измерения на циферблате. Например, все физические измерения в известном диапазоне (температура, влажность, атмосферное давление, скорость ветра …)
Donut: подходит для отображения нескольких значений. Например, распределение мощности, потребляемой различными устройствами
Compass: Подходит для указания направления. Например, направление ветра, измеренное подключенным флюгером.
Level: подходит для отображения уровня. Например, уровень наполнения бака (вода, топливо …)
Далее мы выберем данные датчика и другие параметры.
value format : Эта строка определяет способ отображения меры. Вы можете добавить текст до и после. Переменная имеет вид {{value}}. Node-RED заменит эту переменную значением, содержащимся во входном msg.payload . Например, для температуры необходимо указать {{value}} ° C, чтобы добавить единицу измерения после измерения.
Label: Метка помещенная ниже значения
Range: диапазон минимального и максимального значения дисплея
Color gradient : Изменения цвета шкалы в зависимости от значения.
Отображение диаграммы
Модуль dashboard предлагает 2 типа графиков:
- Line Chart. Он очень хорошо подходит для отображения измерения в реальном времени
- Bar Chart. он хорошо подходит для сравнения измерений. Например, температура в нескольких помещениях
На одном графике можно получить несколько данных. Просто "подключите" потоки на диаграмме узлов. Модуль панели мониторинга отвечает за создание данных для каждой входящей полезной нагрузки. Мы должны попытаться поместить измерения с достаточно близким значением (или еще лучше того же характера), чтобы рендеринг был правильным.
Другие параметры диаграммы узлов:
- Size: мы можем приспособить размер
- Label: метка графика, которая будет отображаться над ним
- Type: онлайн или в баре
- X-axis (только для линейного графика): временная база шкалы абсцисс в секундах, часах, днях, неделе. Например, можно настроить отображение H: M, H: M: S …
- Y-axis: минимальный и максимальный масштаб оси Y
Интерполяция: интерполяция между двумя точками. Это полезно, если измерения широко разнесены во времени. - Legend: Отображать или нет легенду. Удобно при отображении нескольких измерений на одном графике. Панель мониторинга автоматически назначает цвет
- Blank label: текст отображается, если на графике нечего отслеживать
Текстовая область и уведомления
Мы закончим презентацию модуля dashboard с отображением текста в поле и в скрытом уведомлении. Давайте начнем с подготовки строки для отображения
Сборка нескольких сообщений (payloads)в одно
Node-RED является асинхронной системой, то есть операции не обязательно заканчиваются одновременно. В этом деле ( да я мог бы сделать это по-другому, но это постоянная проблема с Node-RED), Я извлек температуру и влажность отдельно. Это необходимо, чтобы просто отобразить измерение в датчике, но это не подходит нам, чтобы отобразить его в уведомлении. Вот как .
В каждом фильтре я добавил тему (например, температуру и влажность). Создается контекстная переменная; каждый раз, когда payloads появляется в узле, мы тестируем тему и сохраняем значение в объекте контекста. Затем мы проверяем, содержит ли контекст значение температуры и влажности (или если оно не определено). Если это так, будет построена правильно отформатированная строка, которой будет достаточно для отображения. Например Temperature: 21.4 ° C – Humidity: 52.3%.
context.data = context.data || new Object();
switch (msg.topic) {
case "Temperature":
context.data.temperature = msg.payload;
msg = null;
break;
case "Humidity":
context.data.humidity = msg.payload;
msg = null;
break;
default:
msg = null;
break;
}
if(context.data.temperature !== null && context.data.humidity !== null && context.data.temperature !== undefined && context.data.humidity !== undefined) {
msgOut = ""; //new Object();
msgOut = "Температура : "
msgOut += context.data.temperature.toString();
msgOut+= "°C - Влажность : ";
msgOut+= context.data.humidity.toString();
msgOut+= "%";
context.data=null;
var msg = {};
msg.payload = msgOut;
return msg;
}
Вывод текста в Dashboard
Текст узла позволяет легко отображать текст в msg.payload. Он настроен следующим образом :
- Size: размер поля
- Label: Метка поля.
- Value format: можно настроить отображение значений. Например, если вы хотите добавить единицу или префикс. Можно также отобразить тему (msg.topic) или прямой доступ к элементу JSON object, например: msg.payload.data.value. В этом случае мы ничего не изменим .
- Layout: позволяет выбрать режим отображения. Метка, расположена слева, значение справа или другая комбинация расположения.
Отображение скрытого уведомления
Мы закончим этот учебник на показе скрытых уведомлений. Вы можете выбрать из 4 позиций :
- Правый верхний угол (Top Right)
- Правый нижний угол (Bottom Right)
- Верхний левый угол (Top Left)
- Нижний левый угол (Bottom Left)
Внимание! На планшете, смартфоне или если окно браузера уменьшено, сообщение отображается в нижней части экрана (по ширине)
Так же необходимо указать в поле Timeout время на которое необходимо показать всплывающее сообщение.
Импортируем содержимое файла :
На этом урок по dashboard закончен.