Création d'un widget tarification

[benj29]

Hello,

Je cherche à faire un widget pour suivre à la maison (pour madame notamment) la tarification et la suivante à venir.

• soit une jauge façon TE (peut être plus lisible au niveau des couleurs : bleu/SHC, rouge/HP, blanc/HC)
  

  
  
  
  

• soit à défaut un « texte » avec « jusqu’à » et le « prochain » dans « … ».

• dans un premier temps, je vais détourner la LED que j’avais simplifiée pour avoir un code couleur :
  blanc/rouge/bleu pour la tarification
  clignotement si délestage (surconso)
  

Des motivés pour m’accompagner et me guider ?

Merci !

[Vicnet]

Avec Chat-gpt ?

[Vicnet]

Voici sa réponse pour une barre 3 couleurs.
Je ne sais pas si c’est fonctionnel mais il a en gros compris le besoin et ca donne une idée du widget, non ?

<!-- BEGIN_WIDGET_BARRE_TRICOLORE -->
<style>
.barre {
  width: 100%;
  height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #ddd;
  position: relative;
}
.barre-remplissage {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}
.barre-rouge {
  background-color: #FF0000;
}
.barre-jaune {
  background-color: #FFFF00;
}
.barre-vert {
  background-color: #00FF00;
}
</style>

<div class="barre">
  <div class="barre-remplissage barre-rouge" style="width: {{max(0, min(33, (#value#-#minValue#)*100/abs(#maxValue#-#minValue#))))}}%;"></div>
  <div class="barre-remplissage barre-jaune" style="width: {{max(0, min(33, (#value#-#minValue#)*100/abs(#maxValue#-#minValue#)) - 33)}}%; left: {{max(0, min(33, (#value#-#minValue#)*100/abs(#maxValue#-#minValue#)) - 33)}}%;"></div>
  <div class="barre-remplissage barre-vert" style="width: {{max(0, min(33, (#value#-#minValue#)*100/abs(#maxValue#-#minValue#)) - 66)}}%; left: {{max(0, min(33, (#value#-#minValue#)*100/abs(#maxValue#-#minValue#)) - 66)}}%;"></div>
</div>
<!-- END_WIDGET_BARRE_TRICOLORE -->

[benj29]

Déjà, merci pour ton aide.

Je n’ai peut être pas été clair, mais l’idée est d’avoir une info qui pilote la valeur d’un curseur par exemple ?

J’ai déjà un virtuel, avec une info de type autre qui vaut : SHC, HC ou HP.
Après en fonction de l’heure, je peux calculer par pas de 5 min le delta et rajoute une info en texte.

Mais là du coup, ton widget me semble être un widget sans valeur, non ?
Je l’ai créé et je n’arrive pas à l’affecter.

[Phpvarious]

Hello, SHC, HC ou HP sont des périodes horaire fixe, donc pas besoin de commande spécifique.

Regarde ce widget, si c’est ce que tu recherche.

https://phpvarious.github.io/documentation/widget/fr_FR/widget_scenario/energie_tarification/

[benj29]

C’est juste parfait ! Merci.

[benj29]

Super boulot !

Te serait-il possible d’ajouter un paramètre pour avoir une échelle des X (heures) non constante. Cela écrase les heures, et du coup, c’est illisible dans certains cas ?

J’ai modifié le code pour bouger le texte et le condenser (taille et HC/HP/SHC). Mais je n’arrive pas à optimiser pour la taille que j’ai de dispo

[Phpvarious]

@benj29

Te serait-il possible d’ajouter un paramètre pour avoir une échelle des X (heures) non constante. Cela écrase les heures, et du coup, c’est illisible dans certains cas ?

Une echelle non proportionnelle affecterai le selecteur qui se retrouverai décalé. Seul solution actuel que je vois est de supprimer le dernier « 7h » lorsque la taille « stepWidth » < xx.

@benj29

J’ai modifié le code pour bouger le texte et le condenser (taille et HC/HP/SHC). Mais je n’arrive pas à optimiser pour la taille que j’ai de dispo

Sans doute jouer sur le css, je regarderai en rentrant ce soir si je peux optimiser cette partie.

[benj29]

Allez, c’est bon ;).

Te prends pas la tête.