[Tuto] Utiliser Monitor

[vil1driver]

Salut à tous,

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

puis lancez la commande suivante pour récupérer les fichiers

Code : Tout sélectionner

git clone https://github.com/vil1driver/monitor.git /home/pi/domoticz/www/monitor

Au besoin adaptez le chemin du dossier de destination à votre installation..

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

si vous préférez fixer vous même l'adresse, faites le comme ceci
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)

['6','Status','cell1','ma lampe'],

ou

['ma lampe','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','1'],

Ok je vois bien le status de ma lampe On ou Off mais ce n'est pas très joli..
afficher l'icone

['ma lampe','Status','cell1','ma lampe','2'],

vous pouvez également ajouter vos icones perso dans le dossier www/monitor/icons/
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

exemple avec mon module téléinfo (son idx est le 112):

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:

{
"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"
}

dans ma frontpage je pourrais donc afficher toutes les infos de cette liste, je n'ai qu'à indiquer le nom de l'info (value)

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)

affiché avec la date de la dernière mise à jour et écrit en vert, moitié plus gros et en gras

Code : Tout sélectionner

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

Si vous vous trompez en indiquant le nom de l'info à glaner, vous aurez droit à un joli ?!

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'],

la custom page affichera 2 petites flèches aux côté de la lampe pour choisir le niveau de luminosité
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'],

ajouts d'icons perso pour les switchs sélecteur

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

vous devrez placer dans www/monitor/icons/

• Auto.png
  Confort.png
  Hors gel.png
  Eco.png

puis dans le setting, ajouter le petit 2 comme précédemment

['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>'],

-- Camera (afficher un flux vidéo mjpeg) mettre le lien dans la zone description
-- 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

URL1 = l'url pour joindre votre caméra lorsque vous êtes chez vous (connecté au réseau local)
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)

vous pouvez par exemple afficher le tau d'humidité de votre pièce en rouge si cela passe sous les 30% ou dépasse les 70%

['salle de bain','Humidity','cell5_3f','','','','color:#1CD5FD','x < 30 || x > 70'],

ou encore si la température descends en dessous de 3°C

['exterieur','Temp','cell3','temp ext','','','','x < 3'],

Popup météo

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';

il est possible d'afficher jusqu'à J+3 de cette façon

['exterieur','ForecastStr','cell25',''], // aujourd'hui

['exterieur','ForecastStr','cell25','','1'], // demain

['exterieur','ForecastStr','cell25','','2'], // après demain

['exterieur','ForecastStr','cell25','','3'], // après après demain

l'image affichée nous est fournie par le site http://www.prevision-meteo.ch/
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:

http://www.yr.no/place/France/Île-de-France/Paris/meteogram.png

c'est ce qui est surligné en rose dans l'adresse qu'il faudra indiquer dans le setting comme ceci

Code : Tout sélectionner

var place = 'France/Île-de-France/Paris';	

enfin ça s'utilise comme ceci

['exterieur','ForecastStr','cell25','','4'], // 48h

Si le nom de votre ville comporte un apostrophé, faites précéder ce dernier par un antislash (caractère d’échappement)
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

<!-- 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 -->

de cette façon vous pouvez facilement ajouter des contenus variés (google agenda, diaporama photo, etc..)


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>

en

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

créer un fichier de config pour notre usage

Code : Tout sélectionner

			sudo nano /etc/mosquitto/conf.d/monitor.conf

copiez y ceci

Code : Tout sélectionner

			listener 1883
			listener 9001
			protocol websockets

relancer mosquitto

Code : Tout sélectionner

			sudo service mosquitto restart

ou

Code : Tout sélectionner

			sudo /etc/init.d/mosquitto restart

ajouter le matériel MQTT à domoticz

• 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

MQTT: Connecting to localhost:1883
MQTT: connected to: localhost:1883
MQTT: Subscribed

pour voir ce que domoticz envoie à mosquitto, vous pouvez taper ceci dans un terminal

Code : Tout sélectionner

			mosquitto_sub -t 'domoticz/out'

la custom page devrait également être en mesure de réceptionner ces même messages,
activez le mode debug dans frontpage_settings.js

Code : Tout sélectionner

			var debug = true;

recharger la custom page et ouvrez la console de dev de chrome (F12),
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
			}

Pour un MQTT sous Syno :

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

9 - enregistrer
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

puis éditez de nouveau le fichier frontpage_settings.js pour y configurer les nouveaux paramètres qui peuvent y avoir été ajouté
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 ^^^^^   #######
// ############################################################################################################

Journal des modifications

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/

[patrice]

Bonsoir

Fantastique, je suis comme un gamin avec son cadeau de Noel !

Quelques questions de débutant
-J'ai repris ton fichier et adapté mon ip , mes switches par rapport à mon roomplan mais mes switches ne passent pas à ON , même si j'ai un popup css qui me dit switch on.
- Meme en passant le flag plusmin a 1, je n'ai pas les boutons +/- qui s'affichent

Code : Tout sélectionner

 $.roomplan=9;           // define roomplan in Domoticz and create items below.
$.domoticzurl="http://192.168.1.81:8080";

['112','Status',         	'cell19',                        'Cafetière','0','1'],	// interrupteurs classics

Je continue de jouer avec mon cadeau

Merci du partage

[vil1driver]

j'ai testé de passer à 1 le flag plusmin pour un inter classic, et les boutons +/- ne s'affichent pas non plus. ça semble donc normal.
mais ça reste tout de même switchable..

sinon une idée comme ça, c'est bien sous www que tu as tout mis ? ici ça ne fonctionne pas si je change de dossier.

autre chose qui me vient, ça ne passe pas à On en cliquant, mais est ce affiché à On si tu allumes directement via domoticz ?

je dois tester chez un collègue dans la journée, je te dirais s'il rencontre aussi des difficultés...

[patrice]

Bonjour
- Ok pour les plusmin
- Je n'ai pas mis tout ça à la racine , mais j'ai crée un dossier dans www, je testerai ce soir en le déplaçant à la racine. D'autant que je me souvienne il y a les mêmes noms de dossier et fichiers que ceux de Domoticz, et n'ayant pas envie d''écraser la config de base, j'ai crée un sous dossier.
- Oui l'état change bien si je clique dans Domoticz

Bon courage pour les tests.

[patrice]

Je viens de tester et en effet si on place tous les fichiers à la racine de www cela fonctionne en pilotage. Il n'y a pas de risque d’écrasement des fichiers car aucun ne porte le même nom que les fichiers Domoticz de base.

Parfait, je continue à jouer

[vil1driver]

Tant mieux

[vil1driver]

MAJ

* nouveaux icons
* ajout symbole °C et % à la suite des températures et humidités
* correction bug sur valeur d'alarme pour les températures et humidités
* possibilité de forcer le css pour les températures humidités et thermostats
* ajout de la popup css lors du switch sur un dimmer
* meilleurs centrage de la page
* valeur max propre à chaque thermostat

[vil1driver]

- modification de frontpage.html et frontpage.css pour supprimer la grande case du bas de la première page (limitante à mon goût).
- suppression du changement de couleur du fond de page s'il fait nuit, pas non plus à mon goût
- ajout de nouveaux icons nuit et modification de frontpage.js et frontpage_settings.js pour obtenir la lune à la place du soleil s'il fait nuit,
à condition d'avoir un capteur de luminosité et de renseigner son idx à 2 reprises dans frontpage_settings.js (ex idx=149)

Code : Tout sélectionner

var idx_IsDonker = '149'; //idx du capteur de luminosité
...
['149','Status',         'cell00',                       'Donker switch','0','0'],

le capteur de luminosité peut être virtuel (nommé lumino ici)

Code : Tout sélectionner

-- script_time_nuit.lua
time = os.date("*t")
commandArray = {}
if (timeofday['Nighttime']) then
	commandArray['lumino']='On' 
else
	commandArray['lumino']='Off' 
end
return commandArray 	

[pm5706]

Super ce tableau de contrôle, j'ai deux question, peux tu me dire comment dois je faire pour changer la résolution du tableau ( exemple pour une utilisation sur téléphone ) ? Serait il possible d'avoir le plan de cette façon ( en plein écran) ? car même sur une tablette le plan d'ensemble est vraiment petit ( en utilisant l'option ajouter à l'accueil)

[vil1driver]

cette interface est avant tout destinée à une tablette pour une utilisation murale (ou non), la page est adaptée à un écran 7",
si tu souhaites utiliser un écran d'une autre dimention, je t'invite à modifier le fichier frontpage.css voir également frontpage.html

ps : sur ma tablette je ne trouve pas ça trop petit, c'est juste parfait