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 !

Widget cercle température

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
rhcpdu13
Timide
Messages : 247
Inscription : 08 déc. 2014, 16:14
Localisation : Gardanne
Contact :

Re: Widget cercle température

Message par rhcpdu13 » 31 oct. 2018, 21:21

cadavor a écrit :
31 oct. 2018, 14:15
rhcpdu13 a écrit :
29 oct. 2018, 17:59
Rebonjour à tous !!

Alors pour faire suite à mon message et illustrer le problème voici les images :
Image
1er lancement, le cercle fonctionne normalement en fonction des paramètres que je lui demande.

Image
Après environ 30 secondes le cercle apparait comme sur l'image ci dessus, est n'est plus rafraichi automatiquement (pour mon module netatmo ou ma sonde de température) mais continu de fonctionner sur mon virtuel à droite, je suis obligé de rafraichir la page pour retomber sur ma 1ere photo, et ainsi de suite.

Si vous avez une idée ou une piste :/
Il faudrait "Inspecter le code" et vérifier la console du navigateur pour voir si des erreurs apparaissent

Si tu es d'accord, je peux faire le diagnostic sur ton Jeedom en m'ouvrant un compte (à suivre par MP)
Alors j'ai tout de même essayé avec ton nouveau code, maintenant j'ai ca en plus au bout de quelques secondes :
Image

Sinon, je ne sais pas si cela peut t'aider, voici ce que j'ai dans la console :

Si ca suffit pas dit moi le et je te crée un compte :)
L’utilisation d’XMLHttpRequest de façon synchrone sur le fil d’exécution principal est obsolète à cause de son impact négatif sur la navigation de l’utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d’informations. getResource.php:2:79417
getResource.php:34:13
Erreur dans les liens source : request failed with status 404
URL de la ressource : http://xxx:90/core/php/getResource.php? ... lang=fr_FR
URL du lien source : jquery.contextMenu.min.js.map[En savoir plus]
Erreur dans les liens source : request failed with status 404
URL de la ressource : http://xxx:90/core/php/getResource.php? ... lang=fr_FR
URL du lien source : toastr.js.map[En savoir plus]
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13
getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
Error: Highcharts error #13: www.highcharts.com/errors/13 getResource.php:10:178
a.error
http://xxx:90/core/php/getResource.php:10:178
getContainer
http://x:90/core/php/getResource.php:246:282
firstRender
http://x:90/core/php/getResource.php:261:215
init
http://xxx:90/core/php/getResource.php:237:368
<anonyme>
http://xxx:90/core/php/getResource.php:487:163
a.wrap/a[m]
http://xxx:90/core/php/getResource.php:19:435
<anonyme>
http://xxx:90/core/php/getResource.php:511:36
a.wrap/a[m]
http://xxx:90/core/php/getResource.php:19:435
getArgs
http://xxx:90/core/php/getResource.php:236:135
a.Chart
http://xxx:90/core/php/getResource.php:235:431
gauge4
http://xxx:90/index.php:308:4
Utilisateur chevronné :p
  • - Raspberry 3 + jeedom |v3.3.27 + v1.3.4 sur Galaxy s8+
    - Z-Wave+ | Rfxcom | Blink(1) | Quirky Nimbus | ssd

Pour connaitre tout mes modules : https://www.jeedom.fr/forum/viewtopic.p ... 016#p74806

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

Re: Widget cercle température

Message par JAG » 01 nov. 2018, 19:05

Salut
super ta mise à jour, par contre tu as de bon yeux pour la taille de l'affichage de l'historique :lol:

Par contre, si je laisse ton code ci-dessous, l'historique ne s'affiche pas

Code : Tout sélectionner

<div class="history#id# col-xs-12 center-block" style="font-size: 8px;#displayHistory#">
	<span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
           <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
           <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
</div>
J'ai remplacé par

Code : Tout sélectionner

<div class='' style="font-size: 8px;#displayHistory#">
	<span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
           <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
           <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
</div>
si tu as une idées
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
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 02 nov. 2018, 10:56

JAG a écrit :
01 nov. 2018, 19:05
Salut
super ta mise à jour, par contre tu as de bon yeux pour la taille de l'affichage de l'historique :lol:

Par contre, si je laisse ton code ci-dessous, l'historique ne s'affiche pas

Code : Tout sélectionner

