Mise à jour des widgets du core pour la V3

[Salvialf]

Ok je regarde demain par contre ce qui est sûr c'est que je ne pourrais pas remplacer le widget d'origine par celui-là. Seul l'auteur original en a la possibilité.

À mon niveau Je pourrais juste créer un nouveau widget. Du coup je vérifie demain que je maîtrise bien le code quand même et j'essaierai de voir comment il a évolué. Tu aurais le lien du topic sur lequel le code a été mis à jour? Merci

[JAG]

salut à tous

j'ai repris depuis peu l'ensemble de mes widgets (en V3 mais un widget par fonction) pour les regrouper en utilisant la base de Salvialf et les 2-3 widgets de JAG pouvant être utilisés à plusieurs "sauces". (alarme status pour les infos, alarme activation pour les interrupteurs à retour d'etat, multi ouvrants, etc...)

tout d'abord un grand merci à vous deux

il me reste deux trois widgets à regrouper d'où deux idées ou suggestions de ma part :
1.
Sur alarme status et alarme activation : ajouter deux variables srcImglogoON_type et srcImglogoOFF_type permettant au final de choisir entre un png ou un gif ou autre...
je pense réussir à le faire (je m'y colle ce soir certainement) mais s'agissant du code de JAG, je souhaitait tout de même te le suggérer pour voir si tu préfères prendre la main sur le sujet.


2.
faire un widget alarme status non pas binaire mais numérique avec possibilité d'avoir plusieurs état. (j'en ai fait un pour 3 états) ça marche nickel, je vous le poste en dessous... perso je l'utilise pour les états off, on, défaut (0, 1, 2)

Code : Tout sélectionner

<div style="padding:0;min-width:50px;min-height:40px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#" title="#collectDate#">
	<!-- Info Widget
		Basé sur les widget de 	: ksoul78 / jimmy / snow51
		Mise à jour 			: JAG 20190317 : ajout centrer widget (merci à Antoinekl1)
		Modif info numérique 3 positions : Fishes 20190325
	-->
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 12px; #hideCmdName#;">#name_display#</div>
          <div class="iconCmd#uid#"></div>
		</center>
	</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	 // Options de personnalisation avec valeur par defaut 
               // Paramètrage du logo
                  // Valeur pour ON ou 1
                      var srcImglogoON	= ('#logoON#'!='#'+'logoON#') ? "#logoON#" : "EnCours";
          		  // Valeur pour DEFAUT ou 2
                      var srcImglogoDEFAUT	= ('#logoDEFAUT#'!='#'+'logoDEFAUT#') ? "#logoDEFAUT#" : "Probleme";
                  // Valeur pour OFF ou 0
                      var srcImglogoOFF	= ('#logoOFF#'!='#'+'logoOFF#') ? "#logoOFF#" : "Arret";
               // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
                      var srcImgHeight 	= (is_numeric('#sizeh#')) ? parseFloat('#sizeh#') : 80;
                      var srcImgWidth	= (is_numeric('#sizew#')) ? parseFloat('#sizew#') : 80;
              // Paramétrage des images
                      var srcImgURL 	= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Arret_Marche_Defaut/';
                      var srcImgDefaut 		= srcImgURL + srcImglogoDEFAUT +'.png'; 	// Pour Valeur = 2
          			  var srcImgOn 		= srcImgURL + srcImglogoON +'.png'; 			// Pour Valeur = 1
                      var srcImgOff 	= srcImgURL + srcImglogoOFF +'.png';  			// Pour valeur = 0   
          
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 2) {
				$(".iconCmd#uid#").append('<img src="'+srcImgDefaut+'" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">');
			 } 
          	else if (parseInt(_options.display_value) == 1){
				$(".iconCmd#uid#").append('<img src="'+srcImgOn+'" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">');
            } 
          	else {
				$(".iconCmd#uid#").append('<img src="'+srcImgOff+'" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">');
			}
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

voila je poste cela en me disant que mon besoin peut être aussi le besoin de qqn d'autre...
encore merci pour le boulot j'ai supprimé 12 widgets différents !!!

@+

Salut, j'ai poussé la correction en beta pour l'ensemble de mes widgets pour le point 1
variable : logoOFF_type et logoON_type

Je mettrais les explications sur le sujet de mes widgets en même temps que je passerai en master

