ioBroker Jarvis – Teil 19 – TrashSchedule einbinden

Matthias Korte

vor 3 Jahren

In diesem Artikel zeige ich Dir, wie Du über das iFrame-Widget das TrashSchedule-Widget aus VIS einbinden kannst.

In den letzten Artikeln haben wir bereits 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 iFrame Widget, wie Du das VIS-Widget des TrashSchedule-Adapters in Deine jarvis Visualisierung einbinden kannst.

Der Artikel setzt eine Installation und vollständige Konfiguration des Adapters trashSchedule voraus. In folgendem Artikel habe ich dies bereits erklärt:

Abfallkalender in ioBroker integrieren – Jetzt noch einfacher mit TrashSchedule Adapter

Bei mir sind die folgenden Abfallarten in den Einstellungen des Trash-Schedule Adapters hinterlegt. Zudem habe ich jeder Abfallart noch eine eindeutige Farbe zugewiesen.

Im nächsten Schritt öffnest Du die ioBroker VIS Visualisierung. Ich habe für die jarvis Views ein separates Projekt angelegt, in dem ich dann die benötigten Views erstelle. Nach dem Erstellen einer weiteren View habe ich dann über die Widget-Auswahl auf der linken Seite das TrashSchedule Widget ausgewählt und auf die View gezogen.

Auf der View wird das Widget bei mir wie folgt dargestellt.

Hier noch die Konfiguration des Widgets. Ich habe hier die Einstellung „leuchten, wenn fällig“ aktiviert und die restlichen Einstellungen so belassen.

Nach der Ausführung der View in einem weiteren Browser-Tab können wir uns dann die URL (gelb markiert) aus dem Browser in die Zwischenablage kopieren. Diese benötigen wir zu einem späteren Zeitpunkt in der jarvis Konfiguration.

Wir haben jetzt alle Vorarbeiten zum VIS-Widget abgeschlossen und können im nächsten Schritt die jarvis-Visualisierung öffnen. Klicke hier in der Liste der Instanzen auf das Adapter-Website Symbol vom jarvis-Adapter.

Nach dem die Visualisierung gestartet wurde, können wir im nächsten Schritt mit der Konfiguration beginnen. Klicke dazu auf das Zahnrad-Symbol oben rechts.

Für die Anzeige des Kalenders benötigen wir kein Gerät, wir können daher direkt in den Bereich Layout wechseln.

Erstelle Dir jetzt eine neue Tab-Seite oder verwende eine bestehende. In meinem Fall verwende ich die bereits bestehende Tab-Seite für mein Startseite.

Klicke hier in der Spalte auf die gelb markierte Schaltfläche Widget hinzufügen.

In der Widget Konfiguration habe ich dann einen Titel für das neue Widget definiert und den Modul-Typ auf iFrame gesetzt. Die vorher kopierte URL zur VIS Visualisierung kopieren wir jetzt in das URL-Eingabefeld. Zudem habe ich noch die Höhe des iFrame-Widgets auf 300px gesetzt. Die Größe kommt aber natürlich auf Deine Umgebung (Display-Größe, ViIS-View Größe) an. Zudem kannst Du den Aktualisierungsintervall konfigurieren, sodass das Widget nach X-Sekunden neu geladen werden soll. Ich würde diesen Werte relativ hoch setzen (z.B. 43200 Sekunden für 12 Stunden).