css – SmartHome im Eigenbau

Ein flexibler Benachrichtigungsbereich in Node-RED Dashboard

Vorgeschichte

Als das SmartHome immer weiter wuchs, kam ich irgendwann an den Punkt, dass ich mir eine einheitliche Vorgehensweise für Benachrichtigungen überlegen musste. Viele Informationen braucht man nur, wenn sie akut sind. Diese über das ganze Dashboard zu verteilen und abzuklappern, wäre unpraktisch, denn Benachrichtigungen entstanden an immer mehr Stellen (der Versuch einer Sammlung):

Unwetterwarnungen
Meldung von technischen Problemen bei Schnittstellen
Meldung von technischen Problemen bei Sensoren
Update-Benachrichtigungen für Geräte-Firmware
Batterie-Meldungen von Sensoren
Indoor und Outdoor Temperaturwarnungen
Türklingel
Warnung bei hoher CPU Auslastung
Verkehrsmeldungen aus dem ÖPNV
Warnmeldungen zum Warmwasservorrat
Müll-Entsorgungsankündigungen
Geöffnete Türen oder Fenster (mit KWL kommt das nicht so häufig vor)
tägliche Niederschlagsmenge (ab einem bestimmten Grenzwert)

NodeRed UI Design

Das Design von NodeRed Dashboard braucht meiner Meinung nach noch ein wenig „Nachhilfe“. Hier die drei wichtigsten Styles meiner „Nachhilfe“, welche ich über ein ui_template Node in die <head> Section einfüge.

<style>
body {
        font-size:0.8em;
        background-color:#E6F7FF !important;
    }
md-card {
        border-bottom: 1px solid #F2F2F2;
    }
.nr-dashboard-cardpanel > p {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
        min-height: 23px !important;
    }
</style>

Das Ergebnis:

Wetterradar im Dashboard

Ich wollte gern ein Wetterradar im Dashboard haben. Doch an solche grafischen Darstellungen kommt man ja nicht immer ohne weiteres (kostenlos) ran – und der DWD bietet nur eine Drei-Länder-Darstellung.

Also musste etwas CSS her, um mittels eines Node-RED template Node nur einen Bildausschnitt darzustellen.

<div style="position:absolute;width: 296px;height: 250px; background-color: #BEBEBE;overflow: hidden;">
<img src="https://www.dwd.de/DWD/wetter/radar/radfilm_thu_akt.gif" style="position: absolute;top:-250px;	overflow: hidden;" />
</div>

Ich definiere einen Container mit overflow:hidden; sodass alles was nicht reinpasst auch nicht angezeigt wird. Mittels top und left kann ich das Bild entsprechend vertikal und horizontal verschieben.

Update 2021

Inzwischen bin ich auf das Radar eines anderen Wetterdienstes umgestiegen. Da dieser bei der Fremd-Verwendung nicht so freigiebig ist, wie der DWD, erwähne ich dessen Namen hier nicht und sagen nur so viel: mit einem simuliertem Website-Zugriff (http request-Node) und der Übermittlung des Cookies und des richtigen Referer-Headers beim Abruf der Radar-Grafik ist so manche unwirksame Sperre überwindbar. Die Grafik speichere ich dabei lokal zwischen (httpStatic).