Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

Explications sur le nouveau codage des widgets

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
HerveL
Timide
Messages : 473
Inscription : 11 sept. 2015, 22:46
Localisation : Nantes

Re: Explications sur le nouveau codage des widgets

Message par HerveL » 16 avr. 2019, 16:50

Salvialf a écrit :
16 avr. 2019, 16:40
Salut,

il manque le #id# à la fin de "iconCmd".
Ah yes !
Merci beaucoup :D
Je me doutais bien que ça tournait autour des classes; mais je ne voyais pas où
Hervé
Utilisateur Mini+ et SMART passionné
Zwave, IPX800V3, IPX800V4, Rfxcom, RFP1000

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

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 23 avr. 2019, 09:30

Hello
Petite question aux spécialistes widgets V3.
J'avais lors de la mise en place de mon Riiot sur la piscine, récupéré les widgets de Bello65

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<span title='Min' class='tooltips'>#minHistoryValue#</span>|
            	<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|
            	<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
</div>
Ils fonctionnent toujours, mais pouvez vous me dire si ils sont 100% compatibles V3 ou si ils doivent être modifiés
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

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

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 27 avr. 2019, 09:31

Claude69 a écrit :
23 avr. 2019, 09:30
Hello
Petite question aux spécialistes widgets V3.
J'avais lors de la mise en place de mon Riiot sur la piscine, récupéré les widgets de Bello65

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<span title='Min' class='tooltips'>#minHistoryValue#</span>|
            	<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|
            	<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
</div>
Ils fonctionnent toujours, mais pouvez vous me dire si ils sont 100% compatibles V3 ou si ils doivent être modifiés
Hello
Je retente ma question. Les spécialistes @jag, @salvialf. Si vous passez par ici
Pas
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3690
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 27 avr. 2019, 09:38

Claude69 a écrit :
27 avr. 2019, 09:31
Claude69 a écrit :
23 avr. 2019, 09:30
Hello
Petite question aux spécialistes widgets V3.
J'avais lors de la mise en place de mon Riiot sur la piscine, récupéré les widgets de Bello65

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<span title='Min' class='tooltips'>#minHistoryValue#</span>|
            	<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|
            	<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
</div>
Ils fonctionnent toujours, mais pouvez vous me dire si ils sont 100% compatibles V3 ou si ils doivent être modifiés
Hello
Je retente ma question. Les spécialistes @jag, @salvialf. Si vous passez par ici
Pas
Bonjour, si le code du widget est complet, alors non il ne prend pas en compte les nouvelles règles de la V3, ou alors il manque toute la partie SCRIPT

j'avais fait ce post : viewtopic.php?f=29&t=44201&hilit=information+widget
qui devrait vous permettre de rajouter la partie manquante pour l'adaptation V3
Dernière édition par Antoinekl1 le 27 avr. 2019, 09:42, édité 1 fois.
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 27 avr. 2019, 09:40

Bonjour @Claude,

Étant donné qu'il n'y a pas de javascript dans le code du widget, il n'est pas concerné par la nouvelle fonction d'update.
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
Antoinekl1
Actif
Messages : 3690
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 27 avr. 2019, 09:43

Salvialf a écrit :
27 avr. 2019, 09:40
Bonjour @Claude,

Étant donné qu'il n'y a pas de javascript dans le code du widget, il n'est pas concerné par la nouvelle fonction d'update.
Oui, mais il y a quand même le #state#, donc la vignette ne se mettra pas à jour sans refresh manuel
idem pour les autres infos changeantes d'ailleurs
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 27 avr. 2019, 09:55

Ah oui j'avais pas vu le state de bon matin... Donc ça ne doit pas se mettre à jour automatiquement à l'heure actuelle @Claude.

tu peux essayer ça:

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#" >
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white" class="state#id#"></span>
  		</div>
		<div style=" font-size: 0.7em;#displayHistory#;">
				<span title='Min' class='tooltips'>#minHistoryValue#</span>|
            	<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|
            	<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
  <script>
  jeedom.cmd.update['#id#'] =function(_options){
        $('.cmd[data-cmd_id=#id#] .state#id#').empty().html(_options.display_value + '#unite#');
                                                             
      $('.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>
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 : 2066
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 27 avr. 2019, 11:53

Merci pour vos réponse
Les infos étants rafraîchies seulement 20 fois par jour, il m'est difficile de savoir si elles s'actualisaient sans F5.
J'ai fait la modif avec ton code et ca a l'air de fonctionner.
Merci
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

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

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 27 avr. 2019, 12:00

Je profite de votre présence pour une question
J'ai 5 fois ce widget avec pour seule difference l'icone utilisée.

Code : Tout sélectionner

<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="fa fa-flask"></i></div>
Serait il possible de faire un if name= pH then icone=fa-flask elseif name = Salinité then icone= xxxx

PS: @antoinekl1 : Je vais étudier avec soins ton post sur le codage
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

winhex
Actif
Messages : 3641
Inscription : 23 janv. 2015, 01:41

Re: Explications sur le nouveau codage des widgets

Message par winhex » 27 avr. 2019, 13:03

j'ai le même widget icon info/action depuis la 1er v2 (supprimé du forum + 1 ans)
après avoir bien paramétré la place j'ai défini en param avancé
icon_on/off
la couleur
la taille
la hauteur (top : à faire comme size)
certains icon on une taille ou positionnement différent

ça permet de ne pas duppliqué x/fois le widget
Screenshot_20190427-125215_Chrome.jpg
Screenshot_20190427-125215_Chrome.jpg (32.09 Kio) Consulté 189 fois
cellule portail n'est qu'une info, lastvalue dessous est une commande qui si je clic dessus mène à l'historique "un paramètre avancé sur id etat)
si tu veux gardé le même comportement :
clic sur info mène à ton historique
ajout en 1er ligne la class #history#

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <span style="padding : 3px;border-radius: 4px;font-size: #size#;font-weight: bold;margin-top:-5px;position:relative;top:-6px;" class="iconCmd"></span><br />


  </center>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
     $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
     if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-off#"></i>').css('color', '#color-off#');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon #icon-on#"></i>').css('color', '#color-on#');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Screenshot_20190427-125835_Chrome.jpg
Screenshot_20190427-125835_Chrome.jpg (138.37 Kio) Consulté 189 fois
garde en mémoire qu'en v4 ça risque de changer, donc un if/else te compliquera l'adaptation.

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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