Comment changer la couleur de police en fonction de la valeur?

Ça me semble Basic pourtant, mais je bloque la dessus :
Dans un design, je veux qu’une valeur soit en rouge si négative, et en bleu si positive dans un widget type Tile

1 « J'aime »

Salut,

Il va te falloir créer un widget perso pour ça via le template multistate je pense (pas pris le temps d’y réfléchir) avec un test #value# < 0 et un autre #value# >= 0 par exemple…

Tu peux t’inspirer de ce post:

…Juste des pistes à développer… :grin:

Edit:

1 « J'aime »

Merci pour la piste donnée, mais trop compliqué pour moi !
Curieux que personne n’ai eu ce besoin !

Tu es en V4 ou en V3 ?

1 « J'aime »

je suis en V3

1 « J'aime »

J’y suis arrivé en introduisant un css ‹ color › avec test dans le script, ça donne :

<div style="min-width:120px; min-height:80px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
		<div style="font-weight: bold;font-size : 1.5em; color : blue; #hideCmdName#">#name_display#</div>
		<div style="display:inline-block;">
        
			<span style="font-weight: bold;font-size : 2em; color : blue;" class="pull-right">#unite#</span>
			<span style="font-size: 4em;font-weight: bold; " class="pull-right state"></span>
        
		</div>		
  		
		<div style="#displayHistory# font-size: 0.8em;" 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>
	</center>

<!-- Ne Pas Supprimer -->
	<script>
 				if (#state#  <= 0) {
    		color= "#FF0000";
      		}
 		  		else if (#state# <= 100 ) {
     		color= "#0000FF";
			}
	var iconUpdate#uid# = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		$('.cmd[data-cmd_uid=#uid#] .state').text(state).css('color', color );
	};
	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>

En fait ça ne marchait pas complétement :
Utilisé dans un design : ça marche au lancement, si négatif, c’est rouge, et bleu si positif, mais si la valeur change, ça garde la première couleur !

Comment repasser dans la boucle « if/else if » a chaque changement de valeur ?
edit :
ça y est, ça marche avec la partie script comme ça :

Bon ! la modif du message a merdé !
Donc la partie script est devenue :

	<script>
		var iconUpdate#uid# = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
      
    				if (state  <= 0) {
    		color= "#FF0000";
      		}
 		  		else if (state <= 100 ) {
     		color= "#0000FF";
			}
                                        
		$('.cmd[data-cmd_uid=#uid#] .state').text(state).css('color', color );
	};
	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>


moi j’ai fait cela

Il est en V3…

ha desolé :slightly_smiling_face:

Bonjour. Moi il m interesse fortement.Qua u mis dans tes lignes de codes ?
Je ne maitrise pas vraiment le css mais je commence a le comprendre.(taille d’ecriture , couleur, valeur etc) mais le reste « span » ca je comprend pas encore.
Donc si tu pouvais me donner le contenu d une ligne que j adapterai a mes besoins. Et si au passage( sans vouloir abuser) tu pouvais m expliquer a quoi ca correspond
Merci

Bonjour,

Est-il possible d’utiliser « l’opérateur » matches dans la zone Test ?

Perso je n’y suis pas arrivé → Sort en erreur dans la console.