Page 1 sur 3

Monitor - Affichage graphique directement dans une cellule

Publié : 26 févr. 2017, 18:19
par papoo
Bonjour,
je souhaiterais créer une page avec des graphiques (compteurs eau, gaz elec) sans pop up
sur ce modèle (mais pas sur fond coloré mais en transparence)
4graphs.png
4graphs.png (499.03 Kio) Consulté 10316 fois
j'ai cherché comment transformer la fonction createGraph et RefreshGraphData (frontpage.js) pour l'adapter à ce que je souhaiterais faire mais je n'y arrive pas
quelqu'un aurait une idée de comment procéder?

Re: graphiques sans pop up dans la custom page

Publié : 26 févr. 2017, 23:27
par Nemesis24
Intéressant je vais chercher de ce côté là aussi !!!

Re: graphiques sans pop up dans la custom page

Publié : 27 févr. 2017, 17:44
par vil1driver
j'aurais bien un truc fonctionnel, mais le fond transparent, ça rends vraiment pas bien...

Image

Re: graphiques sans pop up dans la custom page

Publié : 27 févr. 2017, 18:28
par papoo
Alors pas de fond transparent
Ce n'est pas grave
Il est vrai que cela ne doit pas être très lisible si l'image de fond n'est pas unie

Re: graphiques sans pop up dans la custom page

Publié : 27 févr. 2017, 19:26
par vil1driver
ce sera donc sur fond blanc.. pour l'instant ;)

mais le settings va être tordu :mrgreen: je préfère prévenir

MAJ demain avec un petit topo

Image

Re: graphiques sans pop up dans la custom page

Publié : 27 févr. 2017, 20:50
par Nemesis24
that's good !!! :D

Re: graphiques sans pop up dans la custom page

Publié : 28 févr. 2017, 18:50
par vil1driver
voila c'est mis en ligne..

du coups voici le setting utilisé pour l'image précédente

Code : Tout sélectionner

['thomas','Graph','cell5_1','Thomas','temp','day','te','°C'],
avec donc les 4 premières infos, comme d'ab
  • nom ou idx
    value, ici on veut donc afficher le graphique
    l'emplacement
    la description, qui cette fois servira de titre au graphique
Les 3 suivantes sont des infos glanées en étudiant les requêtes Json qu'effectue domoticz pour nous fournir le graphique sur sa propre interface
(repères 3 et 4 sur la capture suivante).
  • sensor
    range
    valeur
la dernière info est simplement du texte qui servira de légende sur l'axe vertical du graphique.

la méthode consiste donc à ouvrir domoticz dans chrome sur pc
puis afficher la console de dev (F12)
choisir l'onglet network dans la console de dev (repère 1)
filtrer sur le mot graph (repère 2)
puis sur la fenêtre domoticz aller afficher le graphique souhaité
vous devriez donc obtenir la liste des url pour les graphiques qu'il vient de vous afficher (repère 3)
cliquer sur l'une d'elles pour visualiser le retour json (repère 4)
Image

pour le moment le graphique n'est que de type ligne, pas de battons ou autres.. ça viendra probablement..
pas de customisation pour l'instant niveau css, en cous d'étude..

voila :mrgreen: j'espères que c'est suffisamment clair et sans bug

Re: graphiques sans pop up dans la custom page

Publié : 28 févr. 2017, 21:49
par papoo
Impecc
Trop rapide pour moi
Je ne pourrais tester que samedi
Mais je posterais le résultat

Re: graphiques sans pop up dans la custom page

Publié : 01 mars 2017, 18:16
par vil1driver
MAJ possibilité de jouer avec le css pour le graphique

Image

J'ai juste eu à ajouter ceci à page5.css

Code : Tout sélectionner

#cell5_1 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_1 .highcharts-title, #cell5_1 .highcharts-axis-title, #cell5_1 .highcharts-axis-labels{
	fill: #F2DDB3;
}
#cell5_1 .highcharts-color-0{
	stroke: yellow;
}
#cell5_1 .highcharts-color-1{
	stroke: yellow;
}

#cell5_2 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_2 .highcharts-title, #cell5_2 .highcharts-axis-title, #cell5_2 .highcharts-axis-labels {
	fill: #F2DDB3;
}
#cell5_2 .highcharts-color-0{
	stroke: yellow;
}
#cell5_2 .highcharts-color-1{
	stroke: yellow;
}

#cell5_3 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_3 .highcharts-title, #cell5_3 .highcharts-axis-title, #cell5_3 .highcharts-axis-labels {
	fill: #F2DDB3;
}

#cell5_3 .highcharts-color-0{
	stroke: yellow;
}
#cell5_3 .highcharts-color-1{
	stroke: yellow;
}

#cell5_4 .highcharts-background {
	fill: rgba(0, 0, 0, 0.4);
}
#cell5_4 .highcharts-title, #cell5_4 .highcharts-axis-title, #cell5_4 .highcharts-axis-labels {
	fill: #F2DDB3;
}
#cell5_4 .highcharts-color-0{
	stroke: yellow;
}
#cell5_4 .highcharts-color-1{
	stroke: yellow;
}

fill et stroke remplacent l'abituel color, ne me demandez pas pourquoi :mrgreen:

Re: Monitor - Affichage graphique directement dans une cellule

Publié : 02 mars 2017, 21:21
par Nemesis24
c'est bon ca :D