16. Ajouter des pages ou des alertes

16.1 Ajouter un plan (ex : 1er étage)

créer la page avec le plan, voir le § 2. Une 1ere PAGE : LE PLAN INTERIEUR
Ajouter la page à index_loc.php

Ajouter la page au menu dans header.php

Ajouter l’ID et les classes si ellesexistent au fichier mes_css.css

ci-dessous les ID’s des pages existantes

#interieur, #exterieur, #meteo, #alarmes,#commandes,#murcam ,#murinter,#app_diverses,#graphiques,#admin, #zigbee, #zwave, #dvr, #nagios,#spa,#recettes{

16.2 Ajouter une page vierge

affichage d’un sous domaine distant

<?php
session_start();
$domaine=$_SESSION["domaine"];
if ($domaine==URLMONITOR) $lien_ID_MENU=NOM SOUS DOMAINE dans config.php;
if ($domaine==IPMONITOR) $lien_ID MENU= NOM  IP dans config.php;;
?>
<!-- section TITRE start -->
<!-- ================ -->
<div id="ID du MENU" >
     <div class="container">
             <div class="col-md-12">
       <h1 id="about" class="title" style="position:relative;top:-30px;">TITRE1 : <span style="color:blue">TITRE2</span></h1>
                      <iframe id="ID de l’IFRAME" src="<?php echo $lien_IDMENU;?>" frameborder="0" ></iframe>
             </div>
        </div>
                </div>
<!-- section TITRE fin-->

16.3 Ajouter une alerte, une alarme, …

16.3.1 Exemple avec un rappel pour la prise de médicaments sur la page d’accueil

Télécharger une icones ou image svg

Dans Domoticz : Créer la variable

Dans le script notifications_timer :

--médicaments
elseif (time=='20:00' and domoticz.variables('pilule_tension').value == '0') then
     domoticz.variables('pilule_tension').set('pilule_michel')
end

Dans le script notifications_variables (pour une alerte sms)

return {
     on = {
             variables = { 'pilule_tension'  }
     },
     execute = function(domoticz, variable)
         --domoticz.log('Variable ' .. variable.name .. ' was changed', domoticz.LOG_INFO)
         if (domoticz.variables('pilule_tension').changed) then
              if (domoticz.variables('pilule_tension').value ~= "0") then
                  txt=tostring(domoticz.variables('pilule_tension').value)
                  print('médicaments')
              alerte_gsm('alerteù'..txt)
              end
         end

Dans la base de données SQL :

La table « dispositifs »

La table « text_image » :

Dans monitor : Accueil.php

<div class="confirm pilule"><a href="#" id="annul_pilule" rel="30" title="Annulation de l'\alerte pilule michel"><img id="pilule" src=""/></a></div>

Les styles css :

.pilule{position: relative;top: -300px;width: 50px;left: 220px;}

Les scripts dans footer.php :

Affichage sur la page d’accueil :

16.4 Ajouter une page web io.broker

une autre solution d’afficher une page si io.broker est installé.

Important

l’adaptateur webui doit être installé

https://github.com/iobroker-community-adapters/ioBroker.webui

16.4.1 Ajout de la page dans monitor

Ajouter les infos de connexion dans admin/config.php, ici sur le 3eme serveur:

define('URLIOB', array(
 0 => "https://iobroker.<DOMAINE>",
 1 => "https://iobweb.<DOMAINE>"  ));
___
define('URLIOB', 'https://iobroker.<DOMAINE>');
define('IPDOMOTIC2', '192.168.1.162');//ip 3emme serveur Domotique
define('USERDOMOTIC2', '<LOGIN>');//user du serveur,répertoire :home/user
define('PWDDOMOTIC2', '<PASS>');//mot passe serveur
define('URLDOMOTIC2', 'http://192.168.1.162:8081/');//url ex:http://192.168.1.104:8081/
define('TOKEN_DOMOTIC2',"");
define('PORT_API_DOMO2','8093');//port de l'API éventuel
define('PORT_WEBUI_DOMO2','8082/vis-2/index.html#Page1');//port web UI ou vis 2 et dossier éventuel

16.4.1.1 page include/iobroker.php

styles css:

/* pour iframe , ajout de #iobrokerapp*/
#habridgeapp, #iobrokerapp{width: 700px;height: 800px;position: relative;top: 10px;}
/* pour la page,  ajout de #iobroker */
#interieur, #exterieur, #meteo, #alarmes,#commandes,#murcam ,
#murinter,#app_diverses,#graphiques,#admin, #zigbee, #zwave, #dvr, #nagios,#spa,#recettes, #habridge, #modes_emploi, #iobroker{
 width: 100%;
 height: 1120px;padding: 80px 0;
 min-height: 100%;
 position: relative;
 color: #000;
 top: 350px;z-index:-20;overflow: auto;
}
#interieur, #exterieur,#alarmes,#commandes,#murcam ,#murinter,
#app_diverses,#admin, #zigbee, #zwave, #dvr, #nagios,#spa,#recettes, #habridge, #modes_emploi, #iobroker{
 background-color: aquamarine;}
