Widget Checkbox ou Cases à cocher

[Ayb7]

Hello,

J’essaie depuis qq jours de faire fonctionner un widget Checkbox ou Case à cocher pour sélectionner les jours de la semaine (récupérer sur un tuto Réveil pour jeedom) Créez votre réveil domotique.

L’affichage est correcte, mais lorsque je coche des jours, l’info n’est pas prise en compte et mise à jour dans l’info du virtuel.

J’utilise des virtuels « action Curseur » et « Info Binaire »

Le code du widget récupéré semble destiné à de la V3.
En V4 ça ne fonctionne pas sur mon installation.
En mettant les doigts dans le code, mes résultats ne sont pas concluants.

Quelqu’un utilise-t-il ce genre de widget « Checkbox » ou « Case à cocher » ?

<div style="padding:10px; width:250px; height:40px;" class="cmd cmd-widget container-fluid #history#" data-type="info" data-subtype="binary" data-template="BadgeDesign" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <span class="displayDay#id#">#name_display#</span>
  <span class="customcheckbox#id#">
  	<input class="Toggle#uid# action iconCmd" type="checkbox" id="ccb0#uid#" />
    <label for="ccb0#uid#"></label>
  </span>
  
<style>
.displayDay#id# {
  display:inline-block;
  width:150px;
  line-height:30px;
  font-size:18px;
  font-weight:bold;
  text-align:right;
  margin-right:10px;
  color: #CECECE;
}
.customcheckbox#id# {
  float:right;
  margin-top:2px;
  height:30px;
  width:30px;
  --size:26px;
  --checkcolor:black;
 position:relative;
}
.customcheckbox#id# input[type="checkbox"] {opacity:0;}
.customcheckbox#id# label {position:absolute;top:0;left:0;cursor:pointer;}
.customcheckbox#id# label::before, .customcheckbox#id# label::after {
  content: "";
  display:inline-block;
  position:absolute;
}
.customcheckbox#id# label::before {
  height:var(--size);
  width:var(--size);
}
.customcheckbox#id# label::after {
  height:calc(var(--size) * 0.375);
  width:calc(var(--size) * 0.5625);
  border-left:3px solid var(--checkcolor);
  border-bottom:3px solid var(--checkcolor);
  transform: rotate(-45deg);
  left:calc(var(--size) * 0.22);
  top:calc(var(--size) * 0.2);
}
.customcheckbox#id# input[type="checkbox"] + label::after {
  content:none;
}
.customcheckbox#id# input[type="checkbox"]:checked + label::after {
  content:"";
}
.customcheckbox#id# input[type="checkbox"] + label::before {
  border:1px solid #FFF;
  background-color: #bababa;
  border-radius : 5px;  
  /*box-shadow: 1px 2px 9px 0 #000;  */
  /*box-shadow: #000 4px 4px;*/
}
.customcheckbox#id# input[type="checkbox"]:checked + label::before {
  border:1px solid #FFF;
  background-color: #bababa;  
  border-radius : 5px;  
  /*box-shadow: 1px 2px 9px 0 #000;  */
  /*box-shadow: #000 4px 4px;*/
}
.customcheckbox#id# input[type="checkbox"]:focus + label::before {
    outline: var(--bordercolor) auto 5px;
}
</style>
  
  <script>
    $(".cmd[data-cmd_uid=#uid#] .slider.slider-horizontal").css('z-index',1);
    jeedom.cmd.update['#id#'] = function(_options){
      $(".cmd[data-cmd_id=#id#] .slider").slider({
        min: ('#minValue#' == '') ? 0 : parseInt('#minValue#'),
        max: ('#maxValue#' == '') ? 100 : parseInt('#maxValue#'),
        value: ('#state#' == '') ? 0 : parseInt(_options.display_value),
        slide: function(event, ui) {
          $(".value#uid#").show()
          $(".value#uid#").html(ui.value);
        }
      })
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    $('.cmd[data-cmd_uid=#uid#] .imgCmd#id#').off().on('click', function () {
         jeedom.cmd.execute({id: '#id#'});
    });
    });
  </script>
</div>

[Fabrice]

Bonjour,

J’ai suivie ce tutoriel à la lettre, puis, avec les différentes versions de Jeedom, il ne fonctionne plus (le tuto en ligne n’est plus bon).

Voici le code que j’utilise (il n’est pas de moi, mais a été adapté par des gentils membres de cette communauté) :

Check Slider Jour

<div style="width:140px;height:30px;" class="cmd reportModeHidden cursor cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
 <span class="displayDay#id#">#valueName#</span>
  <span class="customcheckbox#id#">
  <input class="Toggle#uid#" type="checkbox" id="ccb0#uid#" >
  <label for="ccb0#uid#"></label>
  </span>
  <style>
.displayDay#id# {
  display:inline-block;
  width:100px;
  line-height:30px;
  font-size:20px;
  font-weight:normal;
  text-align:right;
}
.customcheckbox#id# {
  float:right;
  margin-top:2px;
  height:30px;
  width:30px;
  --size:26px;
  --checkcolor:white;
 position:relative;
}
.customcheckbox#id# input[type="checkbox"] {opacity:0;}
.customcheckbox#id# label {position:absolute;top:0;left:0;cursor:pointer;}
.customcheckbox#id# label::before, .customcheckbox#id# label::after {
  content: "";
  display:inline-block;
  position:absolute;
}
.customcheckbox#id# label::before {
  height:var(--size);
  width:var(--size);
}
.customcheckbox#id# label::after {
  height:calc(var(--size) * 0.375);
  width:calc(var(--size) * 0.5625);
  border-left:3px solid var(--checkcolor);
  border-bottom:3px solid var(--checkcolor);
  transform: rotate(-45deg);
  left:calc(var(--size) * 0.22);
  top:calc(var(--size) * 0.2);
}
.customcheckbox#id# input[type="checkbox"] + label::after {
  content:none;
}
.customcheckbox#id# input[type="checkbox"]:checked + label::after {
  content:"";
}
.customcheckbox#id# input[type="checkbox"] + label::before {
  border:1px solid #FFF;
}
.customcheckbox#id# input[type="checkbox"]:checked + label::before {
  border:1px solid #FFF;
}
.customcheckbox#id# input[type="checkbox"]:focus + label::before {
    outline: var(--bordercolor) auto 5px;
}
</style>
  <script>
 $('.Toggle#uid#').empty();
if ('#state#' == '0' || '#state#' == 0 || '#state#' == '') {
                 $('.Toggle#uid#').prop('checked', false);
        }else {
               $('.Toggle#uid#').prop('checked', true);
          }
             
      $('.Toggle#uid#').on('click', function() {
             if ( $('.Toggle#uid#').is( ":checked" ) ){
                jeedom.cmd.execute({id: '#id#', value: ('1')});
            } else {
                jeedom.cmd.execute({id: '#id#', value: ('0')});
          }
        });
    </script>

Mais, tout cela est devenu inutile pour Jeedom v4, un plugin tiers remplace très avantageusement ce virtuel, c’est le plugin : programmateur de @Caelion

C’est ici ;
Jeedom Market - Plugin Programmateur

[Ayb7]

Bonjour @Fabrice

Super sympa votre retour. De ce que j’ai lu dans votre réponse, c’est très encourageant et ça devrait répondre complètement à ce que je cherche.

J’essaie dans le week end et je vous tiens au courant.

[Ayb7]

@Fabrice

Je viens de tester :

• le widget
• le plugin Programmateur

Les deux solutions fonctionnent : un week-end qui commence très bien.

Merci à vous d’avoir partagé votre retour d’expérience.