Widget numerique V4 type edomus

Utilisation du core de Jeedom Widgets
,
1

Bonjour,

Je suis en train de faire un widget perso de type edomus avec des valeurs numeriques, mais visiblement mon code n’est pas bon et je ne trouve pas pourquoi. J’ai des truc rouge dans le code, donc pb.

Est ce que vous pourriez jeter un oeil sur ce pb et me dire si la synthaxe V4 est respectée.

Merci.

<div style="padding:0px; max-width: 85px; height:auto;" class="cmd #history# tooltips cmd-widget cursor container-fluid " data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#">

	<center>
		<div class="cmdName" style="font-weight: bold; margin-left: auto; margin-right: auto; width: 100%; color: white; font-size: 13px; position: absolute; top: 82%; #hideCmdName#">#name_display#</div>
		<span class="iconCmd"></span>
		<div style="font-weight: bold; margin-left: auto; margin-right: auto; width: 100%; position: absolute; top: 30%; ">
			<span class="spanCmd#id#" style="font-size: 2em; vertical-align: middle;">#state#</span>
			<span class="spanCmd#id#" style="font-size: 1em; vertical-align: super;">#unite#</span>
		</div>
<!--Historique -->
		<div class="cmdStats #hide_history#" style="#displayHistory# font-weight: bold; font-size: 10px; margin-top:5px;">
			<span title="Min" class="tooltips">#minHistoryValue##unite#</span>|<span title="Moy" class="tooltips">#averageHistoryValue##unite#</span>|<span title="Max" class="tooltips">#maxHistoryValue##unite#</span> <i class="#tendance#"></i>
		</div>
	</center>

	<script>
		var srcImg = 'data/img/';
		var iconUpdate#uid# = function (state){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
			if (state < 0) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Gris 2.png">');
				$(".spanCmd#id#").css( "color", "#2989db" );   
			}
			else if (state >= 0 && state < 10) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Bleu 2.png">');
				$(".spanCmd#id#").css( "color", "#2989db" );  
			}
			else if (state >= 10 && state < 20) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Vert.png">');
				$(".spanCmd#id#").css( "color", "#839f25" );  
			}
			else if (state >= 20 && state < 25) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Orange.png">');
				$(".spanCmd#id#").css( "color", "#ff7d27" );  
			}
			else if (state >= 25 && state < 30) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Rouge.png">');
				$(".spanCmd#id#").css( "color", "#da3037" );  
			}
			else if (state >= 30 && state < 35) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Violet.png">');
				$(".spanCmd#id#").css( "color", "#dd00ff" );  
			}
			else if (state >= 35) {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'Icone Noir.png">');
				$(".spanCmd#id#").css( "color", "#123456" );  
			}		
            $('.cmd[data-cmd_uid=#uid#] .state').text(state);
		};
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
  
</div>

Voici le résultat :

Nouvelle%20image%20bitmap

Enfin je dois aussi avoir un souci avec la mise à jour de la valeur qui ne se rafrraichit pas alors que l’icone oui + pb pas d’affichage des valeurs min/max

MERCIIIIIIiiiiiii

2

Salut @Almy,

J’essayes de te faire les corrections ce soir mais si tu veux déjà y regarder un peu par toi-même

Au 1er abord ces lignes semblent à revoir:
<span class="spanCmd#id#" style="font-size: 2em; vertical-align: middle;">#state#</span>
en enlevant le #state# à la fin qui ne permettra pas la mise à jour automatique de la valeur.

puis cette ligne,
$('.cmd[data-cmd_uid=#uid#] .state').text(state);
à remplacer par:
$('.cmd[data-cmd_uid=#uid#] .spanCmd#id#').text(_options.display_value);

A vérifier…

3

Salut Salviaf,

Je viens de tester tes modifs:
En enlevant #state# la valeur n’apparait plus.

Pour le remplacement de la ligne
$(’.cmd[data-cmd_uid=#uid#] .state’).text(state);
par
$(’.cmd[data-cmd_uid=#uid#] .spanCmd#id#’).text(_options.display_value);
C’est fait, mais je ne vois pas de différence visuelle ou comportementale du widget.

Merci

4

Ça permet la mise à jour en direct de la valeur sans avoir à recharger/rafraichir la page