cmd.info.numeric.gaugeIMG changement de couleur selon la valeur

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

1 « J'aime »

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>

Bonjour,
Merci pour c’est code mais je comprend rien lol .
J.ai bien copier les code dans un fichier html,mais quand j’applique le widget tout est transparent .
je ne comprend pas ou il faut changer les valeurs et couleurs.
Merci a vous

Te casses pas je suis justement en train de mettre à jour ce widget :wink: La mise à jour arrive sous peu

Cool super sympas tu pourras me faire signe lol :smirk:

Salut @Totof54

                if(name == 'Batterie'){
                if (val > 0)  {couleurjauge="rouge";}
                if (val < 0)  {couleurjauge="verte";}
                if (val == 0)  {couleurjauge="jaune";} 
   }   

tu doit le faire dans le code avec l’indication du nom de ta commande dans cet exemple ta commande se nome Batterie par exemple
audessus de Zero ta jauge sera rouge
en dessous de 0 verte
a 0 jaune …

Ok moi j’ai tout copier de le ficher ça c’est déjà bon ou pas ?

oui et il te faut aussi les images de fond du widget original

FICHIERS POUR V4:
Les fichiers pour utiliser gaugeIMG_V3 en V4 sont disponibles dans un fichier zippé à cette adresse:
https://github.com/Salvialf/JEEDOM-widg … IMG_V3.zip

Merci la je les ai télécharger je dois les mettre dans Jeexplorer ?

C’est tout bon un grand merci a toi :sweat:
Et pour les couleurs je fait comme tu me la expliquer plus haut

1 « J'aime »

super si non c’est la :
la1

oublie pas la font

Si non tu a des jauges dessiné sans images le tuto est ici
et la c’est beaucoup plus paramétrable

J’avais déjà regarder celui la , ce que je comprend pas c’est pour changer la couleur la actuellement c’est bleu. :worried:

le widget est associé a une commande qui prend une valeur quel est le nom de ta commande ?

pour la couleur il faut faire des conditions selon les valeur de cette commande

il faut donc dans le code reporté le nom de ta commande
puis pour celle-ci faire des conditions (comme dans l’exemple avec Batterie)

si tu n’y arrive pas fait moi la copie d’écran de ta commande et dit moi quel valeur tu veut affecter aux couleurs ?

tu la rajoute a la fin du code ?

Non entre // START AD FUNCTION BY OLIVE
Et // END ADD BY OLIVE

comme les exemples fournis

  // 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

ok je commence comprendre , tu peut en mettre autant que tu veut ?

Essai celle la par exemple:


              if(( name == 'le_nom_de_ta_commande'){
           
                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";}

              } 

ca va prendre ces couleurs pour les valeurs indiquées
a toi d’adapter a ta game de valeur

dans la limite du nombre de couleurs disponible pour les couleurs

mais la fonction peut te servir a d’autre commandes avec des differences
la tu fait une ou des conditions par nom de commandes.

Géniale j’ai enfin compris une grand merci a toi :+1:
Pour les autres Jauges c’est le même principe ? Parce que j,ai que le fichier code mais pas celui des widgets.