Slider On Off - un seul bouton V4

Utilisation du core de Jeedom Widgets
1

Bonjour à tous!
Je débute sur Jeedom et je n’arrive pas a faire un slide ON OFF avec un seul bouton…
J’ai copié le code ci-dessous afin de créer un widget sur base du code.

Je passe ensuite par un virtuel mais je n’arrive pas a avoir un bouton unique qui inverse l’état…

Pourriez vous me dire ce qui coince?

Merci d’avance!

Voici un capture de mon virtuel:

image
image2539×298 29.9 KB

Et le code du widget:


<!--
  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>
2

Bonsoir @Laurent05 , et bienvenu sur le community.

pour débuter, lorsque tu partage du code, utilise le bouton </> prévu a cet effet :
image

Ton code est illisible et incomplet, te ne fera pas un widget avec ceci, et je te conseil de te familiariser avec Jeedom avant de te lancer dans du widget code.

Dans la commande onoff (toggle), tu as une parenthèse en trop.
Sur la capture du virtuel on peut voir que tu as fait un bouton « on » et « toggle », mais il manque le off.
Il faut ensuite lier les commande Action a ta commande Info comme ceci :

image
image998×328 20.3 KB

Voici ce que je te propose pour comprendre au mieux,
part d’un virtuel vierge, puis importe le template « eclairage » :

image
image1327×243 26.1 KB

les commandes seront automatiquement créer.
il te restera a appliquer le widget core « BinarySwitch » sur les 2 commandes on et off :

image
image1738×158 19.6 KB

image
image1642×380 37 KB

Résultat :

image

Je te conseil, de faire plus connaissance avec Jeedom :wink:, en lisant la documentation ci-dessous :

https://doc.jeedom.com/fr_FR/core/4.2/widgets

Bonne continuation et bonne soirée.

5 « J'aime »
3

Bonsoir @Phpvarious ,
Tout d’abord merci de ton aide et tes explications claires!

Cependant en suivant tes explications, voici le résulat:
Toujours un bouton On et un bouton Off… et le curseur ne change pas…
Désolé et encore merci de ton aide. :slight_smile:
Capture

Concernant le widget avec le code, lui change lorsque je clique sur ON ou OFF mais je n’ai pas un seul bouton non plus…
Capture2

Capture3
Capture32338×405 37.3 KB

4

Bonsoir,

Tu n’a pas entièrement suivi mes explications :wink:, si tu était passé par « le template » tes commandes seraient nommées on et off, hors il semble que tu les as nommées Allumer et Eteindre !
renomme les avec on et off, et 1 seul bouton devrait s’afficher. Si ce n’est pas le cas vérifie que tes commande action sont liés a la commande info :

image
image716×214 10.4 KB

Le on n’est pas lié a ta commande info Etat !

image
image770×348 30.4 KB

J’ai regardé le code du widget dans ton premier Post. celui-ci n’est pas à appliquer sur les commandes on et off mais sur un bouton toggle (not(#[…]#). et en plus le code n’est pas entièrement compatible !
applique le widget disponible ci-dessous (version modifiée) sur un toggle :

Widget code toggle 
<div class="cmd #history# tooltips cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <template></template>
  <!-- 
    Widget name : cmd.action.other.halo_toggle_switch
    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 : 07/03/2022 - @Phpvarious - Compatible V4 ...
    Update :      14/04/2020 - @geqr - creation.
 -->
  <div id='switch-#id#' class="toggle#id#">
    <div class='toggle-text-off#id#'>OFF</div>
    <div class='glow-comp#id#'></div>
    <div class='toggle-button#id#'></div>
    <div class='toggle-text-on#id#'>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#id# {
      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#id#.toggle-on#id# {
      border-color: rgba(var(--color_on_light_rgb), .4);
      -webkit-transition: all .5s .15s ease-out;
      transition: all .5s .15s ease-out;
    }
    
    .toggle-button#id# {
      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#id# .toggle-button#id# {
      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#id# {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      line-height: 38px;
      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#id# .toggle-text-on#id# {
      color: var(--color_on_dark_hex);
      -webkit-transition: color .3s .15s ;
      transition: color .3s .15s ;
    }
    
    .toggle-text-off#id# {
      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#id# .toggle-text-off#id# {
      color: rgba(0,0,0,0);
    }

    /* used for streak effect */
    .glow-comp#id# {
      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#id# .glow-comp#id# {
      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#id#')
      } else {
        if ($('#switch-#id#').hasClass('toggle-on#id#')) {
          $('#switch-#id#').removeClass('toggle-on#id#')
        }
      }
    }
    $('.cmd[data-cmd_uid=#uid#] #switch-#id#').off().on('click', function () { jeedom.cmd.execute({id: '#id#'}) })
    jeedom.cmd.update['#id#']({display_value:'#state#'})
  </script>
</div>
5

Encore merci de ton temps.
J’ai bien re-suivit a la lettre en passant par le template mais toujours le meme soucis.
Voici les captures:

virtuel
virtuel2311×297 21 KB

virtuel2
virtuel22066×593 55.7 KB

citerne eau
citerne eau2329×493 53.9 KB

-Je fait bien un virtuel en passant par le template eclairage
-j’applique au commannde on et off le widget « binary switch »
-ensuite je vais sur mon équipement et je met le widgget « binary switch » sur le on(allumer) et le off ( eteindre)

Je m’arraches les cheveux :frowning:

6

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.