Modification code widget Toggle Switch winhex

Utilisation du core de Jeedom Widgets
1

Bonjour à tous,

Je souhaite modifier le code du widget Toggle Switch de @winhex (il me semble d’ailleurs qu’il a changé de pseudo).

image

Je veux juste changer la couleur et du point blanc et le fond vert.

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" >
    <center>
 <div class="cmdName" style="margin : 0px 5px 5px 15px;font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <input class="Toggle#uid#" type="checkbox" id="switch#id#"/>
        <label for="switch#id#" class="cmdName#id# ch#id#"></label>

    </center>
    <style>
input[class=Toggle#uid#]{
	height: 0;
	width: 0;
	visibility: hidden;
}
.cmdName#id# {
	cursor: pointer;
	text-indent: -9999px;
	width: 50px;
	height: 30px;
background:#cmdColor#;
//	background: grey;
//	display: block;
	border-radius: 50px;
	position: relative;
}
label.ch#id#:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 40px;
	transition: 0.3s;
}

input:checked + label.ch#id# {
	background: #bada55;
}

input:checked + label.ch#id#:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

label.ch#id#:active:after {
	width: 30px;
}
      </style>
    <script>

 $('.Toggle#id#').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>
</div>

Merci d’avance.

2

Oui tu le trouvera sous le pseudo de @ajja17orange

1 « J'aime »
4

Merci @ajja17orange pour ta réponse. J’ai copié le code et ça fonctionne en V4.

Donc si je change background : #fff ça change la couleur du bouton (initialement blanc) ou du fond vert ?

5

pour le fond vert c’est
.cmdName#id#
background:#cmdColor#;
#cmdColor# à remplacer par ta couleur

il marche oui mais si tu changes la valeur via scénario ou tab/tel tu n’auras pas l’actualisation

manque update et adaptation
c’est un input si tu veux t’y amusé on doit pas être loin de se que j’ai déjà adapté

6

Merci pour tes réponses je vais regarder ça.

7

voila

<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#">
<center>
	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>
	<div>
		<input class="Toggle#uid#" type="checkbox" id="switch#id#"/>
		<label for="switch#id#" class="cmdName#id# ch#id#"></label>
	</div>
</center>
  
<style>
input[class=Toggle#uid#]{
	height: 0px;
	width: 0px;
	visibility: hidden;
}
.cmdName#id# {
	cursor: pointer;
	text-indent: -9999px;
  	top: 5px;
   	right: 15px;
	width: 50px;
	height: 30px;
	background:red; /* couleur fond Off */ 
	border-radius: 50px;
	position: relative;
}
label.ch#id#:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	background: #fff;  /* couleur de la boule */
	border-radius: 40px;
	transition: 0.3s;
}

input:checked + label.ch#id# { background: #bada55; /* couleur fond On */ }

input:checked + label.ch#id#:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

label.ch#id#:active:after { width: 30px; }
      
      </style>
    <script>
$('.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')});
	}
});
      
jeedom.cmd.update['#id#'] = function(_options){
	$('.Toggle#uid#').val(_options.display_value);
	if (_options.display_value == '0') {      
		$('.Toggle#uid#').prop('checked', false);
	}else {
		$('.Toggle#uid#').prop('checked', true);
	}
};
      
    jeedom.cmd.update['#id#']({display_value:'#state#'});
  </script>
</div>
8

@ajja17orange merci pour ta réponse rapide, je vais essayer cela dés que j’ai un peu de temps.

9

Bonjour,
Je n’arrive pas a intégré ce widget dans ma v4. Je copie le fichier html dans le dossier dashboard. Je créé mes actions de type curser mais je n’arrive pas a afficher les icones. J’ai ça :
Capture2

1 « J'aime »
10

bonjour,
tu as fait cette manip ?

parce que se que je vois c’est l’icone github donc pour avoir ça je ne sais pas se que tu as fait

11

J’ai déjà remarqué que la façon dont on enregistre les données des documents sous GitHub était importante.
Si on fait un copié collé du contenu depuis la page GitHub, souvent cela ne passe pas. Pis, un enregistrer sous du lien non plus.
Il faut bien utiliser le bouton clone or download.

Antoine

12

Oui c’est la manip que j’ai suivi.

13

ses petits fréres en binaire
toggle_switch_binaire

3 « J'aime »
14

@ ajja17orange
Super dev. Merci bcp.

Ces boutons fonctionnent très bien en mode desktop. Par contre dès que je passe en version mobile, rien ne va plus. Voir photo. Qu’est ce que je fais mal? J’ai essayé sur Chrome et internet explorer même résultat. Merci beaucoup

Mode Mobile

image
image888×451 22.6 KB

Mode Desktop

image
image977×256 20.6 KB

15

je n’utilise pas le mode mobile

je detourne un
input type=« checkbox » sur dashboard
la case carré que je cache en css
« display:none »

les class/div diffère du fait que sur mobile c’est « jquery mobile » et je maîtrise pas (je ne sais même pas si on peut faire de l’annimation css « -ms-transform: translateX(20px); »

je regarderai sans te promettre.

tu peux choisir un autre widget sur mobile (3eme écran : screen de configuration avancé)

16

Merci pour tes réponses et de prendre le temps de regarder. Je comprends mieux le problème. En faisant quelques recherches j’ai trouvé ceci:
https://demos.jquerymobile.com/1.2.0/docs/forms/switch/index.html

Ce serait peut être une piste mais là je suis trop débutant pour l’intégrer.

Sinon oui effectivement l’alternative est d’utiliser un autre Widget pour mobile mais…

Merci encore.

1 « J'aime »
17

ton exemple est interessant sauf que la version n’est pas la même
on est avec

jQuery Mobile 1.5.0-pre
ton exemple 1.2.0

est evidement ça fout le bazar et sera enlevé « j’imagine »

The Slider flip toggle switch has been deprecated. Use the new Flipswitch widget instead

https://jquerymobile.com/upgrade-guide/1.4/#slider
https://demos.jquerymobile.com/1.5.0-alpha.1/flipswitch/

et si je met l’effet transition est enlevé, …

18

Hello

Je me permets de faire un retour car j’ai passé un peu de temps à regarder pourquoi le widget ne fonctionnait pas en mode mobile…

Après plusieurs heures d’arrachage de cheveux en essayant pas mal de choses avec le flipswitch, j’ai finalement réussi à utiliser le widget original en y faisait une toute légère modification :

=> ajouter l’attribut data-role=« none » à la balise input de type checkbox, ce qui a pour effet d’empêcher JQuery mobile d’interférer avec l’élément et de garder le comportement prévu dans le code du widget.

Du coup le widget fonctionne avec cette modification de la même manière que sur dashboard.

3 « J'aime »
19

Super merci Zigaar. Ca fonctionne nickel.

20

Bonjour, y a t’il une image à ajouter dan un fichier de Jeedom? Ou une modif à faire sur le code du widget?
Malgré mes effort rien ne s’affiche (j’ai bien appliqué le Widget créé sur les 2 commandes action.default et mon état est bien en binaire).
Merci.

21

Jeedom possède un cache
Une fois ton widget modifier il faut en changé « enregistrement »
Pour remettre ton widget personnalisé

Chaque modification t’oblige cette manip

HS j’ouvre plusieurs onglet dans mon navigateur
1 sur la création/modif
2 sur le choix du widget
3 sur le rendu (il faut parfois actualisé par F5 ou ctrl-f5 « vide cache navigateur »)
J’ai une petite video, mais tu en as d’autres sur la création de widget personnalisé jeedom.