Faire clignoter une valeur

FredT · Décembre 12, 2019, 9:24

ça fonctionne nickel !!!

adejee · Décembre 12, 2019, 7:35

Lu ce midi, essayé ce soir GÉNIAL!
par contre j ai réussi à l appliquer que sur une commande virtuel, mais pas sur une commande info numeric du plugin vigilance, je comprend pas.

Salvialf · Décembre 12, 2019, 7:38

J’ai prévu de partager tout à l’heure un code qui inclut les 3 présentations en un seul widget !

Je vais tester vigilance pour voir

Jeandhom · Décembre 12, 2019, 7:46

Ça peut fonctionner avec des valeurs en dessous d’une valeur mini ?
Ou encadré entre une valeur mini et une valeur maxi ?

adejee · Décembre 12, 2019, 7:48

Super !!! on attend cela

Salvialf · Décembre 13, 2019, 9:10

Salut @ tous,

ci-dessous le code d’un seul widget englobant les 3 visuels (line, tile & badge) avec la possibilité de définir un seuil maximal et un seuil minimal au-dessus et au-dessous desquels la valeur va clignoter. Il est également possible de faire clignoter la valeur encadrée par les seuils mini et maxi:

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs">
		<span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong>
	</div>
  <div class="title #hide_name#">
		<div  class="cmdName">#name_display#</div>
	</div>
	<div class="content-sm">
      <div class="tile">
		<span class="pull-right">#unite#</span>
		<span class="pull-right state"></span>
      </div>
      <div class="badge">
      <span class='label label-info state'></span>
      </div>
	</div>
	<div class="value #hide_history#">
		<div 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>
	</div>
	<style>
