[4/5] CREER SON SITE DOMOTIQUE AVEC ZIBASE, NAS SYNOLOGY, MYSQL ET WORDPRESS

 
  Aller à l'article suivant sur le même thème (dispo depuis le 06/07/2013)

PRÉSENTATION DE GRAPHIQUES DE RELEVES DE SONDES VIA HIGHCHARTS.COM

 

Si vous avez suivi les articles précédents (sinon il n'est pas trop tard :-D), vous avez maintenant l'ensemble de vos sondes enregistrés en base de données. Le présent article va vous permettre d'effectuer des graphiques basés sur ces données enregistrées. 

J'avais à l'époque utilisés l'API google chart et j'ai découvert la librairie highcharts.com qui permet d'obtenir des graphiques plus dynamiques avec des possibilités multiples. Je vous invite à vous rendre directement sur le site highcharts.com qui présente de nombreux exemples et permet de générer le code automatiquement. Le petit inconvénient de cette API est peut être sa lourdeur qui sur tablette pourra présenter quelques lags.

Les graphiques que je vous propose ne sont pas forcément exhaustifs et vous pouvez utiliser tout autre types de modèles. De mon coté, je n'ai pas encore exploré l'ensemble des possibilités de cette excellente API.

Vous trouverez dans l'archive ZIP en pied de cet article, l'intégralité du site mais avec un nouveau répertoire dédié aux graphiques et nommé étrangement graphiques ^^ :

  • Répertoire graphiques composé de 3 sous répertoires.  : 
    • jquery : js correspondant au jquery
    • js : librairie permettant de faire tourner highcharts
    • themes : rhème de highcharts
  • Les graphiques eux-mêmes se trouve à la racine du répertoire ; il y a 5 pages php :
    • highcharts_temp.php qui présente des graphiques de températures et hygrométrie de mes 3 sondes,
    • highcharts_meteo.php qui présente les mesures des sondes anénométrique, pluviométrique et UV,
    • highcharts_chauffage.php qui présente le chauffage on/off (quotidien, par jour et par mois)
    • highcharts_vmc.php qui présente la vitesse de la VMC 1ère vitesse ou 2 ème vitesse (quotidien, par jour et par mois)
    • highcharts_alarme.php qui présente si l'alarme est on/off.
Cela donne des graphes entièrement dynamiques où il est possible de choisir la période (via la saisie de dates ou le slider dessous le graphe) et dynamiquement le graphe correspondant s'affiche. Je trouve cela très sympa sans avoir eu à faire de grands développements.

Voici quelques captures de rendus :




Pour intégrer cela dans le site WORDPRESS, j'ai utilisé la même technique décrite dans l'article précédent grâce à l'extension Shortcode Exec PHP. J'ai intégré le tout dans un menu WORDPRESS en quelques clics.

Cela donne :


J'espère que ces captures vous donneront envie de vous lancer dans l'utilisation de cette API. Un dernier article vous présentant l’affichage des évènements et l'interface pour modifier les sondes devrait voir le jour d'ici le 6/7 juillet 2013. En attendant, vous trouverez ci-dessous le ZIP contenant le site complet avec l'ajout de ces graphiques.


Télécharger le ZIP

Aller à l'article précédent sur le même thème

[3/5] CREER SON SITE DOMOTIQUE AVEC ZIBASE, NAS SYNOLOGY, MYSQL ET WORDPRESS

INTÉGRATION DE PAGES PHP DANS WORDPRESS


Comme évoqué dans le précédent article, ce troisième opus à pour but de vous présenter une solution simple d'intégration de pages PHP dans WORDPRESS.

Pourquoi ce choix d'utilisation de WORDPRESS ?

  • il est quasi intégré (juste une installation) sur mon NAS SYNOLOGY et DSM 4.2,
  • ce CMS (si vous considérer que WORDPRESS en est un) est très connu sur le marché, très documenté et possède de nombreuses extensions,
  • il est simple à mettre en œuvre et permet d'avoir les "bases" d'un site sans écrire une ligne de code HTML, de CSS surtout pour des gens comme moi pas très doué dans ce domaine,
  • il intègre déjà de nombreuses fonctionnalités en natif (menu, commentaire, pages d'accueils, header, footer, widgets...)
  • il dispose de nombreux modèles de sites pour que vous puissiez trouver votre bonheur au niveau de la présentation.
Bien évidemment, vous pouvez préférer d'autres CMS tout aussi riche tels que JOOMLA, DRUPAL, SPIP...

Cet article vous décrit uniquement l'intégration de code PHP dans WORDPRESS via l'extension Shortcode Exec PHP. Si vous ne connaissez pas WORDPRESS, je vous laisse le découvrir à travers toute la documentation disponible sur internet.

Pourquoi choisir une extension pour exécuter du PHP dans des pages WORDPRESS ?

  • ce type d'extension permet de ne pas à avoir à modifier les pages de WORDPRESS dont l'architecture est parfois complexe et touffu,
  • pouvoir effectuer des développements PHP complètement indépendant de WORDPRESS et réutilisable dans d'autres contextes y compris indépendemment de WORDPRESS (comme le code PHP présenté dans le précédent article),
  • pouvoir réutiliser le même code PHP dans d'autres pages de WORDPRESS sans avoir à dupliquer le code (permet notamment une maintenance ou des corrections de bugs plus aisées).
Après cette présentation générale, passons à du concret.

 Intégration de pages PHP dans des pages WORDPRESS

Tout d'abord, j'ai choisi d'utiliser le thème "standard" de WORDPRESS : Twenty Eleven. Le site domotique étant uniquement développé pour notre usage, je n'ai pas voulu chercher parmi les multiples thèmes disponibles mais je ne doute pas qu'il y ait des thèmes plus accrocheurs.

Shortcode Exec PHP permet d’exécuter du code PHP dans les pages, les articles, les commentaires, les widgets et même les flux RSS en utilisant uniquement des "raccourcis" (shortcode) renvoyant à du code PHP. J'ai choisi systématiquement de faire appel à des include de pages PHP afin de garder une totale indépendances et pouvoir editer le code PHP de manière un peu plus pratique que ne le permet la version gratuite de cette extension.

Pour installer Shortcode Exec PHP, rien de plus simple, il suffit d'aller dans la partie admin de votre site WORDPRESS et d'aller dans les extensions et d'ajouter l'extension Shortcode Exec PHP.

Cette installation ajoute dans le menu OUTILS de WORDPRESS un nouveau menu : Shortcode Exec PHP. La page de l'extension se présente sous la forme suivante :


Vous pouvez allez voir la documentation de Shortcode Exec PHP qui vous expliquera simplement ces éléments d'administration qui parlent d'eux-mêmes.

Sur cette même page, vous pouvez ensuite ajouter des "ShortCodes" en les nommant et en leur associant du code PHP correspondant. Ensuite, ces ShortCodes ont juste besoin d'être ajouté à l'endroit souhaité dans votre site WORDPRESS (pour ma part, je n'utilise que des pages dans mon site domotique).

Pour reprendre l'exemple de rendu évoqué dans l'article précédent, voici ce que ça donne :

Ainsi mon ShortCodes nommé AFFICHAGE_SONDES exécute le code le la page PHP sondes_direct.php et il peut être inséré n'importe où dans WORDPRESS .

J'ai inséré ce ShortCodes dans ma page d'accueil de la façon suivante à partir de l'interface d’administration WORPDRESS dans la section Pages :


Et l'affichage de la page donne ainsi le rendu suivant à l'intérieur de votre site WORDPRESS :


La page hérite ainsi de tout les CSS du site selon votre thème choisi et permet d'avoir un rendu acceptable sans rien faire. J'ai fait exactement la même utilisation de ces ShortCodes sur toutes mes pages WORDPRESS en m'appuyant sur un menu et des sous-menus WORDPRESS visibles ci-dessus (Accueil, Graphiques, Evenements, Ajout/modif sondes).

J'espère que cet article vous convaincra de l'utilisation de WORDPRESS et de ce type d'extensions qui permettent une intégration rapide et la création d'un site visuellement sympathique au prix d'aucun effort.

Le prochain article devrait être dispo d'ici dimanche 30 juin 2013 en fonction de mes dispos. Il traitera de la partie rendu graphique et l'utilisation de l'excellente API highcharts et son générateur de codes.

A très vite et comme à l’habitude, n'hésitez pas à commenter et à y apporter vos propres modifications en partageant votre expérience avec les autres !

Aller à l'article précédent sur le même thème




 


[2/5] CREER SON SITE DOMOTIQUE AVEC ZIBASE, NAS SYNOLOGY, MYSQL ET WORDPRESS

SCRIPT "INTELLIGENT" DE RÉCUPÉRATION DES DONNÉES SONDES EN PUSH ET PRÉSENTATION DES RELEVÉS DES SONDES



Comme promis, après le premier article sur la refonte complète de l'enregistrement des données en pull des sondes ZIBASE, voici la suite qui concerne l'enregistrement des données en push d'actionneurs.

En effet, le script PHP (enrprocess.php dans le répertoire push) proposé dans le ZIP en fin d'article permet d'enregistrer les données relatives au chauffage (ON/OFF), à la VMC (Vitesse 1/2) et à l'alarme (ON/OFF).

L'appel se fait très simplement de la ZIBASE dans vos scénarios en prenant 2 paramètres en méthode get :
  • type : qui peut prendre comme valeur : VMC, CHAUFFAGE et ALARME
  • etat : qui peut prendre comme valeur : 0 pour OFF (correspondant à chauffage éteint, alarme désactivé ou VMC vitesse 1) , 1 pour ON (correspondant à chauffage allumé, alarme activé ou VMC vitesse 2)
Les données s'enregistrent automatiquement dans les tables CHAUFFAGE_ETAT, VMC_ETAT ou ALARME_ETAT dont le script SQL de création de tables était présent dans le  premier article.

Le temps en position ON est automatiquement calculé dans la colonne tempson lors du passage à l'état OFF. A noter que lors d'un changement de jour, si le dernier état est 1, un pseudo etat OFF est enregistré à 23:59:59 et un pseudo état ON est enregistré le lendemain à 00:00:01. Cela permet que le tempson calculé sur la journée soit correct.


Comme à l'habitude, j'ai essayé de commenter au maximum le code de la page afin que vous puissiez éventuellement y apporter votre touche ou quelques optimisations.

L'appel HTTP à mettre dans vos scénarios ZIBASE doit ressembler à ceci :


Ceci fait donc appel à la page sur laquelle est hébergée la page enrprocess.php. Dans mon cas, il s'agit d'une adresse réseau local puisqu'il s'agit de mon NAS SYNOLOGY 213+.

En suivant cet article, vous disposez d'une base de données enregistrant l'ensemble des données de votre installation ZIBASE. Par contre, il reste à exploiter l'ensemble de ces données et à leur donner du sens. Je vous propose dans ce même article un petit script PHP (sondes_direct.php dans le répertoire sondes_live) qui permet :
  • d'interroger les sondes en live,
  • d'interroger la base de données pour la partie actionneur,
  • de présenter le tout à l'écran.
Ce petit script s'appuie sur les données en base et notamment des éléments déclarés dans la table PERIPHERIQUES que j'ai fait un peu évolué en déclarant également les actionneurs. La présence de ces actionneurs dans la table permet uniquement de pouvoir agir sur l'ordre d'affichage dans la page sondes_direct.php alors que, pour rappel, celle des sondes permet de garantir la continuité de l'enregistrement en cas de changement de piles de la sonde. Ma table PERIPHERIQUES se présente sous la forme suivante :


Une fois cette table ainsi complétée le script sondes_direct.php devrait présenter le résultat suivant :


Le résultat ci-dessus est lié à une intégration de la page PHP dans un blog WORDPRESS. Ceci fera l'objet du prochain article devant paraître le 23 au soir ou le 24/06/2013.

Je vous remets à disposition ci-dessous un ZIP contenant l'intégralité des pages du premier et du second article pour avoir une solution complète. A noter la présence d'un répertoire images dans lequel j'ai repris les logos de ZODIANET

Télécharger le ZIP