Ajout d'une page personnalisée à Domoticz

Dans cet article je vais décrire comment ajouter facilement des pages personnalisées à l'interface web du serveur domoticz.





Et comme je le dis toujours, un bon exemple valant mieux qu'un long discours, nous allons essayer de créer ensemble une page qui va nous permettre de superviser en continue le bon fonctionnement de certains équipements de notre réseau local.

Cet article s'adresse à ceux d'entre vous qui ont (ou vont avoir) une solution domotique basée sur le logiciel domoticz. Il vous faudra également savoir comment accéder à l'arborescence d'installation du serveur, connaitre quelques commandes système linux, connaitre un peu le html.

Si vous ne connaissez rien de tout ça, je vais essayer de détailler les choses suffisamment pour que vous puissiez suivre pas à pas ce que je fais afin de le reproduire.



Le fichier custom.example 



Ajouter des pages personnelles dans domoticz :

Il est très facile d'ajouter une page html à l'interface du serveur domoticz. Pour cela, il faut aller dans le répertoire /home/domoticz/www/templates/ et y ajouter le fichier html souhaité.
Un nouvel onglet qui se nome "Personnalisé" va apparaître dans la barre de navigation, entre les onglets habituels "Mesures" et "Réglages".

Vous pouvez voir ci-dessous que j'ai ajouté deux fichier dans le répertoire "templates" : test.html et custom.html.


Si vous regardez pour la première fois dans le répertoire templates, vous verrez qu'il y a dedans un fichier qui se nome "custom.example".


Si vous renommez ce dernier en "custom.html" en faisant :

cd /home/domoticz/www/templates
cp custom.example custom.html

Vous pourrez afficher sous domoticz la page custom qui aura l'aspect suivant :


Simple comme bonjour ! Mais ajouter une page HTML c'est bien, mais si cette dernière présente du contenu fixe cela n'a pas beaucoup d’intérêt. Voyons maintenant comment dynamiser tout ça. 

Utilisation du fichier custom.html :


Une fois custom.example renommée en custom.html, nous avons une magnifique page mais cela ne nous dit pas comment nous allons pouvoir afficher des informations personnalisées.
Pour ce faire, la page custom contient tout ce dont nous allons avoir besoin. Examinons cela de plus prêt !

La page custom.html est constituée de 3 parties : 

  1. <style> est la partie qui va définir les différents styles d'affichage que vous pouvez voir à l'écran. Cette partie correspond à ce qui pourrait être défini dans un fichier CSS s'il y en avait un. Vous pourrez modifier les styles à volonté. Par exemple si le rouge de l'affichage de votre consommation d'énergie ne vous plait pas vous pourrez le passer en bleu ! 
  2. Ensuite il y a la structure de la page qui commence par la balise <div>. Toute la page repose sur des blocs <div> qui vont s’enchaîner. C'est cette partie que nous pourrons modifier pour fabriquer la structure de notre page cible.
  3. <script> à la fin du fichier, contient des scripts javascript. Ce sont ces derniers qui vont permettre d'aller interroger le serveur domoticz pour retourner à la page html les valeurs à afficher. 

Voyons ces 3 zones un peu plus dans le détail

Style :

Cette zone est destinée à définir les style d'affichage des différentes zone HTML ainsi que pour chaque donnée qui sera affichée.
Vous pouvez modifier le style en fonction de vos gouts, mais aussi en ajouter de nouveaux.
Si vous voulez faire cela il vous faudra quelques notions de CSS.

En ce qui concerne notre objectif, qui est, je le rappelle, d'aller chercher des données correspondant à des capteurs domoticz et à les afficher, chaque donnée aura son propre label (qui est un nom précédé par #) sous lequel on décrira en mode CSS comment on souhaite qu'elle soit affichée.

Pour voir comment s'affiche un style dans la page HTML, prenez le label associé à ce style et cherchez dans la zone des balises <div> associée à ce label. Ensuite regardez le texte affiché dans la balise div suivante qui devrait être de la forme <div id="label_lg" ...>. Et repérer ce texte dans la page HTML. Vous verrez ainsi comment le style d'affichage est défini.

Par exemple si je prends le style #otxt :
#otxt {
 width: 560px;
 font-size: 40px;
 line-height: 55px;
 color: darkorange;
}

Quand je recherche ce style dans la page je tombe sur les lignes ci-dessous : 

<div id="frame">
 <div id="otxt">--</div>
 <div id="label_lg">Weather Forecast at Hilversum Netherlands</div>
</div>

Pour voir à quoi correspond le style "otxt" il suffit donc de chercher dans la page telle qu'elle est affichée, la case dans laquelle est écrit "Weather Forecast at Hilversum Netherlands".

Vous pouvez donc modifier vos styles jusqu'à obtenir un affichage tel que vous le souhaitez.
Personnellement je n'ai pas modifié cette zone pour le moment.

Il faut bien comprendre que chaque label qui défini un style a été définit pour correspondre également à un capteur dans domoticz.

Par exemple le style "ihum" sera lié dans la partie "script" à la recherche de la valeur d'un capteur de température qu'on aura désigné par son identifiant.

Structure de la page :

La page est structurée par des blocs <div> qui s’enchaînent et s’imbriquent.

