Визуализация данных на платформе HI: от датчика до дашборда
COURSE-16-M03-L06 — Визуализация данных на платформе HI: от датчика до дашборда
Введение в визуализацию данных на встроенных системах
Визуализация данных — это не просто построение красивых графиков. В контексте систем автоматизации и IoT — это ключевой инструмент для оперативного мониторинга, управления и диагностики объекта в реальном времени. Для инженера, работающего с платформой HI, визуализация является основным способом взаимодействия с системой после ее внедрения. Она позволяет мгновенно оценить состояние объекта (температуру, влажность, состояние реле, аварии) и при необходимости вмешаться в его работу.
В отличие от аналитических систем, работающих с "большими данными" (Big Data), где важен ретроспективный анализ, в нашей сфере приоритетом является оперативная визуализация (real-time dashboarding). Наша цель — создать простой, понятный и отзывчивый интерфейс для управления умным домом, офисом или небольшим промышленным объектом прямо с контроллера HI, без зависимости от облачных сервисов.
Основной инструмент: Node-RED Dashboard
Для создания пользовательских интерфейсов на платформе HI мы используем стандартный и мощный инструмент — `node-red-dashboard`. Это набор узлов для Node-RED, который позволяет в несколько кликов создавать веб-интерфейсы, доступные с любого устройства в локальной сети (компьютера, планшета, смартфона).
Ключевые преимущества:- Интеграция: Является нативной частью среды Node-RED, что обеспечивает бесшовную связь между логикой управления и интерфейсом.
- Автономность: Дашборд работает непосредственно на контроллере HI. Для его функционирования не требуется подключение к Интернету.
- Простота: Создание интерфейса не требует знаний веб-программирования (HTML, CSS, JavaScript). Вы просто "рисуете" его, перетаскивая и настраивая узлы.
- Гибкость: Позволяет создавать как простые панели мониторинга, так и сложные интерактивные пульты управления.
Ключевые компоненты дашборда (UI Nodes)
Для построения интерфейса используются специальные узлы из палитры `dashboard`. Рассмотрим самые важные из них:
| Узел (Node) | Назначение | Пример использования на платформе HI |
| :--- | :--- | :--- |
| `ui_chart` | График. Отображает данные в виде линейного графика, гистограммы или круговой диаграммы. | Мониторинг динамики температуры с датчика 1-Wire за последние 24 часа. |
| `ui_gauge` | Индикатор. Показывает текущее значение на шкале с цветовыми зонами. | Отображение текущей температуры в помещении. Зеленая зона: 20-24°C, желтая: 24-28°C, красная: >28°C. |
| `ui_switch` | Переключатель. Позволяет отправлять команды `ON`/`OFF` или `true`/`false`. | Включение/выключение группы освещения, подключенной к реле контроллера. |
| `ui_text` | Текстовое поле. Выводит статическую или динамическую текстовую информацию. | Отображение статуса системы ("Все в норме", "Авария: протечка"), времени последнего обновления данных. |
| `ui_button` | Кнопка. При нажатии отправляет заданное сообщение для запуска сценария. | Кнопка "Активировать сценарий 'Никого нет дома'", которая выключает свет и розетки. |
| `ui_form` | Форма. Позволяет пользователю вводить данные (текст, числа) и отправлять их в поток. | Установка желаемой температуры (уставки) для системы климат-контроля. |
Практический пример: Создание дашборда мониторинга и управления
Задача: Создать простой дашборд для одной комнаты, который будет://========= FLOW-DASH-ROOM-001: Room Monitoring & Control =========
// --- 1. Data Acquisition ---
// Чтение данных с датчика 1-Wire каждые 15 секунд
[Inject: 15s] --> [1-Wire In: DS18B20] --> [Function: Validate & Format] --+
|
// --- 2. Visualization --- |
// Отправка данных на дашборд |
+--> [ui_gauge: Температура] |
+--> [ui_chart: График температуры] |
+--> [ui_text: Время обновления] |
|
// --- 3. Control --- |
// Получение команды от переключателя на дашборде |
[ui_switch: Свет] --> [Function: Create Command] --> [Relay Out: RL-05] --+
|
// --- 4. Feedback --- |
// Получение реального статуса реле и отправка его обратно на дашборд |
+--> [Function: Format State] --> [ui_switch: Свет] (для обновления)
+--> [Log to MySQL] (для аудита действий)
// --- 5. Error Handling ---
[Catch: All Nodes] --> [Function: Format Error] --> [ui_text: Status]
Шаг 1: Сбор и форматирование данных
Создаем поток для чтения данных с датчика. Ключевым элементом здесь является узел `Function`, который приводит данные к стандартному контракту сообщения.
// Узел: Function: Validate & Format
// Вход: msg.payload от датчика (например, "23.562")
// Выход: msg с payload в формате JSON
let temp = parseFloat(msg.payload);
// Валидация
if (isNaN(temp) || temp < -55 || temp > 125) {
node.status({fill:"red", shape:"dot", text:"Invalid reading"});
node.error("Некорректное значение температуры: " + msg.payload, msg);
return null; // Останавливаем поток
}
// Формирование сообщения по контракту
// Это сообщение будет использоваться для всех последующих узлов
msg.payload = {
"value": temp,
"source": "ds18b20-room-01",
"ts": Date.now(),
"unit": "°C"
};
// Устанавливаем топик для графика. Все сообщения с одним топиком
// попадут на одну линию графика.
msg.topic = "temperature_room_01";
node.status({fill:"green", shape:"dot", text: temp + " °C"});
return msg;
Шаг 2: Визуализация температуры
Шаг 3: Добавление элемента управления
// Узел: Function: Create Command
// Вход: msg.payload от ui_switch ("ON" или "OFF")
// Выход: msg.payload для узла реле (true или false)
if (msg.payload === 'ON') {
msg.payload = true;
} else {
msg.payload = false;
}
return msg;
Шаг 4: Реализация обратной связи
⚠️ Критически важно: Переключатель на дашборде должен отражать реальное состояние реле, а не просто команду, которую отправил пользователь.
Для этого после узла управления реле добавьте узел, который будет отправлять его новое состояние обратно в `ui_switch`. Это замкнет цикл и гарантирует, что если реле по какой-то причине не включилось, переключатель на дашборде вернется в положение "Выкл".
Принципы эффективной визуализации для инженера
* Зеленый: Норма, ОК, включено.
* Желтый/Оранжевый: Предупреждение, приближение к пороговому значению.
* Красный: Авария, ошибка, критическое значение, выключено.
Типовые ошибки и диагностика
- Проблема: График на дашборде не обновляется или показывает несколько линий для одного датчика.
* Решение: Перед узлом `ui_chart` установите `msg.topic` в константное значение (например, с помощью узла `Change`).
- Проблема: На дашборде пустая страница или надпись "Please add some UI nodes to the editor".
* Решение: Убедитесь, что узлы `ui_...` есть в потоке и они активны. Проверьте URL для доступа к дашборду (обычно `http://
- Проблема: Переключатель `ui_switch` не управляет реле.
* Решение: Используйте узел `Debug` после `ui_switch`, чтобы увидеть, какое именно сообщение он отправляет. Адаптируйте последующий поток для обработки этого сообщения.
- Проблема: Дашборд "тормозит" или перестает отвечать.
* Решение: Используйте узел `Delay` в режиме `Rate Limit`, чтобы ограничить частоту отправки сообщений в UI-узлы до разумного значения (например, 1 сообщение в секунду).
---
Лабораторная работа: COURSE-16-M03-LAB11 — Создание дашборда мониторинга
Цель: Создать дашборд для чтения и визуализации данных с двух разных источников: датчика температуры 1-Wire и Modbus-счетчика электроэнергии. Оборудование:- Контроллер HI.
- Датчик температуры DS18B20, подключенный к универсальному входу.
- Счетчик электроэнергии с интерфейсом RS-485 (Modbus RTU), подключенный к шине.
* Индикатор `ui_gauge` для текущей температуры.
* График `ui_chart` для отображения динамики температуры за последние 30 минут.
* Текстовое поле `ui_text`, отображающее текущую мощность в формате "Х.ХХ кВт".
* График `ui_chart` (тип "bar chart"), показывающий пики потребления.
Чек-лист сдачи:- [ ] Дашборд доступен по адресу `http://
:1880/ui`. - [ ] На дашборде присутствуют две группы: "Климат" и "Энергопотребление".
- [ ] Индикатор температуры корректно отображает текущее значение.
- [ ] График температуры обновляется и показывает историю.
- [ ] Текстовое поле мощности корректно отображает значение и единицы измерения.
- [ ] Все потоки используют контракт сообщения и содержат узлы `Function` для валидации и форматирования.
- [ ] В потоках присутствует обработка ошибок (узел `Catch`).
- Выполнено (Pass): Все пункты чек-листа выполнены. Дашборд работает стабильно.
- Не выполнено (Fail): Хотя бы один из пунктов чек-листа не выполнен.
---
Лабораторная работа: COURSE-16-M03-LAB12 — Интерактивная панель управления
Цель: Расширить дашборд из предыдущей лаборатории, добавив элементы управления освещением и розетками. Оборудование:- Контроллер HI с настроенным дашбордом из LAB11.
- Нагрузки (лампы), подключенные к реле №1 и №2.
- [ ] На дашборде присутствует группа "Управление" с двумя переключателями.
- [ ] Переключатель "Свет в комнате" управляет реле №1.
- [ ] Переключатель "Розетки" управляет реле №2.
- [ ] Реализована обратная связь: при ручном изменении состояния реле (например, через другой поток) переключатель на дашборде меняет свое состояние.
- [ ] Каждое нажатие на переключатель создает запись в таблице `audit_log` в MySQL.
- [ ] Поток управления отделен от потока визуализации с помощью узлов `Link In`/`Link Out`.
- Выполнено (Pass): Все пункты чек-листа выполнены. Управление работает надежно, обратная связь реализована корректно.
- Не выполнено (Fail): Отсутствует обратная связь или логирование.
---
Тест для самопроверки: COURSE-16-M03-QUIZ
* a) Grafana
* b) Node-RED Dashboard
* c) Python (Matplotlib)
* d) Встроенный веб-сервер с HTML-страницами
* a) Чтобы задать заголовок графика.
* b) Чтобы разделить данные на разные линии на одном графике.
* c) Чтобы указать единицы измерения.
* d) Для этого узла `msg.topic` не используется.
* a) `ui_chart`
* b) `ui_text`
* c) `ui_gauge`
* d) `ui_form`
* a) Пользователь должен получить email-уведомление после нажатия кнопки.
* b) Состояние элемента управления (например, переключателя) должно отражать реальное состояние оборудования, а не просто отправленную команду.
* c) Каждое действие должно сопровождаться звуковым сигналом.
* d) Данные с датчиков должны обновляться после отправки команды.
* a) Неправильный IP-адрес контроллера.
* b) Слишком высокая частота отправки сообщений в UI-узлы, что перегружает браузер и WebSocket соединение.
* c) Закончилось место на диске контроллера.
* d) Ошибка в контракте сообщения.
* a) `Switch`
* b) `Function`
* c) `Catch`
* d) `Delay` (в режиме Rate Limit)
* a) `ui_switch`
* b) `ui_button`
* c) `ui_slider`
* d) `ui_text_input`
* a) `http://
* b) `http://
* c) `http://
* d) `http://
* a) Чтобы замедлить поток данных.
* b) Чтобы привести `msg` к формату, который понимает узел дашборда (контракт сообщения).
* c) Чтобы зашифровать данные.
* d) Это не обязательно, узлы дашборда принимают любые данные.
* a) Дашборд привязан к MAC-адресу.
* b) Ваш компьютер и контроллер находятся в одной локальной сети, а другие устройства — нет.
* c) Требуется специальная лицензия для удаленного доступа.
* d) Node-RED Dashboard не поддерживает мобильные устройства.
---
Мини-Runbook: "Если дашборд не работает"
📋 Пошаговая диагностика:
* Подключите узел `Debug` к выходу потока, который отправляет данные на дашборд (например, после узла `Function`, форматирующего показания датчика).
* Убедитесь, что сообщения действительно генерируются.
* Проверьте структуру `msg.payload`. Для `ui_gauge` это должно быть простое число. Для `ui_chart` — тоже число. Убедитесь, что `msg.topic` задан, если вы хотите строить несколько линий.
* Подключите узел `Debug` сразу после узла `ui_switch` или `ui_button`.
* Нажмите на элемент в интерфейсе.
* Посмотрите в панели отладки, какое сообщение было сгенерировано. Убедитесь, что ваша последующая логика ожидает именно такое сообщение.