Widget led pour commande binaire ou numérique

5 mai 2020 florian Commentaires 6 commentaires

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 :

0 - outils widget — 1 – Menu outils puis widgets

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.

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

1 - Ecran des commandes du virtuel — 1 – Sur l’écran commande, clic sur le bouton des paramètres de la commande info

2 - Clic sur affichage — 1 – Sur l’écran commande, clic sur le bouton des paramètres de la commande info

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

6 réflexions sur « Widget led pour commande binaire ou numérique »

Mathieu dit :

6 mai 2020 à 21 h 46 min

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 😉

Répondre
1. florian dit :
  
  7 mai 2020 à 22 h 25 min
  
  Merci beaucoup Mathieu, j’apprécie énormément ton message.
  Excellente soirée 🙂
  
  Répondre
Vald dit :

17 juin 2020 à 22 h 52 min

Humf, il y a beaucoup plus simple.
cf ce post sur la communauté : https://community.jeedom.com/t/tableau-personnalise-suivi-niveau-de-batterie/31120/5

Répondre
1. florian dit :
  
  3 juillet 2020 à 15 h 28 min
  
  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 😉
  
  Répondre
Idaho947 dit :

28 septembre 2020 à 22 h 50 min

Bonsoir,
Merci pour ce widget simple. Je l’ai appliqué a certains de mes état binaire mais je n’ai plus les nom correspondant même si la case Name est cochée. Comment faire pour le récupérer ?

Répondre
1. florian dit :
  
  2 octobre 2020 à 14 h 11 min
  
  Bonjour,
  Merci pour le feedback.
  En ajoutant simplement ligne 56 par exemple : #name# dans une balise html p. Tu pourras la mettre ailleurs ou le styliser aussi.
  
  Répondre

Ma-maison-intelligente

Widget led pour commande binaire ou numérique

5 mai 2020 florian Commentaires 6 commentaires

Version info binaire

Version info numérique

Comment « installer » ce widget ?

Astuce si après modifications, rien ne se passe

Conclusion

6 réflexions sur « Widget led pour commande binaire ou numérique »

Laisser un commentaire Annuler la réponse

Version info binaire

Version info numérique

Comment « installer » ce widget ?

Astuce si après modifications, rien ne se passe

Conclusion

Partager :

6 réflexions sur « Widget led pour commande binaire ou numérique »

Laisser un commentaire Annuler la réponse