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.
- StateList
- Chart
- DateTime
- StateListHorizontal
- AdapterStatus
- Map
- iFrame
- DisplayImage
- Calendar
- MediaPlayer
- Darstellung von Sensorwerten
- Aktuelle Uhrzeit und Sonnenaufgang bzw. -untergang darstellen
- Karte mit Position von Personen anzeigen
- Zusätzliche GPS-Formatierung für Karte
- Abfalltermine darstellen
- Wetterinformationen darstellen
- Termine darstellen
- Tür- und Fensterstatus darstellen
- Heizkörperthermostat darstellen
- TrashSchedule darstellen
- Szenen steuern
- Beleuchtung steuern
- DWD Unwetterwarnungen darstellen
- Button für Garagentor-Öffner
- Verpasste Anrufe über den TR-064 Adapter darstellen
- Playlisten oder Radio-Sender über MediaPlayer steuern
- Darkmode aufgrund Astrozeit steuern
- Gruppen-Aktionen definieren
- News in jarvis anzeigen
Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂
Hallo Matthias,
deine Anleitungen und Tutorials finde ich klasse.
Vielen Dank dafür.
Darf ich dir eine Frage stellen (also nach dieser hier)? Wie bekomme ich die bestehende Instanz von Jarvis auf die BETA Version upgedatet. Der Weg von dir oben geschrieben funktioniert leider nicht.
Eine Idee, wie ich das ggf. über Konsole machen kann?
VG
André
Hallo Matthias, bitte zeige doch, wie man dem Kalender bzw den Einträgen Bilder/Icons zuweisen kann.
Danke
Jan
Hallo Jan,
das habe ich bis jetzt noch nicht gesehen, muss ich mir mal näher anschauen.
LG Matthias
Hallo Matthias,
kannst du bitte noch ein Beispiel veröffentlichen, wie man die HTML-Daten des Kalenders entsprechend aufbereiten kann.
Vorab vielen Dank
Frank
Hallo Mathias,
prima Anleitung, wie immer, besten Dank dafür !
>>>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 wäre an einen ToDo interessiert – Danke !
Gruß
Harald
Danke für die Anleitung, gibt es noch Besipiele für die Formatierung?
Hi Matthias,
weißt du zufällig, ob es auch möglich ist, JavaScript in ein CustomHTML Widget einzubetten?
Mir schwebt da etwas vor, dass die Seite jede Minute neu lädt (manchmal scheint sich das Dashboard nicht zu aktualisieren).
VG
Alex