HyperVisu comprend une intégration puissante avec Grafana, une plateforme d'analyse et de visualisation open-source. Avec Grafana, vous pouvez créer des tableaux de bord sophistiqués pour le suivi de l'énergie, visualiser des données historiques et obtenir des informations sur les performances de votre maison intelligente. Cette section explique comment accéder à Grafana, créer des tableaux de bord en utilisant les données de HyperVisu et afficher ces tableaux de bord dans l'application mobile HyperVisu.

Accéder à Grafana

Grafana est directement intégré à la base de données InfluxDB qui stocke tous vos points de données historiques.

Accès via un navigateur web

Pour accéder à l'interface Grafana depuis votre serveur HyperVisu :

Ouvrez un navigateur web et entrez l'adresse IP de votre serveur HyperVisu suivie de /grafana
- Exemple : http://192.168.1.60/grafana

Authentification et gestion des utilisateurs

Grafana utilise son propre système d'authentification avec les identifiants par défaut suivants :
- Nom d'utilisateur : admin
- Mot de passe : zeAAlyhQa5ej
Ces identifiants sont séparés de votre connexion d'administration HyperVisu
Pour des raisons de sécurité, il est fortement recommandé de changer le mot de passe par défaut après votre première connexion

Création de tableaux de bord

Grafana vous permet de créer des tableaux de bord personnalisés qui présentent vos données de manière significative. Ces tableaux de bord peuvent inclure divers types de visualisations comme des graphiques, des jauges et des panneaux statistiques.

Notions de base sur les tableaux de bord

Pour créer un nouveau tableau de bord :

Après vous être connecté à Grafana, cliquez sur l'icône + dans la barre latérale
Sélectionnez Tableau de bord dans le menu déroulant
Cliquez sur Ajouter un nouveau panneau pour commencer à ajouter des visualisations à votre tableau de bord
Enregistrez votre tableau de bord en cliquant sur l'icône de sauvegarde (symbole de disque) dans le coin supérieur droit et fournissez un nom descriptif

Sources de données et structure de requête

HyperVisu configure automatiquement Grafana avec les sources de données suivantes :

InfluxDB : Préconfiguré pour se connecter à la base de données InfluxDB intégrée
- Cette base de données contient toutes les données historiques des widgets ayant l'enregistrement activé
- Les données sont stockées dans un bucket nommé "hypervisu"
- Les données sont organisées selon la structure suivante :
  - _measurement : Le numéro de série de votre serveur (visible en haut à gauche de la page d'administration)
  - _field : Le type de valeur (généralement "value_float" pour les valeurs numériques)
  - category_name : La catégorie assignée au widget dans HyperVisu
  - widget_name : Le nom du widget
  - object_id : L'ID unique de l'objet de communication du widget
- Pour accéder à ces données, vous écrirez des requêtes Flux qui filtrent en fonction de ces champs

Exemples supplémentaires de requêtes Flux

Consommation d'énergie quotidienne

from(bucket: "hypervisu")

 | > range(start: -24h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Remplacez par le numéro de série de votre serveur
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energie")
 | > filter(fn: (r) => r["widget_name"] == "Consommation")
 | > difference()
 | > sum()

Température maximale au cours de la semaine passée

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Remplacez par le numéro de série de votre serveur
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Climat")
 | > filter(fn: (r) => r["widget_name"] == "Température")
 | > max()

Consommation d'énergie horaire moyenne (pour l'analyse des tendances)

from(bucket: "hypervisu")

 | > range(start: -7d)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Remplacez par le numéro de série de votre serveur
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["category_name"] == "Energie")
 | > filter(fn: (r) => r["widget_name"] == "Puissance Active")
 | > 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()

Création de panneaux de suivi de l'énergie

Le suivi de l'énergie est l'une des applications les plus puissantes de Grafana au sein de HyperVisu. Voici comment créer des panneaux de visualisation de l'énergie :

Depuis votre tableau de bord, cliquez sur Ajouter un panneau
Sélectionnez le type de visualisation qui convient le mieux à vos données (les choix courants incluent) :
- Graphique de séries temporelles : Pour montrer la consommation d'énergie au fil du temps
- Jauge : Pour afficher la consommation d'énergie actuelle
- Stat : Pour afficher des valeurs cumulées comme les kWh quotidiens
Configurez le panneau avec une requête qui extrait des données d'InfluxDB :
- Sélectionnez InfluxDB comme source de données
- Sélectionnez Flux comme langage de requête
- Utilisez le générateur de requêtes ou écrivez une requête Flux pour sélectionner vos données énergétiques
- Votre requête doit faire référence au numéro de série de votre serveur comme champ de mesure
  - Le numéro de série du serveur peut être trouvé en haut à gauche de la page d'administration
