Visualizzazione dei Dati con Grafana

HyperVisu include una potente integrazione con Grafana, una piattaforma di analisi e visualizzazione open-source. Con Grafana, puoi creare cruscotti sofisticati per il monitoraggio dell'energia, visualizzare dati storici e ottenere informazioni sulle prestazioni della tua casa intelligente. Questa sezione spiega come accedere a Grafana, creare cruscotti utilizzando i dati di HyperVisu e visualizzare questi cruscotti nell'app mobile di HyperVisu.

Accesso a Grafana

Grafana è direttamente integrato con il database InfluxDB che memorizza tutti i tuoi punti dati storici.

Accesso Tramite un Browser Web

Per accedere all'interfaccia di Grafana dal tuo server HyperVisu:

Apri un browser web e inserisci l'indirizzo IP del tuo server HyperVisu seguito da /grafana
- Esempio: http://192.168.1.60/grafana

Autenticazione e Gestione Utenti

Grafana utilizza il proprio sistema di autenticazione con le seguenti credenziali predefinite:
- Nome utente: admin
- Password: zeAAlyhQa5ej
Queste credenziali sono separate dal tuo accesso all'amministrazione di HyperVisu
Per motivi di sicurezza, è fortemente consigliato cambiare la password predefinita dopo il primo accesso

Creazione di Cruscotti

Grafana ti consente di creare cruscotti personalizzati che presentano i tuoi dati in modi significativi. Questi cruscotti possono includere vari tipi di visualizzazioni come grafici, indicatori e pannelli statistici.

Nozioni di Base sui Cruscotti

Per creare un nuovo cruscotto:

Dopo aver effettuato l'accesso a Grafana, fai clic sull'icona + nella barra laterale
Seleziona Cruscotto dal menu a discesa
Fai clic su Aggiungi nuovo pannello per iniziare ad aggiungere visualizzazioni al tuo cruscotto
Salva il tuo cruscotto facendo clic sull'icona di salvataggio (simbolo del disco) nell'angolo in alto a destra e fornisci un nome descrittivo

Fonti di Dati e Struttura delle Query

HyperVisu configura automaticamente Grafana con le seguenti fonti di dati:

InfluxDB: Pre-configurato per connettersi al database InfluxDB integrato
- Questo database contiene tutti i dati storici dai widget che hanno la registrazione abilitata
- I dati sono memorizzati in un bucket chiamato "hypervisu"
- I dati sono organizzati utilizzando la seguente struttura:
  - _measurement: Il numero di serie del tuo server (visibile in alto a sinistra della pagina di amministrazione)
  - _field: Il tipo di valore (tipicamente "value_float" per valori numerici)
  - category_name: La categoria assegnata al widget in HyperVisu
  - widget_name: Il nome del widget
  - object_id: L'ID unico dell'oggetto di comunicazione del widget
- Per accedere a questi dati, scriverai query Flux che filtrano in base a questi campi

Esempi Aggiuntivi di Query Flux

Consumo Energetico Giornaliero

