Comment faire une gauge qui récupere des informations texte pour EDF Tempo

Bonjour à tous,

j’ai basculé sous EDF Tempo. J’affiche les informations « tempo » en utilisant l’API RTE et je récupere les informations du compteur Linky à l’aide d’un ESP32 et de ESPHome.
Pour une question d’hergonomie, j’aimerai disposer d’une gauge qui affiche les 3 couleurs tempo (Bleu, blanc, rouge) et positionner l’aiguille de la gauge à l’endroit ou se trouve la couleur tempo du jour.
Un peu comme le fait le site Hello Watt. Je trouve cela très clair
image

Ma question est: Comment faire une gauge en récupérant une information en mode texte ? En effet la donnée tempo récupérée par l’API RTE m’indique « Bleu », « blanc », « rouge » et pas une valeur numérique. Sur une gauge classique, ça part en erreur car le sensor ne fournit pas une donnée numérique.

Merci d’avance pour vos réponses. :slight_smile:

Salut,

solution simpliste mais qui a fait ses preuves… en utilisant une picture-elements ou simplment une carte image.
Comme il n’y a que 3 choix, tu peux récupérer les 3 images du site et les afficher en fonction du jour en cours. Pas besoin de faire une vrai gauge…

Dans HA on ne peut pas créer une variable qui prendrait une valeur précise en fonction de la couleur du jour ?

Si biensûr on peut créer un capteur template dont la valeur vaut 0, 1 ou 2.
C’est possible mais bon l’intérêt est limité il n’y a que 3 valeurs possibles.

Au cas où la détermination de la valeur serait quelque chose comme ça:

          {% if (states('sensor.tempo_actif')) == "TEMPO_BLEU"  %}
            0
          {% elif (states('sensor.tempo_actif')) == "TEMPO_BLANC"  %}
            1
          {% else %}
            2
          {% endif %}

Merci pour le retour.
J’ai déja utilisé ce type de paramétrage pour modifier le fond d’un écran et le passer en rouge, blanc ou bleu.
Mais avec un mode gauge, je n’y arrive pas.
Voila ce que j’ai écris pour modifier le fond de l’ecran et qui donne ce résultat.
image

show_name: true
show_icon: false
show_state: true
type: glance
entities:
  - entity: sensor.rte_tempo_couleur_actuelle
    name: Couleur actuelle
    card_mod:
      style: |
        :host .name {
          font-weight: normal;
          font-size: 80%;
           }
        :host {
          color: black;font-weight: bold;
          border-style: solid;
          border-radius: 15px;
          background: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Rouge') %} 
                        red 
                      {% endif %}
                      {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %} 
                        white
                      {% endif %}
                      {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Bleu') %} 
                        DodgerBlue
                      {% endif %}
                      {% if is_state('sensor.rte_tempo_couleur_actuelle', 'NON_DEFINI') %} 
                        lightgrey
                      {% endif %};
           color: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %} 
                   black 
                  {% else %}
                   white 
                  {% endif %};
          }

Pourrais-tu me donner l’exemple avec une gauge ?

Avec une jauge de base de HA c’est pas trop top comme résultat.
Mais ça l’ai fait uniquement avec un carte jauge de base…

image

type: gauge
entity: input_number.tempo_nombre
min: 0
max: 6
needle: true
segments:
  - from: 0
    color: blue
  - from: 2
    color: white
  - from: 4
    color: red

Maintenant ce n’est pas du tout ce que je disais qu’il faut utiliser… si tu veux exactement le même résultat (sans animation) que le site que tu regardes, il suffit de récupérer leur visuel et de sauvegarder 3 images, une de chaque couleur. Et d’utiliser un carte picture entity, qui affichera l’une ou l’autre des images en fonction de la couleur du jour…

merci de ce retour, mais on ne se comprend pas.
Quand j’utilise le type gauge, cela ne fonctionne pas car mon entity n’est pas numérique.
Pour être plus clair, j’ai recopié ton code avec mon entity. Le message est clair.

s’il n’y a pas de solution avec la gauge, alors je vais faire ce que tu préconises (picture entity).

Avant faut créer un sensor template qui traduit la couleur en nombre. Comme je l’avais dit dans mon premier message.

1 « J'aime »

J’ai essayé ton élément de dashboard mais ça ne s’affiche pas comme il devrait :

Et lors de l’édition du code yaml j’ai ceci :