bonne soirée et merci de vos retours

[Fabrice]

Tu aurais le lien du topic sur lequel le code a été mis à jour? Merci

C'est ici :
viewtopic.php?f=30&t=19779&start=60#p710679

En fait, j'ai suivi il y a longtemps, un tuto pour faire un virtuel "Réveil". C'est plutôt sympa et fonctionnel.
https://www.ca-sert-a-quoi.com/articles ... ut-du-lit/

Et ce virtuel, nécessite plusieurs Widgets particulier, dont celui-ci.
- Je n'ai pas trouvé comment s'en passer, hormis avec les Slides core, mais c'est laid pour cet usage et il me semble, que cela passe de 0 a 1 en passant par 0.5.

Le Widget d'origine n'est déjà plus visible dans le Market. Il est visible en passant pas le plugin Virtuel, mais je n'ai pas réussi à le télécharger ce soir par exemple (décompression impossible).

Merci pour ton aide.

[i-magin]

Ok je regarde demain par contre ce qui est sûr c'est que je ne pourrais pas remplacer le widget d'origine par celui-là. Seul l'auteur original en a la possibilité.

À mon niveau Je pourrais juste créer un nouveau widget. Du coup je vérifie demain que je maîtrise bien le code quand même et j'essaierai de voir comment il a évolué. Tu aurais le lien du topic sur lequel le code a été mis à jour? Merci

Tu as essayé de contacter son auteur @sjauquet en lui envoyant un message ?

[i-magin]

Ok je regarde demain par contre ce qui est sûr c'est que je ne pourrais pas remplacer le widget d'origine par celui-là. Seul l'auteur original en a la possibilité.

À mon niveau Je pourrais juste créer un nouveau widget. Du coup je vérifie demain que je maîtrise bien le code quand même et j'essaierai de voir comment il a évolué. Tu aurais le lien du topic sur lequel le code a été mis à jour? Merci

@Fabrice et @Salvialf, vous avez essayé de contacter son auteur @sjauquet en lui envoyant un message ?

[Salvialf]

Pour ma part non car je découvre le widget... À première vue pour le moment c'est juste deux images case vide ou cochée donc je pense plutôt coder un widget contenant une vraie checkbox.

Ça pourra toujours servir non?

[dvb]

Pour ma part non car je découvre le widget... À première vue pour le moment c'est juste deux images case vide ou cochée donc je pense plutôt coder un widget contenant une vraie checkbox.

Ça pourra toujours servir non?

Oui assurément !...

[ffp17]

Bonjour
Oui je confirme que le réveil fonctionne bien et pour les cases à cocher voilà le lien de ce que j'ai modifié. Je ne suis pas un pro mais ça fonctionne en V3.
viewtopic.php?p=710679#p710679
Bonne journée

Envoyé de mon ONEPLUS A6013 en utilisant Tapatalk

[fishes]

salut à tous

j'ai repris depuis peu l'ensemble de mes widgets (en V3 mais un widget par fonction) pour les regrouper en utilisant la base de Salvialf et les 2-3 widgets de JAG pouvant être utilisés à plusieurs "sauces". (alarme status pour les infos, alarme activation pour les interrupteurs à retour d'etat, multi ouvrants, etc...)

tout d'abord un grand merci à vous deux

il me reste deux trois widgets à regrouper d'où deux idées ou suggestions de ma part :
1.
Sur alarme status et alarme activation : ajouter deux variables srcImglogoON_type et srcImglogoOFF_type permettant au final de choisir entre un png ou un gif ou autre...
je pense réussir à le faire (je m'y colle ce soir certainement) mais s'agissant du code de JAG, je souhaitait tout de même te le suggérer pour voir si tu préfères prendre la main sur le sujet.


2.
faire un widget alarme status non pas binaire mais numérique avec possibilité d'avoir plusieurs état. (j'en ai fait un pour 3 états) ça marche nickel, je vous le poste en dessous... perso je l'utilise pour les états off, on, défaut (0, 1, 2)

Code : Tout sélectionner

<div style="padding:0;min-width:50px;min-height:40px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#" title="#collectDate#">
	<!-- Info Widget
		Basé sur les widget de 	: ksoul78 / jimmy / snow51
		Mise à jour 			: JAG 20190317 : ajout centrer widget (merci à Antoinekl1)
		Modif info numérique 3 positions : Fishes 20190325
	-->
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 12px; #hideCmdName#;">#name_display#</div>
          <div class="iconCmd#uid#"></div>
		</center>
	</div>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	 // Options de personnalisation avec valeur par defaut 
               // Paramètrage du logo
                  // Valeur pour ON ou 1
                      var srcImglogoON	= ('#logoON#'!='#'+'logoON#') ? "#logoON#" : "EnCours";
          		  // Valeur pour DEFAUT ou 2
                      var srcImglogoDEFAUT	= ('#logoDEFAUT#'!='#'+'logoDEFAUT#') ? "#logoDEFAUT#" : "Probleme";
                  // Valeur pour OFF ou 0
                      var srcImglogoOFF	= ('#logoOFF#'!='#'+'logoOFF#') ? "#logoOFF#" : "Arret";
               // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
                      var srcImgHeight 	= (is_numeric('#sizeh#')) ? parseFloat('#sizeh#') : 80;
                      var srcImgWidth	= (is_numeric('#sizew#')) ? parseFloat('#sizew#') : 80;
              // Paramétrage des images
                      var srcImgURL 	= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Arret_Marche_Defaut/';
                      var srcImgDefaut 		= srcImgURL + srcImglogoDEFAUT +'.png'; 	// Pour Valeur = 2
          			  var srcImgOn 		= srcImgURL + srcImglogoON +'.png'; 			// Pour Valeur = 1
                      var srcImgOff 	= srcImgURL + srcImglogoOFF +'.png';  			// Pour valeur = 0   
          
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 2) {
				$(".iconCmd#uid#").append('<img src="'+srcImgDefaut+'" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">');
			 } 
          	else if (parseInt(_options.display_value) == 1){
				$(".iconCmd#uid#").append('<img src="'+srcImgOn+'" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">');
            } 
          	else {
				$(".iconCmd#uid#").append('<img src="'+srcImgOff+'" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">');
			}
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

voila je poste cela en me disant que mon besoin peut être aussi le besoin de qqn d'autre...
encore merci pour le boulot j'ai supprimé 12 widgets différents !!!

@+

Salut, j'ai poussé la correction en beta pour l'ensemble de mes widgets pour le point 1
variable : logoOFF_type et logoON_type

Je mettrais les explications sur le sujet de mes widgets en même temps que je passerai en master

bonne soirée et merci de vos retours

salut,

je préfère rester en stable sur ma smart donc j'arriverai pas à le récup en beta.
Peux-tu me le transmettre en MP ou le poster ici et je le testerai ?

merci

[JAG]

Salut
je vais les passer en stable ce soir
Bonne soirée

[fishes]

Salut
je vais les passer en stable ce soir
Bonne soirée

Salut,

testé et approuvé
mes animations gif fonctionnent !

par contre j'utilise également des icones voyants en 20*20px ou 30*30px et je suis obligé de modifier la taille de tes tuiles par défaut car cela me crée des espaces énormes dans mes tableaux. Au final j'ai mis min-height : 30px et min -width : 30px pour alarme-status
cela me permet d'ajuster au plus juste en fonction de la taille des images...
Je sais pas si cela peut-etre utile pour qqn d'autre ?

dans tous les cas, merci

[Salvialf]

Bonjour
Oui je confirme que le réveil fonctionne bien et pour les cases à cocher voilà le lien de ce que j'ai modifié. Je ne suis pas un pro mais ça fonctionne en V3.
viewtopic.php?p=710679#p710679
Bonne journée

@ffp17:
Loin de moi l'idée d'être désobligeant hein !? C'est très bien ce que tu as fait juste il m'a fallu un peu de temps pour appréhender le widget car il est estampillé Action/autre alors que c'est un Action/slider. D'autant plus que celui d'origine était en Info/Numérique... ça m'a perdu pendant quelques instants !

Le Widget d'origine n'est déjà plus visible dans le Market. Il est visible en passant pas le plugin Virtuel, mais je n'ai pas réussi à le télécharger ce soir par exemple (décompression impossible).

Merci pour ton aide.

En tout cas je ne vous oublies pas messieurs ! Je suis en train de faire tout un tas de widget curseurs, vous n'aurez que l'embarras du choix. Par contre c'est assez long à faire donc il va falloir être un peu patient...

