node-red-dashboard
Version:
A set of dashboard nodes for Node-RED
49 lines (48 loc) • 3.51 kB
HTML
<script type="text/html" data-help-name="ui_template">
<p>Das template-Widget kann alle gültigen HTML- und Angular/Angular-Material-Anweisungen enthalten.</p>
<p>Dieser Node kann verwendet werden, um ein dynamisches Benutzeroberflächenelement zu erstellen, dessen Erscheinungsbild
basierend auf der Eingangsnachricht geändert wird, und kann Nachrichten an Node-RED zurücksenden.</p>
<p><b>Zum Beispiel:</b><br>
<pre style="font-size:smaller;">
<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></pre>
Wird angezeigt, wenn die als <code>msg.payload</code> empfangene Zahl gerade oder ungerade ist.
Es wird auch die Farbe des Textes zu grün geändert, wenn die Zahl gerade ist, oder rot, wenn ungerade.</p>
<p>Das nächste Beispiel zeigt, wie eine eindeutige ID für Ihre Vorlage erstellt werden kann,
die Standardfarbe fürs Erscheinungsbild ausgewählt wird und wie auf eingehende Nachrichten geprüft werden kann.
<pre style="font-size:smaller;">
<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
// Do something when msg arrives
$("#my_"+scope.$id).html(msg.payload);
}
});
})(scope);
</script></pre>
Auf diese Weise erstellte Vorlagen können kopiert werden und bleiben unabhängig voneinander.</p>
<p><b>Senden einer Nachricht:</b><br>
<pre style="font-size:smaller;">
<script>
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
Click me to send a hello world
</md-button></pre>
Zeigt einen Button an, welcher beim Klicken eine Nachricht mit Payload <code>'Hello world'</code> sendet.</p>
<p><b>Verwenden von <code>msg.template</code>:</b><br>
Der Vorlageninhalt kann auch über <code>msg.template</code> definiert werden.
So können beispielsweise externe Dateien verwendet werden.<br>
Die Vorlage wird bei eingehenden Nachrichten neu geladen, wenn sie verändert wurde.<br>
In das Vorlagefeld geschriebener Code wird ignoriert, wenn <code>msg.template</code> vorhanden ist.</p>
<p>Die folgenden Icon-Schriftarten sind verfügbar: <a href=\"https://klarsys.github.io/angular-material-icons/\" target=\"_blank\">Material-Design-Icon</a> (z.B. <code>check</code> oder <code>close</code>), ein <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font-Awesome-Icon</a> (z.B. <code>fa-fire</code>) oder ein <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md\" target=\"_blank\">Wetter-Icon</a> (z.B. <code>wi-wu-sunny</code>) sein.</p><p>Des Weiteren können alle Google-Material-Icons verwendet werden, indem dem Icon-Namen <code>mi-</code> vorangestellt wird (z.B. <code>mi-videogame_asset</code>).</p>
<p>Wenn eine <b>Klasse</b> angegeben ist, wird sie der übergeordneten Karte hinzugefügt. Auf diese Weise können Sie CSS-Stile auf die ui-card und ihre untergeordneten Elemente anwenden. Die Klasse kann zur Laufzeit festgelegt werden, indem eine Zeichenfolgeneigenschaft <code>msg.className</code> festgelegt wird.</p>
</script>