Le détail n'a pas vraiment d'importance. Si vous maîtrisez le HTML vous pourrez vous amuser à organiser la structure de la page différemment si vous le souhaitez. Mais si vous êtes comme moi un utilisateur de base ce qu'il faut savoir c'est que chaque case finale qui affiche une valeur est constituée de deux blocs div qui vont se suivre :
  • <div id="label_style"> : label_style représente le style d'affichage défini dans la section "style" et comme nous l'avons vu représente aussi un capteur domoticz. La valeur de ce capteur sera recherchée par une fonction javascript qui se trouve dans la zone suivante du fichier.
    La chaîne de caractère par défaut qui se trouve dans le premier bloc div ("--") sera remplacée par la valeur associée à ce capteur. 
  • <div id="label_lg"> : Affiche en dessous de la valeur du capteur une chaîne de caractère dans le style défini par "#label_lg". Cette chaîne est personnalisable et vous permettra de préciser la valeur que vous avez souhaité afficher. 

En éditant le fichier avec un éditeur HTML capable de gérer les indentations, Notepad++ par exemple, la structure sera assez facile à comprendre.
Vous identifierez alors rapidement les balises <div> qui représentent les lignes du tableau affiché. Et ensuite dans chacune des ligne quelles sont les cases qui s'affichent.
Et en identifiant cette structure vous pourrez la modifier pour l'adapter à vos besoins.

Scripts

Cette partie est constituée de fonction javascript qui vont permettre de dynamiser notre page. Le mécanisme est assez simple:  Une fonction va interroger le serveur domoticz et retourner pour chaque capteur souhaité la valeur d'un champ que nous aurons indiqué. Ensuite l'affichage de la page HTML sera mis à jour pour remplacer les deux tirets "--" définis par défaut dans la partie structure, par la valeur obtenue.

L'objectif ici est d'être vraiment pragmatique pour vous permettre de personnaliser la page custom. Je ne vais donc pas rentrer de le détail de cette partie en faisant un cours de javascript.

Première chose : 

La première chose à faire va donc de définir la liste des capteurs domoticz dont vous souhaitez obtenir une information. Chaque capteur est identifié par son Idx domoticz.
L'Idx domoticz d'un capteur se trouve dans la colonne Idx de la page 
"Réglages / Dispositifs" de l'interface domoticz.

