Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Explications sur le nouveau codage des widgets

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 02 avr. 2019, 05:34

@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.
HP Gen 8 / OMV4 sur SSD / Jeedom 3.3.37 VM Debian 9
RFLink - Sondes Oregon THN 132 N / THGR 122 NX / THGR 810 / THC238 - Prises DIO/Dedra/IDK.
Orvibo AllOne et S20 - Onduleur APC Back-UPS ES 700VA
Écosystème xiaomi - Dash buttons - GHome et mini.

Avatar de l’utilisateur
Claude69
Actif
Messages : 2088
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 02 avr. 2019, 17:11

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é 523 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é 523 fois
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 17:17

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" .........................
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Claude69
Actif
Messages : 2088
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 02 avr. 2019, 17:19

C'est ce que je fait, mais je n'ai aucun changement :(
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 17:28

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é...
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 18:17

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).
Dernière édition par Salvialf le 02 avr. 2019, 21:59, édité 6 fois.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Claude69
Actif
Messages : 2088
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 02 avr. 2019, 18:27

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é 485 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
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 18:30

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.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Claude69
Actif
Messages : 2088
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 02 avr. 2019, 18:35

Voila les images
On2.png
On2.png (50.29 Kio) Consulté 474 fois
Off2.png
Off2.png (48.78 Kio) Consulté 474 fois
Effectivement, avec l'icone par défaut, je n'ai pas de marge
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
JAG
Actif
Messages : 597
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 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
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 21:05

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.
Pièces jointes
power_on.png
power_on.png (58.9 Kio) Consulté 448 fois
power_off.png
power_off.png (57.33 Kio) Consulté 448 fois
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 22:22

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ù ?
Pièces jointes
mode.jpg
mode.jpg (8.04 Kio) Consulté 427 fois
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 02 avr. 2019, 22:26

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é 421 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...
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 23:01

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.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 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...
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 02 avr. 2019, 23:35

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...
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 03 avr. 2019, 10:23

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 .
HP Gen 8 / OMV4 sur SSD / Jeedom 3.3.37 VM Debian 9
RFLink - Sondes Oregon THN 132 N / THGR 122 NX / THGR 810 / THC238 - Prises DIO/Dedra/IDK.
Orvibo AllOne et S20 - Onduleur APC Back-UPS ES 700VA
Écosystème xiaomi - Dash buttons - GHome et mini.

mortyre
Actif
Messages : 1247
Inscription : 17 mai 2016, 16:51

Re: Explications sur le nouveau codage des widgets

Message par mortyre » 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
PROD: NAS1815+ VMM Buster 10.2 / Jeedom 4.0.31 / MariaDB 10.3.18 / PHP 7.3.9
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

Avatar de l’utilisateur
JAG
Actif
Messages : 597
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 03 avr. 2019, 17:41

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
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Avatar de l’utilisateur
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 03 avr. 2019, 17:55

En fait, il faudrait une adaptation du code original pour une comptabilité V3
HP Gen 8 / OMV4 sur SSD / Jeedom 3.3.37 VM Debian 9
RFLink - Sondes Oregon THN 132 N / THGR 122 NX / THGR 810 / THC238 - Prises DIO/Dedra/IDK.
Orvibo AllOne et S20 - Onduleur APC Back-UPS ES 700VA
Écosystème xiaomi - Dash buttons - GHome et mini.

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités