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)


Zibase Multi : Annoncer vocalement la température intérieure et extérieure en Javascript





Zibase Multi :

Annoncer vocalement  la température intérieure et extérieure en JS




Le but

Le but est de découvrir le Javascript à travers un exemple en faisant énoncer vocalement à la Zibase Multi la température intérieure et extérieure. Cette exemple reprend la même finalité que l'article Karotz annonce la température avec Open Karotz et Zibase écrit le 17/01/2015. 

Préambule

Le Javascript est donc le langage client universel retenu par Zodianet pour pouvoir effectuer des actions spécifiques à l'intérieur ou en dehors de scénari. L'avantage est que la documentation sur le Javascript ne manque par sur le Web car il est utilisé sur tous les sites WEB pour effectuer des actions sur le poste client.

Par ailleurs sa syntaxe est relativement simple même si quelques notions de développements sont nécessaires. Je me suis efforcé de présenter ici un exemple simple avec tous les détails pour permettre aux plus néophytes d'entre nous de pouvoir le mettre en oeuvre.

Au delà de ce langage, Zodianet à mis à disposition 6 nouveaux objets orientés Zibase Multi  avec de nombreuses fonctions disponibles permettant d'effectuer des opérations multiples.

Vous trouverez l'ensemble de la description de ces objets et des fonctions associées à partir de cette page sur le site de Zodianet. Je vous laisse prendre les connaissance de toutes les possibilités.

Comment invoquer du Javascript ?

Il existe 3 solutions pour faire appel à du Javascript :


  • En incrustation de lignes JavaScript à l'intérieur même de scénarios de ZIBASE Multi. Ceci est très pratique mais aussi très limité car les limites de longueur d'un scénario sont très vite atteintes. Même si Zodianet travaille actuellement sur le sujet, à aujourd'hui, ces limites sont vraiment problématiques et au bout de quelques lignes de JS, vous ne pourrez plus enregistrer votre scénario. .
  • Dans des fichiers situés dans l'appareil Android supportant ZiBASE Multi. Cette fonctionnalité est très pratique car vous pouvez préciser à Zibase Multi d'aller exécuter du Javascript présent dans un fichier localement sur votre Zibase Multi.Vous n'êtes ainsi plus limités par la longueur des scénari. 
  • Bien entendu, dans des fichiers sur serveur local ou distant.Je ne vois pas vraiment l'intérêt de cette fonctionnalité mais cela peut peut-être présenter un intérêt si vous diposer d'un NAS pour rassemble tous vos développement ? 
Au préalable, il faut aller sur zodianet2 sur le configurateur en mode Expert / Menu Système pour définir le chemin par défaut sur lequel vous enregistrez vos fichiers Javascript. L'avantage est que vous n'aurez plus ensuite à préfixer ce chemin dans les différents appels effectués à l'intérieur des scénari.


Je vous conseille donc d'entrer le chemin préconisé par défaut et déjà créé sur votre tablette par l'installation de Zibase Multi :  /sdcard/data/data/zibase/userscripts/

Une fois ce préalable rempli, vous trouverez ci-dessous la mise en oeuvre du petit script pour faire annoncer vocalement la température intérieure et extérieure à Zibase Multi.


Mise en oeuvre

Comme toutes les fonctions sur Zibase Multi, il faut donc aller dans le Menu Piloter sous Android / Exécuter du Javascript (Pour Béta Testeur seulement même si ce n'est plus le cas) comme ci-dessous :



La fenêtre suivante s'ouvre :


Dans notre exemple, nous allons donc Exécuter du Javascript sur une fenêtre invisible à partir d'un fichier stocké en local sur le serveur Zibase Multi (la tablette quoi !) en prenant le soin de préciser "Préfixer le chemin par défaut" qu reprendra le chemin défini dans les paramètres système. Dans le  chemin/fichier, il faut entrer le Nom du fichier JS que nous allons générer ; ici : "Annonce_temperature.js".

Nous utilisons l'appel à du Javascript dans un fichier stocké car les quelques lignes de JS nécessaires pour effectuer ce petit traitement rendrait le scénario trop long en mode incrustation (JS directement écrit dans le scénario) et vous ne pourrie pas le sauvegarder. Par ailleurs, l'avantage de cette solution est de ne pas remplir la mémoire de la Zibase Multi (aujourd'hui limité historiquement comme la zibase classic) et de pouvoir modifier le javascript sans avoir sans cesse à enregistrer la configuration du scénario (et donc le reboot multiple de la Zibase Multi.

Pour information, nous disposons déjà de deux scénari nous servant notamment pour le thermostat qui se contentent de récupérer la valeur de la sonde de température intérieure dans la variable V0 et respectivement la température extérieure dans la variable V50. Vous pouvez les retrouver dans cet article à la rubrique Scénario "Variable T intérieur" et Scénario "Variable T extérieur".

Le contenu du fichier Annonce_temperature.js est le 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ère le contenu de la variable V0 de la Zibase (Température Intérieure) et la divise par 10
V0 contient 201 et donc la variable a va contenir 20.1
fonction mis à dispo par Zodianet sur l'objet zibase*/

var a =zibase.varShort(0)/10;

//converti la variable a en string (chaine de caractères) / Fonction javascript

var b=a.toString();

/*découpe la chaîne de caractère b pour séparer la partie entière et la partie décimale 
cela range les éléments dans un tableau de caractère contenu dans la variable c
c[0] va donc contenir la valeur entière de la T° (avant le point) 20 pour l'exemple
c[1] va donc contenir la valeur décimal de la T° (après le point)* 1 pour l'exemple*/

var c= b.split(".");

/*si la décimal de la température vaut 0 alors le contenu de la case 1 du tableau c (c[1]) vaut undefined; alors on remplace par 0*/

if (c[1] == undefined) c[1]= "0";

/*même commentaire que ci-dessus mais pour la variable V50 de la zibase qui contient la Témpérature extérieure*/

var d =zibase.varShort(50)/10;

var e=d.toString();
var f= e.split(".");
if (f[1] == undefined) f[1]= "0";

//fonction mis à dispo par Zodianet sur l'objet android
//cette fonction speaks permet de faire parler Zibase Multi à partir d'un phrase (fonction TTS : Text To Speech)

android.speaks("La température intérieure est de " + c[0] + " point " + c[1] + " degrés.");
android.speaks("La température extérieure est de " + f[0] + " point " + f[1] +  " degrés.",20);
</script>
</body> 
</html>

Les parties en rouge sont des éléments que vous devez reprendre dès que vous créez un script JS indépendant, stocké en local ou sur un serveur (en changeant les éléments contenus dans la balise Title). A noter que les balises en rouge sont implicites et non utiles quand vous écrivez du JS directement dans le scénario (mode incrustation).

Les parties surlignées en vert ne sont que des commentaires pour vous aider à comprendre le script mais ne servent évidemment à rien en tant que telles (noter qu'en Javascript, est considéré en commentaire tout ce qui est préfixé par // sur une ligne ou encadré par  /* */ sur plusieurs lignes).

Une fois votre fichier Annonce_temperature.js créé avec le contenu ci-dessus, il faut aller le placer dans le répertoire sur le serveur Zibase Multi soit dans   /sdcard/data/data/zibase/userscripts/. Pour cela, j'utilise de mon côté AirDroid permettant facilement par glisser/déplacer de faire un copier/coller d'un fichier depuis le PC vers la tablette.

Le scénario complet dans mon exemple donne donc :



Ce scénario Android - Temp WE est donc celui qui va me permettre d'annoncer la température intérieure et extérieure selon un calendrier fixe, ici le samedi et le dimanche à 10 h, 13 h et 20 h.

Vous pouvez créer un autre scénario comme ci-dessous invoquant le même script pour faire annoncer à des heures différentes le reste de la semaine la température intérieure et extérieure. Dans mon exemple, le calendrier fixe va du lundi au vendredi et les heures de déclenchement sont 8h et 20h



J'espère que ces premiers éléments concernant le Javascript sur Zibase Multi vous permettront de mieux appréhender les possibilités et vous donneront des idées quant à la création de nouveaux scénari.

Je publierais d'autres petits script JS dès que j'aurai le temps d'écrire les articles détaillés pour les rendre abordables et compréhensibles par tous.