Node-RED:Руководство пользователя/Как устроен редактор Node-RED
Как устроен редактор Node-RED[1]
Окно редактора Node-RED состоит из 4 главных компонентов:
- Вверху – «шапка». На ней находится кнопка «Deploy», кнопка главного меню (с тремя полосками), а также, если включена аутентификация пользователя, меню пользователя
- Слева – «палитра». В ней содержатся ноды, которые можно использовать в редакторе
- Посередине – главная рабочая область. В ней создаются потоки
- Справа – боковая панель
Рабочая область
Рабочая область – это элемент редактора, в котором создаются потоки. Сюда вы перетаскиваете ноды из «палитры» и подключаете их друг к другу.
В верхней части рабочей области находятся вкладки – по одной на каждый открытый поток и подпоток.
Инструменты для просмотра рабочей области
В нижней части рабочей области находятся кнопки зума – для приближения (если у вас Windows: Ctrl + = или если у вас Mac: ⌘ + = ), отдаления (если у вас Windows: Ctrl + - или если у вас Mac: ⌘ + - ) и возврата к зуму по умолчанию (если у вас Windows: Ctrl + 0 или если у вас Mac: ⌘ + 0 ).
Кроме того, здесь есть кнопка, включающая навигатор по рабочей области.
Окно навигатора выполнено в виде уменьшенной версии всей рабочей области, в котором прерывистой линией выделено место, которое мы видим в данный момент. Это место можно поменять и благодаря этому быстро переместиться к другой зоне рабочей области. Кроме того, навигатор полезен, если вам нужно найти ноды, «потерявшиеся» за краями рабочей области.
Настройка рабочей области
Рабочую область можно настроить в меню «View» (если у вас Windows: Ctrl + , или если у вас Mac: ⌘ + , ). Чтобы открыть его, кликните на кнопку с тремя полосками справа вверху, а затем на «Settings» > «View».
Потоки
Добавление потока
Чтобы добавить новый поток, кликните на кнопку с плюсиком в правой верхней части рабочей области. Кроме того, это можно сделать, нажав на кнопку с тремя полосками справа вверху, а затем на «Flows» > «Add».
Редактирование свойств потока
Чтобы открыть меню редактирования свойств потока «Edit flow», сделайте двойной клик по его вкладке в верхней части рабочей области. Кроме того, это можно сделать, нажав на кнопку с тремя полосками справа вверху, а затем на «Flows» > «Rename».
В этом меню можно задать название и описание потока. Описание потока показывается в боковой панели на вкладке «info». Для создания описания можно использовать язык разметки Markdown. Свойство «Status» предназначено для включения/выключения потока.
Удаление потока
Удалить поток можно несколькими способами. Во-первых, вы можете нажать на кнопку «Delete» в меню «Edit flow», а во-вторых, кликнуть на кнопку с тремя полосками справа вверху, а затем на «Flows» > «Delete».
Ноды
Ноды можно добавить в рабочую область разными способами:
- Перетянув из «палитры»
- При помощи меню быстрого добавления нодов
- При помощи импорта из меню «Library» или «Clipboard»
Ноды соединяются друг с другом при помощи «проводков», подключенных к портам. У нода может быть лишь один входной порт и несколько выходных портов. У порта может быть описание, которое появляется, если навести на него курсор мыши. Ноды могут сами задавать эти описания – например, нода «switch» показывает правило, соответствующее выходному порту. Кроме того, вы сами можете задать описания для портов в меню редактирования ноды.
У некоторых нод внизу также показывается статусное сообщение и иконка. Они нужны для того, чтобы показать текущее состояние ноды – к примеру, MQTT-ноды с помощью этих элементов показывают, подключены они или нет.
Если в ноду были внесены какие-то изменения, развертка которых еще не была выполнена, то в верхней части ноды будет показан синий кружок. Если в настройках ноды есть ошибки, в ее верхней части будет показан красный треугольник.
У некоторых нод слева или справа есть кнопка, которая позволяет взаимодействовать с нодой прямо в редакторе. Единственные стандартные ноды с кнопками – это «inject» и «debug».
Меню быстрого добавления нод
Меню быстрого добавления нод позволяет быстро добавить ноду в рабочую область, не перетягивая ее из «палитры».
Чтобы открыть это меню, зажмите Ctrl (если у вас Windows) или ⌘ (если у вас Mac), а затем кликните левой кнопкой мыши в нужном месте рабочей области.
В этом меню содержится полный список всех нод, имеющихся в редакторе. В самом верху списка показаны пять главных нод, после которых идут недавно добавленные ноды, а далее идет полный алфавитный список всех оставшихся нод.
Как и у «палитры», в верхней части этого меню есть строка для поиска нод с помощью текста.
Редактирование настроек нод
Чтобы открыть меню редактирования настроек нод, сделайте двойной клик по ноде или выберите нужную ноду, а затем кликните на ↵ Enter на клавиатуре. Если вы выбрали несколько нод, то после нажатия на ↵ Enter меню редактирования откроется для самой первой из них.
Меню редактирования ноды состоит из 3 секций – «Properties» («Свойства»), «Description» («Описание») и «Appearance» («Внешний вид»). В секции «Properties» показываются элементы редактирования, соответствующие выбранной ноде (например, если это нода «function», то в этой секции будет текстовый редактор для введения кода), в «Description» – текстовый редактор описания ноды, а в «Appearance» задается иконка ноды, названия для портов и то, нужно ли показывать название ноды или нет.
Клик по иконке в этом меню вызовет диалог для выбора иконки.
Конфигурационные ноды
Конфигурационные ноды – это специальный тип нод, содержащих многократно используемые настройки, которые могут использовать несколько обычных нод потока.
К примеру, ноды «mqtt in» и «mqtt out» используют конфигурационную ноду «mqtt broker», чтобы воспользоваться одним и тем же соединением с MQTT-брокером.
Конфигурационные ноды добавляются через меню редактирования ноды, которой нужна конфигурационная нода. В нем есть специальное меню, где вы можете выбрать либо конфигурационную ноду нужного типа, либо добавить новый экземпляр.
Чтобы открыть это меню добавления (и редактирования) конфигурационной ноды или добавления нового экземпляра, кликните на кнопку с иконкой карандаша справа от поля «Server».
В меню добавления конфигурационной ноды нет секции «Appearance», поскольку у конфигурационной ноды нет ни иконки, ни портов. Впрочем, две другие секции – «Properties» и «Description» – по-прежнему присутствуют.
В левой нижней части этого меню показывается, сколько нод используют эту конфигурационную ноду, а в правой нижней части находится меню для выбора того, какими потоками будет использоваться эта конфигурационная нода. По умолчанию она будет использоваться всеми потоками, но через это меню можно задать использование этой ноды только одним потоком.
Для управления всеми конфигурационными нодами можно использовать вкладку «Config» в боковой панели. Чтобы открыть ее, кликните на кнопку с перевернутым треугольником справа вверху (под кнопкой с тремя полосками) и в открывшемся меню выберите «Configuration nodes».
«Проводки»
Чтобы подключить одну ноду к другой, зажмите левой кнопкой мыши на порте одной ноды, протяните этот «проводок» к порту другой ноды, а затем отпустите левую кнопку мыши.
Вы также можете зажать клавишу Ctrl если у вас Windows или ⌘ если у вас Mac, кликнуть левой кнопкой мыши по порту одной ноды (и отпустить), а затем по порту другой ноды, а затем отпустить Ctrl (Windows) или ⌘ (Mac). Но если не отпускать Ctrl (Windows) или ⌘ (Mac), и если у ноды, к которой мы только что подключились, есть выходной порт, то из него начнет тянуться новый проводок. Это позволяет быстро соединить друг с другом несколько нод.
Этот метод можно объединить с меню быстрого добавления нод (для использования которого тоже требуется клавиша Ctrl если у вас Windows или ⌘ если у вас Mac. Это позволяет быстро добавлять в поток нужные ноды, попутно объединяя их с уже созданными нодами потока.
Разбиение проводков
Если ноду, у которой есть входной и выходной порт, переместить посередине проводка, соединяющего две другие ноды, то линия этого проводка станет прерывистой. Если отпустить ноду в этом месте, она автоматически встроится в поток, став промежуточным звеном между двумя прежними нодами.
Перемещение проводков
Чтобы отключить проводок от одного порта и подключить к другому, выберите этот проводок (кликнув на него), зажмите ⇧ Shift на клавиатуре, зажмите левую кнопку мыши на порте, от которого нужно отключиться, протяните проводок к новому порту и отпустите левую кнопку мыши. Если отпустить левую кнопку мыши во время перетягивания проводка, то этот проводок будет удален.
Если к порту подключено несколько проводков, и если ни один из них не выбран, то если зажать ⇧ Shift , а затем зажать левой кнопкой мыши на этом порте, то это позволит переместить сразу все проводки, подключенные к этому порту.
Удаление проводков
Чтобы удалить проводок, выберите его (кликнув по нему левой кнопкой мыши), а затем нажмите на Delete на клавиатуре.
Подпотоки
Подпоток – это набор нод, объединенных в одну ноду.
Подпотоки можно использовать, чтобы снизить визуальную сложность потока, или для того, чтобы создать группу нод для использования в других местах потока.
Когда вы создадите подпоток, он будет добавлен в палитру существующих нод. Индивидуальные экземпляры подпотока могут быть добавлены в рабочую область аналогично всем другим нодам.
Примечание: Подпоток не может содержать экземпляр самого себя – ни напрямую, ни косвенно.
Создание пустого подпотока
Чтобы создать подпоток, кликните на кнопку с тремя полосками справа вверху, а затем на «Subflows» > «Create subflow». Это создаст пустой подпоток и откроет его в рабочей области.
Конвертирование нод в подпоток
Вы также можете конвертировать несколько выбранных нод в подпоток, кликнув на кнопку с тремя полосками справа вверху, а затем на «Subflows» > «Selection to Subflow». Выбранные ноды будут перемещены в новый подпоток и заменены на ноду-экземпляр подпотока.
Создать подпоток при помощи этого метода можно лишь, если все входящие проводки подключены только к одной ноде, т.к. нода создаваемого подпотока может иметь только одну входную точку.
Редактирование подпотока
Есть два способа открыть подпоток и начать редактировать его содержимое. Вам нужно либо дважды кликнуть на ноду этого подпотока в «палитре», либо нажать на кнопку «Edit subflow template» в меню редактирования ноды подпотока.
В результате в рабочей области откроется новая вкладка для этого подпотока. В отличие от вкладок для обычных потоков, у вкладок для подпотоков справа есть крестик, с помощью которого их можно закрыть (спрятать).
Вход и выходы. Входы и выходы подпотока представлены в виде серых квадратных нод, у которых тоже есть порт для обычного подключения к потоку. В верхней панели вкладки подпотока есть инструменты для добавления и удаления входных/выходных нод. Как и у стандартных нод, у ноды подпотока может быть только один вход и сколько угодно выходов.
Свойства подпотока. В верхней панели также есть кнопка «Edit properties», которая открывает меню редактирования свойств подпотока. Здесь тоже можно задать название и описание подпотока – как и у обычных потоков. Кроме того, здесь можно задать, в какой категории «палитры» будет находиться этот подпоток. Вы можете либо задать одну из уже имеющихся категорий, либо создать новую.
Удаление подпотока. В верхней панели инструментов также есть кнопка «Delete subflow», с помощью которой можно удалить подпоток и все его экземпляры.
Выбор нод
Чтобы выбрать ноду, по ней нужно кликнуть, и это также отменит выбор всего, что было выбрано ранее. После выбора ноды во вкладке «Info» в боковой панели появится информационная справка о выбранной ноде – ее свойства, описание и вспомогательная информация.
Если кликнуть по ноде, одновременно с этим зажав Ctrl если у вас Windows или ⌘ если у вас Mac, это добавит выбранную ноду к ранее выбранным нодам (или отменит ее выбор, если она уже была выбрана).
Если кликнуть по ноде, одновременно с этим зажав ⇧ Shift , это выберет как саму ноду, так и все ноды, которые к ней подключены.
Чтобы выбрать проводок, по нему тоже нужно кликнуть. В отличие от нод, одновременно можно выбрать только один проводок.
Прямоугольное выделение
Чтобы выбрать несколько нод, можно воспользоваться инструментом прямоугольного выделения. Для этого зажмите левую кнопку мыши в нужном месте рабочей области, а затем потяните мышь в нужную сторону, чтобы получившимся прямоугольником охватить нужные ноды.
Проводки с помощью этого инструмента выделить нельзя.
Выбор всех нод
Чтобы выбрать все ноды в текущем потоке, кликните по рабочей области с нужным потоком, а затем нажмите горячие клавиши Ctrl + A / ⌘ + A .
Буфер редактора
Редактор Node-RED поддерживает стандартные операции копирования ( Ctrl + C / ⌘ + C ), вырезания ( Ctrl + X / ⌘ + X ) и вставки ( Ctrl + V / ⌘ + V ).
Примечание: Эти операции используют не системный буфер, а буфер редактора.
Импорт и экспорт потоков
Потоки можно импортировать в редактор Node-RED и экспортировать из него при помощи JSON-кода, что заметно упрощает обмен потоками между пользователями.
Импорт потоков
Чтобы импортировать поток, откройте меню импорта. Для этого кликните по кнопке с тремя полосками справа вверху, а затем на «Import» > «Clipboard» (также можно просто нажать Ctrl + I / ⌘ + I ). Затем вставьте JSON-код в поле посередине и кликните на кнопку «Import».
Кнопка «Import» будет активна только, если в окно будет вставлен корректный JSON-код.
Здесь также можно задать, куда импортировать поток – в текущий поток или создать новый поток.
Экспорт потоков
Чтобы экспортировать поток, откройте меню экспорта. Для этого кликните по кнопке с тремя полосками справа вверху, а затем на «Export» > «Clipboard» (также можно просто нажать Ctrl + E / ⌘ + E ). Здесь находится JSON-код, который можно скопировать и поделиться с другими.
Здесь также можно выбрать, что именно нужно экспортировать – выделенные ноды, текущий поток или все потоки сразу.
Кроме того, здесь можно задать формат экспортируемого JSON-кода – его можно сделать либо компактным, либо упорядоченным. В компактном формате JSON-код будет преобразован в одну строчку без пробелов. В упорядоченном формате JSON-код примет удобочитаемый вид – со строчками, имеющими правильные отступы.
Поиск
Для поиска нод, находящихся в рабочей области (включая конфигурационные ноды), можно воспользоваться меню поиска. Чтобы открыть его, кликните на горячие клавиши Ctrl + F / ⌘ + F .
В этом меню показываются все свойства ноды, что позволяет найти ноду по ее ID, типу, названию и т.д.
Если выбрать ноду в выдаче поиска, спустя миг она будет показана в рабочей области редактора.
«Палитра»
«Палитра» содержит все ноды, установленные в редактор и готовые к использованию.
Они сгруппированы в несколько категорий. В самом верху находятся категории «input», «output» и «function», но если у вас есть подпотоки, то самой верхней категорией будет «subflows». Ноды в категории можно развернуть и свернуть – для этого кликните по ее «шапке».
Чтобы развернуть/свернуть все категории, воспользуйтесь двумя кнопками в самом низу «палитры» – они изображены в виде двойных стрелочек, направленных вниз и вверх.
В верхней части палитры есть поле для ввода текста, предназначенное для поиска нужных нод.
Меню «Manage palette»
Меню «Manage palette» можно использовать, в частности, для установки в «палитру» новых нод. Чтобы открыть его, кликните по кнопке с тремя стрелочками справа вверху, а затем на пункт «Manage palette». Также можно просто нажать горячие клавиши Ctrl + ⇧ Shift + P / ⌘ + ⇧ Shift + P .
В меню «Manage palette» есть две вкладки:
- «Nodes» – здесь показаны модули, в данный момент установленные в редактор
- «Install» – здесь показаны модули, которые можно установить в редактор
Управление нодами
На вкладке «Nodes» показываются название и версия модуля, а также список всех нод, входящих в этот модуль.
Кроме того, на этой вкладке модули можно удалить, обновить и отключить. Если нода в данный момент используется в потоке, ее нельзя ни удалить, ни отключить.
Установка нод
На вкладке «Install» можно искать модули, а затем устанавливать их в редактор.
Чтобы найти нужный модуль, введите его название в поисковую строку. В результатах поиска будет показана информация о модуле, включая то, когда он в последний раз был обновлен, а также ссылка на документацию.
Чтобы установить модуль, кликните на кнопку «Install».
Боковая панель
Боковая панель содержит несколько полезных инструментов редактора:
- Вкладка «Info» («Node information») – содержит информацию о ноде и вспомогательную справку для нее
- Вкладка «Debug» («Debug messages») – показывает сообщения, отправляемые нодам «debug»
- Вкладка «Config» («Configuration nodes») – для управления конфигурационными нодами
- Вкладка «Context» («Context data») – показывает содержимое контекстов
У некоторых нод есть собственные вкладки в боковой панели – например, у нод модуля «node-red-dashboard».
Чтобы открыть нужную вкладку, кликните по ее иконке или выберите ее в выпадающем меню, открываемое при клике по кнопке с треугольником в правой верхней части боковой панели.
Размер боковой панели можно изменить, зажав левой кнопкой мыши на ее левом краю, а затем потянув влево или вправо. Если потянуть ее до максимума вправо, это спрячет боковую панель. Чтобы снова показать ее, либо кликните по кнопке с тремя полосками справа вверху, а затем на «View» > «Show sidebar», либо просто нажмите горячие клавиши Ctrl + Пробел / ⌘ + Пробел .
Вкладка «Info»
На этой вкладке показывается информация о ноде, выбранной в данный момент:
- Информация о ее свойствах
- Вспомогательная справка
Чтобы перейти на вкладку «Info» с помощью горячих клавиш, воспользуйтесь следующей комбинацией: Ctrl + g / ⌘ + g и после этого нажмите i .
Если никакой ноды не выбрано, в этой вкладке показывается описание текущего потока (его можно поменять в меню редактирования свойств потока). Чтобы открыть его, кликните на кнопку с тремя полосками справа вверху, а затем на «Flows» > «Rename».
Вкладка «Debug»
На этой вкладке показываются сообщения, отправляемые нодам «debug» в потоке, а также некоторые сообщения-логи от редактора.
Более подробно о том, как использовать вкладку «Debug» и понимать структуру этих сообщений, читайте в этом руководстве.
По умолчанию вкладка «Debug» показывает все отладочные сообщения. Но их можно отфильтровать – для этого кликните на кнопку «all nodes», в результате чего откроется меню фильтрации отладочных сообщений.
Это меню поделено на три части:
- «all nodes» – будут показаны все сообщения
- «selected nodes» – здесь можно выбрать ноды «debug» из списка всех доступных нод
- «current flow» – будут показаны сообщения только от тех нод, что находятся в потоке, в данный момент открытом в рабочей области
Примечание: Вкладка «Debug» может показать только 100 последних сообщений. Если сообщения отфильтрованы, то скрытые сообщения тоже будут идти в зачет этих 100 сообщений. Если в потоке есть ноды «debug», выдающие мусорную информацию, их лучше не отфильтровывать, а просто отключить, кликнув на их кнопку в рабочей области.
Кроме того, содержимое вкладки «Debug» можно в любой момент очистить, нажав на кнопку с иконкой мусорной корзины.
Если нажать на кнопку с иконкой монитора, которая находится в правой нижней части вкладки «Debug», это откроет вкладку «Debug» в новом отдельном окне браузера.
Вкладка «Config»
На этой вкладке показаны все конфигурационные ноды, сгруппированные по области их действия.
У каждой конфигурационной ноды будет показан ее тип и название, а также количество обычных нод, которые в данный момент используют эту конфигурационную ноду.
Если конфигурационная нода не используется, ее контур будет прорисован прерывистой линией. Чтобы показать только неиспользуемые ноды, кликните по кнопке «unused» справа вверху.
Чтобы открыть меню редактирования конфигурационной ноды, сделайте по ней двойной клик.
Вкладка «Context»
Эта вкладка показывает содержимое разных контекстов.
Более подробно об использовании контекста читайте в этом руководстве.
Чтобы перейти на вкладку «Context» с помощью горячих клавиш, воспользуйтесь следующей комбинацией: Ctrl + g / ⌘ + g и после этого нажмите x .
Вкладка «Context» поделена на три секции – по одной для каждого контекста.
В секции «Node» показан контекст ноды, выбранной в данный момент. Содержимое контекста не показывается автоматически – чтобы данные загрузились, вам нужно будет кликнуть на кнопку обновления (с двумя стрелочками, показывающими на хвосты друг друга) справа вверху.
В секции «Flow» показывается контекст текущего потока. Данные здесь обновляются автоматически при переключении на другой поток в рабочей области.
В секции «Global» показывается глобальный контекст. Данные здесь обновляются с каждой загрузкой редактора.
Во всех трех секциях для того, чтобы увидеть внесенные изменения, нужно кликнуть на кнопку обновления, соответствующую нужному контексту.
Если провести курсором мыши над названием какого-либо контекстного свойства, покажется кнопка обновления, с помощью которой можно обновить конкретно это значение.
Если провести курсором мыши над значением какого-либо контекстного свойства, покажется кнопка для копирования этого значения в системный буфер. Значение будет преобразовано в JSON-формат, поэтому вы сможете скопировать не всякое значение.
См.также
Внешние ссылки
