Visualisierung

Vis ist die in ioBroker standardmässig mitgelieferte Visualisierungslösung. Vis untersteht einer eigenen Lizenz, welche für Privatgebrauch kostenlos ist. Man kann die Lizenzdatei über iobroker.net beziehen und in den Einstellungen der vis-Instanz in der Admin-Konsole eingeben.

 

Soweit ich es erkennen kann, funktioniert aber derzeit auch die unregistrierte Version normal.

Normalerweise wird man zusätzlich noch ein oder mehrere Widget Sätze installieren. Diese findet man in der Admin-Konsole in der Rubrik "ioBroker.vis". Für diese Demo hier benötigen wir die "canvas gauges style Widgets".

In früheren Posts habe ich ja schon gezeigt, wie man auf einfache Weise einen Button mit einer Lampe verbinden kann.

Jetzt möchte ich eine visuelle Darstellung aller Smarthome-Objekte im Haus in einem Guss entwickeln. Leider bin ich grafisch nicht besonders talentiert, aber wir fangen einfach mal klein an:

Raspberry Pi Monitor

 

Als erstes bauen wir einen Überwachungsmonitor für den Raspberry, der die ganze Smarthome-Software ja stemmen muss. Die entsprechende Datenquelle ist der Adapter "rpi2.0".

Hier ordnen wir drei Widgets in einem Rahmen zu einer Komponente für diese Aufgabe an. Ich zeige Ihnen im Folgenden Schritt für Schritt, wie Sie hier hin kommen.

1. Richten Sie Ihren Web-Browser auf http://<Adresse Ihres Pi>:8082 und wählen Sie dort "Vis Editor.
2. Klicken Sie ganz oben auf den "Views" Tab und dann in der Zeile darunter auf +, um eine neue View zu erstellen. Geben Sie dieser View einen Namen, z.B. "System".
3. Klicken Sie auf den "Tools"-Tab und wählen Sie eine für Sie passende Auflösung aus. Ich verwende hier "iPad Portrait". Setzen Sie ausserdem ein Häkchen hinter "Default".
4. Wählen Sie links unter Widget einfügen "canvas gauges". oft wird das Resultat eher enttäuschend sein, weil die neu installierten vis widgets keine Icons mitbekommen haben (s. unten Bild 1). Das scheint ein Bug in ioBroker oder Vis zu sein, tritt bei mir jedenfalls auf allen bisher getesteten Computern auf. Wenn das bei Ihnen auch der Fall ist, loggen Sie sich mit einer Konsole auf dem Raspberry ein und tippen Sie: sudo iobroker upload vis. Wenn Sie dann die vis Seite neu laden, sollten die Bilder da sein (s. Bild 2). Diesen "Trick" können Sie immer anwenden, wnen neu installierte Widgets nicht korrekt zu funktionieren scheinen.

Bild 1: Widget-Satz ohne Bilder

Bild 2: Widet-Satz nach 'iobroker upload vis'

5. Ziehen Sie ein Exemplar von "number linear" auf die Design-Fläche. Verbinden Sie die Objekt-ID mit dem Temperatursensor des Raspberry (Denken Sie daran, dass Sie auf das Notizbuch-Symbol rechts bei "Object ID" klicken können, um per Mausklick aus allen Objekten auswählen zu können, statt sich diese länglichen Namen merken zu müssen):

• Beachten Sie, dass Sie unter- und Obergrenze der Skala eingeben können, und dass Sie die Skala in beliebig viele unterschiedlich gefärbte Bereiche unterteilen können. Ich habe hier grün, gelb, rot gewählt.
• In ähnlicher Weise habe ich auch die Anzeigen für Arbeitsspeicher und SD-Karte erstellt, nur dass ich als Basis das horizontale Widget "number flat" nahm.

6. Fehlt noch der Rahmen mit dem Titel. Dies ist das "Border" Widget aus der Gruppe "basic". Die Eigenschaften können Sie wie folgt einstellen:

• Ziehen Sie dann das Widget dann auf die gewünschte Grösse auf und setzen es an die gewünschte Position. Dann würde ich unter "CSS allgemein" noch den z-Index auf 0, bei den anderen vorhin erstellten Widgets aber auf 1 setzen, damit diese über dem Rahmen positioniert werden. Schieben Sie dann diese Widgets in den Rahmen, und Sie sind fertig.

Photovoltaik Monitor

In ganz ähnlicher Weise erstellen wir Anzeigen für momentane Leistung und import/export Status der Solaranlage:

Wie Sie an der unteren Anzeige sehen, kann die 0 durchaus auch in der Mitte der Skala sein.

 

Ausserdem multipliziere ich hier die Messwerte mit -1, damit Import links und Export rechts angezeigt wird, einfach weil mir das "logischer" erscheint. Der Hersteller des Adapters scheint es anders zu sehen, denn dieser liefert negative Werte für exportierten, und positive Werte für importierten Strom. Aber wie Sie sehen, lässt sich alles nach eigenem Geschmack konfigurieren.

(Wir hätten, wenn das nicht genügt, ohne Weiteres auch sin Skript zwischen Adapter und Anzeige schalten können, welches die Messwerte in beliebige andere Werte umwandelt)

Zum ersten Teil - zum vorherigen Teil - zum nächsten Teil