<div class="history#id# col-xs-12 center-block" style="font-size: 8px;#displayHistory#">
	<span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
           <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
           <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
</div>
J'ai remplacé par

Code : Tout sélectionner

<div class='' style="font-size: 8px;#displayHistory#">
	<span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
           <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
           <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
</div>
si tu as une idées
Bonne soirée
Chez moi aucun soucis, ni pour la taille ni pour l'affichage, il faudra vérifier qu'il n'y est pas de conflit sur les class.
Celle que j'ai ajouté sont pour s'assurer le centrage et avoir une class spécifique pour l'historique afin de pouvoir le modifier pour les design si besoin.
Pensez bien a prendre l'intégralité du code car j'ai modifié certains div parents
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
rhcpdu13
Timide
Messages : 247
Inscription : 08 déc. 2014, 16:14
Localisation : Gardanne
Contact :

Re: Widget cercle température

Message par rhcpdu13 » 05 nov. 2018, 18:52

cadavor a écrit :
31 oct. 2018, 14:15
rhcpdu13 a écrit :
29 oct. 2018, 17:59
Rebonjour à tous !!

Alors pour faire suite à mon message et illustrer le problème voici les images :
Image
1er lancement, le cercle fonctionne normalement en fonction des paramètres que je lui demande.

Image
Après environ 30 secondes le cercle apparait comme sur l'image ci dessus, est n'est plus rafraichi automatiquement (pour mon module netatmo ou ma sonde de température) mais continu de fonctionner sur mon virtuel à droite, je suis obligé de rafraichir la page pour retomber sur ma 1ere photo, et ainsi de suite.

Si vous avez une idée ou une piste :/
Il faudrait "Inspecter le code" et vérifier la console du navigateur pour voir si des erreurs apparaissent

Si tu es d'accord, je peux faire le diagnostic sur ton Jeedom en m'ouvrant un compte (à suivre par MP)
Salut cadavor,

je t'ai envoyé un message privé, mais je sais pas si cela a marché :)
Utilisateur chevronné :p
  • - Raspberry 3 + jeedom |v3.3.27 + v1.3.4 sur Galaxy s8+
    - Z-Wave+ | Rfxcom | Blink(1) | Quirky Nimbus | ssd

Pour connaitre tout mes modules : https://www.jeedom.fr/forum/viewtopic.p ... 016#p74806

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 12 nov. 2018, 14:48

Nouvelle petite correction d'affichage :

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget circle#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div class="cmdName" style="font-weight: bold;font-size: 12px;#hideCmdName#">#name_display#</div>
    <div class="iconCmd#id# c100" style="margin:0; float:none;">
      <span id="circlevalue#id#">#state# #unite#</span>
      <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
      </div>
    </div>
    <div class="history#id# col-xs-12 center-block" style="font-size: 8px;#displayHistory#">
      <span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
      <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
      <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
    </div>
  </center>

  <script>
    jeedom.cmd.update['#id#'] = function(_options) {
      var param_temp_froid = (is_numeric('#param_temp_froid#')) ? parseFloat('#param_temp_froid#') : '18.0';
      var param_temp_chaud = (is_numeric('#param_temp_chaud#')) ? parseFloat('#param_temp_chaud#') : '22.0';
      var param_temp_mini = (is_numeric('#param_temp_mini#')) ? parseFloat('#param_temp_mini#') : '00.0';
      var param_temp_maxi = (is_numeric('#param_temp_maxi#')) ? parseFloat('#param_temp_maxi#') : '30.0';
      var valeur = _options.display_value;
      var pourcent = Math.round((valeur - param_temp_mini) / (param_temp_maxi - param_temp_mini) * 100);
      if (pourcent < 0) pourcent = 0;
      if (pourcent > 100) pourcent = 100;
      
      $('.iconCmd#id#').removeClass (function (index, className) {
       	 return (className.match (/(^|\s)p\d+/g) || []).join(' ');
      });
	  $('.iconCmd#id#').removeClass('blue green orange');
      
      $('#circlevalue#id#').html(valeur + ' #unite#');
      $('.iconCmd#id#').addClass('p'+pourcent);
      if (valeur < param_temp_froid) {
        $('.iconCmd#id#').addClass('blue');
      }
      else if (valeur > param_temp_chaud) {
        $('.iconCmd#id#').addClass('orange');
      }
      else {
        $('.iconCmd#id#').addClass('green');
      }
      
      $("div.iconCmd#id#").attr('title', _options.collectDate);
    };
    
    $.include(['plugins/widget/core/template/dashboard/cmd.info.numeric.(Design) Temperature/circle.css'], function() {
        var param_theme = ('#param_theme#' == 'dark') ? '#param_theme#' : '';
        var param_taille = ('#param_taille#' == 'small' || '#param_taille#' == 'big') ? '#param_taille#' : '';
    	$('.iconCmd#id#').addClass(param_theme);
    	$('.iconCmd#id#').addClass(param_taille);

 	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
    });
  </script>

