Bonjour à tous,
Je souhaiterais réaliser une carte dans ce style (voir image) via l’addon button-card.
Elle n’est pas facile à prendre en main et je suis vite perdu dans la position des différents éléments lol, l’idée du design vient d’ici
J’ai déjà ajouté les sensors « date » et « jour »
Si quelqu’un peut m’aider je suis preneur 
Merci d’avance !
Salut,
ta tout le code fournie sur le github.
c’est carte que tu veut est faite avec decluttering-card. Voici le template ( header_main ) pour decluttering-card :
decluttering_templates:
header_main:
card:
type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 24px 20px 16px
text-shadow: 0px 0px 20px var(--card-background-color);
buttons:
- layout: name_state
name: '{{ states(''sensor.jour_fr'') }}, {{ states(''sensor.date_fr'') }}'
state: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: left
float: left
width: 140px
button:
pointer-events: none
align-items: left
width: 140px
line-height: 1.6em
state:
font-weight: 700
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: left
float: left
width: 140px
- layout: icon|name_state
name: ⌂ {{ states('sensor.temperature_interieure') }}°C
state: '{{ state_attr(''weather.openweathermap'',''temperature'') }}°C'
image: |
{% set mapper =
{ 'breezy':'cloudy',
'clear-night':'night',
'clear':'day',
'mostly-clear':'day',
'clear-day':'day',
'cloudy':'cloudy',
'fog':'fog',
'hail':'rainy-7',
'haze':'haze',
'lightning':'thunder',
'mostly-cloudy':'cloudy',
'partlycloudy':'cloudy-day-3',
'partly-cloudy-day':'partly-cloudy-day',
'partly-cloudy-night':'partly-cloudy-night',
'rain':'rainy-4',
'scattered-showers':'rainy-3',
'showers':'rainy-6',
'sleet':'sleet',
'snow':'snowy-6',
'mostly-sunny':'day',
'sunny':'day',
'thunderstorm':'thunder',
'tornado':'tornado',
'wind':'wind',
'windy':'wind'} %}
{% set state = states('weather.maison_2') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/icons/weather_icons/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: right
width: 140px
button:
pointer-events: none
align-items: right
width: 140px
line-height: 1.6em
state:
font-weight: 600
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: right
width: 140px
icon:
position: absolute
left: 2px
transform: scale(0.17)
transform-origin: 0 19.5%
top: '-48px;'
padding: 0;
height: 380px !important;
width: 380px !important;
La carte pour afficher dans le dashboard:
type: custom:decluttering-card
template: header_main
il te faut installer ces deux carte par HACS.
Pour les sensors date et jours, le template est l’ancien format, faudrait passer un nouveau:
configuration.yaml:
sensor:
- platform: time_date
display_options:
- "time"
- "date"
- "date_time"
- "date_time_utc"
- "date_time_iso"
- "time_date"
- "time_utc"
- "beat"
- platform: template
sensors:
jour_fr:
value_template: "{{ ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'][now().weekday()] }}"
date_fr:
value_template: "{% set months = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'] %} {{ now().day | string + ' ' + months[now().month-1]}}"
Salut,
Merci beaucoup pour ton retour ! Mon but était plutôt d’essayer de la refaire via button-card car je pense que cela est possible, mais je me trompe peut être ! C’est surtout que je n’ai pas besoin quelle soit complètement identique. Par exemple, pas besoin du fond dynamique, ou encore de l’icone météo.
Dans tous les cas je vais prendre les infos que tu viens de me donner pour la créer comme ça, surtout mettre à jour mes sensors, encore un grand merci
À quoi sert exactement la carte « declutter » ?
Tout est possible 
Ca sert a faire des templates de cartes et permet de diminuer les lignes de codes.
Un exemple, tu fait une carte et si tu l’utilise plus fois. Au lieu de remettre tout le code de la carte, tu fait un template avec declutter et utilisera c’est carte avec quelques ligne de code.
une carte vite fait avec button-card:
type: custom:button-card
aspect_ratio: 5/1
custom_fields:
date:
card:
type: custom:button-card
entity: sensor.time_date
show_icon: false
show_state: true
show_name: false
tap_action:
action: none
hold_action:
action: none
weather:
card:
type: custom:button-card
entity: weather.pas_de_la_case
layout: icon_state
icon: mdi:home
show_state: true
show_icon: true
show_name: false
size: 40%
state_display: >
[[[ return states['weather.pas_de_la_case'].attributes.temperature + '
°C' ]]]
styles:
state:
- font-size: 1em
icon:
- left: 15px
tap_action:
action: none
hold_action:
action: none
weather2:
card:
type: custom:button-card
entity: weather.pas_de_la_case
show_state: true
show_icon: false
show_name: false
state_display: >
[[[ return states['weather.pas_de_la_case'].attributes.temperature + '
°C' ]]]
styles:
state:
- font-size: 1.6em
- font-weight: bold
card:
- background-color: rgba(255,255,255,0.0)
- border: none
tap_action:
action: none
hold_action:
action: none
styles:
custom_fields:
date:
- position: absolute
- left: 10%
- top: 30%
weather:
- position: absolute
- left: 60%
- top: 15%
weather2:
- position: absolute
- left: 75%
- top: 50%
Woaw je vais tester ça dès ce soir, merci BEAUCOUP !
Je viens d’essayer de modifier le code pour intégrer un sensor qui capte la température d’une pièce de la maison mais j’ai cette erreur : « undefined »
Voilà le code :
type: custom:button-card
aspect_ratio: 5/1
custom_fields:
date:
card:
type: custom:button-card
entity: sensor.date_time
show_icon: false
show_state: true
show_name: false
tap_action:
action: none
hold_action:
action: none
weather:
card:
type: custom:button-card
entity: sensor.xiaomi_salle_a_manger_temperature
layout: icon_state
icon: mdi:home
show_state: true
show_icon: true
show_name: false
size: 40%
state_display: >
[[[ return
states['sensor.xiaomi_salle_a_manger_temperature'].attributes.temperature
+ ' °C' ]]]
styles:
state:
- font-size: 1em
icon:
- left: 15px
tap_action:
action: none
hold_action:
action: none
weather2:
card:
type: custom:button-card
entity: weather.niderhoff
show_state: true
show_icon: false
show_name: false
state_display: >
[[[ return states['weather.niderhoff'].attributes.temperature + ' °C'
]]]
styles:
state:
- font-size: 1.6em
- font-weight: bold
card:
- background: none
- border: none
tap_action:
action: none
hold_action:
action: none
styles:
card:
- background: none
- border: none
custom_fields:
date:
- position: absolute
- left: 10%
- top: 30%
weather:
- position: absolute
- left: 60%
- top: 15%
weather2:
- position: absolute
- left: 75%
- top: 50%
Faut enlever ce code, qui remplace le state par défaut par un state d’un attribut temperature.
comme tu utilise une entité qui a déja la température en state, pas besoin de ce bout de code.
state_display: >
[[[ return
states['sensor.xiaomi_salle_a_manger_temperature'].attributes.temperature
+ ' °C' ]]]
modifier:
type: custom:button-card
aspect_ratio: 5/1
custom_fields:
date:
card:
type: custom:button-card
entity: sensor.date_time
show_icon: false
show_state: true
show_name: false
tap_action:
action: none
hold_action:
action: none
weather:
card:
type: custom:button-card
entity: sensor.xiaomi_salle_a_manger_temperature
layout: icon_state
icon: mdi:home
show_state: true
show_icon: true
show_name: false
size: 40%
styles:
card:
- background: none
- border: none
state:
- font-size: 1em
icon:
- left: 15px
tap_action:
action: none
hold_action:
action: none
weather2:
card:
type: custom:button-card
entity: weather.niderhoff
show_state: true
show_icon: false
show_name: false
state_display: >
[[[ return states['weather.niderhoff'].attributes.temperature + ' °C'
]]]
styles:
state:
- font-size: 1.6em
- font-weight: bold
card:
- background: none
- border: none
tap_action:
action: none
hold_action:
action: none
styles:
card:
- background: none
- border: none
custom_fields:
date:
- position: absolute
- left: 10%
- top: 30%
weather:
- position: absolute
- left: 60%
- top: 15%
weather2:
- position: absolute
- left: 75%
- top: 50%
Merci !! Je vais peaufiner pour avoir un truc qui me correspond mais grâce à toi j’ai une base propre.