Création CARD consommation tempo / production solaire

[Alain_L]

Bonsoir,

je désirais mettre dans une card l’ensemble des informations concernant l’EDF tempo

• la couleur du jour
• la couleur du lendemain

Avec des calculs dans Node Red pour les consommations quotidiennes / hebdomadaires / mensuelles / annuelles sur ces trois couleurs en HP-HC, j’ai aussi fait les calculs des consommations en € pour ces mêmes valeurs.

Donc :

• 2 entrées nombres pour Compteur Bleu HC / HP
• 2 entrées nombres pour Compteur Blanc HC / HP
• 2 entrées nombres pour Compteur Rouge HC / HP
• 2 entrées nombres pour Prix conso Bleu HC / HP
• 2 entrées nombres pour Prix conso Blanc HC / HP
• 2 entrées nombres pour Prix conso Rouge HC / HP
• Les 6 tarifs Bleu / Blanc / Rouge HC-HP
• Des entrées nombres valeurs compteurs à 6h00 et 22h00 début de l’HC et HP

Création de l’image de fond

Utilisation de la card picture-elements

type: picture-elements
image: /local/background/linky.png
elements:
  - type: custom:hui-element
    card_type: markdown
    content: |
      JOUR
    style:
      top: 20%
      left: 23.5%
      transform: translate(-50%, -50%)
      font-size: 12px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #000 !important;
          font-weight: bold
        }
  - type: state-label
    entity: input_number.facture_edf_quotidienne
    style:
      top: 23%
      left: 24%
      color: "#000"
      font-size: 12px
      font-weight: bold
  - type: custom:hui-element
    card_type: markdown
    content: |
      HEBDO
    style:
      top: 30%
      left: 23.5%
      transform: translate(-50%, -50%)
      font-size: 12px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #000 !important;
          font-weight: bold
        }
  - type: state-label
    entity: input_number.facture_edf_hebdomadaire
    style:
      top: 33%
      left: 24%
      color: "#000"
      font-size: 12px
      font-weight: bold
  - type: custom:hui-element
    card_type: markdown
    content: |
      MOIS
    style:
      top: 39%
      left: 23.5%
      transform: translate(-50%, -50%)
      font-size: 12px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #000 !important;
          font-weight: bold
        }
  - type: state-label
    entity: input_number.facture_edf_mensuelle
    style:
      top: 42%
      left: 24%
      color: "#000"
      font-size: 12px
      font-weight: bold
  - type: custom:hui-element
    card_type: markdown
    content: |
      Aujourd'hui
    style:
      top: 7%
      left: 33%
      transform: translate(-50%, -50%)
      color: white
      font-size: 16px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: black !important;
        }
  - type: custom:hui-element
    card_type: markdown
    content: |
      Demain
    style:
      top: 12%
      left: 30%
      transform: translate(-50%, -50%)
      color: white
      font-size: 16px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: black !important;
        }
  - type: custom:hui-element
    card_type: markdown
    content: |
      AN
    style:
      top: 20%
      left: 76%
      transform: translate(-50%, -50%)
      font-size: 12px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #000 !important;
          font-weight: bold
        }
  - type: state-label
    entity: input_number.facture_edf_annuelle
    style:
      top: 24%
      left: 76%
      color: "#000"
      font-size: 12px
      font-weight: bold
  - type: custom:hui-element
    card_type: markdown
    content: |
      Bleu HC
    style:
      top: 55%
      left: 40%
      transform: translate(-50%, -50%)
      color: blue
      font-size: 16px
      text-align: center
      font-weight: bold
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #0051ba !important;
        }
  - type: custom:hui-element
    card_type: markdown
    content: |
      Rouge HP
    style:
      top: 55%
      left: 60%
      transform: translate(-50%, -50%)
      color: blue
      font-size: 16px
      font-weight: bold
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #bd0000 !important;
        }
  - type: icon
    icon: mdi:home-lightning-bolt-outline
    entity: none
    state_color: false
    style:
      top: 19.0%
      left: 49.4%
      color: black
  - type: icon
    icon: mdi:solar-power-variant-outline
    entity: none
    state_color: false
    style:
      top: 29.0%
      left: 49.4%
      color: green
  - type: state-label
    entity: input_number.conso_quoptidienne
    style:
      top: 24%
      left: 50%
      color: black
      font-size: 20px
  - type: state-label
    entity: sensor.production_quotidienne_kwh
    style:
      top: 34%
      left: 50%
      color: green
      font-size: 16px
  - type: state-label
    entity: sensor.rte_tempo_couleur_actuelle_visuel
    style:
      top: 7%
      left: 21%
      color: black
      font-size: 12px
  - type: state-label
    entity: sensor.rte_tempo_prochaine_couleur_visuel
    style:
      top: 12%
      left: 21%
      color: black
      font-size: 12px
  - type: state-label
    entity: sensor.bleu_hc_quotidien
    style:
      top: 71.5%
      left: 30%
      color: "#0051ba"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: sensor.bleu_hp_quotidien
    style:
      top: 75%
      left: 30%
      color: "#bd0000"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: input_number.facture_bleu_hc_quotidienne
    style:
      top: 81%
      left: 30%
      color: "#0051ba"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: input_number.facture_bleu_hp_quotidienne
    style:
      top: 84.5%
      left: 30%
      color: "#bd0000"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: sensor.blanc_hc_quotidien
    style:
      top: 71.5%
      left: 50%
      color: "#0051ba"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: sensor.blanc_hp_quotidien
    style:
      top: 75%
      left: 50%
      color: "#bd0000"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: input_number.facture_blanc_hc_quotidienne
    style:
      top: 81%
      left: 50%
      color: "#0051ba"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: input_number.facture_blanc_hp_quotidienne
    style:
      top: 84.5%
      left: 50%
      color: "#bd0000"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: sensor.rouge_hc_quotidien
    style:
      top: 71.5%
      left: 72%
      color: "#0051ba"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: sensor.rouge_hp_quotidien
    style:
      top: 75%
      left: 72%
      color: "#bd0000"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: input_number.facture_rouge_hc_quotidienne
    style:
      top: 81%
      left: 72%
      color: "#0051ba"
      font-size: 16px
      font-weight: bold
  - type: state-label
    entity: input_number.facture_rouge_hp_quotidienne
    style:
      top: 84.5%
      left: 72%
      color: "#bd0000"
      font-size: 16px
      font-weight: bold

