MyVera – Afficher des graphiques de température et d’humidité

Un tutoriel pour expliquer comment faire afficher des graphiques dans MyVera.

Modif. :  Code affiché différemment (car des guillemets étaient transformées en code html)
et remplacement du fichier zip (version du 11/01/2014, fichier graph.php modifié)

Il y a plusieurs solutions utilisables pour obtenir des graphiques. Le plugin Datamine le permet mais son créateur a annoncé que celui-ci ne sera plus mis à jour. Nous allons donc voir comment ceci peut être faire en passant par un serveur php avec mysql, ce serveur pouvant être celui qui héberge déjà MyVera.

L’idée et la méthode viennent de psykokwak et d’autres contributeurs du forum Toute la domotique. Ayant acheté 3 sondes Oregon Scientific qui mesurent la température et l’humidité ambiante, j’ai mis en pratique ce qu’ils avaient proposé en essayant de l’optimiser un peu.

Les fichiers php pour le serveur sont ici: zip

Le stockage des données dans une base mysql:

La première étape est la création d’une base de donnée:

  • Installez php, mysql et phpMyAdmin sur votre serveur si ce n’est pas déjà fait.
  • Grâce à phpMyAdmin, créez une base de données graph (je vous conseille de la mettre au format utf8_unicode)
  • Ajoutez une table graph_tbl avec les champs ffeed de type text (qui contiendra le nom de la sonde, par exemple s1),  ftimestamp de type timestamp avec comme valeur par défaut  CURRENT_TIMESTAMP (qui contiendra la date et heure d’ajout de la mesure) et fvalue de type double (pour la valeur de la mesure)

Le code de création de la base que vous pouvez utiliser dans phpMyAdmin est le suivant:


CREATE DATABASE 'graph' DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
USE 'graph';

Le code de création de la table:


CREATE TABLE IF NOT EXISTS 'graph_tbl' (
'ffeed' text COLLATE utf8_unicode_ci NOT NULL,
'ftimestamp' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
'fvalue' double NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Pensez à mettre un utilisateur avec login et mot de passe. Celui sera utilisé pour l’accès à cette base.

Il faut maintenant remplir cette base de données:

Le principe est de créer une scène dans la Vera qui enverra, toutes les 30 minutes, les données de température et d’humidité de mes sondes vers une page php chargée d’ajouter ces valeurs à la base de données.

La page php est la suivante:


<?php

$db_name = "graph";
$db_table = "graph_tbl";
$db_login = "login";
$db_passw = "pass";

if (!isset($_GET['f1']) || !isset($_GET['v1']))
die ("v or f is null");

$feeds = $_GET['feeds'];

$db = mysql_connect('localhost', $db_login, $db_passw);
mysql_select_db($db_name, $db) or die('Erreur SQL !<br>'.mysql_error());

$sql = "INSERT INTO ".$db_table." (ffeed, ftimestamp, fvalue) VALUES";
for($i=1;$i<=$feeds;$i++){
$feed = $_GET['f'.$i];
$value = $_GET['v'.$i];
if ($i==$feeds){
$sql.=" (\"".$feed."\", NOW(), ".$value.")";
} else {
$sql.=" (\"".$feed."\", NOW(), ".$value."),";
}

}
mysql_query($sql, $db) or die('Erreur SQL !<br>'.mysql_error());
echo "OK";
?>

Il vous faut mettre votre login et mot de passe dans $db_login et $db_passw. Enregistrez cette page sur votre serveur, par exemple en l’appelant  loggermulti.php et en la mettant dans le répertoire mesgraphs.

Configuration de la Vera:

J’ai trois sondes (à l’extérieure, dans une véranda, coté salon et un dressing). Chaque sonde a créé deux modules (température et humidité) dans la Vera. Pour ne pas avoir à retoucher ma scène si une sonde change d’ID, j’ai créé les variables correspondantes dans Applications/Développer des applications/Editer le démarrage Lua de l’interface de la Vera:


id_tdress = 122
id_hdress = 123
id_tsalon = 124
id_hsalon = 125
id_text = 130
id_hext = 131

demar

J’ai également mis dans cette partie une fonction que je vais utiliser dans ma scène:


function my_graph_sensor_multi(feeds)
local url = "http://192.168.0.1/mesgraphs/loggermulti.php?"
local result = luup.inet.wget(url..feeds)
return result
end

Il vous faut adapter la variable url en fonction de votre serveur: elle lance une page  loggermulti.php dans le répertoire mesgraphs de mon serveur (qui à l’adresse IP 192.168.0.1).

Ajoutez une scène et y mettre le code luup suivant:


local Tid = {id_tdress, id_tsalon, id_text}
local TName = {"T_Dress", "T_Salon", "T_Ext"}
local Hid = {id_hdress, id_hsalon, id_hext}
local HName = {"H_Dress", "H_Salon", "H_Ext"}

local feeds = ""
local nbfeeds= 0
local value=""
for i,id in ipairs(Tid) do
value = luup.variable_get("urn:upnp-org:serviceId:TemperatureSensor1", "CurrentTemperature", id)
value = tonumber(value)
nbfeeds=nbfeeds+1
feeds=feeds.."&f"..nbfeeds.."="..TName[i].."&v"..nbfeeds.."="..value
end
for i,id in ipairs(Hid) do
value = luup.variable_get("urn:micasaverde-com:serviceId:HumiditySensor1", "CurrentLevel", id)
value = tonumber(value)
nbfeeds=nbfeeds+1
feeds=feeds.."&f"..nbfeeds.."="..HName[i].."&v"..nbfeeds.."="..value
end
local result = my_graph_sensor_multi("feeds="..nbfeeds..feeds)
return true

Il vous faudra adapter les 4 premières lignes:
Tid et Hid contiennent les identifiants de mes sondes température puis humidité définis précédemment, TName et HName, le nom que j’ai décidé de leur affecter dans la base mysql.

Le lancement de cette scène appellera la page loggermulti.php, ce qui créera 6 lignes (une ligne pour chaque mesure) comme par exemple:

mysqlPour que cette scène se lance automatiquement toutes les 30 minutes, dans la partie Programmations de la scène, ajoutez une programmation basée sur un intervalle de 30 minutes.

En principe, désormais, votre base se remplie. Vous pouvez faire un test en lançant la scène et en allant voir le résultat dans phpMyAdmin.

Affichage des graphiques dans MyVera:

Nous allons voir comment mettre une sonde de température dans une vue pour que, sous celle-ci soit indiquée la valeur actuelle et qu’un clic sur l’icône affiche un graphique des mesures des sondes.

Première méthode – Ajout du module en tant que sonde dans MyVera

Dans la gestion de la liste des modules, ajoutez votre sonde avec la catégorie Temperature Sensor. Mettez la dans une vue et mettez dans l’url l’adresse suivante:

../mesgraphs/graph2.php?title=Température&windowtime=1&feeds[T_Ext]=Extérieur&feeds[T_Salon]=Véranda&feeds[T_Dress]=Dressing

Cette url est à adapter:
– la page graph2.php est ici dans le répertoire mesgraphs qui est sur le même niveau que le répertoire contenant MyVera, c’est le chemin relatif qui est utilisé,
– Le titre du graphique est Température
– widowtime indique qu’il faut faire le graphique sur un jour
– il y a trois courbes, celles des trois sondes de température. Par exemple la courbe correspondant à T_Ext qui s’appellera Extérieure.

Vous devez modifier graph2.php pour mettre le login et mot de passe de votre base dans ces lignes:

$this->_db_login = « login »;
$this->_db_passw = « passe »;

Le résultat est le suivant:graph2

Par défaut, ce sont des images de 640×480 pixels qui s’affichent dans les graphiques en popup. C’est donc ce que fait graph2.php grâce à pChart v. 2.1.3.

Nous allons voir qu’il est possible d’afficher un graphique dynamique.

Deuxième méthode – Utilisation d’un Custom Device

Nous allons utiliser Highstock pour faire les graphiques. J’ai utilisé cet exemple : Falaf.net. J’y ai apporté plusieurs modifications (possibilité de paramétrer le titre, l’unité, le nom des courbes, graphique qui ajuste sa taille à la fenêtre, affichage des dates au format français…).

La sonde est, cette fois, ajoutée avec la Catégorie Custom Device, la Sub-catégorie Normal. La Variable Texte 1 est temperature, le Suffixe Texte 1 est °C, et l’URL widget est

../mesgraphs/graph.php?title=Température&suffix=°C&feeds[T_Ext]=Extérieur&feeds[T_Salon]=Véranda&feeds[T_Dress]=Dressing

Vous devez également définir la taille d’affichage du graphique (celui-ci s’adaptera à cette taille lors de sa création), ici j’ai mis en Largeur 900 et Hauteur 550.

customtemp

Dans l’url, nous retrouvons une syntaxe comparable à la précédente: le titre qui sera Température, les trois flux par exemple celui de la sonde extérieure T_Ext qui s’appellera Extérieur. Il n’y a pas de durée car le graphique est maintenant dynamique (il affiche 3 jours par défaut), il y a par contre l’unité à afficher (ici °C).

Pour retrouver l’icône du thermomètre, mettre 17 dans Num. icône (ne rien mettre dans Variable etat).

Le résultat:highstock

Le graphique est dynamique. Il est possible de zoomer et de changer la plage afficher, de cacher une courbe, de cliquer sur une courbe pour afficher la valeur mesurée… Et ça marche sur tactile.

Pour faire la même chose avec les valeurs d’humidité, la Variable Texte 1 est humidity, le Suffixe Texte 1 est %, et l’URL widget est du type

../mesgraphs/graph.php?title=Humidité&suffix=%&feeds[H_Ext]=Extérieur&feeds[H_Salon]=Véranda&feeds[H_Dress]=Dressing

Le Num. icône est ici le 16.

39 réflexions sur “MyVera – Afficher des graphiques de température et d’humidité

  1. Bonsoir,
    super idée que de faire des graphs.
    L’avantage de Datamine même si il n’est plus maintenu c’est qu’il ne nécessite pas de serveur externe …..
    Est il possible de faire un tuto pour pouvoir afficher les graphs issus de Datamine ?

    • Je me suis posé la question d’utiliser datamine. J’ai finalement opté pour une autre solution car, comme la plupart des utilisateurs de MyVera, j’ai un serveur sur lequel je peux mettre mes graphes (le problème ne se pose que pour ceux qui ont mis MyVera sur la Vera).

      Datamine est cependant utilisable avec MyVera. Il suffit de pointer vers un de ces graphiques comme je le fait pour highstock.
      Le manuel du plugin explique comment faire:
      When saving a graph, there is the option to specify a “QuickView reference”. This is a short name for the graph – it must not contain spaces, and it should be kept short. You can then use this reference to embed a full window page into a web browser to display the saved graph.
      The URL should be /dm/graph.html?ref=&period=&update=
      If period is specified, it will override the number of days to display the graph, otherwise it will default to the number of days specified when the graph was saved.
      If update is specified, the graph will automatically be updated periodically. The update time is in minutes.

      • Merci pour la réponse.
        J’utilise en effet cette “QuickView reference” qui s’affiche bien dans mon navigateur avec l’url suivante
        192.168.0.5/dm/graph.html?ref=Temperature
        j’arrive à ajouter l’url dans le champ URL Graph de gestion du module température concerné.
        Lorsque je clique dessus, une nouvelle fenetre s’ouvre mais l’image ne s’affiche pas.

      • Je suppose que ce n’est pas une image qui est générée mais une page html.
        Il faut dans ce cas utiliser la deuxième méthode de mon tuto, celle avec le Custom Device et pas le Temperature Sensor.

    • Pour une aide personnalisée, il vaut mieux aller sur le forum Toute la Domotique.
      Sinon, peut-être une piste: S’il y a une erreur 404, c’est probablement que l’url demandée par MyVera n’est pas la bonne. Il est possible de voir quelle est l’adresse demandée en allant voir dans la console de Chrome.
      Deuxième chose, je suppose que contrairement à mon tuto, l’URL n’est pas un chemin relatif, il faut dans ce cas ne pas oublier de commencer par http: (mettre l’url complète)
      Enfin, si c’est pour utiliser MyVera en local, cette URL doit prendre l’ip locale, sinon il faut que la Vera soit accessible depuis le web et il faut mettre l’url externe.
      C’est l’inconvénient d’utiliser la Vera et pas un serveur web…

  2. Pfiou… j ai un peu galere car j utilise une VM qui repondait mal quand utilisee via le Wifi.. mais bref.. j’ai mis ca en place ,et ai rajoute la recuperation de la valeur de la batterie en meme temps que la temperature : LUA :
    tempEnt = luup.variable_get(« urn:upnp-org:serviceId:TemperatureSensor1 », « CurrentTemperature », id_tempent)
    tempEnt = tonumber(tempEnt)
    battEnt = luup.variable_get(« urn:micasaverde-com:serviceId:HaDevice1 », « BatteryLevel », id_fibaent)
    battEnt = tonumber(battEnt)
    feeds= »2&f1=TempEntree&v1= »..tempEnt.. »&f2=BattEntree&v2= »..battEnt

    Pas pour le cote WAF mais pour mes stats.. le tout est donc stocke dans la base de donnee.. avec la temperature, et maintenant, je peux generer un graph de l’utilisation de la batterie de mes capteurs via : http://192.168.178.43/viewgraph.php?title=Batterie&suffix=%&feeds%5BBattEntree%5D=Entree

    Top cette idee.. merci !
    Pierrick

      • Je n’ai rien qui mesure la consommation électrique pour l’instant mais c’est effectivement au moins aussi utile à suivre que la température…

  3. Bonjour
    Bravo pour ton site, ton travail et tout tes tutos. Petite question cependant ,
    Comment fais tu pour récupérer des valeurs de température avec une décimale?

    Merci beaucoup

    • Bonjour,
      Les modules zwave ne permettent pas d’avoir une décimale avec la Vera. J’utilise des sondes (Oregon Scientific) qui transmettent leur signal vers un Rfxcom branché sur la Vera. Il faut acheter le Rfx mais les sondes sont moins chères et avec une décimale. Cet investissement rend la Vera compatible avec d’autres modules (X10, DIO…)

  4. bonjour, comme je viens d’avoir la vera lite hier , je galère un peu , mais bon cela devrait aller j’espère , je suis pas sûr de comment faire, pour mettre une scène qui démarre toute les 30 minutes, car les données ne remontent pas dans la base.

    sinon il doit y avoir un petit oubli , il faut fermer la parenthèse je pense:
    local url = « http://192.168.0.1/mesgraphs/loggermulti.php?&quot »;

    merci à toi pour ton super tuto

  5. Bonsoir,

    Depuis la mise à jour du fichier graph.php de ce matin les graphs ne s’affichent plus. A mon avis il y a une erreur de parenthèse dans le code mais j’ai beau faire un mix de l’ancienne version et de la nouvelle version, rien n’y fait.

    Si vous avez testé le graph.php version 2 et que ça marche je suis preneur de vos retours

    Bonne soirée

    PS: Sbdomo merci pour ta réponse je vais passer commande d’un RFXtrx433 USB et des sondes Oregon

  6. Animfou, je crois que j’ai la solution

    il manque un bout de code ligne 147, il faut ajouter
    ),
    juste avant le ]
    ça fait pour la ligne

    [Date.UTC(), ],

    A+
    Mulb

      • Effectivement, j’avais fait un mauvais copier coller. le fichier zip est corrigé.
        (et comme l’indique wookie33, attention aux guillemets…)

  7. Bonsoir,
    j’essais d’appliquer votre super tuto avec un Vera3 et un NAS Synology.
    Premier problème que j’ai résolu : impossible de créer ma base et table via Phpmyadmin que ce soit avec l’interface ou le code. Résolu : en fait sous mac l’interface bug si on utilise Safari, mais fonctionne avec Firefox.
    Second problème la table ne se remplis pas. Je voudrais tester ma page logermulti.php. Si je l’appel dans mon navigateur j’obtiens : « v or f is null », logique, si j’essaie avec ….loggermulti.php?f=toto&v=12, j’ai le même message et cela ne remplis pas ma base…. Une idée de ce qui ne fonctionne pas ?

    Merci par avance.

    Sohal

    • C’est vrai que je n’ai pas expliqué la syntaxe de loggermulti.php.
      Celle-ci est du type:
      loggermulti.php?f1=NomDuFlux1&v1=Valeur1&f2=NomDuFlux2&v2=Valeur2&feeds=2
      où feeds et le nombre de flux de mesures envoyé,
      fn le nom du flux n et vn, la valeur de ce flux.

      Dans le cas précédent, il faut donc: loggermulti.php?f1=toto&v1=12&feeds=1

      • Merci, mon loggermulti.php fonctionne et remplis ma base, le problème viens donc de mes scripts vera, je vais regarder de ce coté.

  8. Pingback: MyVera - Afficher des graphiques de temp&eacute...
  9. Bonjour, pour mes TPE je suis votre tuto, mais je bloque sur une étape: « Config de la Vera » je ne vois pas ou vous trouvez la fenêtre  » développer les application » (En image)

    Je suis sur raspberry Pi mais cela ne change rien.
    Pouvez vous m’aider ?

    • Pour des TPE ! Intéressant. C’est quoi le sujet ?
      Sinon sur l’interface de la Vera, il faut aller sur le quatrième onglet en haut (« Applications ») puis le troisième sous-onglet « Développer des applications », le sous menu avec « Editer le démarrage Lua » apparaît.
      Bon TPE…

      • Sujet des TPE: contrôler les volets en fonction de la température

        Mon interface vera ne ressemble pas à cela, je suis sur mon navigateur et je me promène dans le dossier MyVera, c’est une interface iPad.
        je pense que je ne cherche pas au bon endroit.

      • Non, ce n’est pas dans MyVera.
        La partie du tuto « Configuration de la Vera » n’est pas liée à cette interface (qui n’est en fait qu’un superviseur). Elle concerne la configuration de la box Vera et s’effectue depuis l’interface web de gestion de cette box (« l’UI5 »). Il faut donc se connecter localement en http à la box ou par le web en https en passant par exemple par https://cpui5.mios.com/

  10. Ha ok il faut un boitier comme une box, je n’avais pas compris ca… Moi tout ce que je veux c’est avoir un graphique des température de ma sonde branché a mon raspi, il doit y avoir plus simple. Merci tout de meme🙂

    • Effectivement, c’est un blog basé sur la gestion domotique en Zwave avec une box Vera…
      En fait, dans mon cas c’est la box qui récupère la température. Ici, ce pourrait être le raspberry Pi.
      En s’inspirant de mon tuto, si le but est de stocker les relevés de température, une solution pourrait être de mettre un CRON sur le raspberry qui lance régulièrement la page php…

  11. Une dernière question: Pourquoi ma page php m’indique « v or f is null » ? D’où viennent v et f ?

  12. Bonjour,

    Ca y est.. j’avance pour de bon.
    J ai mis en place le script ya un moment, maintenant je le ‘tune’ .
    J’aime beaucoup graph.php, interface plus sombre et plus dynamique, ceci dit, j’ai une question.. ou plusieurs, la premiere :
    – il n’y a que les custom devices qui peuvent afficher graph.php .. (qui un type image je crois)
    Ainsi.. pas grave mais..
    – comment faire pour avoir 2 raccourcis (3 custom devices) pour 3 graphiques differents (temperatures/power/etat batteries) ?
    Par exemple, idealement, une icone et un texte differents .. ?

    Merci,
    Pierrick

    • Bonjour,
      Highstock et donc graph.php ne crée pas une image. C’est une page web dynamique. C’est pour cela qu’il faut utiliser un widget dans MyVera en passant par exemple par un custom device.
      Si j’ai bien compris la question, le problème est d’avoir un module qui fait plusieurs mesures et d’obtenir dans MyVera plusieurs modules avec pour chacun une des mesures et le graphique correspondant. Il suffit dans ce cas de faire un clone du module et de le configurer en custom device également…

      • Salut SbDomo,
        Encore une fois, bravo pour ton interface.. c’est genial. JE crane un peu devant mes collegues grace a ca🙂

        Effectivement, cloner le module est ok, mais l’icone du custom device est une petite maison, ma question est, plus clairement🙂 : Comment changer l’icone et la description d un custom device ?
        Merci

      • Tous les modules de MyVera peuvent avoir des icônes personnalisés. Il faut mettre le numéro d’icône à utiliser. J’ai aussi fait un petit article pour expliquer un peu comment marche les custom devices…

      • Ok.. j’avais pas vu le ‘Num Icone’ .. nickel. Maintenant, reste le texte. Si je met un suffixe, il me place ‘undefined’ devant du coup.. pas de texte ?

      • En fait variable texte sert à indiquer si l’on veut afficher sous l’icône une des variables du module, par exemple la variable temperature. Suffixe sert à mettre du texte après cette variable, par exemple °C.
        Par contre si c’est simplement un texte fixe qui est voulu, par exemple un titre, ce n’est pas prévu.
        Une solution est dans ce cas de mettre le texte directement dans l’image de fond, ou plus compliqué, de passer par un module variable container…

  13. Pingback: Des graphs pour tout savoir ou presque | La maison en tique

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s