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
