Page 5 sur 10

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 05:34
par breizh22
@mortyre

As-tu réussi à transposer le code d'Antoinekl1 concernant le plugin mode, si oui, peux-tu me le partager ici, stp. J'ai essayé mais j'ai un souci concernant les icones, peut-être à cause de l'heure, mdr, je file me coucher.

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 17:11
par Claude69
Salvialf a écrit :
01 avr. 2019, 19:45
Claude69 a écrit :
01 avr. 2019, 19:16
Merci
Oui, j'utilise iconaction. C'est surtout pour ma culture personnelle :D
Je ne vais pas t'être d'une grande aide car il ne fonctionne pas chez moi :( Je ne m'acharne pas car le code ne me plait pas trop (surtout le <h5> à la place d'une <div>...)

A ta place Je m'intéresserais soit à la modification du css dans les 1ères lignes du script qui est un coup à 88px et l'autre à 68px. Si tu mets 68 aux 2 ça donne quoi ? Sinon l'enlèverai 'vertical-align: middle;' au début du code...
En dernier recours tu peux ajouter une bordure pour visualiser la position de la <div> et régler le positionnement de l'icône.
Merci pour ta réponse, mais je t'avoue que je suis en pleine découverte.
Du coup j'utilise iconaction comme tu me l'a suggéré, et c'est "presque" parfait :D
Je veux toujours supprimer la marge qui est trop grande pour moi.
Quelle modif puis je apporter pour passer de cette image :
Capture d’écran 2019-04-02 à 17.05.05.png
Capture d’écran 2019-04-02 à 17.05.05.png (10.72 Kio) Consulté 501 fois
à celle ci
Capture d’écran 2019-04-02 à 17.05.28.png
Capture d’écran 2019-04-02 à 17.05.28.png (10.11 Kio) Consulté 501 fois

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 17:17
par Salvialf
Claude69 a écrit :
02 avr. 2019, 17:11
Quelle modif puis je apporter pour passer de cette image :
Capture d’écran 2019-04-02 à 17.05.05.png
à celle ci
Capture d’écran 2019-04-02 à 17.05.28.png
Bonjour Claude,

Au tout tout début du code tu as la hauteur (height) et la largeur (width) du block qui contient l'icône à afficher.

Il est codé par défaut en 110px*110px donc tout dépend de la taille de ton icône... essayes avec 90px par exemple.

Ce qui donne:
<div style="width:90px;height:90px;display:inline!important;" class="cmd reportModeHidden cmd-widget" .........................

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 17:19
par Claude69
C'est ce que je fait, mais je n'ai aucun changement :(

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 17:28
par Salvialf
Essayes de changer de widget sur chaque commande, sauvegarder commande + équipement, vider la cache du navigateur (CTRL+F5) pour ensuite réappliquer le widget sur les commandes et tout re-sauvegarder.

Le nouveau code n'est pas toujours bien assimilé...

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 18:17
par Salvialf
Theduck38 a écrit :
01 avr. 2019, 22:50
Merci pour ton aide... effectivement seul le nombre au centre se met à jour.
Si ça peut aider, j'ai retrouvé le github de l'auteur... mais je n'y comprends pas grand chose.
https://github.com/aterrien/jQuery-Kontrol
Je suppose qu'il doit y avoir moyen de forcer le dessin lorsque c'est Jeedom qui met à jour.
Salut mon canard (après 2 jours sur ce widget on est intime maintenant ;) ),

J'ai enfin réussi grâce à ton lien Merci... même si j'ai galéré !! Il ne me reste plus qu'à remettre tout ça en ordre et à rajouter l'unité qui a sauté au passage et je poste le résultat. Pas tout de suite car je fais une pause du coup mais peut-être un peu plus tard ce soir :D