J’aimerais pouvoir mettre un anneau en svg afin de simuler une jauge, mais je suis bloqué.

[Alain_L]

De même, j’ai procédé, ce matin, au regroupement des mes identités nombres, afin d’avoir un visualisation rapide de consommations électriques historiques

Ce qui me permet, sur deux cards, d’avoir une multitudes d’informations, avec les popup pour les graphiques.

Je vais maintenant, m’attaquer au GAZPAR et quand j’aurai installer mes débit mètre d’eau chaude/froide, je ferai de même.

Si quelqu’un est intéressé pour cette seconde card !?

[Ludoc]

Salut, très belle carte, je vais te l’a prendre, merci.

Je serais intéressé par les noeuds que tu as fais sous NR.
Et bien sur gazpar, si c’est aussi beau

[Alain_L]

Merci c’est gentil
De quelle card tu parles pour les nœuds ?

[Ludoc]

@Alain_L

Avec des calculs dans Node Red pour les consommations quotidiennes / hebdomadaires / mensuelles / annuelles sur ces trois couleurs en HP-HC

Hello, ceux-ci, merci.

[roumano]

Je veux bien aussi la 2eme carte

[Alain_L]

Voila la carte pour le Gaz

• consommations en m³ quotidienne - hebdo - mensuelle - annuelle
• consommations en € quotidienne - hebdo - mensuelle - annuelle
• rappel du tempo du jour et du lendemain

