Node-RED:Создание нод/HTML-файл

Содержание

Введение

Руководство пользователя

Рецепты

Создание нод

Библиотеки

Перевод: Максим Кузьмин

Проверка/Оформление/Редактирование: Мякишев Е.А.

Черновик

HTML-файл

В файле с расширением «*.html» задается то, как нода будет выглядеть и работать в редакторе Node-RED. Она состоит из трех основных частей, каждая из которых помещена в собственную пару тегов <script>.

1. Главные данные о ноде, необходимые редактору. Сюда входят категория «палитры», редактируемые свойства («defaults») и иконка, которую нужно использовать. Все это должно находиться внутри тегов для обычных JavaScript-скриптов
2. Шаблон, задающий содержимое для меню редактирования ноды. Он задается в скрипте типа «text/x-red» и с атрибутом «data-template-name», где значением служит тип ноды
3. Текст-справка, показываемый на вкладке «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>

Более подробно о создании текста-справки читайте тут.