Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

réparer un widget?

Réservé à l'utilisation et la création de widgets dans JEEDOM
looping
Timide
Messages : 149
Inscription : 30 avr. 2017, 11:31
Localisation : Lot (46)

réparer un widget?

Message par looping » 18 août 2019, 18:19

j'utilise depuis pas mal de temps le widget "puissance" qui n'est plus dispo sur le market :?
je l'adore et convenait parfaitement pour l'affichage de la pression du circuit de ma chaudière.
Malheureusement avec le passage en V3, le refresh ne se fait plus.
J'ai cherché toute l'après midi comment le mettre à jour en vain :/

j'ai cru comprendre que #state# n'était plus utilisé, mais lorsque j'enlève les # il ne fonctionne plus du tout!

Est ce long pour le corriger? surement une âme charitable pourrait me mettre sur la voie svp?
Merci!

Code : Tout sélectionner

<div style="width:125px;height:60px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <canvas id="myCanvas#id#" width="125px" height="60px"></canvas> 
    <script>
      var canvas = document.getElementById('myCanvas#id#');
      var context = canvas.getContext('2d');
      var x = 55;
      var y = 60;
      var radius = 45;
      var startAngle = 1.0 * Math.PI;
      
      //compute the size (between 0 and 1.0)
      var size =  (#state# - #minValue#) * (1.0/(#maxValue# - #minValue#));

      var endAngle = (1+size) * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 17;
      
      var puissance = #state#; // YAN: j'ai modifié cette ligne pour avoir une décimale pour la pression de la chaudière était: var puissance = Math.round('#state#')     
      context.fillStyle = 'white';  // couleur de la valeur et de l'unité
      context.font = "18px Arial";  // police de la valeur
      context.fillText(puissance,27,59);  // position de la valeur
      
      context.font = "13px Arial"; // police de l'unitée
      context.fillText("#unite#",72,59);   // position de l'unité

      // line color
      // add linear gradient
      var grad=context.createLinearGradient(0,0,170,0);
      
      grad.addColorStop(0,'#00FF21');   // vert
      grad.addColorStop(0.1,'#FFF426');  // jaune
      grad.addColorStop(0.25,'#FF6A00');  // orange
      grad.addColorStop(0.5,'#FF0000');  // rouge
     
      
      context.strokeStyle = grad;
      context.stroke(); 
      context.closePath();

    </script>
</div>
Capture d’écran 2019-08-18 à 18.18.18.png
Capture d’écran 2019-08-18 à 18.18.18.png (17.4 Kio) Consulté 772 fois

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

Re: réparer un widget?

Message par JAG » 18 août 2019, 19:34

Salut,

j'ai fait quelques modif mais je n'arrive pas a comprendre comment fonctionne.
C'est une version de test, la courbe se met bien a jour quand on augmente mais pas quand on reduit la puissance

@salviaf : peut-tu l'aider ?

Code : Tout sélectionner

<div style="width:125px;height:100px;margin-right:10px;margin-left:10px;" class="cmd tooltips cmd-widget cursor container-fluid #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#" title="#collectDate#">
    <canvas id="myCanvas#id#" width="125px" height="60px"></canvas>
    <span class="value#id# timeCmd label label-default"></span> <!-- TEST VALEUR -->
    
    <script>
        //Ajout JAG
        jeedom.cmd.update['#id#'] = function(_options){
            var state = parseFloat(_options.display_value);
            var statemin = #minValue#;
            var statemax = #maxValue#;
        //Fin Ajout JAG
      
            var canvas = document.getElementById('myCanvas#id#');
            var context = canvas.getContext('2d');
            var x = 55;
            var y = 60;
            var radius = 45;
            var startAngle = 1.0 * Math.PI;
            
            //compute the size (between 0 and 1.0)
                var size =  (state - statemin) * (1.0/(statemax - statemin));
                //var size =  (#state# - #minValue#) * (1.0/(#maxValue# - #minValue#)); Avant Modif JAG
                
                var endAngle = (1+size) * Math.PI;
                var counterClockwise = false;
                
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
            context.lineWidth = 17;
      
            var puissance = Math.round(state);
            //var puissance = Math.round('#state#'); Avant Modif JAG
            context.fillStyle = 'white';            // couleur de la valeur et de l'unité
            context.font = "18px Arial";            // police de la valeur
            context.fillText(puissance,27,59);      // position de la valeur
      
            context.font = "13px Arial";            // police de l'unité
            context.fillText("#unite#",72,59);      // position de l'unité

            // line color
            // add linear gradient
            var grad=context.createLinearGradient(0,0,170,0);
      
            grad.addColorStop(0,'#00FF21');       // vert
            grad.addColorStop(0.1,'#FFF426');     // jaune
            grad.addColorStop(0.25,'#FF6A00');    // orange
            grad.addColorStop(0.5,'#FF0000');     // rouge
     
            context.strokeStyle = grad;
            context.stroke(); 
            context.closePath();

             //Ajout JAG
                $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate); 
                $('.cmd[data-cmd_id=#id#] .value#id#').empty().append(_options.display_value+' '+'#unite#');
        }
            jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        //Fin Ajout JAG
    </script>
