[Présentation Design] Louis Reymond

[Louis_Reymond]

En effet c’etait une conversation privé, voici ce qu’il y avait dans le lien:

J’ai suivi ce tuto: Tuto : créez votre réveil domotique et scénarisez votre saut du lit! | Ça Sert A Quoi?

Voici le code pour les cases à cocher à ajouter dans le partie code de la section Widgets:

<!-- ** Forked from https://codepen.io/sgestrella/pen/bJNqGy ** -->

<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:15px;
  font-weight:bold;
  text-align:right;
  position: relative;
  right: 25px;
}
.customcheckbox#id# {
  float:right;
  margin-top:7px;
  height:20px;
  width:20px;
  --size:17px;
  --checkcolor:#C3C3C3;
  position:relative;
  right: 30px;
}
.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:2px solid #C3C3C3;
}
.customcheckbox#id# input[type="checkbox"]:checked + label::before {
  border:2px solid #C3C3C3;
}
.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>

Concernant le image des boutons les voici:

Cordialement.

Louis