...Un petit avant-goût (juste une ébauche):

20190331_221447.gif (51.98 Kio) Consulté 1674 fois

PS: Je suis aussi sur un curseur sabre laser avec plusieurs couleurs au choix pour les fans de Star Wars

[ffp17]

Bonjour
Oui je confirme que le réveil fonctionne bien et pour les cases à cocher voilà le lien de ce que j'ai modifié. Je ne suis pas un pro mais ça fonctionne en V3.
viewtopic.php?p=710679#p710679
Bonne journée

@ffp17:
Loin de moi l'idée d'être désobligeant hein !? C'est très bien ce que tu as fait juste il m'a fallu un peu de temps pour appréhender le widget car il est estampillé Action/autre alors que c'est un Action/slider. D'autant plus que celui d'origine était en Info/Numérique... ça m'a perdu pendant quelques instants !

Le Widget d'origine n'est déjà plus visible dans le Market. Il est visible en passant pas le plugin Virtuel, mais je n'ai pas réussi à le télécharger ce soir par exemple (décompression impossible).

Merci pour ton aide.

En tout cas je ne vous oublies pas messieurs ! Je suis en train de faire tout un tas de widget curseurs, vous n'aurez que l'embarras du choix. Par contre c'est assez long à faire donc il va falloir être un peu patient...

...Un petit avant-goût (juste une ébauche):

20190331_221447.gif

PS: Je suis aussi sur un curseur sabre laser avec plusieurs couleurs au choix pour les fans de Star Wars

Aucun soucis, il fallait que je me dépanne, pas très élégant mais ça fonctionne. Et j'ai partagé en attendant une vrai solution.
Très bien le nouveau widget je switcherai dès sa sortie.
Bonne fin de soirée

Envoyé de mon ONEPLUS A6013 en utilisant Tapatalk

[Fabrice]

Bonjour,

Clairement aussi, merci au travail que vous accomplissez tous.

Ce qui suit, n'est pas une critique, mais un avis d’ergonomie (c'est un truc auquel je tiens beaucoup : la logique et l’ergonomie)

Par contre, je préfère actuellement, les coches du Widgets rendu fonctionnel par ffp17.
Il est de ce type :
Lundi [x]
Mardi [x]
Mercredi [x]
Jeudi [x]
Vendredi [x]
Samedi [x]
Dimanche [ ]

Je ne suis pas très fan des case [ici] [là] pour une même action.
- Ou alors en bouton radio.

Maintenant, s'il est possible de cliquer sur la partie de gauche (en GROS) pour avoir V ou X, c'est tout aussi bien.

Merci pour le travail que vous réalisez pour la communauté !

[Salvialf]

Bonjour @Fabrice,

J'avais pourtant bien spécifié "juste une ébauche"

Sois rassuré la présentation sera exactement du même style que çe que vous utilisez actuellement, les affichages sur le *.gif me permettent juste de vérifier le bon fonctionnement du widget pendant le développement.

[Fabrice]

Top alors.

[Salvialf]

Bonjour,

Clairement aussi, merci au travail que vous accomplissez tous.

Ce qui suit, n'est pas une critique, mais un avis d’ergonomie (c'est un truc auquel je tiens beaucoup : la logique et l’ergonomie)

Par contre, je préfère actuellement, les coches du Widgets rendu fonctionnel par ffp17.
Il est de ce type :
Lundi [x]
Mardi [x]
Mercredi [x]
Jeudi [x]
Vendredi [x]
Samedi [x]
Dimanche [ ]

Aucun soucis, il fallait que je me dépanne, pas très élégant mais ça fonctionne. Et j'ai partagé en attendant une vrai solution.
Très bien le nouveau widget je switcherai dès sa sortie.
Bonne fin de soirée

Bonsoir à vous 2,

Je me suis décidé à vous faire une checkbox simple sinon vous risquiez de l'attendre longtemps. Je pense que ça convient mais n'hésitez surtout pas à me faire savoir si des modifications doivent être apportées à l'usage.

Je vous laisse le soin de partager sur le topic du virtuel réveil et si besoin est je pourrais partager le widget sur le market sur simple demande.

Le code à appliquer:

Code : Tout sélectionner

