Reveil sous jeedom par virtuel et widget

LAGUICHE · Mai 21, 2022, 2:43

Bonjours a tous , une petite piste pour un problème.

J’utilise depuis 2017 une fonction réveil en passant par un virtuel pour le choix on/off réveil , l’heure de lever , et les jours suivant le taf , le tout associé a un scenario déclenchant une box alexa (annonce et radio)

Hors depuis 2 jours , tout fonctionne sauf que je ne peut plus choisir aucun jour ???

Je peut mettre un curseur sur les jours a choisir , mais ceux ci ne reste pas , pas conservés ???

ci joint le widget gérant le curseur des jours

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

une variable aurait elle changée après la dernière update de jeedom ??

ou autre piste ,

Merci d’avance.

Phpvarious · Mai 21, 2022, 4:45

Bonjour,
Si tu veut de l’aide, il serait bien de formater le code avec l’option mis a disposition :

Parce que la c’est illisible, et il semble qu’il manque des éléments (html…) dans ton message.
Edit :
Peut-être que ce post peut te donner la solution :

Ayb7 · Mai 21, 2022, 7:08

Je n’arrive pas à copier tout le code.
Je te le renvoie plus tard depuis un pc.

LAGUICHE · Mai 21, 2022, 7:12

OK merci , des le code complet je fait l’essai.

Pour l’instant je teste encore .

LAGUICHE · Mai 21, 2022, 8:18

Merci , je viens de faire l’essai , le curseur apparait bien des son positionnement par exemple sur le design , mais de retour a nouveau dessus , plus rien n’est coché ??

Ayb7 · Mai 21, 2022, 8:27

As tu paramètré ton virtuel en suivant ce modèle ?

LAGUICHE · Mai 21, 2022, 8:38

Absolument

c’est depuis deux jours quand j’ai updater en 4.2.16

Ayb7 · Mai 21, 2022, 8:47

Ok, on a le meme virtuel.

Je suis en 4.2.16, je viens de tester la checkbox.
RAS. Ça fonctionne.

Si tu as copié le code dans le widget code que tu appliques sur chaque Action curseur, je sais pas quoi dire de plus…

Ayb7 · Mai 21, 2022, 8:52

En complément as tu essayé de tester une checkbox mais à partir du plugin programmateur qu’il va peut être falloir que tu installes ?

LAGUICHE · Mai 21, 2022, 9:36

Pour te dire j’étais déjà partie sur cette solution qui fonctionne parfaitement.

Mais j’aime allez au bout des choses et la de retour dans le widget je compare le nb ligne qui correspond bien a ce que tu ma envoyer (on sait jamais sur une copie), sur le cote gauche on dispose de la copie du virtuel du dashboard ok.
La as tout hasard je coche les curseurs du lundi au dimanche et sauvegarde.
Je sort des widgets , retour sur le dashboard et la les curseur sont bien présent . ??
je sort du dashboard , retour sur design tablette , toujours présent ??
Je m’amuse donc de supprimer les curseurs sur lundi et jeudi , lls sont bien conservés
Je les remet et refait les test , tout fonctionne a nouveau .

Incompréhensif et j’en connais pas la raison initiale ??? problème sur variable ou ??

merci pour ton aide et pour ceux qui pourrais avoir ce problème tester ceci

@+ a tous

Phpvarious · Mai 21, 2022, 9:42

Alors je vient de regarder un peu ton problème, en faite la méthode jeedom.cmd.execute pour un slider n’est pas bonne, teste ceci :

$('.Toggle#uid#').on('click', function() {
             if ( $('.Toggle#uid#').is( ":checked" ) ){
                jeedom.cmd.execute({id: '#id#', value: {slider: ('1')}});
            } else {
                jeedom.cmd.execute({id: '#id#', value: {slider: ('0')}});
          }
        });

LAGUICHE · Mai 22, 2022, 7:15

J’ai cela exactement :

$('.Toggle#uid#').on('click', function() {
             if ( $('.Toggle#uid#').is( ":checked" ) ){
                jeedom.cmd.execute({id: '#id#', value: {slider: 1}});
            } else {
                jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
          }
        });