L'éditeur visuel n'est pas pris en charge pour cette configuration:

La clé « entities.0.card_mod » n’est pas attendue ou non prise en charge par l’éditeur visuel.
La valeur fournie pour "entities.0" n'est pas prise en charge par l'éditeur visuel. Nous supportons (string) mais avons reçu ({"entity":"sensor.rte_tempo_couleur_actuelle","name":"Couleur actuelle","card_mod":{"style":":host .name {\n font-weight: normal;\n font-size: 80%;\n }\n:host {\n color: black;font-weight: bold;\n border-style: solid;\n border-radius: 15px;\n background: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Rouge') %} \n red \n {% endif %}\n {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %} \n white\n {% endif %}\n {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Bleu') %} \n DodgerBlue\n {% endif %}\n {% if is_state('sensor.rte_tempo_couleur_actuelle', 'NON_DEFINI') %} \n lightgrey\n {% endif %};\n color: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %} \n black \n {% else %}\n white \n {% endif %};\n }\n"}}).
Vous pouvez toujours modifier votre configuration en YAML.

Qu’est-ce que j’ai raté ?

Il faut rajouter card-mod dans HACS. :slight_smile:

1 « J'aime »

Retour d’experience.
Alors après plusieurs tests, j’ai finalement fait comme AlexHass m’a proposé. A savoir: utiliser « picture-entity » avec 3 images différentes.
J’ai juste un soucis de taille.
J’aimerai pouvoir réduire la taille de la jauge mais je n’y arrive pas.
J’ai essayé avec « style: width:300px;height:300px » mais ça marche pas. Si vous avez une idée ?
Sinon, voici le résultat.

et voici le code

type: picture-entity
entity: sensor.rte_tempo_couleur_actuelle
state_image:
  Bleu: /local/images/tempo-bleu.png
  Blanc: /local/images/tempo-blanc.png
  Rouge: /local/images/tempo-rouge.png
show_name: false
show_state: false

Salut…
Dans la carte gauge d’origine il y a des options pour afficher ce style
image

Ici on a 3 tarifs dans la journée Heure creuse, Heure Pleine, Heure Pointe
J’ai un ESP ( sur le compteur , ici EREDES ) qui me renvoie les infos

  • soit en N°
sensor.eredes_periode

image

  • soit en Texte !
sensor.eredes_tarif

image

Du coup on peut s’en servir sans faire d’autres template !
Mais sinon faire comme @AlexHass t’as indiqué !

Le code de la carte gauge

Modifiable en visuel ou Yaml

type: gauge
entity: sensor.eredes_periode
name: Tarif en cours
needle: true
min: 0.5
max: 3.5
segments:
  - from: 0.5
    color: green
  - from: 1.5
    color: red
  - from: 2.5
    color: orange
card_mod:
  style:
    .: |
      .name {
        font-size: 15px !important;
        font-weight: bold;
        color: red !important;
        position: absolute;
        top: -1%
        }
      ha-card.type-gauge::before {
        content: "{{states('sensor.eredes_tarif')}}";
        background-color: black;
        color: white;
        font-size: 35px;
        font-weight: bold;
        position: absolute;
        top: 65%

      }
    ha-gauge$: |
      text.value-text {
        font-size: 0px !important;
      }

ha-gauge$: |
text.value-text {
font-size: 0px !important;
}

  • :point_up_2:Cette partie permet de masquer la valeur du sensor (1,2 ou3)

Le « background-color: black; » :point_down: c’est si je passe en mode clair !

image

On peut aussi se servir d’un thème !, mais autre histoire !

Bonjour,
Je me servi de vos réflexions pour faire comme ça :

Le code des cartes :

type: gauge
entity: sensor.tempo_couleur
needle: true
max: 6
name: Tempo aujourd'hui
segments:
  - from: 0
    color: blue
    label: Bleu
  - from: 2
    color: white
    label: Blanc
  - from: 4
    color: red
    label: Rouge
type: gauge
entity: sensor.tempo_demain_couleur
needle: true
max: 6
name: Tempo demain
segments:
  - from: 0
    color: blue
    label: Bleu
  - from: 2
    color: white
    label: Blanc
  - from: 4
    color: red
    label: Rouge

Et les templates associés :

