Widget round -> aide pour modifier le code du changement de couleur

Bonjour à tous,

Pour visualiser mes thermostats, j’utilise cet ancien widget « round » très lisible :

image

Le changement de couleur était codé pour fonctionner avec le plugin boiler-thermostat (incompatible Jeedom 4.5), et ne détecte pas le changement du binaire « Etat » dans un virtuel :
image

Il faudrait remplacer cette partie du code pour adapter la couleur au statut « Etat » :

  • 0 = widget round fond gris
  • 1 = widget round fond rouge

Extrait du code actuel :

   	let valeur2 = '#couleur#';
  	var test = TypeCouleur(valeur2);
  	//console.log('Test : '+test);
	if(test == 'objet'){
      	var arrayVal = valeur2.split('&'), cleVal;
    	para = new Object();
    	for(var cle in arrayVal){
    		cleVal = arrayVal[cle].split(':');
        	para[cleVal[0]] = cleVal[1];
        	if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
            	couleur2 = para[cleVal[0]];
        	}
    	}
    } else if (test == 'nom'){
        couleur2 = "#couleur#";

    } else {
      	couleur2 = "grey";
    }

J’ai ajouté « Etat » dans les paramètres du widget afin qu’il récupère l’état du thermostat (il suffit de renseigner le bon id, comme le fait @phpvarious dans ses plugins) :

image

Par contre, je suis incapable de modifier le code du widget en PJ :
code_widget_round_color_original.txt (9,5 Ko)

Si un développeur pouvait l’adapter, ce serait top !

Merci d’avance :+1:

Hello,

Pas trop de temps en ce moment, mais tu peux poster les images, du moins 2 ou trois stp, si j’ai un peu de temps je regarderai.

Aucune urgence, c’est déjà très sympa de te proposer :clap:

Je vais migrer mes thermostats pour débloquer l’upgrade vers Jeedom 4.5, j’utiliserai le widget round sans colorisation pour l’instant. Voici les 2 images qui sont appelées par le code :

grey
red

Si besoin d’autres éléments, ne pas hésiter à demander.

Ho ho ho :wink:

Tu peut tester ce widget :
https://phpvarious.github.io/documentation/widget/fr_FR/info/numeric/temperature_state_round/

  • Ce n’ai plus du tout le même code.
  • J’ai supprimé la notion d’images, tout est en css.
  • J’ai pas testé le positionnement du texte car j’ai pas les fichiers de « font »
  • Paramètres optionnels :
    image

Rendu avec ces paramêtres :
image

etat = 0
image

etat = 1
image

Edit 1 :

2 mode de fonctionnement :

  • Le widget change de couleurs en fonction de la température.
    • paramètres optionnels a utiliser : bgColors et fontColors
    • Ex : bgColors → 20=#ffffff&18=#000000&16=blue → a 20°C = couleurs de fond blanc (#ffffff), le séparateur est le caractère &

ou

  • Le widget change de couleurs en fonction d’une commande etat binaire.
    • paramètres optionnels a utiliser : etat, backgroundColorOn et fontColorOn

Edit 2 :

  • ajout paramètre optionnel square qui force le widget en carré au lieu de rond.
    image
2 « J'aime »

Un grand merci Père Noël :hugs: :hugs: :hugs:

C’est nickel, voilà ce que cela donne ici :
image
image

Il y a juste un truc, bien que « afficher les statistiques » soit décoché, elles apparaissent quand même. Je ne sais pas si c’est rapide à fixer :

Encore :clap:

Sur le widget je ne vois pas de statistiques ! Les seules statistiques que j’aperçois ce sont celles de ta commande etat.

Tu as raison, désolé je suis allé trop vite …
Du coup c’est nickel, du premier coup en plus !

Encore merci :+1:

Hello @Phpvarious

Un petit détail de mise en page détecté ce matin.
A gauche le nouveau widget, à droite l’ancien :

image

La hauteur entre le nom de la commande et le badge est un peu élevée.
Sais-tu me dire comment la diminuer pour revenir à l’affichage de droite ?

Ligne 131 , padding: 12px; remplace par la valeur voulu.

C’est bon merci :+1:

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.

Salut @Phpvarious

J’ai détecté un comportement bizarre sur le widget induit par la configuration de l’équipement (à l’occasion, si tu as un moment) :

  • Widget sans rien dans la configuration de l’équipement.
    → RAS, la police respecte la couleur de la consigne (font = white) :
    image

  • Widget avec configuration avancée des cellules.
    → La police ne tient plus compte de la consigne et reste en gris :
    image
    → Anomalie identique sur état à 0 et 1.
    → Aucun souci sur la couleur de fond de la consigne.

  • La configuration du widget round :

  • La configuration de l’équipement :

Le code css que j’utilise est basique, je ne comprends pas ce comportement.
@+

Je mettrai a jour ce post en fin de journée :

Cela évitera de s’éparpiller :wink:

Si un modérateur super sympa passe par ici, et peut ré-ouvrir le thread en question svp, il serait même le meilleur si il bascule ce thread dedans :crazy_face: :kissing_heart:

1 « J'aime »

Je vais pinailler mais le 18.4°C et 17.7°C, je pense que le c est en minuscule et non majuscule.

Antoine

J’ai failli acquiescer, mais après vérification, le C est bien en majuscule.
@+

Les degrés s’abrègent au moyen du symbole « degré », qui est un petit cercle placé en
Lorsqu’il est complété par une lettre (toujours en majuscule), ce symbole est séparé du chiffre par une espace insécable et collé à la lettre ; lorsqu’il n’est pas complété par une lettre, il est collé au chiffre.

Les abréviations des principaux degrés sont :
degré d’angle °
degré Baumé °B
degré Celsius °C
degré Fahrenheit °F

Oui mais celui entouré semble en minuscule contrairement aux autres.
13d94d9f34bd782c5f73d012ea299fa19af0f585

Tu as raison !
Je viens de tester avec le widget par défaut de l’équipement → OK :
image

Visiblement le widget tiers que j’utilise transforme le °C en °c.
Il faudra que je regarde le code.

J’ai mis a jour le widget,

J’ai aussi ajouté un param. margin :wink:


Merci Aurelien :wink:

Je viens de tester cette configuration :

Plus de souci de couleur de police :+1:

Par contre margin ne modifie rien ici (testé avec 1, 2 et 0).
→ cela ne me gêne pas, le positionnement est parfait par défaut :

image

Question pour scale : normal que cela ne réagisse pas avec les décimales comme 1,25,1.50,… ?

Avec cette version, le code correspond parfaitement à mes besoins :clap:

PS : oui merci Aurélien !