<div style="width:110px;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="cmdName">#valueName#</span>
  <span class="customcheckbox#id#">
  <input class="Toggle#uid#" type="checkbox" id="ccb0#uid#" >
  <label for="ccb0#uid#"></label>
  </span>
  <style>
.cmdName {
  display:inline-block;
  font-size:14px;
  font-weight:bold;
  line-height:30px;
  margin:auto;
    }
.customcheckbox#id# {
  float:right;
  height:30px;
  width:30px;
  display:inline-block;
  --size:28px;
  --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:6px solid var(--checkcolor);
  border-bottom:6px solid var(--checkcolor);
  transform: rotate(-45deg);
  left:calc(var(--size) * 0.25);
  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:3px solid #000;
}
.customcheckbox#id# input[type="checkbox"]:checked + label::before {
  border:3px solid #000;
}
.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>

Et le rendu:

ChkbxReveil.jpg (9.21 Kio) Consulté 1515 fois

En espérant que ça convienne... au plaisir de vous lire.

[Fabrice]

Bonsoir et merci.

Je détecte un problème avec le Widget.
En effet, quand je l'applique à la place de l'existant (celui que ffp17 a corrigé), et bien l'ensemble de mon Dashboard se modifie.
J'ai par exemple un bouton "ouvrir" sur un virtuel et la taille de celui-ci double.
Tout comme les espaces entre les lignes de l'ensemble des autres virtuels.
- C'est pareil sur mes prises (qui ne sont pas des virtuels).
Tous les boutons double de taille.
- Des que j'enlève l'application de ce Widget sur mes jours, alors l'ensemble de mon Dashboard devient bien de nouveau.
Le problème vient de la taille : font-size:14px; (si je remplace 14 par autre chose, la taille de la police bouge, mais l'ensemble des points ci-dessus grossi aussi).

Ensuite, pour le Widget même.
- Je trouve que le tour des box devrais être blanc, et plus fin (j'ai trouvé pour la taille, je l'ai passé de 3 à 1)
- les coches plus petites (pour faire dominer le jour) elles sont trop grasses.
- la police des jours plus grandes (si je la passe en 18 c'est une bonne taille, mais l'affichage s'entremêle avec les coches (qui passent aux lignes du dessous), les coches semblent hériter de la taille aussi)

J'aime bien l'alignement des cases à cocher, mais dans ce cas il fraudait aligner le texte de la ligne, sur la droite.
Comme cela par exemple (sans les points) :
..............xxx [v]
dfdfsdfdsdf [v]
..............dsd [v]

Pour faire simple, la présentation de ffp17 est très bien et l'alignement des coches que tu proposes est mieux, à la condition d'aligner les jours sur la droite (a gauche des cases ).

Merci.

[Salvialf]

Merci pour ce retour rapide @Fabrice.

Bizarre pour l'impact sur le dashboard je n'ai rien constaté de tel sur mon jeedom de dev. Je testerai sur ma prod demain mais j'ai une idée d'où ça peut venir...

Pour le reste aucun problème ce sera fait demain tes remontées étant précises c'est parfait.

[Salvialf]

- Je trouve que le tour des box devrais être blanc, et plus fin (j'ai trouvé pour la taille, je l'ai passé de 3 à 1)
- les coches plus petites (pour faire dominer le jour) elles sont trop grasses.
- la police des jours plus grandes (si je la passe en 18 c'est une bonne taille, mais l'affichage s'entremêle avec les coches (qui passent aux lignes du dessous), les coches semblent hériter de la taille aussi)

J'aime bien l'alignement des cases à cocher, mais dans ce cas il fraudait aligner le texte de la ligne, sur la droite.
Comme cela par exemple (sans les points) :
..............xxx [v]
dfdfsdfdsdf [v]
..............dsd [v]

Pour faire simple, la présentation de ffp17 est très bien et l'alignement des coches que tu proposes est mieux, à la condition d'aligner les jours sur la droite (a gauche des cases ).

Merci.

Bonjour @Fabrice,

Un petit oubli hier a fait que le widget modifiait tous les noms de commande sur la page C'est résolu.

J'ai apporté les modifications demandées c'est effectivement bien plus lisible:

ChkbxReveil2.jpg (18.55 Kio) Consulté 1463 fois

Le code correspondant:

Code : Tout sélectionner

<!-- ** 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:18px;
  font-weight:bold;
  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>