Couleur de texte en fonction d'une variable

Tags: #<Tag:0x00007f283b694d70>

Bonjour

Pour afficher la température de ma piscine, j’utilise le widget code suivant:

<div style="min-width:100px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<!--     <center><span class="cmdName" style="font-weight: bold;font-size : 0.8em;width: 65px;height: 17px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span></center>
-->
<!--     WIDGET tiré de ThermomètreIMG (qui n'existe plus)      --> 
<!--     Images 2020 de: https://github.com/Heliospeed/jeedom_widget_v4/      --> 
<div style="text-align:center;">
  	<div id="thermometreDivIMG#id#" class="thermometre_div_img">
        <span class="thermometre_img" id="thermometreIMG#id#"></span>
    </div>
  	<div>
    	<span class="thermometre_state" id="thermometreState#id#">#state#</span>
      	<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
      	<!-- A activer si vous voulez avoir les statistiques
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
           <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
-->
            <div>
      <span class="cmdName" style="font-weight: bold;color: #FFFFFF;font-size : 0.6em;width: 65px;height: 10px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span>
  	</div>
<!-- A activer pour voir derniere maj -->
<!--      <span  class='tooltips pull-right'>#collectDate#</span>    -->
<!--  -->
  	</div>
  </div>
   <script>
     
     /* Attributs list :
     		- position : 	position of the icon you want : left or right, by default : left
			- heightImage : 	height in pixel of image to show default is 90
            - widthImage : 	width in pixel of image to show default is 90
            - fontsizeState : state font size in px or em, default : 2em
            - fontsizeUnite : unite font size in px or em, default : 1em
			- displayState : display type allow to hide the state with none by example, by default : block
            - oneLine : display State and Unite on the same line
     */
        	var imgHeight;
     		var imgWidth;
            if (!isNaN(parseFloat("#heightImage#"))) {
              imgHeight = "#heightImage#";
            } else {
              imgHeight = "40";
            }
            if (!isNaN(parseFloat("#widthImage#"))) {
              imgWidth = "#widthImage#";
            } else {
              imgWidth = "12";
            }
        
            if ("#state#" <= 0) {
            	$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer00.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 0 && "#state#" <= 5) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer01.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 5 && "#state#" <= 10) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer02.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 10 && "#state#" <= 13) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer03.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 13 && "#state#" <= 16) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer04.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 16 && "#state#" <= 18) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer05.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 18 && "#state#" <= 20) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer06.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 20 && "#state#" <= 22) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer07.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 22 && "#state#" <= 24) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer08.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 24 && "#state#" <= 26) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer09.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 26 && "#state#" <= 28) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer10.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 28 && "#state#" <= 34) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer11.png' class='thermometre_img' id='thermometre#id#'/>");
            }

          	else {
            	$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermometer12.png' class='thermometre_img' id='thermometre#id#'/>");
        	}
     
          if ("#position#" == "right") {
            $("#thermometreDivIMG#id#.thermometre_div_img").css("float","right"); 
             $("#thermometreIMG#id#.thermometre_img").css("margin-right","15px");
          } else {
    	  	$("#thermometreDivIMG#id#.thermometre_div_img").css("float","left");
            $("#thermometreIMG#id#.thermometre_img").css("margin-left","15px");
          }
          if (typeof "#fontsizeState#" != "undefined" && "#fontsizeState#" != "2em") {
            $("#thermometreState#id#.thermometre_state").css("height","#fontsizeState#"); 
          }
          if (typeof "#fontsizeUnite#" != "undefined" && "#fontsizeUnite#" != "1em") {
            $("thermometreUnite#id#.thermometre_unite").css("height","#fontsizeUnite#"); 
          }
          if (typeof "#displayState#" != "undefined" && "#displayState#" != "block") {
            $("#thermometreState#id#.thermometre_state").css("display","#displayState#"); 
          }
           if (typeof "#oneLine#" != "undefined" && "#oneLine#" == "on") {
             if ("#position#" == "right") {
                //$("#thermometreState#id#.thermometre_state").css("margin-left","20px"); 
             	$("#thermometreUnite#id#.thermometre_unite").css("display","block");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-right","85px");
             } else {
                $("#thermometreState#id#.thermometre_state").css("margin-right","20px"); 
             	$("#thermometreUnite#id#.thermometre_unite").css("display","block");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-left","85px");
             }
           }
    </script>
</div>
<style>
 
span.thermometre_img {
  	height: 80px;
  }

span.thermometre_div_img {
    margin-left: 3px;
	position:relative;
  	height: 64px;
  	width: 62px;
	float:left;
  }
   
span.thermometre_state {
  	font-weight: bold;
  	font-size: 1,5em;
  	margin-top: 1px;
  	display: block;
  color: #FFFFFF;
  }

span.thermometre_unite {
  	font-size: 0.8em;
    font-weight: bold;
  	margin-top: 5px;
  	top: 22px;
    color: #FFFFFF;
  }

</style>

Ce que j’aimerais, c’est que la couleur du texte change en fonction d’une variable nommée filt-pisc-etat, qui peut avoir comme valeur soit « active », soit « arrêtée ». De telle sorte que je voies d’un seul coup d’oeil que la filtration est arrêtée en regardant la température.

Pensez vous que ce soit faisable? et si oui, comment?

Merci d’avance

Le sujet de @noodom doit pouvoir répondre à ta question :

Bonjour

J’ai beau lire et relire, je n’arrive pas à raccrocher avec ma demande. Non pas que ta réponse ne soit pas pertinente, mais je ne vois pas.

Il n’y a pas moyen juste d’inclure le test de la variable dans le widget?

Certainement, mais je ne sais pas faire.

Moi non plus :slight_smile:

Il va falloir que j’invoque le maitre des widgets…

@Salvialf, si tu passes par là :slight_smile: