Widget multi utilisation ko

Utilisation du core de Jeedom Widgets
1

Bonjour à tous,
Je cherche a adapter un widget pour afficher une valeur numérique dans une zone multi paramétrage (taille, couleur,…).
J’ai réussi a faire quelque chose qui fonctionne…
Mais quand je l’applique à deux valeurs sur une tuile …badaboum… ça marche plus.

Quelqu’un pourrait-il regarder ce code et m’expliquer ce qui ne va pas?

Merci d’avance pour votre aide!!!
Silkarion

C ok…

Screenshot_20250215_005244_Chrome
Screenshot_20250215_005244_Chrome513×585 43 KB

C plus ok

Screenshot_20250215_005332_Chrome
Screenshot_20250215_005332_Chrome792×722 46.6 KB

Le code

<template>	

        <div>*************************************</div>
        <div>Ce widget permet de gérer l'affichage d'un numérique dans une tuile </div>
        <div>suivant 3 états associés à 2 limites (basse et haute) </div>
        <div></div>
  		<div>|---State0---/ValueMinTest/---State1---/ValueMaxTest/---State2---|</div>
  		<div></div>
        <div>Pour ne pas activer une des limite, ne pas la renseigner...</div>
        <div>Affiche jusque 2 décimales après la virgule</div>
        <div></div>  
        <div>** Parametres de forme **</div>
		<div>SizeWidth : largeur du widget en px (défaut : 100px)</div> 
		<div>SizeHeight : hauteur du widget en px (défaut : 30px)</div>  
        <div>Radius1 : arrondi 1 en px ou % (défaut : 50%)</div>
        <div>Radius2 : arrondi 2 en px ou % (défaut : Radius1)</div>
        <div>Radius3 : arrondi 2 en px ou % (défaut : Radius1)</div>
        <div>Radius4 : arrondi 2 en px ou % (défaut : Radius1)</div>
        <div></div>
        <div></div>  
 		<div>** Parametres de texte **</div>
        <div>FontRatio : ratio de la taille du texte</div>
        <div></div>
        <div></div>
  		<div>** Parametres de couleur **</div>
        <div>FontColorState0 : Couleur du texte pour le state 0 (default : inherit)</div>
        <div>FontColorState1 : Couleur du texte pour le state 1 (default : inherit)</div>  
        <div>FontColorState2 : Couleur du texte pour le state 2 (default : inherit)</div>  
        <div>ColorState0 : Couleur du fond pour le state 0 (default : red)</div>
        <div>ColorState1 : Couleur du fond pour le state 1 (default : green)</div>  
        <div>ColorState2 : Couleur du fond pour le state 2 (default : red)</div>  
		<div>ColorDegState0 : Couleur du dégradé pour le state 0 (default : inherit)</div>
        <div>ColorDegState1 : Couleur du dégradé pour le state 1 (default : inherit)</div>  
        <div>ColorDegState2 : Couleur du dégradé pour le state 2 (default : inherit)</div>  
        <div>ColorRotation : rotation en degres du dégradé de couleur (défaut : 0deg)</div>  
        <div></div>
        <div></div>
  		<div>** Parametres de test **</div>	
    	<div>ValueMinTest : valeur de sanction basse (defaut #min# ou 0)</div> 
		<div>ValueMaxTest : valeur de sanction haute (defaut #max# ou 100)</div> 
  		<div>Si l'un des deux n'est pas activé, la valeur prise est #min# ou #max# ce qui supprime le statut 0 ou statut 2 </div>
        <div></div>
     
  
    </template>	

<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">

<!-- ################ Round_V4 ################
 taille = taille * 90px*90px (1 | 90px*90px par défaut)
 ********** Paramètres Optionnels ***********
 12 couleurs: black, blue, brown, green, grey, orange, pink, purple, red, sand, slategrey, yellow **
 couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
 reflet = a&ffiche un reflet sur le widget
 textshadow = Police Ombrée
 fontcolor = Change la couleur de la police
 ########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->

	<div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
      
</div>

	<div id="data_display" class="content-lg">
    	<div id="value_content">
            <div id="data_value"></div>
    		<div id="data_unit">#unite#</div>
    		<div id="value_border"></div>
    </div>
</div>

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

  <span class="timeCmd label label-default" data-type="info"></span>

<script>

    jeedom.cmd.update['#id#'] = function(_options){

    var cmd = $('.cmd[data-cmd_id=#id#]');

    var val#uid# = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(2) : parseInt(_options.display_value);

	var sizeWidth#uid# = ('#SizeWidth#' != '#'+'SizeWidth#') ? "#SizeWidth#" : "10px";
		if (sizeWidth#uid# != '') {
			document.documentElement.style.setProperty('--element-sizeWidth#uid#', sizeWidth#uid#);
		} else {
			document.documentElement.style.setProperty('--element-sizeWidth#uid#', "10px");
		}
      
	var sizeHeight#uid# = ('#SizeHeight#' != '#'+'SizeHeight#') ? "#SizeHeight#" : "10px";
		if (sizeHeight#uid# != '') {			
          document.documentElement.style.setProperty('--element-sizeHeight#uid#', sizeHeight#uid#);
		} else {
			document.documentElement.style.setProperty('--element-sizeHeight#uid#', "10px");
		}
      
	var radius1#uid# = ('#Radius1#' != '#'+'Radius1#') ? "#Radius1#" : "50%";
		if (radius1#uid# != '') {
			document.documentElement.style.setProperty('--radius1#uid#', radius1#uid#);
		} else {
			document.documentElement.style.setProperty('--radius1#uid#', "50%");
		}
      
	var radius2#uid# = ('#Radius2#' != '#'+'Radius2#') ? "#Radius2#" : radius1#uid#;
		if (radius2#uid# != '') {
			document.documentElement.style.setProperty('--radius2#uid#', radius2#uid#);
		} else {
			document.documentElement.style.setProperty('--radius2#uid#', radius1#uid#);
		}
      
	var radius3#uid# = ('#Radius3#' != '#'+'Radius3#') ? "#Radius3#" : radius1#uid#;
		if (radius3#uid# != '') {
			document.documentElement.style.setProperty('--radius3#uid#', radius3#uid#);
		} else {
			document.documentElement.style.setProperty('--radius3#uid#', radius1#uid#);
		}

	var radius4#uid# = ('#Radius4#' != '#'+'Radius4#') ? "#Radius4#" : radius1#uid#;
		if (radius4#uid# != '') {
			document.documentElement.style.setProperty('--radius4#uid#', radius4#uid#);
		} else {
			document.documentElement.style.setProperty('--radius4#uid#', radius1#uid#);
		}

 	//Récupération des valeurs min max de l'item
    const ValMin#uid# = ('#minValue#' !='#'+'minValue#') ? parseFloat('#minValue#') : 0.0;
	const ValMax#uid# = ('#maxValue#' !='#'+'maxValue#') ? parseFloat('#maxValue#') : 100.0; 
	//Définition des min max de test
    var ValueMinTest#uid# = (is_numeric('#ValueMinTest#')) ? parseFloat('#ValueMinTest#') : ValMin#uid#; 
    var ValueMaxTest#uid# = (is_numeric('#ValueMaxTest#')) ? parseFloat('#ValueMaxTest#') : ValMax#uid#; 

    var fontRatio#uid# = (is_numeric('#FontRatio#')) ? parseFloat('#FontRatio#') : 1.0; 
    document.documentElement.style.setProperty('--fontRatio#uid#', fontRatio#uid#);
      
	var fontColorState0#uid# = ('#FontColorState0#' != '#'+'FontColorState0#') ? "#FontColorState0#" : "inherit";
		if (fontColorState0#uid# != '') {
			document.documentElement.style.setProperty('--fontColorState0#uid#', fontColorState0#uid#);
		} else {
			document.documentElement.style.setProperty('--fontColorState0#uid#', "inherit");
		}
      
     var fontColorState1#uid# = ('#FontColorState1#' != '#'+'FontColorState1#') ? "#FontColorState1#" : "inherit";
		if (fontColorState1#uid# != '') {
			document.documentElement.style.setProperty('--fontColorState1#uid#', fontColorState1#uid#);
		} else {
			document.documentElement.style.setProperty('--fontColorState1#uid#', "inherit");
		}       
      
      var fontColorState2#uid# = ('#FontColorState2#' != '#'+'FontColorState2#') ? "#FontColorState2#" : "inherit";
		if (fontColorState2#uid# != '') {
			document.documentElement.style.setProperty('--fontColorState2#uid#', fontColorState2#uid#);
		} else {
			document.documentElement.style.setProperty('--fontColorState2#uid#', "inherit");
		}      
      
 	var color1State0#uid# = ('#Color1State0#' != '#'+'Color1State0#') ? "#Color1State0#" : "red";
		if (color1State0#uid# != '') {
			document.documentElement.style.setProperty('--color1State0#uid#', color1State0#uid#);
		} else {
			document.documentElement.style.setProperty('--color1State0#uid#', "red");
		}      

    var color1State1#uid# = ('#Color1State1#' != '#'+'Color1State1#') ? "#Color1State1#" : "green";
		if (color1State1#uid# != '') {			
            document.documentElement.style.setProperty('--color1State1#uid#', color1State1#uid#);
		} else {
			document.documentElement.style.setProperty('--color1State1#uid#', "green");
		}      
      
    var color1State2#uid# = ('#Color1State2#' != '#'+'Color1State2#') ? "#Color1State2#" : "red";
		if (color1State2#uid# != '') {
			document.documentElement.style.setProperty('--color1State2#uid#', color1State2#uid#);
		} else {
			document.documentElement.style.setProperty('--color1State2#uid#', "red");
		}            
      
 	var color2State0#uid# = ('#Color2State0#' != '#'+'Color2State0#') ? "#Color2State0#" : "red";
		if (color2State0#uid# != '') {
			document.documentElement.style.setProperty('--color2State0#uid#', color2State0#uid#);
		} else {
			document.documentElement.style.setProperty('--color2State0#uid#', "red");
		}      

    var color2State1#uid# = ('#Color2State1#' != '#'+'Color2State1#') ? "#Color2State1#" : "green";
		if (color2State1#uid# != '') {			
            document.documentElement.style.setProperty('--color2State1#uid#', color2State1#uid#);
		} else {
			document.documentElement.style.setProperty('--color2State1#uid#', "green");
		}      
      
    var color2State2#uid# = ('#Color2State2#' != '#'+'Color2State2#') ? "#Color2State2#" : "red";
		if (color2State2#uid# != '') {
			document.documentElement.style.setProperty('--color2State2#uid#', color2State2#uid#);
		} else {
			document.documentElement.style.setProperty('--color2State2#uid#', "red");
		}
      
      var colorRotation#uid# = ('#ColorRotation#' != '#'+'ColorRotation#') ? "#ColorRotation#" : "0deg";
		if (colorRotation#uid# != '') {
			document.documentElement.style.setProperty('--colorRotation#uid#', colorRotation#uid#);
		} else {
			document.documentElement.style.setProperty('--colorRotation#uid#', "0deg");
		}      
      
      
   if   (val#uid# < ValueMinTest#uid#){
     document.documentElement.style.setProperty('--fontColor#uid#', 'var(--fontColorState0#uid#)');
     document.documentElement.style.setProperty('--color1#uid#', 'var(--color1State0#uid#)');
     document.documentElement.style.setProperty('--color2#uid#', 'var(--color2State0#uid#)');
     
   }  else if   (val#uid# <= ValueMaxTest#uid#){
     document.documentElement.style.setProperty('--fontColor#uid#', 'var(--fontColorState1#uid#)');
     document.documentElement.style.setProperty('--color1#uid#', 'var(--color1State1#uid#)');
     document.documentElement.style.setProperty('--color2#uid#', 'var(--color2State1#uid#)');

   }else if   (val#uid# > ValueMaxTest#uid#){
     document.documentElement.style.setProperty('--fontColor#uid#', 'var(--fontColorState2#uid#)');
     document.documentElement.style.setProperty('--color1#uid#', 'var(--color1State2#uid#)');
     document.documentElement.style.setProperty('--color2#uid#', 'var(--color2State2#uid#)');
     
   } 
      
    cmd.find('#data_value').text(val#uid#);        
 
 //*************************    
      
    cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');

    if ('#time#' == 'duree') {
      jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
      }

    else if ('#time#' == 'date') {

      let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
   	  let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
	  let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
      let time = "à "+t[3]+":"+t[4];

      cmd.find('.timeCmd').html(format+'<br>'+time);
      }

      else if ('#time#' == 'heure') 
           {
              let date = new Date(_options.valueDate.replace(' ', 'T'));
              let t = _options.valueDate.split(/[- :]/);
              let time = "à "+t[3]+":"+t[4]+":"+t[5];
              cmd.find('.timeCmd').html(time);
      	 	}     
      
	}

    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

<style>

:root{
  
  }  
  
  
  
  
#data_value{
  
    /*position:absolute;*/
  font-size: calc(100% * (var(--fontRatio#uid#))/(1)) !important;
  color: var(--fontColor#uid#) !important;
text-shadow: 1px 1px 1px #6b6b6b;

 
  }
#data_unit {
   position:relative;
   left: 2px;
   z-index:2;
   font-size: calc(100% * (var(--fontRatio#uid#))/(1.2)) !important;
   color: var(--fontColor#uid#) !important;
  text-shadow: 1px 1px 1px #6b6b6b;
  }
#value_content{
  /* content */
  position:absolute;
  
  width:   var(--element-sizeWidth#uid#) !important;
  height:  var(--element-sizeHeight#uid#) !important;
  border-radius: calc(var(--radius1#uid#)*1) var(--radius2#uid#) var(--radius3#uid#) var(--radius4#uid#) !important;
  background: linear-gradient(var(--colorRotation#uid#), var(--color2#uid#), var(--color1#uid#)) !important;
      
  border: 4px solid #767B91 !important;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
 /* font-size: calc(100% * (var(--fontRatio#uid#))/(1)) !important;*/
  
  }
  
  #value_border {
  /* content */
  position:absolute;
  
    width:   calc(var(--element-sizeWidth#uid#)) !important;
    height:  calc(var(--element-sizeHeight#uid#)) !important;  
  border-radius: calc(var(--radius1#uid#)*1) var(--radius2#uid#) var(--radius3#uid#) var(--radius4#uid#) !important;

  border: 2px solid #666F84 !important;

 /*  z-index:2;*/
  
 /* font-size: calc(100% * (var(--fontRatio#uid#))/(1)) !important;*/
  
  }
  
#data_display {
  /* Container */
  	position:relative;
  	color:#F0F0F0;
    width:   calc(var(--element-sizeWidth#uid#)) !important;
    height:  calc(var(--element-sizeHeight#uid#)) !important;  
  }

</style>

</div>
2

Bonjour,

Il faut rendre unique les IDs en ajoutant #uid# comme ceci

<div id="data_display#uid#" class="content-lg">
    <div id="value_content#uid#">
        <div id="data_value#uid#"></div>
        <div id="data_unit#uid#">#unite#</div>
        <div id="value_border#uid#"></div>
</div>

image

3

Le code modifié ( j’ai modifié les tailles par défaut également )

<template>	

    <div>*************************************</div>
    <div>Ce widget permet de gérer l'affichage d'un numérique dans une tuile </div>
    <div>suivant 3 états associés à 2 limites (basse et haute) </div>
    <div></div>
      <div>|---State0---/ValueMinTest/---State1---/ValueMaxTest/---State2---|</div>
      <div></div>
    <div>Pour ne pas activer une des limite, ne pas la renseigner...</div>
    <div>Affiche jusque 2 décimales après la virgule</div>
    <div></div>  
    <div>** Parametres de forme **</div>
    <div>SizeWidth : largeur du widget en px (défaut : 100px)</div> 
    <div>SizeHeight : hauteur du widget en px (défaut : 30px)</div>  
    <div>Radius1 : arrondi 1 en px ou % (défaut : 50%)</div>
    <div>Radius2 : arrondi 2 en px ou % (défaut : Radius1)</div>
    <div>Radius3 : arrondi 2 en px ou % (défaut : Radius1)</div>
    <div>Radius4 : arrondi 2 en px ou % (défaut : Radius1)</div>
    <div></div>
    <div></div>  
     <div>** Parametres de texte **</div>
    <div>FontRatio : ratio de la taille du texte</div>
    <div></div>
    <div></div>
      <div>** Parametres de couleur **</div>
    <div>FontColorState0 : Couleur du texte pour le state 0 (default : inherit)</div>
    <div>FontColorState1 : Couleur du texte pour le state 1 (default : inherit)</div>  
    <div>FontColorState2 : Couleur du texte pour le state 2 (default : inherit)</div>  
    <div>ColorState0 : Couleur du fond pour le state 0 (default : red)</div>
    <div>ColorState1 : Couleur du fond pour le state 1 (default : green)</div>  
    <div>ColorState2 : Couleur du fond pour le state 2 (default : red)</div>  
    <div>ColorDegState0 : Couleur du dégradé pour le state 0 (default : inherit)</div>
    <div>ColorDegState1 : Couleur du dégradé pour le state 1 (default : inherit)</div>  
    <div>ColorDegState2 : Couleur du dégradé pour le state 2 (default : inherit)</div>  
    <div>ColorRotation : rotation en degres du dégradé de couleur (défaut : 0deg)</div>  
    <div></div>
    <div></div>
      <div>** Parametres de test **</div>	
    <div>ValueMinTest : valeur de sanction basse (defaut #min# ou 0)</div> 
    <div>ValueMaxTest : valeur de sanction haute (defaut #max# ou 100)</div> 
      <div>Si l'un des deux n'est pas activé, la valeur prise est #min# ou #max# ce qui supprime le statut 0 ou statut 2 </div>
    <div></div>
 

</template>	

<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">

<!-- ################ Round_V4 ################
taille = taille * 90px*90px (1 | 90px*90px par défaut)
********** Paramètres Optionnels ***********
12 couleurs: black, blue, brown, green, grey, orange, pink, purple, red, sand, slategrey, yellow **
couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
reflet = a&ffiche un reflet sur le widget
textshadow = Police Ombrée
fontcolor = Change la couleur de la police
########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->

<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
  
</div>

<div id="data_display#uid#" class="content-lg">
    <div id="value_content#uid#">
        <div id="data_value#uid#"></div>
        <div id="data_unit#uid#">#unite#</div>
        <div id="value_border#uid#"></div>
</div>
</div>

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

<span class="timeCmd label label-default" data-type="info"></span>

<script>

jeedom.cmd.update['#id#'] = function(_options){

var cmd = $('.cmd[data-cmd_id=#id#]');

var val#uid# = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(2) : parseInt(_options.display_value);

var sizeWidth#uid# = ('#SizeWidth#' != '#'+'SizeWidth#') ? "#SizeWidth#" : "100px";
    if (sizeWidth#uid# != '') {
        document.documentElement.style.setProperty('--element-sizeWidth#uid#', sizeWidth#uid#);
    } else {
        document.documentElement.style.setProperty('--element-sizeWidth#uid#', "100px");
    }
  
var sizeHeight#uid# = ('#SizeHeight#' != '#'+'SizeHeight#') ? "#SizeHeight#" : "30px";
    if (sizeHeight#uid# != '') {			
      document.documentElement.style.setProperty('--element-sizeHeight#uid#', sizeHeight#uid#);
    } else {
        document.documentElement.style.setProperty('--element-sizeHeight#uid#', "30px");
    }
  
var radius1#uid# = ('#Radius1#' != '#'+'Radius1#') ? "#Radius1#" : "10%";
    if (radius1#uid# != '') {
        document.documentElement.style.setProperty('--radius1#uid#', radius1#uid#);
    } else {
        document.documentElement.style.setProperty('--radius1#uid#', "10%");
    }
  
var radius2#uid# = ('#Radius2#' != '#'+'Radius2#') ? "#Radius2#" : radius1#uid#;
    if (radius2#uid# != '') {
        document.documentElement.style.setProperty('--radius2#uid#', radius2#uid#);
    } else {
        document.documentElement.style.setProperty('--radius2#uid#', radius1#uid#);
    }
  
var radius3#uid# = ('#Radius3#' != '#'+'Radius3#') ? "#Radius3#" : radius1#uid#;
    if (radius3#uid# != '') {
        document.documentElement.style.setProperty('--radius3#uid#', radius3#uid#);
    } else {
        document.documentElement.style.setProperty('--radius3#uid#', radius1#uid#);
    }

var radius4#uid# = ('#Radius4#' != '#'+'Radius4#') ? "#Radius4#" : radius1#uid#;
    if (radius4#uid# != '') {
        document.documentElement.style.setProperty('--radius4#uid#', radius4#uid#);
    } else {
        document.documentElement.style.setProperty('--radius4#uid#', radius1#uid#);
    }

 //Récupération des valeurs min max de l'item
const ValMin#uid# = ('#minValue#' !='#'+'minValue#') ? parseFloat('#minValue#') : 0.0;
const ValMax#uid# = ('#maxValue#' !='#'+'maxValue#') ? parseFloat('#maxValue#') : 100.0; 
//Définition des min max de test
var ValueMinTest#uid# = (is_numeric('#ValueMinTest#')) ? parseFloat('#ValueMinTest#') : ValMin#uid#; 
var ValueMaxTest#uid# = (is_numeric('#ValueMaxTest#')) ? parseFloat('#ValueMaxTest#') : ValMax#uid#; 

var fontRatio#uid# = (is_numeric('#FontRatio#')) ? parseFloat('#FontRatio#') : 1.0; 
document.documentElement.style.setProperty('--fontRatio#uid#', fontRatio#uid#);
  
var fontColorState0#uid# = ('#FontColorState0#' != '#'+'FontColorState0#') ? "#FontColorState0#" : "inherit";
    if (fontColorState0#uid# != '') {
        document.documentElement.style.setProperty('--fontColorState0#uid#', fontColorState0#uid#);
    } else {
        document.documentElement.style.setProperty('--fontColorState0#uid#', "inherit");
    }
  
 var fontColorState1#uid# = ('#FontColorState1#' != '#'+'FontColorState1#') ? "#FontColorState1#" : "inherit";
    if (fontColorState1#uid# != '') {
        document.documentElement.style.setProperty('--fontColorState1#uid#', fontColorState1#uid#);
    } else {
        document.documentElement.style.setProperty('--fontColorState1#uid#', "inherit");
    }       
  
  var fontColorState2#uid# = ('#FontColorState2#' != '#'+'FontColorState2#') ? "#FontColorState2#" : "inherit";
    if (fontColorState2#uid# != '') {
        document.documentElement.style.setProperty('--fontColorState2#uid#', fontColorState2#uid#);
    } else {
        document.documentElement.style.setProperty('--fontColorState2#uid#', "inherit");
    }      
  
 var color1State0#uid# = ('#Color1State0#' != '#'+'Color1State0#') ? "#Color1State0#" : "red";
    if (color1State0#uid# != '') {
        document.documentElement.style.setProperty('--color1State0#uid#', color1State0#uid#);
    } else {
        document.documentElement.style.setProperty('--color1State0#uid#', "red");
    }      

var color1State1#uid# = ('#Color1State1#' != '#'+'Color1State1#') ? "#Color1State1#" : "green";
    if (color1State1#uid# != '') {			
        document.documentElement.style.setProperty('--color1State1#uid#', color1State1#uid#);
    } else {
        document.documentElement.style.setProperty('--color1State1#uid#', "green");
    }      
  
var color1State2#uid# = ('#Color1State2#' != '#'+'Color1State2#') ? "#Color1State2#" : "red";
    if (color1State2#uid# != '') {
        document.documentElement.style.setProperty('--color1State2#uid#', color1State2#uid#);
    } else {
        document.documentElement.style.setProperty('--color1State2#uid#', "red");
    }            
  
 var color2State0#uid# = ('#Color2State0#' != '#'+'Color2State0#') ? "#Color2State0#" : "red";
    if (color2State0#uid# != '') {
        document.documentElement.style.setProperty('--color2State0#uid#', color2State0#uid#);
    } else {
        document.documentElement.style.setProperty('--color2State0#uid#', "red");
    }      

var color2State1#uid# = ('#Color2State1#' != '#'+'Color2State1#') ? "#Color2State1#" : "green";
    if (color2State1#uid# != '') {			
        document.documentElement.style.setProperty('--color2State1#uid#', color2State1#uid#);
    } else {
        document.documentElement.style.setProperty('--color2State1#uid#', "green");
    }      
  
var color2State2#uid# = ('#Color2State2#' != '#'+'Color2State2#') ? "#Color2State2#" : "red";
    if (color2State2#uid# != '') {
        document.documentElement.style.setProperty('--color2State2#uid#', color2State2#uid#);
    } else {
        document.documentElement.style.setProperty('--color2State2#uid#', "red");
    }
  
  var colorRotation#uid# = ('#ColorRotation#' != '#'+'ColorRotation#') ? "#ColorRotation#" : "0deg";
    if (colorRotation#uid# != '') {
        document.documentElement.style.setProperty('--colorRotation#uid#', colorRotation#uid#);
    } else {
        document.documentElement.style.setProperty('--colorRotation#uid#', "0deg");
    }      
  
  
if   (val#uid# < ValueMinTest#uid#){
 document.documentElement.style.setProperty('--fontColor#uid#', 'var(--fontColorState0#uid#)');
 document.documentElement.style.setProperty('--color1#uid#', 'var(--color1State0#uid#)');
 document.documentElement.style.setProperty('--color2#uid#', 'var(--color2State0#uid#)');
 
}  else if   (val#uid# <= ValueMaxTest#uid#){
 document.documentElement.style.setProperty('--fontColor#uid#', 'var(--fontColorState1#uid#)');
 document.documentElement.style.setProperty('--color1#uid#', 'var(--color1State1#uid#)');
 document.documentElement.style.setProperty('--color2#uid#', 'var(--color2State1#uid#)');

}else if   (val#uid# > ValueMaxTest#uid#){
 document.documentElement.style.setProperty('--fontColor#uid#', 'var(--fontColorState2#uid#)');
 document.documentElement.style.setProperty('--color1#uid#', 'var(--color1State2#uid#)');
 document.documentElement.style.setProperty('--color2#uid#', 'var(--color2State2#uid#)');
 
} 
  
cmd.find('#data_value#uid#').text(val#uid#);        

//*************************    
  
cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');

if ('#time#' == 'duree') {
  jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
  }

else if ('#time#' == 'date') {

  let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
     let date = new Date(_options.valueDate.replace(' ', 'T'));
  let t = _options.valueDate.split(/[- :]/);
  let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
  let time = "à "+t[3]+":"+t[4];

  cmd.find('.timeCmd').html(format+'<br>'+time);
  }

  else if ('#time#' == 'heure') 
       {
          let date = new Date(_options.valueDate.replace(' ', 'T'));
          let t = _options.valueDate.split(/[- :]/);
          let time = "à "+t[3]+":"+t[4]+":"+t[5];
          cmd.find('.timeCmd').html(time);
           }     
  
}

jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

<style>

:root{

}  




#data_value#uid#{

/*position:absolute;*/
font-size: calc(100% * (var(--fontRatio#uid#))/(1)) !important;
color: var(--fontColor#uid#) !important;
text-shadow: 1px 1px 1px #6b6b6b;


}
#data_unit#uid# {
position:relative;
left: 2px;
z-index:2;
font-size: calc(100% * (var(--fontRatio#uid#))/(1.2)) !important;
color: var(--fontColor#uid#) !important;
text-shadow: 1px 1px 1px #6b6b6b;
}
#value_content#uid#{
/* content */
position:absolute;

width:   var(--element-sizeWidth#uid#) !important;
height:  var(--element-sizeHeight#uid#) !important;
border-radius: calc(var(--radius1#uid#)*1) var(--radius2#uid#) var(--radius3#uid#) var(--radius4#uid#) !important;
background: linear-gradient(var(--colorRotation#uid#), var(--color2#uid#), var(--color1#uid#)) !important;
  
border: 4px solid #767B91 !important;

display: inline-flex;
align-items: center;
justify-content: center;

/* font-size: calc(100% * (var(--fontRatio#uid#))/(1)) !important;*/

}

#value_border#uid# {
/* content */
position:absolute;

width:   calc(var(--element-sizeWidth#uid#)) !important;
height:  calc(var(--element-sizeHeight#uid#)) !important;  
border-radius: calc(var(--radius1#uid#)*1) var(--radius2#uid#) var(--radius3#uid#) var(--radius4#uid#) !important;

border: 2px solid #666F84 !important;

/*  z-index:2;*/

/* font-size: calc(100% * (var(--fontRatio#uid#))/(1)) !important;*/

}

#data_display#uid# {
/* Container */
  position:relative;
  color:#F0F0F0;
width:   calc(var(--element-sizeWidth#uid#)) !important;
height:  calc(var(--element-sizeHeight#uid#)) !important;  
}

</style>

</div>
4

Grand merci!
Je commence à comprendre les rouages :grin:
Bon week end!
Silkarion

5

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.