Modifier les paramètres optionnels d'un widget dans un scénario

Tags: #<Tag:0x00007f38616bb868> #<Tag:0x00007f38616bb7a0>

Bonjour,

Savez-vous si il est possible de modifier un paramètre optionnel d’un widget dans un scénario. Mon but, dans l’exemple ci-dessous, est de modifier la couleur de la jauge en fonction de la valeur présente dans la commande.
Capture

Merci

Salut,

Une petite modif du code du widget peut te permettre d’arriver à tes fins sans scénario:

L’idée est d’ajouter des lignes de code de ce style dans la fonction jeedom.cmd.update (donc entre jeedom.cmd.update['#id#'] = function(_options){ et } jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});)

if (val > 1000 && val <= 1015) {
	document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondrouge.png";
	}
    else if (val > 1015 && val <= 1030) {
    document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondverte.png";
	}
..........................

Il faut aussi du coup commenter ou supprimer la variable de sélection d la couleur de la jauge donc les 2 lignes:
`var colJauge = (’#jauge#’ !=’#’+‘jauge#’) ? “#jauge#”:“bleue”;’ et ‘document.getElementById(“IMGgauge#id#”).src=“plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fond”+colJauge+".png";’

Un exemple avec un bout de code modifié:

<div class="cmd #history# tooltips cmd-widget gaugeIMG#id# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center><span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
		<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 style="#displayHistory# font-size: 0.8em;position:absolute;width:100%;" class="historyDisplay#id#">
		<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></center>
<script> 
  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;
    }
    if (val > 1000 && val <= 1015) {
	document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondrouge.png";
	}
    else if (val > 1015 && val <= 1030) {
    document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fondverte.png";
	}
    $('#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_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_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#":"bleue";
  
 // 	document.getElementById("IMGgauge#id#").src="plugins/widget/core/template/dashboard/cmd.info.numeric.gaugeIMG_V3/fond"+colJauge+".png";
  	document.getElementById('gauge#id#').style.backgroundImage="url(./plugins/widget/core/template/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','48px');
      	$('span.state_gauge#id#').css('right','21px');
      	$('span.unite_gauge#id#').css('font-size','6px');
      	$('span.unite_gauge#id#').css('top','46px');
      	$('span.minvalue_gauge#id#').css('font-size','0.3em');
      	$('span.minvalue_gauge#id#').css('top','46px');
      	$('span.minvalue_gauge#id#').css('left','15px');      
      	$('span.maxvalue_gauge#id#').css('font-size','0.3em');
      	$('span.maxvalue_gauge#id#').css('top','46px');
      	$('span.maxvalue_gauge#id#').css('right','15px');      
      	$('span.midvalue_gauge#id#').css('font-size','0.3em');
      	$('span.midvalue_gauge#id#').css('top','12px');
      	$('span.quartvalue_gauge#id#').css('font-size','0.3em');
      	$('span.quartvalue_gauge#id#').css('top','25px');
      	$('span.quartvalue_gauge#id#').css('left','17px');      
      	$('span.troisquartvalue_gauge#id#').css('font-size','0.3em');
      	$('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','18px');
      	$('#gauge#id#').css('top','35px');
      	$('img.IMGgauge#id#').css('width','80px');
      	$('img.IMGgauge#id#').css('height','80px');
      	$('.historyDisplay#id#').css('font-size','0.55em');
    }
</script>
<style>
@font-face {
    font-family: "Digital7";
  	src:	url("plugins/widget/core/template/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:71px;
  	right:31px;
  }
span.unite_gauge#id# {
    font-size:11px;
    width:100%;
  	top:65px;
    position:absolute;
    display:block;
  }
span.minvalue_gauge#id# {
    font-size:0.5em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	left:22px;
  }
span.maxvalue_gauge#id# {
    font-size:0.5em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	right:22px;
  }  
span.midvalue_gauge#id# {
  	display:block;
 	width:100%;
    font-size:0.5em;
  	font-weight:bold;
  	position:absolute;
  	top:18px;
  }
span.quartvalue_gauge#id# {
    font-size:0.5em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	left:26px;
  }
span.troisquartvalue_gauge#id# {
    font-size:0.5em;
  	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;
  	float:center; 
  	position:absolute;
  	left:10px;
  	top:20px;
}
#gauge#id# {
    position:absolute;
    width:75px;
    height:75px;
  	background:center;
  	left:32px;
    top:42px;
  	transition:transform .8s;
    -webkit-transform:rotate(0deg);
}
</style>
</div>

Bien sûr c’est à adapter, J’espère que ça va t’aider à parvenir à faire ce que tu cherches… Sinon dis le moi je ferai en sorte de développer ma réponse.

Pour le plaisir parce que ça me permet d’apprendre un peu mieux comment fonctionne l’API.

Dans un bloc code dans le scenario tu ajoutes cela :

$cmd=cmd::byString("#[Tests][Virtuel test][Ma commande]#");
//$cmd->event('82');
$valeur=$cmd->execCmd();
$scenario->setLog("Valeur : $valeur");
$arr = $cmd->getDisplay('parameters');
$scenario->setLog("GetDisplay : ".print_r($arr, true));
if ($valeur > 50)  $arr['jauge'] = 'rouge';
 else if ($valeur > 30) $arr['jauge'] = 'bleu';
 else $arr['jauge'] = 'vert';
$cmd->setDisplay(parameters,$arr);
$p=$cmd->save();
$arr = $cmd->getDisplay('parameters');
$scenario->setLog("GetDisplay : ".print_r($arr, true));

Mais je pense que la méthode sur le widget et la meilleure parce que tu peux le réutiliser ensuite sur d’autres commandes.

Un petit conseil quand même : ne pas passer trop de temps sur des widgets perso aujourd’hui parce qu’en v4 il faudra tout recommencer de toutes façons.

Merci pour toute vos réponses.
C’était ma question complémentaire. Tout ceci serait il réutilisable en v4 ? Ce sera plus simple car paramétrable ou bien faudra-t-il faire encore autrement ?

Pour ma part je ne me suis pas encore du tout penché sur la question donc je ne voudrais pas dire de bêtises. J’ai juste lu que ça parlait de widgets colorés a priori plus simple à mettre en place mais je n’en sais pas plus.

Salut,

Le code de ce widget adapté à la V4 est disponible ici avec la procédure de mise en place: https://www.jeedom.com/forum/viewtopic.php?t=45026#p725738

Il faudra juste adapter les chemins de fichiers par rapport au code que je t’ai donné plus haut:

if (val > 1000 && val <= 1015) {
	document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fondrouge.png";
	}
    else if (val > 1015 && val <= 1030) {
    document.getElementById("IMGgauge#id#").src="data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG_V3/fondverte.png";
	}
..........................
1 J'aime

@Salvialf
Voila comment j’ai modifié ton widget; J’ai essayer de reprendre les couleurs en fonction des W un peu comme sur la prise fibaro wallplug
Par contre il me manque un truc je suis obligé de faire un F5 pour que la couleur se mette à jour :smiley: et le cadran est trop petit pour les W > 1000, si tu as une idée merci

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

<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> 
  var valMin#id# = is_numeric('#mini#') ? parseFloat('#mini#'):#minValue#;
  var valMax#id# = is_numeric('#maxi#') ? parseFloat('#maxi#'):#maxValue#;
  var colJauge = "bleue";
  var colAiguille = "bleue";
    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;
    }
    
    if (val >=0 && val <130) 
    {
      	colJauge = "bleue";
    	colAiguille = "bleue";
    }else if (val >=130 && val <300) 
    {
      	colJauge = "verte";
    	colAiguille = "verte";
    }else if (val >=300 && val <410) 
    {
      	colJauge = "jaune";
    	colAiguille = "jaune";
    }else if (val >=410 && val <1400) 
    {
      	colJauge = "orange";
    	colAiguille = "orange";
    }else if (val >=1400 && val <2100) 
    {
      	colJauge = "rouge";
    	colAiguille = "rouge";
    }else 
    {
      	colJauge = "mauve";
    	colAiguille = "mauve";
    }      
    //var colJauge = "bleue";
  	//var colAiguille = "bleue";
    
    
    $('#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#":"bleue";
  

    
   
      
  	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>

Essayes en mettant cette partie:

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)";

juste avant la fermeture de la fonction d’update:

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)";
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

De toute façon je vais refaire tous mes widgets 1 par 1 et je compte intégrer cette possibilité :wink:

je Vais regarder en même temps

Salut,

Une nouvelle version de ce widget permet de paramétrer le changement de couleur en fonction de la valeur:

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