from(bucket: "hypervisu")

 | > range(start: -24h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Sostituisci con il numero di serie del tuo server
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energia")
 | > filter(fn: (r) => r["widget_name"] == "Consumo")
 | > difference()
 | > sum()

Temperatura Massima nell'Ultima Settimana

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Sostituisci con il numero di serie del tuo server
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Clima")
 | > filter(fn: (r) => r["widget_name"] == "Temperatura")
 | > max()

Consumo Energetico Orario Medio (per Analisi dei Modelli)

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Sostituisci con il numero di serie del tuo server
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energia")
 | > filter(fn: (r) => r["widget_name"] == "Potenza Attiva")
 | > 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()

Creazione di Pannelli di Monitoraggio Energetico

Il monitoraggio energetico è una delle applicazioni più potenti di Grafana all'interno di HyperVisu. Ecco come creare pannelli di visualizzazione energetica:

Dal tuo cruscotto, fai clic su Aggiungi pannello
Seleziona il tipo di visualizzazione che meglio si adatta ai tuoi dati (le scelte comuni includono):
- Grafico a serie temporale: Per mostrare il consumo di energia nel tempo
- Indicatore: Per visualizzare l'uso attuale di energia
- Stat: Per mostrare valori cumulativi come kWh giornalieri
Configura il pannello con una query che estrae dati da InfluxDB:
- Seleziona InfluxDB come fonte di dati
- Seleziona Flux come linguaggio di query
- Usa il costruttore di query o scrivi una query Flux per selezionare i tuoi dati energetici
- La tua query deve fare riferimento al numero di serie del tuo server come campo di misurazione
  - Il numero di serie del server può essere trovato in alto a sinistra della pagina di amministrazione
- Filtra i dati per nome della categoria, nome del widget o ID dell'oggetto secondo necessità

Esempi di Query Flux per il Monitoraggio Energetico

Quando crei pannelli, dovrai scrivere query Flux per recuperare dati dal database InfluxDB di HyperVisu. Ecco alcuni esempi:

Consumo Energetico nel Tempo (Grafico a Serie Temporale)

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Sostituisci con il numero di serie del tuo server
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Sostituisci con l'ID dell'oggetto reale
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Lettura della Tensione Corrente (Indicatore o Stat)

from(bucket: "hypervisu")

 | > range(start: -1h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Sostituisci con il numero di serie del tuo server
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Sostituisci con l'ID dell'oggetto reale
 | > last()

Query per ID Oggetto

Ogni oggetto memorizzato nel database di HyperVisu ha un ID oggetto unico, questo ID oggetto può essere trovato dal modulo oggetto nella pagina di edizione dei dispositivi dell'amministrazione di HyperVisu (o nella sezione "Importa/Esporta" della pagina di amministrazione, nella tabella "oggetti di comunicazione"):

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2ccf674etf456")  // Sostituisci con il numero di serie del tuo server
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Sostituisci con l'ID dell'oggetto reale
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Per creare un pannello completo di consumo energetico:

Crea un pannello a serie temporale
Incolla una delle query di esempio sopra, adattandola per il tuo server specifico e gli ID dei widget
Imposta intervalli di tempo appropriati (ultime 24 ore, ultima settimana, ecc.)
Aggiungi formattazione delle unità (kW, A, kWh) per rendere i valori più leggibili
Personalizza i colori per indicare diversi livelli di potenza (ad esempio, arancione per il consumo)

Visualizzazione dei Cruscotti in HyperVisu

Una volta creati i tuoi cruscotti Grafana, puoi integrarli direttamente nell'app mobile di HyperVisu per un facile accesso.

Condivisione degli URL dei Cruscotti

Per trovare l'URL corretto per il tuo cruscotto:

Apri il tuo cruscotto in Grafana
Fai clic sul pulsante Condividi nella barra di navigazione in alto
Seleziona la scheda Link
Copia l'URL fornito

Per visualizzare i cruscotti Grafana nell'applicazione HyperVisu:

In ElauPro, vai alla sezione Visualizzazione
Fai clic su Aggiungi Widget
Seleziona WebView come tipo di widget
Configura il widget:
- Dagli un nome descrittivo (ad esempio, "Cruscotto Energetico")
- Assegnalo a una categoria appropriata (ad esempio, "Energia")
- Seleziona la stanza in cui vuoi che appaia
- Nel campo URL, inserisci l'URL completo del tuo cruscotto Grafana
  - Formato: http:////grafana/d//?orgId=1

Visualizzazione dei Cruscotti nell'Applicazione Mobile

Una volta configurato, puoi accedere ai tuoi cruscotti Grafana direttamente dall'app mobile di HyperVisu:

Apri l'app mobile di HyperVisu
Naviga nella stanza o nella categoria in cui si trova il tuo widget WebView
Tocca il widget WebView per aprire il cruscotto Grafana
Il cruscotto si caricherà direttamente all'interno dell'applicazione, mostrando dati in tempo reale e storici

Ottimizzazione dei Cruscotti per la Visualizzazione Mobile

Per la migliore esperienza sui dispositivi mobili:

Usa caratteri e elementi di visualizzazione più grandi
Limita il numero di pannelli per cruscotto per la visualizzazione mobile
Crea cruscotti separati ottimizzati per la visualizzazione mobile rispetto a quella desktop
Considera l'orientamento verticale dei dispositivi mobili quando progetti i layout
Testa i tuoi cruscotti su schermi di dimensioni tablet e telefono

Nota: Le modifiche apportate ai cruscotti Grafana vengono immediatamente riflesse nell'applicazione HyperVisu. Non è necessario riconfigurare il widget WebView dopo aver aggiornato il contenuto o il layout di un cruscotto.