Datenvisualisierung mit Grafana

HyperVisu bietet eine leistungsstarke Integration mit Grafana, einer Open-Source-Analyse- und Visualisierungsplattform. Mit Grafana können Sie anspruchsvolle Energieüberwachungs-Dashboards erstellen, historische Daten visualisieren und Einblicke in die Leistung Ihres Smart Homes gewinnen. In diesem Abschnitt wird erklärt, wie Sie auf Grafana zugreifen, Dashboards mit HyperVisu-Daten erstellen und diese Dashboards in der HyperVisu-Mobile-Anwendung anzeigen.

Zugriff auf Grafana

Grafana ist direkt mit der InfluxDB-Datenbank integriert, die alle Ihre historischen Datenpunkte speichert.

Zugriff über einen Webbrowser

Um auf die Grafana-Oberfläche von Ihrem HyperVisu-Server zuzugreifen:

Öffnen Sie einen Webbrowser und geben Sie die IP-Adresse Ihres HyperVisu-Servers gefolgt von /grafana ein
- Beispiel: http://192.168.1.60/grafana

Authentifizierung und Benutzerverwaltung

Grafana verwendet ein eigenes Authentifizierungssystem mit den folgenden Standard-Anmeldeinformationen:
- Benutzername: admin
- Passwort: zeAAlyhQa5ej
Diese Anmeldeinformationen sind getrennt von Ihrem HyperVisu-Administrationslogin
Aus Sicherheitsgründen wird dringend empfohlen, das Standardpasswort nach Ihrem ersten Login zu ändern.

Dashboards erstellen

Grafana ermöglicht es Ihnen, benutzerdefinierte Dashboards zu erstellen, die Ihre Daten auf sinnvolle Weise präsentieren. Diese Dashboards können verschiedene Arten von Visualisierungen wie Grafiken, Messinstrumente und Statistik-Panels enthalten.

Dashboard-Grundlagen

Um ein neues Dashboard zu erstellen:

Melden Sie sich bei Grafana an und klicken Sie auf das +-Symbol in der Seitenleiste.
Wählen Sie Dashboard aus dem Dropdown-Menü.
Klicken Sie auf Neues Panel hinzufügen, um mit dem Hinzufügen von Visualisierungen zu Ihrem Dashboard zu beginnen.
Speichern Sie Ihr Dashboard, indem Sie auf das Speichersymbol (Diskettensymbol) in der oberen rechten Ecke klicken und einen beschreibenden Namen angeben.

Datenquellen und Abfrage-Struktur

HyperVisu konfiguriert Grafana automatisch mit den folgenden Datenquellen:

InfluxDB: Vorab konfiguriert, um sich mit der integrierten InfluxDB-Datenbank zu verbinden.
- Diese Datenbank enthält alle historischen Daten von Widgets, bei denen das Logging aktiviert ist.
- Daten werden in einem Bucket mit dem Namen "hypervisu" gespeichert.
- Die Daten sind mit der folgenden Struktur organisiert:
  - _measurement: Die Seriennummer Ihres Servers (sichtbar oben links auf der Administrationsseite).
  - _field: Der Werttyp (typischerweise "value_float" für numerische Werte).
  - category_name: Die Kategorie, die dem Widget in HyperVisu zugewiesen ist.
  - widget_name: Der Name des Widgets.
  - object_id: Die eindeutige ID des Kommunikationsobjekts des Widgets.
- Um auf diese Daten zuzugreifen, schreiben Sie Flux-Abfragen, die auf diesen Feldern filtern.

Zusätzliche Flux-Abfragebeispiele

Täglicher Energieverbrauch

from(bucket: "hypervisu")

 | > range(start: -24h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Ersetzen Sie dies durch Ihre Server-SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energie")
 | > filter(fn: (r) => r["widget_name"] == "Verbrauch")
 | > difference()
 | > sum()

Maximale Temperatur der letzten Woche

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Ersetzen Sie dies durch Ihre Server-SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Klima")
 | > filter(fn: (r) => r["widget_name"] == "Temperatur")
 | > max()

Durchschnittlicher stündlicher Stromverbrauch (für Musteranalyse)

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Ersetzen Sie dies durch Ihre Server-SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energie")
 | > filter(fn: (r) => r["widget_name"] == "Aktive Leistung")
 | > aggregateWindow(every: 1h, fn: mean, createEmpty: false)
 | > duplicate(column: "_stop", as: "hour")
 | > timeShift(duration: -1h, columns: ["hour"])
 | > hourSelection(start: 0, stop: 23)
 | > group(columns: ["hour"])
 | > mean()

Energieüberwachungs-Panels erstellen

Die Energieüberwachung ist eine der leistungsstärksten Anwendungen von Grafana innerhalb von HyperVisu. So erstellen Sie Energievisualisierungs-Panels:

Klicken Sie in Ihrem Dashboard auf Panel hinzufügen.
Wählen Sie den Visualisierungstyp aus, der am besten zu Ihren Daten passt (häufige Optionen sind):
- Zeitreihendiagramm: Zum Anzeigen des Stromverbrauchs über die Zeit.
- Messinstrument: Zum Anzeigen des aktuellen Stromverbrauchs.
- Statistik: Zum Anzeigen kumulativer Werte wie täglicher kWh.
Konfigurieren Sie das Panel mit einer Abfrage, die Daten aus InfluxDB abruft:
- Wählen Sie InfluxDB als Datenquelle aus.
- Wählen Sie Flux als Abfragesprache aus.
- Verwenden Sie den Abfrage-Builder oder schreiben Sie eine Flux-Abfrage, um Ihre Energiedaten auszuwählen.
- Ihre Abfrage muss die Seriennummer Ihres Servers als Messfeld referenzieren.
  - Die Seriennummer des Servers finden Sie oben links auf der Administrationsseite.
- Filtern Sie die Daten nach Kategoriename, Widgetname oder Objekt-ID nach Bedarf.

Beispiel-Flux-Abfragen für die Energieüberwachung

Beim Erstellen von Panels müssen Sie Flux-Abfragen schreiben, um Daten aus der HyperVisu InfluxDB-Datenbank abzurufen. Hier sind einige Beispiele:

Stromverbrauch über die Zeit (Zeitreihendiagramm)

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Ersetzen Sie dies durch Ihre Server-SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Ersetzen Sie dies durch die tatsächliche Objekt-ID
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Aktuelle Spannungsanzeige (Messinstrument oder Statistik)

from(bucket: "hypervisu")

 | > range(start: -1h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Ersetzen Sie dies durch Ihre Server-SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Ersetzen Sie dies durch die tatsächliche Objekt-ID
 | > last()

Abfragen nach Objekt-ID

Jedes Objekt, das in der HyperVisu-Datenbank gespeichert ist, hat eine eindeutige Objekt-ID, die Sie im Objektmodal auf der Seite zur Bearbeitung von Geräten der HyperVisu-Administration (oder im Abschnitt "Import/Export" der Administrationsseite, in der Tabelle "Kommunikationsobjekte") finden können:

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2ccf674etf456")  // Ersetzen Sie dies durch Ihre Server-SN
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Ersetzen Sie dies durch die tatsächliche Objekt-ID
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Um ein vollständiges Stromverbrauchs-Panel zu erstellen:

Erstellen Sie ein Zeitreihen-Panel.
Fügen Sie eine der obigen Beispielabfragen ein und passen Sie sie an Ihre spezifischen Server- und Widget-IDs an.
Setzen Sie geeignete Zeiträume (letzte 24 Stunden, letzte Woche usw.).
Fügen Sie eine Einheitformatierung (kW, A, kWh) hinzu, um die Werte leserlicher zu machen.
Passen Sie die Farben an, um unterschiedliche Leistungsniveaus anzuzeigen (z. B. orange für Verbrauch).

Dashboards in HyperVisu anzeigen

Sobald Sie Ihre Grafana-Dashboards erstellt haben, können Sie diese direkt in die HyperVisu-Mobile-Anwendung integrieren, um einfachen Zugriff zu erhalten.

Dashboard-URLs teilen

Um die richtige URL für Ihr Dashboard zu finden:

Öffnen Sie Ihr Dashboard in Grafana.
Klicken Sie auf die Schaltfläche Teilen in der oberen Navigationsleiste.
Wählen Sie die Registerkarte Link aus.
Kopieren Sie die bereitgestellte URL.

WebView-Widgets erstellen

Um Grafana-Dashboards in der HyperVisu-Anwendung anzuzeigen:

Gehen Sie in ElauPro zum Abschnitt Visualisierung.
Klicken Sie auf Widget hinzufügen.
Wählen Sie WebView als Widget-Typ aus.
Konfigurieren Sie das Widget:
- Geben Sie ihm einen beschreibenden Namen (z. B. "Energie-Dashboard").
- Weisen Sie es einer geeigneten Kategorie zu (z. B. "Energie").
- Wählen Sie den Raum aus, in dem es angezeigt werden soll.
- Geben Sie im URL-Feld die vollständige URL zu Ihrem Grafana-Dashboard ein.
  - Format: http:////grafana/d//?orgId=1

Dashboards in der mobilen Anwendung anzeigen

Sobald konfiguriert, können Sie auf Ihre Grafana-Dashboards direkt von der HyperVisu-Mobile-Anwendung zugreifen:

Öffnen Sie die HyperVisu-Mobile-App.
Navigieren Sie zu dem Raum oder der Kategorie, in der sich Ihr WebView-Widget befindet.
Tippen Sie auf das WebView-Widget, um das Grafana-Dashboard zu öffnen.
Das Dashboard wird direkt innerhalb der Anwendung geladen und zeigt Echtzeit- und historische Daten an.

Dashboards für die mobile Ansicht optimieren

Für die beste Erfahrung auf mobilen Geräten:

Verwenden Sie größere Schriftarten und Visualisierungselemente.
Begrenzen Sie die Anzahl der Panels pro Dashboard für die mobile Ansicht.
Erstellen Sie separate Dashboards, die für mobile und Desktop-Ansichten optimiert sind.
Berücksichtigen Sie die Hochformat-Ausrichtung mobiler Geräte bei der Gestaltung von Layouts.
Testen Sie Ihre Dashboards auf sowohl Tablet- als auch telefongroßen Bildschirmen.

Hinweis: Änderungen an Grafana-Dashboards werden sofort in der HyperVisu-Anwendung angezeigt. Es ist nicht erforderlich, das WebView-Widget nach der Aktualisierung des Inhalts oder Layouts eines Dashboards neu zu konfigurieren.