Carte pour Thermostat Netatmo

Bonjour,
Je me suis amusé à faire une carte pour mon thermostat Netatmo et j’avais envie qu’elle ressemble à ce que l’on peut voir sur l’espace personnel du site Netatmo.
Je me suis appuyé sur l’intégration Netatmo ainsi que sur la carte « Éléments d’image » qui me semblait la plus adaptée à mon projet.
Je ne suis pas développeur et c’est pour cela que cette carte n’est surement pas la plus optimisée niveau code, mais chacun pourra apporter les modifications nécessaires afin de corriger mes erreurs. :roll_eyes:

Voici donc comment cela se présente :

netatmo

J’ai intégré l’indicateur de chauffe ainsi que celui du mode manuel.
On trouve également le nom du Thermostat et l’indication du niveau de la batterie.
Vous pouvez mettre le nom de votre fournisseur en changeant l’image « Engie » par la votre.
Les boutons « + » et « - » servent à monter ou baisser la température de consigne par pas de 0.5°, mais cette fonction ne donne pas entière satisfaction du fait que le retour d’info du thermostat prend un certain temps.
J’ai créer trois sensors:
1 Niveau de la batterie
2 Temoin Manual Boost
3 Temoin Chauffe

    netatmo_niveau_batterie:
      friendly_name: Niveau Batterie Entrée
      device_class: battery
      unit_of_measurement: '%'
      value_template: "{{ state_attr('climate.netatmo_entree', 'battery_level') }}"
	  
    netatmo_preset_mode:
      friendly_name: Preset mode Entrée
      value_template: "{{ state_attr('climate.netatmo_entree', 'preset_mode') }}"
	  
    netatmo_hvac_action:
      friendly_name: Hvac action Entrée
      value_template: "{{ state_attr('climate.netatmo_entree', 'hvac_action') }}"
 

J’ai également eu besoin de 2 scripts pour les boutons « + » et « - »

alias: netatmo_decrement_consigne
sequence:
  - service: climate.set_temperature
    target:
      device_id: 5e9dcba177a540fd9e89c5cc9e9ecce0
    data:
      temperature: '{{(states.sensor.netatmo_temperature_consigne.state | float - 0.5)}}'
mode: single



alias: netatmo_increment_consigne
sequence:
  - service: climate.set_temperature
    target:
      device_id: 5e9dcba177a540fd9e89c5cc9e9ecce0
    data:
      temperature: '{{(states.sensor.netatmo_temperature_consigne.state | float + 0.5)}}'
mode: single

il ne reste plus que les 6 images à déposer dans le dossier « netatmo » qui sera créer dans le dossier « www ».

Engie.png
Engie3
Netatmo_background_409x762_2.png
Netatmo_background_409x762_2
Netatmo_chauffe.png
Netatmo_chauffe
Netatmo_down.png
Netatmo_down
Netatmo_manual.png
Netatmo_manual
Netatmo_up.png
Netatmo_up

Pour finir voici le code de la carte:

type: picture-elements
image: /local/netatmo/Netatmo_background_409x762_2.png
elements:
  - type: image
    entity: climate.netatmo_entree
    image: /local/netatmo/Engie.png
    title: null
    tap_action:
      action: none
    style:
      top: 10%
      left: 90%
      width: 10%
  - type: image
    entity: climate.netatmo_entree
    title: Up Consigne
    tap_action:
      action: call-service
      service: Script.netatmo_increment_consigne
    hold_action:
      action: more-info
    image: /local/netatmo/Netatmo_up.png
    style:
      top: 52.6%
      left: 76.5%
      width: 6%
  - type: image
    entity: climate.netatmo_entree
    title: Down Consigne
    tap_action:
      action: call-service
      service: Script.netatmo_decrement_consigne
    hold_action:
      action: more-info
    image: /local/netatmo/Netatmo_down.png
    style:
      top: 52.6%
      left: 56.5%
      width: 6%
  - type: image
    entity: sensor.netatmo_preset_mode
    title: Temoin Manual Boost
    tap_action:
      action: none
    image: /local/netatmo/Netatmo_manual.png
    style:
      top: 30%
      left: 39%
      width: 9%
    state_filter:
      boost: brightness(100%) saturate(1)
      Schedule: opacity(0%)
  - type: image
    entity: sensor.netatmo_hvac_action
    title: Temoin Chauffe
    tap_action:
      action: none
    image: /local/netatmo/Netatmo_chauffe.png
    style:
      top: 58%
      left: 25.5%
      width: 7%
    state_filter:
      heating: brightness(100%) saturate(1)
      idle: opacity(0%)
  - type: state-label
    entity: climate.netatmo_entree
    attribute: current_temperature
    style:
      top: 45%
      left: 25.5%
      font-size: 1.8em
      color: black
      font-weight: 600
  - type: state-label
    entity: climate.netatmo_entree
    attribute: temperature
    style:
      top: 25%
      left: 25.5%
      font-size: 1em
      color: white
      font-weight: 600
  - type: state-label
    entity: climate.netatmo_entree
    attribute: friendly_name
    style:
      top: 85%
      left: 25.5%
      font-size: 1.2em
      color: black
      font-weight: 400
  - type: state-label
    entity: sensor.netatmo_niveau_batterie
    tap_action:
      action: none
    style:
      top: 76%
      left: 88%
      font-size: 0.7em
      color: grey
      font-weight: 600
  - type: state-icon
    entity: sensor.netatmo_niveau_batterie
    title: Niveau Batterie
    icon: 'mdi:battery-high'
    tap_action:
      action: more-info
    style:
      top: 83%
      left: 88%
      '--paper-item-icon-color': grey

10 « J'aime »

Bonjour, désolé pour la question de débutant j’aimerais savoir où doit-on créé les 3 sensors merci pour l’aide

Bonjour @ Hydci,
Tu peux par exemple créer tes sensors dans le fichier « configuration.yaml » comme cela,

sensor:
   netatmo_niveau_batterie:
     friendly_name: Niveau Batterie Entrée
     device_class: battery
     unit_of_measurement: '%'
     value_template: "{{ state_attr('climate.netatmo_entree', 'battery_level') }}"
     
   netatmo_preset_mode:
     friendly_name: Preset mode Entrée
     value_template: "{{ state_attr('climate.netatmo_entree', 'preset_mode') }}"
     
   netatmo_hvac_action:
     friendly_name: Hvac action Entrée
     value_template: "{{ state_attr('climate.netatmo_entree', 'hvac_action') }}"

pour plus d’info regarde ici:
https://www.home-assistant.io/integrations/sensor/
https://www.home-assistant.io/integrations/template/