type: picture-elements
image: /local/background/gazpar.jpg
elements:
  - type: custom:hui-element
    card_type: markdown
    content: |
      CONSO
    style:
      top: 23%
      left: 15%
      transform: translate(-50%, -50%)
      font-size: 16px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #003d3d !important;
          font-weight: bold;
        }
  - type: custom:hui-element
    card_type: markdown
    content: |
      (en m³)
    style:
      top: 28%
      left: 15%
      transform: translate(-50%, -50%)
      font-size: 12px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #001f3d !important;
          font-weight: bold;
        }
  - type: custom:hui-element
    card_type: markdown
    content: |
      PRIX
    style:
      top: 18%
      left: 91%
      transform: translate(-50%, -50%)
      font-size: 16px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #5b0000 !important;
          font-weight: bold;
        }
  - type: custom:hui-element
    card_type: markdown
    content: |
      TEMPO
    style:
      top: 64%
      left: 51%
      transform: translate(-50%, -50%)
      font-size: 16px
      text-align: center
    card_mod:
      style: |
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          color: #5b0000 !important;
          font-weight: bold;
        }
  - type: custom:hui-image-element
    image: /local/background/aiguille-30.png
    style:
      top: 32%
      left: 54%
      transform-origin: center
  - type: icon
    icon: mdi:weather-sunny
    style:
      top: 37%
      left: 8%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:weather-sunny
    style:
      top: 30%
      left: 85%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:calendar-week
    style:
      top: 47%
      left: 8%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:calendar-week
    style:
      top: 40%
      left: 85%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:calendar-month
    style:
      top: 57%
      left: 8%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:calendar-month
    style:
      top: 50%
      left: 85%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:calendar
    style:
      top: 67%
      left: 8%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: icon
    icon: mdi:calendar
    style:
      top: 60%
      left: 85%
      transform: translate(-50%, -50%)
      color: "#777"
      font-size: 16px
  - type: state-label
    entity: input_number.consommation_gaz_en_m3_quotidien
    style:
      top: 37%
      left: 18%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.prix_gaz_quotidien
    style:
      top: 30%
      left: 93%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.consommation_gaz_en_m3_hebdomadaire
    style:
      top: 47%
      left: 18%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.prix_gaz_hebdomadaire
    style:
      top: 40%
      left: 93%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.consommation_gaz_en_m3_mensuel
    style:
      top: 57%
      left: 18%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.prix_gaz_mensuel
    style:
      top: 50%
      left: 93%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.consommation_gaz_en_m3_annuel
    style:
      top: 67%
      left: 18%
      color: "#000"
      font-size: 12px
  - type: state-label
    entity: input_number.prix_gaz_annuel
    style:
      top: 60%
      left: 93%
      color: "#000"
      font-size: 12px
  - type: icon
    icon: mdi:weather-sunny
    style:
      top: 75.5%
      left: 44.5%
      transform: translate(-50%, -50%)
      color: black
      font-size: 16px
  - type: state-label
    entity: sensor.rte_tempo_couleur_actuelle_visuel
    style:
      top: 76%
      left: 51.5%
      color: "#000"
      font-size: 18px
  - type: icon
    icon: mdi:calendar-arrow-right
    style:
      top: 76%
      left: 58.5%
      transform: translate(-50%, -50%)
      color: black
      font-size: 16px
  - type: state-label
    entity: sensor.rte_tempo_prochaine_couleur_visuel
    style:
      top: 76%
      left: 65.2%
      color: "#000"
      font-size: 18px

J’ai un problème sur l’aiguille image: /local/background/aiguille-30.png Impossible de lui faire un rotate
Si je lui mets

 style:
      transform: >-
        rotate({{ states('sensor.rotation_value') }}deg)  # Rotation dynamique

cela ne fonctionne pas (j’ai essayé plein d’autres codes), et bizarrement

 style:
      transform: rotate(77.0deg)  # Rotation fixe

fonctionne.

Quelqu’un pourrait-il m’aider ?

FICHIER SOURCE

[Ludoc]

Hello,

