Salut à tous,
Merci à tous pour le travail effectué et en particulier @herveaurel et @Integra. Je débute sur HA depuis quelques semaines et je me prends pas mal la tête sur mon panneau énergie (voir ici pour les plus motivés).
Je cherchais à me détendre et suis tombé sur ce topic. En me basant sur le message d’@integra N°170 et sa version “complète”, j’ai fait un peu d’adaptation pour coller à ma situation et tout parait limpide ou presque ! J’arrive à afficher une jolie carte, à la modifier un peu selon mes envies, ça remonte le moral ! 
J’ai notamment inversé les couleurs des cercles (le bleu me parait plus adapté pour l’humidité) et mis l’icône du thermomètre en orange. C’est peut-être un détail pour vous, mais pour moi… 
Il me reste cependant quelques questions car je suis encore bien loin d’être un codeur…
- Où trouver l’info “dernière vue du capteur” car je ne l’ai pas dans MQTT, là où j’ai trouvé les autres infos (T°, humidité, batterie) ?
- Est-il possible d’avoir les données “Min/Avg/Max” sans avoir le graphique affiché ?
- J’arrive à déplacer l’icone batterie et modifier sa taille, mais je ne trouve pas comment modifier la taille de la police du pourcentage ?
D’autres questions viendront sûrement…
Merci à tous.
type: custom:button-card
entity: sensor.capteur_tdeg_salon_temperature
size: 5%
icon: mdi:sofa
show_state: false
show_name: false
label: Salon
show_label: true
styles:
card:
- position: relative
grid:
- grid-template-areas: >-
"link battery" "i i" "l l" "temp temp" "hum hum" "update heure" "apex
apex" "graph graph"
- grid-template-columns: 50% 50%
- margin-top: 2%
- padding-bottom: 0%
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
battery:
- position: absolute
- left: 62%
- top: 10%
update:
- justify-self: middle
- align-self: middle
- font-style: italic
- font-size: 12px
- opacity: 60%
- margin-top: 10%
heure:
- justify-self: middle
- align-self: middle
- font-style: italic
- font-size: 12px
- opacity: 60%
- margin-top: 10%
apex:
- position: absolute
- top: 0%
- left: 0%
- width: 100%
- height: 100%
- "--ha-card-border-width": 0
- "--ha-card-background": transparent
custom_fields:
temp: >
[[[ var temp = states['sensor.capteur_tdeg_salon_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #ffd27f ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.capteur_tdeg_salon_humidity' ].state;
return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: |
[[[ var battery = states['sensor.capteur_tdeg_salon_battery'].state;
if (battery >= 70)
return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>` + battery + '%';
else if (battery >= 20)
return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>` + battery + '%';
else if (battery >= 1)
return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>` + battery + '%';
else
return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>` + battery + '%'; ]]]
update: |
[[[
return `<ha-icon icon="mdi:progress-clock" style="width: 20px; height: 20px;"></ha-icon>` +
' Dernière M.A.J.';
]]]
apex:
card:
type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_tdeg_salon_temperature
max: 40
color: "#ffd27f"
show:
legend_value: false
- entity: sensor.capteur_tdeg_salon_humidity
max: 100
color: "#7dc8ff"
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:
- "#ffc04c"
- "#2a75cf"
stops:
- 0
- 100
legend:
show: false
chart:
height: 100%