</div>
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: réparer un widget?

Message par Salvialf » 18 août 2019, 23:32

Présent ;) ! Yes demain soir je serai de retour sans femme ni enfants je regarderai ça
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: réparer un widget?

Message par Salvialf » 19 août 2019, 21:33

Bonsoir,

Ça me parait pas mal... j'ai ajouté une ligne pour effacer le canva juste avant d'écrire la nouvelle valeur pour éviter qu'il ne le fasse par dessus l'ancienne. Et par excès de zèle j'ai ajouté l'affichage de l'unité à la suite de la valeur et centré le texte (en conservant l'ancien code en commentaire):

Code : Tout sélectionner

<div style="width:125px;height:100px;margin-right:10px;margin-left:10px;" class="cmd tooltips cmd-widget cursor container-fluid #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#" title="#collectDate#">
    <canvas id="myCanvas#id#" width="125px" height="60px"></canvas>
    <span class="value#id# timeCmd label label-default"></span> <!-- TEST VALEUR -->
    
    <script>
        //Ajout JAG
        jeedom.cmd.update['#id#'] = function(_options){
            var state = parseFloat(_options.display_value);
            var statemin = #minValue#;
            var statemax = #maxValue#;
        //Fin Ajout JAG
      
            var canvas = document.getElementById('myCanvas#id#');
            var context = canvas.getContext('2d');
            var x = 55;
            var y = 60;
            var radius = 45;
            var startAngle = 1.0 * Math.PI;
            
            //compute the size (between 0 and 1.0)
                var size =  (state - statemin) * (1.0/(statemax - statemin));
                //var size =  (#state# - #minValue#) * (1.0/(#maxValue# - #minValue#)); Avant Modif JAG
                
                var endAngle = (1+size) * Math.PI;
                var counterClockwise = false;
                
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
            context.lineWidth = 17;
      
            var puissance = Math.round(state);
            //var puissance = Math.round('#state#'); Avant Modif JAG
            context.fillStyle = 'white';            // couleur de la valeur et de l'unité
            context.font = "18px Arial";            // police de la valeur
   	    context.clearRect(0, 0, canvas.width, canvas.height);  // Ajout Salvialf
	    context.fillText(puissance+" #unite#",37,59);      // position de la valeur
      
         //  context.font = "13px Arial";            // police de l'unité
         //  context.fillText(" #unite#",72,59);      // position de l'unité

            // line color
            // add linear gradient
            var grad=context.createLinearGradient(0,0,170,0);
      
            grad.addColorStop(0,'#00FF21');       // vert
            grad.addColorStop(0.1,'#FFF426');     // jaune
            grad.addColorStop(0.25,'#FF6A00');    // orange
            grad.addColorStop(0.5,'#FF0000');     // rouge
     
            context.strokeStyle = grad;
            context.stroke(); 
            context.closePath();

             //Ajout JAG
                $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate); 
                $('.cmd[data-cmd_id=#id#] .value#id#').empty().append(_options.display_value+' '+'#unite#');
        }
            jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        //Fin Ajout JAG
    </script>
</div>

J'ai voulu ajouter l'animation de la jauge mais j'ai encore pas mal de lecture devant moi avant d'être en mesure d'appréhender le sujet :geek: :mrgreen:
Dernière édition par Salvialf le 20 août 2019, 19:14, édité 1 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
JAG
Actif
Messages : 597
Inscription : 21 mai 2016, 11:10

Re: réparer un widget?

Message par JAG » 19 août 2019, 22:32

Merci
Je teste demain


Envoyé de mon iPhone en utilisant Tapatalk
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

looping
Timide
Messages : 149
Inscription : 30 avr. 2017, 11:31
Localisation : Lot (46)

Re: réparer un widget?

Message par looping » 20 août 2019, 09:55

Vous êtes des champions les gars!! je vais m'empresser de tester ca! Merci pour le coup de main

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

Re: réparer un widget?

Message par JAG » 20 août 2019, 10:47

Salut

J'ai fait une petite modif, l'ajout de la commande qu'il est possible de masquer automatiquement depuis le Core
j'ai aussi enlever nos commentaires de tests

voici le resultat

Code : Tout sélectionner

<div style="width:125px;height:100px;margin-right:10px;margin-left:10px;" class="cmd tooltips cmd-widget cursor container-fluid #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#" title="#collectDate#">
    <!-- Info Widget
        Basé sur les widget de 		: ??
        Mise à jour	                : JAG 20190820  : Adaptation du code pour Core V3 (modif faite par @salviaf et @JAG)
    -->
    <div class="title #hide_name#">
        <div class="cmdName" style="#hideCmdName#">#name_display#</div>
    </div>
    <canvas id="myCanvas#id#" width="125px" height="60px"></canvas>
    <script>
        jeedom.cmd.update['#id#'] = function(_options){
            var state = parseFloat(_options.display_value);

            var canvas = document.getElementById('myCanvas#id#');
            var context = canvas.getContext('2d');
            var x = 55;
            var y = 60;
            var radius = 45;
            var startAngle = 1.0 * Math.PI;
            
            //compute the size (between 0 and 1.0)
                var size =  (state - #minValue#) * (1.0/(#maxValue# - #minValue#));
                var endAngle = (1+size) * Math.PI;
                var counterClockwise = false;
                
            context.beginPath();
            context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
            context.lineWidth = 17;
      
            var puissance = Math.round(state);
            context.fillStyle = 'white';                            // couleur de la valeur et de l'unité
            context.font = "18px Arial";                            // police de la valeur
            context.clearRect(0, 0, canvas.width, canvas.height);   // Effacer l'ancienne valeur : Ajout Salvialf
            context.fillText(puissance+" #unite#",37,59);           // position de la valeur

            var grad=context.createLinearGradient(0,0,170,0);
      
            grad.addColorStop(0,'#00FF21');       // vert
            grad.addColorStop(0.1,'#FFF426');     // jaune
            grad.addColorStop(0.25,'#FF6A00');    // orange
            grad.addColorStop(0.5,'#FF0000');     // rouge
     
            context.strokeStyle = grad;
            context.stroke(); 
            context.closePath();

            $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate); 
            $('.cmd[data-cmd_id=#id#] .value#id#').empty().append(_options.display_value+' '+'#unite#');
        }
            jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>
</div>
Je vais voir pour corriger aussi la version mobile
merci @salviaf pour la fonction clean, je ne connaissais pas

Bonne journé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

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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