</div>
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 12 nov. 2018, 14:52

rhcpdu13 a écrit :
05 nov. 2018, 18:52
cadavor a écrit :
31 oct. 2018, 14:15
rhcpdu13 a écrit :
29 oct. 2018, 17:59
Rebonjour à tous !!

Alors pour faire suite à mon message et illustrer le problème voici les images :
Image
1er lancement, le cercle fonctionne normalement en fonction des paramètres que je lui demande.

Image
Après environ 30 secondes le cercle apparait comme sur l'image ci dessus, est n'est plus rafraichi automatiquement (pour mon module netatmo ou ma sonde de température) mais continu de fonctionner sur mon virtuel à droite, je suis obligé de rafraichir la page pour retomber sur ma 1ere photo, et ainsi de suite.

Si vous avez une idée ou une piste :/
Il faudrait "Inspecter le code" et vérifier la console du navigateur pour voir si des erreurs apparaissent

Si tu es d'accord, je peux faire le diagnostic sur ton Jeedom en m'ouvrant un compte (à suivre par MP)
Salut cadavor,

je t'ai envoyé un message privé, mais je sais pas si cela a marché :)
Oui ca a marché, je t'ai répondu.
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 12 nov. 2018, 14:54

JAG a écrit :
01 nov. 2018, 19:05
Salut
super ta mise à jour, par contre tu as de bon yeux pour la taille de l'affichage de l'historique :lol:

Par contre, si je laisse ton code ci-dessous, l'historique ne s'affiche pas

Code : Tout sélectionner

<div class="history#id# col-xs-12 center-block" style="font-size: 8px;#displayHistory#">
	<span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
           <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
           <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
</div>
J'ai remplacé par

Code : Tout sélectionner

<div class='' style="font-size: 8px;#displayHistory#">
	<span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
           <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
           <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
</div>
si tu as une idées
Bonne soirée
Il faudrait inspecter le code généré pour voir si il n'y a pas des styles qui sont en conflit
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

weado
Timide
Messages : 206
Inscription : 15 janv. 2017, 22:19

Re: Widget cercle température

Message par weado » 12 nov. 2018, 17:10

Bonjour à tous, je trouve ce widget très sympa (ça change de la gauge de base) mais j'ai problème, c'est que cela devient pas très beau quand je passe mon curseur dessus (enfin je trouve).
Capture1.PNG
Capture1.PNG (3.29 Kio) Consulté 2023 fois
savez-vous où je peux désactiver le zoom au niveau du widget ?

Edit : De plus, je voudrais changer la couleur, mais c'est un vrai casse tête, car la couleur présent dans le fichier CSS ne fait rien... :cry:

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 13 nov. 2018, 09:54

weado a écrit :
12 nov. 2018, 17:10
Bonjour à tous, je trouve ce widget très sympa (ça change de la gauge de base) mais j'ai problème, c'est que cela devient pas très beau quand je passe mon curseur dessus (enfin je trouve).

Capture1.PNG

savez-vous où je peux désactiver le zoom au niveau du widget ?

Edit : De plus, je voudrais changer la couleur, mais c'est un vrai casse tête, car la couleur présent dans le fichier CSS ne fait rien... :cry:
Pour l'effet de zoom, le rendu est pas terrible si le texte est un peu long.
Pour retirer cette effet, il te faut modifier le fichier CSS (ligne 1121) :

Code : Tout sélectionner

.c100:hover > span {
//  width: 3.33em;
//  line-height: 3.33em;
//  font-size: 0.3em;
  color: #307bbb;
}

.c100:hover:after {
//  top: 0.04em;
//  left: 0.04em;
//  width: 0.92em;
//  height: 0.92em;
}
Le premier bloc s'occupe du texte, le deuxieme du cercle.

Pour les couleurs que souhaites-tu changer?
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

Re: Widget cercle température

Message par Sartog » 13 nov. 2018, 11:43

Bonjour tout le monde,

Je vous présente mes excuses pour mon absence de réponse.
La raison est idiote; je n'étais pas (plus ?) abonné à ce sujet alors que je pensais l'être.

Heureusement, la communauté a été plus efficace que moi en répondant aux besoins de gens, merci à vous !

Cette fois-ci je m'abonne et j'espère être en mesure de vous répondre (mais d'après certaines réponses, il y a des gens plus compétent que moi).
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

weado
Timide
Messages : 206
Inscription : 15 janv. 2017, 22:19

Re: Widget cercle température

Message par weado » 13 nov. 2018, 12:34

Oui, en fait je voulais un peu customiser le widget, que j'avais déjà essayé il y a quelques temps mais sans avoir été satisfait complètement.

Merci pour tes retours sur l'effet zoom, je vais regarder.
Pour les couleurs, je pense avoir compris, en ajouter les lignes présentent en bas du fichier CSS et en changeant les couleurs en Hexa. Par contre, attention à ceux qui veulent le faire, pensez bien à vider le cache avant de visualiser, car sinon vous aller perdre beaucoup de temps ... :?

Enfin, deux petites questions, car je me casse la tête dessus, mais est-il possible d'augmenter la taille de la police, sans augmenter le diamètre du cercle ? Et comment augmenter la grosseur du trait du cercle (là où apparaît la couleur) ?

Merci d'avance et si besoin, je ferai un petit tuto ;-)

Merci d'avance.

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 13 nov. 2018, 12:58

Sartog a écrit :
13 nov. 2018, 11:43
Bonjour tout le monde,

Je vous présente mes excuses pour mon absence de réponse.
La raison est idiote; je n'étais pas (plus ?) abonné à ce sujet alors que je pensais l'être.

Heureusement, la communauté a été plus efficace que moi en répondant aux besoins de gens, merci à vous !

Cette fois-ci je m'abonne et j'espère être en mesure de vous répondre (mais d'après certaines réponses, il y a des gens plus compétent que moi).
Ca pourrait être interessant que tu mettes à jour ton widget sur le market pour que tous les monde profitent des corrections...
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 13 nov. 2018, 13:27

weado a écrit :
13 nov. 2018, 12:34
Enfin, deux petites questions, car je me casse la tête dessus, mais est-il possible d'augmenter la taille de la police, sans augmenter le diamètre du cercle ? Et comment augmenter la grosseur du trait du cercle (là où apparaît la couleur) ?
Pour la taille de la police regarde dans le fichier css classe c100 font-size (ligne 228), pour option big ligne 253 et small ligne 257

Pour la taille du trait 2 éléments à modifier :
1) ligne 287 classe .c100:after, il faut jouer sur les paramètres "top", "left", "width" et "height"

Code : Tout sélectionner

.c100:after {
  top: 0.08em;
  left: 0.08em;
  width: 0.84em;
  height: 0.84em;
2) ligne 106 classe .c100.p100 .fill, il faut copier les valeurs dans les paramètres border (=top), width et height

Code : Tout sélectionner

.c100.p100 .fill {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
exemple pour doubler la taille :
ligne 287

Code : Tout sélectionner

.c100:after {
  top: 0.14em;
  left: 0.14em;
  width: 0.72em;
  height: 0.72em;
ligne 106

Code : Tout sélectionner

.c100.p100 .fill {
  position: absolute;
  border: 0.14em solid #307bbb;
  width: 0.72em;
  height: 0.72em;
Si vous voulez aussi adapter la taille du cercle sur l'effet de zoom, il faut ajuster les valeurs ligne 1129

Code : Tout sélectionner

.c100:hover:after {
  top: 0.04em;
  left: 0.04em;
  width: 0.92em;
  height: 0.92em;
}
pareil exemple pour doubler :

Code : Tout sélectionner

.c100:hover:after {
  top: 0.8em;
  left: 0.8em;
  width: 0.84em;
  height: 0.84em;
}
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 13 nov. 2018, 13:29

Pour ceux pour qui l'effet de zoom sur le texte est trop prononcé et fait dépasser le texte du cercle
Modifier les lignes (1122)

Code : Tout sélectionner

.c100:hover > span {
  width: 3.33em;
  line-height: 3.33em;
  font-size: 0.3em;
  color: #307bbb;
}
par

Code : Tout sélectionner

.c100:hover > span {
  width: 3.66em;
  line-height: 3.66em;
  font-size: 0.28em;
  color: #307bbb;
}
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

weado
Timide
Messages : 206
Inscription : 15 janv. 2017, 22:19

Re: Widget cercle température

Message par weado » 13 nov. 2018, 13:59

Wahou !!! Merci pour ces retours ! Je test et reviens vers vous !

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

Re: Widget cercle température

Message par Sartog » 13 nov. 2018, 14:44

cadavor a écrit :
13 nov. 2018, 12:58
Ca pourrait être interessant que tu mettes à jour ton widget sur le market pour que tous les monde profitent des corrections...
Oui, c'est ce que je me disais également.

Apparemment, le dernier code MAJ et fonctionnel est le tien partagé hier viewtopic.php?f=29&t=32270&start=20#p665150.
Il me faut juste regarder (et comprendre) les MAJ (notamment pourquoi le include du css est passé dans le code javascript) et je mets à jours mon code (enfin je regarde comment faire, il me semble que la MAJ des widget n'est pas aussi simple que celle des plugins).
Dernière édition par Sartog le 28 nov. 2018, 10:53, édité 1 fois.
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

weado
Timide
Messages : 206
Inscription : 15 janv. 2017, 22:19

Re: Widget cercle température

Message par weado » 13 nov. 2018, 16:53

cadavor a écrit :
13 nov. 2018, 13:27
Pour la taille de la police regarde dans le fichier css classe c100 font-size (ligne 228), pour option big ligne 253 et small ligne 257
Je me permet de rebondir la dessus, car j'avais déjà essayé de changer la taille de la police, le soucis, c'est que le cercle s'agrandi tout autant.

Je viens de faire quelques tests sur jsfiddle et c'est plus que concluant pour le coup. Merci bien !

weado
Timide
Messages : 206
Inscription : 15 janv. 2017, 22:19

Re: Widget cercle température

Message par weado » 15 nov. 2018, 14:38

Hello,

Alors je me suis lancé dans la configuration un peu plus poussé du widget, mais c'est pas aussi simple que je le pensais. Concernant les effets sur le cercle, j'ai à peux prés compris, mais je n'ai fait qu'appliqué les modifications de Cadavor.
Ensuite, j'ai voulu modifier le script pour rajouter des couleurs, mais là... il y a des mystères, mais peut être que les rajouts ne sont pas bon. L'idée était de rajouter des couleurs dans le cadre d'une sonde extérieure (violet pour temp<5°C et rouge pour > 30°C), mais en gardant les couleurs de base.
Ce qu'il se passe, c'est que le première valeur apparait correctement ( en violet par exemple quand j'indique 4°C), mais dès que je change, je passe à du vert quand il fait 31°C (au lieu du rouge) et je reviens à du violet quand j'indique 27°C (au lieu d'orange).
Sachant que j'ai modifié mon CSS (copier/coller du code du juste en dessus). Voici mon script :

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget circle#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div class="cmdName" style="font-weight: bold;font-size: 12px;#hideCmdName#">#name_display#</div>
    <div class="iconCmd#id# c100" style="font-family: 'Montserrat'; font-weight: bold; margin:0; float:none;">
      <span id="circlevalue#id#">#state# #unite#</span>
      <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
      </div>
    </div>
    <div class="history#id# col-xs-12 center-block" style="font-size: 10px;#displayHistory#">
      <span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
      <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
      <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
    </div>
  </center>

  <script>
    jeedom.cmd.update['#id#'] = function(_options) {
      var param_temp_froid = (is_numeric('#param_temp_froid#')) ? parseFloat('#param_temp_froid#') : '15.0';
      var param_temp_froid_plus = (is_numeric('#param_temp_froidplus#')) ? parseFloat('#param_temp_froid_plus#') : '5.0';
      var param_temp_chaud = (is_numeric('#param_temp_chaud#')) ? parseFloat('#param_temp_chaud#') : '25.0';
      var param_temp_chaud_plus = (is_numeric('#param_temp_chaudplus#')) ? parseFloat('#param_temp_chaud_plus#') : '30.0';
      var param_temp_mini = (is_numeric('#param_temp_mini#')) ? parseFloat('#param_temp_mini#') : '-10.0';
      var param_temp_maxi = (is_numeric('#param_temp_maxi#')) ? parseFloat('#param_temp_maxi#') : '40.0';
      var valeur = _options.display_value;
      var pourcent = Math.round((valeur - param_temp_mini) / (param_temp_maxi - param_temp_mini) * 100);
      if (pourcent < 0) pourcent = 0;
      if (pourcent > 100) pourcent = 100;
      
      $('.iconCmd#id#').removeClass (function (index, className) {
       	 return (className.match (/(^|\s)p\d+/g) || []).join(' ');
      });
	  $('.iconCmd#id#').removeClass("purple blue green orange red");
      
      $('#circlevalue#id#').html(valeur + ' #unite#');
      $('.iconCmd#id#').addClass('p'+pourcent);
      if (valeur < param_temp_froid_plus) {
        $('.iconCmd#id#').addClass('purple');
      }
      else if (valeur > param_temp_froid_plus && valeur < param_temp_froid) {
        $('.iconCmd#id#').addClass('blue');
      }
      else if (valeur > param_temp_froid && valeur < param_temp_chaud) {
        $('.iconCmd#id#').addClass('green');
      }
      else if (valeur > param_temp_chaud && valeur < param_temp_chaud_plus) {
        $('.iconCmd#id#').addClass('orange');
      }
      else {
        $('.iconCmd#id#').addClass('red');
      }
      
      $("div.iconCmd#id#").attr('title', _options.collectDate);
    };
    
    $.include(['plugins/widget/core/template/dashboard/cmd.info.numeric.(Design) Temperature/circle.css'], function() {
        var param_theme = ('#param_theme#' == 'dark') ? '#param_theme#' : 'dark';
        var param_taille = ('#param_taille#' == 'small' || '#param_taille#' == 'big') ? '#param_taille#' : 'small';
    	$('.iconCmd#id#').addClass(param_theme);
    	$('.iconCmd#id#').addClass(param_taille);

 	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
    });
  </script>

</div>
Si cela parle un peu... car j'ai tenté plein de chose, mais pas grand chose fonctionne, d'où mon appel aux experts ;-)

Avatar de l’utilisateur
cadavor
Actif
Messages : 1284
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget cercle température

Message par cadavor » 15 nov. 2018, 15:06

weado a écrit :
15 nov. 2018, 14:38
Hello,

Alors je me suis lancé dans la configuration un peu plus poussé du widget, mais c'est pas aussi simple que je le pensais. Concernant les effets sur le cercle, j'ai à peux prés compris, mais je n'ai fait qu'appliqué les modifications de Cadavor.
Ensuite, j'ai voulu modifier le script pour rajouter des couleurs, mais là... il y a des mystères, mais peut être que les rajouts ne sont pas bon. L'idée était de rajouter des couleurs dans le cadre d'une sonde extérieure (violet pour temp<5°C et rouge pour > 30°C), mais en gardant les couleurs de base.
Ce qu'il se passe, c'est que le première valeur apparait correctement ( en violet par exemple quand j'indique 4°C), mais dès que je change, je passe à du vert quand il fait 31°C (au lieu du rouge) et je reviens à du violet quand j'indique 27°C (au lieu d'orange).
Sachant que j'ai modifié mon CSS (copier/coller du code du juste en dessus). Voici mon script :

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget circle#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <div class="cmdName" style="font-weight: bold;font-size: 12px;#hideCmdName#">#name_display#</div>
    <div class="iconCmd#id# c100" style="font-family: 'Montserrat'; font-weight: bold; margin:0; float:none;">
      <span id="circlevalue#id#">#state# #unite#</span>
      <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
      </div>
    </div>
    <div class="history#id# col-xs-12 center-block" style="font-size: 10px;#displayHistory#">
      <span title='Min' class='tooltips'>#minHistoryValue##unite#</span>|
      <span title='Moyenne' class='tooltips'>#averageHistoryValue##unite#</span>|
      <span title='Max' class='tooltips'>#maxHistoryValue##unite# </span><i class="#tendance#"></i>
    </div>
  </center>

  <script>
    jeedom.cmd.update['#id#'] = function(_options) {
      var param_temp_froid = (is_numeric('#param_temp_froid#')) ? parseFloat('#param_temp_froid#') : '15.0';
      var param_temp_froid_plus = (is_numeric('#param_temp_froidplus#')) ? parseFloat('#param_temp_froid_plus#') : '5.0';
      var param_temp_chaud = (is_numeric('#param_temp_chaud#')) ? parseFloat('#param_temp_chaud#') : '25.0';
      var param_temp_chaud_plus = (is_numeric('#param_temp_chaudplus#')) ? parseFloat('#param_temp_chaud_plus#') : '30.0';
      var param_temp_mini = (is_numeric('#param_temp_mini#')) ? parseFloat('#param_temp_mini#') : '-10.0';
      var param_temp_maxi = (is_numeric('#param_temp_maxi#')) ? parseFloat('#param_temp_maxi#') : '40.0';
      var valeur = _options.display_value;
      var pourcent = Math.round((valeur - param_temp_mini) / (param_temp_maxi - param_temp_mini) * 100);
      if (pourcent < 0) pourcent = 0;
      if (pourcent > 100) pourcent = 100;
      
      $('.iconCmd#id#').removeClass (function (index, className) {
       	 return (className.match (/(^|\s)p\d+/g) || []).join(' ');
      });
	  $('.iconCmd#id#').removeClass("purple blue green orange red");
      
      $('#circlevalue#id#').html(valeur + ' #unite#');
      $('.iconCmd#id#').addClass('p'+pourcent);
      if (valeur < param_temp_froid_plus) {
        $('.iconCmd#id#').addClass('purple');
      }
      else if (valeur > param_temp_froid_plus && valeur < param_temp_froid) {
        $('.iconCmd#id#').addClass('blue');
      }
      else if (valeur > param_temp_froid && valeur < param_temp_chaud) {
        $('.iconCmd#id#').addClass('green');
      }
      else if (valeur > param_temp_chaud && valeur < param_temp_chaud_plus) {
        $('.iconCmd#id#').addClass('orange');
      }
      else {
        $('.iconCmd#id#').addClass('red');
      }
      
      $("div.iconCmd#id#").attr('title', _options.collectDate);
    };
    
    $.include(['plugins/widget/core/template/dashboard/cmd.info.numeric.(Design) Temperature/circle.css'], function() {
        var param_theme = ('#param_theme#' == 'dark') ? '#param_theme#' : 'dark';
        var param_taille = ('#param_taille#' == 'small' || '#param_taille#' == 'big') ? '#param_taille#' : 'small';
    	$('.iconCmd#id#').addClass(param_theme);
    	$('.iconCmd#id#').addClass(param_taille);

 	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
    });
  </script>

</div>
Si cela parle un peu... car j'ai tenté plein de chose, mais pas grand chose fonctionne, d'où mon appel aux experts ;-)
Pour moi le plus gros probleme c'est que dans le fichier circle.css les définitions pour purple et red n'existe pas, les as-tu ajouté?
Ensuite il faudrait inspecter le rendu sur le navigateur (clic droit "Inspecter" sur le widget) pour voir les classes qui s'applique ou non...
Et si besoin rajouter des console.log dans le code pour voir les évaluations de la valeur et des seuils.

Deuxièmement, il te faut aussi mettre des égalités strictes dans tes tests car si la valeur est strictement égale à un des seuils tu ne rentres pas dans la condition et le rendu sera "red".

Code : Tout sélectionner

 if (valeur < param_temp_froid_plus) {
        $('.iconCmd#id#').addClass('purple');
      }
      else if (valeur >= param_temp_froid_plus && valeur < param_temp_froid) {
        $('.iconCmd#id#').addClass('blue');
      }
      else if (valeur >= param_temp_froid && valeur < param_temp_chaud) {
        $('.iconCmd#id#').addClass('green');
      }
      else if (valeur >= param_temp_chaud && valeur < param_temp_chaud_plus) {
        $('.iconCmd#id#').addClass('orange');
      }
      else {
        $('.iconCmd#id#').addClass('red');
      }
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

weado
Timide
Messages : 206
Inscription : 15 janv. 2017, 22:19

Re: Widget cercle température

Message par weado » 15 nov. 2018, 15:16

Oui, j'ai bien rajouté les couleurs dans le fichier CSS. Pour la gestion des valeurs strictement égale, pas de soucis, j'y ai bien pensé, mais je suis plus en mode test pour le moment. Je vais tenter de passer par une "inspection" et je reviens vers vous.

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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