Salut,
Une petite modif du code du widget peut te permettre d’arriver à tes fins sans scénario:
L’idée est d’ajouter des lignes de code de ce style dans la fonction jeedom.cmd.update (donc entre jeedom.cmd.update['#id#'] = function(_options){ et } jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});)
if (val > 1000 && val <= 1015) {
document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondrouge.png";
}
else if (val > 1015 && val <= 1030) {
document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondverte.png";
}
..........................
Il faut aussi du coup commenter ou supprimer la variable de sélection d la couleur de la jauge donc les 2 lignes:
`var colJauge = (’#jauge#’ !=’#’+‹ jauge# ›) ? « #jauge# »:« bleue »;’ et ‹ document.getElementById(« IMGgauge#id# »).src=« plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fond »+colJauge+".png"; ›
Un exemple avec un bout de code modifié:
<div class="cmd #history# tooltips cmd-widget gaugeIMG#id# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center><span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
<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 style="#displayHistory# font-size: 0.8em;position:absolute;width:100%;" class="historyDisplay#id#">
<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></center>
<script>
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;
}
if (val > 1000 && val <= 1015) {
document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondrouge.png";
}
else if (val > 1015 && val <= 1030) {
document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondverte.png";
}
$('#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_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_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#":"bleue";
// document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
document.getElementById('gauge#id#').style.backgroundImage="url(./plugins/widget/core/template/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','48px');
$('span.state_gauge#id#').css('right','21px');
$('span.unite_gauge#id#').css('font-size','6px');
$('span.unite_gauge#id#').css('top','46px');
$('span.minvalue_gauge#id#').css('font-size','0.3em');
$('span.minvalue_gauge#id#').css('top','46px');
$('span.minvalue_gauge#id#').css('left','15px');
$('span.maxvalue_gauge#id#').css('font-size','0.3em');
$('span.maxvalue_gauge#id#').css('top','46px');
$('span.maxvalue_gauge#id#').css('right','15px');
$('span.midvalue_gauge#id#').css('font-size','0.3em');
$('span.midvalue_gauge#id#').css('top','12px');
$('span.quartvalue_gauge#id#').css('font-size','0.3em');
$('span.quartvalue_gauge#id#').css('top','25px');
$('span.quartvalue_gauge#id#').css('left','17px');
$('span.troisquartvalue_gauge#id#').css('font-size','0.3em');
$('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','18px');
$('#gauge#id#').css('top','35px');
$('img.IMGgauge#id#').css('width','80px');
$('img.IMGgauge#id#').css('height','80px');
$('.historyDisplay#id#').css('font-size','0.55em');
}
</script>
<style>
@font-face {
font-family: "Digital7";
src: url("plugins/widget/core/template/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:71px;
right:31px;
}
span.unite_gauge#id# {
font-size:11px;
width:100%;
top:65px;
position:absolute;
display:block;
}
span.minvalue_gauge#id# {
font-size:0.5em;
font-weight:bold;
position:absolute;
top:65px;
left:22px;
}
span.maxvalue_gauge#id# {
font-size:0.5em;
font-weight:bold;
position:absolute;
top:65px;
right:22px;
}
span.midvalue_gauge#id# {
display:block;
width:100%;
font-size:0.5em;
font-weight:bold;
position:absolute;
top:18px;
}
span.quartvalue_gauge#id# {
font-size:0.5em;
font-weight:bold;
position:absolute;
top:35px;
left:26px;
}
span.troisquartvalue_gauge#id# {
font-size:0.5em;
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;
float:center;
position:absolute;
left:10px;
top:20px;
}
#gauge#id# {
position:absolute;
width:75px;
height:75px;
background:center;
left:32px;
top:42px;
transition:transform .8s;
-webkit-transform:rotate(0deg);
}
</style>
</div>
Bien sûr c’est à adapter, J’espère que ça va t’aider à parvenir à faire ce que tu cherches… Sinon dis le moi je ferai en sorte de développer ma réponse.