@keyframes cligno
{
0% {opacity:0;}
100% {opacity:1;}
}
.clignoValue {animation:cligno infinite 0.8s;}
  </style>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var cmd = $('.cmd[data-cmd_id=#id#]')
            var value = _options.display_value
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)

           if ('#disposition#' == 'tile'){ 
             cmd.find('.content-xs').hide()
             cmd.find('.badge').hide()
             cmd.attr('data-template','tile')
          	 cmd.find('.state').empty().append(value);}
      		else if ('#disposition#' == 'badge'){
             cmd.find('.content-xs').hide()
              cmd.find('.tile').hide()
             cmd.attr('data-template','badge')
          	 cmd.find('.state').empty().append(value +' #unite#');}
          else { cmd.find('.title').hide()
            	cmd.find('.content-sm').hide()
                cmd.attr('data-template','line')
          		cmd.find('.state').empty().append(value +' #unite#');}
         	
			var miniValue = is_numeric('#seuilMini#') ? parseFloat('#seuilMini#'):#minValue#;
            var maxiValue = is_numeric('#seuilMaxi#') ? parseFloat('#seuilMaxi#'):#maxValue#;
			
            if ('#cadre#' == '1'){
              if (value > miniValue && value < maxiValue) {
                cmd.find('.state').addClass("clignoValue");}
				else {
				cmd.find('.state').removeClass("clignoValue");}
            }
			else if (value < miniValue | value > maxiValue) {
				cmd.find('.state').addClass("clignoValue");}
				else {
				cmd.find('.state').removeClass("clignoValue");}

     if(_options.alertLevel){
				if(_options.alertLevel == 'warning'){
                    cmd.find('.content-xs').addClass('label label-warning')
					cmd.find('.content-sm').addClass('label label-warning')
					cmd.attr('data-alertlevel','warning');
				}else if(_options.alertLevel == 'danger'){
                  	cmd.find('.content-xs').addClass('label label-danger')
					cmd.find('.content-sm').addClass('label label-danger')
					cmd.attr('data-alertlevel','danger');
				}else{
                  	cmd.find('.content-xs').removeClass('label label-warning label-danger')
					cmd.find('.content-sm').removeClass('label label-warning label-danger')
					cmd.attr('data-alertlevel','none');
				}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Les paramètres optionnels

disposition = tile ou badge (line par défaut)
seuilMini = Valeur du seuil minimum (par défaut: valeur mini de la commande)
seuilMaxi = Valeur du seuil maximum (par défaut: valeur maxi de la commande)
cadre = mettre à 1 pour que la valeur clignote entre les bornes seuilMini & seuilMaxi

A peine testé donc n’hésitez pas à me faire vos remontées.

Have Fun

Jeandhom · Décembre 13, 2019, 9:23

Tu casses la baraque.
Respect.

FredT · Décembre 13, 2019, 10:18

Cela fonctionne, mais en mode badge, cela décale l’affichage par rapport à l’affichage normal (ici, l’info Salon est celle qui clignote)

adejee · Décembre 13, 2019, 10:22

Tu déchires!!!
comme mykerinos1 je suis jaloux;

on pourrait presque modifier la couleur de la valeur qui clignote !!!

Salvialf · Décembre 13, 2019, 10:28

Super !! Merci pour l’info, j’ai corrigé:

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs">
		<span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong>
	</div>
  <div class="title #hide_name#">
		<div  class="cmdName">#name_display#</div>
	</div>
	<div class="content-sm">
      <div class="tile">
		<span class="pull-right">#unite#</span>
		<span class="pull-right state"></span>
      </div>
      <div class="badge">
      <span class='label label-info state'></span>
      </div>
	</div>
	<div class="value #hide_history#">
		<div 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>
	</div>
	<style>
@keyframes cligno
{
0% {opacity:0;}
100% {opacity:1;}
}
.clignoValue {animation:cligno infinite 0.8s;}
  </style>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var cmd = $('.cmd[data-cmd_id=#id#]')
            var value = _options.display_value
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)

           if ('#disposition#' == 'tile'){ 
             cmd.find('.content-xs').hide()
             cmd.find('.badge').hide()
             cmd.attr('data-template','tile')
          	 cmd.find('.state').empty().append(value);}
      		else if ('#disposition#' == 'badge'){
             cmd.find('.content-xs').hide()
              cmd.find('.tile').hide()
             cmd.attr('data-template','badge')
          	 cmd.find('.state').empty().append(value +' #unite#');}
          else { cmd.find('.title').hide()
            	cmd.find('.content-sm').hide()
                cmd.attr('data-template','line')
          		cmd.find('.state').empty().append(value +' #unite#');}
         	
			var miniValue = is_numeric('#seuilMini#') ? parseFloat('#seuilMini#'):#minValue#;
            var maxiValue = is_numeric('#seuilMaxi#') ? parseFloat('#seuilMaxi#'):#maxValue#;
			
            if ('#cadre#' == '1'){
              if (value > miniValue && value < maxiValue) {
                cmd.find('.state').addClass("clignoValue");}
				else {
				cmd.find('.state').removeClass("clignoValue");}
            }
			else if (value < miniValue | value > maxiValue) {
				cmd.find('.state').addClass("clignoValue");}
				else {
				cmd.find('.state').removeClass("clignoValue");}

     if(_options.alertLevel){
				if(_options.alertLevel == 'warning'){
                    cmd.find('.content-xs').addClass('label label-warning')
					cmd.find('.content-sm').addClass('label label-warning')
					cmd.attr('data-alertlevel','warning');
				}else if(_options.alertLevel == 'danger'){
                  	cmd.find('.content-xs').addClass('label label-danger')
					cmd.find('.content-sm').addClass('label label-danger')
					cmd.attr('data-alertlevel','danger');
				}else{
                  	cmd.find('.content-xs').removeClass('label label-warning label-danger')
					cmd.find('.content-sm').removeClass('label label-warning label-danger')
					cmd.attr('data-alertlevel','none');
				}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Le code a été aussi remis à jour dans le post au-dessus et j’ai ajouté les niveaux d’alerte configurables dans Jeedom (warning & danger).

EDIT: Faut que j’affine le code des niveaux d’alerte
EDIT2: C’est tout bon - code mis à jour

Je veux bien que t’essayes et que tu me dises ce qu’il en est ? Penses bien à rafraichir la page avec ctrl+F5 après modification du code.

J’y passe beaucoup de temps mais ça commence à rentrer dans ma petite caboche… Merci Jeedom !

Oui on peut… C’est quoi l’idée ? t’as un exemple ?

Salvialf · Décembre 13, 2019, 10:45

Merci @Jeandhom j’avoues il est pas mal ce widget je suis étonné qu’il n’y en ai pas eu la demande avant.

Je t’invite à remplacer le code par celui que je viens de mettre à jour dans les 2 posts au-dessus qui est bien optimisé et inclut les niveaux d’alertes en + !

adejee · Décembre 13, 2019, 10:51

Admettons une valeur de température (dit normal…) police inchangé. Puis au dessus d un seuil: valeur clignotante avec un police rouge par exemple…

FredT · Décembre 13, 2019, 10:52

Merci beaucoup @Salvialf !!!

Fonctionne bien.

L’idée de pouvoir modifier la couleur est également une bonne idée

adejee · Décembre 13, 2019, 10:55

Oui l’impact au niveau visuel serait un +++ mais grâce @Salvialf je fais déjà un bond d idées.

mykerinos1 · Décembre 13, 2019, 10:55

Je confirme qu’il est bon @Salvialf . Je suis aussi intéressé par la couleur

Salvialf · Décembre 13, 2019, 10:59

Pour la couleur j’ai justement ajouté la prise en compte des niveaux d’alerte pour mettre la tuile en orange en warning et en rouge en danger:
alertLevel

Franchement à part la petite animation css c’est que des classes du core du coup il aurait peut-être sa place dans le core…

adejee · Décembre 13, 2019, 11:30

la couleur est un +

Jeandhom · Décembre 13, 2019, 1:12

Il faut militer pour, @Alexandre, @Loic.

FredT · Décembre 13, 2019, 1:57

Pour ma part, je n’arrive pas à avoir l’info qui passe en couleur en gérant les seuils dans la partie « Alertes »

Salvialf · Décembre 13, 2019, 2:01

Tu as bien repris le nouveau code suite à mon dernier message car au début les alertes ne fonctionnaient pas dans tous les cas.

J’ai mis un exemple ici: