Couleur selon valeurs

[fleproust]

Bonjour à tous,

J'ai retourné tous les sujets et ne trouve pas de réponse à ma question.

Est-il possible de changer la couleur d'une valeur numérique selon sa valeur. Par exemple si valeur < 10 alors couleur rouge.

J'ai vu un widget qui change la couleur de la tuile mais ce n'est pas ce que je cherche.

Merci à celui qui pourra me mettre sur la voix.

[winhex]

viewtopic.php?f=29&t=16181&p=578652&hil ... ur#p578551

if ('#state#' <= '#minHistoryValue#') {
$(".stateFing#id#").css('color', '#6699ff');
}
si valeur < mini
class stateFing#id# aura la couleur...

[fleproust]

Grand merci.

Mais à quel endroit je dois mettre le code ?

Je n’ai pas le plugin script le faut il?

[winhex]

nul besoin du plug script
widget si
regarde dans ma signature tu as quelques vidéos
soit tu créés un widget,
soit tu actives la personnalisation dans la configuration de ton info

la ligne
<span class="lab stateFing#id#" id="state#id#"></span>

...#id# c'est le numéro de ton équipement

id state#id#
c'est le traitement de #state# (valeur) pour avoir 1 décimal (ex 20.0 au lieu de 20) début du script

class stateFing#id#
c'est pour le style, déplacement si < 10, couleur,...

[fleproust]

voila ce que j'ai dans la personnalisation de l'info (dans l'onglet design) et je ne vois pas ou mettre ta ligne :

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: block;">
<center><span style="font-size : 12px !important;#hideCmdName#" class="cmdName">#name_display#</span> <strong class="state" style="font-size: 12px;"></strong> #unite#</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
if(_options.alertLevel == 'warning'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
}else if(_options.alertLevel == 'danger'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

[winhex]

compares j'ai ajjouté #id# à la fin de state (pour ne pas avoir un changement à tous les equipements)
j'ai changé
if ('#state#' > 19 ) {
par
if (_options.display_value > 19 ) {

avec #state# =
ne s actualisé pas sans rafraîchir la page

j'ai ajouté
$(".state#id#").css('color', '');
pour le sinon (retour normal)

Code : Tout sélectionner

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: block;">
<center><span style="font-size : 12px !important;#hideCmdName#" class="cmdName">#name_display#</span> <strong class="state#id#" style="font-size: 12px;"></strong> #unite#</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
//
$('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);
      if (_options.display_value > 19 ) {
$(".state#id#").css('color', '#6699ff');   
}else if (_options.display_value < 6 ) { 
  $(".state#id#").css('color', 'white');   
}else { 
  $(".state#id#").css('color', '');
  }
  //
$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
if(_options.alertLevel == 'warning'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
}else if(_options.alertLevel == 'danger'){
$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

ou sans else on réhinitialise la couleur avant le changement
entre //

Code : Tout sélectionner

$('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);
  $(".state#id#").css('color', '');     
  if (_options.display_value > 19 ) {
$(".state#id#").css('color', '#6699ff');   
}else if (_options.display_value < 6 ) { 
  $(".state#id#").css('color', 'white');   
}

[fleproust]

Je tenais à te remercier. J’ai réussi c’est parfait.

Petite question : est ce que cela utilise bcp de mémoire ? Aucune? Un peu ?

[winhex]

un widget c'est visuel
donc quand il est affiché
et c'est ton navigateur (tab,tel,...)
qui utilisera sa memoire (minima)

[fleproust]

Impec. Merci

[lodaro]

Bonsoir
Je souhaiterais modifier, dans un design, la couleur du background d'un cadre rectangle dans lequel il y a un widget rond. Le widget en question est celui ci : "HygroThermographe_TaG ". Le but est de voir " de loin " si c'est plutot chaud ou froid . Le probleme est que je ne connais rien aux codes mais je veux bien essayer de comprendre .
Alors , premiere difficulté , trouver la ligne de code qui identifie au moins la valeur entiere de la température . Dans le code du widget j'ai trouvé ca :
<span class="stateint_temp#id#" id="intNumTemp#id#"></span>
Est ce que je peux me servir de ca pour avoir la valeur de la temperature ?

Quelqun pourrait il m'aider svp ?