Bonjour ,
pourrais tu partager ton template « header » ?
Pas de soucis.
button_card_templates:
header:
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
- box-shadow: 0px 0px 0px 2px var(--button-card-light-color)
icon:
- opacity: 1
name:
- margin-left: 2px
- justify-self: start
- font-size: 0.85em
- white-space: normal
state:
- margin-left: 2px
- justify-self: start
- font-weight: bold
- font-size: 0.75em
- white-space: normal
label:
- margin-right: 2px
- justify-self: end
- font-size: 0.65em
- white-space: normal
custom_fields:
circle:
- top: 19%
- left: 60%
- width: 35%
- position: absolute
hold_action:
action: more-info
custom_fields:
circle: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) { const
brightness = Math.round(entity.attributes.brightness / 2.54); const
radius = 20.5; const circumference = radius * 2 * Math.PI; return `<svg
viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color)" stroke-width="1.5" fill="none"
style=" transform:
rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray:
${circumference}; stroke-dashoffset: ${circumference - brightness / 100
* circumference};" /> <text x="50%" y="54%" fill="#FFFFFF"
font-size="14" text-anchor="middle"
alignment-baseline="middle">${brightness}<tspan
font-size="10">%</tspan></text></svg>`; } ]]]
2 « J'aime »
Bonjour, je débute avec Home Assistant et je souhaite changer la couleur d’une icône en fonction d’une valeur. Voici le code que j’essaie de mettre en place. L’animation fonctionne bien mais la couleur de l’icône ne change pas. Merci de votre aide.
entity: sensor.maison_meteo_netatmo_humidity
name: Humidité
icon: mdi:water-percent
show_state: true
show_icon: true
styles:
card:
- font: 13px Roboto
name:
- font: 0px Roboto
icon:
- width: 48px
- height: 48px
- animation: fade-out 3s infinite
- color: |
[[[
if (entity.state <= 25)
return '#e6ffff';
if (entity.state > 25 <= 50)
return '#66ffff';
if (entity.state > 50 <= 75)
return '#33ccff';
if (entity.state > 75)
return '#0066ff';
return '';
]]]
extra_styles: |
@keyframes fade-out {
0% { opacity:1; color: 'green';}
50% { opacity:0; color: 'yellow';}
100% { opacity:1; color: 'blue';}
};
Salut @fredokl
Chez moi j’ai plus ce genre de truc sur les templates button-card
button-card utilise des templates javascript et à priori une succession de « if » et le simple « else » ne fonctionne pas.
1 « J'aime »
dans la doc de button-card, c’est marqué un peu différemment (le > à la place de | ) :
icon:
- color: >
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
sinon après tu peux mettre une seule couleur par défaut dans ton ICON COLOR, et puis tu places tes conditions dans une balise STYLE
2 « J'aime »
Hum ma mémoire me joue des tours, j’étais persuadé que ça n’avait fonctionné chez moi.
Ce pourquoi j’étais allé voir la doc dont j’ai donné le lien.
Bref faut que je retest ça pour voir où j’ai buggé à l’époque 
@Herbs plusieurs solutions sont possibles et donnent le même résultat. Donc si ça fonctionne comme tu veux, ne te creuse pas trop la tête.
@fredokl comme quoi un simple caractère change toute la donne
1 « J'aime »
Ouais je crois je vais faire ça
Car une chose étonnante, c’est que chez moi le « | » au lieu de « > » fonctionne correctement 
Exemple template pour les alertes météo :
vigi_meteo:
show_name: false
size: 25px
styles:
icon:
- color: |
[[[
if (entity.state == 'unknown') return 'rgb(169, 169, 169)';
else return 'rgb(255,255,255)';
]]]
card:
- height: 35px
- background-color: |
[[[
if (entity.state == 'Rouge') return 'rgb(220, 20, 60)';
else return 'var( --ha-card-background)';
]]]
- border: |
[[[
if (entity.state == 'Vert') return '2px solid rgb(0,250,154)';
else if (entity.state == 'Jaune') return '2px solid rgb(253, 216, 53)';
else if (entity.state == 'Orange') return '2px solid rgb(255, 127, 80)';
else if (entity.state == 'Rouge') return '2px solid rgb(255, 255, 255)';
else return '2px solid rgb(169, 169, 169)';
]]]
Et au final avec et sans alerte :
Bref on va pas s’en faire pour si peu
1 « J'aime »
Bonjour ( ou bonsoir ),
je cherche a rajouter un padding a button-card sur les cotés. J’utilise stack-in-card, avec l’option outer_padding: true j’ai un espace sur les cotés mais pour toute la carte (image 2).
Je veux désactiver l’option outer_padding: false, mais rajouter juste l’espace au button card.
Je sais pas, si ca peu ce faire de button-card ou passer par card_mod ?
stack-in-card avec outer_padding: false
stack-in-card avec outer_padding: true
Code des deux button-card:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: button.diskstation_reboot
color_type: icon
aspect_ratio: 4.55/1
show_entity_picture: true
entity_picture: /local/images/nas ds214+3.png
name: DS214+<br/>Reboot
color: rgb(68, 115, 158)
layout: icon_name
size: 55%
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 1
name:
- font-size: 0.80em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
style: |
ha-card {
border-radius: 0px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.7);
}
- type: custom:button-card
entity: switch.ds214
color_type: icon
aspect_ratio: 4.55/1
show_entity_picture: true
show_state: true
entity_picture: /local/images/nas ds214+3.png
name: DS214+ On/Off
color: rgb(68, 115, 158)
layout: icon_name_state2nd
size: 55%
state:
- value: 'on'
styles:
state:
- color: green
- value: 'off'
styles:
state:
- color: '#E30022'
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 1
name:
- font-size: 0.80em
- white-space: normal
state:
- font-weight: bold
- font-size: 0.80em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
style: |
ha-card {
border-radius: 0px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.7);
}
2 « J'aime »
Salut @WarC0zes
Un truc vite fait :
type: vertical-stack
cards:
- type: entities
entities:
- light.eclairage_exterieure
- switch.volet_bureau
- switch.volet_salon
- type: custom:mod-card
style:
.: |
ha-card {
margin: 0px 10px 0 10px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.sw_spots_cuisine
name: Cuisine
- type: custom:button-card
entity: switch.sw_lampe_salon
name: Salon
Bon comme j’ai dit « c’est vite fait », il y’a surement moyen de faire autrement.
Peut-être avec les « extra_styles » de button card ?
1 « J'aime »
Salut @Herbs,
Je savais que tu me trouverais une solution. Même a la vite fait, ca fait le taf
J’y pense pas a utiliser la carte mod-card, alors que j’en est utiliser déja avec stack in card pour des soucis de couleur qui fonctionnais pas. Je vais m’en souvenir maintenant 
Merci pour le truc vite fait 
No problemo
Il faut, on fait plein choses sympathiques avec card-mod 
Tiens voilà un lien avec une sorte d’abaque de ce qu’on peut faire avec, et surtout un max d’exemple :
1 « J'aime »
Hello à tous
Alors je ne sais pas si mon intervention est justifiée ici mais bon j’essaye.
Alors j’ai installé la « button card »
J’ai ajouté ceci dans mon fichier config
lovelace:
mode: storage
dashboards:
lovelace-yaml:
mode: yaml
title: Maison
icon: mdi:script
show_in_sidebar: true
filename: ui-lovelace.yaml
resources:
- url: /local/multiple-entity-row.js?v=4.2.0
type: module
- url: /local/button-card.js
type: module
De coté j’ai ceci
et j’ai toujours ceci quand je vais dans Aperçu, ma page pour ajouter la carte
Donc je suppose qu’il me manque quelque chose ?
Et lorsque je souhaite modifier ma page maison ou j’ai tout j’ai ceci
Alors si quelqu’un peut m’aider, car forcément j’ai dû louper un truc …
Merci pour vos retours.
David
Bonjour, très simpa ta carte,
tu pourrai me partager ton code stp ?
Tu à passez combien de temps pour sortir ta carte ?
Bonjour,
J’y est passer quelques heures pour faire la carte complète a la main.
Tu as besoin d’installer les cartes: stack-in-card, multiple-entity-row, card_mod, bar-card, button-card et de custom-brand-icons pour les icones ( cpu, ram ).
Voici le code complet de ma carte (colonne complète):
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: true
border_radius: true
background: true
outer_padding: false
cards:
- type: vertical-stack
cards:
- type: entities
header:
image: /local/images/ds214+logo2.png
type: picture
entities:
- entity: sensor.diskstation_last_boot
type: custom:multiple-entity-row
name: IP
icon: mdi:ip
show_state: false
entities:
- entity: device_tracker.diskstation
name: Interne
attribute: ip
- entity: binary_sensor.wan_status_2
name: Externe
attribute: wan_ipaddress
- entity: sensor.diskstation_drive_1_status
type: custom:multiple-entity-row
name: Statut
icon: mdi:web-clock
show_state: false
entities:
- entity: sensor.diskstation_last_boot
name: Uptime
format: total
- entity: sensor.diskstation_volume_1_status
name: HDD
- entity: binary_sensor.diskstation_security_status
name: Sécurity Statut
card_mod:
style: |
.card-content div {
margin-top: -3px !important;
margin-left: -10px !important;
margin-bottom: 0px !important;
}
:host {
font-size: 15px;
}
ha-card {
box-shadow: none;
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_cpu_utilization_total
name: CPU
icon: phu:intel-cpu
height: 27px
color: rgb(68, 115, 158)
min: 1
max: 100
positions:
indicator: 'off'
- entity: sensor.diskstation_memory_usage_real
name: RAM
icon: phu:ram-memory
height: 27px
color: red
min: 1
max: 100
target: 90
positions:
indicator: 'off'
- entity: sensor.diskstation_volume_1_volume_used
name: HDD SHR 4To
icon: mdi:harddisk
height: 27px
color: green
min: 1
max: 100
target: 70
positions:
indicator: 'off'
style: |
ha-card {
margin-top: -25px;
margin-left: -10px;
margin-right: -9px;
box-shadow: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.diskstation_temperature
name: Nas
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: 'off'
style: |
ha-card {
margin-top: -30px;
margin-left: -10px;
margin-right: -9px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 55px;
background: url("/local/images/nas ds214+3.png");
background-size: 100% 100%;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: 1px;
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_drive_1_temperature
name: HDD1
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: 'off'
style: |
ha-card {
margin-top: -30px;
margin-left: -15px;
margin-right: -10px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/images/wd red pro3.png");
background-size: 100% 100%;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: 1px;
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_drive_2_temperature
name: HDD2
icon: mdi:blank
height: 27px
color: orange
min: 1
max: 60
target: 50
positions:
name: inside
indicator: 'off'
style: |
ha-card {
margin-top: -30px;
margin-left: -14px;
margin-right: -9px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 40px;
background: url("/local/images/wd red pro3.png");
background-size: 100% 100%;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: 1px;
}
- type: custom:mod-card
style:
.: |
ha-card {
margin: 0px 10px 0 10px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: button.diskstation_reboot
color_type: icon
aspect_ratio: 4.55/1
show_entity_picture: true
entity_picture: /local/images/nas ds214+3.png
name: DS214+<br/>Reboot
color: rgb(68, 115, 158)
layout: icon_name
size: 55%
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 1
name:
- font-size: 0.80em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
style: |
ha-card {
border-radius: 5px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.7);
}
- type: custom:button-card
entity: switch.ds214
color_type: icon
aspect_ratio: 4.55/1
show_entity_picture: true
show_state: true
entity_picture: /local/images/nas ds214+3.png
name: DS214+ On/Off
color: rgb(68, 115, 158)
layout: icon_name_state2nd
size: 55%
state:
- value: 'on'
styles:
state:
- color: green
- value: 'off'
styles:
state:
- color: '#E30022'
styles:
card:
- padding: 0.2em
- margin: '-10px 0'
- '--mdc-ripple-color': rgb(68, 115, 158)
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 1
name:
- font-size: 0.80em
- white-space: normal
state:
- font-weight: bold
- font-size: 0.80em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
style: |
ha-card {
border-radius: 5px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.7);
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.diskstation_download_throughput
name: Download
icon: fas:download
height: 27px
direction: right
positions:
icon: inside
name: inside
minmax: 'off'
indicator: 'off'
color: green
entity_row: true
style: |
ha-card {
font-size: 14px;
--bar-card-border-radius: 5px;
box-shadow: none;
margin: -10px -12px 0px -5px;
--mdc-icon-size: 20px;
}
- type: custom:bar-card
entities:
- entity: sensor.diskstation_upload_throughput
direction: right
name: Upload
icon: fas:upload
height: 27px
color: rgb(250, 0, 1)
entity_row: true
positions:
icon: inside
indicator: 'off'
name: inside
minmax: 'off'
style: |
ha-card {
font-size: 14px;
--bar-card-border-radius: 5px;
box-shadow: none;
margin: -10px -5px 0px -12px;
--mdc-icon-size: 20px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.ups_status
name: Green cell<br/>600VA
aspect_ratio: 1.8/1
layout: icon_name_state2nd
show_icon: true
show_name: true
show_label: true
show_entity_picture: true
entity_picture: /local/images/Onduleur.png
styles:
icon:
- width: 95%
name:
- font-size: 15px
- margin-left: '-30px'
custom_fields:
statut:
- top: 60%
- left: 38%
- position: absolute
- font-size: 13.5px
input:
- top: 80%
- left: 38%
- position: absolute
- font-size: 13.5px
custom_fields:
statut: |
[[[
if (states['sensor.ups_status'].state == "Online") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut: <span style='color: green;'>${states['sensor.ups_status'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut: <span style='color: red;'>${states['sensor.ups_status'].state}</span></span>`
]]]
input: |
[[[
if (states['sensor.ups_status_data'].state == "OL") return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon>
<span>Statut data: <span style='color: green;'>${states['sensor.ups_status_data'].state}</span></span>`; else return `<ha-icon icon='mdi:information-outline' style='width: 20px; height: 20px; color: rgb(68, 115, 158);'></ha-icon> <span>Statut data: <span style='color: red;'>${states['sensor.ups_status_data'].state}</span></span>`
]]]
hold_action:
action: more-info
entity: sensor.ups_status_data
style: |
ha-card {
box-shadow: none;
}
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.ups_input_voltage
name: Input
icon: mdi:sine-wave
height: 17px
color: rgb(68, 115, 158)
min: 1
max: 236
target: 200
positions:
icon: inside
indicator: 'off'
style: |
ha-card {
margin-top: -8px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.ups_output_voltage
name: Output
icon: mdi:sine-wave
height: 17px
color: green
min: 1
max: 236
target: 200
positions:
icon: inside
indicator: 'off'
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.ups_load
name: Load
height: 17px
color: orange
min: 1
max: 100
target: 90
positions:
icon: inside
indicator: 'off'
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
- type: custom:bar-card
entities:
- entity: sensor.ups_battery_charge
name: Charging
icon: mdi:battery-high
height: 17px
color: red
min: 1
max: 100
target: 10
positions:
icon: inside
indicator: 'off'
style: |
ha-card {
margin-top: -23px;
margin-left: -11px;
margin-right: -4px;
box-shadow: none;
height: 45px;
}
ha-icon {
--mdc-icon-size: 18px;
color: white;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 4px;
}
bar-card-name {
margin: -5px;
}
Image du bandeau
Icone du nas:
Icone des HDD:
2 « J'aime »
Merci infiniment pour le magniffique partage,
Quand on vois le resultat, tu à passé du temps mais elle magniffique avec toutes les infos.
De ce que je vois tu à une batterie de secour, tu a mis ta box internet dessus aussi ?
Oui, j’ai un onduleur qui sert pour le nas , HA et la box internet.
2 « J'aime »
Hello
Dit moi comment tu fais pour avoir les ip ( les 2 syno et externe )
Car sur mes deux syno j’ai droit sur la carte a des undefinded
Par contre dans la partie IP externe ca marche si je passe par pour IP Externe.
De plus je suis obliger de viré
attribute: ip
attribute: wan_ipaddress
Mes deux syno sont sur la dernière version de DSM 7.1.1
Dans mes entité syno je trouve pas de IP , ni de device trackers
Salut @ClassicRed,
alors pour l’ip interne et externe c’est a partir de l’intégration de ma livebox que je les récupèrent (sensor wan et tracker ).
Pour l’ip local (interne) tu peu utiliser Nmap Tracker - Home Assistant.
Pour l’ip externe je sais pas, mais DNS IP a l’air de faire le boulot. Sinon, ta pas un téléphone ou tablette intégrer a HA et qui permette d’avoir l’ip public dans les capteurs de l’application ( pas activer par default je crois ).
- entity: sensor.diskstation_last_boot
type: custom:multiple-entity-row
name: IP
icon: mdi:ip
show_state: false
entities:
- entity: device_tracker.diskstation
name: Interne
attribute: ip
- entity: binary_sensor.wan_status_2
name: Externe
attribute: wan_ipaddress
Pour l’ip interne faut savoir comment ton sensor a les information stocker. Quel est le nom de l’attribut pour l’ip et le modifier dans le code.
Ta box internet a pas de device tracker et l’info de l’ip interne ?
1 « J'aime »