- Filtrez les données par nom de catégorie, nom de widget ou ID d'objet selon les besoins

Exemples de requêtes Flux pour le suivi de l'énergie

Lors de la création de panneaux, vous devrez écrire des requêtes Flux pour récupérer des données de la base de données InfluxDB de HyperVisu. Voici quelques exemples :

Consommation d'énergie au fil du temps (graphique de séries temporelles)

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Remplacez par le numéro de série de votre serveur
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Remplacez par l'ID d'objet réel
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Lecture de tension actuelle (jauge ou stat)

from(bucket: "hypervisu")

 | > range(start: -1h)
 | > filter(fn: (r) => r["_measurement"] == "2cch674etf456")  // Remplacez par le numéro de série de votre serveur
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Remplacez par l'ID d'objet réel
 | > last()

Interrogation par ID d'objet

Chaque objet stocké dans la base de données HyperVisu a un ID d'objet unique, cet ID d'objet peut être trouvé dans le modal d'objet sur la page d'édition des appareils de l'administration HyperVisu (ou dans la section "Import/Export" de la page d'administration, dans le tableau des "objets de communication") :

from(bucket: "hypervisu")

 | > range(start: v.timeRangeStart, stop: v.timeRangeStop)
 | > filter(fn: (r) => r["_measurement"] == "2ccf674etf456")  // Remplacez par le numéro de série de votre serveur
 | > filter(fn: (r) => r["_field"] == "value_float")
 | > filter(fn: (r) => r["object_id"] == "123")  // Remplacez par l'ID d'objet réel
 | > aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
 | > yield(name: "mean")

Pour créer un panneau complet de consommation d'énergie :

Créez un panneau de séries temporelles
Collez l'une des requêtes d'exemple ci-dessus, en l'ajustant pour votre serveur et les ID de widgets spécifiques
Définissez des plages horaires appropriées (dernières 24 heures, dernière semaine, etc.)
Ajoutez un formatage d'unité (kW, A, kWh) pour rendre les valeurs plus lisibles
Personnalisez les couleurs pour indiquer différents niveaux de puissance (par exemple, orange pour la consommation)

Affichage des tableaux de bord dans HyperVisu

Une fois que vous avez créé vos tableaux de bord Grafana, vous pouvez les intégrer directement dans l'application mobile HyperVisu pour un accès facile.

Partage des URL de tableaux de bord

Pour trouver l'URL correcte de votre tableau de bord :

Ouvrez votre tableau de bord dans Grafana
Cliquez sur le bouton Partager dans la barre de navigation supérieure
Sélectionnez l'onglet Lien
Copiez l'URL fournie

Création de widgets WebView

Pour afficher les tableaux de bord Grafana dans l'application HyperVisu :

Dans ElauPro, allez dans la section Visualisation
Cliquez sur Ajouter un widget
Sélectionnez WebView comme type de widget
Configurez le widget :
- Donnez-lui un nom descriptif (par exemple, "Tableau de bord Énergie")
- Assignez-le à une catégorie appropriée (par exemple, "Énergie")
- Sélectionnez la pièce où vous souhaitez qu'il apparaisse
- Dans le champ URL, entrez l'URL complète de votre tableau de bord Grafana
  - Format : http:////grafana/d//?orgId=1

Visualisation des tableaux de bord dans l'application mobile

Une fois configurés, vous pouvez accéder à vos tableaux de bord Grafana directement depuis l'application mobile HyperVisu :

Ouvrez l'application mobile HyperVisu
Accédez à la pièce ou à la catégorie où se trouve votre widget WebView
Appuyez sur le widget WebView pour ouvrir le tableau de bord Grafana
Le tableau de bord se chargera directement dans l'application, affichant des données en temps réel et historiques

Optimisation des tableaux de bord pour la visualisation mobile

Pour la meilleure expérience sur les appareils mobiles :

Utilisez des polices et des éléments de visualisation plus grands
Limitez le nombre de panneaux par tableau de bord pour la visualisation mobile
Créez des tableaux de bord séparés optimisés pour la visualisation mobile par rapport à la visualisation sur bureau
Prenez en compte l'orientation portrait des appareils mobiles lors de la conception des mises en page
Testez vos tableaux de bord sur des écrans de taille tablette et téléphone

Remarque : Les modifications apportées aux tableaux de bord Grafana sont immédiatement reflétées dans l'application HyperVisu. Il n'est pas nécessaire de reconfigurer le widget WebView après avoir mis à jour le contenu ou la mise en page d'un tableau de bord.

Visualisation des données avec Grafana