[SALVIALF] Widget ClignoBLT - Badge | Line | Tile (Info/Numérique)

Tags: #<Tag:0x00007f283066ed60>

Bonjour,

Afin d’être sûr que vous ayez de l’occupation durant le confinement, je vous propose un widget code intégrant via paramètre optionnel les différents visuels Badge, Line & Tile du core avec la possibilité de définir un seuil maximal et un seuil minimal au-dessus et en-dessous desquels la valeur va clignoter. Il est également possible de faire clignoter la valeur encadrée par les seuils mini et maxi.

Le widget prend également en compte les niveaux d’alerte configurables dans Jeedom (warning & danger).

Pour la petite histoire, ce widget a vu le jour suite à des échanges sur le forum et il s’avère que je l’utilise donc je le partage :


Installer et appliquer le widget :

  • il faut se rendre dans le menu Outils/widgets puis cliquer sur le bouton code : WidgetCode

  • Cliquer sur Nouveau et créer un nouveau widget du nom de votre choix avec les caractéristiques suivantes: Version : Dashboard | Type : Info | Sous-type : Numérique

  • Coller le code suivant et sauvegarder:

<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#">
<!-- ########## Cligno BadgeLineTile ##########
 ********** Paramètres Optionnels *********
 disposition = disposition du widget (tile | badge | line par défaut)
 seuilMini = valeur du seuil minimum (valeur mini de la commande par défaut)
 seuilMaxi = valeur du seuil maximum (valeur maxi de la commande par défaut)
 cadre = la valeur clignote entre seuilMini & seuilMaxi (1 | désactivé par défaut)
 ########### by @SALVIALF ;) ############# -->

  <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#'):parseFloat('#minValue#');
            var maxiValue = is_numeric('#seuilMaxi#') ? parseFloat('#seuilMaxi#'):parseFloat('#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>
  • Appliquer le widget sur une commande Info/Numérique à partir de l’onglet Affichage de la configuration de la commande, en choisissant Customtemp/Nom_de_votre_Widget dans le menu déroulant.

Les 4 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.

multiCligno


Je serai heureux d’avoir vos avis :hugs:

4 J'aimes

Whaouu les plus simples sont des fois les meilleurs !

faut que je prenne 5 minutes pour tester

:+1:

1 J'aime

@Salvialf

Bon en suivant l’exemple a la lettre je te confirme que celà fonctionne.

Proposition: ajouter une option fréquence
valeur pour changer la vitesse de clignotement.

1 J'aime

Bonjour @Salvialf

J’ai aussi testé avec cadre à 0 pour faire clignoter en dehors des seuils et c’est OK.
L’unité elle ne clignote pas. Mais pas gênant pour moi

Proposition : Choix d’une couleur de la valeur lorsque ça clignote ?

Merci pour le partage.

Merci pour le retour @olive :wink:

Vous voulez me faire ajouter des paramètres optionnels !! J’essaye de les limiter tant que possible pour simplifier l’utilisation surtout que ce widget ne fait que reprendre les classes du core… mais je vais y réfléchir.

@raqpub : Effectivement en disposition Tile seule la valeur clignote… Je peux modifier mais ça me paraissait cohérent sur le coup.
J’ai ajouté la prise en compte des niveaux d’alerte justement pour pouvoir colorer le widget en fonction de certaines valeurs :
alertLevel

Avec « Alertes » c’est OK pour moi.

1 J'aime

Bon tant que ce sont des paramètres optionnels avec des valeurs par défaut que l’utilisateur n’est pas obligé de renseigner c’est pas pénalisant, seul l’utilisateur avancé fera la démarche.

On est d’accord :wink:

Hello Salviaf,

Vu que j’ai du temps je me penche enfin sur ton travail et celui ci est super, j’aime beaucoup cette histoire de paramètres optionnels juste que j’aurais préférer faire clignoter en rouge le chiffre et pas y mettre un paramètre dans les alertes.

Super boulot en tout cas @Salvialf

J’aime bien l’idée, avec un choix de font et taille de font on serait les rois du pétrole

La notion de supérieur ou égale et inférieur ou égale n’est pas prise en compte ?

Sur le badge ne faire clignoter que la valeur et pas le cadre c’est possible ?

Après vérification à l’époque pour les valeurs encadrées j’avais effectivement mis des strictement supérieur ou inférieur effectivement… Pourquoi je ne me souviens plus y’avait peut-être une raison ou pas ?! Surtout que j’ai bien mis supérieur/inférieur ou égal pour les valeurs hors cadre.
A priori ce n’est pas gênant si ?

En disposition badge tout est packagé donc tout clignote pas possible de faire autrement

1 J'aime

Bonsoir ,
En ces temps de confinement , je n’arrête pas de copier des codes ici et là pour agrémenter mes désigns.
Merci pour le partage :+1:

1 J'aime

hello,

merci pour le widget :stuck_out_tongue:
encore un de toi sur mon dash

++