2. Une 1ere PAGE : LE PLAN INTERIEUR

2.1 l’image

Pour construire l’image du plan au format svg on utilise

Adobe Illustrateur, payant mais (version hackée sur le net)
Inskape gratuit open source : https://inkscape.org/fr/release/inkscape-1.0.2/

Les avantages d’utiliser des images svg c’est de pouvoir manipuler le contenu avec javascript dans le DOM. Pour cela l’image doit faire partie complètement du HTML, l’url de l’image ne suffit pas.

Comme on ne peut pas charger uniquement cette url avec par exemple <img src= ’’image.svg ‘’>, il faut inclure cette image dans un fichier PHP et faire un include : < ?php include (‘image_svg.php’) ;?>

Il n’est pas facile au début d’utiliser ces logiciels pour construire complètement un plan ; une autre solution est de construire le plan au format jpg ou png avec un outil graphique plus facile à utiliser, Photofiltre, Paint ou Gimp et de convertir ensuite l’image ; un convertissur en ligne: https://www.autotracer.org/fr.html

C’est une bonne solution pour débuter mais quand tout fonctionne, il est alors temps de réaliser un plan directement avec AI, le poids du fichier sera réduit de beaucoup et la qualité sera excellente

Les deux solutions :

2.1.1 Avec un logiciel de conception graphique vectorielle

2.1.1.a avec Inkscape qui est gratuit

On délimite le terrain en traçant un rectangle et en choisissant la couleur

On construit les murs extérieurs de la même façon ; on peut ajuster l’épaisseur en utilisant la barre supérieure

Pour modifier les objets :

Toujours avec un rectangle, on ajoute les pièces

On peut faire du copier/coller

Pour regrouper des objets de même couleur ou d’un même ensemble : GROUPER

Pour dégrouper :

Pour les textes

Améliorer l’emplacement des ouvertures :

On reste dégroupé et on trace un rectangle autour des murs

Note

Contrairement à Adobe Illustrator , Inkscape ne gère pas les feuilles de style mais celles indiquées sont afficher dans les navigateurs.

Pour ajouter des classes pour gérer les changements de couleur dans monitor, pour certains dispositifs :

On donne un nom à cette classe :

L’objet avec la classe :

les CSS dans le fichier .svg

Remarque

On ajoute aussi une class aux textes

La feuille de style complète pour le plan

L’image est centrée au milieu du calque , on la déplace à l’angle droit haut

On fait correspondre l’image avec la page

On sauvegarde l l’image

On nettoie le code et on créer un fichier PHP qui contiendra l’image ; pour que cette image soit modifiable par le DOM, elle ne peut être appelée directement comme pour les formats classiques mais chargée entièrement dans le fichier HTML.

Avant nettoyage :

Nettoyage de l’image

on supprime la partie ci-dessus (jusqu’à « <style>) et on la remplace par :

<svg version="1.1" id="Calque_1" viewBox="0 0 150 150">

Pour comprendre viewbox : https://la-cascade.io/comprendre-svg-viewbox/

Affichage dans monitor (on peut ajouter une marge pour centrer l’image)

534x720 : tablette chinoise

Affichage sur PC : 1200x612

2.1.1.b avec Adobe Illustrator

La construction est sensiblement la même, la différence pour notre sujet, réside dans la description des ID ; Inkscape ajoute des id partout, AI en ajoute aucun, sauf si on le spécifie, comme ci-dessous ;

Il est impératif pour retrouver facilement les objets d’ajouter les id à la construction.

Note

Les cercles ici indiquent lorsqu’ils clignotent, un changement de piles à prévoir ; le N° qui suis « cercle » est l’id du dispositif.

Dans Inkscape, lors de la construction, il est possible d’ajouter du javascript, avec AI, il faut l’ajouter avec un éditeur de texte ou dreamweaver.

<g
id="ouverture_porte_sejour"
onclick="popup_device(7)"

Attention aux styles après construction :

Avertissement

Un style qui existe alors qu’il n’est pas utilisé crée une erreur

La construction de mon plan

avec AI :

2.1.1.c Vérification du code SVG

https://www.svgviewer.dev/

2.1.2 – 2eme solution pour le plan, conversion en ligne

Mon fichier floorplan.png

Conversion avec Autotracer :

Les textes transformés ne sont pas toujours lisibles, il faut modifier le plan,

2.1.3 – Les couleurs

Choisir des couleurs web : 6 familles (#00xxxx, #33xxxx, #66xxxx, #99xxxx, #CCxxxx, #FFxxxx), 216 couleurs, ce qui limite ne nombre de class ; un seul fichier de class pour tout le site….

…la construction est plus longue et là aussi il faut le faire depuis le début

2.1.4 - ajout d’un ou plusieurs dispositifs

Sur le net on trouve des icones au format svg, sinon on transforme les png avec Autotracer Les icones que j’ai choisies : contact d’ouverture de porte et détecteur de présence

Note

Pour les textes il suffit par exemple d’ajouter « tmp » qui sera en javascript remplacé par la température enregistrée par le dispositif

Importer l’icone

Redimensionner l’(les)objet(s) :

Comme on peut le voir, avec les images svg le remplacement de couleur, de textes s’effectuent rapidement lors de la création ; il en est de même dans le HTML en utilisant javascript. Ajouter un texte « temp » par exemple pour l’affichage de la température ; ce texte sera remplacé par la valeur de la température en utilisant Javascript;

Note

les détecteurs de présence peuvent souvent enregistrer la température.

Pour les dispositifs et les textes, ajouter un ID :

Comme indiqué précédemment, Avec Inkscape, il est possible d’ajouter facilement un ID lors de la construction de l’image

La couleur de l’objet :

avec Inskcape:

avec Adobe Illustrator:

Enregistrer le fichier, j’ai choisi « interieur.svg », le nom de ma page

Pour les textes c’est la même façon de procéder

Aperçu d’une image avec de nombreux dispositifs

2.2 Des exemples d’autres dispositifs

2.2.1 Ajout du détecteur de fumée :

Ajout de l’icône avec Inkscape :

Un href, un id, un titre et un onclick avec un id (idm ou idx) ; option choisie dans /admin/config.php

define('CHOIXID','idm');// DZ:idm ou idx ; HA : idm uniquement

2.2.2 Ajout de caméras

Comme il n’existe pas d’idx Domoticz pour les caméras , il n’y aura pas de confusion à utilser « idx » pour identifier les caméras; nous réserverons la plage >= 10 000 pour cela ;

cette valeur peut être modifiée, voir 2.2.1 Ajout du détecteur de fumée :

La base de données :

2.3 le fichier PHP de l’image

Avec Notepad, on supprime les premières lignes (Inkscape), comme indiqué au § 2.1.1.a avec Inkscape qui est gratuit ou les 2 ou 3 premières lignes (AI) :

Enregistrer l’image au format PHP dans le dossier /include: interieur_svg.php (utilisé ici)

le fichier PHP commence par <svg …., supprrimer la ligne <?xml version= »1.0 » encoding= »utf-8 »?>

<svg
version="1.1"
id="Calque_1"

Récupérer dans Domoticz les noms et les idx des dispositifs

Dans la table « dispositifs » de la base de données Maria DB Domoticz,

enregistrer ces données ; si c’est une première installation de monitor, idm peut être le même qu’idx ; dans l’exemple ci-dessous idm est différent après une réinstallation de Domoticz.

Autres exemples :

Que fait le script javascript qui gère les dispositifs :

L’appel ajax : appelle la fonction PHP devices_plan($variable), la variable est le N° du Plan

if ($app=="devices_plan") {if (DECOUVERTE==true) {include('include/json_demo/devices_plan_json.php');return;}
else {$retour=devices_plan($variable);echo json_encode($retour); }}

La fonction PHP devices_plan($variable):

Le Json renvoyé :

Monitor peut afficher un changement de couleur du dispositif, une température mais à condition de retrouver l’ID du dispositif ou l’ID du texte dans le DOM.

C’est pourquoi nous avons ajouté des ID lors de la construction du plan.

Un aperçu du fichier interieur_svg.php :

Note

Pour une icône avec une seule couleur, l’ID de l’icône est suffisant mais avec une icône où une seule partie est colorée comme pour l’ouverture de porte, ii est facile, avec F12 d’inspecter la partie de l’icône qui nous intéresse et de rajouter un ID dans le <path concerné

C’est alors cet ID qu’il faudra entrer pour le dispositif dans la Base de données SQL.

Pour les textes, si l’ID n’a pas été spécifié à la construction de l’image, ils sont faciles à retrouver avec une recherche sur Notepad pour ajouter un ID ;

Sur AI il faudra souvent modifier légèrement l’ID

2.3.1 Pour afficher le statut complet du dispositif

C’est la fonction javascript popup_device du fichier footer.php qui ouvre cette fenêtre.

Remarque

les caméras ne sont pas des dispositifs dans Domoticz, aussi des ID >= à 10000 leur sont attribués ; cette valeur peut être modifiée en modifiant le programme qui suit.

Cette fonction est activée par un onclick que l’on ajoute dans l’image ; par contre la BD n’est pas nécessaire pour cet affichage, à condition que le onclick possède comme id l’idx de Domoticz.

id="temp_cuisine"
onclick="popup_device(21)"
inkscape:transform-center-x="-23.52"
inkscape:transform-center-y="31.36"><tspan
  sodipodi:role="line"
  id="tspan4545-8"
  x="60.40955"
  y="281.74768">temp</tspan></text><g
id="ouverture_porte_salon"
transform="matrix(0.16425446,0,0,0.17058408,527.48825,763.57501)"
onclick="popup_device(38)"><path
...

popup_device(21) –> 21 = idm

Avec Inkscape ce onclick peut être ajouter lors de la construction

avec AI il faut l’ajouter manuellement.

Pour indiquer que l’élément est cliquable, comme pour le HTML, on ajoute xlink:href= »#interieur » et une balise <a (pour afficher la main ) non nécessaire surtout pour les tablettes.

Ou lors de la construction avec Inkscape :

2.3.2 Affichage des caméras

Pour les caméras génériques chinoises, pour les configurer : Internet explorer etait le seul navigateur qui permettait d’afficher Net Surveillance , Edge a pris la relève.

La table « cameras » dans la base de données SQL a été remplie, voir le paragraphe concernant la base de données : 0.3.3 caméras

Seulement si Zoneminder est utilisé :

Pour retrouver l’ID Zoneminder

pour toutes les cameras :

Dans un navigateur : IP DE ZONEMINDER/zm/api/monitor.json

Les icones, les onclick, les <a pour le lien (pour version PC) , ont été ajoutés sur le plan ; une fenêtre (modal) est ajoutée sur la page. Voir les paragraphes 2.2.2 Ajout de caméras et 2.3.1 Pour afficher le statut complet du dispositif

La modale pour la fenêtre de l’image :

C’est la fonction PHP « upload_img($idx) » appelée par ajax qui renvoi l’image de la caméra

Le script JS dans footer.php :

  function popup_device(nom) {
  if (nom < 10000){if (pp[nom]){
  .....
  }
  else { // partie consacrée aux caméras
          $.ajax({
          type: "GET",
url: 'ajax.php',
     data: "app=upload_img&variable="+nom,
     dataType: 'json',
success: function(html) {
          urlimg=html['url']+"?"+Date.now()/1000;zoneminder=html['id_zm'];dahua=html['marque'];
          ip_cam=html['ip'];idx_cam=html['idx'];dahua_type=html['type'];console.log(dahua_type);
          if (nom<10010){//de 10000 à 10009: cam autour maison, >10009 : cam jardin garage
  $('#cam').attr('src',urlimg); $('#camera').modal('show');}
            else {$('#cam_ext').attr('src',urlimg); $('#camera_ext').modal('show');} }
                  });
          }
  }

Affichage de la configuration des caméras:

Pour les caméras Dahua, il existe un script spécifique ; pour les autres caméras, le script ne fonctionne que si Zoneminder est installé et la configuration effectuée : Le fichier de configuration admin/config.php :

Configuration de Zoneminder

accès aux données : API 2.0

le token :

Dans options/système
Réponse avec opt_use_auth coché :
Réponse avec opt_use_auth décoché :

Ci-dessus c’est un exemple manuel, la demande se fera en PHP automatiquement

L’affichage de cette config est géré par un script JS : modalink et non par une fenêtre modale qui est déjà ouverte pour l’image ; appel de ce script par le bouton dans la modale de l’image.

 <!-- section intérieur start ---- fichier interieur.php-->
 <div id="interieur" >
      <div class="container">
      ....
 ....
 <div class="modal" id="camera">
<div class="modal-dialog" style="height:auto">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title">image camera</h3>
                 <button class="btn_cam">Config</button>

Plus d’infos sur modalink : https://github.com/dmhendricks/jquery-modallink

Les script JS, dans footer.php et dans mes_js.js :

Dans footer.php :

$(".btn_cam").click(function () {if (zoneminder==null && dahua=='generic'){alert("Zoneminder non installé");}
else {$.modalLink.open("ajax.php?app=upload_conf_img&name="+dahua+"&command="+dahua_type+"&variable="+ip_cam+"&idx="+idx_cam+"&type="+zoneminder,{
// options here
       height: 400,
       width: 400,
       title:"configuration de la caméra",
       showTitle:true,
       showClose:true
}); }
});

Dans mes_js.js :

  (function ($) {
   $.modalLinkDefaults = {
           height: 600,
           width: 900,
           showTitle: true,
           showClose: true,
           overlayOpacity: 0.6,
           method: "GET", // GET, POST, REF, CLONE
           disableScroll: true,
           onHideScroll: function () { },
           onShowScroll: function () { }
   };

|image316|

Le fichier ajax.php :appel function de la fonction cam_config($marque,$type,$ip,$cam,$idzm), (dans fonctions.php)

Extrait de cette fonction

Pour caméras DAHUA

Note

Modification CURL pour les différents types d’Autorisation des caméras Dahua

3.2Authentication The IP Camera supplies two authentication ways: basic authentication and digest authentication. Client can login through: http://<ip>/cgi-bin/global.login?userName=admin. The IP camera returns 401. Then the client inputs a username and password to authorize. For example: 1. When basic authentication, the IP camera response: 401 Unauthorized WWW-Authenticate: Basic realm=”XXXXXX” Then the client encode the username and password with base64, send the following request: Authorization: Basic VXZVXZ. 2. When digest authentication, the IP camera response: WWW-Authenticate: Digest realm= »DH_00408CA5EA04 », nonce= »000562fdY631973ef04f77a3ede7c1832ff48720ef95ad », stale=FALSE, qop= »auth »; The client calculates the digest using username, password, nonce, realm and URI with MD5, then send the following request: Authorization: Digest username= »admin », realm= »DH_00408CA5EA04 », nc=00000001,cnonce= »0a4f113b »,qop= »auth » nonce= »000562fdY631973ef04f77a3ede7c1832ff48720ef95ad »,uri= »cgi-bin/global.login?userName=admin », response= »65002de02df697e946b750590b44f8bf »

https://github.com/mgrafr/monitor/raw/main/Dahua_doc/DAHUA_IPC_HTTP_API_V1.00x.pdf

Dire à Curl d’accepter plusieurs méthodes comme ceci :

curl_easy_setopt(curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC | CURLAUTH_DIGEST);

Pour caméras onvif autres :

Comme le token peut être utile dans d’autres pages création d’une fonction pour cela :

function token_zm(){
  if ($_SESSION['time_auth_zm']<=time() || ($_SESSION['auth_zm']=="")){
$url=ZMURL.'/api/host/login.json';
$post=[
'user' => ZMUSER,
'pass' => ZMPASS,
 ];
 $ckfile  = "cookies.txt";
//$out=file_post_curl($url,$ckfile,$post);
//solution batch   décocher les 2 lines suivantes et cocher celle ci-dessus
$oot=' curl -XPOST -c cookies.txt -d "user='.ZMUSER.'&pass='.ZMPASS.'&stateful=1" '.$url;
$out=exec($oot);
//------------------
$out = json_decode($out,true);//echo $out;
$token = $out['access_token'];
$_SESSION['time_auth_zm']=time()+TIMEAPI;
$_SESSION['auth_zm']=$token;echo $token;
}
else {$token=$_SESSION['auth_zm'];}
$zm_cle = array (
'token' => $_SESSION['auth_zm']);
$cle=json_encode($zm_cle);
file_put_contents('admin/token.json',$cle);
return $token;
}

2.3.3 La gestion des dispositifs à piles

Assurée par la fonction PHP devices_plan(), vue précédemment ; la variable dans la base de données SQL a aussi été décrite lors de la configuration minimale

Table « dispositifs » : variables

Table « text_image »

La notification se fait :

sur la page d’accueil

<div class="aff_bat" ><img id="batterie" src="images/batterie_faible.svg" alt="batterie" /></div>

     css

/*aff batterie */
.aff_bat{position: absolute;top: 810px;left: 120px;}
#batterie{width: 30px;height: auto;}
.cercle{animation-duration: .8s;animation-name: clignoter;
  animation-iteration-count: infinite;transition: none;}

Sur les plans intérieur ou extérieur

IMPORTANT

par défaut la notification de piles faibles est affichée sur le plan intérieur (page interieur.php)

pour l’afficher sur le plan extérieur (page exterieur.php , l’indiquer dans admin/config.php:

define('NOTIFICATIONS_PILES','exterieur');// nom de la page default : interieur (sans extension .php)

Si une nouvelle page est crée , il faut ajouter ces lignes de code dans la page:

<div id="erreur_NOM_PAGE(SANS .PHP) ></div>
<div id="reset_erreur_NOM_PAGE(SANS .PHP)" style="display:none"><svg version="1.1" id="reset_erreur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="30px" y="30px" viewBox="0 0 16 16" xml:space="preserve">
circle onclick="document.getElementById('reset_erreur_exterieur').style.display='none';document.getElementById('erreur_exterieur').innerHTML ='';"fill="#007DC6" cx="7.7" cy="7.9" r="7.7"/>
<path class="st1" d="M8,3C5.2,3,3,5.2,3,8s2.2,5,5,5s5-2.2,5-5c0-0.7-0.2-1.4-0.5-2.1c-0.1-0.3,0-0.5,0.3-0.7c0.2-0.1,0.5,0,0.6,0.2 c1.4,3,0.1,6.6-2.9,8s-6.6,0.1-8-2.9s-0.1-6.6,2.9-8C6.3,2.2,7.1,2,8,2V3z"/>
<path d="M8,4.5V0.5c0-0.1,0.1-0.2,0.3-0.2c0.1,0,0.1,0,0.2,0.1l2.4,2c0.1,0.1,0.1,0.3,0,0.4l-2.4,2c-0.1,0.1-0.3,0.1-0.4,0C8,4.6,8,4.5,8,4.5z"/></svg></div>

Pour une meilleure visualisation des dispositifs dont la pile est à remplacer

ajout d’un signe distinctif, un cercle clignotant :

. sur les images des plans interieur et exterieur

. sur l’image svg d’un dispositif s’il est séparé d’un plan (exemple de cercles, $ 2.1.1.b avec Adobe Illustrator)

Important

Pour annuler la notification, faire un RESET :

Si les cercles clignotants ne sont pas utilisés, pour retrouver le nom du dispositif :

voir le paragraphe 2.1.1.b avec Adobe Illustrator

par sms

effectué par Domoticz:

Le script dz : https://raw.githubusercontent.com/mgrafr/monitor/main/scripts_dz/lua/notification_variables.lua

Pour une meilleure compréhension de la gestion des piles

Calcul du niveau des piles

Variables Domoticz :

l’image du plan

Un cercle visible selon l’état de la batterie est ajouté à l’image SVG du plan concerné :

Il suffit d’ajouter en copier/coller des cercles à tous les dispositifs sur piles et d’en modifier le positionnement.

exemple pour un cercle

<ellipse style="fill-opacity: 1; fill: red;" class="cercle" id="cercle_23" cx="6" cy="6" rx="6" ry="6">
<title id="temperaure-exterieure">cercle temp ext cuisine</title>
</ellipse>

l’image du code ci-dessus concernant un dispositif non inclu dans un plan.

Les styles CSS

Les valeurs sont définies dans le fichier de configuration /admin/config.php :
define('PILES', array( //id var domoticz, nom var domoticz, %1 (moyen), %2 (faible) de l'energie restante
'17',
'alarme_bat',
50,
20
));
La fonction javascript : function maj_devices(plan) :

l’annulation de la notification

Effectuée par un onclick dans l’image svg (incluse dans interieur.php et exterieur.php):

Exemple pour interieur.php

<circle onclick="document.getElementById('reset_erreur_interieur').style.display='none';document.getElementById('erreur_interieur').innerHTML ='';" fill="#007DC6" cx="7.7" cy="7.9" r="7.7"/>

Lors d’un clique sur l’image RESET , le display (des <div du texte et de l’image “reset”) , passe à none

2.3 4 Le contrôle de la tension d’alimentation

Le fichier voltmetre_svg.php

Comme pour les dispositifs on télécharge une image svg ;
comme pour le plan, sur Inkscape ou AI on ajoute un texte (tmp ou autre) qui sera remplacé par la valeur de la tension.
On enregistre cette image dans un fichier PHP (on supprime les lignes inutiles).
On ajoute aussi un ID

Le dispositif Domoticz :

La base de données SQL :

Pour maj_js, au lieu de temp il est possible de remplacer le type par un autre texte ; pour cela il faut modifier le script JS

Le script JS dans le fichier footer.php, déjà vu précédemment :

2.3 5 ajouter des lampes

Voir un exemple dans le paragraphe 4.1.1 Ajouter des lampes, consacré à l’extérieur de la maison, les lampe de jardin

2.3 6 ajouter une prise

Les prises sont commandées depuis le mur de commandes et la visualisation de la position (on off) est aussi visible sue le plan intérieur

Extrait du script dans mur_inter.php

L’image SVG enregistrées dans en PHP

<svg version="1.1" id="sw11" width="70" height="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 70 70">
<a href="#murinter"  ><path class="prise_bureau_imp" d="M33.7,5c-4.9,0.5-10.1,2.6-14.1,5.7c-1.5,1.2-3.8,3.5-5,5c-5.2,6.7-7.3,15.4-5.6,23.9
     c1.6,8,6.4,15,13.3,19.1c2.3,1.4,5.5,2.8,6.5,2.8c1.6,0,3-1.7,2.7-3.2c-0.2-1.3-0.8-1.8-2.6-2.5c-3.3-1.3-5.8-2.9-8.1-5.3
     c-3.4-3.4-5.4-7.2-6.4-11.8c-1.9-9.3,1.9-19,9.6-24.3c11.5-8,27.2-3.6,33.3,9.2C61.2,32,60,42,54,49c-2.6,3.1-7.2,5.9-9.6,5.9
     c-3,0-4.9-3.4-5.2-9.4l-0.1-1.7l1.2-0.2c1.9-0.4,3.3-1.1,4.7-2.6c0.9-0.9,1.3-1.5,1.7-2.3c0.9-1.8,0.9-2.3,0.9-7.9v-5H36.7H25.6
     v5c0,5.6,0,6.1,0.9,7.8c1.2,2.5,3.4,4.2,6.1,4.8l1.2,0.3l0.1,1.9c0.4,7.8,3.1,12.7,7.8,14.3c1.5,0.5,4,0.5,5.6,0.1
     c2.9-0.9,7.2-3.5,9.7-6.1c8.4-8.5,10.5-22.2,5.1-33.1C56.8,10.1,45.5,3.7,33.7,5z"/>
     <path class="st0" d="M30,16.4c-0.2,0.1-0.5,0.4-0.6,0.5c-0.1,0.2-0.1,1.5-0.1,3.7v3.4h2h2v-3.5c0-3.8,0-3.9-0.8-4.3
     C31.9,16,30.6,16.1,30,16.4z"/>
     <path class="st0" d="M40.8,16.4c-0.2,0.1-0.5,0.4-0.6,0.5c-0.1,0.2-0.1,1.5-0.1,3.7v3.4h2h2v-3.5c0-3.8,0-3.9-0.8-4.3C42.7,16,41.4,16.1,40.8,16.4z"/>
<rect x="5" y="-0.2" class="st59" width="70" height="68"/>
     <text transform="matrix(0.8406 0 0 1 0 61.5324)" class="st50 st51a">Lampe Bureau</text></a>
</svg>

Dans la BD SQL :

Extrait de new_maison_svg.php , image du plan intérieur:

2.3.7 ajouter un capteur de T° extérieur Zigbee

2.3.7.1 Le capteur dans Domoticz

Dans le plan de Domoticz :

2.3.7.2 Le capteur dans la BD

On a choisi de limiter le nb de caractère à 4, à l’origine :

2.3.7.3 Le capteur dans Monitor

L’image :

 <svg version="1.1" id="th_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
 <a xlink:href="#interieur" onclick="popup_device(23)"><path style="fill: #84bef1;" rel="23" d="M9,11.2V7h2v4.2c1.6,0.6,2.4,2.3,1.8,3.8c-0.6,1.6-
2.3,2.4-3.8,1.8S6.6,14.6,7.2,13C7.5,12.1,8.1,11.5,9,11.2z M8,10.5
      c-1.9,1.1-2.6,3.6-1.5,5.5s3.6,2.6,5.5,1.5c1.9-1.1,2.6-3.6,1.5-5.5c-0.4-0.6-0.9-1.1-1.5-1.5V4c0-1.1-0.9-2-2-2S8,2.9,8,4V10.5
      L8,10.5z M6,9.5V4c0-2.2,1.8-4,4-4s4,1.8,4,4v5.5c2.5,2.2,2.7,6,0.5,8.5c-1.1,1.3-2.8,2-4.5,2c-3.3,0-6-2.7-6-6
      C4,12.3,4.7,10.7,6,9.5z"/></a
 <text id="temp_ext_cuisine" transform="matrix(0.6725 0 0 1 7.4663 15.254)" class="st33 st36b">tmp</text>
 </svg>

Le fichier Json

2.4 le fichier PHP de la page

Il faut maintenant ajouter la page sur le site

*Un modèle de page pour toutes les pages du site*
<!– section TITRE start –>
<!– ================ –>
<div id= »ID DE LA PAGE » class= »CLASS DE LA PAGE OPTIONNEL »>
<div class= »container »>
<div class= »col-md-12 »>
<h1 class= »title_TITRE text-center »> exemple Prévisions<span> météo</span></h1>
<div class= »CLASS DU CONTENU » style= »color:black; »>
<div id= »ID DE CETTE LIGNE » >LIGNE OPTIONNELLE</div>
div id= »CONTENU » class= »table-responsive »></div>
<div id= »AUTRE CONTENU OPTIONNEL »></div>
</div></div></div></div>
<!– fin de la section TITRE –>

En vert du contenu optionnel

Sur cette page, des fenêtres(modal) peuvent être ajoutées si besoin, Bootstrap facilite la création ; sur la page décrite en suivant, 2 fenêtres sont ajoutées.

Le menu :

Le fichier include/interieur .php

Important

à partir de la version 4.0.0 l’image du plan peut être enregistrée dans le dossier custom/php; cette solution doit être privilégiée pour éviter des erreurs lors de la mise à jour de version.

https://raw.githubusercontent.com/mgrafr/monitor/main/include/interieur.php

Extrait du fichier index_loc.php : pour info, en général ne pas modifier ce fichier

include ("include/accueil.php");// l' affichage page accueil
if (ON_MET==true) include ("include/meteo.php");     // une page de prévision météo
include ("include/interieur.php");// plan intérieur
//ne pas modifier ce fichier

Comme pour entete_html.php, header.php, accueil.php, config.php, interieur.php est chargée obligatoirement au démarrage de l’appli.

Extrait du fichier include/header.php :

<li class="zz active"><a href="#header">Accueil</a></li>
<?php if (ON_MET==true) echo '<li class="zz"><a href="#meteo">Météo</a></li>';?>
<li class="zz"><a href="#interieur">Intérieur</a></li>

CSS : css/mes_css.css

Le style existe déjà pour toutes les pages , pour les modifier :

#interieur, #exterieur,#alarmes,#commandes,#murcam ,#murinter,
   #app_diverses,#admin, #zigbee, #zwave, #dvr, #nagios,#spa,#recettes{
   background-color: aquamarine;}

2.5 F12 des navigateurs pour faciliter la construction

Pour les PIR, les capteurs d’ouverture, pour le changement de couleur

2.6 Les dispositifs virtuels Domoticz et MQTT

Pour monitor ça n’a pas d’importance, il n’y a pas de notion « virtuel – réel » mais la mise à jour de ces dispositifs dans Domoticz n’est pas toujours facile surtout pour les dispositifs avec plusieurs valeurs tels que température+ Humidité température +batterie,…

Un script dz : séparation_valeurs.lua

https://raw.githubusercontent.com/mgrafr/monitor/main/scripts_dz/lua/s%C3%A9paration_valeurs.lua

local scriptVar = 'separation_valeurs'
return
{
 on = { customEvents = { scriptVar, },
     httpResponses =   { scriptVar, },
 },
 logging =
 {  level = domoticz.LOG_DEBUG, -- LOG_ERROR
    marker = scriptVar,
 },
 execute = function(dz, item)
     lodash = dz.utils._
     local function sendURL(idx, temperature,batteryLevel) --CAPTEURS TEMPERATURE: svalue=temp    battery= volts battery
     local url = dz.settings['Domoticz url'] .. '/json.htm?type=command&param=udevice&idx=' .. idx .. '&nvalue=0&svalue=' .. temperature .. '&battery=' .. batteryLevel;
     dz.openURL({   url = url,
             callback = scriptVar,})
     end
     local function sendURL1(idx, temperature,humidity,confort,batteryLevel) --CAPTEURS TEMPERATURE+HUMIDITE : svalue=temp;hum;Humidity_status   battery=volts battery
     local url = dz.settings['Domoticz url'] .. '/json.htm?type=command&param=udevice&idx=' .. idx .. '&nvalue=0&svalue=' .. temperature ..';'..  humidity ..';' .. confort .. '&battery=' .. batteryLevel;
     dz.openURL( { url = url,
             callback = scriptVar,})
     end
         if item.isCustomEvent then
         mqtt = item.data;print ("q:" .. mqtt)
         mqtt = dz.utils.fromJSON(mqtt)
         local batteryLevel = mqtt.batteryLevel
         local temperature = mqtt.temperature
         local humidity = mqtt.humidity
         local humidity_status=tonumber(humidity);print ("q:" .. humidity_status)
             if (humidity_status<30) then confort = "2" ;
             elseif (humidity_status>39 and humidity_status<60) then confort = "1" ;
             elseif (humidity_status>59 and humidity_status<80) then confort = "0" ;
             elseif (humidity_status>79) then confort = "3";
             else confort = "3"
             end
         local idx = mqtt.idx;
         local type=dz.devices(idx).deviceType;print("type" .. tostring(type) .. ' ,  humidity_status : ' .. tostring(confort));
         if (type=='Temp')  then sendURL(idx, temperature, batteryLevel);
         elseif (type=='Temp + Humidity') then sendURL1(idx, temperature, humidity, confort, batteryLevel);
         else print("pas de dispositif trouvé");
         end
     elseif not item.ok then
         dz.log('Problèm avec l\'envoi de la temperature ou  batteryLevel' .. lodash.str(item), dz.LOG_ERROR)
     else
         dz.log('All ok \n' .. lodash.str(item.data) .. '\n', dz.LOG_DEBUG)
     end
 end
 }

Depuis Domoticz 2021.1