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

Mit ** gekennzeichnete Links auf dieser Seite sind Affiliatelinks.

KNX + Node-Red: Dashboard-Template für Fensterkontakte
KNX + Node-Red: Dashboard-Template für Fensterkontakte
  • Matthias Kleine
  • 07.11.2021
  • Grundlagen

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

Node-Red-Kurs

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

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

InnoConnect Raspberry Pi 4 (4GB RAM) Bundle 32GB, schwarz **

Raspberry Pi FLIRC Case - Aluminium Gehäuse 4, Silber/schwarz **

SanDisk Ultra 32GB microSDHC Speicherkarte + Adapter bis zu 98 MB/Sek., Class 10, U1, A1, FFP **

Raspberry 4596 Pi - offizielles Netzteil für Raspberry Pi 4 Model B, USB-C, 5.1V, 3A **

Bei einem Netzteil für den Raspberry sollte unbedingt darauf geachtet werden, dass es mindestens 2500mA (2,5A) liefern kann! Andernfalls kann es zu seltsamen Seiteneffekten kommen, wodurch der Raspberry langsam wird, abstürzt oder plötzlich gar nicht mehr startet. Die erforderliche Leistung wird umso höher, desto mehr USB-Geräte angeschlossen werden. Daher sollte am Netzteil auf keinen Fall gespart werden!

Du willst mehr?

Smart-Home-Trainings von A-Z

Steig noch tiefer in die Themen ein und meistere Deine Projekte! Über 10.000 Teilnehmer konnten sich schon von der Qualität der Online-Kurse überzeugen.

ioBroker-Master-Kurs

ioBroker-Master-Kurs

Mehr Infos
Hausbau-Kurs

Hausbau mit KNX

Mehr Infos
Lox-Kurs

Lox-Kurs

Mehr Infos
NodeRed-Kurs

NodeRed-Kurs

Mehr Infos