Vue la mise a jour de @Salvialf
je vous invite a charger sa nouvelle version :
[SALVIALF] Widget GaugeIMG (Info/Numérique)
historique
D’abord un grand merci aux auteurs de ce magnifique Template.
dont la source de départ est ici : https://forum.jeedom.com/viewtopic.php?f=29&t=45026&p=725738#p725738
Voici donc ma maigre contribution.
Alors voilà comme j’ai pas mal de jauges avec un équipement solaire
et qu’il est plus cool lorsque l’on charge / décharge une batterie, injecte ou consomme du courant j’ai eu l’idée de prendre comme convention genre la la couleur est verte en charge et rouge en décharge … blanc quand on est a zéro …
je vous laisse inventer la suite.
il vous faudra bien sur indiquer le nom de chaques commandes et les conditions
dans la fonction ajoutée.
la suite serait d’indiquer ces conditions dans le options de chaques commandes
plutôt qu’un dur dans le fichier.
cmd.info.numeric.gaugeIMG_V3.html version modifier
<!-- Mise à jour V3 et optimisation
du widget dashboard.info.numeric.gaugeIMG
Développé par thecrow06
ajout de changement de couleur en fonction des valeures des commandes.
les modifs ont des commentaires // xxx OLIVE
-->
<div class="cmd tooltips #history# cmd-widget gaugeIMG#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="gaugeIMGdisplay#id#">
<img id="IMGgauge#id#" class="IMGgauge#id#" alt="Fond" >
<span class="minvalue_gauge#id#" id="minvalue#id#"></span>
<span class="midvalue_gauge#id#" id="midvalue#id#"></span>
<span class="quartvalue_gauge#id#" id="quartvalue#id#"></span>
<span class="troisquartvalue_gauge#id#" id="troisquartvalue#id#"></span>
<span class="maxvalue_gauge#id#" id="maxvalue#id#"></span>
<span class="state_gauge#id#"></span>
<span class="unite_gauge#id#">#unite#</span>
<div class="cmdStats #hide_history#">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
</div>
<div id="gauge#id#" class="indicator"></div>
<script>
// START ADD BY OLIVE
function changecolor(val, name){
val = parseInt(val, 10);
var colJauge ="blanche";
if(name == 'Batterie'){
if (val > 0) {colJauge="rouge";}
if (val < 0) {colJauge="verte";}
if (val == 0) {colJauge="blanche";}
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
}
if(name == 'Edf'){
if (val > 0) {colJauge="rouge";}
if (val < 0) {colJauge="verte";}
if (val == 0) {colJauge="blanche";}
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
}
if(name == 'Solaire'){
if (val > 0) {colJauge="verte";}
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
}
if(name == 'insert'){
if (val >= 80) {colJauge="rouge";}
if (val < 80) {colJauge="verte";}
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
}
} // END ADD BY OLIVE
var valMin#id# = is_numeric('#mini#') ? parseFloat('#mini#'):#minValue#;
var valMax#id# = is_numeric('#maxi#') ? parseFloat('#maxi#'):#maxValue#;
var midvalue = Math.round((valMax#id# + valMin#id#)*50)/100;
var quartvalue = Math.round((valMin#id# + midvalue)*50)/100;
var troisquartvalue = Math.round((midvalue + valMax#id#)*50)/100;
$('#minvalue#id#').text(valMin#id#);
$('#midvalue#id#').text(midvalue);
$('#quartvalue#id#').text(quartvalue);
$('#troisquartvalue#id#').text(troisquartvalue);
$('#maxvalue#id#').text(valMax#id#);
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var plage = valMax#id# - valMin#id#;
var angle = '';
changecolor(val,"#name#"); // ADD BY OLIVE
if (plage == 0) angle = -70;
else if (valMin#id# < valMax#id#) {
if (val < valMin#id#) angle = -10;
else if (val > valMax#id#) angle = 232;
else angle = (val - valMin#id#) * 222 / plage;
} else {
if (val < valMax#id#) angle = 232;
else if (val > valMin#id#) angle = -10;
else angle = (val - valMin#id#) * 222 / plage;
}
$('#gauge#id#.indicator').css( {'-webkit-transform':'rotate('+angle+'deg)','-moz-transform':'rotate('+angle+'deg)','-ms-transform':'rotate('+angle+'deg)','-o-transform':'rotate('+angle+'deg)','transform':'rotate('+angle+'deg)'});
$('.cmd[data-cmd_id=#id#] .state_gauge#id#').text(_options.display_value);
$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
var colJauge = ('#jauge#' !='#'+'jauge#') ? "#jauge#":"bleue";
var colAiguille = ('#aiguille#' !='#'+'aiguille#') ? "#aiguille#":"blanche";
var val=#state#; //ADD BY OLIVE
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
changecolor(val,"#name#"); /// ADD BY OLIVE
document.getElementById('gauge#id#').style.backgroundImage="url(./data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/center"+colAiguille+".png)";
if ('#petit#' == 1) {
$('div.gaugeIMG#id#').css('width','90px');
$('div.gaugeIMG#id#').css('height','110px');
$('div.gaugeIMGdisplay#id#').css('left','2px');
$('span.state_gauge#id#').css('font-size','17px');
$('span.state_gauge#id#').css('top','54px');
$('span.state_gauge#id#').css('right','24px');
$('span.unite_gauge#id#').css('font-size','6px');
$('span.unite_gauge#id#').css('top','43px');
$('span.minvalue_gauge#id#').css('font-size','0.5em');
$('span.minvalue_gauge#id#').css('top','46px');
$('span.minvalue_gauge#id#').css('left','15px');
$('span.maxvalue_gauge#id#').css('font-size','0.5em');
$('span.maxvalue_gauge#id#').css('top','46px');
$('span.maxvalue_gauge#id#').css('right','15px');
$('span.midvalue_gauge#id#').css('font-size','0.5em');
$('span.midvalue_gauge#id#').css('top','12px');
$('span.quartvalue_gauge#id#').css('font-size','0.5em');
$('span.quartvalue_gauge#id#').css('top','25px');
$('span.quartvalue_gauge#id#').css('left','17px');
$('span.troisquartvalue_gauge#id#').css('font-size','0.5em');
$('span.troisquartvalue_gauge#id#').css('top','25px');
$('span.troisquartvalue_gauge#id#').css('right','17px');
$('#gauge#id#').css('width','48px');
$('#gauge#id#').css('height','48px');
$('#gauge#id#').css('left','21px');
$('#gauge#id#').css('top','31px');
$('img.IMGgauge#id#').css('width','80px');
$('img.IMGgauge#id#').css('height','80px');
}
</script>
<style>
@font-face {
font-family: "Digital7";
src: url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/font/digital7.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
span.state_gauge#id# {
font-family:"Digital7";
font-size:26px;
position:absolute;
top:83px;
right:31px;
}
span.unite_gauge#id# {
font-size:10px;
width:100%;
top:67px;
position:absolute;
display:block;
}
span.minvalue_gauge#id# {
font-size:0.75em;
font-weight:bold;
position:absolute;
top:65px;
left:22px;
}
span.maxvalue_gauge#id# {
font-size:0.75em;
font-weight:bold;
position:absolute;
top:65px;
right:22px;
}
span.midvalue_gauge#id# {
display:block;
width:100%;
font-size:0.75em;
font-weight:bold;
position:absolute;
top:18px;
}
span.quartvalue_gauge#id# {
font-size:0.75em;
font-weight:bold;
position:absolute;
top:35px;
left:26px;
}
span.troisquartvalue_gauge#id# {
font-size:0.75em;
font-weight:bold;
position:absolute;
top:35px;
right:26px;
}
img.IMGgauge#id# {
width:120px;
height:120px;
}
div.gaugeIMG#id# {
width:140px;
height:160px;
}
div.gaugeIMGdisplay#id# {
color:#F0F0F0;
position:absolute;
left:10px;
}
#gauge#id# {
position:absolute;
width:75px;
height:75px;
background:center;
left:33px;
top:40px;
transition:transform .8s;
-webkit-transform:rotate(0deg);
}
</style>
</div>
Un petit aperçu du résultat :
Faites bien attention a la case du noms des commandes !
Amusez-vous bien