Widget led pour commande binaire ou numérique

Widget led pour commande binaire ou numérique

Aujourd’hui je vais vous parler d’un widget led pour commande binaire ou numérique, extrêmement simpliste mais efficace et toujours utile dans un design.

Ce widget est paramètrable (couleurs et taille) ainsi qu’applicable à la fois à une commande info binaire ou numérique. Je vous détaille ci-dessous les 2 versions disponibles.

Version info binaire

Voici les sources de cette version du widget :

<!--
  Widget name : led_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/05/widget-led-pour-commande-binaire-ou-numerique/
  Inspiration : /
  Last Update : 20200419 - creation
 -->
<style>

  :root {
    --color-checked:#ABFF00;
    --color-unchecked:#24E0FF;
	  --size:25px;
  }

 .led-box {
  height: var(--size);
  margin: 10px 0;
  float: left;
}

.led-checked {
  margin: 0 auto;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-checked);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 5px, var(--color-checked) 0 2px 12px;
}

.led-unchecked{
  margin: 0 auto;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-unchecked);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 5px, var(--color-unchecked) 0 2px 12px;
}
</style>

<div class="window cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="led-box">
    <div class="led"></div>
  </div>
</div>

<script>

  var couleurOk = ('#couleur-ok#' !='#'+'couleur-ok#') ? "#couleur-ok#":0;
  var couleurNok = ('#couleur-nok#' !='#'+'couleur-nok#') ? "#couleur-nok#":0;
  var taille = is_numeric('#taille#') ? parseFloat('#taille#'):0;

  if (couleurOk!= 0){
    $(".cmd[data-cmd_id=#id#] .led-checked").css("background-color", couleurOk);
  }
  if (couleurNok!= 0){
    $(".cmd[data-cmd_id=#id#] .led-unchecked").css("background-color", couleurNok);
  }
  if (taille!= 0){
    $(".cmd[data-cmd_id=#id#] .led-checked, .cmd[data-cmd_id=#id#] .led-unchecked").css("width", taille+"px");
    $(".cmd[data-cmd_id=#id#] .led-checked, .cmd[data-cmd_id=#id#] .led-unchecked").css("height", taille+"px");
    $(".cmd[data-cmd_id=#id#] .led-box").css("height", taille+"px");
  }

  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var open = _options.display_value;

    if (open == '1') {
      cmd.find('.led').removeClass('led-unchecked');
      cmd.find('.led').addClass('led-checked');
    } else {
      cmd.find('.led').removeClass('led-checked');
      cmd.find('.led').addClass('led-unchecked');
    }
  }

  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

A noter :

  • Cette version du widget s’applique au commande info binaire,.
  • Vous pourrez changer la couleur (color-checked) du widget quand activé et quand désactivé (color-unchecked), et sa taille en jouant avec les paramètres en haut des sources.
  :root {
    --color-checked:#ABFF00;
    --color-unchecked:#24E0FF;
	--size:25px;
  }
 

Version info numérique

L’idée de ce widget est qu’en fonction de la valeur de l’info, la led change de couleur :

  • Entre 0 et 20%, s’affiche en couleur color-1,
  • Entre 21% et 59%, s’affiche en couleur color-2,
  • Entre 60% et 100%, s’affiche en couleur color-3.

Voici les sources de cette version du widget :

<!--
  Widget name : led_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/05/widget-led-pour-commande-binaire-ou-numerique/
  Inspiration : /
  Last Update : 20200419 - creation
 -->

<style>

  :root {
    --color-1:#ff003b;
    --color-2:#24E0FF;
    --color-3:#ABFF00;
	  --size:25px;
  }

 .led-box {
  height: var(--size);
  margin: 10px 0;
  float: left;
}

.led-1 {
  margin: 0 auto;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-1);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 5px, var(--color-1) 0 2px 12px;
}

.led-2{
  margin: 0 auto;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-2);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 5px, var(--color-2) 0 2px 12px;
}

.led-3{
  margin: 0 auto;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-3);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 5px, var(--color-3) 0 2px 12px;
}
</style>

<div class="window cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="led-box">
    <div class="led"></div>
  </div>
</div>

