Widget ThermometreCSS de [WINHEX]

[Gsxrnoir2001]

Bonjour à tous,

sur l’ancien forum, « WINHEX » a développé un magnifique widget « ThermometreCss », que j’utilise depuis un certain temps maintenant.

J’y ai effectué des modifications car il y avait des petits bugs:

1 - les valeurs entre (-0.1 et -0.9) n’affichait pas le signe négatif « - ».

2 - le traitement avec les valeurs, « mini en négatif » et « maxi en positif » étaient pris en compte, mais ce n’était pas le cas pour le mini et maxi en négatif.

Sachant que je ne l’ai pas retrouvé ici (sauf si je suis passé à coté), je le mets à disposition pour en faire profiter tous le monde.

Encore merci à lui, pour ce super widget.

Le voici :

Le script modifié :

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
<!-- <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div> -->
     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a" style="color:white"></div>
        <div class="percent percent-c" style="color:white"></div>
        <div class="percent percent-e" style="color:white"></div>
      </div>
      <div class="mercury">
        <div class="percent-current" style="height:21px;font-size:16px;width:45px;padding-left:0px;padding-top:6px"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script>
		jeedom.cmd.update['#id#'] = function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var intNum = Math.trunc(value);
var valsign = '-';          
var decNum = Math.round((value - intNum) * 10);
		if(value < 0){
		    var intNum = (valsign+intNum*-1);
            var decNum = Math.round((decNum)*-1);
                     }          
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = Math.round((maxValue+minValue)/2);
var maxvaleur = maxValue + minValue;
var minNegative = 0;
		if(minValue < 0){
			var minNegative = minValue*-1;
            var maxvaleur = maxValue + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var maxNegative = 0;
		if(maxValue < 0){
			var maxNegative = maxValue*-1;
            var maxvaleur = maxNegative + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
//var maxvaleur = maxValue + minNegative;
var valeurState = value + minNegative;
var jauge = Math.round( (_options.display_value - ('#minValue#')) * (100/('#maxValue#' - ('#minValue#'))) );
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
        $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);  
//      $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
        $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        </script>
  <style>
      /* commentaire  */
[data-cmd_id="#id#"] .decNumclass {
   font-size:12px;
   color: #323232 ;
/* position: absolute; */
   top: 15px;
   right: 10px;
   font-weight: 500;
}
[data-cmd_id="#id#"] .uniteclass {
   font-size:16px;
   color: #323232 ;
/* position: absolute; */
   font-weight: 500;
   top: 3px;
   right: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer {
   width: 100px;
   position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
   height: calc(127px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
   width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
   width: 32px;
   height: 32px;
   left: -6px;
   bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
   width: 14px;
   height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
   display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   text-align: right;
   position: absolute;
   width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
   bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
   bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
   bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
   width: 10px;
   margin: auto;
   left: 0;
   right: 0;
   height: calc(100% - 50px);
   top: 12px;
   position: absolute;
   background-color: #d6d6d6;
   border-radius: 10px 10px 0 0;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #F44336;
   border-radius: 10px 10px 0 0;
   background: linear-gradient(0deg, #f44336, #3f51b5);
   transition: all .5s ease-in-out;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
   position: absolute;
   bottom: 0;
   overflow: hidden;
   width: 10px;
   height: 100%;
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
   position: absolute;
   width: 10px;
   height: calc(200px - 57px);
   background: linear-gradient(#F44336, #8BC34A, #2196F3);
/* background: linear-gradient(#2196F3, #8BC34A, #F44336); */
   bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
   position: absolute;
   left: 0;
   top: 4px;
   transform: translateX(calc(-100% - 10px)) translateY(-60%);
   background-color: #fff;
   padding: 5px 0px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   font-weight: 500;
   font-size: 2.2em;
   color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
   border-left: 8px solid white;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 2px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
   border-left: 7px solid rgba(0, 0, 0, 0.2);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 0px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
   background-color: #fff;
   height: calc(100% - 20px);
   width: 30px;
   margin: auto;
   position: relative;
   border-radius: 20px 20px 0 0;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
   width: 100%;
   bottom: 0px;
   left: 0;
   position: absolute;
   height: 50px;
   background-color: #fff;
   content: "";
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
   content: "";
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: #fff;
   left: -10px;
   bottom: -20px;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
   position: absolute;
   width: 50px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   height: 50px;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 24px;
   height: 24px;
   background-color: #2196F3;
   content: "";
   border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
   position: absolute;
   left: 0;
   right: 0;
   width: 10px;
   top: 0;
   margin: auto;
   height: 20px;
   background-color: #2196F3;
   content: "";
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
/* width: 300px;
   height: 300px; */
   width: 100%; height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
   position: absolute;
   left: 0;
   z-index: 1;
   font-size: 1em;
   top: 0;
   height: 100%;
   font-style: italic;
   font-weight: 500;
/* text-shadow: 1px 1px #fff; */
} 
</style>

[Gsxrnoir2001]

Je viens de retrouver son créateur ici, bonjour @ajja17orange

[Furaxworld]

@ajja17orange

[ajja17orange]

Merci je n’avais fait qu’une adaptation.

Pour info
Lors d’une evolution de jeedom
il y a une modification avec update (mise a jour)

jeedom.cmd.addUpdateFunction('#id#',function(_options)

Et

jeedom.cmd.refreshValue([{cmd_id

Exemple

jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html

[Vicnet]

Salut,
C’est normal les 2 balises non fermées ?

	<center>
     <div class="centered">

Chez moi, le widget mets la pagaille dans les widgets conjoints

a+
Vicnet

[Gsxrnoir2001]

Merci pour l’info,

j’ai juste modifié la partie « script », avec mes compétences très limitées.

après plusieurs essais, je me suis aussi aperçu qu’il me mettait la pagaille.

mais là, ca dépasse mon petit niveau.

Peut-être une âme charitable pour la mise au point !!!

@ajja17orange !!!

ici le script avec

jeedom.cmd.refreshValue([{cmd_id

qui a l’air de fonctionner.

Pour

jeedom.cmd.addUpdateFunction('#id#',function(_options)

c’est une autre histoire, je n’ai plus de retour des valeurs dans le widget.

pour la balise

<center>

elle est fermée.

pour la balise

<div class="centered">

je ne sais pas trop ou la fermer de façon correcte.

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
<!-- <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div> -->
     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a" style="color:white"></div>
        <div class="percent percent-c" style="color:white"></div>
        <div class="percent percent-e" style="color:white"></div>
      </div>
      <div class="mercury">
        <div class="percent-current" style="height:21px;font-size:16px;width:45px;padding-left:0px;padding-top:6px"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script>
		jeedom.cmd.update['#id#'] = function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var intNum = Math.trunc(value);
var valsign = '-';          
var decNum = Math.round((value - intNum) * 10);
		if(value < 0){
		    var intNum = (valsign+intNum*-1);
            var decNum = Math.round((decNum)*-1);
                     }          
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = Math.round((maxValue+minValue)/2);
var maxvaleur = maxValue + minValue;
var minNegative = 0;
		if(minValue < 0){
			var minNegative = minValue*-1;
            var maxvaleur = maxValue + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var maxNegative = 0;
		if(maxValue < 0){
			var maxNegative = maxValue*-1;
            var maxvaleur = maxNegative + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
//var maxvaleur = maxValue + minNegative;
var valeurState = value + minNegative;
var jauge = Math.round( (_options.display_value - ('#minValue#')) * (100/('#maxValue#' - ('#minValue#'))) );
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
        $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);  
//      $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
        $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        };
//		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
        </script>
     </center>
  <style>
      /* commentaire  */
[data-cmd_id="#id#"] .decNumclass {
   font-size:12px;
   color: #323232 ;
/* position: absolute; */
   top: 15px;
   right: 10px;
   font-weight: 500;
}
[data-cmd_id="#id#"] .uniteclass {
   font-size:16px;
   color: #323232 ;
/* position: absolute; */
   font-weight: 500;
   top: 3px;
   right: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer {
   width: 100px;
   position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
   height: calc(127px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
   width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
   width: 32px;
   height: 32px;
   left: -6px;
   bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
   width: 14px;
   height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
   display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   text-align: right;
   position: absolute;
   width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
   bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
   bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
   bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
   width: 10px;
   margin: auto;
   left: 0;
   right: 0;
   height: calc(100% - 50px);
   top: 12px;
   position: absolute;
   background-color: #d6d6d6;
   border-radius: 10px 10px 0 0;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #F44336;
   border-radius: 10px 10px 0 0;
   background: linear-gradient(0deg, #f44336, #3f51b5);
   transition: all .5s ease-in-out;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
   position: absolute;
   bottom: 0;
   overflow: hidden;
   width: 10px;
   height: 100%;
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
   position: absolute;
   width: 10px;
   height: calc(200px - 57px);
   background: linear-gradient(#F44336, #8BC34A, #2196F3);
/* background: linear-gradient(#2196F3, #8BC34A, #F44336); */
   bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
   position: absolute;
   left: 0;
   top: 4px;
   transform: translateX(calc(-100% - 10px)) translateY(-60%);
   background-color: #fff;
   padding: 5px 0px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   font-weight: 500;
   font-size: 2.2em;
   color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
   border-left: 8px solid white;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 2px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
   border-left: 7px solid rgba(0, 0, 0, 0.2);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 0px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
   background-color: #fff;
   height: calc(100% - 20px);
   width: 30px;
   margin: auto;
   position: relative;
   border-radius: 20px 20px 0 0;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
   width: 100%;
   bottom: 0px;
   left: 0;
   position: absolute;
   height: 50px;
   background-color: #fff;
   content: "";
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
   content: "";
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: #fff;
   left: -10px;
   bottom: -20px;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
   position: absolute;
   width: 50px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   height: 50px;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 24px;
   height: 24px;
   background-color: #2196F3;
   content: "";
   border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
   position: absolute;
   left: 0;
   right: 0;
   width: 10px;
   top: 0;
   margin: auto;
   height: 20px;
   background-color: #2196F3;
   content: "";
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
/* width: 300px;
   height: 300px; */
   width: 100%; height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
   position: absolute;
   left: 0;
   z-index: 1;
   font-size: 1em;
   top: 0;
   height: 100%;
   font-style: italic;
   font-weight: 500;
/* text-shadow: 1px 1px #fff; */
} 
</style>

voila, c’est tout !!!

[Vicnet]

J’ai tout simplement fait sauter ces balises
Et c’est bon.

Sinon, si on veut vraiment centrer, il faut supprimer <center> et ajouter un </div> juste après le dernier </div>.
En passant dans un xml beautifier (ou à la main), normalement, les balises de début et celles de fin sont alignées !

[ajja17orange]

Regarde les tags max et mini value ont changé de nom

Avant

#maxValue#

Par

#maxHistoryValue#

Faut finir le widget par un </div>
Afin de garder tous ça dans le widget et Il en manque un!

Je regarderai en soirée

[Gsxrnoir2001]

j’ai fermé la balise <center>

après la fin de la balise </script>

et tout est rentré dans l’ordre, plus de pagaille

encore merci.

il reste

jeedom.cmd.addUpdateFunction('#id#',function(_options)

et tout sera parfait.

si tout est OK, je mettrais le script final et en résolu.

[Gsxrnoir2001]

les tags :

#maxValue# et #minValue#

sont renseignés dans la commande ( ce sont les butées min et max de la '#Value# ), si je ne me trompe pas bien sûr.

ce qui me gène dans :

#maxHistoryValue#

c’est ’ History ', ca me fait penser aux statistiques de la valeur.

Encore une fois, je peux me tromper, c’est peut-être mon esprit tordu qui me joue des tours

[Vicnet]

Petit plus, ca serait sympa de pouvoir définir la température moyenne par un paramètre.
Et si pas définit, calcule de la moyenne min/max comme actuel.

Je ne sais pas faire mais ca doit se trouver sur le forum…

[ajja17orange]

ah oui !
tiens j’ai fait 2,3 modif

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
        <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div><br>
<!-- <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div> -->
     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a"></div>
        <div class="percent percent-c"></div>
        <div class="percent percent-e"></div>
      </div>
      <div class="mercury">
        <div class="percent-current" style="height:25px;font-size:16px;width:50px;padding-left:0px;padding-top:6px"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>
  <div class="value #hide_history#">
    <div class="col-xs-12 center-block">
      <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>
              </center> 
  <script>
//		jeedom.cmd.update['#id#'] = function(_options){
               jeedom.cmd.addUpdateFunction('#id#',function(_options) {

var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var intNum = Math.trunc(value);
var valsign = '-';          
var decNum = Math.round((value - intNum) * 10);
		if(value < 0){
		    var intNum = (valsign+intNum*-1);
            var decNum = Math.round((decNum)*-1);
                     }          
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 100.0;
var moyValue = Math.round((maxValue+minValue)/2);
var maxvaleur = maxValue + minValue;
var minNegative = 0;
		if(minValue < 0){
			var minNegative = minValue*-1;
            var maxvaleur = maxValue + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var maxNegative = 0;
		if(maxValue < 0){
			var maxNegative = maxValue*-1;
            var maxvaleur = maxNegative + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
//var maxvaleur = maxValue + minNegative;
var valeurState = value + minNegative;
//var jauge = Math.round( (_options.display_value - ('#minHistoryValue#')) * (100/('#maxHistoryValue#' - ('#minHistoryValue#'))) );
var jauge = Math.round( (_options.display_value - (minValue)) * (100/(maxValue - (minValue))) );
                 
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
        $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);  
//      $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
        $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        });
//		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
        </script>
        
  <style>
      /* commentaire  */
[data-cmd_id="#id#"] .decNumclass {
   font-size:12px;
   color: #323232 ;
/* position: absolute; */
   top: 15px;
   right: 10px;
   font-weight: 500;
}
[data-cmd_id="#id#"] .uniteclass {
   font-size:16px;
   color: #323232 ;
/* position: absolute; */
   font-weight: 500;
   top: 12px;
   right: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer {
   width: 100px;
   position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
   height: calc(127px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
   width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
   width: 32px;
   height: 32px;
   left: -6px;
   bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
   width: 14px;
   height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
   display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
/*   border-bottom: 1px solid  (0, 0, 0, 0.2);
*/  
   border-bottom: 1px solid var(--placeholder-color);
    text-align: right;
   text-align: right;
   position: absolute;
   width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
   bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
   bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
   bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
   width: 10px;
   margin: auto;
   left: 0;
   right: 0;
   height: calc(100% - 50px);
   top: 12px;
   position: absolute;
   background-color: #d6d6d6;
   border-radius: 10px 10px 0 0;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #F44336;
   border-radius: 10px 10px 0 0;
   background: linear-gradient(0deg, #f44336, #3f51b5);
   transition: all .5s ease-in-out;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
   position: absolute;
   bottom: 0;
   overflow: hidden;
   width: 10px;
   height: 100%;
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
   position: absolute;
   width: 10px;
   height: calc(200px - 57px);
   background: linear-gradient(#F44336, #8BC34A, #2196F3);
/* background: linear-gradient(#2196F3, #8BC34A, #F44336); */
   bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
   position: absolute;
   left: 0;
   top: 4px;
   transform: translateX(calc(-100% - 10px)) translateY(-60%);
   background-color: #fff;
   padding: 5px 0px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   font-weight: 500;
   font-size: 2.2em;
   color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
   border-left: 8px solid white;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 2px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
  height: 0;

}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
   border-left: 7px solid rgba(0, 0, 0, 0.2);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 0px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
   background-color: #fff;
   height: calc(100% - 20px);
   width: 30px;
   margin: auto;
   position: relative;
   border-radius: 20px 20px 0 0;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
   width: 100%;
   bottom: 0px;
   left: 0;
   position: absolute;
   height: 50px;
   background-color: #fff;
   content: "";
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
   content: "";
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: #fff;
   left: -10px;
   bottom: -20px;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
   position: absolute;
   width: 50px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   height: 50px;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 24px;
   height: 24px;
   background-color: #2196F3;
   content: "";
   border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
   position: absolute;
   left: 0;
   right: 0;
   width: 10px;
   top: 0;
   margin: auto;
   height: 20px;
   background-color: #2196F3;
   content: "";
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
/* width: 300px;
   height: 300px; */
   width: 100%; height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
   position: absolute;
   left: 0;
   z-index: 1;
   font-size: 8px;
   top: 0;
   height: 100%;
   font-style: italic;
   font-weight: 500;
/* text-shadow: 1px 1px #fff; */
} 
</style>
</div>

[Gsxrnoir2001]

Merci, tu m’as devancé

ayant trouvé comment utiliser la syntaxe :

jeedom.cmd.addUpdateFunction(‹ #id# ›,function(_options) {

j’étais en train de le mettre en ligne , quand j’ai decouvert ta solution.

j’ai aussi fait une petite modification, a savoir, le seuil mini démarre au niveau de la boule de mercure.

plus d’amplitude entre le mini et le maxi du coup !!!

en photo :

et le script:

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
<!-- <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div> -->
     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a" style="color:white"></div>
        <div class="percent percent-c" style="color:white"></div>
        <div class="percent percent-e" style="color:white"></div>
      </div>
      <div class="mercury">
        <div class="percent-current" style="height:21px;font-size:16px;width:45px;padding-left:0px;padding-top:6px"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script>
//		jeedom.cmd.update['#id#'] = function(_options){
        jeedom.cmd.addUpdateFunction('#id#',function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var intNum = Math.trunc(value);
var valsign = '-';          
var decNum = Math.round((value - intNum) * 10);
		if(value < 0){
		    var intNum = (valsign+intNum*-1);
            var decNum = Math.round((decNum)*-1);
                     }          
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
var moyValue = Math.round((maxValue+minValue)/2);
var maxvaleur = maxValue + minValue;
var minNegative = 0;
		if(minValue < 0){
			var minNegative = minValue*-1;
            var maxvaleur = maxValue + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var maxNegative = 0;
		if(maxValue < 0){
			var maxNegative = maxValue*-1;
            var maxvaleur = maxNegative + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
//var maxvaleur = maxValue + minNegative;
var valeurState = value + minNegative;
var jauge = Math.round( (_options.display_value - ('#minValue#')) * (100/('#maxValue#' - ('#minValue#'))) );
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du : '+_options.valueDate+'<br/>Collectée le : '+_options.collectDate);
        $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);  
//      $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
        $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        });
//		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
        </script>
      </center>
  <style>
      /* commentaire  */
[data-cmd_id="#id#"] .decNumclass {
   font-size:12px;
   color: #323232 ;
/* position: absolute; */
   top: 15px;
   right: 10px;
   font-weight: 500;
}
[data-cmd_id="#id#"] .uniteclass {
   font-size:16px;
   color: #323232 ;
/* position: absolute; */
   font-weight: 500;
   top: 3px;
   right: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer {
   width: 100px;
   position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
   height: calc(132px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
   width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
   width: 32px;
   height: 32px;
   left: -6px;
   bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
   width: 14px;
   height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
   display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   text-align: right;
   position: absolute;
   width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
   bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
   bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
   bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
   width: 10px;
   margin: auto;
   left: 0;
   right: 0;
   height: calc(100% - 45px);
   top: 12px;
   position: absolute;
   background-color: #d6d6d6;
   border-radius: 10px 10px 0 0;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #F44336;
   border-radius: 10px 10px 0 0;
   background: linear-gradient(0deg, #f44336, #3f51b5);
   transition: all .5s ease-in-out;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
   position: absolute;
   bottom: 0;
   overflow: hidden;
   width: 10px;
   height: 100%;
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
   position: absolute;
   width: 10px;
   height: calc(200px - 57px);
   background: linear-gradient(#F44336, #8BC34A, #2196F3);
/* background: linear-gradient(#2196F3, #8BC34A, #F44336); */
   bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
   position: absolute;
   left: 0;
   top: 4px;
   transform: translateX(calc(-100% - 10px)) translateY(-60%);
   background-color: #fff;
   padding: 5px 0px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   font-weight: 500;
   font-size: 2.2em;
   color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
   border-left: 8px solid white;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 2px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
   border-left: 7px solid rgba(0, 0, 0, 0.2);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 0px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
   background-color: #fff;
   height: calc(100% - 20px);
   width: 30px;
   margin: auto;
   position: relative;
   border-radius: 20px 20px 0 0;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
   width: 100%;
   bottom: 0px;
   left: 0;
   position: absolute;
   height: 50px;
   background-color: #fff;
   content: "";
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
   content: "";
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: #fff;
   left: -10px;
   bottom: -20px;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
   position: absolute;
   width: 50px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   height: 50px;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 24px;
   height: 24px;
   background-color: #2196F3;
   content: "";
   border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
   position: absolute;
   left: 0;
   right: 0;
   width: 10px;
   top: 0;
   margin: auto;
   height: 20px;
   background-color: #2196F3;
   content: "";
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
/* width: 300px;
   height: 300px; */
   width: 100%; height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
   position: absolute;
   left: 0;
   z-index: 1;
   font-size: 1em;
   top: 0;
   height: 100%;
   font-style: italic;
   font-weight: 500;
/* text-shadow: 1px 1px #fff; */
} 
</style>

Et maintenant, je mets quel script en résolu !!??!!??

Finalement je ferais un mix des 2, et ce sera le top …et résolu (pas trop le temps aujourd’hui )

[Franck_jeedom]

Merci pour ce magnifique widget
Je l’ai associé à Humidité … ils vont bien ensemble je trouve.
Si je peux abuser de vos compétences, possible d’ajouter aussi les statistiques à côté ?

[Gsxrnoir2001]

une autre solution pour toi peut-être !!!

[Franck_jeedom]

J’avoue bien aimer la goute d’eau
C’est quoi la bande de couleur au dessus ?

[Gsxrnoir2001]

c’est la qualité du signal, car c’est un module rfxcom

[ajja17orange]

Petite erreur que j’ai corrigé :

La var maxvalue du script "lignes 12) doit finir par 100.0

Car si tu n’as pas défini de max se sera 100 et non 0

Tu doit clôturer le widget </div>
Pour éviter que celui-ci ci interfére avec le reste de ta page « chaque ouverture de div doit comporter une fin »

Petit+
J’ai mis une variable couleur de jeedom pour les petit trait afin que le thème (nocturne,…) inverse afin de rendre visible.

[rennais35000]

Perdu dans le brouillard Breton
du coup on prend quel code ?

[Gsxrnoir2001]

Tu as le choix, celui de @ajja17orange, ( voir plus haut ), ou le miens qui est un mix des deux finalisé.

le mini démarre au niveau de la boule de mercure (plus d’amplitide)

les stats sont coloré.

photo:

script:

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
<!-- <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div> -->
     <div class="centered">
  <div class="tg-thermometer small" style="height: 120px;">
    <div class="draw-a"></div>
    <div class="draw-b"></div>
    <div class="meter">
      <div class="statistics">
        <div class="percent percent-a" style="color:white"></div>
        <div class="percent percent-c" style="color:white"></div>
        <div class="percent percent-e" style="color:white"></div>
      </div>
      <div class="mercury">
        <div class="percent-current" style="height:21px;font-size:16px;width:45px;padding-left:0px;padding-top:6px"></div>
        <div class="mask">
          <div class="bg-color"></div>
        </div>
      </div>
    </div>
  </div>
</div>
      <div class="value #hide_history#">
    <div class="col-xs-12 center-block">
      <span title='{{Min}}' class='tooltips'style="color:LightSkyBlue">#minHistoryValue#</span>|<span title='{{Moyenne}}' class='tooltips'style="color:white">#averageHistoryValue#</span>|<span title='{{Max}}' class='tooltips'style="color:LightSalmon">#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
  </div>
   </center>
  <script>
//		jeedom.cmd.update['#id#'] = function(_options){
        jeedom.cmd.addUpdateFunction('#id#',function(_options){
var value = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
var intNum = Math.trunc(value);
var valsign = '-';          
var decNum = Math.round((value - intNum) * 10);
		if(value < 0){
		    var intNum = (valsign+intNum*-1);
            var decNum = Math.round((decNum)*-1);
                     }          
var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 100.0;
var moyValue = Math.round((maxValue+minValue)/2);
var maxvaleur = maxValue + minValue;
var minNegative = 0;
		if(minValue < 0){
			var minNegative = minValue*-1;
            var maxvaleur = maxValue + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
var maxNegative = 0;
		if(maxValue < 0){
			var maxNegative = maxValue*-1;
            var maxvaleur = maxNegative + minNegative;
//			var moyValue = Math.floor((minValue+maxValue)/2);            
                        }
//var maxvaleur = maxValue + minNegative;
var valeurState = value + minNegative;
var jauge = Math.round( (_options.display_value - ('#minValue#')) * (100/('#maxValue#' - ('#minValue#'))) );
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du : '+_options.valueDate+'<br/>Collectée le : '+_options.collectDate);
        $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);  
//      $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(value+'#unite#');
        $('.cmd[data-cmd_id=#id#] .percent-current').empty().append(intNum).append('<span class="decNumclass">.'+decNum+'</span><span class="uniteclass">#unite#</span>');
       	$('.cmd[data-cmd_id=#id#] .mercury').css('height', jauge+'%');
        $('.cmd[data-cmd_id=#id#] .percent-a').text(maxValue+'#unite#');  
		$('.cmd[data-cmd_id=#id#] .percent-e').text(minValue+'#unite#');
		$('.cmd[data-cmd_id=#id#] .percent-c').text(moyValue+'#unite#');
        });
//		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
        </script>
  <style>
      /* commentaire  */
[data-cmd_id="#id#"] .decNumclass {
   font-size:12px;
   color: #323232 ;
/* position: absolute; */
   top: 15px;
   right: 10px;
   font-weight: 500;
}
[data-cmd_id="#id#"] .uniteclass {
   font-size:16px;
   color: #323232 ;
/* position: absolute; */
   font-weight: 500;
   top: 3px;
   right: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer {
   width: 100px;
   position: relative;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .mask {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .meter .bg-color {
   height: calc(132px - 57px);
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a {
   width: 20px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-a:after {
   width: 32px;
   height: 32px;
   left: -6px;
   bottom: -10px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:before {
   width: 6px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .draw-b:after {
   width: 14px;
   height: 14px;
}
[data-cmd_id="#id#"] .tg-thermometer.small .percent-b, .tg-thermometer.small .percent-d {
   display: none;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent {
/*   border-bottom: 1px solid rgba(0, 0, 0, 0.2);*/
  border-bottom: 1px solid var(--placeholder-color);
   text-align: right;
   position: absolute;
   width: 40px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-a {
   bottom: calc(100% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-c {
   bottom: calc(50% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .statistics .percent.percent-e {
   bottom: calc(0% - 2px);
}
[data-cmd_id="#id#"] .tg-thermometer .meter {
   width: 10px;
   margin: auto;
   left: 0;
   right: 0;
   height: calc(100% - 45px);
   top: 12px;
   position: absolute;
   background-color: #d6d6d6;
   border-radius: 10px 10px 0 0;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mercury {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #F44336;
   border-radius: 10px 10px 0 0;
   background: linear-gradient(0deg, #f44336, #3f51b5);
   transition: all .5s ease-in-out;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .mask {
   position: absolute;
   bottom: 0;
   overflow: hidden;
   width: 10px;
   height: 100%;
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .bg-color {
   position: absolute;
   width: 10px;
   height: calc(200px - 57px);
   background: linear-gradient(#F44336, #8BC34A, #2196F3);
/* background: linear-gradient(#2196F3, #8BC34A, #F44336); */
   bottom: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current {
   position: absolute;
   left: 0;
   top: 4px;
   transform: translateX(calc(-100% - 10px)) translateY(-60%);
   background-color: #fff;
   padding: 5px 0px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 3px 3px 6px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   font-weight: 500;
   font-size: 2.2em;
   color: #333;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:after {
   border-left: 8px solid white;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 2px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .meter .percent-current:before {
   border-left: 7px solid rgba(0, 0, 0, 0.2);
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   content: "";
   position: absolute;
   right: 0;
   transform: translateX(calc(100% - 0px));
   top: 0;
   bottom: 0;
   margin: auto;
   width: 0;
   height: 0;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a {
   background-color: #fff;
   height: calc(100% - 20px);
   width: 30px;
   margin: auto;
   position: relative;
   border-radius: 20px 20px 0 0;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:before {
   width: 100%;
   bottom: 0px;
   left: 0;
   position: absolute;
   height: 50px;
   background-color: #fff;
   content: "";
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-a:after {
   content: "";
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: #fff;
   left: -10px;
   bottom: -20px;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0, 0, 0.2);
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b {
   position: absolute;
   width: 50px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   height: 50px;
   z-index: 1;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:after {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 24px;
   height: 24px;
   background-color: #2196F3;
   content: "";
   border-radius: 50%;
}
[data-cmd_id="#id#"] .tg-thermometer .draw-b:before {
   position: absolute;
   left: 0;
   right: 0;
   width: 10px;
   top: 0;
   margin: auto;
   height: 20px;
   background-color: #2196F3;
   content: "";
   border-radius: 10px 10px 0 0;
}
[data-cmd_id="#id#"] .centered {
/**  position: absolute !important; **/
   position: relative;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
/* width: 300px;
   height: 300px; */
   width: 100%; height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
}
[data-cmd_id="#id#"] .tg-thermometer .statistics {
   position: absolute;
   left: 0;
   z-index: 1;
   font-size: 8px;
   top: 0;
   height: 100%;
   font-style: italic;
   font-weight: 500;
/* text-shadow: 1px 1px #fff; */
} 
</style>
</div>