j'ai découvert Monitor et je le trouve parfait pour afficher les informations de Domoticz.
MERCI vil1driver pour le travail
De plus, son principe de pages 'glissantes' est excellent pour affichage sur des boxs TV.
Je vous propose un affichage de vos informations température, humidité, pression et autres, au format Gauge de ma conception. Visuel ci-dessous avec 4 informations :
Veuillez trouver ci-dessous, les informations pour sa mise en œuvre dans les divers fichiers de Monitor
J'ai simplifié et optimisé au maximum pour éviter d'en recopier 'partout'
J'espère que vous apprécierez. Amusez-vous et n'hésitez pas à faire un retour
Maxou
La Gauge affichera un cercle de couleur en fonction des paramètres.
Par défaut, les couleurs sont :
Bleu du Min à Seuil Vert
Vert de Seuil Vert à Seuil rouge
Possibilité d'inverser le sens des couleur avec la variable Sens (0=horaire - 1= anti-horaire)
La couleur du Point sur le cercle et le Texte est paramétrée avec la variable Color Text (la même)
Page HTML
Code : Tout sélectionner
<div class="frame">
<!-- By Text (original) -->
<!--<div id="ls_clock11"></div><div id="clock11">--</div><div id="desc_clock11">clock11</div>-->
<!-- By Gauge -->
<div id="cntcanvas"><canvas id="clock11" width="60" height="60"></canvas></div><div id="desc_clock11">clock11</div>
</div>
<div class="frame">
<!-- By Text (original) -->
<!--<div id="ls_clock12"></div><div id="clock12">--</div><div id="desc_clock12">clock12</div>-->
<!-- By Gauge -->
<div id="cntcanvas"><canvas id="clock12" width="60" height="60"></canvas></div><div id="desc_clock12">clock12</div>
</div>
Enlever les anciennes référence aux cellules concernées ci-dessous et ajouter en fonction de vos ajouts de Gauges personnelles :
Code : Tout sélectionner
#clock11, #clock12, #clock16, #clock17 /*, #clock13, #clock18 */
{
margin-top: -5px;
}
#cntcanvas
{
padding: 10px;
border: 1px solid transparent;
border-radius: 0px;
height: 56px;
width: 125px;
}
Ajout des paramètres de Gauges au listener :
INFO : Si le terme 'Gauge' dans '$.PageArray[ii][8]' est absent, alors passage en mode Text
Code : Tout sélectionner
['52','Temp', 'clock11', 'Température','','','','','Gauge',0,40,21,25,'°',2,'20px','arial','bold','#FFFF00',0],
['52','Humidity', 'clock12', 'Humidité','','','','','Gauge',0,80,40,60,'%',2,'20px','arial','bold','#FFFF00',0],
pour : ,'Gauge',min,max,seuil Vert,seuil Rouge,suffixe,taille trait en px,taille Texte,Police Texte,Font,'Color Texte,Sens (0=horaire - 1= anti-horaire)],
Etant plus simple à modifier, le fichier 'index.html' du dossier 'Monitor' fait référence au script du fichier
'frontpage.js' à la place du fichier 'frontpage.min.js'
Fichier index.html
Code : Tout sélectionner
<!--<script src="js/frontpage.min.js"></script>-->
<script src="js/frontpage.js"></script>
Ajout avant la fonction 'RefreshData' : function RefreshData()
Code : Tout sélectionner
//Gauges
/*
#008FFF = Bleu
#019DFF = Bleu
#008000 = Vert
#F45500 = Rouge
['52','Temp', 'clock11', 'Température','','','','','Gauge',0,40,21,25,'°',2,'20px','arial','bold','#FFFF00',0],
['idx','Type', 'cellule', 'Description','','','','','Gauge',min,max,seuil vert,seuil rouge,'suffixe',taille Cerc,'taille Police','Police','Weight','Color text',sens (0=horaire-1=anti horaire)],
*/
function generatePieGraph(t,e){var o,i,n="stroke",d=e.suffixe,f=e.valmin,h=e.valmax,j=e.seuilJV,s=e.seuilJR,se=e.sens,r=e.values,v=!!"true",k="#fff",y=L(e,"stroke")?e.isStrokePie.stroke:20,w=L(e,"fontSize")?e.isStrokePie.fontSize:"60px",I="center",A=L(e,"fontFamily")?e.isStrokePie.fontFamily:"Arial",Z=L(e,"fillStyle")?e.isStrokePie.fillStyle:"white",T=L(e,"fontWeight")?e.isStrokePie.fontWeight:"bold",x=document.getElementById(t),b=x.getContext("2d"),O=x.width/2,C=x.height/2,F=O,z=0,q=[],H=(o=0,r.map(t=>{o+=t}),o),E=0,R=0;function Col(a){if (se!=1){if(a<(f+((h-f)/10))){return "#008FFF";} else if(a<j){return "#019DFF";}else if(a<=s){return "#008000";}else{return "#F45500";}}else{if(a<(f+((h-f)/10))){return "#F45500";} else if(a<j){return "#F45500";}else if(a<=s){return "#008000";}else{return "#019DFF";}}}function pointC(y,r,a,Z){b.beginPath(),b.arc(r+y+2+r*Math.cos(a),r+y+2+r*Math.sin(a),4,0,2*Math.PI),b.fillStyle=Z,b.fill()}function EndPt(t){return t/(h+((h-f)*0.25))*(2*Math.PI)}function Cerc(t,e,o,i,n,r){b.beginPath(),b.arc(t,e,o,i,n,!1),b.strokeStyle=r,b.lineWidth=Col(r),b.stroke()}function Trace(t,e){b.clearRect(0,0,x.width,x.height),1==e&&(b.beginPath(),b.arc(O,C,F-y-2,-1.3*Math.PI,0.3*Math.PI),b.strokeStyle=k,b.lineWidth=y,b.stroke()),b.font=T+" "+w+" "+A,b.textAlign=I,b.fillStyle=Z,b.textBaseline="middle",Cerc(O,C,F-y-2,-1.3*Math.PI,EndPt(t)-(((f*0.02)+1.3)*Math.PI),Col(r)),b.fillText(t+d,O,C),pointC(y,F-y-2,EndPt(t)-(((f*0.02)+1.3)*Math.PI),Z)}function L(t,e){if("object"==typeof t&&null!==t){if(t.hasOwnProperty(e))return!0;for(var o in t)if(t.hasOwnProperty(o)&&L(t[o],e))return!0}return!1}!function e(){1==r.length&&"stroke"==n?function(){var t=0;Trace(r[0],v)}():1==l&&"normal"==n?(b.clearRect(0,0,x.width,x.height),j(),o=z/100*Math.PI*2,b.arc(O,C,F,0,o),b.fill()):(j(),b.beginPath(),b.arc(O,C,F+5,-1.3*Math.PI,0.3*Math.PI,!1),b.lineWidth=30,b.strokeStyle=d,b.stroke());}()}
$.ajax({
url: [$.domoticzurl,'/json.htm?type=devices&plan=',$.roomplan,'&jsoncallback=?'].join(''),
success: function(data) .....
Code : Tout sélectionner
// Options Gauges
var vgauge= $.PageArray[ii][8];
var evalmin= $.PageArray[ii][9]; // Gauge Valeur Mini
var evalmax= $.PageArray[ii][10]; // Gauge Valeur Maxi
var eseuilJV= $.PageArray[ii][11]; // Gauge Seuil couleur Vert
var eseuilJR= $.PageArray[ii][12]; // Gauge Seuil couleur Rouge
var esuffixe= $.PageArray[ii][13]; // Gauge Text Suffixe
var estroke= $.PageArray[ii][14]; // Gauge Text Epaisseur en px
var efontSize= $.PageArray[ii][15]; // Gauge Text FontSize
var efontFamily=$.PageArray[ii][16]; // Gauge Text FontFamilly
var efontWeight=$.PageArray[ii][17]; // Gauge Text FontWeight
var efillStyle= $.PageArray[ii][18]; // Gauge Text fillStyle
var eSens= $.PageArray[ii][19]; // Gauge Text Sens color Gauge
if (typeof eSens === 'undefined') {eSens=0;}
if (vgauge === 'Gauge' && vlabel !== 'undefined')
{
var objCanvas = {values: [vdata],valmin:parseInt(evalmin),valmax:parseInt(evalmax),seuilJV:parseInt(eseuilJV),seuilJR:parseInt(eseuilJR),suffixe:esuffixe,sens:parseInt(eSens),isStrokePie: {stroke:parseInt(estroke),fontSize:efontSize,fontFamily:efontFamily,fontWeight: efontWeight,fillStyle:efillStyle}};
//Génération Gauge
generatePieGraph(vlabel, objCanvas);
}
- la température
- l'humidité
- la pression ...
Code : Tout sélectionner
// graphs and units
// ci-dessous, source original
// Exemple avec la Température
//****************************
// Adds °C after the temperature and color them
if (vtype === 'Temp' || vtype === 'Chill' || vtype === 'DewPoint') {
var vtemp = 'T00';
if (parseInt(vdata, 10) >= 35) {
vtemp = 'T35';
}
else if (parseInt(vdata, 10) >= 0) {
vtemp = ['T'+ parseInt(vdata, 10)];
}
// fin source original
//****************************
if (vgauge !== 'Gauge')
{
// ci-dessous, source original
//****************************
switchclick = ['class="',vtemp,'" onclick="RefreshGraphData(\'#popup_graph\',',item.idx,',\'',vdesc,'\',\'temp\',\'day\',\'te\',\'Température ℃\')"'].join('');
vdata = [vdata,'<sup style="font-size:50%;" >℃</sup>'].join('');
// fin source original
//****************************
}
else
{
// Add event listener for `click` events.
var objEvent = document.getElementById(vlabel);
objEvent.addEventListener('click', function()
{RefreshGraphData('#popup_graph',item.idx,vdesc,'temp','day','te','Température °C');}, false);
}
// ci-dessous, source original
//****************************
}
faisant référence à la ligne de commande au-dessus