Normalement ce qu'il vous faudra modifier commence à la ligne 237 du fichier ou recherchez la ligne suivante :
$(document).ready(function() {

Ensuite vous trouverez du code qui ressemble à cela :
        $.LastUpdateTime=parseInt(0);
        $.roomplan=21;
        $.domoticzurl="";//"http://192.168.0.41:8080";
        //format: idx, value, label, comment
        $.PageArray = [
                ['144','Temp','itemp','woonkamer'],
                ['630','Humidity','ihum','woonkamer'],
                ['630','Barometer','astatw','woonkamer'],

Cette partie de code dit à fonction javascript d'aller chercher toutes les valeurs des capteurs identifiés par idx dans le tableau "PageArray", de sélectionner le champ value et de l'afficher à l'endroit identifié par son label dans la page.

J'explique ci-dessous ce que vous devrez personnaliser : 

roomplan : représente le numéro du plan dans domoticz dans lequel se situent les capteurs que vous souhaitez afficher. La valeur 0 représente tous les plans. Donc mettez 0 si vous n'avez pas de plans particuliers. La valeur 1 représente le plan "Hidden_Devices". C'est dans ce plan que vous devrez mettre vos dispositifs qui ne doivent pas s'afficher dans les onglets domoticz. 

domoticzurl: représente l'URL du serveur domoticz. Ou plus simplement son adresse IP sur votre LAN local. Toutefois j'attire votre attention sur cette URL si, comme moi, vous avez ouvert votre interface Web Domoticz sur internet afin de pouvoir y accéder depuis n'importe où, cette URL ne fonctionnera que quand vous serez connecté en local. Pour voir quelles modifications faire dans le cas d'un accès depuis internet, vous trouverez les explication dans le paragraphe "Peaufiner". 

PageArray : est un tableau qui contient dans chaque ligne 4 valeurs au format [idx, value, label, comment]
  1. idx : l'identifiant domoticz du capteur que l'on souhaite afficher. La valeur de cet identifiant se trouve dans la colone "Idx" de la page "Reglages/Dispositifs" de l'interface domoticz. 
  2. value : représente la valeur que l'on va chercher à afficher. Ce qu'il faut savoir, c'est que pour chaque capteur, domoticz mémorise une structure de données constituée de beaucoup de champs. Dans "value" il faudra indiquer le nom du champ dont vous souhaitez voir afficher la valeur.
    Pour connaitre le nom des tous les champs disponibles pour un capteur, lancez la commande :
    sudo curl "192.168.1.150:8080/json.htm?type=devices&rid=XXX"
    En remplaçant XXX par l'identifiant domoticz du capteur que vous souhaitez désigner et bien entendu en remplaçant l'adresse IP par celle de votre serveur domoticz.


  3. label : correspond au label qui a été donné au <div id="label"> dans la structure. Qui lui même correspond au label donné lors de la définition des styles. Par exemple le label "itemp" qui correspond à la zone centrale en haut de la page 


    Si vous n'avez rien compris, pas de panique, je vous montre un exemple juste après.

  4. comment : correspond à un commentaire que vous pouvez indiquer librement. Ce dernier champ n'est pas utilisé dans la version actuelle. 
Exemple : 

Imaginons que je dispose d'un capteur sous domoticz qui correspond à un capteur de température placé à l'extérieur nord de ma maison. 
J'ai appelé ce capteur "Exterieur Nord" et dans domoticz il porte l'identifiant Idx = 144.
L'adresse IP de mon serveur domoticz est 192.168.1.150:8080. 
Je n'ai pas défini de plans particulier. 
Pour afficher la température remontée par ce capteur à l'emplacement désigné par le label "itemp", je vais devoir modifier le code de la manière suivante : 

$(document).ready(function() {
        $.LastUpdateTime=parseInt(0);
        $.roomplan=0;
        $.domoticzurl="http://192.168.1.150:8080";
        //format: idx, value, label, comment
        $.PageArray = [
                ['144','Temp','itemp','commentaire comme on veut'],

Lorsque je fais la commande : sudo curl "192.168.1.150:8080/json.htm?type=devices&rid=144", on constate que ce capteur propose aussi un champ nomé "Humidity" :

        "Humidity" : 48,
         "HumidityStatus" : "Comfortable",
         "ID" : "3202",
         "LastUpdate" : "2018-02-27 22:54:34",
         "Name" : "Exterieur Nord",
         "Notifications" : "false",
         "PlanID" : "0",
         "PlanIDs" : [ 0 ],
         "Protected" : false,
         "ShowNotifications" : true,
         "SignalLevel" : 7,
         "SubType" : "Alecto WS1700",
         "Temp" : -5.4000000000000004,
         "Timers" : "false",

Si je souhaite afficher le niveau d'humidité à la place de la température il va donc falloir que je modifie la ligne dans la tableau de la manière suivante :

['144','Humidity','itemp','commentaire comme on veut'],

Et bien entendu il faudra modifier le texte dans la partie "structure" car ce dernier ne correspond plus à ce qui sera affiché. Voila le résultat :



Deuxième chose : 

Si vous souhaitez afficher des données sous forme de chaîne, il faudra faire une modification dans une autre fonction de la section script.
Si on regarde le code de la fonction "function(data)" (ligne 208 du fichier d'origine), on peut voir que la valeur qui va être affichée correspond aux lignes suivante : 

if (typeof vdata == 'undefined') {
     vdata="??";
     }
else {
     vdata=new String(vdata).split(" ",1)[0];
}

Ceci signifie que si la données retournée par le capteur est d'un type indéfinie, alors la valeur qui sera affichée est "??". 
Sinon, et c'est là l'important, la valeur qui va être affichée correspond à la première partie de la chaine de texte retournée. Par exemple si le capteur à retourné la valeur d'un champ "Data" : "-0.3 C, 67 %" alors la valeur qui sera affichée ne sera que le premier champ (le séparateur étant l'espace). Soit : "-0.3". Nous allons donc modifier cette partie de la fonction pour que si la variable "vtype" correspond à la chaîne 'Data' alors dans ce cas la valeur affichée sera la chaîne dans sa totalité.
(vtype sera la valeur données dans le champ "value" que nous avons décris précédemment).

J'ai modifié la fonction de la manière suivante, mais à vous d'adapter en fonction de vos besoins :
if (typeof vdata == 'undefined')
    {
     vdata="??";
     }
else
    {
     if ( vtype == 'Data' )
          {
           vdata=new String(vdata);
           }
     else
          {
           vdata=new String(vdata).split(" ",1)[0];
           }
      }

Cette petite modification vous permettra d'afficher toute valeur contenue dans le champ Data de votre capteur.


En résumé : 


  • Éditez le fichier custom.html.
  • Modifiez la structure en supprimant/ajoutant des lignes ou des cases dans les lignes en jouant sur la structure des balises <div>.
  • N'oubliez pas quand dans chaque case qui devra recevoir une valeur dynamique de domoticz, il faudra que le div associé à cette valeur ait un identifiant unique.
  • Modifiez dans la partie style les paramètres de style associés aux identifiants. Si vous avez créé de nouveaux identifiants, par exemple en ajoutant une case :

<div id="mon_identifiant" style="color:lightblue;font-size:50px;">--</div>
<div id="label_lg">Capteur personnalisé</div>
N'oubliez pas d'ajouter un style "#mon_identifiant" dans la partie style.






Ping Ping Ping 



Chose promise, chose due, nous allons par l'exemple voir comment faire une jolie page personnalisée qui affiche les temps de réponse des équipements sur le réseau local ou qui affiche un message particulier si ces derniers ne sont pas connectés. 
Cette page va nous permettre de superviser notre réseau local et accessoirement afficher d'autres capteurs pour constituer un petit tableau de bord de notre solution domotique.

Personnalisation de la page HTML :


Le cahier des charge est relativement simple :
  • Afficher le temps de réponse de certains serveurs sur mon réseau domotique. Mon NAS par exemple.
  • Compléter avec l'affichage de certains capteurs tels que la consommation électrique instantanée de la maison.
La première chose à faire est de préparer la structure de la page telle que nous la souhaitons. 
En ce qui concerne les équipements qui seront supervisés, voici ceux que je souhaite voir : 

  • Mon NAS : adresse 192.168.1.200. 
  • Mon serveur de SMS : adresse 192.168.1.52
  • La clé HDMI Amazon Fire TV Stick : adresse 192.168.1.43

Pour chacun de ces équipements je voudrais afficher dans une case dédiée :
  1. Le tems de réponse au ping en ms si l'équipement à répondu, sinon la chaine DISCONNECTED si l'équipement n'est pas joignable.
  2. Le nom de l'équipement concerné en dessous.
Comme je ne veux pas me lancer dans des modifications trop importantes de la structure du fichier, je vais reprendre la dernière ligne du fichier custom que je vais dupliquer pour chacun des serveurs.




Voici ce que cela va donner si le serveur a répondu en 100ms :








Et voici ce que je souhaite si le serveur ne répond pas :








Voici le morceau de code HTML que je vais répliquer autant de fois que de serveurs. La zone centrale sera adaptée à chaque fois :
Je changerais le nom de l'identifiant "otxt" pour mettre NAS, SMS, FireTV...
Je changerais la légende associée dans le div label_lg pour mettre "Serveur TOTO", "Serveur TITI", ...


   <div>
    <div id="frame">
     <div id="astat" style="font-size:40px;">--</div>
     <div id="label_lg">Hvac Watt</div>
    </div>
    <div id="frame">
     <div id="NAS">--</div>
     <div id="label_lg">Serveur NAS (en ms)</div>
    </div>
    <div id="frame">
     <div id="astatw" style="font-size:40px;">--</div>
     <div id="label_lg">Baro</div>
    </div>
   </div>



Et pour conserver le style d'affichage il faudra ajouter dans la partie <style>, nos nouveaux labels "NAS" partout ou le label otxt est déclaré. Par exemple comme j'ai fait ci-dessous :


#otxt, #nas{ 
 width: 560px; 
 font-size: 40px;
 line-height: 55px;
 color: darkorange;
}

Si vous avez compris ce mode de fonctionnement, ce dont je ne doute pas, vous pouvez aussi redéfinir un style spécifique pour le label ping afin que ce dernier prenne toute la largeur de la ligne et ainsi vous pourrez supprimer les deux cases adjacentes.
Pour ma part je vais garder ces cases et je les personnaliserais afin d'afficher d'autres valeurs.


Pour rafraîchir l'affichage lors de vos modification de la page HTML, vous devrez certainement devoir vider le cache de votre navigateur.

Et voici le résultat pour la page HTML :



Capteur virtuel et script BASH :


Pour que notre page HTML personnalisée puisse afficher les données souhaitées, il faut que ces données soient centralisées par le serveur domotique.

Pour chaque équipement, nous allons donc créer un capteur virtuel qui contiendra sous forme d'une chaîne le temps de réponse du serveur au ping. Et nous allons écrire un script qui fera les ping vers nos serveur et qui tournera en boucle sur le Raspberry afin de mettre à jour les capteurs virtuels.

Création de capteurs virtuels : 

A ce stade de cet article, je vais supposer que vous savez comment créer un capteur virtuel ou "Dummy" sous domoticz.

De manière très résumée : 

Il faut ajouter un équipement appelé "Capteur Virtuel" ou  Dummy dans l'onglet Matériel de domoticz.


Ensuite vous cliquez sur "Créer Capteurs Virtuels" et vous choisissez un capteur de type "Texte" que vous nommerez "NAS" (ou tout autre charmant petit nom que vous aurez choisi).


Au final vous retrouvez un capteur virtuel de type chaine qui contient la valeur par défaut "Hello World" dans l'onglet "Mesures". 



Ensuite allez dans l'onglet "Réglages/Dispositifs". Dans le champ de recherche tapez "ping" (ou le petit nom que vous avez donné à votre capteur) et notez l'identifiant "Idx" de ce dernier. Dans mon cas ce sera 1366.



Répétez ces étapes autant de fois que vous souhaitez avoir de capteurs virtuels qui représentent chacun un serveur et dont le champ texte contiendra la valeur de retour du ping.
Il faudra bien entendu modifier le nom à chaque fois. Dans mon cas, pour être en accord avec les modifications opérées dans la page HTML, j'aurais 3 capteurs : NAS, SMS et FireTV.

Le script 

Pour aller vite et faire simple j'ai écrit un script shell en Bash. Mais bien entendu vous pouvez améliorer cette partie en faisant un script Perl, Python ou tout autre langage que vous maîtrisez.
Et si vous connaissez un peu le shell, mon script est LARGEMENT améliorable ! D'ailleurs je suis preneur de toute amélioration que vous pourriez me suggérer. Je n'hésiterais pas à mettre à jour cet article en vous citant !

Le principe de ce script est simple. Je vais placer dans un fichier de configuration des lignes dont chacune contient les informations nécessaires pour pinger un serveur et envoyer le résultat au capteur virtuel correspondant de domoticz.
Voici l'image de mon fichier de configuration :


Pour chaque ligne le script va faire un ping sur l'adresse IP et si le ping retourne un temps de réponse alors ce temps sera récupéré.
S'il n'y a pas de temps de réponse, cela signifie que le serveur n'a pas répondu, donc qu'il n'est pas connecté. Dans ce cas j'ai choisi de retourner la chaîne "DISCONNETED".

#! /bin/bash
# -*- coding: utf-8 -*-

############################################################################
# amd_ping.sh : 
#
# Version : 1.0
# Programme qui ping des addresses IP donnees dans un fichier de configuration. 
#  Pour chaque adresse IP il y a un capteur domoticz associé (par son idx).
# Ce capteur domoticz sera mis à jour avec 
#  - le temps de réponse du ping si réponse OK.
#  - un message en cas de non reponseu au ping.
# 
# Ce programme est écrit en bash sous raspbian. 
#
#
# (c) AMD
#
############################################################################

# Adresse IP du serveur domoticz 
ip_domoticz="192.168.1.150:8080"

# la variable IFS « Internal Field Separator » indique à BASH 
# quel(s) caractère(s) considérer comme séparateur de champs.
# 
old_IFS=$IFS # sauvegarde du séparateur de champ actuel
IFS=$'\n' # Le saut de ligne devient notre séparateur de champ. 

# conf sera considéré comme un liste de lignes. 
conf=`cat /home/pi/Prog/Bash/amdPing/amd_ping.conf`
if [ $? != 0 ]
then
 echo "`date` Echec acces fichier conf" >>/var/log/amd_ping.log
 exit -1
fi

# On va traiter chaque ligne du fichier de conf une par une. 
for ligne in $conf
do
 # On passe les lignes commentaires (ligne debutant par # )
 if [ `echo $ligne|cut -c1` != '#' ]
 then
  #On recupere les valeurs dans le fichier de conf.
  nom=`echo $ligne | cut -d":" -f1`
  adresseIP=`echo $ligne | cut -d":" -f2`
  idx=`echo $ligne | cut -d":" -f3`
  
  #On ping l'adresse IP 
  # L'option -c 1 permet de n'envoyer qu'une requete.
  ping=`ping -c 1 $adresseIP`
  
  #Le resultat est initialisé par defaut à ""
  chaine_resultat=""
  
  #On recherche le champ "time=" dans la reponse du ping.
  #Si cette chaine est presente c'est que le ping a renvoyé un temps.
  reponse_ping=`echo "$ping"|grep "time="`
  if [ $reponse_ping ]
  then
   # On recherche le champ time=xxx ms
   res_champ_time=`echo "$reponse_ping"|cut -d" " -f7`
   # On recherche la valeur dans le champ time
   valeur_time=`echo "$res_champ_time"|cut -d"=" -f2`
   #on construit la chaine qui sera envoyee à domoticz
   chaine_resultat="$valeur_time"
  else
   # Le ping n'a pas renvoyé de champ time donc l'adresse IP n'est pas connectée.
   chaine_resultat="DISCONNECTED"
  fi
  
  # On construit l'URL qui va être envoyée à domoticz. 
  Resultat="$ip_domoticz/json.htm?type=command&param=udevice&idx=$idx&svalue=$chaine_resultat"
  
  # On lance la requete à domoticz qui va mettre à jour le capteur.
  # L'option -s de curl sert à desactiver l'affichage de la sortie erreur de la commande.
  commande=`sudo curl -s $Resultat`
  
  # Si la réponse de domoticz contient OK c'est que tout c'est bien passé. 
  reponse_commande=`echo $commande|grep "OK"`
  if [ -z $reponse_commande ]
  then
   # La réponse de domoticz est en erreur : on log la commande envoyé ainsi que la date. 
   echo "`date` IP=$adresseIP Failled:$Resultat" >>/var/log/amd_ping.log
  fi
 fi
done

IFS=$old_IFS

Automatisation du script

Notre script fonctionne bien chaque fois que nous le lançons. Il va falloir maintenant en automatiser l’exécution.
Pour cela plusieurs possibilités existent.

  • Soit faire en sorte qu'il tourne en continue, en plaçant le code dans une boucle infinie par exemple, et qu'il soit lancé au boot du Raspberry. 
  • Soit le faire exécuter à intervalle régulier par le service "crontab". 
Pour aller au plus simple je vais choisir cette deuxième solution. 
Si vous ne connaissez pas ce qu'est la crontab je vous invite à lire un tutoriel sur internet. 
Pour ma part je vais me contenter de vous montrer la ligne que j'ai ajouté à mon fichier /etc/crontab pour que le script soit exécuté toute les deux minutes. 

Faire sudo emacs /etc/crontab et ajouter les lignes ci-dessous au fichier : 

#Execute amd_ping toutes les 2 minutes
*/2 *    * * *  root  /home/pi/Prog/Bash/amdPing/amd_ping.sh

Bien entendu le chemin d'accès au fichier doit être adapté au votre !

Retour sur la page HTML 

Désormais nous avons des capteurs virtuels sous domoticz qui sont mis à jour régulièrement par un script pour contenir le temps de réponse de nos serveurs au ping, ou alors la chaîne "DISCONNECTED" si ces derniers ne sont pas connectés.

Pour finaliser notre projet, il va falloir modifier la partie script de la page HTML pour que la fonction d'affichage prenne en compte nos données et les affecte au bon label.

Comme nous l'avons vu plus haut, il va falloir déclarer nos labels dans le tableau PageArray.
Pour simplifier je vais supprimer tous les autres qui ne servent à rien. Il va donc nous rester seulement 3 labels dans ce tableau, chacun correspondant à un serveur.

Voici ce que cela donne :

$(document).ready(function() {
        $.LastUpdateTime=parseInt(0);
        $.roomplan=0;
        $.domoticzurl="http://192.168.1.150:8080";
        //format: idx, value, label, comment
        $.PageArray = [
                ['1366','Data','NAS','Serveur NAS'],
                ['1367','Data','SMS','Serveur SMS'],
                ['1368','Data','FireTV','FireTV'],
        ];

    RefreshData();
});

Et voici le résultat final : 



Et voici le résultat final après avoir personnalisé les autres cases. Je les ai utilisées pour afficher l'état d'ouverture de certaines portes et pour afficher sur la partie gauche :

  • Mon compteur de sacs de granules de bois utilisés. Ce compteur est incrémenté par l'appuie d'un Dash Button à chaque fois que j'utilise un sac. J'explique comment détourner un Dash Button dans mon article ICI
  • La date de dernier arrosage des plantes vertes ! Cette date est mise à jour par l'appuie d'un autre Dash Button. 
  • Le nombre de litres restant dans ma cuve de récupération d'eau de pluie. Vous pourrez trouver mon article sur la fabrication de cette sonde dans mon article ICI




Pour peaufiner :

J'aime bien finir un projet en peaufinant les choses. Je vais donc vous donner dans ce dernier paragraphes, quelques astuces pour que tout soit parfaitement finalisé et fonctionnel dans tous les cas. 

Nettoyage de l'interface 

Ce qui va être le plus facile et rapide à mettre en oeuvre, sera de nettoyer un peu notre interface qui commence à s'encombrer de capteurs virtuels.
Notamment l'onglet "Mesures" dans lequel les 3 nouveaux capteurs ont étés ajoutés. Et comme les valeurs de ces capteurs sont dans notre tableau de bord personnalisé, ils n'ont plus rien à faire dans l'onglet "Mesures".

Pour les faire disparaître de l'affichage (mais ils continuent bien sur d'exister et de fonctionner), il va falloir les ajouter dans le plan nommé "$Hidden Devices" du menu "Reglages / Plus d'options / Plans / Périphériques par emplacements".



Mais quand vous aurez fait cela, votre page personnalisée qui va rechercher les devices dans le plan par défaut ne numéro 0, ne fonctionnera plus ! Génial me direz vous ... on avance ! Rassurez vous il y a une solution. Il va falloir créer un nouveau plan. Dans mon cas je l'ai nommé comme mon programme "amd_ping" et relever son numéro. Pour ma part c'est le 2.
De la même manière que vous avez fait pour le plan "Hidden_devices" il va falloir ajouter tous les devices auxquels vous voudrez accéder dans ce nouveau plan.




Et la dernière chose à faire sera d'aller modifier le code dans la page HTML, dans la section script et remplacer la ligne $.roomplan=0; par $.roomplan=2;

Et le tour est joué !


Accéder au serveur domoticz en local et par Internet ! 

La deuxième peaufinerie que je vous propose sera vitale si comme moi vous avez ouvert un port sur votre box internet pour accéder à domoticz depuis l'extérieur.

Sur notre réseau local, le serveur domoticz à une adresse IP privée fixe. Souvent en 192.168.X.Y.
Mais lorsque l'on accède depuis internet il faut pointer sur l'adresse de la box internet avec un numéro de port spécifique et c'est cette dernière qui fait le lien avec le serveur domoticz et son adresse IP locale. En aucun cas vous ne pouvez accéder à une adresse IP locale depuis internet. On dit que ces dernières ne sont pas routées ... mais ça c'est autre chose.
Et de la même manière, si vous êtes connecté sur votre réseau local et que vous voulez accéder à votre serveur domotique en passant par l'adresse IP de votre box avec le numéro de port, dans la plupart des cas cela ne va pas fonctionner.

Donc pour accéder au serveur domoticz, vous utilisez en général deux URL différentes :
Une URL quand vous êtes sur votre réseau local.
Une URL quand vous êtes sur internet;

Et notre page customisée va devoir faire la même chose pour envoyer sa requête JSON au serveur domoticz afin de récupérer les données à afficher.
Il faudra donc dans le fichier HTML modifier la ligne dans laquelle l'URL à domoticz prend sa valeur.
Voici ci dessous le code qui devra remplacer la ligne initiale qui était ; $.domoticzurl="";//"http://192.168.0.41:8080";

Je remercie Headmax du forum JavaScript de www.developpez.net pour me l'avoir donné. 

$.tmp_domain=(document.domain === "192.168.1.150")?document.domain+":8080":document.domain+":8888";
$.domoticzurl="//"+$.tmp_domain;

Pour que ce code fonctionne chez vous, il vous faudra remplacer l'adresse 192.168.1.150 par l'adresse IP de votre serveur domoticz sur votre LAN. Il vous faudra aussi remplace les numéros de port par ceux qui correspondent aux vôtres.
Pour ma part, sur mon LAN, le serveur domoticz écoute sur le port 8080. Par contre, quand je viens de l'extérieur, j'y accède sur le port 8888. C'est ma box internet qui fait le lien entre le port 8888 et le port 8080.

La dernière chose qu'il vous faudra régler, c'est dire à domoticz qu'il accepte les requête venant de l'extérieur.
Pour cela allez dans "Réglages / Paramètres" et dans la rubrique sécurité sélectionnez "Basic-Auth".




Et voilà, désormais notre page personnalisée sera fonctionnelle et accessible de n'importe quel équipement, de n'importe quelle connexion, de n'importe ou dans le monde !!


Conclusion 



Dans cet article nous venons de voir comment ajouter des pages personnelles à l'interface domoticz et comment les dynamiser !
L'exemple du ping que j'ai réalisé avec vous n'est qu'un exemple pour comprendre. L'important c'est qu'après avoir fait cela, cela nous ouvre énormément de possibilités pour superviser, surveiller, contrôler et interagir avec n'importe quel équipement de votre domicile.

Je ne manquerai pas d'exploiter ces possibilités et de les publier dans de futurs articles.



Et si cet article ou les autres dans ce blog vous semblent utiles, n'hésitez pas à cliquer sur le lien ci-dessous pour aller sur Amazon ! Sans vous couter quoi que ce soit, cela m'aidera à investir dans de nouveaux matériels que je ne manquerai pas de vous présenter.


Soutenez la blogoculture ...

Vous appréciez les articles frais et vitaminés de ce blog et vous voulez faire un geste pour encourager ce partage, saluer le travail, ou parce y avez trouvé des choses utiles ( et que vous êtes sympa ) ?

... c'est possible et vous avez le choix !
Si vous avez un compte Paypal et quelques euros à offrir sans vous mettre sur la paille, subventionnez la culture domotique à l'ancienne !
Vous ne dépenserez pas un radis de plus en faisant votre achat sur Amazon à partir de ce lien.
Economisez du blé avec Amazon Prime ! Offre d'essais 1 mois gratuit (et renouvelable).
Soyez chou et aidez les petits producteurs de blog à se faire connaitre auprès de vos amis facebook !

Merci

Commentaires

  1. Bonjour,
    Quelques soucis avec cet interface
    Je suis quand même arrivé au bout et là soucis :

    Si je fais "sudo bash amd_ping.sh" et que je regarde dans "sudo nano /var/log/amd_ping.log" j'ai ceci :

    mardi 29 mai 2018, 07:19:26 (UTC+0200) IP=192.168.1.178 Failled:192.168.1.182:8098/json.htm?type=command&param=udevice&idx=103
    &svalue=0.763
    mardi 29 mai 2018, 07:19:29 (UTC+0200) IP=192.168.1.179 Failled:192.168.1.182:8098/json.htm?type=command&param=udevice&idx=104
    &svalue=DISCONNECTED

    Donc j'ai bien une réponse de ping mais impossible de transférer les datas vers Domoticz

    Si je fais "sudo sh amd_ping.sh" j'ai ceci :

    pi@RASPBERRYPI:~/Scripts/Ping $ sudo sh amd_ping.sh
    ping: unknown host e-page-perso
    amd_ping.sh: 38: [: !=: unexpected operator
    ping: unknown host alisee-domoticz.html
    # Fichier de co
    ping: unknown host f du programme amd_pi
    ping: unknown host g.sh
    # Chaque lig
    ping: unknown host e est co
    ping: unknown host IP
    # - Nom = U
    ping: unknown host
    ping: unknown host om désig
    ping: unknown host a
    ping: unknown host t l'équipeme
    ping: unknown host t à pi
    ping: unknown host ger
    # - IP = l'adresse IP à pi
    ping: unknown host ger
    # - IDX = l'ide
    ping: unknown host tifia
    ping: unknown host t domoticz associé à cet équipeme
    ping: unknown host t
    192.168.1.178
    192.168.1.179
    192.168.1.180

    Là je ne comprends pas :
    ?? amd_ping.sh: 38: [: !=: unexpected operator ??
    ?? unknown host alisee-domoticz.html ??
    et tout le reste ??

    Et je ne vous donne pas le fichier log...

    J'ai bien fait un sudo chmod 755 amd_ping.sh

    Une idée serait la bienvenue !

    RépondreSupprimer
  2. Bonjour,

    A ce que je comprends, vous avez modifié le script afin de mettre à jour deux capteurs virtuels domoticz qui sont d'idx 103 et 104.

    Pouvez vous me dire ce qu'il se passe si vous lancez une requête directement en lançant la commande suivant depuis l'interface shell:
    sudo curl "192.168.1.182:8098/json.htm?type=command&param=udevice&idx=104
    &svalue=DISCONNECTED"
    Si la commande fonctionne c'est qu'il y a un soucis avec le script. Si cela ne fonctionne pas, c'est que le problème se situe dans la connexion vers domoticz.

    Quand à votre commande "sudo sh amd_ping.sh", comme il s'agit d'un script bash il faut faire "sudo bash amd_ping.sh".

    RépondreSupprimer
  3. Bonjour,
    Voici le message :
    pi@RASPBERRYPI:~ $ sudo curl "192.168.1.182:8098/json.htm?type=command&param=udevice&idx=104
    > &svalue=DISCONNECTED"

    curl: (3) Illegal characters found in URL

    RépondreSupprimer
  4. Je me réponds:
    Pour le message : curl: (3) Illegal characters found in URL
    J'ai simplement via Notepad++ - Edition - Convertir saut de ligne - Convertir en format UNIX
    le fichier amd_ping.conf

    Plus de message curl: (3) Illegal characters found in URL
    Mais ça ne fonctionne toujours pas...

    RépondreSupprimer
    Réponses
    1. Effectivement tous les fichiers doivent être au format Linux (fichier de conf mais aussi le script). J'ai l'impression que vous avez un problème de format et/ou de séparateur de champs. De ce fait, le script ne trouve pas les bons champs et vous avez des chaines de caractères qui contiennent des caractères qui sont mal interprétés.

      Mais vous avez un autre soucis si la mise à jour de domoticz ne se fait pas même quand vous lancez la commande en direct avec la commande "curl".

      Vous devez déjà faire en sorte que la mise à jour de votre capteur fonctionne quand vous faite une requête JSON avec la commande curl.
      Ensuite il faudra comprendre pourquoi le script ne fonctionne pas en plaçant des traces dans le code. Par exemple pour voir quelle ligne est lue dans le fichier de conf vous pouvez ajouter :
      # On va traiter chaque ligne du fichier de conf une par une.
      for ligne in $conf
      do
      ##AJouter ici :
      echo "Trace la ligne lue:$ligne"
      ....

      Bon courage.

      Supprimer
  5. Merci pour les infos
    Lorsque je lance la commande suivante :
    pi@RASPBERRYPI:~/Scripts/Ping $ sudo curl http://192.168.1.182:8098/json.htm?type=command&param=udevice&idx=105&svalue=DISCONNECTED

    J'obtiens ceci :
    [1] 29343
    [2] 29344
    [3] 29345
    [2]- Fini param=udevice
    pi@RASPBERRYPI:~/Scripts/Ping $ {
    "status" : "ERR"
    }
    Curseur reste ici
    Je dois faire ctrl/c pour quitter
    ^C
    [1]- Fini sudo curl http://192.168.1.182:8098/json.htm?type=command
    [3]+ Fini idx=105

    RépondreSupprimer
  6. Par contre, si je fais :
    pi@RASPBERRYPI:~/Scripts/Ping $ sudo bash amd_ping.sh

    J'obtiens :
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 4405 0 --:--:-- --:--:-- --:--:-- 4818
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 7797 0 --:--:-- --:--:-- --:--:-- 8833
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 2548 0 --:--:-- --:--:-- --:--:-- 2650

    Et mes données sont bien modifiées dans Domoticz/Réglages/Dispositifs

    105 Virtuel 00082105 1 Pi-192.168.1.180 General Text DISCONNECTED - - 104 Virtuel 00082104 1 Pi-192.168.1.179 General Text 0.620 - -
    103 Virtuel 00082103 1 Pi-192.168.1.178 General Text 0.749

    RépondreSupprimer
  7. Résultat avec echo "Trace la ligne lue:$ligne" ajouté

    pi@RASPBERRYPI:~/Scripts/Ping $ sudo bash amd_ping.sh

    Trace la ligne lue:# http://framboiseaupotager.blogspot.be/2018/03/ajout-dune-page-personnalisee-domoticz.html
    Trace la ligne lue:# Fichier de conf du programme amd_ping.sh
    Trace la ligne lue:# Chaque ligne est contituée par Nom:IP:IDX avec
    Trace la ligne lue:# - Nom = Un nom désignant l'équipement à pinger
    Trace la ligne lue:# - IP = l'adresse IP à pinger
    Trace la ligne lue:# - IDX = l'identifiant domoticz associé à cet équipement
    Trace la ligne lue:Pi-192.168.1.178:192.168.1.178:103
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 9789 0 --:--:-- --:--:-- --:--:-- 13250
    Trace la ligne lue:Pi-192.168.1.79:192.168.1.79:104
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 4589 0 --:--:-- --:--:-- --:--:-- 4818
    Trace la ligne lue:Pi-192.168.1.181:192.168.1.181:106
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 176 0 --:--:-- --:--:-- --:--:-- 177

    RépondreSupprimer
  8. BON CA EVOLUE :

    Si je fais :
    sudo curl "http://192.168.1.182:8098/json.htm?type=command&param=udevice&idx=104&svalue=TEST"

    donc sudo curl avec les " ...."
    J'obtiens ceci :
    {
    "status" : "OK",
    "title" : "Update Device"
    }

    J'ai essayé avec différents IDX et cela fonctionne : Réglages/Dispositifs/
    107 Virtuel 00082107 1 Pi-192.168.1.182 General Text TEST
    106 Virtuel 00082106 1 Pi-192.168.1.181 General Text TEST
    105 Virtuel 00082105 1 Pi-192.168.1.180 General Text TEST
    104 Virtuel 00082104 1 Pi-192.168.1.179 General Text TEST
    103 Virtuel 00082103 1 Pi-192.168.1.178 General Text TEST

    Donc le CURL fonctionne !
    Il me semble.
    Maintenant le reste ...

    RépondreSupprimer
  9. On avance ! c'est super !
    Votre requête JSON est bonne et pour Raspberry arrive à l'envoyer au serveur domoticz.
    D'après les traces que l'on observe, il commence à y avoir des problèmes quand le script veut interpréter la ligne "Pi-192.168.1.178:192.168.1.178:103" dans votre ficher de conf.
    Vous pourriez ajouter de nouvelles traces pour voir comment le script arrive à la décomposer en ces 3 éléments : le nom, l'adresse IP à pinger et l'idx domoticz associé.
    Il faudrait ajouter des traces comme ci-dessous :

    #On recupere les valeurs dans le fichier de conf.
    nom=`echo $ligne | cut -d":" -f1`
    echo "Trace nom:$nom"
    adresseIP=`echo $ligne | cut -d":" -f2`
    echo "Trace IP:$adresseIP"
    idx=`echo $ligne | cut -d":" -f3`
    echo "Trace idx:$idx"

    Avec ça on verra ce que votre programme récupère comme données dans le fichier de conf.

    RépondreSupprimer
  10. Voici le résultat :
    Trace nom:Pi-192.168.1.178
    Trace IP:192.168.1.178
    Trace idx:103
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 3076 0 --:--:-- --:--:-- --:--:-- 3312
    Trace nom:Pi-192.168.1.79
    Trace IP:192.168.1.79
    Trace idx:104
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 4556 0 --:--:-- --:--:-- --:--:-- 4818
    Trace nom:Pi-192.168.1.180
    Trace IP:192.168.1.180
    Trace idx:105
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 5482 0 --:--:-- --:--:-- --:--:-- 5888
    Trace nom:Pi-192.168.1.182
    Trace IP:192.168.1.182
    Trace idx:107
    % Total % Received % Xferd Average Speed Time Time Time Current
    Dload Upload Total Spent Left Speed
    100 53 100 53 0 0 6004 0 --:--:-- --:--:-- --:--:-- 6625

    RépondreSupprimer
  11. Ces traces sont satisfaisantes, en tout cas pour ce qui est de la récupération des données du ficher du configuration. Il faut que vous continuiez d'afficher les autres valeurs au fur et à mesure dans le programme jusqu'à voir ce qui ne va pas. Principalement affichez les variables "ping" et "reponse_ping". Vous me direz ce que vous avez.

    RépondreSupprimer

Enregistrer un commentaire