Phpvarious · Mai 22, 2022, 7:32

Bonjour,
c’est déja pas pareil que dans ton 1er Post !
le mieux est que tu copie/colle exactement ce que tu as dans ton widget code, pour enfin avoir une base de travail commune.

LAGUICHE · Mai 22, 2022, 7:38

bonjour , je te donne la modification faite par AYB7 qu’il ma transmis :

#valueName# .displayDay#id# { display:inline-block; width:200px; line-height:30px; font-size:18px; font-weight:bold; text-align:center; margin-right: 50px; color: #CECECE; } .customcheckbox#id# { float:right; margin-top:2px; height:30px; width:30px; --size:26px; --checkcolor:black; margin-right:40px; 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; } $('.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: {slider: 1}});
        } else {
            jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
      }
    });
</script>

LAGUICHE · Mai 22, 2022, 7:40

<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 class="customcheckbox#id#">
  <input class="Toggle#uid#" type="checkbox" id="ccb0#uid#" >
  <label for="ccb0#uid#"></label>
  </span></span>
  <style>
.displayDay#id# {
      display:inline-block;
      width:200px;
      line-height:30px;
      font-size:18px;
      font-weight:bold;
      text-align:center;
      margin-right: 50px;
      color: #CECECE;
}
.customcheckbox#id# {
      float:right;
      margin-top:2px;
      height:30px;
      width:30px;
      --size:26px;
      --checkcolor:black;
     margin-right:40px;
     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>
 $('.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: {slider: 1}});
            } else {
                jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
          }
        });
    </script>

Phpvarious · Mai 22, 2022, 10:18

Bon, il y a bien 2/3 petites erreurs, mais rien qui n’a l’air d’empêcher le widget de fonctionner.
Je te propose de tester ce widget :

Code

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!--
Base du widget récuperé sur le community :
https://community.jeedom.com/t/reveil-sous-jeedom-par-virtuel-et-widget/84693
ChangeLog :
2022-05-22 - @Phpvarious : 
- Modification/adaptation V4.
- Ajout paramètres optionnels.