<script>

  var couleur1 = ('#couleur-1#' !='#'+'couleur-1#') ? "#couleur-1#":0;
  var couleur2 = ('#couleur-2#' !='#'+'couleur-2#') ? "#couleur-2#":0;
  var couleur3 = ('#couleur-3#' !='#'+'couleur-3#') ? "#couleur-3#":0;
  var taille = is_numeric('#taille#') ? parseFloat('#taille#'):0;

  if (couleur1!= 0){
    $(".cmd[data-cmd_id=#id#] .led-1").css("background-color", couleur1);
  }
  if (couleur2!= 0){
    $(".cmd[data-cmd_id=#id#] .led-2").css("background-color", couleur2);
  }
  if (couleur3!= 0){
    $(".cmd[data-cmd_id=#id#] .led-3").css("background-color", couleur3);
  }
  if (taille!= 0){
    $(".cmd[data-cmd_id=#id#] .led-1, .cmd[data-cmd_id=#id#] .led-2, .cmd[data-cmd_id=#id#] .led-3").css("width", taille+"px");
    $(".cmd[data-cmd_id=#id#] .led-1, .cmd[data-cmd_id=#id#] .led-2, .cmd[data-cmd_id=#id#] .led-3").css("height", taille+"px");
    $(".cmd[data-cmd_id=#id#] .led-box").css("height", taille+"px");
  }

  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var percentage_value = _options.display_value;
	console.log(percentage_value);
  if (percentage_value >=0 && percentage_value<=20){
    cmd.find('.led').removeClass('led-2 led-3');
   	cmd.find('.led').addClass('led-1');
  } else if (percentage_value >=21 && percentage_value<=59){
    cmd.find('.led').removeClass('led-1 led-3');
   	cmd.find('.led').addClass('led-2');
  } else {
  	cmd.find('.led').removeClass('led-1 led-2');
    cmd.find('.led').addClass('led-3');
    }
  }

  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>

A noter :

  • Cette version du widget s’applique au commande info numérique.
  • Vous pourrez changer la couleur entre 0 et 20% (color-1), la couleur entre 21 et 59% (color-2), la couleur entre 60 et 100% (color-3) et sa taille en jouant avec les paramètres en haut des sources.
:root {
    --color-1:#ff003b;
    --color-2:#24E0FF;
    --color-3:#ABFF00;
	--size:25px;
  }

Comment « installer » ce widget ?

En version V4, les widgets sont maintenant dans le core Jeedom. Il vous permet la création facile de widget en utilisant les templates mis à disposition.

Et le market semble maintenant cantonné à n’accueillir que les plugins, il vous faudra donc les ajouter manuellement.

Tout d’abord, rendez-vous dans les widgets de Jeedom V4 pour ajouter notre code html :

Il vous faudra ajouter ensuite les paramètre de création de ce nouveau widget :

  • Version : Dashboard (PC) ou mobile
  • Type : Info ou Action
  • Sous-type : plusieurs options en fonction de votre cas d’usage
  • Nom

En fonction de si vous choisissez la version binaire ou numérique, il faudra penser à adapter le sous-type.

Vous pourrez ensuite copier / coller le code html puis sauvegarder votre nouveau widget. Il sera maintenant possible de le sélectionner pour les commandes de vos équipements.

Pour l’exemple, j’ai créé un virtuel avec une info numérique et une commande slider pour me permettre de faire varier la valeur du champs batterie.

Paramètrage du virtuel

Attention à votre virtuel, et les valeurs … c’est souvent la cause des difficultés d’intégration des widgets.

Et avec cette configuration, vous devriez avoir le rendu attendu.

Astuce si après modifications, rien ne se passe

Vous essayer peut-être de faire des modifications / personnalisations, mais une fois réalisées, rien ne se passe. Pas de panique, je vous conseille d’appliquer un autre widget à votre commande, sauvegarder puis remettre celui où vous avez fait vos modifications. Et maintenant Jeedom affichera les nouveautés!

Conclusion

J’espère que ce widget led pour commande binaire ou numérique vous sera utile dans vos designs Jeedom. Il est totalement configurable et pourra s’adapter à vos thèmes.

N’hésitez pas à faire vos feedbacks ici ou sur ma page facebook.

A bientôt

4 thoughts on “Widget led pour commande binaire ou numérique

  1. Bonjour,

    J’utilise Jeedom depuis plus de 4 ans donc j’ai eu le temps de bien galérer pour exploiter les possibilités offertes .

    Je n’ai pas encore eu besoin d’utiliser les ressources que tu proposes sur ton site mais j’aurais rêver pouvoir en avoir connaissance a mes débuts !

    Aujourd’hui, non seulement je compte utiliser ce widget dans mes designs, mais aussi le widget « Multi-Icones » : il est possible d’avoir le même résultat autrement, mais ta méthode permet une flexibilité super appréciable (tout comme le widget « multi-action » du populaire Salvialf que j’utilise sans modération !).

    Donc ce message pour t’encourager de continuer de nous faire rêver avec tes divers menus et widgets et pour te remercier pour le temps que tu prends a partager tout ça 😉

    1. Je pense que c’est pas blanc ou noir 😉
      Simplicité, peut-être, et encore que c’est discutable. Evolutivité en fonction des changements du Core de Jeedom, oui je suis d’accord. Dans tous les cas, c’est à mettre en perspective de la flexibilité que tu souhaites avoir.

      Pour exemple, si tu souhaites jouer sur les couleurs, les effets (halo, …), le code ci-dessus est très facilement modifiable. (comparé à refaire sous photoshop des leds de couleur).

      Et c’est comme tout, si tu souhaites du standard c’est souvent plus facile à réaliser que du flexible et customisable.

      Ceci étant dit, le rendu dans l’article est très sympa 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *