ioBroker Jarvis – Teil 14 – Mit dem HTML-Widget Termine darstellen

In diesem Artikel zeige ich Dir, wie Du mit dem HTML-Widget Termine des ical Adapters in der Visualisierung darstellen kannst.

In den letzten Artikeln haben wir bereit Geräte zu unserer Visualisierung hinzugefügt, das Layout definiert und zusätzlich einige Widgets kennen gelernt. In diesem Artikel zeige ich Dir anhand dem HTML Widget, wie Du Termine aus dem ical Adapter auf Deiner Visualisierung darstellen kannst.

Als Grundlage dient der ical Adapter mit dem Datenpunkt ical.0.data.html

Bevor wir nun mit der Konfiguration von jarvis beginnen können, müssen wir zunächst prüfen, ob mindestens Version 2 installiert wurde. Gehe dazu in die Adapterliste und suche nach jarvis.

Sollte noch eine ältere Version installiert sein, dann bitte entweder normal updaten oder über Github die beta-Version installieren.

Nach dem wir nun alle Vorbereitungen abgeschlossen haben, können wir jetzt mit der Konfiguration von jarvis beginnen. Klicke hier in der Liste der Instanzen auf das Adapter-Website Symbol.

In der Visualisierung klickst Du dann oben rechts auf das Symbol für die Konfiguration der Visualisierung.

In der Konfiguration legen wir uns im ersten Schritt ein neues Gerät für die HTML-Datenpunkte an. Dazu klickst Du einfach auf Gerät hinzufügen.

Als Geräte-Name habe ich hier HTML gewählt sowie als Gewerk Sonstige. Im nächsten Schritt geben wir dann einen Datenpunkt Bezeichner an. In meinem Fall habe ich hier den Bezeichner termine gewählt. Mit einem Klick auf die Schaltfläche Datenpunkt hinzufügen können wir nun mit der Konfiguration des eigentlichen Datenpunkts beginnen.

Im Feld Datenpunkt (Anzeige) fügen wir dazu den vorher gezeigten Datenpunkt ein.

Wir haben nun die Geräte-Konfiguration abgeschlossen und können jetzt mit der eigentlichen Visualisierung beginnen.

In der Konfiguration können wir daher jetzt in den Bereich Layout wechseln und hier in einer beliebigen Spalte ein neues Widget hinzufügen.

Im ersten Schritt habe ich hier in der Widget Konfiguration den Titel des Widgets angepasst. Als Modul wählen wir hier CustomHTML aus.

Im Bereich der Geräte wählen wir dann unser erstelltes Gerät HTML und wählen dann als primärer Datenpunkt den Bezeichner termine aus.

Nach dem die Konfiguration gespeichert wurde, wird das Widget in der Visualisierung dann wie folgt aus.

Die Darstellung ist zwar nicht perfekt, aber sie funktioniert über diesen Weg sehr einfach und zuverlässig. Wir könnten jetzt z.B. in einem weiteren Datenpunkt und via Script die Formatierung der Daten anders lösen. Bei Interesse kann ich hier gerne ein Beispiel dazu veröffentlichen.

Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