J’ai essayé en réduisant de 50% la background, mais la carte reste à la même dimension
Pour la réduire il faut faire une carte avec pile verticale et horizontale.
Je viens de créer cela rapidement avec les 3 boutons en dehors de la carte.
ce mode oblige à créer un input_number.
Code
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.hacf_0_1
secondary_info: none
state_color: false
- type: conditional
conditions:
- entity: input_number.hacf_0_1
state: '1.0'
card:
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_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: image
entity: sensor.netatmo_preset_mode
title: Mode de fonctionnement
style:
top: 29.9%
left: 39%
width: 11%
state_image:
manual: /local/netatmo/Netatmo_manual.png
Schedule: /local/netatmo/Automatique.png
away: /local/netatmo/Absent.png
Frost Guard: /local/netatmo/Hors Gel.png
tap_action:
action: none
- type: state-label
entity: climate.netatmo_entree
attribute: current_temperature
unit_of_measurement: .
title: Température Actuelle
tap_action:
action: null
style:
top: 48%
left: 25.5%
font-size: 1.6em
color: black
font-weight: 600
- type: state-label
entity: sensor.netatmo_temperature_consigne
title: Température de consigne
tap_action:
action: null
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: 25%
left: 66%
font-size: 1.4em
color: black
font-weight: 400
- type: state-label
entity: sensor.thermostat_entree_battery_percent
title: '% Batterie'
tap_action:
action: none
style:
top: 79%
left: 8.3%
font-size: 0.7em
color: grey
font-weight: 600
- type: state-icon
entity: sensor.thermostat_entree_battery_percent
title: Niveau Batterie
icon: mdi:battery-high
tap_action:
action: more-info
style:
top: 86%
left: 8%
'--paper-item-icon-color': grey
- type: image
entity: climate.netatmo_entree
title: null
tap_action:
action: none
image: /local/netatmo/bouton_fond-300x98.png
style:
top: 83.2%
left: 71%
width: 58%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Absent
tap_action:
action: call-service
service: Script.netatmo_mode_absent
image: /local/netatmo/Absent.png
style:
top: 83%
left: 53%
width: 12%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Hors Gel
tap_action:
action: call-service
service: Script.netatmo_mode_hors_gel
image: /local/netatmo/Hors Gel.png
style:
top: 83.2%
left: 79.5%
width: 14.5%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Automatique
tap_action:
action: call-service
service: Script.netatmo_mode_schedule
image: /local/netatmo/Automatique.png
style:
top: 83.2%
left: 67%
width: 10%
- type: state-label
entity: select.netatmo_domicile
title: Planning
icon: mdi:calendar
style:
top: 85%
left: 27%
'--paper-item-icon-color': rgb(68,68,68)
- type: image
entity: climate.netatmo_entree
title: On / Off
style:
top: 10%
left: 8%
width: 07%
state_image:
'off': /local/netatmo/netatmo-off.png
auto: /local/netatmo/netatmo-on.png
tap_action:
action: call-service
service: Script.netatmo_on_off
- type: conditional
conditions:
- entity: input_number.hacf_0_1
state: '2.0'
card:
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_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: image
entity: sensor.netatmo_preset_mode
title: Mode de fonctionnement
style:
top: 29.9%
left: 39%
width: 11%
state_image:
manual: /local/netatmo/Netatmo_manual.png
Schedule: /local/netatmo/Automatique.png
away: /local/netatmo/Absent.png
Frost Guard: /local/netatmo/Hors Gel.png
tap_action:
action: none
- type: state-label
entity: climate.netatmo_entree
attribute: current_temperature
unit_of_measurement: .
title: Température Actuelle
tap_action:
action: null
style:
top: 48%
left: 25.5%
font-size: 1.6em
color: black
font-weight: 600
- type: state-label
entity: sensor.netatmo_temperature_consigne
title: Température de consigne
tap_action:
action: null
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: 25%
left: 66%
font-size: 1.4em
color: black
font-weight: 400
- type: state-label
entity: sensor.thermostat_entree_battery_percent
title: '% Batterie'
tap_action:
action: none
style:
top: 79%
left: 8.3%
font-size: 0.7em
color: grey
font-weight: 600
- type: state-icon
entity: sensor.thermostat_entree_battery_percent
title: Niveau Batterie
icon: mdi:battery-high
tap_action:
action: more-info
style:
top: 86%
left: 8%
'--paper-item-icon-color': grey
- type: image
entity: climate.netatmo_entree
title: null
tap_action:
action: none
image: /local/netatmo/bouton_fond-300x98.png
style:
top: 83.2%
left: 71%
width: 58%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Absent
tap_action:
action: call-service
service: Script.netatmo_mode_absent
image: /local/netatmo/Absent.png
style:
top: 83%
left: 53%
width: 12%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Hors Gel
tap_action:
action: call-service
service: Script.netatmo_mode_hors_gel
image: /local/netatmo/Hors Gel.png
style:
top: 83.2%
left: 79.5%
width: 14.5%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Automatique
tap_action:
action: call-service
service: Script.netatmo_mode_schedule
image: /local/netatmo/Automatique.png
style:
top: 83.2%
left: 67%
width: 10%
- type: state-label
entity: select.netatmo_domicile
title: Planning
icon: mdi:calendar
style:
top: 85%
left: 27%
'--paper-item-icon-color': rgb(68,68,68)
- type: image
entity: climate.netatmo_entree
title: On / Off
style:
top: 10%
left: 8%
width: 07%
state_image:
'off': /local/netatmo/netatmo-off.png
auto: /local/netatmo/netatmo-on.png
tap_action:
action: call-service
service: Script.netatmo_on_off
- type: state-label
entity: climate.netatmo_entree
prefix: Salon
tap_action:
action: null
style:
top: 10%
left: 60%
font-size: 20px
- type: conditional
conditions:
- entity: input_number.hacf_0_1
state: '3.0'
card:
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_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: image
entity: sensor.netatmo_preset_mode
title: Mode de fonctionnement
style:
top: 29.9%
left: 39%
width: 11%
state_image:
manual: /local/netatmo/Netatmo_manual.png
Schedule: /local/netatmo/Automatique.png
away: /local/netatmo/Absent.png
Frost Guard: /local/netatmo/Hors Gel.png
tap_action:
action: none
- type: state-label
entity: climate.netatmo_entree
attribute: current_temperature
unit_of_measurement: .
title: Température Actuelle
tap_action:
action: null
style:
top: 48%
left: 25.5%
font-size: 1.6em
color: black
font-weight: 600
- type: state-label
entity: sensor.netatmo_temperature_consigne
title: Température de consigne
tap_action:
action: null
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: 25%
left: 66%
font-size: 1.4em
color: black
font-weight: 400
- type: state-label
entity: sensor.thermostat_entree_battery_percent
title: '% Batterie'
tap_action:
action: none
style:
top: 79%
left: 8.3%
font-size: 0.7em
color: grey
font-weight: 600
- type: state-icon
entity: sensor.thermostat_entree_battery_percent
title: Niveau Batterie
icon: mdi:battery-high
tap_action:
action: more-info
style:
top: 86%
left: 8%
'--paper-item-icon-color': grey
- type: image
entity: climate.netatmo_entree
title: null
tap_action:
action: none
image: /local/netatmo/bouton_fond-300x98.png
style:
top: 83.2%
left: 71%
width: 58%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Absent
tap_action:
action: call-service
service: Script.netatmo_mode_absent
image: /local/netatmo/Absent.png
style:
top: 83%
left: 53%
width: 12%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Hors Gel
tap_action:
action: call-service
service: Script.netatmo_mode_hors_gel
image: /local/netatmo/Hors Gel.png
style:
top: 83.2%
left: 79.5%
width: 14.5%
- type: image
entity: climate.netatmo_entree
title: Passer en Mode Automatique
tap_action:
action: call-service
service: Script.netatmo_mode_schedule
image: /local/netatmo/Automatique.png
style:
top: 83.2%
left: 67%
width: 10%
- type: state-label
entity: select.netatmo_domicile
title: Planning
icon: mdi:calendar
style:
top: 85%
left: 27%
'--paper-item-icon-color': rgb(68,68,68)
- type: image
entity: climate.netatmo_entree
title: On / Off
style:
top: 10%
left: 8%
width: 07%
state_image:
'off': /local/netatmo/netatmo-off.png
auto: /local/netatmo/netatmo-on.png
tap_action:
action: call-service
service: Script.netatmo_on_off
- type: state-label
entity: climate.netatmo_entree
prefix: Chambre
tap_action:
action: null
style:
top: 10%
left: 60%
font-size: 20px
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_number.hacf_0_1
name: V1
use_entity_picture: false
content_info: name
tap_action:
action: call-service
service: input_number.set_value
data:
value: 1
target:
entity_id: input_number.hacf_0_1
icon: mdi:eye-arrow-left-outline
- type: entity
entity: input_number.hacf_0_1
name: V2
content_info: name
use_entity_picture: false
tap_action:
action: call-service
service: input_number.set_value
data:
value: 2
target:
entity_id: input_number.hacf_0_1
icon: mdi:eye-arrow-left-outline
- type: entity
entity: input_number.hacf_0_1
name: V3
content_info: name
use_entity_picture: false
tap_action:
action: call-service
service: input_number.set_value
data:
value: 3
target:
entity_id: input_number.hacf_0_1
icon: mdi:eye-arrow-left-outline
Je n’y avais pas pensé du tout 
Fait très vite !
Il faut ajuster un peu mais voilà qui est mieux tout sur le même écran un template derrière et hop une évolution de plus
merci pour l’idée @telenaze
Bonjour
Je rencontre un problème au niveau de la carte car je n’ai pas les images…
J’ai Home assistant via Portainer. Et j’ai un message d’erreur quand j’essaie de créer un répertoire netatmo dans le répoertoire www (permission denied).
Comment faire ?
Merci
Bonjour,
Je n’ai pas hassio sur portainer, tu a essayé de créer le répertoire avec File editor ?
Bonjour
Je suis sous proxmox avec une VM pour HAOS.
Au moment de mettre le code de la carte, je ne comprends pas comment mettre les images au bon endroit.
En ssh dans mon dossier /config, je n’ai pas de dossier www
Si je le crée avec le dossier netatmo, j’obtiens l’arborescence suivante /config/www/netatmo
Je mets les fichiers images téléchargés individuellement et renommés pour qu’il colle à ce qu’on a dans le code de la carte, (copié collé du nom indiqué dans le mode op)
Par contre, dans le code de la carte, si je reste en /local/netatmo/xxxx , je n’ai toujours pas les images qui s’affichent.
Comment procéder alors pour avoir l’affichage des images ?
Merci pour le boulot
Salut,
tu as bien redémarrer hassio après avoir créer les répertoires www et netatmo ?
Bonjour et merci pour votre travail. 
J’ai suivi les explications et tout semble être en place, cependant les images apparaissent toutes en double sur la carte et la rendent illisible.
Avez vous une piste svp?
Merci d’avance
salut,
Peux tu me mettre le code de ta carte et éventuellement une photo du défaut ?
Merci de ton retour
Le code de la carte:
type: picture-elements
image: /local/netatmo/Netatmo_background_409x762_2.png
elements:
- type: image
entity: climate.salon
image: /local/netatmo/Engie.png
title: null
tap_action:
action: none
style:
top: 10%
left: 90%
width: 10% - type: image
entity: climate.salon
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.salon
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_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: image
entity: sensor.netatmo_preset_mode
title: Mode de fonctionnement
style:
top: 29.9%
left: 39%
width: 11%
state_image:
manual: /local/netatmo/Netatmo_manual.png
Schedule: /local/netatmo/Automatique.png
away: /local/netatmo/Absent.png
Frost Guard: /local/netatmo/Hors Gel.png
tap_action:
action: none - type: state-label
entity: climate.salon
attribute: current_temperature
unit_of_measurement: .
title: Température Actuelle
tap_action:
action: null
style:
top: 48%
left: 25.5%
font-size: 1.6em
color: black
font-weight: 600 - type: state-label
entity: sensor.netatmo_temperature_consigne
title: Température de consigne
tap_action:
action: null
style:
top: 25%
left: 25.5%
font-size: 1em
color: white
font-weight: 600 - type: state-label
entity: climate.salon
attribute: friendly_name
style:
top: 25%
left: 66%
font-size: 1.4em
color: black
font-weight: 400 - type: state-label
entity: sensor.thermostat_battery_percent
title: ‹ % Batterie ›
tap_action:
action: none
style:
top: 79%
left: 8.3%
font-size: 0.7em
color: grey
font-weight: 600 - type: state-icon
entity: sensor.thermostat_battery_percent
title: Niveau Batterie
icon: mdi:battery-high
tap_action:
action: more-info
style:
top: 86%
left: 8%
‹ –paper-item-icon-color ›: grey - type: image
entity: climate.salon
title: null
tap_action:
action: none
image: /local/netatmo/bouton_fond-300x98.png
style:
top: 80.2%
left: 71%
width: 58% - type: image
entity: climate.salon
title: Passer en Mode Absent
tap_action:
action: call-service
service: Script.netatmo_mode_absent
image: /local/netatmo/Absent.png
style:
top: 80%
left: 53%
width: 12% - type: image
entity: climate.salon
title: Passer en Mode Hors Gel
tap_action:
action: call-service
service: Script.netatmo_mode_hors_gel
image: /local/netatmo/Hors Gel.png
style:
top: 80%
left: 79.5%
width: 14.5% - type: image
entity: select.mon_domicile
title: Passer en Mode Automatique
tap_action:
action: call-service
service: Script.netatmo_mode_schedule
image: /local/netatmo/Automatique.png
style:
top: 80%
left: 67%
width: 10% - type: state-label
entity: select.mon_domicile
title: Planning
icon: mdi:calendar
style:
top: 85%
left: 27%
‹ –paper-item-icon-color ›: rgb(68,68,68) - type: image
entity: climate.salon
title: On / Off
style:
top: 10%
left: 8%
width: 07%
state_image:
‹ off ›: /local/netatmo/netatmo-off.png
auto: /local/netatmo/netatmo-on.png
tap_action:
action: call-service
service: Script.netatmo_on_off
La carte:
Désolé, c’est mon premier post, ca ne rend pas vraiment comme ca 
Pour le code de la carte, tu dois utiliser la fonction « Texte formaté » avec l’icone </>, c’est bien plus lisible pour nous.
Sinon pour l’affichage en double, je pensais que tu avait mis deux fois le même sensor, mais ton code à l’air bon. Essaie d’actualiser l’affichage de ton navigateur et peux être de rebooter HA.
Ok, pour les posts futurs, mais là je ne peux plus poster.
J’ai essayé plusieurs reboot de HA, de supprimer les images dans le dossier netatmo créé dans www puis de les remettre mais rien… Toujours ces superpositions d’images
Concernant l’image de background, tu as mis celle-ci
Normalement tu peux modifier ton message pour corriger le code.
oui j’ai bien mis celle ci
Ce qui est surprenant, c’est que meme en supprimant les images du dossier, ma carte conserve cette apparence
je pense que cela vient de ton navigateur
Tu penses donc qu’en vidant le cache ca devrait fonctionner ?
essaie cela ne coute rien.
Tu peux vérifier avec une tablette ou ton portable.
Bien vu, tu as raison, c’est bien le navigateur, ça fonctionne nickel sur la tablette
Merci de ton aide 
Super !
Je viens de m’apercevoir que l’adresse de ton HA était visible sur ta photo.
Modifie ta photo afin quelle ne soit plus visible.