Zibase Multi : Indicateur de consommation électrique sur le Dashboard

Zibase Multi :

Indicateur de consommation électrique sur le Dashboard




Le but

Le but est de continuer la découverte de Javascript sur Zibase Multi à travers un exemple faisant apparaître sur Zibase Multi un indicateur de consommation électrique. Cette exemple reprend la même finalité que l'article "Surveiller sa consommation électrique avec Karotz / Open Karotz et Zibase"écrit le 06/01/2015.

Nous allons donc faire afficher un cercle et un texte d'une couleur différente en fonction de la consommation électrique.

Préambule

L'intérêt du Javascript ici est de simplifier très largement cette gestion par rapport à ce que nous faisions avec Karotz (3 scénari). Cela permet également de soulager les traitements via la Zibase et surtout de les faire en local sur la tablette accueillant la Zibase Multi.

Mise en oeuvre

Comme dans l'article précédent permettant d'annoncer la température, nous allons donc créer un scénario avec comme déclencheur la sonde OWL relevant la consommation électrique (la pince ampèremétrique étant sur le fil d'arrivée principale de l’électricité juste après le compteur) qui fait appel à un fichier Javascript stocké en local sur la SDCARD de la tablette. Cela donne :


Le fichier conso_elect_cercle_texte.js contient le Javascript suivant :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Annonce Température</title>
</head>
<body>
<script type="text/javaScript">

//récupération de la variable I1 de la sonde OWL contenant la consommation instantanée
var a = zibase.varIx(1)*100; // unité 100W

switch (true) {

     case a<=500 : //si conso élec instantanée  inférieure à 500
/*paramètres : coordonnées X (en %), coordonnées Y (en %), taille du cercle (en %),specifie si critère précédent en % ou réel (_),couleur du cercle,delai*/

android.drawCircle(60, 40,2,"%%%", "GREEN",0);

/*paramètres : numéro d'item, Texte à afficher, taille de la police, coordonnées X (en %), coordonnées Y (en %),specifie si critère précédent en % ou réel (_),couleur de la police, par défaut vide = sans justification*/

            android.writeText(4, "Consommation faible.", 20, 63, 38, "_%%", "GREEN", "");
            break;

     case a<=1000: //si conso élec instantanée  inférieure à 1000

//même fonction que ci-dessus : le code RGB de la couleur vert foncé est #0B850E

             android.drawCircle(60, 40,2,"%%%", "#0B850E",0);

//même fonction que ci-dessus : le code RGB de la couleur vert foncé est #0B850E

              android.writeText(4, "Consommation normale.", 20, 63, 38, "_%%", "#0B850E", "");
              break;
 
     case a<=2000: //si conso élec instantanée  inférieure à 2000
//même fonction que ci-dessus : le code RGB de la couleur orange est #FF9933

              android.drawCircle(60, 40,2,"%%%", "#FF9933",0);

//même fonction que ci-dessus : le code RGB de la couleur vert foncé est #FF9933

               android.writeText(4, "Consommation moyenne", 20, 63, 38, "_%%", "#FF9933", "");
                break;
 
       case a>2000 : //si conso élec instantanée  supérieure à 2000

                android.drawCircle(60, 40,2,"%%%", "RED",0);
                android.writeText(4, "Consommation importante.", 20, 63, 38, "_%%", "RED", "");
                break;
}
</script>
</body>
</html>

En rouge, les éléments obligatoires dans le fichier Javascript. En vert, les commentaires pour vous aider à comprendre le code.

Quelques explications supplémentaires 

  • l'instruction switch...case  est connu dans tous les langages et permet de gérer différentes valeurs d'une variable. Cette instruction revient au même que faire des if imbriqués. C'est juste une question de simplification de lecture de mon point de vue.
  • la fonction android.drawCircle(...) utilisée ci-dessus permettant de dessiner un cercle sur le DashBoard n'est pas documentée par Zodianet à l'heure où j'écris ces lignes et a été introduite dans la V95 (donc veiller bien à avoir la dernière version de Zibase Multi). Merci à Zodianet pour sa réactivité habituelle suite à ma demande.
  • la fonction  android.writeText(...) est bien documentée par Zodianet. Vous noterez que comme nous écrivons sur un même item (ici le numéro 4), il n'y a pas nécessité de l'effacer avec de réécrire.
  • nous sommes chauffés au gaz donc vous pouvez modifier comme vous voulez les bornes dans les "case" où en ajouter des supplémentaires avec un nouveau texte et une nouvelle couleur.

Ce petit scénario incluant le Javascript ci-dessus donne donc le résultat suivant sur la Zibase Multi :



Ainsi, à chaque fois que la sonde OWL émet, vous avez un cercle et un texte d'une couleur définie qui s'affichent en fonction de la consommation et des bornes définies dans le Javascript.Vous noterez dans les captures ci-dessus d'autres éléments d'affichage pouvant vous donner des idées (affichage de la température intérieure/extérieure, vitesse de la VMC, chauffage allumé ou éteint, alarme enclenchée ou non)... Vous pouvez vraiment adapter ce petit script en fonction de vos souhaits et vos besoins.

Simplification du code

Comme vous avez pu vous en rendre compte, le code ci-dessus fait appel dans chaque cas aux fonctions android.drawCircle(...) et android.writeTexte(...), les seuls éléments changeant étant la couleur du cercle et du texte et le message affiché.

En Javascript, comme dans tous les langages, il est possible de créer des fonctions. Je vous propose donc ci-dessous l'équivalent du code Javascript présenté ci-dessus avec la création d'une fonction cercleEtTexte(...) faisant appel aux fonctions  android.drawCircle(...) et android.writeTexte(...) avec comme paramètre la couleur et le texte. Cela "factorise" encore plus le code, en améliore la lecture et la facilité de maintenance. Par exemple, si vous voulez changer l'endroit où s'affiche le cercle et/ou le texte, vous n'avez plus qu'à le faire qu'à un seul endroit.

Au final, vous pouvez donc modifier le fichier conso_elect_cercle_texte.js avec le Javascript suivant :

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Annonce Température</title> 
</head>
<body>
<script type="text/javaScript"> 

var a = zibase.varIx(1)*100; // unité 100W
switch (true) {

    case a<=500 : //si conso élec instantanée  inférieure à 500

//appel à la fonction cercleEtTexte définie ici en fin de script
cercleEtTexte ("GREEN","Consommation faible.");
        break;

    case a<=1000: //si conso élec instantanée  inférieure à 1000

//appel à la fonction cercleEtTexte définie ici en fin de script
cercleEtTexte ("#0B850E","Consommation normale.");
        break;

    case a<=2000: //si conso élec instantanée  inférieure à 2000

//appel à la fonction cercleEtTexte définie ici en fin de script
cercleEtTexte ("#FF9933","Consommation moyenne");
        break;

    case a>2000 : //si conso élec instantanée  supérieure à 2000

//appel à la fonction cercleEtTexte définie ici en fin de script
cercleEtTexte ("RED","Consommation importante.");
        break;
}

function cercleEtTexte (couleur,texte) {
        android.drawCircle(60, 40,2,"%%%", couleur,0);
        android.writeText(4, texte, 20, 63, 38, "_%%", couleur, "");
}

</script>
</body> 
</html>

Voilà pour cet article qui vous permettra d'appréhender le Javascript à travers ce nouvel exemple. Ceci montre que le Javascript permet de simplifier les scénari, de moins encombrer la mémoire de la Zibase, d'optimiser les temps de traitements et de supprimer les latences sur le réseau liées à des appels HTTP (comme nous le faisons avec Karotz et Open Karotz).

Je profite de cette fin d'article pour vous signaler que j'ai pas mal échangé avec Zodianet cette semaine et que l'application serveur local sur Android est en béta test (toutes les semaines selon les mots de Zodianet :)) et ne devrait donc pas tarder à sortir. Par ailleurs, ils m'ont confirmé qu'ils n'avaient absolument pas présenté de tablette intégrant les protocoles au CEBIT...à suivre...je peux pas en dire plus ;).

Pour changer un peu de sujet, retrouvez un article sur GreenIQ, le contrôleur d'arrosage automatique et connecté ici (disponible depuis le 25/05/2015)