Node-RED:Создание нод/HTML-файл
HTML-файл[1]
В файле с расширением «*.html» задается то, как нода будет выглядеть и работать в редакторе Node-RED. Она состоит из трех основных частей, каждая из которых помещена в собственную пару тегов <script>.
- Главные данные о ноде, необходимые редактору. Сюда входят категория «палитры», редактируемые свойства («defaults») и иконка, которую нужно использовать. Все это должно находиться внутри тегов для обычных JavaScript-скриптов
- Шаблон, задающий содержимое для меню редактирования ноды. Он задается в скрипте типа «text/x-red» и с атрибутом «data-template-name», где значением служит тип ноды
- Текст-справка, показываемый на вкладке «Info» в боковой панели. Он задается в скрипте типа «text/x-red» и с атрибутом «data-help-name», где значением служит тип ноды
Главные данные о ноде
Нода должна быть зарегистрирована в редакторе при помощи функции RED.nodes.registerType().
Эта функция принимает два параметра: тип ноды и объект с ее свойствами:
<script type="text/javascript">
RED.nodes.registerType('node-type',{
// Объект со свойствами ноды
});
</script>
Тип ноды
Тип ноды постоянно используется редактором для идентификации ноды. Он должен соответствовать значению, заданному в первом параметре функции RED.nodes.registerType() в соответствующем JavaScript-файле.
Тип ноды также используется в качестве надписи на прямоугольнике ноды в «палитре». Если тип ноды заканчивается на «in» или «out», то это окончание можно обрезать. Например, надпись на нодах «MQTT in» и «MQTT out» в редакторе отображается одинаково – «MQTT» – так как о том, входные они или выходные, можно понять по наличию у них входного/выходного порта.
Свойства
Объект со свойствами ноды содержит всю информацию о ноде, необходимую редактору. В него входят следующие свойства:
- category (строка) – категория в «палитре», где будет находиться эта нода
- defaults (объект) – редактируемые свойства ноды
- credentials (объект) – учетные данные для ноды
- inputs (число) – то, сколько входных портов имеет нода («0» или «1»)
- outputs (число) – то, сколько выходных портов имеет нода (от «0» и более)
- color (строка) – фоновый цвет ноды
- paletteLabel (строка/функция) – надпись на ноде в «палитре» редактора
- label (строка/функция) – надпись на ноде в рабочей области редактора
- labelStyle (строка/функция) – стиль, который нужно применить к надписи
- inputLabels (строка/функция) – опциональная надпись, которая будет появляться при проведении курсором над входным портом ноды
- outputLabels (строка/функция) – опциональные надписи, которые будут появляться при проведении курсором над выходными портами ноды
- icon (строка) – иконка ноды
- align (строка) – информация о выравнивании иконки и надписи
- oneditprepare (функция) – функция, вызываемая сразу после показа меню редактирования. Подробнее читайте тут
- oneditsave (функция) – функция, вызываемая после того, как в меню редактирования ноды нажали на кнопку «Done». Подробнее читайте тут
- oneditcancel (функция) – функция, вызываемая после того, как в меню редактирования ноды нажали на кнопку «Cancel». Подробнее читайте тут
- oneditdelete (функция) – функция, вызываемая после того, как в меню редактирования конфигурационной ноды была нажата кнопка «Delete». Подробнее читайте тут
- oneditresize (функция) – функция, вызываемая после изменения размера меню редактирования ноды. Подробнее читайте тут
- onpaletteadd (функция) – функция, вызываемая, когда в «палитру» добавляется тип ноды
- onpaletteremove (функция) – функция, вызываемая, когда тип ноды удаляется из палитры
Меню редактирования ноды
Этот фрагмент HTML-кода задает содержимое меню редактирования ноды:
<script type="text/x-red" data-template-name="node-type">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-tips"><b>Tip:</b> This is here to help.</div>
</script>
При создании этого фрагмента рекомендуем соблюдать следующее:
- Для создания рядов разметки нужно использовать тег <div> с классом «form-now»
- Как правило, в каждом ряду есть тег <label>, содержащий иконку и название свойства, после чего идет тег <input>. Иконка создается с помощью тега <i> и класса, взятого из Font Awesome 4.7
- Чтобы добавить интерактивности, воспользуйтесь свойством «oneditprepare». С его помощью к элементам меню редактирования можно привязать различные обработчики событий
Более подробно о настройке меню редактирования читайте тут.
Текст-справка
Когда пользователь кликом выбирает ноду в редакторе, справа на вкладке «Info» в боковой панели показывается текст-справка об этой ноде. В ней должна содержаться полная и информативная справка о том, что делает эта нода. Кроме того, в ней должно быть написано, какие свойства задает эта нода для исходящих сообщений, а также то, какие свойства она может задать для входящих сообщений.
Текст в первом теге
отображается во всплывающем окне при наведении курсором на ноду в «палитре», что позволяет быстро понять, за что отвечает та или иная нода.
<script type="text/x-red" data-help-name="node-type">
<p>Быстрая краткая справка о том, что делает эта нода.</p>
<h3>Outputs</h3>
<dl class="message-properties">
<dt>payload
<span class="property-type">string | buffer</span>
</dt>
<h3>Details</h3>
<p>Дополнительная информация о ноде.</p>
</script>
Более подробно о создании текста-справки читайте тут.
См.также
Внешние ссылки
