Bonjour @Bob ,
Pas de soucis, comme dit juste au-dessus j’ai apporté de légères modifications pour simplifier le code et rendre la chose un petit plus esthétique, à mes yeux en tout cas
Pour moi en dashboard « tuile », le meilleur compromis est de 2 capteurs par carte, possiblement 3 si on enlève la partie Mini-graph-card et en réduisant légèrement la taille mais je préfère 2.
Aperçu actuel:
Et voici le code:
Cards
type: vertical-stack
cards:
- type: custom:button-card
name: Température & Humidité
icon: mdi:thermometer
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 15% min-content
card_mod:
style: |
ha-card {
margin-bottom: -5px !important;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_1_temperature
max: 40
color: "#7dc8ff"
show:
legend_value: false
- entity: sensor.capteur_temperature_1_humidity
max: 100
color: "#ffd27f"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
hollow:
size: 65%
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:
- "#2a75cf"
- "#ffc04c"
stops:
- 0
- 100
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.capteur_temperature_1_temperature
size: 10%
icon: mdi:sofa
show_state: false
show_name: false
label: Salon
show_label: true
styles:
grid:
- grid-template-areas: "\"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
- font-style: italic
custom_fields:
temp: >
[[[ var temp =
states['sensor.capteur_temperature_1_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.capteur_temperature_1_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
card_mod:
style: |
ha-card {
margin-top: -142px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_2_temperature
max: 40
color: "#7dc8ff"
show:
legend_value: false
- entity: sensor.capteur_temperature_2_humidity
max: 100
color: "#ffd27f"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
hollow:
size: 65%
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:
- "#2a75cf"
- "#ffc04c"
stops:
- 0
- 100
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.capteur_temperature_2_temperature
size: 10%
icon: mdi:bed-king
show_state: false
show_name: false
label: Chambre
show_label: true
styles:
grid:
- grid-template-areas: "\"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
- font-style: italic
custom_fields:
temp: >
[[[ var temp =
states['sensor.capteur_temperature_2_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.capteur_temperature_2_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
card_mod:
style: |
ha-card {
margin-top: -142px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:mini-graph-card
name: Salon
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.capteur_temperature_1_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.capteur_temperature_1_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
- type: custom:mini-graph-card
name: Chambre
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.capteur_temperature_2_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.capteur_temperature_2_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
Il s’agit d’un vertical stack, au 1er niveau le titre, au 2e carte type « grille » Apex charts + button card et au 3e carte type « grille » Mini-graph-card. Chaque partie peut-être supprimée indépendamment si l’on ne les souhaite pas toutes.
Sensors à remplacer:
sensor.capteur_temperature_1_temperature
sensor.capteur_temperature_1_humidity
sensor.capteur_temperature_2_temperature
sensor.capteur_temperature_2_humidity
Ps : ne jugez toujours pas le niveau d’humidité, je suis encore en pleine orage là
1 « J'aime »
Hello,
Bonjour @PhilCharp ,
Oui tu peux rajouter autant de colonnes que tu veux sur la carte mais au delà de 3 je trouve ça trop petit et moins lisible.
Sinon tu as d’autres solutions :
En dashboard type « tuile » = tu peux jouer avec layout-card, dispo sur HACS, pour placer une carte qui fait toute la largeur du dashboard et donc rajouter plus de colonnes. Un peu complexe à mettre en place dans certains cas.
Aperçu
En dashboard type « section » = tu peux également ajouter un carte qui fera toute la largeur du dashboard en jouant sur sa mise en page. Bien plus simple que le point précédent.
Aperçu
J’ai pu rajouter un icone indiquant le niveau de batterie, en le plaçant au haut à doite :
Aperçu
Vert > 70% > orange > 20% > rouge
Si cela t’intéresse remplace la partie button-card par ça :
Button-card
- type: custom:button-card
entity: sensor.capteur_temperature_1_temperature
size: 6%
icon: mdi:bed-king
show_state: false
show_name: false
label: Chambre
show_label: true
styles:
grid:
- grid-template-areas: "\"battery\" \"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 12px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 27px
hum:
- font-size: 14px
- font-style: italic
battery:
- padding-left: 180px
custom_fields:
temp: >
[[[ var temp =
states['sensor.capteur_temperature_1_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.capteur_temperature_1_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: >
[[[ if (states['sensor.capteur_temperature_1_battery'].state >= 70) return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>`;
if (states['sensor.capteur_temperature_1_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>`;
if (states['sensor.capteur_temperature_1_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>`; ]]]
card_mod:
style: |
ha-card {
margin-top: -185px;
background: none;
box-shadow: none;
border: none;
}
1 « J'aime »
Excellent un grand merci à toi !!!
Oui pas de problème, ci-dessous le code pour une seule carte et donc un seul capteur avec les couleurs demandées. À toi d’intégrer cela dans des cartes type « grille » si tu veux plusieurs colonnes dans une même carte.
Cependant, les dégradés de couleurs sont mal gérés sur une radialBar à 360° (ou alors je maitrise pas assez le code = fort propable). Je m’explique, lors d’un dégradé de vert à rouge par exemple, lorsque la valeur tendra vers le maximum (donc rouge en théorie) en toute fin de graphique après être passé au rouge elle retendra vers le vert (vers la toute fin du cercle).
J’ai essayé tous les types de dégradé et en jouant sur les stops couleurs mais pas réussi. Pour palier ça j’ai préféré rester sur des dégradés de même couleur (bleu clair > bleu foncé, orange clair > orange foncé).
Voici le code (temp. blanc à bleu et hum. vert à rouge) :
Carte
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.capteur_temperature_1_temperature
max: 40
color: "#00FF00"
show:
legend_value: false
- entity: sensor.capteur_temperature_1_humidity
max: 100
color: "#FEFEFE"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -5
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:
gradientToColors:
- "#E73E01"
- "#0F9DE8"
stops:
- 0
- 100
legend:
show: false
chart:
height: 220
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.capteur_temperature_1_temperature
size: 6%
icon: mdi:bed-king
show_state: false
show_name: false
label: Chambre
show_label: true
styles:
grid:
- grid-template-areas: "\"battery\" \"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 12px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 27px
hum:
- font-size: 14px
- font-style: italic
battery:
- padding-left: 180px
custom_fields:
temp: >
[[[ var temp = states['sensor.capteur_temperature_1_temperature'
].state; return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.capteur_temperature_1_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: >
[[[ if (states['sensor.capteur_temperature_1_battery'].state >= 70)
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>`;
if (states['sensor.capteur_temperature_1_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>`;
if (states['sensor.capteur_temperature_1_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>`; ]]]
card_mod:
style: |
ha-card {
margin-top: -185px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:mini-graph-card
name: Salon
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.capteur_temperature_1_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.capteur_temperature_1_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
Pour modifier les couleurs :
Température : ligne 10 (color: « #00FF00 ») et dégradé ligne 42 (- « #E73E01 »)
Humidité : ligne 15 (color: « #FEFEFE ») et dégradé ligne 43 (- « #0F9DE8 »)
Sensors à modifier :
sensor.capteur_temperature_1_temperature
sensor.capteur_temperature_1_humidity
sensor.capteur_temperature_1_battery
Aperçu :
Résumé
1 « J'aime »
Un grand merci à toi !!!
GRoux
Octobre 25, 2024, 7:57
130
Bonjour @Integra
Merci pour ton assistance c’est très bien expliqué et les designs sont très sympa.
Bonjour @GRoux ,
Pas de soucis !
Tu peux poster le code yaml de ta carte stp ?
Si j’ai bien compris tu veux que les infos de température/humidité (button-card) remontent au centre du graphique ?
GRoux
Octobre 25, 2024, 8:58
132
Merci @Integra
J’ai repris ton code en modifiant le nom des pièces et en mettant le nom de mes capteurs. Voici mon code.
type: vertical-stack
cards:
- type: custom:button-card
name: Température & Humidité
icon: mdi:thermometer
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 15% min-content
card_mod:
style: |
ha-card {
margin-bottom: -5px !important;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.shtbt_sdb3_4df4_temperature
max: 40
color: "#7dc8ff"
show:
legend_value: false
- entity: sensor.shtbt_sdb3_4df4_humidity
max: 100
color: "#ffd27f"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
hollow:
size: 65%
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:
- "#2a75cf"
- "#ffc04c"
stops:
- 0
- 100
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.shtbt_sdb3_4df4_temperature
size: 10%
icon: mdi:shower-head
show_state: false
show_name: false
label: SdB
show_label: true
styles:
grid:
- grid-template-areas: "\"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
- font-style: italic
custom_fields:
temp: >
[[[ var temp = states['sensor.shtbt_sdb3_4df4_temperature'
].state; return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.shtbt_sdb3_4df4_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: >
[[[ if (states['sensor.shtbt_sdb3_4df4_battery'].state >= 70)
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>`;
if (states['shtbt_sdb3_4df4_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>`;
if (states['shtbt_sdb3_4df4_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>`; ]]]
card_mod:
style: |
ha-card {
margin-top: -142px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.shtbt_buand_46b2_temperature
max: 40
color: "#7dc8ff"
show:
legend_value: false
- entity: sensor.shtbt_buand_46b2_humidity
max: 100
color: "#ffd27f"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
hollow:
size: 65%
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:
- "#2a75cf"
- "#ffc04c"
stops:
- 0
- 100
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.shtbt_buand_46b2_temperature
size: 10%
icon: mdi:washing-machine
show_state: false
show_name: false
label: Buanderie
show_label: true
styles:
grid:
- grid-template-areas: "\"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
- font-style: italic
custom_fields:
temp: >
[[[ var temp = states['sensor.shtbt_buand_46b2_temperature'
].state; return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.shtbt_buand_46b2_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
card_mod:
style: |
ha-card {
margin-top: -142px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:mini-graph-card
name: SdB
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.shtbt_sdb3_4df4_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.shtbt_sdb3_4df4_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
- type: custom:mini-graph-card
name: Buanderie
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.shtbt_buand_46b2_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.shtbt_buand_46b2_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
Est-ce que tu as bien installé la carte « Stack in Card » disponible sur HACS ? Idem est-ce que tu as bien « Card mod » ?
Je vois des petits coquilles dans ton codes mais j’attends de savoir si tu as bien la carte Stack in Card et Card mod avant de le poster.
GRoux
Octobre 25, 2024, 9:36
134
Il me manquait Card mod !
Integra
Octobre 25, 2024, 10:09
135
Voici le code où j’ai pu corriger quelques coquilles (pour la batterie principalement).
Carte
type: vertical-stack
cards:
- type: custom:button-card
name: Température & Humidité
icon: mdi:thermometer
layout: icon_name
styles:
card:
- background-color: rgba(0,0,0,0)
- padding: 6px
icon:
- height: 32px
- width: 48px
name:
- font-weight: 500
- font-size: 22px
- text-align: left
grid:
- grid-template-columns: 15% min-content
card_mod:
style: |
ha-card {
margin-bottom: -5px !important;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.shtbt_sdb3_4df4_temperature
max: 40
color: "#7dc8ff"
show:
legend_value: false
- entity: sensor.shtbt_sdb3_4df4_humidity
max: 100
color: "#ffd27f"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
hollow:
size: 65%
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:
- "#2a75cf"
- "#ffc04c"
stops:
- 0
- 100
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.shtbt_sdb3_4df4_temperature
size: 10%
icon: mdi:shower-head
show_state: false
show_name: false
label: SdB
show_label: true
styles:
grid:
- grid-template-areas: "\"battery\" \"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
- font-style: italic
battery:
- padding-left: 180px
custom_fields:
temp: >
[[[ var temp =
states['sensor.shtbt_sdb3_4df4_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.shtbt_sdb3_4df4_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: >
[[[ if (states['sensor.shtbt_sdb3_4df4_battery'].state >= 70) return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>`;
if (states['sensor.shtbt_sdb3_4df4_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>`;
if (states['sensor.shtbt_sdb3_4df4_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>`; ]]]
card_mod:
style: |
ha-card {
margin-top: -142px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.shtbt_buand_46b2_temperature
max: 40
color: "#7dc8ff"
show:
legend_value: false
- entity: sensor.shtbt_buand_46b2_humidity
max: 100
color: "#ffd27f"
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: -10
hollow:
size: 65%
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:
- "#2a75cf"
- "#ffc04c"
stops:
- 0
- 100
legend:
show: false
chart:
height: 200
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- type: custom:button-card
entity: sensor.shtbt_buand_46b2_temperature
size: 10%
icon: mdi:washing-machine
show_state: false
show_name: false
label: Buanderie
show_label: true
styles:
grid:
- grid-template-areas: "\"battery\" \"i\" \"l\" \"temp\" \"hum\""
label:
- font-size: 11px
- font-style: italic
- opacity: 75%
icon:
- opacity: 75%
custom_fields:
temp:
- font-size: 26px
hum:
- font-size: 13px
- font-style: italic
battery:
- padding-left: 180px
custom_fields:
temp: >
[[[ var temp =
states['sensor.shtbt_buand_46b2_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.shtbt_buand_46b2_humidity'
].state; return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: >
[[[ if (states['sensor.shtbt_buand_46b2_battery'].state >= 70) return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>`;
if (states['sensor.shtbt_buand_46b2_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>`;
if (states['sensor.shtbt_buand_46b2_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>`; ]]]
card_mod:
style: |
ha-card {
margin-top: -142px;
background: none;
box-shadow: none;
border: none;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:mini-graph-card
name: SdB
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.shtbt_sdb3_4df4_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.shtbt_sdb3_4df4_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
- type: custom:mini-graph-card
name: Buanderie
height: 120
hours_to_show: 24
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.shtbt_buand_46b2_temperature
name: Temp.
color: "#2a75cf"
- entity: sensor.shtbt_buand_46b2_humidity
color: "#ffc04c"
name: Humidité
show_line: true
show_points: true
show_legend: true
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
card_mod:
style: |
ha-card {
margin-top: -45px;
background: none;
box-shadow: none;
border: none;
}
Si tu as des soucis au niveau des différentes marges suite à la modification, tu posteras une capture d’écran et je te dirai ou modifier si besoin
GRoux
Octobre 26, 2024, 9:16
136
Merci beaucoup
Il y a effectivement un petit décalage vers le bas des données dans les cercles
Et sur le téléphone (iphone14pro) en mode portrait on ne voit pas l’indicateur batterie et les valeurs ont une taille un peu trop grande
Pour le décalage vers le bas, il faut que tu joues sur les lignes :
« margin-top: -142px; » (ligne 141 et 264) = descend un peu la valeur, exemple -165 pour remonter le texte dans le graphique
Et oui malheureusement, pour le téléphone la différence de résolution d’écran entraine ce genre de problème… . La seule solution que je peux te proposer est de créer un tableau de bord spécifique pour ton téléphone, tu aurais donc 2 tableaux de bord, un pour PC et un pour téléphone. Rien ne t’empêche de créer le même tableau de bord en recopiant tout son code directement puis ensuite modifier seulement cette carte pour ton téléphone.
1 « J'aime »
GRoux
Octobre 26, 2024, 6:08
138
Merci !
1 « J'aime »
