Обзор интерфейса: палитра, рабочая область, боковая панель

Урок 2 · Node-RED: установка, flows, msg/JSON, отладка · 30 мин · theory

Введение в редактор Node-RED: три кита интерфейса

Добро пожаловать в визуальную среду разработки платформы HI. Редактор Node-RED — это основной инструмент, в котором вы будете проводить большую часть времени, проектируя, внедряя и отлаживая логику автоматизации. Цель этого урока — дать вам полное понимание его структуры и научить уверенно ориентироваться в его ключевых элементах. Без этого навыка невозможно эффективно создавать даже простейшие сценарии.

> 🔗 Связанный материал: Для понимания, как редактор Node-RED взаимодействует с операционной системой контроллера HI и другими сервисами, такими как MQTT-брокер или база данных MySQL, настоятельно рекомендуется ознакомиться с материалом урока COURSE-06-M01-L02 'Архитектура Node-RED на контроллере'.

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

Палитра узлов (Palette), расположенная слева.

Рабочая область (Workspace), занимающая центральную часть экрана.

Боковая панель (Sidebar), находящаяся справа.

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

Рабочая область — это ваш верстак. Сюда вы выкладываете инструменты из ящика (узлы) и соединяете их проводами, собирая работающую схему. В Node-RED такая схема называется потоком (Flow). Это и есть визуальное представление логики вашего сценария.

Наконец, Боковая панель — это ваш набор измерительных приборов и технической документации. С ее помощью вы можете "прозвонить" схему, увидев, какие данные по ней проходят, прочитать инструкцию к любому "инструменту" (узлу) или настроить глобальные параметры, как, например, подключение к сети Modbus.

Освоение этих трех зон позволит вам перейти от простого наблюдения к активному созданию надежных и функциональных систем автоматизации на контроллере HI.

---

Палитра узлов (Palette): ваш набор инструментов

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

📋 Ключевые понятия:

common: Базовые узлы, используемые чаще всего (`inject`, `debug`, `catch`).
function: Узлы для обработки данных и реализации сложной логики (`function`, `switch`, `change`, `template`).
network: Узлы для сетевого взаимодействия (TCP, UDP, HTTP, MQTT).
sequence: Узлы для управления последовательностью выполнения потока (`delay`, `trigger`, `split`, `join`).
parser: Узлы для преобразования данных между форматами (JSON, CSV, XML).
storage: Узлы для работы с файлами.
HI Platform: Специализированные узлы для работы с аппаратными возможностями контроллера (универсальные входы/выходы, CAN, DALI).

Поиск и управление узлами

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

Чтобы открыть его, нажмите на иконку "гамбургера" (три горизонтальные линии) в правом верхнем углу и выберите пункт `Manage Palette`.

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

Nodes: Здесь перечислены все уже установленные в системе узлы. Вы можете временно отключать (disable) или полностью удалять (remove) те, которые не используете. Это помогает поддерживать палитру в чистоте и снижает потребление ресурсов.

Install: Это ваш доступ к огромной экосистеме Node-RED. Здесь вы можете найти и установить тысячи узлов, созданных сообществом.

Практика: Установка узла для работы с Modbus

Давайте рассмотрим процесс установки на примере пакета `node-red-contrib-modbus`, который является стандартом для работы с промышленными устройствами на наших контроллерах.

Откройте `Manage Palette` -> `Install`.

В строке поиска введите `modbus`.

В результатах поиска найдите пакет с именем `node-red-contrib-modbus`. Обратите внимание на информацию рядом с ним: версия, дата последнего обновления, ссылка на документацию.

Нажмите кнопку `Install`. Появится предупреждение о том, что будет установлен новый узел. Подтвердите установку.

Через несколько секунд процесс завершится, и в вашей палитре слева появится новая категория узлов `Modbus` с иконками `Modbus-Read`, `Modbus-Write` и другими. Теперь вы готовы к интеграции Modbus-совместимого оборудования.

> 💡 Подсказка: Прежде чем устанавливать узел из внешней коллекции, всегда проверяйте дату его последнего обновления и количество открытых проблем (issues) на GitHub (ссылка обычно есть в описании пакета). Это поможет избежать использования устаревших, заброшенных или нестабильных пакетов в ваших коммерческих проектах и обеспечит лучшую поддержку и безопасность.

---

Рабочая область (Workspace): создание и редактирование потоков

Центральная часть редактора — это рабочая область, ваше цифровое пространство для творчества. Именно здесь абстрактная логика превращается в конкретные, работающие потоки.

Рабочая область организована с помощью вкладок в верхней части экрана. Каждая такая вкладка — это отдельный поток (Flow). Использование нескольких потоков является хорошей практикой для декомпозиции сложного проекта. Например, один поток может отвечать за освещение (`SCN-LIGHT-001`), другой — за климат-контроль (`SCN-CLIMATE-002`), третий — за безопасность (`SCN-SAFETY-005`).

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

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

