Widget Multi Icône pour votre design Jeedom

Widget Multi Icône pour votre design Jeedom

Je vous présente un widget Multi Icône pour votre design Jeedom. J’avais besoin pour un design d’avoir des boutons uniformes, mais avec des icônes différents, sans effet de changement de couleurs, sans toggle, juste des boutons.

Du coup, voici un bouton simple mais pour lequel on peut passer plusieurs paramètres optionnels pour le personnaliser à souhait : taille du bouton, de la bordure, de l’icône, la couleur, et bien sur l’icône en lui même. Je pioche directement l’icône depuis la librairie en ligne font-awesome que vous pouvez retrouver ici : https://fontawesome.com/icons

Voici les sources de ce widget :

<!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id='button-#id#'
      class="cursor cmd tooltips cmd-widget container-fluid"
      onClick="jeedom.cmd.execute({id: '#id#'});"
      data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">

   <div class="button">
     <i id="icon-#id#" class="fa fa-lock"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('#taille#') ? parseFloat('#taille#'):60;
     var borderSize = is_numeric('#taille_bordure#') ? parseFloat('#taille_bordure#'):3;
     var iconSize = is_numeric('#taille_icone#') ? parseFloat('#taille_icone#'):30;
     var color = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"white";

     $("#button-#id# .button").css("border", borderSize+"px solid "+color);
     $("#button-#id# .button").css("border-radius", buttonSize+"px");
     $("#button-#id# .button").css("color", color);
     $("#button-#id# .button").css("width", buttonSize+"px");
     $("#button-#id# .button").css("height", buttonSize+"px");
     $("#button-#id# .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-#id# .button i.fa, #button-#id# .button i.fas, #button-#id# .button i.fab").css("line-height",lineheight+"px");
     $("#button-#id# .button i.fa, #button-#id# .button i.fas, #button-#id# .button i.fab").css("color",color);

     var type = ('#type#' !='#'+'type#') ? "#type#":"fa";
     var icon = ('#icone#'!='#'+'icone#') ? "#icone#" : "fa-lock";
     $("#icon-#id#").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-#id#").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-#id#").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script>

A noter :

  • Ce widget s’applique aux commandes d’action. C’est en effet un bouton.
paramètres optionnels du widget
  • Vous pourrez paramétrer ce bouton en passant des paramètres optionnels :
    • couleur : couleur choisie tant pour le cercle que pour l’icône
    • icône et type sont 2 valeurs qui proviennent de font-awesome (voir la capture d’écran ci-dessous)
    • taille : taille du widget globale
    • taille_bordure : épaisseur du cercle
    • taille_icone : taille de l’icône, je vous conseille diviser la taille du widget par 2.
vue icône de font-awesome
Vue d’un icône sélectionné après recherche.

Comment « installer » ce widget ?

Comme vous le savez maintenant surement, en version V4, les widgets sont maintenant dans le core Jeedom et le market widget n’existe plus.

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
Création widget multi icône
4 – Paramètrage

Il vous faudra 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, quelque soit le type.

Par exemple dans le cas d’une commande On/Off

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.

Conclusion

C’est en effet un simple bouton mais qui peut remplir de nombreux usages :

  • On et Off d’une commande
  • + et – du volume de votre TV connectée
  • mode de présence : à la maison, au travail, …
  • play, pause, … d’un lecteur multimédia

J’espère que ce bouton Widget Multi Icône pour votre design Jeedom vous sera utile. Il est totalement vraiment multi-usage, simple, configurable et pourra s’adapter à vos thèmes en jouant sur les couleurs et styles.

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

A bientôt

7 réflexions sur « Widget Multi Icône pour votre design Jeedom »

  1. Top comme widget une fois de plus !
    Super pratique pour avoir des boutons personnalisés différents pour des équipements ayant pas mal de commande actions associés… Beau boulot.
    Je vais le tester de suite dans un design V3 pour voir 🙂

    1. Ca marche parfaitement en V3.
      J’ai ajouté pour ma part un paramètre « alttext » pour avoir un texte affiché en rollover sur l’icône.

  2. Bonjour, j’ai un soucis pour intégrer ce widget dans un design.

    Quand j’ajoute uniquement une commande d’un virtuel, ça m’affiche « undefined » au lieu d’afficher le bouton de commande.

    Si par contre j’ajoute l’équipement complet (virtuel), le bouton apparait bien comme il faut.

    Je précise que sur le Dashboard, j’ai bien le bouton qui s’affiche.

    Une idée d’ou vient le problème ?

    Merci 😉

      1. Bonsoir Florian,

        Merci de ton retour et de ton aide. Tu trouveras ci dessous les captures qui me semble utiles. Si tu as besoins de plus d’éléments, n’hésite pas.

        Capture du message que ça génère sur le design en ajoutant la commande en question : https://ibb.co/JckTRXk

        Capture de l’affichage du bouton sur dans la tuile du Dashboard : https://ibb.co/7kkf7J3

        Capture du menu configuration/commande/affichage : https://ibb.co/h1FvC5s

        Capture du code que j’ai copier/coller : https://ibb.co/QCwzF1t
        https://ibb.co/nn4B55Z

        Merci encore

Laisser un commentaire

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