Partage Bouton NAK Dark Antracite ouvert à contribution

[nak]

Lors de mon premier partage plusieurs amis utilisateurs ont demandé une série de bouton pour le fond dark (en effet je n’utilise que le fond clair) en voici chose faite avec même une petite amélioration puisque il est possible de mettre soit du texte ou alors mieux des logo de jeedom colorés type jeedom-on/jeedom-off.
En espérant que cela fait plaisir à beaucoup d’entre vous n’hésité pas a enrichier le sujet par vos remarque et surtout vos améliorations cela ne peu que nous avancé tous.
Voici le code du widget:

<!--
  Widget Bouton NAK Dark Antracite
par NAK le10:01:2021
 -->
<div style="margin-top:5px;" 
     class="cmd cmd-widget reportModeHidden" 
     data-type="action" 
     data-subtype="other" 
     data-template="default" 
     data-cmd_id="#id#" 
     data-cmd_uid="#uid#" 
     data-version="#version#" 
     data-eqLogic_id="#eqLogic_id#">
  
    <div class="content-xs">
    
        <a class="action" 
       
           style="border-radius: 3px;
			
                  background: #434343;color: white!important; 
			
                  box-shadow:  inset 2px 2px 3px #1b1b1b, 
                               inset -2px -2px 3px #6b6b6b;
              
                  margin:5px;line-height:25px; padding : 5px 10px 5px 10px; 
              
              text-align:center;">#name_display#</a>
  </div>
  
    <script>
    $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
    if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') 
        != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other'
    && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
      $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }
 
    </script>
</div>

voici le rendu sur le dashboard sagissant d’une commande numérique avec un sous type defaut

voici le virtuel à préparer

ATTENTION, vous observez que il y a deux icones système sous l’icône on et off.
Quand on rajoute une icône c’est l’icone qui prend la main et non pas le nom ON ou OFF.
Donc nous avons deux possibilités, soit mettre l’icône et dans ce cas là le rendu est celui de l’image soit ne pas mettre l’icône et dans ce cas là le bouton affichera ON ou OFF que l’on peu aisément les remplacer par ouvert ou fermé, monter ou descendre celon le besoin de chacun.
Comment accéder aux icones jeedom?

• Cliquer sur icône dans le virtuel.
• Choisissez la couleur des icones vert dans ce cas là
• Chercher l’icône jeedom-on
• Choisir et enregistrer le vistuel
• Cliquez sur l’icône dans le virtuel pour off
• choisissez la couleur rouge
• Chercher l’icone jeedom-off
• Choisir et sauvegarder le virtuel

Vous allez avoir le résultat suivant