[WIDGET] IconInfo

[hansc]

Merci Salvialf

mise à jour faite --> OK
mise à jour des mes config --> ok
plus de clignotement du dashboard
super boulot

[bartounet]

Bonjour.
J'ai déjà IconInfo, comment on met à jour ?

[Salvialf]

Bonjour.
J'ai déjà IconInfo, comment on met à jour ?

Salut,

Dans la config générale de Jeedom (roue crantée en haut à droite) -> Centre de mise à jour -> onglet 'Autre'.

[Antoinekl1]

Bonjour @Salvialf

depuis ta dernière maj, j'avais des soucis d'affichage dans mes design

J'ai du ajouter padding:0px; dans ton 1er div

<div style="padding:0px;min-width:90px;min-height:90px;"

[Salvialf]

Bonjour @Salvialf

depuis ta dernière maj, j'avais des soucis d'affichage dans mes design

J'ai du ajouter padding:0px; dans ton 1er div

<div style="padding:0px;min-width:90px;min-height:90px;"

Salut @Antoine,

Merci beaucoup pour cette remontée... Je devais revoir le positionnement et la taille de la <div> globale et j'ai complètement oublié pendant que je mettais à jour.

Ton "patch" est testé et approuvé il fera partie de la prochaine MAJ.

Juste pour ma culture personnelle ça se caractérisait comment tes soucis d'affichage ?

EDIT: J'en profite pour remercier ceux qui ont pris le temps de confirmer que le widget est toujours fonctionnel suite mise à jour.

[Antoinekl1]

Bonjour @Salvialf

depuis ta dernière maj, j'avais des soucis d'affichage dans mes design

J'ai du ajouter padding:0px; dans ton 1er div

<div style="padding:0px;min-width:90px;min-height:90px;"

Salut @Antoine,

Merci beaucoup pour cette remontée... Je devais revoir le positionnement et la taille de la <div> globale et j'ai complètement oublié pendant que je mettais à jour.

Ton "patch" est testé et approuvé il fera partie de la prochaine MAJ.

Juste pour ma culture personnelle ça se caractérisait comment tes soucis d'affichage ?

EDIT: J'en profite pour remercier ceux qui ont pris le temps de confirmer que le widget est toujours fonctionnel suite mise à jour.

Avec une vignette d'une largeur de 110, l'image d'une taille de 110 débordait a cause de la marge et donc perte d'espace

[dvb]

Bonsoir Salvialf,

Tout est OK


Si ce n'est pas trop compliqué, peut-on faire évoluer la fonction "time" ?
J'aimerais un paramètre permettant de choisir comment afficher le dernier évènement :
- soit "durée" comme actuellement.
- soit "hh:mn;ss"

Dans certains cas (ex. surveillance boite aux lettres), je trouve hh:mn:ss plus lisible.

A+

[Pandalex]

Salut,
Je ne comprend pas pourquoi mais je ne trouve pas le plugin en passant par le Market (la rubrique 'Autre' est carrément vide, sans aucun filtre il ne le trouve pas).
SI je clique sur le lien du premier post, il me dit de passer par Jeedom.

J'ai vérifié sur l'NotAuthorised aussi sans plus de succès

Si je passe par Github, aurais-je les mise à jours automatiques ?
Le plug-in contient-il toutes les images de http://jeedomalf.free.fr/piwigo ?
Savez vous s'il existe déjà des icônes allumé/éteint pour les bandeau Hue ?

Merci

[Pandalex]

Pour les autres buses comme moi, je précise qu'il faut chercher dans le Market des Widgets et non dans le market des Plug-in.
C'est évident mais bon ...

[Salvialf]

Si ce n'est pas trop compliqué, peut-on faire évoluer la fonction "time" ?
J'aimerais un paramètre permettant de choisir comment afficher le dernier évènement :
- soit "durée" comme actuellement.
- soit "hh:mn;ss"

Dans certains cas (ex. surveillance boite aux lettres), je trouve hh:mn:ss plus lisible.

Hello @dvb,

Pas bête, je veux bien que tu fasses quelques tests et j'ajouterai sûrement la possibilité de choisir le format sur le paramètre 'time'.

Peux-tu essayer ce code sur la commande voulue en personnalisation du widget stp (bon courage ):

Code : Tout sélectionner

<div style="padding:0px;min-width:90px;min-height:90px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">  
	<center>
    <span class="cmdName" style="padding-top:3px;font-weight:bold;font-size:14px;#hideCmdName#">#name_display#</span>
	<div style="padding-top:4px;" class="iconCmd#uid#"></div>
    <span class="datecmd#uid# label" style="display:block;font-size:13px;background-color:#cmdColor#!important;"></span>
	</center>
<script> 
	jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
      
    var valUptime = Boolean('#time#');
     
      if (valUptime == false) {
  	var date = new Date(_options.valueDate);
	var format = $.datepicker.formatDate('D dd/mm', date);
	var time = " à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes();
        $('.cmd[data-cmd_id=#id#] .datecmd#uid#').empty().append(format+'<br>'+time);
      	}
      else { }
	
	var valueState	= "off";
              	
        if (parseInt(_options.display_value) == 1) {
			valueState = "on";
		} else if (parseInt(_options.display_value) == 0) {
			valueState = "off";
		} else {
			valueState = "wrn";
		}
      
	var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):80;
    var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):80;
    var paramTaille = 'height='+valueH+'px width='+valueL+'px';
    var valueType = ('#type#' !='#'+'type#') ? "#type#":"defaut";
	var iconPath = "plugins/widget/core/template/dashboard/cmd.info.binary.IconInfo/"+valueType+"_"+valueState+".png";
      
        $('.iconCmd#uid#').empty().append('<img src="'+iconPath+'" '+paramTaille+'>');
    	
    } 
      	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

C'est un 1er jet à l'arrache pour voir ce que ça rend à l'utilisation, dans mes tests rapides c'est pas mal

timeTest.jpg (8.93 Kio) Consulté 1647 fois

si d'autres sont intéressés par cette fonction n'hésitez pas à vous manifester

[coke]

pas mal, je test...

[dvb]

Ben pour un 1er jet à l'arrache, bravo !
Et en plus monsieur fait de l'humour

[Salvialf]

Ben pour un 1er jet à l'arrache, bravo !
Et en plus monsieur fait de l'humour

Merci !

ça me plait bien aussi je suis en train de réfléchir aux différentes variantes à proposer (durée, date&heure, heure, etc....)

C'est moi qui ai inclus ma phrase dans le code ? Tu me fais douter d'autant plus que sur Tapatalk je n'ai pas la fin de ce post mais j'ai mis ça sur le fait qu'il y ait du code avant...

Je vais m'occuper de l'ajout de possibilités au paramètre 'time' rapidement donc si vous avez des idées/suggestions c'est le moment.

[dvb]

Merci !

ça me plait bien aussi je suis en train de réfléchir aux différentes variantes à proposer (durée, date&heure, heure, etc....)

Nickel, je veux bien les secondes si possible (via un paramètre à cocher par exemple), car en phase de debug c'est pas mal utile.

C'est moi qui ai inclus ma phrase dans le code ? Tu me fais douter d'autant plus que sur Tapatalk je n'ai pas la fin de ce post mais j'ai mis ça sur le fait qu'il y ait du code avant...

Oui et je ne m'y attendais pas

Je vais m'occuper de l'ajout de possibilités au paramètre 'time' rapidement donc si vous avez des idées/suggestions c'est le moment.

A part la possibilité d'avoir les secondes, rien de plus pour moi.
Thanks !

[dvb]

Autre sujet :
- Je suis à la recherche d'un voyant clignotant.
- Je ne sais pas si cela nécessite un widget spécifique
=> Ou si on peut implémenter quelque chose dans "IconInfo".

@+

[romanais]

Un gif animé ?

[Salvialf]

Autre sujet :
- Je suis à la recherche d'un voyant clignotant.

C'est pour utiliser dans quel but et avec quelles commandes ?

voilà par exemple une solution assez simple à mettre en oeuvre:

Un gif animé ?

[dvb]

C'est dans le cadre d'un widget info binaire. Exemple :
- ILS portail fermé => affiche image led éteinte fixe (gris)
- ILS portail ouvert => affiche led clignotante rouge (au lieu de l'image d'une led rouge fixe)
=> pour attirer l'attention.

gif animé, why not si c'est fonctionnel, mais comment le mettre en place ?

[winhex]

Pour une icône qui est adaptable pour une image (a tester)

J'ajoute une classe qui fait l'animation

Code : Tout sélectionner

<! http://fortawesome.github.io/Font-Awesome/examples/#animated>
<div style="width:90px;min-height:62px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
          </center>
    <script>
jeedom.cmd.update['#id#'] =function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)

      if (_options.display_value == '1') {
         $("#iconCmd#id#").addClass('blink#id#');
            $('#iconCmd#id#').empty().append('<i style="color:#A1392C" class="fa fa-flash" href="#"></i>');
  //  $('#iconCmd#id#').delay(500).fadeTo(500,0).delay(500).fadeTo(500,1, blink);

        }
     else {
         //          $('#iconCmd#id#').empty().append('<i style="color:gray" class="fa fa-flash" href="#"></i>');

       $('#iconCmd#id#').empty().append('<i class="fa fa-blank"></i>');
  //       $('#iconCmd#id#').append('<i class="fa fa-blank"></i>');
         $("#iconCmd#id#").removeClass('blink#id#');
        }
}         
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>
<style>
      .blink#id# {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.0;
  }
}
      </style>
</div>

[Salvialf]

Pour une icône qui est adaptable pour une image (a tester)
J'ajoute une classe qui fait l'animation

Ah oui c'est autre chose que ce que j'ai fait !! Faut que je teste ça absolument ça a l'air puissant sur le papier !

C'est dans le cadre d'un widget info binaire. Exemple :
- ILS portail fermé => affiche image led éteinte fixe (gris)
- ILS portail ouvert => affiche led clignotante rouge (au lieu de l'image d'une led rouge fixe)
=> pour attirer l'attention.

gif animé, why not si c'est fonctionnel, mais comment le mettre en place ?

Toujours via la personnalisation du widget de l'onglet 'code' de la config de la commande... tu remplaces (s'il apparait chez toi) par le code suivant (j'ai juste rempalcé .png par .gif ):

Code : Tout sélectionner

<div style="padding:0px;min-width:90px;min-height:90px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">  
	<center>
    <span class="cmdName" style="padding-top:3px;font-weight:bold;font-size:14px;#hideCmdName#">#name_display#</span>
	<div style="padding-top:4px;" class="iconCmd#uid#"></div>
    <span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor#!important;"></span>
	</center>
<script> 
	jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
      
    var valUptime = Boolean('#time#');
     
      if (valUptime == false) {
  		jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#id#'));
      	}
      else { }
	
	var valueState	= "off";
              	
        if (parseInt(_options.display_value) == 1) {
			valueState = "on";
		} else if (parseInt(_options.display_value) == 0) {
			valueState = "off";
		} else {
			valueState = "wrn";
		}
      
	var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):80;
    var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):80;
    var paramTaille = 'height='+valueH+'px width='+valueL+'px';
    var valueType = ('#type#' !='#'+'type#') ? "#type#":"defaut";
	var iconPath = "plugins/widget/core/template/dashboard/cmd.info.binary.IconInfo/"+valueType+"_"+valueState+".gif";
      
        $('.iconCmd#uid#').empty().append('<img src="'+iconPath+'" '+paramTaille+'>'); 	
    } 
      	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Et tu ajoutes ces 2 images dans IconInfo -> type:gyro

T'en pense quoi ? Tu as le droit d'être sincère je t'en voudrais pas