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 :)

Toute la communauté vous remercie

Widget custom simple ne fonctionnant plus depuis la MAJ 3.2.x

Réservé à l'utilisation et la création de widgets dans JEEDOM
GuillaumeDieppe
Actif
Messages : 523
Inscription : 27 janv. 2017, 10:53

Widget custom simple ne fonctionnant plus depuis la MAJ 3.2.x

Message par GuillaumeDieppe » 01 mai 2018, 23:51

Bonjour,

Les deux widget ci dessous ne fonctionnent qu'après refresh du navigateur :
<div style="min-width:320px;min-height:220px;margin-top:0px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Véhicule">
<center>
<!-- A decommenter pour l'affichage du nom
<span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span><br>
-->
<span id="iconCmd#id#"></span>
</center>
</div>
<script>
// A décomenter pour faire disparaître la tuile si il n'y a pas de poubelles (modification de Sshafi)
var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
// if ('#state#'==0) $(tuile).attr('style','display: none;');

if ('#state#'==1) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Vehicule/Car1.png" height=200 width=318>');
if ('#state#'==2) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Vehicule/Car2.png" height=200 width=318>');
if ('#state#'==3) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Vehicule/Car3.png" height=200 width=318>');

</script>
<div style="min-width:80px;min-height:80px;padding:0px" class="cmd tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" title="Climatisateur">
<center>
<!-- A decommenter pour l'affichage du nom
<span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span><br>
-->
<span id="iconCmd#id#"></span>
</center>
</div>
<script>
// A décomenter pour faire disparaître la tuile si il n'y a pas de poubelles (modification de Sshafi)
var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
// if ('#state#'==0) $(tuile).attr('style','display: none;');

if ('#state#'==0) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Climatisateur/ClimOff.png" height=98 width=204>');
if ('#state#'==1) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Climatisateur/ClimChaud.png" height=98 width=204>');
if ('#state#'==2) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Climatisateur/ClimFroid.png" height=98 width=204>');

</script>
Que dois je modifier pour que cela fonctionne ?

Merci

Cdt
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

Bosquetia
Actif
Messages : 6004
Inscription : 10 mai 2016, 07:54

Re: Widget custom simple ne fonctionnant plus depuis la MAJ 3.2.x

Message par Bosquetia » 02 mai 2018, 07:48

On en a déjà parlé
viewtopic.php?f=29&t=35941

Avatar de l’utilisateur
fwehrle
Actif
Messages : 2523
Inscription : 01 juil. 2015, 11:03
Localisation : Strasbourg

Re: Widget custom simple ne fonctionnant plus depuis la MAJ 3.2.x

Message par fwehrle » 02 mai 2018, 13:36

Guillaume, tu peux t'inspirer du code du widget info binaire du core pour refaire les tiens.
Il faut principalement rajouter les nouvelles classes, et nouvelles meta (par ex. : data-version="#version#"), et utiliser la fonction de rafraichissement jeedom.cmd.update.
Comme ca :

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# 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="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"></span>
  </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="fa fa-check"></i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fa fa-times"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Dans ton cas, ca pourrait donner ca (non testé) :

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# 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="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"></span>
  </center>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      

       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Vehicule/Car'+_options.display_value+'.png" height=200 width=318');
    
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
J'ai supprimé les if sur l'état pour construire le nom de l'image directement, mais tu peux très bien reprendre le system de if le jour ou tes images ne s'appellent plus toutes car1, 2 3..

Hope this helps
Jeedom 3 sur Debian 9 en VM Proxmox 5 sur NUC Intel.
(Anciennement sur Docker sur Syno DS-415+ / MariaDB / DSM 6)
Teleinfo / RFXCom / Stick ZWave / IPX / Serveur Traccar / Blea

AlainM
Actif
Messages : 935
Inscription : 20 mars 2016, 14:21

Re: Widget custom simple ne fonctionnant plus depuis la MAJ 3.2.x

Message par AlainM » 02 mai 2018, 15:14

Bonjour,
J'ai moi aussi quelques widgets qui posent problème. Seul je ne suis pas compétant pour modifier le code pour rendre ce widget compatible.
Il s'agit du widget AutoManu dont voici le code. Si quelqu'un qui sait pouvait me dire ce qu'il y a à modifier, je pourrais peut-être m'en inspirer pour les autres Widgets

Code : Tout sélectionner

<div class="cmd tooltips cmd-widget cursor automanu" data-type="action" data-subtype="other" data-cmd_id="#id#" >
	<div class="automanuDivConteneur">
		<span class="automanuName">#valueName#<br/></span>
		<span class="automanuAction"><br/><img class="automanuImg" style="width: 80px;" src="" /></span>
	</div>
	<script type="text/javascript">
           	$.include(['plugins/widget/core/template/dashboard/cmd.action.other.AutoManuSwitch_IMG/AutoManu.js', 'plugins/widget/core/template/dashboard/cmd.action.other.AutoManuSwitch_IMG/AutoManu.css'], function() {
            var styleimg = automanuStyleimg('#styleimg#');
            var widget = $('div.cmd[data-cmd_id="#id#"]');
          	var state1 = 'auto';

            if ('#hidename#'.trim() == '1') { $('span.automanuName', widget).css('display','none'); }
          	if ('#nospace#'.trim() == '1') { $('span.automanuAction br', widget).remove(); }
            if ('#inline#'.trim() == '1') { automanuInline(widget); }
          	if ('#reverse#'.trim() == '1') { state1 = 'manu'; }
            if (automanuNormalize('#state#') == state1) {
                $('.automanuImg', widget).attr('src','plugins/widget/core/template/dashboard/cmd.action.other.AutoManuSwitch_IMG/AutoManu'+styleimg+'_AUTO.png');
                if (automanuNormalize('#name#') == 'auto') {
                    widget.hide();
                }
            } else {
                $('.automanuImg', widget).attr('src','plugins/widget/core/template/dashboard/cmd.action.other.AutoManuSwitch_IMG/AutoManu'+styleimg+'_MANU.png');
                if (automanuNormalize('#name#') == 'manu') {
                    widget.hide();
                }
            }
            $('.automanuAction', widget).off();
            $('.automanuAction', widget).on('click', function() {
                jeedom.cmd.execute({id: '#id#'});
            });
		});	
	</script>
</div>
Merci de votre aide précieuse

GuillaumeDieppe
Actif
Messages : 523
Inscription : 27 janv. 2017, 10:53

Re: Widget custom simple ne fonctionnant plus depuis la MAJ 3.2.x

Message par GuillaumeDieppe » 02 mai 2018, 22:48

fwehrle a écrit :
02 mai 2018, 13:36
Guillaume, tu peux t'inspirer du code du widget info binaire du core pour refaire les tiens.
Il faut principalement rajouter les nouvelles classes, et nouvelles meta (par ex. : data-version="#version#"), et utiliser la fonction de rafraichissement jeedom.cmd.update.
Comme ca :

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# 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="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"></span>
  </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="fa fa-check"></i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fa fa-times"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Dans ton cas, ca pourrait donner ca (non testé) :

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# 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="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"></span>
  </center>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      

       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Vehicule/Car'+_options.display_value+'.png" height=200 width=318');
    
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
J'ai supprimé les if sur l'état pour construire le nom de l'image directement, mais tu peux très bien reprendre le system de if le jour ou tes images ne s'appellent plus toutes car1, 2 3..

Hope this helps

Merci pour l'aide, j'ai testé et tenté de comprendre comment ça fonctionne, mais pas trouvé... Sans doute un petit détail mais je n'arrive pas à le faire fonctionner
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité