Mise a jour, quelques corrections
<!-- Mise à jour V3 et optimisation
du widget dashboard.info.numeric.gaugeIMG
Développé par thecrow06 -->
<!-- traitement sous condition des couleurs
du mercredi 8 janvier 2020
modifier par 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 AD FUNCTION BY OLIVE
function changecolor(val, name,couleurjauge){
// val, valeur de la jauge
// name, nom de la commande de ou des jauges
// couleurjauge, par defaut ='rien' et modifier ci après si confition vraie
// pour memo blanche,verte,jaune,orange,rose,rouge,mauve,turquoise
// exemple sans condition
if(name == 'Production'){
couleurjauge="mauve";
}
//exemple avec conditions
if(name == 'Batterie'){
if (val > 0) {couleurjauge="rouge";}
if (val < 0) {couleurjauge="verte";}
if (val == 0) {couleurjauge="jaune";}
}
// exemple affectation multiple
if(( name == 'top') || (name == 'haut') || (name == 'milieu haut') || (name == 'milieu bas') || (name == 'bas') ){
if (val > 0) {couleurjauge="blanche";}
if (val > 20) {couleurjauge="mauve";}
if (val > 30) {couleurjauge="bleue";}
if (val > 40) {couleurjauge="turquoise";}
if (val > 50) {couleurjauge="verte";}
if (val > 60) {couleurjauge="jaune";}
if (val > 70) {couleurjauge="orange";}
if (val > 80) {couleurjauge="rose";}
if (val > 85) {couleurjauge="rouge";}
}
return couleurjauge;
} // 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 = '';
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)
// passe ici en MAJ
// ajout olive
// test des conditions
colJauge=changecolor(val, '#name#' ,"rien") ;
// test si il y a un changement de couleur en fonction des conditions si pas de changement la foncrion retourne 'rien' si non 'la_couleur'
if(colJauge != "rien"){
//changement de la couleur de la jauge
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
}
}
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";
// passe ici a INITIALISATION
// ajout olive
// test des conditions
ncolJauge = changecolor('#state#', '#name#' ,'rien') ;
// test si il y a un changement de couleur en fonction des conditions si pas de changement la foncrion retourne 'rien' si non 'la_couleur'
if(ncolJauge != "rien"){ colJauge = ncolJauge;}
// fin ajout olive
document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
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>