Tuto Multimédia Graph De Température, Humidité, Consommation...sur Nas

[Lazer]

DomoCharts

Version 5.0

Pour Fibaro Home Center 2

 

 

Sommaire :

• 1. Présentation
• 2. Pré-requis
• 3. Installation
• 3.1 Pages Web
• 3.2 Base de données MySQL
• 3.3 Virtual Device
• 3.4 Scène
• 4. Mise à  jour
• 5. Utilisation
• 6. Evolutions futures

 

 

1. Présentation

Notre box est géniale, il y des beaux graphiques de consommation et de température, mais il manque la possibilité de grapher toutes les autres données, et l'historique des données conservées est purgé au bout d'un certain temps.
Voici donc un ensemble de scripts permettant de générer des graphiques de température, humidité, consommation, batterie, etc... de tous les devices connus du Home Center 2.
J'ai repris le travail initié par Byackee sur le forum officiel de Fibaro : make your graphics automatically

Voici quelques unes des améliorations apportées :

• Nouvelle structure de base de données (nouvelles tables, modification des tables existantes, création d'index, ...)
• Meilleures performances
• Prise en compte des valeurs suivantes : température, humidité, luminosité, batterie, consommation électrique instantanée, électrique électrique cumulée, CO2, pression atmosphérique, niveau sonore, pluie, vent (certaines données sont disponibles grâce au plugin Netatmo)
• La zone de graphe s'adapte automatiquement en pleine page du navigateur web
• Gestion des pièces de la maison, afin de différencier les sondes portant le même nom (par exemple "Thermomètre salon" et "Thermomètre chambre") sur le graphique
• Purge des anciennes données après 21 jours (sinon les tables grossissent trop), avec consolidation les données par jour pour une conservation longue durée dans des tables séparées
• Utilisation de la dernière version des bibliothèques Highcharts, Highstock, Highslide, jQuery
• Support complet des HC2 v3 et v4.
• Energie électrique cumulée (en kWh) : support des tarifs BASE et HC/HP avec configuration statique des horaires
• Quelques nouveautés visuelles sur les graphiques (échelle de 0 à  100% pour les batteries et humidité en pourcentage), ainsi qu'un code couleur pour les valeurs hors-normes
• Installation de la base de données sans utiliser phpMyAdmin grâce à  un simple script
• En attendant les plugins utilisateurs, support de "sondes virtuelles", en fait il s'agit de valeurs stockées dans des variables globales et mises à  jour via l'API (particulièrement utiles pour les utilisateurs de FHEM, Zibase, etc... pour les protocoles tels que EnOcean et Oregon)
• Résolution de nombreux petits bugs remontés sur le forum ou non (UTF-8, quotes, pièce 'météo', utilisation des champs adresse IP et Port du VD, etc...).
• Bouton "Delete" dans le popup après clic sur un point permettant de supprimer une valeur aberrante, afin de conserver une courbe homogène
• Meilleure gestion des erreurs, avec remonté des message autant que possible (dans le debug du VD, et/ou sur le graph)
• Réécriture (presque) complète du code des boutons de VD et des pages PHP d'insertion des données, avec une API qui utilise le format de données JSON. C'est beaucoup plus propre, évolutif (je m'en sert pour mes graphs de consommation d'eau et d'énergie électrique, issues d'autres source), et un gain significatif de bande passante réseau.
• Disponible sur Github, donc plus facile de suivre les versions, et de forker le projet : https://github.com/cdriget/DomoCharts (attention sur Github il n'y a que le code source que j'ai développé, le package complet doit être téléchargé en bas de ce tuto sur le forum)
• ...

 

 

 

2. Pré-requis

• Un serveur Web supportant PHP (NAS Synology, hébergement mutualisé, ...)
• Une base de données MySQL (Idem)
• Une Fibaro Home Center 2
• Le package DomoCharts_V5.0.zip (disponible en bas du tutoriel)

 

Dans le package à  télécharger, vous trouverez donc :

• graph : Répertoire à  transférer (via FTP, montage de partage réseau, ...) sur votre serveur Web
• DomoCharts.vfib : Device virtuel à  importer dans le HC2
• Scene.lua : Code source à  copier/coller dans une nouvelle scène
• graphique_128.png : Icône pouvant être utilisée sur le Virtual Device
• clap_graph.png : Icône pouvant être utilisée sur la scène

 

 

3. Installation

 

3.0 Synology

 

Etapes facultatives pour les utilisateurs débutants d'un NAS Synology avec DSM.

Ces étapes doivent être effectuées à  l'aide du compte admin via l'interface Web (accessible par défaut sur le port 5000).

 

3.0.1 Installation de MariaDB (MySQL)

 

Dans le Centre de paquets, rechercher et installer MariaDB :

 

 

Dès que l'installation est terminée, cliquer sur l’icône de MariaDB afin d'accéder à  l'écran de configuration, puis cliquer sur le bouton Changer le mot de passe MariaDB :

 

 

Par défaut, le mot de passe MariaDB est vide, cliquer alors sur le bouton Réinitialiser le mot de passe MariaDB :

 

 

Confirmer en cliquant sur le bouton Oui :

 

 

Le seul compte existant est root, il faut donc créer un mot de passe (note : ce compte root est différent du compte root du Syno, il est donc tout à  fait possible d'avoir des mots de passes différents) :

 

 

 

3.0.2 Activation du serveur Web

 

Dans le panneau de configuration, aller dans la section Services Web, puis cocher la case Activer Web Station :

 

 

Accéder à  la page Web par défaut sur le port 80 du Syno :

 

 

Le Syno est prêt.

 

3.1 Pages Web

 

Transférer toute l'arborescence du répertoire /graph sur le serveur Web via FTP ou montage réseau.

 

Ensuite, éditer le fichier config.inc.php afin d'y modifier les paramètres de connexion à  la base de données MySQL :

// MySQL Server hostname or IP address
$server = 'server';
// MySQL User account
$login = 'login';
// MySQL User password
$password = 'password';
// MySQL Database name
$database = 'database';

 

Note : si vous utilisez le mini-tuto Synology ci-dessus, les paramètres devraient ressemble à  quelques chose comme cela (seul le mot de passe doit être personnalisé) :

// MySQL Server hostname or IP address
$server = 'localhost';
// MySQL User account
$login = 'root';
// MySQL User password
$password = 'password';
// MySQL Database name
$database = 'domotique';

 

Pour des raisons de sécurité, si vous maitrisez MySQL et phpMyAdmin, vous devez créer un utilisateur dédié (différent de root).

Je ne détaille pas cette procédure qui est hors du cadre de ce tutoriel.

 

 

Energie

 

Dans le fichier config.inc.php, une rubrique concerne la configuration des horaires de l'abonnement au fournisseur d'électricité (ERDF, ...).

La variable $TimeSource doit avoir la valeur 'STATIC' :

//*** Teleinfo time for energy
//
// Variable = 'Value'           // Comment                                    : Allowed values
// --------   -------           // ------------------------------------------ : ---------------
$TimeSource = 'STATIC';         // Source of information for date and time    : TELEINFO|STATIC
// ---------------------------- // Valid only if TELEINFO TimeSource is used  : ---------------
$teleinfoTable = 'teleinfo';    // MySQL table name                           : xxxxxxxx
$teleinfoDelay = 60;            // Teleinfo Delay in Seconds                  : ss
// ---------------------------- // Valid only if STATIC TimeSource is used    : ---------------
$TimeHCHP = array(              // HC/HP start times for each EDF rate        : 'hh:mm' => '<BASE|HC|HP>'
	'00:00' => 'HC',
	'06:30' => 'HP',
	'22:30' => 'HC'
);

Sont actuellement supportés les abonnements de type Normal ('BASE'), et Heures Pleines/Heures Creuses ('HP' et 'HC').

Dans l'exemple du dessus, j'ai configuré les horaires HP de 6:30 à  22:30, et des horaires HC de 22:30 à  6:30.

Notez que la variable $TimeHCHP doit obligatoirement commencer à  00:00. Vous pouvez ensuite ajouter autant de tranches horaires que nécessaires, car certains abonnements proposent 2 tranches HC réparties dans la journée.

Si vous avez un abonnement Normal, c'est plus simple, puisqu'il suffit d'indiquer 'BASE' à  partir de 00:00 :

$TimeHCHP = array(
	'00:00' => 'BASE'
);

Avec ces informations, le bouton Energy du module virtuel sera ensuite capable d'interroger l'API de la HC2 afin de récupérer les consommations des différentes équipements pour chaque tranche horaire de chaque journée.

A l'heure actuelle, le graphique d'énergie électrique affiche la somme des kWh pour chaque journée, mais les informations nécessaires sont stockées dès aujourd'hui dans la base de données afin d'effectuer les calculs de coà»ts financiers ultérieurement.

 

 

3.2 Base de données SQL

Afin de créer ou migrer les tables dans la base de données MySQL/MariaDB, il faut appeler la page /graph/install.php sur le serveur Web.

Si tout se passe bien, la page se contente d'afficher Finished :

 

 

Sinon, vous pouvez demander du support sur le forum, en copiant/collant le texte des messages d'erreurs.


3.3 Virtual Device

Ce Virtual Device est responsable de l'envoi des données vers la base de données SQL au travers de pages Web dédiées à  l'insertion des données.
Dans la HC2, aller dans Modules, puis Ajouter ou supprimer un dispositif, puis dans la zone Importer un dispositif virtuel, cliquer sur Parcourir, puis sélectionner le fichier DomoCharts.vfib.
Dans les propriétés de ce Virtual Device, vous pouvez changer l’icône par défaut avec le fichier graphique_128.png (à  répéter pour tous les boutons du VD).

Entrer l'adresse IP du serveur Web et son port :

 

 

On en profite pour relever l'ID du Virtual Device dans la barre d'adresse, qui nous sera utile plus loin lors de la création de la scène :

 

 

Au final, on obtient un nouveau module dans l'interface :

 

3.4 Scène

Cette scène est responsable du déclenchement régulier des appels au Virtual Device.
Dans la HC2, aller dans Scènes, puis Ajouter une scène, puis Ajouter une scène en LUA.

Appelez-là  DomoCharts, bien s'assurer que les cases Scène Active et Ne laissez pas l'alarme arrêter une scène tandis que l'alarme est en marche sont cochées. Utiliser l'icône fournie clap_graph.png.
 

 

Dans l'onglet Avancé, copier/coller le code LUA fourni dans le fichier Scene.lua.
Ne pas oublier de remplacer la valeur de la variable VirtualDeviceID par l'ID de votre Virtual Device que vous avez obtenu dans la barre d'adresse lors de la création de celui-ci.

 

local VirtualDeviceID = 82

 

Au final, on obtient une nouvelle scène dans l'interface :

 

 

La particularité de cette scène est d'attendre le début d'une nouvelle minute avant de commencer à  entrer dans la boucle infinie. Ainsi, si on modifie la scène en plein milieu d'une minute, lorsque le HC2 redémarre immédiatement la scène, on est certain que nos actions seront exécutées à  la prochaine nouvelle minute, conservant bien toujours 1 minute d'intervalle entre 2 appels au Virtual Device.
De plus, différents tests vous permettent d'exécuter certaines actions une fois par minute, par heure, ou par jour. Je m'en sert pas exemple pour mettre à  jour les données de mon Eco-Devices et de mon compteur d'eau (pilotés par d'autres Virtual Devices).
A noter que lors du changement de jour, on attend 1 minute de plus afin d'éviter tout décalage de temps entre la HC2 et le serveur Web (important pour la génération des données consolidées par jour, car on doit être certain que le jour précédent est complètement terminé).

 

 

Par défaut, je propose donc :

• Mise à  jour des valeurs des sondes (températures, humidité, etc... ) toutes les minutes
• Mise à  jour des consommations instantanées toutes les minutes
• Mise à  jour des batteries une fois par jour à  23h
• Mise à  jour des devices une fois par jour (ce qui implique que si vous ajouter une nouvelle sonde de température en journée, celle-ci ne sera visible sur les graphes qu'à  partir de 0h01, bien que les données commencent à  être enregistrée à  la minute près où le device est ajouté dans le HC2)
• Consolidation et purge des données une fois par jour

 

 

3.5 Variables Globales

 

En option, il est possible de grapher des données issues de variables globales. Cela est utile pour les données issues de sources externes, telles que des sondes Oregon sur une Zibase, des sondes EnOcean sur FHEM, etc. Les valeurs de ces variables sont alors mises à  jour en Push via l'API, ou en Pull via une scène. Je ne détaille pas ces étapes qui sont hors du cadre de ce tutoriel.

Il y a 2 boutons à  modifier :

• Bouton n°1 - Sensors

Modifier la variable nommée variables située en début de script. Dans cet exemple, on peut voir 2 sondes de température, et une sonde d'humidité :

-- User Global Variables
local variables = {
	{
		["type"] = "temperature",
		["id"]   = 2001,
		["name"] = "TempCuisine"
	},
	{
		["type"] = "humidity",
		["id"]   = 2002,
		["name"] = "HumCuisine"
	},
	{
		["type"] = "temperature",
		["id"]   = 2003,
		["name"] = "TempSalleCinema"
	}
}

Pour chaque valeur, les champs suivants sont requis :

- type : le type de capteur (temperature, humidity, light, power, co2, pressure, noise, rain, wind)

- id : un ID "virtuel", c'est à  dire qui ne correspond à  aucun device connu par la HC2. N'hésitez pas à  choisir une valeur très élevée que vous n'atteindrez jamais, sous peine de conflit d'ID.

- name : le nom de la variable globale créée dans le panneau

• Bouton n°4 - Devices

De façon similaire :

-- User Global Variables
local variables = {
	{
		["type"] = "temperature",
		["id"]   = 2001,
		["name"] = "Température",
		["room"] = 7 -- Cuisine
	},
	{
		["type"] = "humidity",
		["id"]   = 2002,
		["name"] = "Humidité",
		["room"] = 7 -- Cuisine
	},
	{
		["type"] = "temperature",
		["id"]   = 2003,
		["name"] = "Température",
		["room"] = 5 -- Salle cinéma
	}
}

Pour chaque valeur, les champs suivants sont requis :

- type : le type de capteur => identique au bouton n°1

- id : un ID "virtuel" => identique au bouton n°1

- name : le nom du capteur qui apparaitra dans le graph

- room : l'ID de la pièce dans laquelle se situe le capteur, qui s'affichera dans le graph à  la suite du nom du capteur.

 

 

4. Mise à  jour

 

Pour procéder à  la mise à  jour, il faut :

• Bloquer l'exécution de la scène Graphiques LUA
• Importer le nouveau VD (et mettre l’icône, l'IP et le port comme indiqué plus haut)
• Supprimer puis retransférer le contenu du répertoire /graph sur le serveur Web, comme expliqué au paragraphe 3.1. => Attention à  ne pas perdre vos paramètres dans le fichier config.inc.php.
• Modifier le fichier config.inc.php avec les bonnes infos pour se connecter à  la DB (comme expliqué ci-dessus)
• Dans un navigateur Web, ouvrir la page /graph/install.php afin de préparer la base de données aux changements (comme expliqué ci-dessus)
• Réactiver la scène LUA
• Regarder le Debug des boutons du VD pour vérifier qu'il n'y a pas d'erreur
• Vider le cache du navigateur
• Au bout de quelques minutes, les graphs doivent continuer comme avant, avec les nouveaux graphs

 

 

5. Utilisation

 

Pour visualiser les graphes, il suffit d'aller chercher avec son navigateur l'adresse du serveur Web avec le chemin "/graph", par exemple :

http://192.168.1.1/graph/

.

Pour l'administration, aller sur la page admin.php :

http://192.168.1.1/graph/admin.php

Cette page permet d'ordonner les modules, de donner une couleur à  chaque courbe, et d'en cacher certains :

 

 

Si une valeur aberrante apparait, il zoomer suffisamment sur le graph, puis cliquer sur le point. Dans le popup qui apparait, un bouton Delete permet de supprimer la valeur, afin de conserver une courbe homogène :

 

 

6. Evolutions futures

• En cas de perte de communication entre la HC2 et le NAS/Serveur Web, stockage des données en local dans une Variable Globale, jusqu'à  ce que leur envoi soit possible. Cela permettra de ne pas perdre de données en cas de mise à  jour/reboot/plantage du NAS, ou de la connexion Internet.
• Permettre à  l'utilisateur de créer autant de graphs qu'il veut, en lui permettant d'attribuer un certain nombre de modules à  chaque graph, avec personnalisation du graph (échelle, couleurs, taille, police, etc). Ainsi on pourra avoir un graph de la température des pièces, un autre graph de la température du matos informatique, un graph de la température en fonction de la consommation électrique du chauffage, etc.... à  vous d'imaginer vos besoins
• ...
• Je suis preneur de vos suggestions !

 

7. Informations complémentaires

• Bug si station météo Netatmo => Voir patch des butons Sensors et Devices par @Steven en page 41.
• Tutoriel de @Sakkhho pour ajouter les relevés du compteur de gaz NorthQ en page 44.

 

Charts_V4.1.zip

DomoCharts_V5.0.zip

[Lazer]

Si ça intéresse quelqu'un, je tenterai peut-être de faire une procédure de migration pour ceux qui ont déjàmis en œuvre les scripts donnés sur le forum de Fibaro.

[lolomail]

Superbe taff!!!

J'ai mis en place le script du forum Fibaro mais je sens que je vais tester celui la et la purge des données va être bien pratique pour fluidifier l'affichage !

[Moicphil]

Oui, super tuto...

Je vais essayer de le mettre en place.

[cedriclocqueneux]

Super boulot ! Je vais tester ca rapidement aussi

[Domotique-Home]

Merci pour le partage, je vais remplacer le script de Byackee et tester rapidement celui-ci.

[i-magin]

Très bon tuto : merci @lazer 

Je viens juste de faire l'installation et c'est ok.

Juste une précision : pour visualiser les graphes, il suffit d'aller chercher avec son navigateur favori l'adresse de son serveur Web/graph

[Yohan]

Super boulot merci Lazer pour le partage.

[lolomail]

Bon je viens d'installer et cela ne veut pas marcher, les tables ne se remplissent pas, une idée d'ou cela peut venir?

 

Ce que j'ai fais:

- Suppression de la base HighStock du précédent plugin, création après d'une nouvelle base HighStock avec importation du fichier charts.sql, tout c'est bien passé,

- Création du répertoire graph dans le répertoire web de mon synology, copie des fichiers du répertoire graph zu zip,

- Modification du fichier config.inc.sql, j'ai mis les paramètres suivants:

server = "localhost";
// MySQL User account
$login = "mon login";
// MySQL User password
$password = "mon password";
// MySQL Database name
$database = "Highstock";

 

Au niveau du VD j'ai bien changé l'IP avec par "xxx.xxx.xxx.xxx", j'ai juste changé les noms des boutons pour changer du 1/2/3/4/5.

 

Merci pour le coup de main

[Domotique-Home]

Bonjour,

Votre PHP est bien égale ou supérieure àla version 5 ?

si il est inférieure la fonction Try{} (gestion des exception) pose problème.

[Lazer]

Lolomail,

Deux pistes :

Est tu certain que ta base de données se nomme bien Highstock ? A vérifier dans les paramètres de MySQL.

J'ai mis les boutons 1,2,3,4,5 car sinon l'appel àla fonction pressButton depuis la scène ne fonctionnait pas.

"Envoyé depuis mon Nexus 7 avec Tapatalk"

[Domomat]

Bonjour,

pareil que LOLMAIL... Je me sens moins seul.
mon PHP est celui de SYNOLOGY.

merci pour votre aide

[lolomail]

Merci pour le retour rapide, alors:

La version du logiciel que m'indique phpMyAdmin: 5.1.49

 

Je viens de supprimer la base et d'en recréer une autre, voici le message:

-- phpMyAdmin SQL Dump
--
-- Généré le : Mar 25 Février 2014 à  01:02
-- Version du serveur: 5.1.66
-- Version de PHP: 5.3.8

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";# MySQL a retourné un résultat vide (aucune ligne).

SET time_zone = "+00:00";# MySQL a retourné un résultat vide (aucune ligne).



/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;# MySQL a retourné un résultat vide (aucune ligne).

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;# MySQL a retourné un résultat vide (aucune ligne).

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;# MySQL a retourné un résultat vide (aucune ligne).

/*!40101 SET NAMES utf8 */;# MySQL a retourné un résultat vide (aucune ligne).


-- --------------------------------------------------------

--
-- Structure de la table `domotique_battery`
--

CREATE TABLE IF NOT EXISTS `domotique_battery` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`time` timestamp NOT NULL DEFAULT CURR[...]

 

[Domotique-Home]

@Domomat

Créez un fichier nommer info.php avec le code suivant:

<?php

// Affiche toutes les informations,
phpinfo();

?>

placer le sur votre serveur est exécuter http://nom_du_serveur/info.php

et vérifier bien la version du php.

[Domotique-Home]

@lolomail je parle de la version du php et non mysql.

[Domomat]

Fait :

résultat = 

PHP Version 5.3.27 System Linux NASGOGUE 2.6.32.12 #3810 Tue Dec 17 13:02:18 CST 2013 armv5tel Build Date Nov 6 2013 05:44:43

[lolomail]

Dixit le message que j'ai eu lors de la création de la base de données il semble que la version php soit 5.3.8

[Domomat]

Un point où je ne suis pas sure de moi : 

Les ID des boutons :

 

J'ai bon ?

[Domotique-Home]

Ben voila il faut laisser 1/2/3 etc..

[Domotique-Home]

voilà  la copie d’écran

 

 

[Domomat]

Et l'ID du bouton, je laisse celui déterminé par la box ? par exemple pour le bouton 1, l'ID est "Button11" ou il faut que je mette "1" ? désolé de faire mon boulé

[Domotique-Home]

@lolomail

 

essayez d’exécuter l'url suivante:

 

http://XXX.XXX.XXX.XXX//graph/data_post_temperature.php?id=21&value=20.18

 

en replaçant i'id par id de votre module de température et les XXX par ip du serveur

 

la si ça viens de php une belle erreur s'affichera

[Domotique-Home]

@Domomat

 

Oui on garde les données importées comme sur la copie d’écran

[Domomat]

Merci REMS pour ta patience...

en regardant ton précédent screenshot, je voie fibaro:call(95, "presse...

chez moi j'ai copié "bêtement" le script lua du tuto et j'ai fibaro:call(82, "presse...

 

le 82 ou le 95 correspond à  quoi? je pense que le probleme est là 

[lolomail]

Bon cela vient de démarrer chez moi. Ce que j'ai fait, c'est de refaire la base de données en la nommant HighStock, rien d'exceptionnel jusque là .

Quand j'ai importé le fichier charts.sql j'ai décoché "Ne pas utiliser AUTO_INCREMENT pour la valeur zéro" et apparement cela a fait que c'est parti, a tester sur un autre syno .

 

Pour l'histoire des boutons, il faut mettre dans la scène le numéro qui figure dans le champ ID de chaque bouton du virtual device.

 

Les graphes sont très très sympa, le fait de mettre la pièce aussi. Juste un truc qui serait sympa serait d'avoir trois display pour la température cad:

- Un pour les temps des sondes,

- Un pour les temps des thermostats,

- Un avec les deux

 

Un grand merci pour ce boulot superbe