Node-RED:Библиотеки/node-red-dashboard/Template

Содержание

Введение

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

Рецепты

Создание нод

Библиотеки

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

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

Нода «Template»

Этот виджет может содержать любые корректные директивы HTML и Angular/Angular-Material.

Ноду «Template» можно использовать для создания динамического UI-элемента, меняющего свой внешний вид в зависимости от входящих сообщений и отправляющего сообщения обратно в Node-RED.

Пример:

<div layout="row" layout-align="space-between">
  <p>The number is</p>
  <font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}">
    {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
  </font>
</div>

Этот код создаст UI-элемент, который будет сообщать о том, какое число пришло в ноду в свойстве «msg.payload» – четное («even») или нечетное («odd»). Кроме того, цвет текста тоже будет меняться в зависимости от того, четное ли это число (текст окрасится в зеленый) или нет (текст окрасится в красный).

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

<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Делаем что-нибудь, когда придет сообщение
      $("#my_"+scope.$id).html(msg.payload);
    }
  });
})(scope);
</script>

Шаблоны, созданные таким образом, могут быть скопированы и оставаться независимыми друг от друга.

Ниже – пример для отправки сообщения:

<script>
var value = "hello world";
// или переписываем это значение в функции обратного вызова...
this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
    Click me to send a hello world
 // Кликни меня, чтобы отправить «hello world»
</md-button>

В нем на экране будет показана кнопка, при нажатии на которую виджет отправит сообщение, в «msg.payload» которого будет 'Hello world'.

Использование «msg.template»

Кроме того, вы можете задать содержимое шаблона при помощи «msg.template», что позволяет, к примеру, использовать внешние файлы.

По приходу новых данных шаблон перезагрузится (если новые данные отличаются от старых).

При наличии свойства «msg.template» код в поле «Template» будет проигнорирован.

Можно использовать следующие иконки: Material Design, Font Awesome и Weather.