Mise à jour de widgets sans refresh

[OUARZA]

Merci beaucoup cadavor.
Rendez-vous à la prochaine mise à jour du widget

[OUARZA]

Bonjour,
Suite à la modification, l'actualisation ne se fait toujours pas et je me retrouve avec un dédoublement des icônes.
J'ai l'impression que le dédoublement se fait lorsque le widget est mis à jour.

Screenshot_20190424_072102_com.google.android.apps.photos.jpg (662.44 Kio) Consulté 3345 fois

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
<!-- A decommenter pour l'affichage du nom -->
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name#</div>
<!---->
        <div style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" id="iconCmd#id#"></div>
    </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;');
jeedom.cmd.update['#id#'] = function(_options){  
	if ('#state#'=='Jaune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');
	if ('#state#'=='Bleue') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_bleue.png" height=70 width=70>');
	if ('#state#'=='Verte') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_verte.png" height=70 width=70>');
	if ('#state#'=='Marron') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_marron.png" height=70 width=70>');
	if ('#state#'=='Grise') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle.png" height=70 width=70>');
  	if ('#state#'=='Aucune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_croix.png" height=70 width=70>');}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

Avez-vous une idée ?
Mathieu

[ach65]

Bonjour,
Si c'est pas trop abuser, question a Cavador :
J'ai suivi tes conseils, pour régler le même pb pour un Widget de type "Gauge",


mais rien a faire, il ne se met pas a jour automatiquement mon code :

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="Valeur du #valueDate#, collectée le #collectDate#" >
    <div style="width:95px;height : 95px;" class="gauge cursor #history#" data-cmd_id="#id#" ></div>

    <div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block" class="cmdStats">
        <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_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
       }
       
       if (is_numeric('#state#')) {
        // The speed gauge
        $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
            chart: {
                events: {
                    click: function (event) {
                        if (!$.mobile && '#history#' == 'history cursor') {
                            $('#md_modal2').dialog({title: "Historique"});
                            $("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
                        }
                    }
                },
                    type: 'gauge',
                  	borderWidth: 0,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    backgroundColor: null,
                  plotBorderWidth: 0,
                    plotShadow: false,
                    height: 90,
                    spacingTop: 0,
                    spacingLeft: 0,
                    spacingRight: 0,
                    spacingBottom: 0
                },

                credits: {
                    text: '',
                    href: '',
                },
                title: {
                    text: ''
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
             },
                dial: {
                    baseLength: '0%',
                    baseWidth: 10,
                    radius: '100%',
                    rearLength: '0%',

                  backgroundColor: 'black',
                    topWidth: 1
                }
            }
        },
                tooltip: {
                    enabled: false
                },
                exporting : {
                    enabled: false
                },
         		pane: {
                  size: 90,
	        		startAngle: -90,
	        		endAngle: 90,
			background: false
	    		},

                // the value axis
 	    yAxis: {
            labels: {
               enabled: false
            },
            title: {
                useHTML: true,
                style: {
                	color:'white',
                    zIndex: 999,
                    'font-weight': 'bold',
                  'font-size': '130%'
                },
                        align: 'middle',
                        y: 50,
                        text: '#state# #unite#',
                    },
			            tickWidth: 0,
                        tickLength: 0,
                        lineWidth: 0,
                        minorTickPosition: 'outside',
                        tickPosition: 'outside',
                        tickColor: '#FFFFFF',
                        lineColor: '#FFFFFF',

	       min: #minValue#,
	       max: #maxValue#,
	        plotBands: [{
	            from: #minValue#,
	            to: #minValue# + ((#maxValue# - #minValue#) * (1 / 4)),
	            
           color: 'rgb(224, 94, 82', // red
                thickness: '50%'
	        }, {
	            from: #minValue# + ((#maxValue# - #minValue#) * (1 / 4)),
	            to: #minValue# + ((#maxValue# - #minValue#) * (3/5)),
	            color:'rgb(249, 212, 103)', // yellow
                thickness: '50%'
	        }, {
	            from: #minValue# + ((#maxValue# - #minValue#) * (3/5)),
	            to: #maxValue#,
	           color: 'rgb(50, 250, 50)', // green
                thickness: '50%'
	        }]        
	    },
                        series: [{
                            data: [parseInt('#state#')]
                        }]

                    });

 } else {
        $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
    }
</script>

</div>

[Salvialf]

Bonjour,
Si c'est pas trop abuser, question a Cavador :
J'ai suivi tes conseils, pour régler le même pb pour un Widget de type "Gauge",

Salut,

Désolé c'est moi qui répond

J'ai testé, la jauge se mettait bien à jour mais pas la valeur en bas ni l'historique.

C'est un premier jet rapide mais est-ce mieux ainsi ?:

Code : Tout sélectionner

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="container-fluid tooltips cmd cmd-widget #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <div style="width:95px;height : 55px;" class="gauge cursor #history#" data-cmd_id="#id#" ></div>
	<span style="font-size: 15px;font-weight: bold;color: white" class="state#id#"></span>
    <div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block" class="cmdStats">
		<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_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
         $('.cmd[data-cmd_id=#id#] .state#id#').empty().html(_options.display_value + '#unite#');
         $('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
    }
       if (is_numeric('#state#')) {
        // The speed gauge
        $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
            chart: {
                events: {
                    click: function (event) {
                        if (!$.mobile && '#history#' == 'history cursor') {
                            $('#md_modal2').dialog({title: "Historique"});
                            $("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
                        }
                    }
                },
                    type: 'gauge',
                  	borderWidth: 0,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    backgroundColor: null,
                  plotBorderWidth: 0,
                    plotShadow: false,
                    height: 90,
                    spacingTop: 0,
                    spacingLeft: 0,
                    spacingRight: 0,
                    spacingBottom: 0
                },

                credits: {
                    text: '',
                    href: '',
                },
                title: {
                    text: ''
                },
                navigation: {
                    buttonOptions: {
                        enabled: false
                    }
                },
                        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
             },
                dial: {
                    baseLength: '0%',
                    baseWidth: 10,
                    radius: '100%',
                    rearLength: '0%',

                  backgroundColor: 'black',
                    topWidth: 1
                }
            }
        },
                tooltip: {
                    enabled: false
                },
                exporting : {
                    enabled: false
                },
         		pane: {
                  size: 90,
	        		startAngle: -90,
	        		endAngle: 90,
			background: false
	    		},

                // the value axis
 	    yAxis: {
            labels: {
               enabled: false
            },
           /* title: {
                useHTML: true,
                style: {
                	color:'white',
                    zIndex: 999,
                    'font-weight': 'bold',
                  'font-size': '130%'
                },
                        align: 'middle',
                        y: 50,
                        text: '#state# #unite#',
                    },*/
			            tickWidth: 0,
                        tickLength: 0,
                        lineWidth: 0,
                        minorTickPosition: 'outside',
                        tickPosition: 'outside',
                        tickColor: '#FFFFFF',
                        lineColor: '#FFFFFF',

	       min: #minValue#,
	       max: #maxValue#,
	        plotBands: [{
	            from: #minValue#,
	            to: #minValue# + ((#maxValue# - #minValue#) * (1 / 4)),
	            
           color: 'rgb(224, 94, 82', // red
                thickness: '50%'
	        }, {
	            from: #minValue# + ((#maxValue# - #minValue#) * (1 / 4)),
	            to: #minValue# + ((#maxValue# - #minValue#) * (3/5)),
	            color:'rgb(249, 212, 103)', // yellow
                thickness: '50%'
	        }, {
	            from: #minValue# + ((#maxValue# - #minValue#) * (3/5)),
	            to: #maxValue#,
	           color: 'rgb(50, 250, 50)', // green
                thickness: '50%'
	        }]        
	    },
                        series: [{
                            data: [parseInt('#state#')]
                        }]

                    });

 } else {
        $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
    }
       jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

[ach65]

Merci Salvialf !
Oui, ça a l'air de se mettre a jour, mais je n'ai plus l'info "valeur du xxx collectée le xxxx" en passant la souris dessus !

Tu as mis le "title" en commentaire ? du coup comment s'affiche la data (couleur, style ..)

[Salvialf]

Je n'ai pas vu le code pour le tooltip "valeur du xxxxxx, collectée le xxxxxx,...." je l'ai peut-être fait sauter par mégarde je regarde tout à l'heure.

En fait il ne peut pas mettre à jour la ligne "text: '#state# #unite#' c'est pour ça que la valeur ne rafraîchissait pas. Du coup j'ai mis le bloc en commentaire. Tu modifiais la couleur de l'état à la volée ou tu veux juste personnaliser une fois pour toute la présentation de la valeur?
Si c'est la deuxième solution tu peux ajouter tes styles sur la ligne <span class="state#id#> au début.

C'est toujours compliqué de toucher à un code qu'on utilise pas car on n'en connaît pas tous les usages...

EDIT: OK j'ai modifié le code du message au-dessus pour remettre le tooltip "valeur du xxxx, collectée le xxxx"

[ach65]

Et du coup ça ne se rafraichis plus !

[Salvialf]

Et du coup ça ne se rafraichis plus !

Chez moi ça fonctionne:

20190427_113320.gif (71.25 Kio) Consulté 3272 fois

Essayes de repasser sur un widget 'core' et de revenir sur ton widget...

...Désolé d'avoir voulu aider, tu as le code de ton widget d'origine que tu as posté juste au-dessus n'hésites pas à le remettre.

[ach65]

En fait le widget se met a jour,.... mais l'info "valeur du xxxx, collectée le xxxx" en passant avec la souris !!
Merci en tout cas de m'avoir aidé !
Mais as tu la doc sur cette mise a jour de Widget ? je n'ai pas trouvé dans la doc Jeedom !

[Salvialf]

C'est normal que la valeur ne se mettre pas à jour sur le tooltip étant donné comment elle est intégrée au code... elle ne se mettait pas à jour avant non plus car je n'ai rien changé.

Je peux régler ça mais j'ai fait en sorte de modifier au minimum ton widget au premier abord... suffit de demander gentiment!

EDIT: modification effectuée, le tooltip se met maintenant à jour aussi

[ach65]

oui ! Merci! ça marche

Tu n'as pas répondu a ma question sur la doc ?
Je n'ai pas compris en fait les règles pour obtenir ce résultat, c'est un peu opaque pour moi !

[Salvialf]

La doc est là (paragraphe modification d'un widget): https://jeedom.github.io/plugin-widget/ ... chor-1-4-5

Ensuite c'est langages html/css/javascript(jquery) mélangés et les fonctions jeedom à utiliser et donc connaître. La principale nouveauté (qui date de l'année dernière) est l'ajout d'une fonction de rafraichissement des infos qui ont changé sans avoir à rafraichir tout le widget: jeedom.cmd.update['#id#'] = function(_options)

Concernant ton widget cette fonction était déjà incluse. Les problèmes de rafraichissement te concernant sont dûs à la manière dont est codé ton widget.

[OUARZA]

Hello,
Si quelqu'un peut m'aider
viewtopic.php?p=724443#p723310
Merci par avance.

[Salvialf]

Hello,
Si quelqu'un peut m'aider
viewtopic.php?p=724443#p723310
Merci par avance.

Salut,

Peux-tu essayer en ajoutant ".empty()" avant chaque ".append" stp ?

exemple:

Code : Tout sélectionner

if ('#state#'=='Jaune') $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');

devient:

Code : Tout sélectionner

if ('#state#'=='Jaune') $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');

et ainsi de suite...

Et remplace les '#state#' par state:

Code : Tout sélectionner

if (state == 'Jaune') $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');

[OUARZA]

Merci pour ton aide Salvialf, malheureusement je n'ai plus rien qui s'affiche

[Salvialf]

Merci pour ton aide Salvialf, malheureusement je n'ai plus rien qui s'affiche

Alors dans un 1er temps remets les '#state#' comme ils étaient et ajoute seulement les ".empty()" ça empêchera le dédoublement de l'icône. Si tu n'as toujours rien qui s'afficher il suffira de cliquer sur "tester" au bout de la ligne de la commande concernée et l'icône devrait apparaitre.

Je n'ai pas testé mais le problème de dédoublement de l'icône c'est parce qu'il manque les .empy() avant les .append et si le widget ne se rafraichit pas le problème se trouve au niveau du '#state#' je pense... Je vais essayer de tester tout à l'heure.

EDIT: J'ai 5 minutes là je vais donc y regarder de plus près mais je me demande de quelle manière tu envoies l'état jaune, bleue, vert, marron, etc sur ta commande info numérique ?

[OUARZA]

J'utilise une variable.
2 petites questions:
1/ je n'ai pas changé le #state# de la dernière ligne, j'aurai du ?

Code : Tout sélectionner

  	if (state == 'Aucune') $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_croix.png" height=70 width=70>');}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

2/ où dois-je fermer l’accolade de "jeedom.cmd.update['#id#'] = function(_options){"

Voici mon widget virtuel:

jeedom_poubelle2.JPG (37.93 Kio) Consulté 3133 fois

Mat

[Salvialf]

J'utilise une variable.

Voici mon widget virtuel:

Merci pour le shoot écran de ton virtuel ça m'a aidé car le widget était codé en action/autre et les chemins d'accès à tes fichiers *.png pointent sur une version info/numérique. C'était bien plus logique comme widget en lien avec une commande info/autre.

Peux-tu essayer avec ce code et me dire si tout fonctionne comme voulu ?

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
<!-- A decommenter pour l'affichage du nom -->
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name#</div>
<!---->
        <div style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" id="iconCmd#id#"></div>
    </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;');

  var iconUpdate#uid# = function (state) {
  $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').empty();
  	if (state == 'Jaune') {
    $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_jaune.png" height=70 width=70>');}
	if (state == 'Bleue') {
    $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_bleue.png" height=70 width=70>');}
	if (state == 'Verte') {
    $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_verte.png" height=70 width=70>');}
	if (state == 'Marron') {
    $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_marron.png" height=70 width=70>');}
	if (state == 'Grise') {
    $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle.png" height=70 width=70>');}
  	if (state == 'Aucune') {
    $('.cmd[data-cmd_uid=#uid#] #iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle/Poubelle_croix.png" height=70 width=70>');}
  }
jeedom.cmd.update['#id#'] = function(_options){  
	$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>

Comme dit juste avant, le widget va chercher les images dans le dossier "cmd.info.numeric.Poubelle" alors que ce devrait être "cmd.info.string.Poubelle". En cliquant sur "fichiers" en haut dans le plugin widget les fichiers sont présents ? Les menu déroulants sont bien sur "Type:Info" - Sous-type:Autre" ?
Si oui tu peux remplacer tous les numeric par string dans les chemins de tes fichiers. Si non tu peux ajouter les images ici.
Dans tous les cas il faut voir avec le plugin OutilsDev pourquoi il va les chercher dans ce répertoire. Si tu n'es pas à l'aise avec ça tu peux laisser en l'état tant que ça fonctionne.

[OUARZA]

Hello Salvialf,
J'ai mis à jour dans le widget l'information où se trouve les images.
En fait, je me suis inspiré d'un widget où l'image de la poubelle est mise en fonction du chiffre dans la variable.
Moi, j'ai plutôt choisi de mettre un mot et ça fonctionne

jeedom_poubelle3.JPG (36.36 Kio) Consulté 3099 fois

J'ai réalisé les modifications que tu m'as donné, je change la valeur de la variable, et le changement se fait bien sur le dashboard et sur la tablette.

Merci beaucoup pour le temps passé à m'aider.
Mat

[Cappie]

Bonjour,

J'ai un problème avec l'application jeedom, je vous explique j'utilise l'appli jeedom sur un ipad, je met l'appli sur design et je bloque l'ipad en mode guide, tout fonctionne parfaitement, j'ai désactivé la mise en veille et j'ai installé une application pour juste éteindre l'écran au bout de 5 minutes ( ipad jailbreaké), cependant si je reviens le lendemain et j'appui sur l'écran je suis bien sur le design mais quand je tape le code pour déverrouillé mon design rien ne se passe ( widget "dJuL_DIGICODE") obliger de désactiver le mode guide et relancer l'application pour me remettre en design.

Je vous remercie d'avance pour votre aide.

Cordialement