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

Материал из Онлайн справочника
Перейти к навигации Перейти к поиску

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


HTML-файл[1]

В файле с расширением «*.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>

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

См.также

Внешние ссылки