Node-RED:Библиотеки/node-red-dashboard/Template: различия между версиями
Myagkij (обсуждение | вклад) (Новая страница: «{{Node-RED/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} <syntaxhighlight lang="javascript" enclose="div">…») |
Myagkij (обсуждение | вклад) Нет описания правки |
||
| Строка 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.
