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

Tags: #<Tag:0x00007f5928a031a0>

D’abord un grand merci aux auteurs de ce magnifique Template.

dont la source de départ est ici : https://forum.jeedom.com/viewtopic.php?f=29&t=45026&p=725738#p725738

Voici donc ma maigre contribution.

Alors voilà comme j’ai pas mal de jauges avec un équipement solaire
et qu’il est plus cool lorsque l’on charge / décharge une batterie, injecte ou consomme du courant j’ai eu l’idée de prendre comme convention genre la la couleur est verte en charge et rouge en décharge … blanc quand on est a zéro …

je vous laisse inventer la suite.

il vous faudra bien sur indiquer le nom de chaques commandes et les conditions
dans la fonction ajoutée.

la suite serait d’indiquer ces conditions dans le options de chaques commandes

plutôt qu’un dur dans le fichier.

cmd.info.numeric.gaugeIMG_V3.html version modifier

<!-- Mise à jour V3 et optimisation
du widget dashboard.info.numeric.gaugeIMG 
	Développé par thecrow06   

ajout de changement de couleur en fonction des valeures des commandes.

les modifs ont des commentaires // xxx OLIVE
-->

<div class="cmd tooltips #history# cmd-widget gaugeIMG#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
		<div class="gaugeIMGdisplay#id#">
			<img id="IMGgauge#id#" class="IMGgauge#id#" alt="Fond" >
          	<span class="minvalue_gauge#id#" id="minvalue#id#"></span>
          	<span class="midvalue_gauge#id#" id="midvalue#id#"></span>
          	<span class="quartvalue_gauge#id#" id="quartvalue#id#"></span>
          	<span class="troisquartvalue_gauge#id#" id="troisquartvalue#id#"></span>
    		<span class="maxvalue_gauge#id#" id="maxvalue#id#"></span>
          	<span class="state_gauge#id#"></span> 
          	<span class="unite_gauge#id#">#unite#</span>
        <div class="cmdStats #hide_history#">
  <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
		</div>
		<div id="gauge#id#" class="indicator"></div>
  
<script> 
  
  // START ADD BY OLIVE
  
  function changecolor(val, name){
    
            val = parseInt(val, 10);
            var colJauge ="blanche";
    
            if(name == 'Batterie'){
                if (val > 0)  {colJauge="rouge";}
                if (val < 0)  {colJauge="verte";}
                if (val == 0)  {colJauge="blanche";} 
                document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
            }
            if(name == 'Edf'){
                if (val > 0)  {colJauge="rouge";}
                if (val < 0)  {colJauge="verte";} 
                if (val == 0)  {colJauge="blanche";} 
                document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
            }      

            if(name == 'Solaire'){
                if (val > 0)  {colJauge="verte";}
                document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
            }       
            if(name == 'insert'){
                if (val >= 80)  {colJauge="rouge";}
                if (val <  80)  {colJauge="verte";}  
                document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
            }    

    
  } // END ADD BY OLIVE

  var valMin#id# = is_numeric('#mini#') ? parseFloat('#mini#'):#minValue#;
  var valMax#id# = is_numeric('#maxi#') ? parseFloat('#maxi#'):#maxValue#;
  
    var midvalue = Math.round((valMax#id# + valMin#id#)*50)/100;
    var quartvalue = Math.round((valMin#id# + midvalue)*50)/100;
    var troisquartvalue = Math.round((midvalue + valMax#id#)*50)/100;
    $('#minvalue#id#').text(valMin#id#);
    $('#midvalue#id#').text(midvalue);
    $('#quartvalue#id#').text(quartvalue);
    $('#troisquartvalue#id#').text(troisquartvalue);
    $('#maxvalue#id#').text(valMax#id#);
  
    jeedom.cmd.update['#id#'] = function(_options){     
    var val = _options.display_value;
    var plage = valMax#id# - valMin#id#;
    var angle = ''; 
      
changecolor(val,"#name#"); // ADD BY OLIVE
      
      
    if (plage == 0) angle = -70;
    else if (valMin#id# < valMax#id#)  {
      if (val < valMin#id#) angle = -10;
      else if (val > valMax#id#) angle = 232;
      else angle = (val - valMin#id#) * 222 / plage;
    } else {
      if (val < valMax#id#) angle = 232;
      else if (val > valMin#id#) angle = -10;
      else angle = (val - valMin#id#) * 222 / plage;
    }
    $('#gauge#id#.indicator').css( {'-webkit-transform':'rotate('+angle+'deg)','-moz-transform':'rotate('+angle+'deg)','-ms-transform':'rotate('+angle+'deg)','-o-transform':'rotate('+angle+'deg)','transform':'rotate('+angle+'deg)'});
    $('.cmd[data-cmd_id=#id#] .state_gauge#id#').text(_options.display_value);
    $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  
  	var colJauge = ('#jauge#' !='#'+'jauge#') ? "#jauge#":"bleue";
  	var colAiguille = ('#aiguille#' !='#'+'aiguille#') ? "#aiguille#":"blanche";
      
	var val=#state#; //ADD BY OLIVE
 
    
	document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";  
      
changecolor(val,"#name#");      /// ADD BY OLIVE
      
  	document.getElementById('gauge#id#').style.backgroundImage="url(./data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/center"+colAiguille+".png)";
  
	if ('#petit#' == 1) {
    	$('div.gaugeIMG#id#').css('width','90px');
      	$('div.gaugeIMG#id#').css('height','110px');
      	$('div.gaugeIMGdisplay#id#').css('left','2px');
      	$('span.state_gauge#id#').css('font-size','17px');
      	$('span.state_gauge#id#').css('top','54px');
      	$('span.state_gauge#id#').css('right','24px');
      	$('span.unite_gauge#id#').css('font-size','6px');
      	$('span.unite_gauge#id#').css('top','43px');
      	$('span.minvalue_gauge#id#').css('font-size','0.5em');
      	$('span.minvalue_gauge#id#').css('top','46px');
      	$('span.minvalue_gauge#id#').css('left','15px');      
      	$('span.maxvalue_gauge#id#').css('font-size','0.5em');
      	$('span.maxvalue_gauge#id#').css('top','46px');
      	$('span.maxvalue_gauge#id#').css('right','15px');      
      	$('span.midvalue_gauge#id#').css('font-size','0.5em');
      	$('span.midvalue_gauge#id#').css('top','12px');
      	$('span.quartvalue_gauge#id#').css('font-size','0.5em');
      	$('span.quartvalue_gauge#id#').css('top','25px');
      	$('span.quartvalue_gauge#id#').css('left','17px');      
      	$('span.troisquartvalue_gauge#id#').css('font-size','0.5em');
      	$('span.troisquartvalue_gauge#id#').css('top','25px');
      	$('span.troisquartvalue_gauge#id#').css('right','17px');      
      	$('#gauge#id#').css('width','48px');
      	$('#gauge#id#').css('height','48px');
      	$('#gauge#id#').css('left','21px');
      	$('#gauge#id#').css('top','31px');
      	$('img.IMGgauge#id#').css('width','80px');
      	$('img.IMGgauge#id#').css('height','80px');
    }
</script>
<style>
@font-face {
    font-family: "Digital7";
  	src:	url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/font/digital7.ttf") format("truetype");
  	font-weight:normal;
  	font-style:normal;
}
span.state_gauge#id# {
    font-family:"Digital7"; 
    font-size:26px;
  	position:absolute;
  	top:83px;
  	right:31px;
  }
span.unite_gauge#id# {
    font-size:10px;
    width:100%;
  	top:67px;
    position:absolute;
    display:block;
  }
span.minvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	left:22px;
  }
span.maxvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	right:22px;
  }  
span.midvalue_gauge#id# {
  	display:block;
 	width:100%;
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:18px;
  }
span.quartvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	left:26px;
  }
span.troisquartvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	right:26px;
  }
img.IMGgauge#id# {
	width:120px;
  	height:120px;
} 
div.gaugeIMG#id# {
  	width:140px;
  	height:160px;
}
div.gaugeIMGdisplay#id# {
  	color:#F0F0F0;
  	position:absolute;
  	left:10px;
}
#gauge#id# {
    position:absolute;
    width:75px;
    height:75px;
  	background:center;
  	left:33px;
    top:40px;
  	transition:transform .8s;
    -webkit-transform:rotate(0deg);
}
</style>
</div>

Un petit aperçu du résultat :

27

Faites bien attention a la case du noms des commandes !

Amusez-vous bien

Mise a jour, quelques corrections

<!-- Mise à jour V3 et optimisation
du widget dashboard.info.numeric.gaugeIMG 
	Développé par thecrow06   -->

<!-- traitement sous condition des couleurs
         du mercredi 8 janvier 2020 
	       modifier par Olive  -->

<div class="cmd tooltips #history# cmd-widget gaugeIMG#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
		<div class="gaugeIMGdisplay#id#">
			<img id="IMGgauge#id#" class="IMGgauge#id#" alt="Fond" >
          	<span class="minvalue_gauge#id#" id="minvalue#id#"></span>
          	<span class="midvalue_gauge#id#" id="midvalue#id#"></span>
          	<span class="quartvalue_gauge#id#" id="quartvalue#id#"></span>
          	<span class="troisquartvalue_gauge#id#" id="troisquartvalue#id#"></span>
    		<span class="maxvalue_gauge#id#" id="maxvalue#id#"></span>
          	<span class="state_gauge#id#"></span> 
          	<span class="unite_gauge#id#">#unite#</span>
        <div class="cmdStats #hide_history#">
  <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
		</div>
		<div id="gauge#id#" class="indicator"></div>
<script> 
  // START AD FUNCTION BY OLIVE
  function changecolor(val, name,couleurjauge){
    // val, valeur de la jauge
    // name, nom de la commande de ou des jauges
    // couleurjauge, par defaut ='rien' et modifier ci après si confition vraie
    // pour memo blanche,verte,jaune,orange,rose,rouge,mauve,turquoise 
     
   
 // exemple sans condition    
            if(name == 'Production'){
              couleurjauge="mauve";
            }  

//exemple avec conditions

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

 // exemple affectation multiple

              if(( name == 'top') || (name == 'haut') || (name == 'milieu haut') || (name == 'milieu bas') || (name == 'bas') ){
           
                if (val > 0)   {couleurjauge="blanche";}
                if (val > 20)  {couleurjauge="mauve";}
                if (val > 30)  {couleurjauge="bleue";}
                if (val > 40)  {couleurjauge="turquoise";}
                if (val > 50)  {couleurjauge="verte";} 
                if (val > 60)  {couleurjauge="jaune";}
                if (val > 70)  {couleurjauge="orange";}
                if (val > 80)  {couleurjauge="rose";}
                if (val > 85)  {couleurjauge="rouge";}

              }    
    
  return couleurjauge;
    
  } // END ADD BY OLIVE
  
  var valMin#id# = is_numeric('#mini#') ? parseFloat('#mini#'):#minValue#;
  var valMax#id# = is_numeric('#maxi#') ? parseFloat('#maxi#'):#maxValue#;
  
    var midvalue = Math.round((valMax#id# + valMin#id#)*50)/100;
    var quartvalue = Math.round((valMin#id# + midvalue)*50)/100;
    var troisquartvalue = Math.round((midvalue + valMax#id#)*50)/100;
    $('#minvalue#id#').text(valMin#id#);
    $('#midvalue#id#').text(midvalue);
    $('#quartvalue#id#').text(quartvalue);
    $('#troisquartvalue#id#').text(troisquartvalue);
    $('#maxvalue#id#').text(valMax#id#);
  
    jeedom.cmd.update['#id#'] = function(_options){     
            var val = _options.display_value;
            var plage = valMax#id# - valMin#id#;
            var angle = '';
            if (plage == 0) angle = -70;
            else if (valMin#id# < valMax#id#)  {
              if (val < valMin#id#) angle = -10;
              else if (val > valMax#id#) angle = 232;
              else angle = (val - valMin#id#) * 222 / plage;
            } else {
              if (val < valMax#id#) angle = 232;
              else if (val > valMin#id#) angle = -10;
              else angle = (val - valMin#id#) * 222 / plage;
            }
            $('#gauge#id#.indicator').css( {'-webkit-transform':'rotate('+angle+'deg)','-moz-transform':'rotate('+angle+'deg)','-ms-transform':'rotate('+angle+'deg)','-o-transform':'rotate('+angle+'deg)','transform':'rotate('+angle+'deg)'});
            $('.cmd[data-cmd_id=#id#] .state_gauge#id#').text(_options.display_value);
            $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
              
            // passe ici en MAJ 
            // ajout olive
            // test des conditions
            colJauge=changecolor(val, '#name#' ,"rien")  ;
              
            // test si il y a un changement de couleur en fonction des conditions si pas de changement la foncrion retourne 'rien' si non 'la_couleur'
            if(colJauge != "rien"){    
                //changement de la couleur de la jauge
                document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
            }
              
    }
      
      
      
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  
  	var colJauge = ('#jauge#' !='#'+'jauge#') ? "#jauge#":"bleue";
  	var colAiguille = ('#aiguille#' !='#'+'aiguille#') ? "#aiguille#":"blanche";
  
    // passe ici a  INITIALISATION
    // ajout olive
    // test des conditions
    ncolJauge = changecolor('#state#', '#name#' ,'rien')  ; 
    // test si il y a un changement de couleur en fonction des conditions si pas de changement la foncrion retourne 'rien' si non 'la_couleur'                       
  	if(ncolJauge != "rien"){ colJauge = ncolJauge;}
    // fin ajout olive  
      
  	document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
  	document.getElementById('gauge#id#').style.backgroundImage="url(./data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/center"+colAiguille+".png)";
  	
    
      
      
      
	if ('#petit#' == 1) {
    	$('div.gaugeIMG#id#').css('width','90px');
      	$('div.gaugeIMG#id#').css('height','110px');
      	$('div.gaugeIMGdisplay#id#').css('left','2px');
      	$('span.state_gauge#id#').css('font-size','17px');
      	$('span.state_gauge#id#').css('top','54px');
      	$('span.state_gauge#id#').css('right','24px');
      	$('span.unite_gauge#id#').css('font-size','6px');
      	$('span.unite_gauge#id#').css('top','43px');
      	$('span.minvalue_gauge#id#').css('font-size','0.5em');
      	$('span.minvalue_gauge#id#').css('top','46px');
      	$('span.minvalue_gauge#id#').css('left','15px');      
      	$('span.maxvalue_gauge#id#').css('font-size','0.5em');
      	$('span.maxvalue_gauge#id#').css('top','46px');
      	$('span.maxvalue_gauge#id#').css('right','15px');      
      	$('span.midvalue_gauge#id#').css('font-size','0.5em');
      	$('span.midvalue_gauge#id#').css('top','12px');
      	$('span.quartvalue_gauge#id#').css('font-size','0.5em');
      	$('span.quartvalue_gauge#id#').css('top','25px');
      	$('span.quartvalue_gauge#id#').css('left','17px');      
      	$('span.troisquartvalue_gauge#id#').css('font-size','0.5em');
      	$('span.troisquartvalue_gauge#id#').css('top','25px');
      	$('span.troisquartvalue_gauge#id#').css('right','17px');      
      	$('#gauge#id#').css('width','48px');
      	$('#gauge#id#').css('height','48px');
      	$('#gauge#id#').css('left','21px');
      	$('#gauge#id#').css('top','31px');
      	$('img.IMGgauge#id#').css('width','80px');
      	$('img.IMGgauge#id#').css('height','80px');
    }
</script>
<style>
@font-face {
    font-family: "Digital7";
  	src:	url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/font/digital7.ttf") format("truetype");
  	font-weight:normal;
  	font-style:normal;
}
span.state_gauge#id# {
    font-family:"Digital7"; 
    font-size:26px;
  	position:absolute;
  	top:83px;
  	right:31px;
  }
span.unite_gauge#id# {
    font-size:10px;
    width:100%;
  	top:67px;
    position:absolute;
    display:block;
  }
span.minvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	left:22px;
  }
span.maxvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	right:22px;
  }  
span.midvalue_gauge#id# {
  	display:block;
 	width:100%;
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:18px;
  }
span.quartvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	left:26px;
  }
span.troisquartvalue_gauge#id# {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	right:26px;
  }
img.IMGgauge#id# {
	width:120px;
  	height:120px;
} 
div.gaugeIMG#id# {
  	width:140px;
  	height:160px;
}
div.gaugeIMGdisplay#id# {
  	color:#F0F0F0;
  	position:absolute;
  	left:10px;
}
#gauge#id# {
    position:absolute;
    width:75px;
    height:75px;
  	background:center;
  	left:33px;
    top:40px;
  	transition:transform .8s;
    -webkit-transform:rotate(0deg);
}
</style>
</div>