Перетаскивание узлов: Найдите в палитре слева узел `inject` (иконка кнопки, направленной вправо). Зажмите его левой кнопкой мыши и перетащите в рабочую область. Повторите то же самое с узлом `debug` (иконка жука).

Создание связей: У каждого узла есть порты входа (слева) и выхода (справа). Наведите курсор на выходной порт узла `inject`. Он подсветится оранжевым кружком. Зажмите левую кнопку мыши и протяните линию к входному порту узла `debug`. Эта линия называется связью (wire). Она определяет путь, по которому будет двигаться объект сообщения (msg).

Конфигурирование узлов: Дважды щелкните по узлу `inject`. Откроется его панель настроек. В поле `Payload` по умолчанию установлено `timestamp` (метка времени). Это означает, что при активации узел сгенерирует сообщение, в `payload` которого будет текущее время. Нажмите `Done`.

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

[
    {
        "id": "c1f7b0e8.e3a9c",
        "type": "inject",
        "z": "YOUR_FLOW_ID",
        "name": "Отправить метку времени",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "wires": [
            [
                "f9b7c2a4.8d5c2"
            ]
        ]
    },
    {
        "id": "f9b7c2a4.8d5c2",
        "type": "debug",
        "z": "YOUR_FLOW_ID",
        "name": "Вывод в консоль",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "x": 480,
        "y": 120,
        "wires": []
    }
]

(Пример JSON-представления созданного потока)

Развертывание изменений (Deploy)

Любые изменения, которые вы вносите в рабочей области, не применяются на контроллере немедленно. Чтобы "оживить" вашу схему, необходимо выполнить развертывание (Deploy). Для этого используется большая красная кнопка `Deploy` в правом верхнем углу.

У этой кнопки есть выпадающее меню, предлагающее несколько стратегий развертывания:

Full: Полное развертывание. Node-RED останавливает все текущие потоки, загружает новую конфигурацию целиком и запускает всё заново. Это самый надежный способ, но он приводит к кратковременному прерыванию работы всей логики. Рекомендуется использовать по умолчанию.
Modified Flows: Перезапускаются только те потоки (вкладки), в которые были внесены изменения. Это быстрее и менее разрушительно.
Modified Nodes: Перезапускаются только те узлы, которые были изменены. Самый быстрый способ, но может привести к непредсказуемым состояниям в сложных потоках. Используйте с осторожностью.

Нажмите `Deploy`. Кнопка станет серой. Теперь ваш поток активен. Нажмите на квадратную кнопку слева от узла `inject`. Вы только что вручную инициировали отправку сообщения. Но где результат? Для этого нам понадобится боковая панель.

---

Боковая панель (Sidebar): отладка и информация

Боковая панель — это многофункциональный инструмент для диагностики, получения информации и управления конфигурациями. Она состоит из нескольких вкладок, но мы сосредоточимся на трех самых важных для инженера.

Вкладка 'Information' (Информация)

Эта вкладка предоставляет контекстную справку. Выберите любой узел в рабочей области, и на вкладке 'Information' мгновенно появится его подробное описание:

Назначение узла.
Описание его настроек.
Структура входящих и исходящих сообщений (`msg`).
Примеры использования.

Это встроенная документация, которая экономит массу времени. Прежде чем искать информацию в интернете, всегда проверяйте эту вкладку.

Вкладка 'Debug' (Отладка)

Это, без преувеличения, главный инструмент инженера по автоматизации. Вкладка 'Отладка' (или "панель отладки") отображает сообщения, которые вы отправляете на нее с помощью узла `debug`.

Вернемся к потоку, который мы создали ранее, и откроем вкладку 'Debug' (с иконкой жука). Теперь снова нажмите на кнопку узла `inject`. В панели отладки мгновенно появится запись, содержащая числовое значение. Это и есть метка времени (timestamp), которую сгенерировал `inject` и передал через узел `debug`.

Узел `debug` очень гибок. Дважды щелкните по нему, чтобы открыть настройки. В поле `Output` вы можете выбрать, что именно выводить:

`msg.payload`: Значение полезной нагрузки (по умолчанию).
`complete message object`: Весь объект `msg` целиком со всеми его свойствами. Крайне полезно для понимания того, какая информация передается между узлами.
`msg.topic` или любое другое свойство сообщения.

> ⚠️ Внимание: Никогда не выводите полный объект сообщения (`complete message object`) от узлов, работающих с большими объемами данных (например, `Modbus-Read`, получающий много регистров, или `file in`, читающий большой файл) в рабочем проекте, оставленном на объекте заказчика. Это создает избыточную и ненужную нагрузку на процессор контроллера и может существенно замедлить работу как редактора, так и самой логики автоматизации. Для отладки выводите только необходимые свойства, например, `msg.payload` или `msg.topic`.

Вкладка 'Configuration Nodes' (Узлы конфигурации)

Некоторые узлы требуют общей, разделяемой конфигурации. Классический пример — узлы `mqtt in` и `mqtt out`. Вместо того чтобы в каждом из них прописывать адрес MQTT-брокера, порт и учетные данные, вы создаете один узел конфигурации (Configuration Node), который хранит эти настройки. Все MQTT-узлы в вашем проекте затем просто ссылаются на этот узел.

Вкладка 'Configuration Nodes' позволяет вам видеть все такие глобальные конфигурации в одном месте, отслеживать, сколько узлов их использует, и редактировать их. Это критически важно для поддержания порядка в проекте. Если адрес брокера изменится, вам достаточно будет исправить его в одном месте, а не в десятках узлов по всему проекту.

---

Практикум: собираем и отлаживаем поток 'Hello, HI!'

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

Пошаговая инструкция

Создайте новый поток: Нажмите `+` в строке вкладок рабочей области. Дважды щелкните по названию `Flow 1` и переименуйте его в `COURSE-06-M01-L03-Practice`.

Разместите узлы: Перетащите из палитры в рабочую область узлы `inject`, `change` и `debug`.

Соедините узлы: Создайте связи в следующей последовательности: `inject` -> `change` -> `debug`.

Настройте узел `inject`:

* Дважды щелкните по нему.

* В поле `Payload` выберите тип `string` и оставьте поле пустым.

* В поле `Topic` также установите пустую строку.

* В поле `Name` введите "Инициировать сообщение".

* Нажмите `Done`.

Настройте узел `change`:

* Дважды щелкните по нему. Это один из самых мощных узлов для манипуляции сообщениями.

* Настройте два правила:

1. Правило 1 (установить `payload`):

* В выпадающем меню выберите `Set` `msg.payload`.

* В поле `to` выберите тип `JSON` (иконка `{}`).

* В открывшемся редакторе введите следующий JSON-объект:

            {
                "value": "Hello, HI!",
                "source": "manual-inject-L03",
                "ts": $millis()
            }

Здесь мы используем `JSONata` выражение `$millis()` для динамической вставки текущей метки времени.

2. Правило 2 (установить `topic`):

* Нажмите кнопку `+add` внизу.

* В новом правиле выберите `Set` `msg.topic`.

* В поле `to` (тип `string`) введите `greetings/system/test`.

* В поле `Name` введите "Сформировать сообщение по контракту".

* Нажмите `Done`.

Настройте узел `debug`:

* Дважды щелкните по нему.

* Убедитесь, что `Output` установлен в `complete message object`.

* Нажмите `Done`.

Разверните и протестируйте:

* Нажмите `Deploy`.

* Переключитесь на боковой панели на вкладку `Debug`.

* Нажмите на кнопку узла `inject`.

Анализ результата

В панели отладки вы увидите объект, аналогичный этому:

{
  "_msgid": "a1b2c3d4.e5f6a7",
  "topic": "greetings/system/test",
  "payload": {
    "value": "Hello, HI!",
    "source": "manual-inject-L03",
    "ts": 1678890000000
  }
}

Обратите внимание на несколько ключевых моментов:

`msg.payload` теперь содержит не простую строку или число, а структурированный JSON-объект, как мы и задали в узле `change`. Это и есть основа "Контракта сообщения".
`msg.topic` был добавлен как отдельное свойство на верхнем уровне объекта `msg`.
Сам Node-RED добавил служебное свойство `_msgid` для уникальной идентификации этого сообщения внутри системы.

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

---

Итоги и ключевые выводы

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

Палитра узлов — это ваш бесконечный ящик с инструментами, который можно и нужно пополнять для решения специфических задач с помощью Менеджера палитры.
Рабочая область — это ваш верстак, где вы визуально проектируете логику, соединяя узлы в потоки и организуя их по функциональным вкладкам.
Боковая панель — это ваш диагностический центр, позволяющий заглянуть "под капот" потока с помощью вкладки Debug, получить мгновенную справку на вкладке Info и управлять глобальными настройками на вкладке Configuration Nodes.

Важно закрепить понимание, что интерфейс Node-RED — это не просто редактор, а полноценная визуальная среда для логического программирования. А умение эффективно использовать вкладку `Debug` является самым важным практическим навыком для любого инженера, занимающегося автоматизацией, так как именно она позволяет находить и устранять 99% всех проблем в логике.

Что дальше?

Теперь, когда вы знакомы с "холстом", пора научиться работать с "красками". В следующем уроке COURSE-06-M01-L04: "Работа с сообщениями (msg) и основы JSON" мы глубоко погрузимся в структуру объекта `msg`, разберем, почему JSON является стандартом де-факто для передачи данных в современных системах автоматизации, и научимся создавать и читать структурированные данные, которые являются основой для всех сложных сценариев.