6.3 – Grafana – ioBroker VIS Integration
In diesem Artikel zeige ich Dir, wie Du ein in Grafana erstelltes Dashboard oder Panel in ioBroker VIS integrieren kannst.
Im 6. Artikel der Grafana Artikelreihe haben wir bereits die Grafana Konfiguration für den Zugriff und das Einbetten von Dashboards in Fremdsysteme konfiguriert. Im Artikel 6.1 haben wir dann einen Link generiert, welchen wir nun in ioBroker VIS über das iFrame Widget darstellen werden.
Im ersten Schritt öffnen wir nun ioBroker VIS und wählen eine View aus, auf der wir das Grafana Dashboard einfügen möchten. Wenn Du die View geöffnet hast, kannst Du jetzt das iFrame 8 Widget über die Widget-Leiste auf der linken Bildschirmseite einfügen und die Größe des Widgets direkt anpassen.
In den Eigenschaften des Widgets können wir jetzt im Bereich Allgemein in das Eingabefeld Quelle den vorher generierten Link aus Grafana einfügen.
Wenn wir jetzt die View öffnen, sehen wir hier das Grafana Dashboard.
Wir haben jetzt das komplette Dashboard in unsere View integriert. Das Grafana Dashboard passt sich dabei an die Größe des Frame-Controls an und verkleinert bzw. verändert die Darstellung automatisch.
Was mich aber aktuell noch stört ist die Tatsache, dass im iFrame Widget auch die komplette Menüleiste von Grafana eingeblendet wird. Ein Anwender könnte so das Dashboard wechseln und andere Daten einsehen. Für dieses Problem gibt es eine separate Option am Link des Dashboards.
Füge dazu einfach hinter den Link noch folgenden Parameter hinzu:
&kiosk
Damit öffnet sich Grafana im sogenannten Kiosk-Modus. In diesem Modus wird nur das Dashboard ohne weitere Menüleisten dargestellt. Der einzige Nachteil ist jetzt die Tatsache, dass im Kiosk-Modus die Zeit-Auswahl nicht mehr eingeblendet wird. Da ich aber in der Regel mit relativen Zeitangaben arbeite, stört mich das hier nicht weiter.
- 1 - Einleitung
- 1.1 - Einrichtung eines neuen Proxmox Containers
- 1.2 - Installation von InfluxDB und Integration in ioBroker
- 1.3 - Installation von Grafana
- 1.4 - Alternative Installation auf einem Raspberry Pi
- 2 - Grundlagen von Grafana
- 2.1 - Aufbau der Software
- 2.2 - Hinzufügen einer neuen Datenquelle
- 3 - Visualisierung im Dashboard
- 3.1 - Graph
- 3.2 - Stat
- 3.3 - Gauge
- 3.4 - Bar gauge
- 3.5 - Plugin - Discret Panel
- 3.6 - Plugin - Clock Panel
- 4 - Weitere Dashboard Einstellungen und Funktionen
- 4.1 - Festlegung des Zeitraums
- 4.2 - Aktualisierung des Dashboards
- 4.3 - Playlists
- 5 - Anwendungsbeispiele
- 5.1 - Dashboard für Wetterdaten
- 5.2 - Dashboard für den Stromzähler
- 5.3 - Dashboard für die Internet Geschwindigkeit
- 5.4 - Gerät/Leuchtmittel History visualisieren
- 6 - Einbindung in andere Systeme
- 6.1 - Anpassung der Grafana Konfiguration
- 6.2 - Dashboard oder Panel freigeben
- 6.3 - ioBroker VIS Integration
- 6.4 - ioBroker Jarvis Integration
- 7 - Grafana-Cloud Einführung
- 7.1 – iobroker, InfluxDB Cloud und Grafana Cloud – InfluxDB Cloud Installation
- 7.2 – iobroker, InfluxDB Cloud und Grafana Cloud – Grafana Cloud Einrichtung
- 7.3 – iobroker, InfluxDB Cloud und Grafana Cloud – Einfaches Dashboard erstellen
Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂
Hallo habe ein Dashboard in die Iobroker VIS eingefügt bekommen. Nur aktualisiert sich das Dashboard nicht egal wo ich es anzeigen lasse, ob auf dem Tablet im Fully Browser oder auf dem PC im Edge Browser. Woran kann das liegen?
Moin Sascha,
hast Du die automatische Aktualisierung des Dashboards aktiviert?
LG Matthias
Hallo Matthias,
ein wirklich tolles Tutorial hast du da zusammengestellt. Vielen Dank!
Ich hänge inhaltlich an einem Punkt, den du in deinen Ausführungen auch als störend herausstellst.
Die Tatsache, dass im iFrame Widget auch die komplette Menüleiste von Grafana eingeblendet wird. Deine Lösung mit dem Kiosk-Modus bringt mich leider nur bedingt weiter.
Ich würde gerne meinen PV-Ertrag (in einer InfluxDB) loggen und mit Grafana in vis darstellen. Das läuft auch soweit – die Systembasis ist ein Raspberry pi4 mit ioBroker.
Typischerweise möchte ich dabei die Vortage, die Vorwochen, die Vormonate, das Vorjahr etc. ansteuerbar darstellen- um genau diesen Zeitraum zu betrachten.
Über die Einblendung des Zeitraums ist das via Grafana-Menüleiste ja grundlegend möglich – wenn auch nicht optimal…(Es sind zu viele Auswahloptionen sichtbar – Die Navigation ist bescheiden).
Alternativ muss ich für alle gewünschten iFrames in vis eine eigene Seite zusammenstellen, um dort den Dashboard-Link bei der iFrame Integration zu verändern. (now-1d/d);(now-2d/d) usw. Hierhin muss ich dann aktuell statisch verlinken.
Kennst du für mein Vorhaben mit 4 Buttons (Tag, Woche, Monat, Jahr) und ggf. einem Kalender eine schönere/einfachere Darstellungsvariante, mit einer dynamischen (kalenderbasierten) Steuerungsoption für das Grafana-Dashboard?
Hallo zusammen,
ich habe versucht das oben gezeigte nachzustellen. Leider bekomme ich nichts angezeigt und im Browser erscheint folgende Fehlermeldung: „Mixed content: load all resources via HTTPS to improve the security of your site“. Die VIS wird also über https aufgerufen, Grafana aber http 8sprich ohne SSL Zertifikat). Hattet ihr das Problem auch und wenn ja, wie habt ihr es gelöst?
Hallo Felix,
in diesem Fall solltest Du dann auch die Grafana-UI auf HTTPS umstellen. Schau mal hier ist dazu ein Konfigurationsbeispiel:
https://community.grafana.com/t/grafana-https-configuration/524
Oder auch hier:
https://www.freifunk-winterberg.net/grafana-per-letsencrypt-mit-https-absichern/
Bitte geb nochmals kurz Bescheid, ob es dann funktioniert hat 🙂
LG Matthias
Hatte das selbe Problem, nach Umstellungen von Grafana auf https ging es. Du brauchst dann aber auch ein Zertifikat.
http://cactusprojects.com/setup-https-for-grafana/
lg
Bei mir kommt dann die Loginseite und nicht das gewünschte Dashboard, was mache ich falsch
Das gleiche Problem habe ich auch, dass mir auf dem Tab das Log In angezeigt wird. Wenn man dort die Log In Daten eingibt, dann wird es korrekt angezeigt. Jedoch nach einer gewissen Zeit muss man sich erneut anmelden.
Hat jemand eine Lösung?
Hi!
Danke für das tolle Tutorial! Eine kurze Frage hätte ich jedoch zum Kiosk-Modus. Diesen habe ich mit &kiosk bei der Einbindung eines Panels im vis aktiviert, aber ich komme immer noch in die Konfigurationseinstellungen des Panels (beim Klick auf die Kopfzeile). Kriegt man das noch irgendwie unterbunden.