KNX + Node-RED: Dashboard-Template für Fensterkontakte

Node-RED ist zwar ein sehr mächtiges Werkzeug, aber das Dashboard lässt etwas zu wünschen übrig. Klar, es gibt Buttons, Slider und auch andere praktische Elemente. Leider sind diese nicht für alles zu gebrauchen. Ich möchte zum Beispiel den Status meiner Fensterkontakte darstellen. Jetzt könnte man anfangen, irgendwelche Elemente in die Richtung zu biegen. Oder man löst das direkt mit eigenen UI Templates. Hier kann man mit HTML, CSS und JavaScript alles machen, was man sich nur vorstellen kann. Leider nur entsprechend kompliziert. Wobei es gar nicht so schwer ist, wenn man nur einfache Dinge tun möchte - so wie ich mit meinen Fensterkontakten. Mehr dazu, im Video!

Was wird benötigt?

• Einen Raspberry Pi mit Raspberry Pi OS
• Eine laufende KNX-Installation
• Ein KNX IP-Interface (oder IP-Router)

Video

HTML-Templates

Getestet mit node-red-dashboard in Version 2.29.3

<div layout="row" layout-align="space-between center" style="padding: 0 6px;">
  <p>Fenster HWR</p>
  <font color="{{msg.payload ? 'green' : 'red'}}">
    {{msg.payload ? 'geschlossen' : 'offen'}}
  </font>
</div>

<div layout="row" layout-align="space-between center" style="padding: 0 6px;">
  <p>Fenster HWR</p>
  <font color="{{msg.payload ? 'red' : 'green'}}">
    <i class="fa fa-square" aria-hidden="true"></i>
  </font>
</div>

Tipp

Nachdem das Video nun schon eine Weile online ist, hat mich Felix aus der Community darauf hingewiesen, dass es eine bessere Variante gibt, die Positionen im Template festzulegen. Und zwar gibt es vordefinierte CSS-Klassen, welche man auch auf dem UI-Template selbst festlegen kann.

layout-row nr-dashboard-text layout-align-space-between-center

Das HTML-Template dafür sieht dann z.B. so aus:

<p>Fenster HWR</p>
<font color="{{msg.payload ? 'red' : 'green'}}">
  <i class="fa fa-square" aria-hidden="true"></i>
</font>

»UI Template Konfiguration«

Damit das schön aussieht, muss in den Dashboard-Einstellungen noch festgelegt werden, dass man gerne das “Angular Theme” in UI-Templates verwenden möchte:

»UI Template Dashboard Settings«

Getestet mit node-red-dashboard in Version 3.1.2 (mit 2.29.3 gab es noch kein Feld für “Klasse”)

Produkte

• Meanwell-Netzteil **
• MDT Interface **

Hier findest Du die vierte Generation des Raspberry Pi. Darunter findest Du das passende Gehäuse und SD-Karten.