Bouton Halo pour votre design Jeedom

Bouton Halo pour votre design Jeedom

Aujourd’hui, je vous propose un bouton avec halo pour votre design Jeedom 100% html et css, animé et facilement intégrable.

Vous trouverez ce bouton en 2 version, la première pour une commande unique de type toggle et la seconde pour 2 commandes : commande On et commande Off.

Voici les sources de ce widget version toggle :

<!--
  Widget name : halo_toggle_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/bouton-halo-pour-votre-design-jeedom/
  Origin : https://codepen.io/vineethtrv/pen/QbqMXE
  Last Update : 20200414 - creation
 -->

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'> 

<div id='switch-#id#' 
     class="toggle cursor cmd tooltips cmd-widget" 
     onClick="$('#switch-#id#').toggleClass('toggle-on'); jeedom.cmd.execute({id: '#id#'});"
     data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <div class='toggle-text-off'>OFF</div>
  <div class='glow-comp'></div>
  <div class='toggle-button'></div>
  <div class='toggle-text-on'>ON</div>
</div>

<style type="text/css">
  
  :root {
  		--color_on_light_hex: #89c2da;
  		--color_on_dark_hex: #4b7a8d;
    	--color_on_light_rgb:137, 194, 217;
  	}
  
#switch-#id#{
    width: 75px;
    height: 40px;
}

.toggle{
    position: absolute;
    border: 2px solid #444249;
    border-radius: 20px;
    -webkit-transition: border-color .6s  ease-out;
    transition: border-color .6s  ease-out;
    box-sizing: border-box;
}

.toggle.toggle-on{
    border-color: rgba(var(--color_on_light_rgb), .4);
    -webkit-transition: all .5s .15s ease-out;
    transition: all .5s .15s ease-out;
}

.toggle-button{
    position: absolute;
    top: 4px;
    width: 28px;
    bottom: 4px;
    right: 39px;
    background-color: #444249;
    border-radius: 19px; 
    cursor: pointer;
    -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;
    transition: all .3s .1s, width .1s, top .1s, bottom .1s;
}

.toggle-on .toggle-button{
    top: 3px;
    width: 65px;
    bottom: 3px;
    right: 3px;
    border-radius: 23px;
    background-color: var(--color_on_light_hex);
    box-shadow: 0 0 16px var(--color_on_dark_hex);
    -webkit-transition: all .2s .1s, right .1s;
    transition: all .2s .1s, right .1s;
}


.toggle-text-on{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    text-align: center;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari */    
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    color: rgba(0,0,0,0);
}

.toggle-on .toggle-text-on{
    color: var(--color_on_dark_hex);
    -webkit-transition: color .3s .15s ;
    transition: color .3s .15s ;
}

.toggle-text-off{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    line-height: 36px;
    text-align: center;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    cursor: pointer;

    color: #444249;
}

.toggle-on .toggle-text-off{
    color: rgba(0,0,0,0);
}

/* used for streak effect */
.glow-comp{
    position: absolute;
    opacity: 0;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(var(--color_on_light_rgb), .1);
    box-shadow: 0 0 12px rgba(var(--color_on_light_rgb), .2);
    -webkit-transition: opacity 4.5s 1s;
    transition: opacity 4.5s 1s;
}

.toggle-on .glow-comp{
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
</style>



<script type="text/javascript">
  jeedom.cmd.update['#id#'] = function(_options){
    if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {      
      $('#switch-#id#').addClass('toggle-on');
    } else {
      if ($('#switch-#id#').hasClass('toggle-on')) {
        $('#switch-#id#').removeClass('toggle-on');
      }
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>

A noter :

  • Ce widget s’applique au commande unique, comparée à une commande On et une commande Off, je vous explique un peu plus bas.
  • J’utilise toujours la police Montserrat pour mon design, si vous souhaitez utiliser la police Arial ou une quelconque autre, il vous faudra supprimer la ligne 1 et ‘Montserrat’ ligne 68 et 93.
  • Pour changer la couleur du bouton Ok quand activé, il y a des paramètres à modifier en haut du code source. Je vous conseille de choisir 2 couleurs : la couleur cible (en hex et rgb) et sa version un peu plus foncée (en hex).

Voici les sources en version 2 commandes : commande On et commande Off :

<!--
  Widget name : halo_2cmds_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/bouton-halo-pour-votre-design-jeedom/
  Last Update : 20200422 - version On and Off
 -->

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'> 

<div id='switch-#id#' 
     class="toggle cursor cmd tooltips cmd-widget container-fluid" 
     onClick="$('#switch-#id#').toggleClass('toggle-on'); jeedom.cmd.execute({id: '#id#'});"
     data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <div class='toggle-text-off'>OFF</div>
  <div class='glow-comp'></div>
  <div class='toggle-button'></div>
  <div class='toggle-text-on'>ON</div>
</div>

<style type="text/css">
  
  :root {
  		--color_on_light_hex: #89c2da;
  		--color_on_dark_hex: #4b7a8d;
    	--color_on_light_rgb:137, 194, 217;
  	}
  
#switch-#id#{
    width: 75px;
    height: 40px;
}

.toggle{
    position: absolute;
    border: 2px solid #444249;
    border-radius: 20px;
    -webkit-transition: border-color .6s  ease-out;
    transition: border-color .6s  ease-out;
    box-sizing: border-box;
}

.toggle.toggle-on{
    border-color: rgba(var(--color_on_light_rgb), .4);
    -webkit-transition: all .5s .15s ease-out;
    transition: all .5s .15s ease-out;
}

.toggle-button{
    position: absolute;
    top: 4px;
    width: 28px;
    bottom: 4px;
    right: 39px;
    background-color: #444249;
    border-radius: 19px; 
    cursor: pointer;
    -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;
    transition: all .3s .1s, width .1s, top .1s, bottom .1s;
}

.toggle-on .toggle-button{
    top: 3px;
    width: 65px;
    bottom: 3px;
    right: 3px;
    border-radius: 23px;
    background-color: var(--color_on_light_hex);
    box-shadow: 0 0 16px var(--color_on_dark_hex);
    -webkit-transition: all .2s .1s, right .1s;
    transition: all .2s .1s, right .1s;
}


.toggle-text-on{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    text-align: center;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari */    
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */


    color: rgba(0,0,0,0);
}

.toggle-on .toggle-text-on{
    color: var(--color_on_dark_hex);
    -webkit-transition: color .3s .15s ;
    transition: color .3s .15s ;
}

.toggle-text-off{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    line-height: 36px;
    text-align: center;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    cursor: pointer;

    color: #444249;
}

.toggle-on .toggle-text-off{
    color: rgba(0,0,0,0);
}

/* used for streak effect */
.glow-comp{
    position: absolute;
    opacity: 0;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(var(--color_on_light_rgb), .1);
    box-shadow: 0 0 12px rgba(var(--color_on_light_rgb), .2);
    -webkit-transition: opacity 4.5s 1s;
    transition: opacity 4.5s 1s;
}

.toggle-on .glow-comp{
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
</style>



<script type="text/javascript">
  jeedom.cmd.update['#id#'] = function(_options){
    if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {      
      $('#switch-#id#').addClass('toggle-on');
      if (jeedom.cmd.normalizeName('#name#') == 'on') {
        $('.cmd[data-cmd_uid=#uid#]').hide();
      }else{
        $('.cmd[data-cmd_uid=#uid#]').show();
      }
    } else {
      if ($('#switch-#id#').hasClass('toggle-on')) {
        $('#switch-#id#').removeClass('toggle-on');
      }
      if (jeedom.cmd.normalizeName('#name#') == 'off') {
        $('.cmd[data-cmd_uid=#uid#]').hide();
      }else{
        $('.cmd[data-cmd_uid=#uid#]').show();
      } 
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>

Comment « installer » ce widget sans passer par le Market ?

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. Dans le cas de ce widget, c’est un peu plus compliqué, je vous montre.

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 du bouton halo
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. Voici comment faire dans un exemple de virtuel avec une seule commande On/Off. C’est la différence de ce widget.

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

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

Une commande On/Off plutôt qu’une commande On et une commande Off

Je ne sais pas si vous connaissiez cette astuce, mais j’en profite ici. C’est intéressant dans certains cas de ne pas avoir 2 commandes, une pour On et une pour Off. On parle donc d’une commande unique toggle qui s’occupera d’inverser la valeur du champs.

Dans mon exemple plus haut, d’un virtuel assez simple, j’ai donc créé une commande virtuelle :

Commande unique

La particularité est donc la valeur : not(#[Maison][Test1][Etat]#). La fonction not() inverse la valeur contenu dans #[Maison][Test1][Etat]#. Vous pouvez utiliser le bouton « Rechercher un équipement » pour trouver le champ état de mon exemple.

Commander un équipement tiers

Je vous recommanderais toujours de faire des virtuels pour vos designs et commander vos équipements. La raison est qu’un équipement peut changer et que votre virtuel représente une couche d’abstraction plutôt stable.

Voilà un exemple ou vous commandez avec On et Off un équipement tiers pouvant être une ampoule par exemple.

Réglage virtuel

Conclusion

J’espère que ce bouton Halo pour votre design Jeedom vous sera utile.

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

A bientôt

19 réflexions sur « Bouton Halo pour votre design Jeedom »

  1. Bonjour ,merci pour le partage.Le widget fonctionne nickel sur le dashboard par contre sur un design quand le bouton est ‘off  », alors « on » est « off » son écrit en même temps en superposé! Aurais-tu une solution stp ?

  2. Bonjour,
    Super pour votre site. Très pédagogique et clair. bravo.
    Une question : j’ai intégré ce widget sur mon jeedom (V3) mais le bouton est décalé vers la droite par rapport à l’affichage du nom de l’objet. Une idée de comment faire en sorte que le tout soit centré ?
    Merci

  3. Bonjour, il est super votre site! Bravo pour le boulot!
    J’essaie de mettre ce toggle en V4 sur mes lumières Philips Hue mais je n’y arrive pas… Mon info « etat » ne modifie pas les commandes On et off des lumières… un conseil?

        1. Ca me parait pas si mal et fonctionnel, et plutôt en ligne avec la mise à jour de l’article que j’ai faite récemment … la dernière partie avant la conclusion. Il est de toute manière recommandé de passer par des virtuels la plus part du temps. 🙂

          1. bonjour,
            alors j’ai le même soucis, quand je clique sur le switch rien ne passe (ampoule hue), par contre si je clique sur on ou off cela fonctionne bien. J’ai configuré le virtuel exactement comme Toto2022 mais ça ne marche pas, je vois pas :s
            https://ibb.co/LhnzCJV

            une idée ? Merci.

          2. Bonjour pa,
            pour le coup c’est normal car ton switch On/Off fait juste bouger l’état de ton virtuel. pas de commande de ta lampe. du coup à moins que tu fasse un scénario qui allume ou éteins ta lampe sur changement de valeur de l’état du virtuel, ca ne peut pas fonctionner tel quel.

  4. Bon j’ai trouvé a quel moment le soucis apparaît .Sur un design quand on force la couleur de la police d’une tuile ou ce trouve le bouton (en blanc dans mon cas)le bouton ON fonctionne très bien ,par contre le bouton OFF affiche « ON et OFF » en même temps

  5. J’ai essayer de te contacter hier soir .Je viens de te laisser un screen que tu vois comment ça fait !! Je suis dispo si tu veux me contacter !!

  6. Merci pour ce widget il est vraiment beau.
    sans vouloir abuser, auriez-vous exactement ce widget en binaire ? j’aurai juste voulu avoir ce design pour mes ouvrant pour dire « ouvert » ou « fermé »

  7. Salut, c’est cool !
    Simple et efficace !
    Juste une question, comment diminuer la taille du widget ?
    j’ai fait un virtuel avec toutes mes lampes et je voudrais au moin diviser par 2 la taille du widget.

  8. Hello!
    I love your widget. I´m using it in my desings. I tried to modify the code to create a round (circle) button with similar style, but I failed. It will be great to have a push button to activate some actions, not a toggle. No animation is needed.

    My B plan is screen capture your toggle, photoshop it to make it look rounded and create a PNG for On and a PNG for Off. :-/

    Thx

  9. Bonjour,

    Aurais-tu une astuce pour que le on/off du toggle se mette a jour en fonction de l’état ?

    Merci en tout cas, j’adore tes tips et astuces pour rendre plus conviviale les designs.

Laisser un commentaire

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