###################################################
# Conversion messages Tempo
###################################################
- sensor:
  - name: 'tempo_couleur'
    state: >
      {% if (states('sensor.rte_tempo_couleur_actuelle')) == "Bleu"  %}
            1
      {% elif (states('sensor.rte_tempo_couleur_actuelle')) == "Blanc"  %}
            3
      {% else %}
            5
      {% endif %}
  - name: 'tempo_demain_couleur'
    state: >
      {% if (states('sensor.rte_tempo_prochaine_couleur')) == "Bleu"  %}
            1
      {% elif (states('sensor.rte_tempo_prochaine_couleur')) == "Blanc"  %}
            3
      {% else %}
            5
      {% endif %}

Rien de folichon, mais ça fait le job.
Edit : je verrai à l’avenir s’il faut gérer les cas inconnus, le contrat tempo commence aujourd’hui :wink:

1 « J'aime »

Bonjour,

« Ceci est mon premier message. Merci de votre indulgence si je ne fais pas les choses comme il faut ! »

Si ca peut servir, j’ai mélangé plusieurs idées trouvées par-ci par-là pour afficher tous les éléments Tempo dans une carte minimaliste, mais efficace.

J’étais aussi parti sur des gauges, mais au final ce n’était pas assez visuel.

Je me suis servi du GitHub /rtetempo de Hekmon pour récupérer les infos TIC

image

type: vertical-stack
cards:
  - show_name: true
    show_icon: false
    show_state: true
    type: glance
    entities:
      - entity: sensor.rte_tempo_couleur_actuelle_visuel
        card_mod:
          style: |
            :host .name {
              font-weight: bold;
              font-size: 130%;
               }
            :host {
              color: black;font-weight: bold;
              border-style: solid none;
              border-radius: 20px;
              background: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Rouge') %} 
                            red 
                          {% endif %}
                          {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %} 
                            white
                          {% endif %}
                          {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Bleu') %} 
                            DodgerBlue
                          {% endif %}
                          {% if is_state('sensor.rte_tempo_couleur_actuelle', 'NON_DEFINI') %} 
                            lightgrey
                          {% endif %};
               color: {% if is_state('sensor.rte_tempo_couleur_actuelle', 'Blanc') %} 
                       black 
                      {% else %}
                       white 
                      {% endif %};
              }
      - entity: sensor.rte_tempo_cycle_jours_restants_bleu
        card_mod:
          style: |
            :host .name {
              font-weight: bold;
              font-size: 80%;
              color: black
               }
            :host {
              color: black;font-weight: bold;
              border-style: solid none solid solid;
              border-radius: 0px;
              background: #67B5FE;
               color: blue;
              }
      - entity: sensor.rte_tempo_cycle_jours_restants_blanc
        card_mod:
          style: |
            :host .name {
              font-weight: bold;
              font-size: 80%;
              color: black
               }
            :host {
              color: black;font-weight: bold;
              border-style: solid none;
              border-radius: 0px;
              background: #DCDCDC;
               color: #666;
              }
      - entity: sensor.rte_tempo_cycle_jours_restants_rouge
        card_mod:
          style: |
            :host .name {
              font-weight: bold;
              font-size: 80%;
              color: black;
               }
            :host {
              color: black;font-weight: bold;
              border-style: solid solid solid none;
              border-radius: 0px;
              background: #FAC1C1;
               color: red
              }
      - entity: sensor.rte_tempo_prochaine_couleur_visuel
        card_mod:
          style: |
            :host .name {
              font-weight: bold;
              font-size: 100%;
               }
            :host {
              color: black;font-weight: bold;
              border-style: solid none;
              border-radius: 20px;
              background: {% if is_state('sensor.rte_tempo_prochaine_couleur', 'Rouge') %} 
                            red 
                          {% endif %}
                          {% if is_state('sensor.rte_tempo_prochaine_couleur', 'Blanc') %} 
                            white
                          {% endif %}
                          {% if is_state('sensor.rte_tempo_prochaine_couleur', 'Bleu') %} 
                            DodgerBlue
                          {% endif %}
                          {% if is_state('sensor.rte_tempo_prochaine_couleur', 'NON_DEFINI') %} 
                            lightgrey
                          {% endif %};
               color: {% if is_state('sensor.rte_tempo_prochaine_couleur', 'Blanc') %} 
                       black 
                      {% else %}
                       white 
                      {% endif %};
              }       
    state_color: false
    columns: 5

1 « J'aime »