49 lines
3.4 KiB
HTML
49 lines
3.4 KiB
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>
|