faudrait pas transformer la valeur de l’entité en float ?

 style:
      transform: >-
        rotate({{ states('sensor.rotation_value') | float(0) }}deg)  # Rotation dynamique

[Alain_L]

Cela ne fonctionne pas et je ne comprends pas

Je commence à faire comme prévu la card de production solaire
C’est en cours de codage

[Ludoc]

Hello,

Joli, tu crées avec quel soft les cartes de fond ?
Sinon aurais tu tes noeuds nodered pur les différentes cartes, s’il te plait ?
Merci.

[Ludoc]

Je comprends pas non plus ce problème d’aiguille

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.rotation_aiguille
  - type: picture-elements
    style: |
      ha-card {
        {% set ANGLE = (states('input_number.rotation_aiguille') | round(0)| string ) + 'deg' %}
        --my-transform-style: rotate({{ANGLE}});
      }
    elements:
      - type: image
        image: /local/images/aiguille.png
        style:
          top: 25%
          color: orange
          left: 35%
          transform: var(--my-transform-style)
    image: /local/images/background.png

et quand je teste dans le modèle, ça donne une valeur correcte

{% set ANGLE = (states('input_number.rotation_aiguille') | round(0)| string ) + 'deg' %}
{{ANGLE}}

Résultat :
38deg

[Alain_L]

La base par ChatGPT Pro puis ensuite travail avec photoshop

[Alain_L]

Oui je n’y arrive pas non plus
Une valeur directe cela fonctionne, mais dès que je passe par l’entité, cela coince.
J’ai beau créer des sensors spécifiques, rien y fait.

[Alain_L]

Voici le flow de l’onglet consommation.
C’est l’usine à Gaz, euh, électrique.

182.9 KB file on MEGA

[Ludoc]

Merci pour le boulot

J’avais essayé en suivant ce post => Styling elements in Picture elements card: a small tutorial - #3 by Ildar_Gabdullin - Dashboards & Frontend - Home Assistant Community, mais ça ne doit plus fonctionner.

[Alain_L]

J’ai essayé sur cette carte autre chose

- type: image
    entity: weather.barlin
    style:
      top: 83.5%
      left: 38.5%
      transform: translate(-50%, -50%)
      width: 20px
    state_image:
      fog: /local/meteo/brouillard.png
      cloudy: /local/meteo/nuage.png
      clear-night: /local/meteo/lune.png
      hail: /local/meteo/grele.png
      lightning: /local/meteo/orage.png
      lightning-rainy: /local/meteo/orage-pluie.png
      partlycloudy: /local/meteo/partiellement-nuageux.png.png
      pouring: /local/meteo/pluie.png
      rainy: /local/meteo/pluiveux.png
      snowy: /local/meteo/bonhomme-de-neige.png
      snowy-rainy: /local/meteo/neige-fondue.png
      sunny: /local/meteo/ensoleille.png
      windy: /local/meteo/venteux.png
      windy-variant: /local/meteo/venteux.png

Cela permet, en fonction du state de l’entité de mettre une image différente.
Je pense que je vais faire un paquets d’images sur

Pour faire varier l’aiguille, avec en dessous la graduation qui sera sur un fond différent et coder cela dans le state_image

[Ludoc]

Bon, finalement ça fonctionne.
En fait le picture-element ne supporte pas le templating, donc il faut passer par card-mod.
Tu y étais presque

J’ai aucun mérite, la réponse m’a été donnée sur le forum anglais.
(https://community.home-assistant.io/t/styling-elements-in-picture-elements-card-a-small-tutorial/315252/243)

type: picture-elements
card_mod:
  style: |
    ha-card {
      {% set ANGLE = (states('input_number.rotation_aiguille') | round(0)| string ) + 'deg' %}
      --my-transform-style: translate(-50%,-50%) scale(2,2) rotate({{ANGLE}});
    }
image: /local/images/background.png
elements:
  - type: image
    entity: input_number.rotation_aiguille
    image: /local/images/aiguille.png
    style:
      top: 50%
      left: 50%
      transform: var(--my-transform-style)