Une application web pour tracer des graphes

Une application web pour tracer des graphes

Le modèle économique de Yoctopuce est assez simple: Yoctopuce conçoit, fabrique et vends des modules électroniques, offre les librairies nécessaires pour les exploiter, ainsi que le support pour aider les clients à réaliser leur projets. Cependant, Yoctopuce ne fournit pas de solutions clefs en mains. C'est au client de construire son projet en se basant sur les briques fournies. Malgré tout, le support Yoctopuce reçoit régulièrement des requêtes du genre: "comment puis-je afficher un graphe avec les données d'un capteur Yoctopuce?" ou encore "comment obtenir les données d'un capteur Yoctopuce au format CSV". On a donc décidé, une fois n'est pas coutume, de vous offrir une application web prête à l'emploi pour tracer des graphes avec les valeurs des senseurs Yoctopuce.

Principe

L'application proposée est basée sur les callbacks HTTP dont le VirtualHub et tous les YoctoHubs sont capables. Elle se présente sous la forme d'un script PHP qu'il vous suffit de poser sur un serveur PHP. A intervalle régulier, chaque hub contacte le serveur pour lui communiquer la valeur de chaque capteur et le serveur les enregistre. Il suffit alors de se connecter sur le serveur avec un simple browser web pour obtenir une jolie représentation des données. L'aspect de l'interface: style, couleur, taille, position de graphes etc... est entièrement configurable en quelques clics.

Principe de l'application
Principe de l'application


L'avantage de cette architecture est qu'elle permet, entre autres, d'utiliser un serveur public tout en gardant les capteurs bien en sécurité derrière un filtre NAT.

Ingrédients

Pour dessiner des jolis graphes à partir de vos capteurs Yoctopuce, vous aurez besoin

  • De capteurs Yoctopuce, notez que l'application est aussi capable d'afficher l'état d'entrées YAnButton et YRelay.
  • D'un YoctoHub, vous avez le choix entre:

  • D'un serveur PHP, vous pouvez soit

    • Utiliser un hébergement web dont vous disposez déjà
    • Utiliser un hébergement gratuit, à vos risques et péril.
    • Installer un serveur web comme MAMP ou EasyPHP sur une de vos machines locales

  • D'un browser web, peu importe la plateforme ou le système d'exploitation

Notez que vous n'aurez pas besoin de base de données: pour être le plus facile possible à installer, l'application utilise un système de fichiers pour stocker les données des capteurs.

Installation

L'application a été conçue pour être aussi facile que possible à installer, vous avez seulement besoin quelques fichiers PHP que vous trouverez ici ou encore sur GitHub. Ces fichiers sont au nombre de 7: index.php, yocto_api.php, yocto_anbutton.php, yocto_network.php, yocto_relay.php, yocto_wakeupmonitor.php et yocto_wakeupschedule.php. Seul index.html est original, les autres sont de simples copies de ceux qu'on trouve dans la librairie PHP.

Pour installer l'application, tout ce que vous avez à faire est de:

  1. Copier ces fichiers sur votre serveur, de préférence dans un sous-répertoire.
  2. Créer un sous-répertoire data au même niveau.
  3. C'est tout.

Pour les besoins de la démonstration, imaginons que nous ayons copié ces fichiers sur le serveur web www.yoctopuce.com dans le sous-répertoire YoctoCloud, le résultat devrait plus ou moins ressembler à l'image ci-dessous.

Copiez simplement les fichiers sur votre serveur et créez un sous-répertoire data
Copiez simplement les fichiers sur votre serveur et créez un sous-répertoire data


Notez que le serveur va créer des fichiers dans le sous-répertoire data, vous devez donc vous assurer que ce sous-répertoire est accessible en écriture par le serveur.

Configuration

Configuration du Hub

On va supposer que vous souhaitez utiliser un VirtualHub pour envoyer les données d'un Yocto-Meteo sur votre serveur, mais la configuration d'un YoctoHub serait strictement identique. Assurez-vous que votre VirtualHub est bien en train de tourner et à l'aide d'un browser web, connectez-vous dessus. L'adresse est généralement http://127.0.0.1:4444. Ouvrez la fenêtre de configuration et éditez le paramètre Callback URL dans la section outgoing callback. Sélectionnez un Callback de type "Yocto-API callback" et entrez l'URL du script index.php. Dans notre exemple il s'agit de www.yoctopuce.com/YoctoCloud/index.php.

Configuration du callback
Configuration du callback


Une fois les paramètres entrés, cliquez simplement sur le bouton test, vous devriez obtenir le message se terminant par "Done.", comme sur la capture d'écran ci-dessous.

ça marche
ça marche


Si vous obtenez le message "url_fopen is not allowed, please fix server configuration.", créez au même niveau que index.php un fichier nommé ".htaccess" contenant simplement la ligne:

php_flag "allow_url_fopen" "On"


Si le fichier .htaccess existe déjà, ne l'effacez pas! rajoutez simplement la ligne dedans. Une fois que ça marche, fermez la fenêtre de test et sauvez la configuration. C'est tout, la configuration du hub est terminée. Notez que vous pouvez configurer autant de hubs que vous le désirez sur le même callback.

Configuration de l'application

A l'aide d'un browser web, connectez-vous sur le serveur. Dans notre exemple, l'URL est www.yoctopuce.com/YoctoCloud/index.php?edit, notez le ?edit à la fin. Cliquez sur le bouton "Got It", vous allez obtenir une page vide avec menu rouge en haut à gauche. Dans ce menu, choisissez "new chart", et un graphe vide va apparaître au milieu de la page:

Nouveau graphe
Nouveau graphe


Dans coin supérieur gauche du graphe, il y a un bouton "edit" qui va vous permettre de configurer ce graphe: il fait apparaître une interface à gauche de la page. Cette interface est composé de 4 sections

  • Window, qui permet de modifier la taille, la position, et l'aspect du cadre qui contient le graphe
  • Data set, qui permet de définir les courbes affichée par le graphe
  • Vertical axis , qui permet de définir la ou les échelles verticales à utiliser
  • Legend, qui permet d'afficher une légende, si besoin.

Toutes ces options vous permettent de choisir quasiment tous les aspects de votre graphe. Les changements sont appliqués en temps réel, jouer avec devrait donc vous permettre de comprendre facilement l'effet de chaque paramètre. Si vous laissez la souris immobile quelques secondes sur un paramètre, une courte explication apparaîtra. L'action minimale à effectuer pour configurer votre graphe consiste à choisir le capteur à afficher via le paramètre Data src dans la section data sets. Chaque "data src" correspond à un canal d'un capteur Yoctopuce.

Configuration d'un graphe
Configuration d'un graphe


Vous pouvez définir autant que de graphes que vous le souhaitez, vous pouvez avoir jusqu'à trois courbes par graphe. Cette limite est définie par une constante au début du code source, que vous pourrez facilement modifier si besoin est.

Textes et variables

Il est aussi possible de définir des blocs de textes contenant des variables qui prennent automatiquement la valeurs des capteurs. La définition de ces blocs de textes se fait via le menu principal "New../Text block". Chaque bloc de texte peut contenir jusqu'à 6 variables différentes définie sous la forme {$1} à {$6}. Les différents caractéristiques des blocs de texte se définissent de la même manière qu'avec les graphes.

Vous pouvez définir des blocs de texte
Vous pouvez définir des blocs de texte


Vous allez rapidement vous rendre compte que les panneaux d'interface ont tendance à chevaucher les parties de l'écran qui vous intéresse, vous pouvez les faire passer d'un côté à l'autre la page en cliquant sur l'icone ↹.

Une fois vos différents éléments configurés, il vous suffit de recharger la page web sans le paramètre "&edit" sur l'url, ce qui fera disparaître l'interface de configuration.

Quasiment tout est configurable sans avoir à écrire une seule ligne de code
Quasiment tout est configurable sans avoir à écrire une seule ligne de code


Les feeds

Le système est basé sur un concept de feeds. Un feed est un simple identifiant qui permet de définir un ensemble de capteurs affichables sur la même page. Ce qui permet d'utiliser le même script pour afficher différents ensembles de capteurs. Par défaut, le nom du feed est "default" mais vous pouvez en définir d'autres. Il vous suffit de le définir sur toutes les URLs utilisés par le système. Par exemple, si nous souhaitons définir un ensemble de capteur sous le nom "mydata", les différentes URLs seront:

  • www.yoctopuce.com/YoctoCloud/index.php?feed=mydata pour le callback HTTP
  • www.yoctopuce.com/YoctoCloud/index.php?feed=mydata pour consulter l'interface
  • www.yoctopuce.com/YoctoCloud/index.php?feed=mydata&edit pour éditer l'interface

Bonus

En plus d'afficher des graphes, l'application permet aussi de

  • Définir à distance la fréquence des callbacks HTTP
  • Définir à distance les paramètres de réveil des YoctoHub-Wireless et YoctoHub-GSM
  • Afficher les données brutes des capteurs et de les télécharger au format CSV
  • Définir une politique d'effacement des données les plus anciennes

Remarques importantes

On a fait le tour des principales caractéristiques de cette application , il ne reste plus qu'à conclure avec quelques remarques

Sécurité

Cette application n'offre aucun moyen d'authentification, si vous l'installez sur un serveur public, on vous suggère de protéger son répertoire d'installation avec un nom d'utilisateur et un mot de passe. Généralement, les hébergeurs offre une interface qui permet de le faire en quelques clics. Attention, vous devrez aussi indiquer le nom d'utilisateur et le mot de passe dans la configuration du callback du hub.

Scalabilité

Cette application a été codée pour être facile à installer et facile à utiliser, pas pour être scalable. Vous pourrez gérer facilement une bonne centaines de capteurs, mais si vous en avez plusieurs milliers, il faudra sans doute songer à vous tourner vers une solution de cloud commerciale plus adaptée, par exemple VALARM

HighStock

Cette application est basée sur l'excellente librairie Highstock de HighSoft, qui n'est gratuite que pour un usage non commercial. Si vous comptez utiliser cette application pour gagner directement ou indirectement de l'argent, on vous suggère donc de lire attentivement les conditions d'utilisation de Highstock et de votre offrir une licence. Croyez-nous, ces gens ont fait un travail fantastique et méritent leur argent.

Commenter un commentaire
Retour au blog



1 - francknos Vendredi 18 novembre 2016 20H50

Vraiment excellent fonctionne très bien !

Petite chose à noter.

J'avais vu avec vous pour des problèmes sur la freebox révolution de chez free en France le fichier yocto_api.php doit être modifier pour fonctionner, je vous met ici les lignes à remplacer :

Ligne 563
//$skt = fopen('data:text/plain;base64,'.base64_encode($data), 'rb');

// add by me
$skt = fopen('php://temp','r+');
fwrite($skt, $data); // pas besoin de base64_encoder
rewind($skt);
end add by me
------------------------------------------------------------------

Merci a vous.

Yoctopuce, get your stuff connected.