EDIT: C'est bon j'ai nettoyé le code (j'avais bien mis le bazar !). J'aime vraiment beaucoup ce widget que je partagerais bien sur le market mais impossible de trouver l'auteur d'origine, te souviens-tu de son nom par hasard ?

Code : Tout sélectionner

<div style="width:100px;height:100px;display:block;" 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#">
    <div style="margin-top : 5px;">
    <input type="text" class="dial#uid#" data-role="none" value="#state#" data-min="#minValue#" data-max="#maxValue#" data-width="100" data-height="100" />
    </div>
    <script>
   		$.include(['plugins/widget/core/template/mobile/cmd.action.slider.kontrol/jquery.kontrol.js'], function() {
            	$(".cmd[data-cmd_uid=#uid#] .dial#uid#").dial({
              	fgColor: "#FFFFFF",
                bgColor: '#cmdColor#',
                noScroll: true,
                change: function(v) {;
                jeedom.cmd.execute({id: '#id#', value: {slider: v}});
                }
            });
        });
		jeedom.cmd.update['#id#'] = function(_options){
		$('input.dial#uid#').val(_options.display_value).trigger('change');
		$('.cmd[data-cmd_uid=#uid#] .dial#uid#').val(_options.display_value+'#unite#');
		}
      		jeedom.cmd.update['#id#']({display_value:'#state#'});
    </script>
</div>
Have Fun !

EDIT2: Je vois que le nom de la commande n'est pas inclus dans le code, vous n'avez jamais eu besoin de l'afficher ou ça manque justement ? (il peut être caché en décochant 'afficher le nom' dans les paramètres).

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 18:27
par Claude69
Pas moyen :(
Le mieux que j'arrive à faire (par tâtonnement) c'est d'enlever la marge à droite :
Capture d’écran 2019-04-02 à 18.20.11.png
Capture d’écran 2019-04-02 à 18.20.11.png (10.83 Kio) Consulté 463 fois
en supprimant display:inline!important; dans la div :
<div style="width:70px;height:70px;" class="cmd rep.......
J'ignore à quoi sert cette commande et donc ce qu'elle casse du coup si je l'enlève :D

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 18:30
par Salvialf
T'inquiètes c'est que de la mise en forme.

Je suis bête la marge elle doit être dans ton image, partages tes 2 icônes en pièce jointe que je vérifies et te remettre ça d'aplomb si c'est bien ça.
...ou pour vérifier essayes avec l'icône par défaut de iconaction qui ne doit pas avoir de marge normalement.

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 18:35
par Claude69
Voila les images
On2.png
On2.png (50.29 Kio) Consulté 452 fois
Off2.png
Off2.png (48.78 Kio) Consulté 452 fois
Effectivement, avec l'icone par défaut, je n'ai pas de marge

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 18:53
par JAG
@mortyre et @breizh22
mortyre a écrit :
01 avr. 2019, 21:54
merci c'est top
Pour votre widget Mode, j'ai réussi à faire qq chose, voici mon code
J'ai un soucis avec la couleur de fond si @Salvialf ou @Winhex passe par là et vois l'erreur.
Je suis preneur de l'aide car cela me servira sur un autre de mes widgets

Code : Tout sélectionner

<div style="min-width:90px;min-height : 20px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
  <div style="font-weight: bold;font-size : 12px;#hideCmdName#" class='cmdName'>#name_display#</div>
  <center>
    <div>
    	<span class="label label-default" style="font-size: 1em;"></span>
    	<span style="font-size: 1em; font-weight: bold; margin-top: 5px;" class="iconCmd label-info"></span>
    </div>
    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        	//Paramétrage des modes
        		var Mode1		= ('#Mode1#'!='#'+'Mode1#') ? "#Mode1#" : "Présent";
        		var Mode2		= ('#Mode2#'!='#'+'Mode2#') ? "#Mode2#" : "Absent";
        		var Mode3		= ('#Mode3#'!='#'+'Mode3#') ? "#Mode3#" : "Nuit";
        		var Mode4		= ('#Mode4#'!='#'+'Mode4#') ? "#Mode4#" : "Vacances";
        		var Mode5		= ('#Mode5#'!='#'+'Mode5#') ? "#Mode5#" : "Cinéma";
        		var Mode6		= ('#Mode6#'!='#'+'Mode6#') ? "#Mode6#" : "Alarme";
        		
        	$('.cmd[data-cmd_id=#id#] .label-info').empty(); 
          	// Update
			var State = _options.display_value;	
                    if (State == Mode1) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-success');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon maison-house112">' +State);    
                    } else if (State == Mode2) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-danger');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-mouvement">' +State); 
                    } else if (State == Mode3) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-warning');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon nature-night2">' +State); 
                    } else if (State == Mode4) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon loisir-beach4">' +State); 
                    } else if (State == Mode5) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="fa fa-suitcase">' +State);
                    } else if (State == Mode6) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-alerte2">' +State);
                    } else {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-alerte2">' +State);
                    }          
			// Update IMG     
        $('.cmd[data-cmd_id=#id#]').attr('title','Mode : '+_options.display_value+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
    </script>
</div>
Bonne soirée

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 21:05
par Salvialf
Claude69 a écrit :
02 avr. 2019, 18:35
Voila les images
Effectivement, avec l'icone par défaut, je n'ai pas de marge
Retour à l'envoyeur -> redimensionnées et renommées pour être utilisées directement avec IconAction (type:power).

PS: j'ai fait en sorte de conserver l'ombre tout autour mais je peux l'enlever complètement si tu préfères, n'hésites pas à me dire.

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 22:22
par Salvialf
JAG a écrit :
02 avr. 2019, 18:53
J'ai un soucis avec la couleur de fond si @Salvialf ou @Winhex passe par là et vois l'erreur.
Je suis preneur de l'aide car cela me servira sur un autre de mes widgets
Bonsoir @JAG,

J'ai voulu regarder pour t'aider mais je dois pas m'y prendre comme il faut :oops: Je n'ai jamais utilisé le plugin MODE....

ça se met où ?

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 22:26
par Theduck38
Salvialf a écrit :
02 avr. 2019, 18:17
Salut mon canard (après 2 jours sur ce widget on est intime maintenant ;) ),

J'ai enfin réussi grâce à ton lien Merci... même si j'ai galéré !! Il ne me reste plus qu'à remettre tout ça en ordre et à rajouter l'unité qui a sauté au passage et je poste le résultat. Pas tout de suite car je fais une pause du coup mais peut-être un peu plus tard ce soir :D

EDIT: C'est bon j'ai nettoyé le code (j'avais bien mis le bazar !). J'aime vraiment beaucoup ce widget que je partagerais bien sur le market mais impossible de trouver l'auteur d'origine, te souviens-tu de son nom par hasard ?

<...>
Have Fun !

EDIT2: Je vois que le nom de la commande n'est pas inclus dans le code, vous n'avez jamais eu besoin de l'afficher ou ça manque justement ? (il peut être caché en décochant 'afficher le nom' dans les paramètres).
MERCI beaucoup ! Je n'aurais pas trouvé tout seul !
La mise à jour se fait maintenant sur le widget.
En revanche... je ne voudrais pas abuser, mais... j'ai un petit problème graphique (mais tu as de toutes façons ma reconnaissance éternelle :D ) :
Capture.PNG
Capture.PNG (90.66 Kio) Consulté 399 fois
Le gros rectangle blanc n'était pas là avant.
Voici le code que j'utilise :

Code : Tout sélectionner

<div style="width:100px;height:100px;display:block;" 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#">
    <div style="margin-top : 5px;">
    <input type="text" class="dial#uid#" data-role="none" value="#state#" data-min="#minValue#" data-max="#maxValue#" data-width="100" data-height="100" />
    </div>
	<div style="position: relative; top: -45px; left : 0px;">
        #unite#
    </div>
    <script>
   		$.include(['plugins/widget/core/template/mobile/cmd.action.slider.kontrol/jquery.kontrol.js'], function() {
            	$(".cmd[data-cmd_uid=#uid#] .dial#uid#").dial({
              	fgColor: "#2BE8E8",
                bgColor: '#000000',
				thickness: '0.2',
				stopper: true,
                noScroll: true,
                change: function(v) {;
                jeedom.cmd.execute({id: '#id#', value: {slider: v}});
                }
            });
        });
		jeedom.cmd.update['#id#'] = function(_options){
		$('input.dial#uid#').val(_options.display_value).trigger('change');
		$('.cmd[data-cmd_uid=#uid#] .dial#uid#').val(_options.display_value);
		}
      		jeedom.cmd.update['#id#']({display_value:'#state#'});
    </script>
</div>
Du coup, en ce qui me concerne, c'est normal que je vire le nom de la commande car je ne l'utilise pas et ça ne marchait pas forcément bien de décocher la case dans l'affichage avancé.

Je ne me souviens malheureusement pas du nom de l'auteur initial de ce plugin...

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 23:01
par Salvialf
Theduck38 a écrit :
02 avr. 2019, 22:26

En revanche... je ne voudrais pas abuser, mais... j'ai un petit problème graphique (mais tu as de toutes façons ma reconnaissance éternelle :D ) :
Le gros rectangle blanc n'était pas là avant.
ça c'est du débugage instantané ! Merci du retour

Et comme ça ?

Code : Tout sélectionner

<div style="width:100px;height:100px;display:block;" 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#">
    <div style="margin-top : 5px;">
    <input type="text" class="dial kontrol#uid#" data-role="none" value="#state#" data-min="#minValue#" data-max="#maxValue#" data-width="100" data-height="100" />
    </div>
	<div style="position: relative; top: -45px; left : 0px;">
        #unite#
    </div>
    <script>
   		$.include(['plugins/widget/core/template/mobile/cmd.action.slider.kontrol/jquery.kontrol.js'], function() {
            	$(".cmd[data-cmd_uid=#uid#] .dial").dial({
              	fgColor: "#2BE8E8",
                bgColor: '#000000',
				thickness: '0.2',
				stopper: true,
                noScroll: true,
                change: function(v) {;
                jeedom.cmd.execute({id: '#id#', value: {slider: v}});
                }
            });
        });
		jeedom.cmd.update['#id#'] = function(_options){
		$(".cmd[data-cmd_uid=#uid#] .kontrol#uid#").val(_options.display_value).trigger('change');
		}
      		jeedom.cmd.update['#id#']({display_value:'#state#'});
    </script>
</div>
L'unité ça va pas sur le côté ? Pour les 'min' c'est ça ? En-dessous c'est mieux à priori je vais voir ce que je peux faire.

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 23:32
par Theduck38
Nickel !!! C'est parfait.
J'ai effectivement posé l'unité en absolu... ça suffit largement pour mon utilisation.
Plus qu'à rendre la couleur configurable via paramètre, et l'unité de la même couleur, mais ça je devrais arriver à le faire...

Re: Explications sur le nouveau codage des widgets

Publié : 02 avr. 2019, 23:35
par Salvialf
Theduck38 a écrit :
02 avr. 2019, 23:32
Nickel !!! C'est parfait.
J'ai effectivement posé l'unité en absolu... ça suffit largement pour mon utilisation.
Plus qu'à rendre la couleur configurable via paramètre, et l'unité de la même couleur, mais ça je devrais arriver à le faire...
Je vais faire en sorte d'inclure l'unité en-dessous plutôt qu'à droite de la valeur...

Pour la couleur (et autres persos) je suis justement en train de faire le tour du github pour inclure les paramètres au widget. J'attends d'avoir fait le tour de tout ça avant de la mettre sur le market si l'auteur original ne se manifeste pas avant...

Re: Explications sur le nouveau codage des widgets

Publié : 03 avr. 2019, 10:23
par breizh22
JAG a écrit :
02 avr. 2019, 18:53
@mortyre et @breizh22
mortyre a écrit :
01 avr. 2019, 21:54
merci c'est top
Pour votre widget Mode, j'ai réussi à faire qq chose, voici mon code
J'ai un soucis avec la couleur de fond si @Salvialf ou @Winhex passe par là et vois l'erreur.
Je suis preneur de l'aide car cela me servira sur un autre de mes widgets

Code : Tout sélectionner

<div style="min-width:90px;min-height : 20px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
  <div style="font-weight: bold;font-size : 12px;#hideCmdName#" class='cmdName'>#name_display#</div>
  <center>
    <div>
    	<span class="label label-default" style="font-size: 1em;"></span>
    	<span style="font-size: 1em; font-weight: bold; margin-top: 5px;" class="iconCmd label-info"></span>
    </div>
    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        	//Paramétrage des modes
        		var Mode1		= ('#Mode1#'!='#'+'Mode1#') ? "#Mode1#" : "Présent";
        		var Mode2		= ('#Mode2#'!='#'+'Mode2#') ? "#Mode2#" : "Absent";
        		var Mode3		= ('#Mode3#'!='#'+'Mode3#') ? "#Mode3#" : "Nuit";
        		var Mode4		= ('#Mode4#'!='#'+'Mode4#') ? "#Mode4#" : "Vacances";
        		var Mode5		= ('#Mode5#'!='#'+'Mode5#') ? "#Mode5#" : "Cinéma";
        		var Mode6		= ('#Mode6#'!='#'+'Mode6#') ? "#Mode6#" : "Alarme";
        		
        	$('.cmd[data-cmd_id=#id#] .label-info').empty(); 
          	// Update
			var State = _options.display_value;	
                    if (State == Mode1) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-success');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon maison-house112">' +State);    
                    } else if (State == Mode2) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-danger');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-mouvement">' +State); 
                    } else if (State == Mode3) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-warning');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon nature-night2">' +State); 
                    } else if (State == Mode4) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon loisir-beach4">' +State); 
                    } else if (State == Mode5) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="fa fa-suitcase">' +State);
                    } else if (State == Mode6) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-alerte2">' +State);
                    } else {
                      	$('.cmd[data-cmd_id=#id#] .label-info').removeClass('label-default').addClass('label-primary');
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-alerte2">' +State);
                    }          
			// Update IMG     
        $('.cmd[data-cmd_id=#id#]').attr('title','Mode : '+_options.display_value+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
    </script>
</div>
Bonne soirée
Merci pour le partage, ça fonctionne en effet :D .

Re: Explications sur le nouveau codage des widgets

Publié : 03 avr. 2019, 12:23
par mortyre
pour le widget a associé au plugin Mode il a été posté aussi un peu avant une version fonctionnelle par AntoineKl1 viewtopic.php?f=29&t=44078&start=60#p716089

Re: Explications sur le nouveau codage des widgets

Publié : 03 avr. 2019, 17:41
par JAG
mortyre a écrit :
03 avr. 2019, 12:23
pour le widget a associé au plugin Mode il a été posté aussi un peu avant une version fonctionnelle par AntoineKl1 viewtopic.php?f=29&t=44078&start=60#p716089
Salut
oui ce code répond a une partie du problème, j'ai déjà fait cela.
Dans l'exemple qui est montré cela ne prend pas en compte le changement de couleur de fond de la valeur. et c'est cela qui me pose problème

Bonne soirée

Re: Explications sur le nouveau codage des widgets

Publié : 03 avr. 2019, 17:55
par breizh22
En fait, il faudrait une adaptation du code original pour une comptabilité V3