Je réalise ce projet dans l’environnement VSCodium que j’ai décrit dans un précédent article (Un environnement local pour p5.js). Je ne peux pas le réaliser avec l’éditeur p5.js car je ne peux pas communiquer ma clé d’accès à l’API de Pixabay.
Créer un compte (gratuit) sur Pixabay
J’utilise Pixabay car il autorise à copier les images, et à les modifier, sans obligations d’attribution.Et Pixabay, à la différence d’UNSPLASH, ne rend pas le « hotlinking » obligatoire.
Je suis évidemment pour l’attribution, et le respect du travail de chacun. Mais parfois c’est très très compliqué d’utiliser des images lorsque les règles en sont contraignantes. Je crois que je fais de mon mieux.
On se crée un compte sur le site https://pixabay.com/fr/accounts/register/.
Il faut maintenant avoir une « clé API »
Une fois qu’on a un compte, on se connecte à Pixabay ET https://pixabay.com/api/docs/ me donne ma clé API et m’explique comment créer une requête. Pour la suite, cette clé API sera CLE-API. Dans la réalité elle est composée de plus de 30 caractères en hexadécimal (0 à 9 et les lettres a à f).
Se connecter à l’API Pixabay en p5.js
function preload() {
// Voir https://p5js.org/reference/p5/loadJSON/
let urlPix = 'https://pixabay.com/api/?key=CLE-API&category=buildings&image_type=photo';
myData = loadJSON( urlPix, useData );
}
La fonction preload() va receuillir toutes les réponses de Pixabay qui correspondent à la requête. Ici ce sont des photos de bâtiments.
La fonction loadJSON est ici utilisée avec une « callback function », ici useData(), dont voici le contenu :
function useData() {
nbMax = min( myData.hits.length, nbMax ) ;
for( i = 0; i < nbMax; i++ ) {
imgUrl[i] = myData.hits[i].largeImageURL ; // url des images
}
}
Ici je lis simplement nbMax url renvoyées par Pixabay. et chaque url est intégrée à un array imgUrl.
Ce n’est pas toujours évident de savoir comment décrypter un fichier JSON. On peut par exemple se demander comment j’ai su qu’il fallait lire « myData.hits[i].largeImageURL ». Le plus simple je pense (en plus de lire soigneusement la documentation de l’API) , c’est d’ajouter un print(myData) ; à la fin de la fonction preload. On trouve alors dans la console un mystérieux {} !
Si je met ma souris sur les {} indiqués par la flèche orange, l’inspecteur (de Chrome) me propose de « copier l’objet« . Et si je colle cet objet dans un éditeur de texte (ou même un nouveau fichier texte de vscodium) j’obtiens des informations plus ou moins lisibles. On peut si nécessaire utiliser https://jsonformatter.curiousconcept.com/ si le JSON qu’on a est trop difficile à formater. Dans mon cas j’obtiens un fichier qui contient comme un array, intitulé myData.hits[] et donc chaque élément contient des informations telles que l’id, la pageURL, etc…
Lire une image de pixabay et l’afficher
Dans le script créé (cf les fichiers zippés correspondants), il faudra que vous mettiez votre propre clé API), j’affiche les fichiers sous la forme fr ‘graphics », des sortes de canevas virtuels, ou peut-être plutôt comme des calques. J’en avais déjà utilisé dans l’article « p5.js Brique 2 : utilisation des “GRAPHICS”« . Ici je me suis beaucoup inspirée de https://editor.p5js.org/creativecoding/sketches/-Ut0EeXZj.
J’utilise les filtres POSTERIZE et INVERT pour modifier les images.
Cette image se trouve ici sur Pixabay. Elle devient comme ça après passage dans le sketch.
Et maintenant ?
Il faut que je voies si la solution évoquée dans l’article « p5.js : la solution pour charger les images » pourrait fonctionner avec ce script dans lequel la fonction preload est dédiée à la constitution d’un fichier JSON.
Je veux créer un array d’images qui pourront être affichées simultanément sur l’écran.
Dans ce second article de la série Un tableau de bord domotique, je veux afficher une température stockée dans ma box domotique Eedomus + à mon tableau de bord (en PHP, sur Raspberry Pi).
Cet article a été complété le 8 mai 2017.
De quoi je pars ?
d’une page index.php servie par un Raspberry Pi, comme indiqué dans le premier article de cette série.
Cocher la case « autoriser l’API via http » et « sauver ».
Cliquer sur « consulter vos identifiants »
On obtient ainsi les valeurs de api_user et api_secret qui nous permettront de nous connecter. On accède aussi à un formulaire qui va nous permettre de construire la requête.
Faire une requête pour un capteur spécifique
J’utilise le formulaire précédent puis je copie la requête HTTP obtenue :
La requête est de type (remplacer api_user et api_secret) :
Pour lire cette donnée dans mon fichier PHP, je me suis inspirée de l’exemple donné à la fin du document API eedomus.
J’ai intégré le code suivant à ma page index.php :
<h3>Autres informations</h3>
<?php include 'eedomus.php';?>
<!-- nest temperature ID 166280 -->
<p>couloir : <?php echo al_get_eedomus_value( 166280, 'last_value' ) ; ?> °C</p>
Et dans le fichier eedomus.php , j’ai intégré une fonction al_get_eedomus_value :
<?php
// définition des variables
$api_user = 'xxx'; // a récupérer sur votre compte eedomus
$api_secret = 'yyy'; // a récupérer sur votre compte eedomus
/******************************************************************
* appel de l'API eedomus en PHP pour récupérer une donnée
*
* $id = 166280
* $val = 'last_value'
* retournera la température actuellement mesurée par le thermostat Nest
*
*****************************************************************/
function al_get_eedomus_value( $id, $val ) {
global $api_user ;
global $api_secret ;
// construction de l'URL de l'API
$url = "http://api.eedomus.com/get?action=periph.caract";
$url .= "&api_user=" . $api_user;
$url .= "&api_secret=" . $api_secret;
$url .= "&periph_id=" . $id;
// appel de l'API
$result = file_get_contents($url);
// on controle le résultat
if (strpos($result, '"success": 1') == false)
{
echo "Une erreur est survenue : [".$result."]";
}
else
{
$result = json_decode( $result, true ) ; // true transforme $result en un array
$retour = $result['body'][$val];
return $retour ;
}
}
Le résultat est maintenant affiché sur mon tableau de bord :
Mais les données ne sont mises à jour que si je rafraichis le tableau de bord manuellement.
Mettre à jour automatiquement les données de la page PHP
Cette question sur StackOverflow explique comment recharger une page toutes les 30 secondes. Il suffit d’ajouter <meta http-equiv= »refresh » content= »30″ /> en haut de la page PHP.
Comme 15 minutes = 900 secondes, j’ai intégré la ligne <meta http-equiv= »refresh » content= »900″ /> en haut de ma page PHP. Le haut contient donc maintenant :
J’ai affiné le contenu de ma page php pour avoir automatiquement la liste des périphériques de l’eedomus. C’est un préalable à un tableau de bord qui lirai automatiquement toutes les données de l’eedomus.
Obtenir la liste des périphériques
Dans le code ci-dessous, la fonction eedomus_url génère les url correctes pour :
vérifier qu’on se connecte correctement à la box Eedomus ;
Obtenir la liste des périphériques de la box Eedomus ;
Lire la valeur d’un périphérique donné de la box Eedomus
la fonction ald_decode_french permet de lire correctement des textes encodés en français, avec des caractères spéciaux.
<?php
function eedomus_url( $action, $user_id, $pw ) {
/*
* eedomus_url( "&action=auth.test", $ee_apiuser, $ee_passwd ) construit
* https://api.eedomus.com/get?api_user=USER&api_secret=SECRET&action=auth.test
* eedomus_url( "&action=periph.list", $ee_apiuser, $ee_passwd ) construit
* https://api.eedomus.com/get?api_user=USER&api_secret=SECRET&action=periph.list
* eedomus_url( "&action=periph.caract&periph_id=156595", $ee_apiuser, $ee_passwd ) construit
* https://api.eedomus.com/get?api_user=USER&api_secret=SECRET&action=periph.caract&periph_id=156595
*
* ces 3 url renvoient bien une info en Json, en provoenance de l'eedomus dans un navigateur
*/
$eedomus_get = "https://api.eedomus.com/get?api_user=" ;
$eedomus_get .= $user_id ;
$eedomus_get .= "&api_secret=" ;
$eedomus_get .= $pw ;
$eedomus_get .= $action ;
return $eedomus_get ;
}
$ee_test = eedomus_url( "&action=auth.test", $ee_apiuser, $ee_passwd ) ;
$ee_list = eedomus_url( "&action=periph.list", $ee_apiuser, $ee_passwd ) ;
$ee_156595 = eedomus_url( "&action=periph.caract&periph_id=156595", $ee_apiuser, $ee_passwd ) ;
function ald_decode_french( $string ) {
$contents = utf8_encode( $string );
$results = json_decode( $contents );
return $results ;
}
Si j’utilise la fonction ald_decode_french sans la partie ‘utf8_encode’, le résultat est vide car les accents provoquent des erreurs. Ci-dessous, dans l’image, à gauche on a le résultat de <pre><?php print_r ( file_get_contents( $ee_list ) ) ; ?> </pre> et à droite le résultat de <pre><?php print_r ( ald_decode_french( file_get_contents( $ee_list ) ) ); ?> </pre> . Les accents sont correctement restitués dans la version de droite.
Et maintenant ?
Je vais maintenant voir comment un Raspberry Pi peut transmettre une valeur mesurée à l’Eedomus. Ce sera l’objet du prochain article de cette série Un tableau de bord domotique. Ensuite, je pourrai utiliser le présent tutoriel pour l’afficher sur mon tableau de bord.
Aujourd’hui, je veux lire des données issues d’une station météo proche de chez moi via l’API wunderground. Je souhaite qu’elles s’affichent automatiquement dans mon tableau de bord domotique (une page PHP servie par un Raspberry Pi).
Maintenant, je veux ajouter des données issues de capteurs externes ou non. Je commence par insérer des données issues d’une station météo externe, via l’API de wunderground.
Une API ?
J’ai suivi le très bon cours en ligne sur les API de Emily REESE, sur OpenClassRoom ici.
Une API, ou « Application Programming Interface », est une interface entre un utilisateur et une application. Un menu constitue l’API d’un restaurant par exemple. En informatique, lorsqu’on parle d’API, on parle en général d’API REST (cf sur wikipedia). Elles utilisent des instructions HTTP.
En général les requêtes HTTP à des API REST obtiennent une réponse en JSON (cf sur wikipedia).
L’API de wunderground
Wunderground est un site qui met à disposition des informations météos. Les personnes qui possèdent une station météo peuvent lui communiquer des données. On a ainsi accès à des données très locales.
avec APIkey qui est ma clé API (elle ressemble à « b8e924a8f008b81e« ) et Station-ID est égale à « IPLONOUR3 » pour la station qui m’intéresse. On obtient l’ID de la station en cliquant sur le nom de la station (flèche rouge dans la copie d’écran ci-dessous). j’accède alors à une page dont l’adresse est https://www.wunderground.com/personal-weather-station/dashboard?ID=IPLONOUR3#history. J’ai donc l’ID.
Si je met http://api.wunderground.com/api/APIkey/conditions/q/pws:IPLONOUR3.json (remplacer APIkey par votre clé API) dans un navigateur web, j’obtiens en retour une chaîne JSON :
Et maintenant mon tableau de bord affiche la température, l’humidité, la vitesse des rafales de vent et un lien vers les prévisions météo locales :
Et maintenant ?
Je vais maintenant intégrer une donnée issue de ma box domotique Eedomus. Ce sera l’objet du second article de cette série Un tableau de bord domotique.
Commentaires récents