16. Ajouter des pages ou des alertes ------------------------------------ 16.1 Ajouter un plan (ex : 1er étage) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - **créer la page** avec le plan, voir le § :ref:`2. Une 1ere PAGE : LE PLAN INTERIEUR` - **Ajouter la page à index_loc.php** |image901| - **Ajouter la page au menu dans header.php** |image902| - **Ajouter l'ID et les classes** *si ellesexistent au fichier mes_css.css* ci-dessous les ID's des pages existantes .. code-block:: #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* .. code-block:: |image903| 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* |image904| - **Dans Domoticz** : *Créer la variable* |image905| *Dans le script notifications_timer* : .. code-block:: --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)* .. code-block:: 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" |image908| La table "text_image" : |image909| - **Dans monitor** : *Accueil.php* .. code-block::
*Les styles css* : .. code-block:: .pilule{position: relative;top: -300px;width: 50px;left: 220px;} *Les scripts dans footer.php* : |image912| *Affichage sur la page d'accueil* : |image913| 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é |image1496| https://github.com/iobroker-community-adapters/ioBroker.webui 16.4.1 Ajout de la page dans monitor ==================================== |image1497| Ajouter les infos de connexion dans admin/config.php, ici sur le 3eme serveur: .. code-block:: define('URLIOB', array( 0 => "https://iobroker.", 1 => "https://iobweb." )); ___ define('URLIOB', 'https://iobroker.'); define('IPDOMOTIC2', '192.168.1.162');//ip 3emme serveur Domotique define('USERDOMOTIC2', '');//user du serveur,répertoire :home/user define('PWDDOMOTIC2', '');//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 """"""""""""""""""""""""""""""""""" |image1498| - styles css: .. code-block:: /* 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: .. code-block:: if (URLIOB!="") include ("include/iobroker.php");//iobroker - ajouter dans include/header.php: .. code-block:: Io.broker';?> si besoin, modifier la hauteur du menu: .. code-block:: .nav {height: 295px;} 16.4.2 Hôtes virtuels dans NGINX ================================ voir aussi le § :ref:`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) .. code-block:: 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 , :ref:`21.12.3 Accès distant SSL & HTTP2` Pour les 2 sous domaines (option: -d pour chaque) .. code-block:: sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email @orange.fr -d iobroker. -d iobweb. confifuration de l'hôte :darkblue:`iobroker`modifiée par Cerbot: |image1499| confifuration de l'hôte :darkblue:`iobweb` rmodifiée par Cerbot: .. code-block:: 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 § :ref:`21.13.1 Configuration de l’hôte virtuel NGINX` 16.4.3 Interfaces graphique =========================== 16.4.3.1 adaptateur webui """"""""""""""""""""""""" |image1506| 16.4.3.3 adaptateur vis 2 """"""""""""""""""""""""" .. note:: en cas d'erreur : **main/vis-views.json Not exists** , supprimer et réinstaller l'adaptateur |image1504| |image1505| .. |image901| image:: ../media/image901.webp :width: 534px .. |image902| image:: ../media/image902.webp :width: 700px .. |image903| image:: ../media/image903.webp :width: 700px .. |image904| image:: ../media/image904.webp :width: 416px .. |image905| image:: ../media/image905.webp :width: 575px .. |image908| image:: ../media/image908.webp :width: 502px .. |image909| image:: ../media/image909.webp :width: 432px .. |image912| image:: ../media/image912.webp :width: 700px .. |image913| image:: ../media/image913.webp :width: 503px .. |image1496| image:: ../img/image1496.webp :width: 250px .. |image1497| image:: ../img/image1497.webp :width: 500px .. |image1498| image:: ../img/image1498.webp :width: 700px .. |image1499| image:: ../img/image1499.webp :width: 700px .. |image1504| image:: ../img/image1504.webp :width: 650px .. |image1505| image:: ../img/image1505.webp :width: 700px .. |image1506| image:: ../img/image1506.webp :width: 700px