Présentation
pour faire suite à cet article ou cet article
pour ceux qui comme moi trouvent dommage d'avoir un panneau de contrôle sans interaction possible, je vous propose ma version interactive,
qui n'est autre qu'un condensé de l'excellent travail de toute une communauté plus quelques aménagement personnels..
voici ce que j'obtiens sur une tablette 7" (un slide est possible vers d'autres pages)
Installation
Raspberry Pi / Système linux
au besoin installez GIT
Code : Tout sélectionner
sudo apt-get install git
Code : Tout sélectionner
git clone https://github.com/vil1driver/monitor.git /home/pi/domoticz/www/monitor
Autre plateforme
Récupérer l'arborescence au format zip ici
Une fois dezipé, renommez le dossier obtenu en 'monitor' et copiez le dans le dossier 'www' de votre installation Domoticz.
Configuration
Editez le fichier /home/pi/domoticz/www/monitor/js/frontpage_settings.js
Pour cela, je vous recommande les logiciels suivant:
WinSCP (explorateur de fichier utilisant la connexion SSH, permettant transferts, éditions, suppressions..)
NotePad++ comme éditeur (à préciser dans les préférences de WinSCP)
Le dialogue avec domoticz
Si l'accès à votre domoticz nécessite un nom d'utilisateur et un mot de pass, indiquez les de cette manière
Code : Tout sélectionner
$.domoticzurl = location.protocol + "//USER:PASS@" + location.host; // beta test, auto detect
mais notez bien que l'adresse à indiquer sera différente suivant si vous êtes dans votre canapé en wifi ou si vous êtes chez un ami..
l'auto détection est donc un meilleurs choix..
Code : Tout sélectionner
$.domoticzurl = "http://USER:PASS@IP:PORT"; // url de connection à domoticz (ex: http://paul:ochon@toto.com:8765)
Pour pouvoir renseigner directement USER:PASS dans l'url comme ci dessus il faut impérativement selectionner basic auth comme méthode d'authentification dans domoticz !
Vos dispositifs
indiquez les noms (ou idx) de vos dispositfis (devices), l'info à glaner (value), le nom de la cellule dans laquelle les placer, la légende, etc...
exemple:
si je souhaites afficher l'état de ma lampe (idx=6) dans cellule 1(tout en haut à gauche)
ou['6','Status','cell1','ma lampe'],
si je veux en plus voir à quelle heure elle à été commandée la dernière fois['ma lampe','Status','cell1','ma lampe'],
Ok je vois bien le status de ma lampe On ou Off mais ce n'est pas très joli..['ma lampe','Status','cell1','ma lampe','1'],
afficher l'icone
vous pouvez également ajouter vos icones perso dans le dossier www/monitor/icons/['ma lampe','Status','cell1','ma lampe','2'],
exemple:
frigo48_On.png
frigo48_Off.png
puis dans la page setting
['ma lampe','Status','cell1','ma lampe','frigo'],
Ok, mais on ne va pas utiliser 'Status' pour tout si ?
Non ! tout dépends de l'info que l'on souhaite afficher...
Status, Temp, Humidity etc... ??
Cette commande vous listera les infos (value) potentiellement utilisables, d'un dispositif (device) (remplacez IDX par l'idx de votre device)
Code : Tout sélectionner
/json.htm?type=devices&rid=IDX
j'accède à mon domoticz par cette adresse : http://192.168.22.100:8080/#/Dashboard
je tapes donc ceci dans mon navigateur : http://192.168.22.100:8080/json.htm?type=devices&rid=112
et j'obtiens cette liste:
dans ma frontpage je pourrais donc afficher toutes les infos de cette liste, je n'ai qu'à indiquer le nom de l'info (value){
"ActTime" : 1441184373,
"ServerTime" : "2015-09-02 10:59:33",
"Sunrise" : "07:27",
"Sunset" : "20:46",
"result" : [
{
"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"Counter" : "27480.916",
"CounterDeliv" : "0.000",
"CounterDelivToday" : "0.000 kWh",
"CounterToday" : "3.843 kWh",
"CustomImage" : 0,
"Data" : "17601000;9879916;0;0;561;0",
"Description" : "",
"Favorite" : 1,
"HardwareID" : 20,
"HardwareName" : "teleinfo",
"HaveTimeout" : false,
"ID" : "1",
"LastUpdate" : "2015-09-02 10:59:21",
"Name" : "conso totale",
"Notifications" : "false",
"PlanID" : "0",
"Protected" : false,
"ShowNotifications" : true,
"SignalLevel" : 12,
"SubType" : "Energy",
"SwitchTypeVal" : 0,
"Timers" : "false",
"Type" : "P1 Smart Meter",
"TypeImg" : "counter",
"Unit" : 1,
"Usage" : "561 Watt",
"UsageDeliv" : "0 Watt",
"Used" : 1,
"XOffset" : "0",
"YOffset" : "0",
"idx" : "112"
}
],
"status" : "OK",
"title" : "Devices"
}
Code : Tout sélectionner
['conso totale','Usage','cell2_15','EDF instant'], // consommation instantanée (téléinfo)
['conso totale','Counter','cell2_20','EDF total'], // consommation totale (téléinfo)
['conso totale','CounterToday','cell2_10','EDF today'], // consommation du jour (téléinfo)

Code : Tout sélectionner
['conso totale','CounterToday','cell2_10','EDF today','1','','color:green;font-size:150%;font-weight:bold'],

Variateurs (dimmer)
une lampe à intensité variable peut être ajoutée avec la value 'Status'
mais vous ne pourrez pas jouer avec la variation
il vous faut pour cela utiliser 'Level' comme value
Code : Tout sélectionner
['ma lampe variateur','Level','cell5_6','la chambre'],
vous pouvez également maintenir le clic sur l'icone pour voir apparaître un slider.
Switch sélecteur
ce type de switch est en fait un dimmer donc il vous faudra utiliser 'Level' comme value
Code : Tout sélectionner
['chauffage','Level','cell5_6','mode chauffage'],
placez vos icons dans le dossier www/monitor/icons/
leur donner le même nom que vos niveaux dans le sélecteur avec l'extension .png
exemple si vous gérez vos modes de chauffage avec les niveaux suivant:
- Auto
Confort
Hors gel
Eco
- Auto.png
Confort.png
Hors gel.png
Eco.png
['chauffage','Level','cell5_6','mode chauffage','2'],
Spéciales

en plus de cela, il à été ajouté à la frontpage, des values spéciales (n'indiquer pas de nom ou idx = 0) qui sont :
-- Hide (permet de cacher une cellule dans le cas ou vous n'avez rien à y mettre)
-- Clock (affiche heure et date dans la cellule)
-- Date (affiche la date dans la cellule)
-- MonthYear (affiche le mois et l'année dans la cellule)
-- SunRise (affiche l'heure de lever de soleil)
-- SunSet (affiche l'heure de coucher de soleil)
-- SunBoth (affiche les heures de lever + coucher de soleil)
-- FreeRemote (popup télécommande freebox)
-- Html (exécute du code html) mettre le code html dans la zone description ex:
Code : Tout sélectionner
['','Html','cell12','<a href="http://www.blabla.com" target="_blank">blabla</a>'],
['','Html','cell13','<button class="pink" onclick="mySwipe.slide(2)" type="button" >Page 3</button>'],
-- Text (affiche juste un texte) mettre le texte dans la zone description
-- Euro (affiche le contenu de 'Data' avec l'unité €)
-- Wakeup (met en forme le contenue d'un capteur texte contenant l'heure de réveil dans le cas ou domoticz vous sert de réveil..)
Les caméras
Code : Tout sélectionner
['0','Camera','cell2_3', 'URL1','URL2','',''], // camera 1
URL2 (optionnel) = l'url pour joindre votre caméra lorsque vous êtes en dehors de chez vous (depuis internet)
si URL1 est injoignable, on passe sur URL2
si URL2 n'est pas renseignée ou si est également injoignable, on passe sur l'image OFFLINE.
Les alarmes
Par alarmes j'entends le fait d'afficher en rouge une valeur si celle ci est 'hors norme'.
une option permet également de faire clignoter la valeur (en plus de l'afficher en rouge)
Code : Tout sélectionner
var blink = true; // faire clignoter les valeurs en alarme (true/false)
ou encore si la température descends en dessous de 3°C['salle de bain','Humidity','cell5_3f','','','','color:#1CD5FD','x < 30 || x > 70'],
Popup météo['exterieur','Temp','cell3','temp ext','','','','x < 3'],
si vous affichez sur la custom page l'icone météo grâce à weatherUnderground ou forecastIO
vous pouvez cliquer sur l'icone pour voir apparaitre une popup avec les températures prévues pour la journée
à condition d'avoir renseigné votre ville, exemple:
Code : Tout sélectionner
var city = 'paris';
['exterieur','ForecastStr','cell25',''], // aujourd'hui
['exterieur','ForecastStr','cell25','','1'], // demain
['exterieur','ForecastStr','cell25','','2'], // après demain
l'image affichée nous est fournie par le site http://www.prevision-meteo.ch/['exterieur','ForecastStr','cell25','','3'], // après après demain
il a été ajouté la possibilité d'utiliser également une image fournie par le site http://www.yr.no/
dans ce cas il faut s'y rendre et aller rechercher sa ville puis choisir dans le menu gauche d'afficher le graphique 'hour by hour'
une fois le graphique visible, il faut faire un clic droit dessus, puis afficher l'image
exemple pour paris:
c'est ce qui est surligné en rose dans l'adresse qu'il faudra indiquer dans le setting comme cecihttp://www.yr.no/place/France/Île-de-France/Paris/meteogram.png
Code : Tout sélectionner
var place = 'France/Île-de-France/Paris';
Si le nom de votre ville comporte un apostrophé, faites précéder ce dernier par un antislash (caractère d’échappement)['exterieur','ForecastStr','cell25','','4'], // 48h
exemple:
var place = 'France/Centre/Les_Aix-d\'Angillon';
Utilisation
afficher votre nouvelle interface via http://ip:port/monitor/index.html
exemple, si vous accédez à votre domoticz par cette adresse:
http://192.168.22.100:8080/#/Dashboard
votre custom page sera accessible à celle ci:
http://192.168.22.100:8080/monitor/index.html
Gestion des pages
cette custom page, comporte plusieurs pages, vous pouvez passer d'une page à l'autre:
- en slidant avec le doit sur une tablette
- avec les touches gauche/droite du clavier ou la molette de la souris, sur pc
Ajouter une page
une page comprends un fichier html (placé dans le dossier 'pages') et un fichier css (placé dans le dossier 'css')
vous pouvez en créer à votre guise en respectant le canevas suivant
de cette façon vous pouvez facilement ajouter des contenus variés (google agenda, diaporama photo, etc..)<!-- load page stylesheet -->
<script>
$('head').append('<link rel="stylesheet" href="css/canevas.css" />');
</script>
<!-- Page -->
<div class="cnt v-wrap">
<div class="v-box">
<!-- contenu -->
<!--
le contenu de votre page ne doit pas dépasser les dimensions suivantes
largeur: 962px
hauteur: 541px;
-->
<!-- fin contenu -->
</div>
</div>
<!-- fin page -->
Modifier le code
Dans mon optique d'optimisation,
la custom page utilise un fichier frontpage.min.js (compressé)
les modif perso y seront donc très difficiles..
c'est pour cela qu'il est également fournis une version non compressée, frontpage.js
pour l'utiliser il faut modifier le fichier index.html dans lequel il suffit juste de changer
Code : Tout sélectionner
<script type="text/javascript" src="js/frontpage.min.js"></script>
Code : Tout sélectionner
<script type="text/javascript" src="js/frontpage.js"></script>
MQTT / WebSocket (optionnel*)
la custom page sait maintenant écouter domoticz et non plus seulement l'interroger.
elle peut donc réagir de façon quasi instantanée à l'apparition de certains événements pour par exemple pouvoir :
changer de page,
afficher votre caméra si quelqu'un sonne,
jouer des sons, des web radio, des notifications vocales...
Prérequis:
installer mosquitto sur la machine faisant tourner domoticz et monitor
(Mosquitto va être notre passerelle entre domoticz et la custom page)
Code : Tout sélectionner
sudo apt-get update
sudo apt-get install libwebsockets mosquitto mosquitto-clients
Code : Tout sélectionner
sudo nano /etc/mosquitto/conf.d/monitor.conf
Code : Tout sélectionner
listener 1883
listener 9001
protocol websockets
Code : Tout sélectionner
sudo service mosquitto restart
Code : Tout sélectionner
sudo /etc/init.d/mosquitto restart
- Menu réglages > matériel
Activé: coché
Nom: choisir un nom
Type: "MQTT Client Gateway with LAN interface"
Délai d'attente de données: Disabled
Adresse distante: localhost (ou l'ip de votre raspberry pi)
Port: 1883
Identifian: laisser vide
Mot de passe: laisser vide
Publish Topic: out
CA Filename: laisser vide
AJOUTER
dans le menu log de domoticz, ceci vous indiquera que la connection s'effectue bien
pour voir ce que domoticz envoie à mosquitto, vous pouvez taper ceci dans un terminalMQTT: Connecting to localhost:1883
MQTT: connected to: localhost:1883
MQTT: Subscribed
Code : Tout sélectionner
mosquitto_sub -t 'domoticz/out'
activez le mode debug dans frontpage_settings.js
Code : Tout sélectionner
var debug = true;
vous devriez voir ceci s'afficher
Connecting to MQTT : Success
suivit par des messages de de genre (l'interrupteur du plafonnier de ma chambre pour l'exemple)
Code : Tout sélectionner
MQTT Message Arrived:
{
"Battery" : 255,
"RSSI" : 12,
"dtype" : "Lighting 2",
"id" : "06553BA",
"idx" : 442,
"name" : "la chambre",
"nvalue" : 1,
"stype" : "AC",
"svalue1" : "0",
"switchType" : "On/Off",
"unit" : 2
}
1 - Installer le packet MQTT via la syno community
2 - Installer le Paquet Nano via la syno community
3 - Activer la connection SSH
4 - Se connecter en SSH (identifiant et mot de passe admin du syno)
5 - Basculer en root : sudo -i
6 - Se rendre dans /volume1/@appstore/mosquitto/var
7 - Créer le fichier monitor.conf en saisissant : nano monitor.conf
8 - Y copier les éléments :
Code : Tout sélectionner
listener 1883
listener 9001
protocol websockets
10 - relancer le paquet Mosquitto
Mise à jour
Attention, tout fichier modifié sera écrasé /!\ pensez à faire vos sauvegardes..
Code : Tout sélectionner
cd /home/pi/domoticz/www/monitor/
cp js/frontpage_settings.js js/frontpage_settings_old.js
git fetch --all && git reset --hard origin/master
et rapatrier votre configuration sauvée dans frontpage_settings_old.js
Code : Tout sélectionner
// ############################################################################################################
// #### vvvvv USER VALUES below vvvvv #######
// ############################################################################################################
Lors d'une mise à jour,
ne conserver que ce qui se trouve ici.
// ############################################################################################################
// #### ^^^^^ USER VALUES above ^^^^^ #######
// ############################################################################################################
https://github.com/vil1driver/monitor/commits
Divers
Pour cacher la barre d'adresse tu as juste à remonter la page comme pour n'importe quel autre site..
Ou alors ceci:

Pour cacher la barre de status haute et basse sans root, j'utilise full!screen
si comme moi vous avez une tablette android dont les paramètres ne permettent pas de garder indéfiniment l'écran allumé,
voici une app qui fonctionne très bien et sans avoir besoin de rooter la tablette.
Stay Alive
Besoin d'un code couleur pour vos valeurs ? http://palette.ninja/