Merci pour ton aide précieuse , trop fort
Bon je n’y arrive pas, j’ai beau recopier le code, le modifier, ça mouline dans l’affichage de la carte et je ne vois aucune référence à la carte apex pourtant utilisée dans l’affichage
effectivement, pas de apexcharts-card pour c’est partie de code. Mais il en utilise pour d’autre chose.
recherche apexcharts-card , tu les trouvera. il utilise des decluttering_templates, pour les apex-chart.
tu peut tester ces codes.
pour faire des decluttering_templates, faut c’est carte.
Car c’est la partie template button card qu’il faut regarder.
Le template climat_card
comme indiqué dans la carte.
@MilesTEG1 Je cherche à faire exactement ce que tu as fait sur la première image
Est ce que tu aurais ton code et quelle carte tu as utilisé stp ?
Merci !
Bonjour,
ta le code dans le bouton première tuile, faut cliquer pour dérouler.
Il utilise la carte lovelace-multiple-entity-row:
Ok merci je viens de voir ça, Top !
Bonjour,
Pour température et humidité, j’ai depuis longtemps ce genre de carte:
J’aime bien voir un petit historique des valeurs.
Je veux bien le code ^^
Même chose ^^
Me faudra faire ça en petit, j’ai pas la place d’afficher toutes mes sondes ainsi ^^
Ou alors, j’utilise les cartes de @herveaurel avec lien dessus pour ouvrir en popup ta carte plus détaillée ^^
(faudra que je trouve comment faire ça, d’ailleurs XD)
J’ai aussi la version en plus petit, pour mettre plusieurs sonde sur un seul écran sur mon NSPanel Pro:
Le code de ces petites cartes (c'est un popup):
Le code de ces petites cartes (c’est un popup):
type: custom:mini-graph-card
- card_mod:
style: |
.header {
padding-bottom: 0px;
}
.states {
padding-bottom: 0px;
}
ha-card {
height: 100px !important;
padding-top: 4px !important;
}
ha-card > div.header.flex > div > span {
opacity: 1;
}
entities:
- color: white
entity: sensor.interieur_temperature
name: Température
state_adaptive_color: true
- color: aqua
entity: sensor.interieur_humidity
name: Humidité
show_state: true
state_adaptive_color: true
y_axis: secondary
hour24: true
hours_to_show: 12
points_per_hour: 2
line_width: 3
name: Salon
align_header: center
font_size: 60
font_size_header: 15
show:
graphe: line
icon: false
legend: false
type: custom:mini-graph-card
- card_mod:
style: |
.header {
padding-bottom: 0px;
}
.states {
padding-bottom: 0px;
}
ha-card {
height: 100px !important;
padding-top: 4px !important;
}
ha-card > div.header.flex > div > span {
opacity: 1;
}
entities:
- color: white
entity: sensor.thermometre_chambre_agathe_digital_temperature
name: Température
state_adaptive_color: true
- color: aqua
entity: sensor.thermometre_chambre_agathe_digital_humidity
name: Humidité
show_state: true
state_adaptive_color: true
y_axis: secondary
hour24: true
hours_to_show: 12
points_per_hour: 2
line_width: 3
name: Ch. Agathe
align_header: center
font_size: 60
font_size_header: 15
show:
graphe: line
icon: false
legend: false
type: custom:mini-graph-card
- card_mod:
style: |
.header {
padding-bottom: 0px;
}
.states {
padding-bottom: 0px;
}
ha-card {
height: 100px !important;
padding-top: 4px !important;
}
ha-card > div.header.flex > div > span {
opacity: 1;
}
entities:
- color: white
entity: sensor.thermometre_chambre_parents_digital_temperature
name: Température
state_adaptive_color: true
- color: aqua
entity: sensor.thermometre_chambre_parents_digital_humidity
name: Humidité
show_state: true
state_adaptive_color: true
y_axis: secondary
hour24: true
hours_to_show: 12
points_per_hour: 2
line_width: 3
name: Ch. Parents
align_header: center
font_size: 60
font_size_header: 15
show:
graphe: line
icon: false
legend: false
type: custom:mini-graph-card
Le code de la carte plus grande et détaillée:
type: custom:mini-graph-card
name: Chambre Agathe
height: 120
hours_to_show: 48
points_per_hour: 1
hour24: true
line_width: 2
decimals: 1
entities:
- entity: sensor.thermometre_chambre_agathe_digital_temperature
name: Temp.
color: orange
- color: rgb(68, 115, 158)
entity: sensor.thermometre_chambre_agathe_digital_humidity
name: Humidité
show_line: true
show_points: true
show_legend: true
y_axis: secondary
show:
fill: true
graph: line
icon: true
name: true
state: true
labels: true
extrema: true
average: true
icon_adaptive_color: false
labels_secondary: true
align_icon: right
align_state: left
card_mod:
style: |
ha-card .header.flex .name.flex {
color: rgb(68, 115, 158);
}
ha-card .states.flex {
font-size: 13.5px;
}
ha-card .header.flex .icon {
color: orange;
}
ha-card .graph .graph__container .graph__labels {
color: rgb(68, 115, 158);
}
ha-card .states.flex::after {
content: "{{states('sensor.thermometre_chambre_agathe_digital_battery') | round(0)}} %" }};
{% if states('sensor.thermometre_chambre_agathe_digital_battery') < '20' %} background-color: rgba(255, 115, 158,0.4); {% else %} background-color: rgba(68, 115, 158,0.4); {% endif %}
white-space: pre;
padding: 2px 2px 0px 2px;
border-radius: 4px;
font-size: 9px;
}
ha-card {
margin: 0px -10px -30px -10px;
}
bonjour
En petit et sobre j’ai fait avec les cartes de base (un peu ma marotte, utiliser au maxi les fonctions natives)
decluttering_templates:
thermometer_card:
card:
type: custom:stack-in-card
mode: vertical
keep:
background: true
box-shadow: true
margin: true
outer_padding: false
cards:
- type: vertical-stack
cards:
- type: custom:button-card
template:
- ball_card
- no_style
- temperature_mini_card_state
show_name: true
entity: '[[temperature]]'
name: '[[name]]'
label: |
[[[ return (entity.state* 1).toFixed(1) +"°" ]]]
styles:
card:
- z-index: 1
- margin-bottom: 30px
- type: custom:button-card
template:
- badge_auto_card
- no_style
- humidity_mini_card_state
show_name: false
entity: '[[humidity]]'
label: |
[[[ return (entity.state* 1).toFixed(1) +"%" ]]]
styles:
card:
- z-index: 1
- margin: 0
- padding: 0 0 0 5px
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
padding: 0px;
margin-top: -85px;
background: transparent;
overflow: visble !important;
z-index: 0
}
height: 170
hours_to_show: 48
points_per_hour: 2
hour24: true
smoothing: true
line_width: 1
line_color:
- rgba(var(--orange-rgb),0.9)
- rgba(var(--blue-rgb),0.4)
decimals: 1
entities:
- entity: '[[temperature]]'
name: Température
show_legend: false
smoothing: true
y_axis: secondary
- entity: '[[humidity]]'
name: Humidité
show_legend: false
smoothing: true
show:
fill: true
graph: line
icon: false
name: false
state: false
labels: false
extrema: false
icon_adaptive_color: false
labels_secondary: false
Pour les button-card-templates, tu peux les retrouver sur mon Github:
- base
- ball_card
- badge_card
- badge_auto_card
- no_style
- temperature_mini_card_state
- humidity_mini_card_state
C’est bien , ça relance le sujet pour une demande de code
Logique, ce sujet apparait dans les derniers modifiés, alors la curiosité chatouille, un p’tit clic pour voir, et on balance une info si y’en a une nouvelle !
Bonjour, j’aime beaucoup j’essaye de reproduire mais je n’arrive absolument pas a faire la même chose
aurez vous le code a me faire parvenir s’il vous plaît
Déjà donné au dessus
hello un petit truc simple qui a un rendu sympa aussi :
type: custom:stack-in-card
mode: vertical
keep:
background: true
margin: true
outer_padding: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temp_0_ext_temperature
icon_color: pink
- type: entity
entity: sensor.temp_0_ext_humidity
icon_color: cyan
- type: entity
entity: sensor.temp_0_ext_battery
icon_color: amber
alignment: justify
- type: custom:mini-graph-card
height: 100
hours_to_show: 24
points_per_hour: 4
hour24: true
line_width: 4
line_color:
- crimson
- dodgerblue
decimals: 1
entities:
- entity: sensor.temp_0_ext_temperature
name: TEMP_EXT
show_legend: true
y_axis: secondary
- entity: sensor.temp_0_ext_humidity
name: Humidité
show_legend: true
show:
fill: true
graph: line
icon: true
name: true
state: true
labels: true
extrema: true
icon_adaptive_color: false
labels_secondary: true