-->
  <template>
    <div>checkBoxStyle : Effet sur la checkbox. (Ex: 1 | Défaut : 0)</div>
    <div>checkBoxColor : Couleur contour de la checkBox. (Ex: red, #ffffff | Défaut : #C3C3C3)</div>
    <div>checkBoxBackground : Couleur de fond de la checkBox. (Ex: red, #ffffff | Défaut : transparent)</div>
    <div>checkBoxRadius : défini les coins arrondis (Ex : 5 | Défaut : 0)</div>
    <div>checkColor : Couleur "V" de la checkbox. (Ex: red, #ffffff | Défaut : #C3C3C3)</div>
    <div>marginBottom : Espace entre les checkbox. (Ex: 10 | Défaut : 17)</div>
  </template>
  <div class="widgetCheckBox#id#">
    <div class="displayDay#id#">#valueName#</div>
    <span class="customcheckbox#id#">
      <input class="Toggle#uid#" type="checkbox" id="ccb0#uid#" />
      <label for="ccb0#uid#"></label>
    </span>
  </div>
  <style>
    :root {
      --size#id#: 17px;
      --checkboxcolor#id#: #C3C3C3;
      --checkboxBackground#id#: transparent;
      --checkBoxRadius#id#: 0px;
      --checkcolor#id#: #C3C3C3;
      --marginBottom#id#: 17px;
      --height#id#: 0.375;
      --width#id#: 0.5625;
      --left#id#: 0.22;
      --top#id#: 0.2;
    }
    .widgetCheckBox#id# {
       /* height: 30px;*/
      margin-bottom: var(--marginBottom#id#);
    }
    .displayDay#id# {
      display: inline-block;
      width: 100px;
      line-height: 15px;
      font-size: 15px;
      font-weight: bold;
      text-align: right;
      padding-right: 10px;
    }
    .customcheckbox#id# {
      width: 40px;
      position: relative;
    }
    .customcheckbox#id# input[type="checkbox"] {
      visibility: hidden;
    }
    .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#id#);
      width:var(--size#id#);
      background-color: var(--checkboxBackground#id#);
      border-radius : var(--checkBoxRadius#id#);
    }
    .customcheckbox#id# label::after {
      height:calc(var(--size#id#) * var(--height#id#));
      width:calc(var(--size#id#) * var(--width#id#));
      border-left:3px solid var(--checkcolor#id#);
      border-bottom:2px solid var(--checkcolor#id#);
      transform: rotate(-45deg);
      left:calc(var(--size#id#) * var(--left#id#));
      top:calc(var(--size#id#) * var(--top#id#));
    }
    .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 var(--checkboxcolor#id#);
}
  </style>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      if ($.issetWidgetOptParam('#checkBoxStyle#', 'checkBoxStyle') && !isNaN('#checkBoxStyle#')) {
        if ('#checkBoxStyle#' == 1) {
        document.documentElement.style.setProperty('--width#id#', 1.2)
        document.documentElement.style.setProperty('--left#id#', 0.1)
        document.documentElement.style.setProperty('--top#id#', 0)
        }
      }
      if ($.issetWidgetOptParam('#marginBottom#', 'marginBottom')) {
        document.documentElement.style.setProperty('--marginBottom#id#', '#marginBottom#'+'px')
      }
      if ($.issetWidgetOptParam('#checkBoxColor#', 'checkBoxColor')) {
        document.documentElement.style.setProperty('--checkboxcolor#id#', '#checkBoxColor#')
      }
      if ($.issetWidgetOptParam('#checkBoxBackground#', 'checkBoxBackground')) {
        document.documentElement.style.setProperty('--checkboxBackground#id#', '#checkBoxBackground#')
      }
      if ($.issetWidgetOptParam('#borderRadius#', 'checkBoxRadius') && !isNaN('#checkBoxRadius#')) {
        document.documentElement.style.setProperty('--checkBoxRadius#id#', '#checkBoxRadius#'+'px')
      }
      if ($.issetWidgetOptParam('#checkColor#', 'checkColor')) {
        document.documentElement.style.setProperty('--checkcolor#id#', '#checkColor#')
      }
      
      if (_options.display_value == '0' || _options.display_value == 0 || _options.display_value == '') {
         $('.Toggle#uid#').prop('checked', false);
      } else {
        $('.Toggle#uid#').prop('checked', true);
      }
      /*
      if (_options.display_value >= '1' || _options.display_value >= 1) {
         $('.Toggle#uid#').prop('checked', false);
      } else {
        $('.Toggle#uid#').prop('checked', true);
      }*/
    }
    jeedom.cmd.update['#id#']({
      display_value: '#state#',
      valueDate: '#valueDate#',
      collectDate: '#collectDate#',
      alertLevel: '#alertLevel#'
    });
    $('.Toggle#uid#').on('click', function() {
      if ( $('.Toggle#uid#').is( ":checked" ) ){
        jeedom.cmd.execute({id: '#id#', value: {slider: 1}});
      } else {
        jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
      }
    });
  </script>
</div>

Détails

Je te conseil dans un premier temps de tester le widget sans aucun paramètre, ensuite si il n’y a pas de soucis, tu pourras jouer avec les paramètres optionnels :

Exemple pour le Lundi :

Fabrice · Mai 22, 2022, 11:13

Bonjour à tous.

J’utilisais cela aussi avant de découvrir le plugin Programmateur.

Celui-ci permet de remplacer aisément ce widget.

Ayb7 · Mai 22, 2022, 5:27

Bonjour,

Je me souviens avoir fait une modification dans le code du widget suite au passage 4.2.14:
Visiblement dans le code que tu as transmis dans le premier post du sujet, il manque ces paramètres.

Ligne 82 : jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
Ligne 84 : jeedom.cmd.execute({id: '#id#', value: {slider: 1}});

Peux tu juste vérifier que les {slider: 0} et {slider: 1} sont bien présents dans ton code de widget
Eventuellement, après avoir modifié le code, Réglages > Système > Configuration > Cache > « Vider le cache des widgets »

LAGUICHE:

  <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: {slider: 1}});
            } else {
                jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
          }
        });
    </script>

Versus ton premier post :

system · Mai 23, 2022, 5:50

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