/* Large devices (small desktops <535) */
@media (max-width:534px) {#habridgeapp, #iobrokerapp{width: 480px;height: 600px;}}

16.4.1.2 page index_loc.php,include/header.php

ajouter dans index_loc.php:

if (URLIOB!="") include ("include/iobroker.php");//iobroker

ajouter dans include/header.php:

<?php if (URLIOB!="") echo '<li class="zz"><a href="#iobroker">Io.broker</a></li>';?>

si besoin, modifier la hauteur du menu:

.nav {height: 295px;}

16.4.2 Hôtes virtuels dans NGINX

voir aussi le § 21.13.1 Configuration de l’hôte virtuel NGINX

Important

Pour les ports 8081 et 8082, il faut créer 2 sous-domaines, par exemple iobroker.DOMAINE et iobweb.DOMAINE

configuration pour le port 80 avant la demande de certificat Let’sencrypt

Note

un domaine et un sous domaine doit être crée chez un hébergeur (OVHcloud est l’un des moins cher avec une extension .ovh)

 upstream iobroker {
 # ou iobweb
 server 192.168.1.162:8081;
 # ou server 192.168.1.162:8082 pour iobweb;
}
server {
 server_name  iobroker.DOMAINE;
#server_name  iobweb.DOMAINE;
location / {
 proxy_pass http://iobroker;
#proxy_pass http://iobweb;
  proxy_set_header Host $host;
     proxy_connect_timeout 30;
     proxy_send_timeout 30;
 }
 listen 80;
 }

16.4.2.1 Demande de certificat avec Cerbot

Pour installer Cerbot , 21.12.3 Accès distant SSL & HTTP2

Pour les 2 sous domaines (option: -d pour chaque)

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email <xxxxxxxxxx>@orange.fr -d iobroker.<DOMAINE> -d iobweb.<DOMAINE>

confifuration de l’hôte :darkblue:`iobroker`modifiée par Cerbot:

confifuration de l’hôte iobweb rmodifiée par Cerbot:

upstream iobweb {
 server 192.168.1.162:8082;
}
server {
 server_name  iobweb.la-truffiere.ovh;
location / {
 proxy_pass http://iobweb;
  proxy_set_header Host $host;
  proxy_connect_timeout 30;
  proxy_send_timeout 30;
#WebSocket support
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 proxy_http_version 1.1;
 }
 listen 443 ssl; # managed by Certbot
 ssl_certificate /etc/letsencrypt/live/iobweb.la-truffiere.ovh/fullchain.pem; # managed by Certbot
 ssl_certificate_key /etc/letsencrypt/live/iobweb.la-truffiere.ovh/privkey.pem; # managed by Certbot
 include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
 add_header Strict-Transport-Security "max-age=0" always; # managed by Certbot
 ssl_trusted_certificate /etc/letsencrypt/live/iobweb.la-truffiere.ovh/chain.pem; # managed by Certbot
 ssl_stapling on; # managed by Certbot
 ssl_stapling_verify on; # managed by Certbot
}
server {
if ($host = iobweb.la-truffiere.ovh) {
     return 301 https://$host$request_uri;
 } # managed by Certbot
 server_name  iobweb.la-truffiere.ovh;
 location / {
 proxy_pass http://iobweb;
 proxy_set_header Host $host;
 proxy_connect_timeout 30;
 proxy_send_timeout 30;
 }
 listen 80;
}

Note

Concernant Strict-Transport-Security, voir ce § 21.13.1 Configuration de l’hôte virtuel NGINX

16.4.3 Interfaces graphique

16.4.3.1 adaptateur webui

16.4.3.3 adaptateur vis 2

Note

en cas d’erreur : main/vis-views.json Not exists , supprimer et réinstaller l’adaptateur