Bonsoir,
Une version qui fonctionne avec le mode section avec ajout du changement de couleurs automatique en fonction du thème (clair ou sombre) :
J’ai fiabilisé les “if then else” en bornant les expressions (>= à valeur basse et < à valeur haute) et j’ai uniformisé les unités.
Code de la première carte (mode compact) :
type: custom:button-card
section_mode: true
grid_options:
rows: 2
columns: 6
aspect_ratio: 1/1
custom_fields:
apex:
card:
type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.perron_thermometre_temperature
max: 40
color: "#00FF00"
show:
legend_value: false
- entity: sensor.perron_thermometre_humidity
max: 100
color: "#FEFEFE"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.25
strokeWidth: 75%
margin: 3
fill:
type: gradient
gradient:
type: vertical
gradientToColors:
- "#E73E01"
- "#0F9DE8"
stops:
- 0
- 100
legend:
show: false
chart:
height: 120%
room:
card:
type: custom:button-card
icon: mdi:home-thermometer
label: Perron
show_label: true
styles:
card:
- background: transparent
- aspect-ratio: 2/1
- width: 122px
- border: none
- border-radius: 0
- transform: translate(-50%,-50%)
- pointer-events: none
- cursor: default
- z-index: 0
icon:
- width: 23%
- color: var(--primary-text-color)
- opacity: 75%
- padding-top: 5%
label:
- font-size: 0.8rem
- font-style: italic
- color: var(--primary-text-color)
- opacity: 75%
- padding-bottom: 8%
temp:
card:
type: custom:button-card
icon: mdi:thermometer
show_state: true
show_name: false
state_display: |
[[[
return parseFloat(states['sensor.perron_thermometre_temperature'].state).toFixed(1) + '°';
]]]
layout: icon_state
numeric_precision: 1
styles:
card:
- width: 122px
- font-style: italic
- border: none
- border-radius: 0
- background: transparent
icon:
- width: 50%
- color: "#7dc8ff"
- padding-left: 20%
state:
- color: var(--primary-text-color)
- opacity: 75%
- font-size: 1.4rem
- padding-right: 20%
hum:
card:
type: custom:button-card
icon: mdi:water
show_state: true
show_name: false
state_display: |
[[[
return parseFloat(states['sensor.perron_thermometre_humidity'].state).toFixed(1) + ' %';
]]]
layout: icon_state
numeric_precision: 1
styles:
card:
- width: 122px
- font-style: italic
- border: none
- border-radius: 0
- background: transparent
icon:
- width: 40%
- color: "#7dc8ff"
- padding-left: 25%
state:
- color: var(--primary-text-color)
- opacity: 75%
- font-size: 1.1rem
- padding-right: 25%
- padding-top: 2%
link_quality:
card:
type: custom:button-card
show_name: false
icon: >-
[[[ var link =
states['sensor.allee_du_garage_thermometre_linkquality'].state;
if (link >= 170)
return "mdi:signal-cellular-3";
else if (link >= 85 && link < 170)
return "mdi:signal-cellular-2";
else if (link >= 1 && link < 85)
return "mdi:signal-cellular-1";
else
return "mdi:signal-cellular-outline";
]]]
styles:
card:
- border: none
- border-radius: 0
- background: transparent
- width: 30px
icon:
- width: 90%
- color: "#7dc8ff"
battery:
card:
type: custom:button-card
show_name: false
show_label: true
layout: icon_label
icon: |-
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (!entity || entity.state === 'unavailable' || entity.state === 'unknown')
return 'mdi:battery-alert-variant-outline';
var battery = parseInt(entity.state);
if (isNaN(battery) || battery < 1)
return 'mdi:battery-alert-variant-outline';
else if (battery <= 10)
return 'mdi:battery-10';
else if (battery > 10 && battery <= 20)
return 'mdi:battery-10';
else if (battery > 20 && battery <= 70)
return 'mdi:battery-50';
else
return 'mdi:battery';
]]]
label: |
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (entity && entity.state !== 'unavailable' && entity.state !== 'unknown') {
return entity.state + '%';
}
return '';
]]]
styles:
card:
- border: none
- background: transparent
- aspect-ratio: 2/1
- border-radius: 0
- width: 50px
icon:
- color: |-
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (!entity || entity.state === 'unavailable' || entity.state === 'unknown')
return 'lightgrey';
var battery = parseInt(entity.state);
if (isNaN(battery) || battery < 1)
return 'lightgrey';
else if (battery <= 10)
return 'darkred';
else if (battery > 10 && battery <= 20)
return 'red';
else if (battery > 20 && battery <= 70)
return 'orange';
else
return 'green';
]]]
- width: 100%
- margin-left: 10%
label:
- font-size: 0.9rem
- color: |-
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (!entity || entity.state === 'unavailable' || entity.state === 'unknown')
return 'lightgrey';
var battery = parseInt(entity.state);
if (isNaN(battery) || battery < 1)
return 'lightgrey';
else if (battery <= 10)
return 'darkred';
else if (battery > 10 && battery <= 20)
return 'red';
else if (battery > 20 && battery <= 70)
return 'orange';
else
return 'green';
]]]
- padding-top: 6%
- padding-right: 15%
styles:
card:
- background-color: var(--card-background-color, rgba(28,28,28,1.0))
- box-shadow: |
[[[
return (variables.theme === 'dark')
? '0 4px 12px rgba(0,0,0,0.3)'
: '0 2px 8px rgba(0,0,0,0.1)';
]]]
- cursor: default
custom_fields:
apex:
- position: absolute
- display: flex
- justify-content: center
- align-items: center
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
- overflow: visible
- "--ha-card-border-width": 0
- "--ha-card-background": transparent
room:
- position: absolute
- top: 30%
- left: 50%
temp:
- position: absolute
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
hum:
- position: absolute
- top: 65%
- left: 50%
- transform: translate(-50%, -50%)
link_quality:
- position: absolute
- left: 3%
- top: 2%
battery:
- position: absolute
- right: 1%
- top: 2%
variables:
theme: |
[[[
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
? 'dark' : 'light';
]]]
Code de la deuxième carte (mode étendu) :
type: custom:button-card
section_mode: true
grid_options:
rows: 2
columns: 6
aspect_ratio: 1/1.6
custom_fields:
apex:
card:
type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.perron_thermometre_temperature
max: 40
color: "#00FF00"
show:
legend_value: false
- entity: sensor.perron_thermometre_humidity
max: 100
color: "#FEFEFE"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
dropShadow:
enabled: true
top: 3
left: 0
blur: 4
opacity: 0.25
strokeWidth: 75%
margin: 3
fill:
type: gradient
gradient:
type: vertical
gradientToColors:
- "#E73E01"
- "#0F9DE8"
stops:
- 0
- 100
legend:
show: false
chart:
height: 100%
room:
card:
type: custom:button-card
icon: mdi:home-thermometer
label: Perron
show_label: true
styles:
card:
- background: transparent
- aspect-ratio: 2/1
- width: 122px
- border: none
- border-radius: 0
- transform: translate(-50%,-50%)
- pointer-events: none
- cursor: default
- z-index: 0
icon:
- width: 23%
- color: var(--primary-text-color)
- opacity: 75%
- padding-top: 5%
label:
- font-size: 0.8rem
- font-style: italic
- color: var(--primary-text-color)
- opacity: 75%
- padding-bottom: 8%
temp:
card:
type: custom:button-card
icon: mdi:thermometer
show_state: true
show_name: false
state_display: |
[[[
return parseFloat(states['sensor.perron_thermometre_temperature'].state).toFixed(1) + '°';
]]]
layout: icon_state
numeric_precision: 1
styles:
card:
- width: 122px
- font-style: italic
- border: none
- border-radius: 0
- background: transparent
icon:
- width: 50%
- color: "#7dc8ff"
- padding-left: 20%
state:
- color: var(--primary-text-color)
- opacity: 75%
- font-size: 1.4rem
- padding-right: 20%
hum:
card:
type: custom:button-card
icon: mdi:water
show_state: true
show_name: false
state_display: |
[[[
return parseFloat(states['sensor.perron_thermometre_humidity'].state).toFixed(1) + ' %';
]]]
layout: icon_state
numeric_precision: 1
styles:
card:
- width: 122px
- font-style: italic
- border: none
- border-radius: 0
- background: transparent
icon:
- width: 40%
- color: "#7dc8ff"
- padding-left: 25%
state:
- color: var(--primary-text-color)
- opacity: 75%
- font-size: 1.1rem
- padding-right: 25%
- padding-top: 2%
link_quality:
card:
type: custom:button-card
show_name: false
icon: >-
[[[ var link =
states['sensor.allee_du_garage_thermometre_linkquality'].state;
if (link >= 170)
return "mdi:signal-cellular-3";
else if (link >= 85 && link < 170)
return "mdi:signal-cellular-2";
else if (link >= 1 && link < 85)
return "mdi:signal-cellular-1";
else
return "mdi:signal-cellular-outline";
]]]
styles:
card:
- border: none
- border-radius: 0
- background: transparent
- width: 30px
icon:
- width: 90%
- color: "#7dc8ff"
battery:
card:
type: custom:button-card
show_name: false
show_label: true
layout: icon_label
icon: |-
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (!entity || entity.state === 'unavailable' || entity.state === 'unknown')
return 'mdi:battery-alert-variant-outline';
var battery = parseInt(entity.state);
if (isNaN(battery) || battery < 1)
return 'mdi:battery-alert-variant-outline';
else if (battery <= 10)
return 'mdi:battery-10';
else if (battery > 10 && battery <= 20)
return 'mdi:battery-10';
else if (battery > 20 && battery <= 70)
return 'mdi:battery-50';
else
return 'mdi:battery';
]]]
label: |
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (entity && entity.state !== 'unavailable' && entity.state !== 'unknown') {
return entity.state + '%';
}
return '';
]]]
styles:
card:
- border: none
- background: transparent
- aspect-ratio: 2/1
- border-radius: 0
- width: 50px
icon:
- color: |-
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (!entity || entity.state === 'unavailable' || entity.state === 'unknown')
return 'lightgrey';
var battery = parseInt(entity.state);
if (isNaN(battery) || battery < 1)
return 'lightgrey';
else if (battery <= 10)
return 'darkred';
else if (battery > 10 && battery <= 20)
return 'red';
else if (battery > 20 && battery <= 70)
return 'orange';
else
return 'green';
]]]
- width: 100%
- margin-left: 10%
label:
- font-size: 0.9rem
- color: |-
[[[
var entity = states['sensor.perron_thermometre_battery'];
if (!entity || entity.state === 'unavailable' || entity.state === 'unknown')
return 'lightgrey';
var battery = parseInt(entity.state);
if (isNaN(battery) || battery < 1)
return 'lightgrey';
else if (battery <= 10)
return 'darkred';
else if (battery > 10 && battery <= 20)
return 'red';
else if (battery > 20 && battery <= 70)
return 'orange';
else
return 'green';
]]]
- padding-top: 6%
- padding-right: 15%
update_text: |
[[[ return 'Dernière M.A.J.'; ]]]
update_time: >
[[[ return
helpers.relativeTime(states['sensor.allee_du_garage_thermometre_last_seen'].last_changed);
]]]
graph:
card:
type: custom:mini-graph-card
name: Parents
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 3
decimals: 1
entities:
- entity: sensor.perron_thermometre_temperature
name: Temp.
color: "#2a75cf"
y_axis: secondary
- entity: sensor.perron_thermometre_humidity
color: "#ffc04c"
name: Humidité
y_axis: primary
y_axis: secondary
show:
fill: true
graph: line
icon: false
name: false
state: false
labels: false
extrema: true
average: true
icon_adaptive_color: false
labels_secondary: false
align_icon: right
align_state: left
font_size: 82
height: 170
styles:
card:
- background-color: var(--card-background-color, rgba(28,28,28,1.0))
- box-shadow: |
[[[
return (variables.theme === 'dark')
? '0 4px 12px rgba(0,0,0,0.3)'
: '0 2px 8px rgba(0,0,0,0.1)';
]]]
- cursor: default
custom_fields:
apex:
- position: absolute
- display: flex
- justify-content: center
- align-items: center
- top: 25%
- left: 50%
- transform: translate(-50%, -50%)
- overflow: visible
- "--ha-card-border-width": 0
- "--ha-card-background": transparent
room:
- position: absolute
- top: 16%
- left: 50%
temp:
- position: absolute
- top: 26%
- left: 50%
- transform: translate(-50%, -50%)
hum:
- position: absolute
- top: 33%
- left: 50%
- transform: translate(-50%, -50%)
link_quality:
- position: absolute
- left: 3%
- top: 2%
battery:
- position: absolute
- right: 1%
- top: 2%
update_text:
- position: absolute
- top: 48%
- left: 4%
- color: var(--primary-text-color)
- font-size: 0.85rem
- font-style: italic
update_time:
- position: absolute
- top: 48%
- right: 4%
- color: var(--primary-text-color)
- font-size: 0.85rem
- font-style: italic
graph:
- position: absolute
- bottom: 0%
- left: 0%
- "--ha-card-border-width": 0
- "--ha-card-background": transparent
- "--primary-text-color": var(--primary-text-color)
variables:
theme: |
[[[
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
? 'dark' : 'light';
]]]
@Sabjul33 peux-tu me dire si ça fonctionne pour toi ? Je suis en largeur 4 pour la section :
