Node-RED:Библиотеки/node-red-dashboard/Template: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
(Новая страница: «{{Node-RED/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} <syntaxhighlight lang="javascript" enclose="div">…»)
 
Нет описания правки
Строка 4: Строка 4:
{{Myagkij-редактор}}
{{Myagkij-редактор}}


=Нода «Template»=
Этот виджет может содержать любые корректные директивы HTML и Angular/Angular-Material.
Ноду «Template» можно использовать для создания динамического UI-элемента, меняющего свой внешний вид в зависимости от входящих сообщений и отправляющего сообщения обратно в Node-RED.
Пример:
<syntaxhighlight lang="html5" enclose="div">
<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>
</syntaxhighlight>
Этот код создаст UI-элемент, который будет сообщать о том, какое число пришло в ноду в свойстве «msg.payload» – четное («even») или нечетное («odd»). Кроме того, цвет текста тоже будет меняться в зависимости от того, четное ли это число (текст окрасится в зеленый) или нет (текст окрасится в красный).
Пример ниже демонстрирует, как задать для вашего шаблона уникальный ID, прочесть цвет темы, окрасить в него цифру и следить за любыми входящими сообщениями.
<syntaxhighlight lang="javascript" enclose="div">
<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>
</syntaxhighlight>
Шаблоны, созданные таким образом, могут быть скопированы и оставаться независимыми друг от друга.
Ниже – пример для отправки сообщения:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript" enclose="div">
<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>
</syntaxhighlight>
В нем на экране будет показана кнопка, при нажатии на которую виджет отправит сообщение, в «msg.payload» которого будет 'Hello world'.
== Использование «msg.template» ==
Кроме того, вы можете задать содержимое шаблона при помощи «msg.template», что позволяет, к примеру, использовать внешние файлы.
По приходу новых данных шаблон перезагрузится (если новые данные отличаются от старых).
При наличии свойства «msg.template» код в поле «Template» будет проигнорирован.
Можно использовать следующие иконки: [https://design.google.com/icons/ Material Design], [https://fontawesome.com/v4.7.0/icons/ Font Awesome] и [https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md Weather].


=См.также=
=См.также=

Версия от 19:20, 4 июня 2019

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


Нода «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.

См.также

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