Tu utilises ‹ sensor.capteur_temp_1_temperature › et aussi ‹ sensor.capteur_temperature_1_temperature ›, c’est l’entité qu’il faut utiliser, tu n’as sans doute pas mis toute la carte à jour avec tes entités !
Bob
Tu utilises ‹ sensor.capteur_temp_1_temperature › et aussi ‹ sensor.capteur_temperature_1_temperature ›, c’est l’entité qu’il faut utiliser, tu n’as sans doute pas mis toute la carte à jour avec tes entités !
Bob
Merci BOB! Je vais tester ce soir
Bonjour @herveaurel,
Oui pour finaliser ma carte je me suis inspiré de ta mise en forme.
Pour la petite histoire, je me suis tout d’abord inspiré de ça, trouvé sur le forum anglophone lorsque je cherchais à comprendre le fonctionnement d’Apexcharts :
Ce qui m’avait donné ma V1 en recollant les morceaux et les cartes :
Puis et malheureusement seulement après, j’ai découvert le forum francophone, puis ce sujet et enfin le post que tu précises. Ce qui m’a beaucoup aidé à finaliser la mise en forme et améliorer grandement le code pour obtenir la version que j’utilise actuellement :
Donc en partant initialement d’une page blanche, j’ai fini par obtenir quelque chose de similaire à ton travail, que j’ai découvert beaucoup trop tard car ça m’aurait fait économiser un temps monstrueux.
J’en profite du coup pour te remercier d’avoir partager cela, et m’excuser de ne pas t’avoir crédité dans mon post initial, ce que je vais faire de ce pas !
Bonjour @Integra
J’utilise cette carte qui est vraiment sympa sur laquelle j’ai ajouté une info supplémentaire « link quality ».
Mon problème est que je n’arrive pas a aligner verticalement cette info avec celle de la jauge batterie, ce qui serai plus cohérent.
Merci d’avance pour votre aide…
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
header:
title: Température Chambre 1
standard_format: true
show: true
show_states: false
colorize_states: true
series:
- entity: sensor.z2m_capteur_snzb_ch1_temperature
max: 40
color: "#00FF00"
show:
legend_value: false
- entity: sensor.z2m_capteur_snzb_ch1_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:
type: vertical
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.z2m_capteur_snzb_ch1_temperature
size: 6%
icon: mdi:bed-king
show_state: false
show_name: false
label: Chambre Ch1
show_label: false
styles:
grid:
- grid-template-areas: "\"link\" \"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-right: 220px
link:
- padding-left: 220px
custom_fields:
temp: >
[[[ var temp = states['sensor.z2m_capteur_snzb_ch1_temperature' ].state;
return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: #7dc8ff ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.z2m_capteur_snzb_ch1_humidity' ].state;
return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: |
[[[ var battery = states['sensor.z2m_capteur_snzb_ch1_battery' ].state;
if (states['sensor.z2m_capteur_snzb_ch1_battery'].state >= 70) return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>` + battery + '%';
if (states['sensor.z2m_capteur_snzb_ch1_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>` + battery + '%';
if (states['sensor.z2m_capteur_snzb_ch1_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>` + battery + '%'; ]]]
link: >
[[[ var link = states['sensor.z2m_capteur_snzb_sejour_linkquality'
].state; return `<ha-icon
icon="mdi:signal"
style="width: 20px; height: 20px; color: #7dc8ff ">
</ha-icon>` + link + ' lqi'; ]]]
card_mod:
style: |
ha-card {
margin-top: -200px;
background: none;
box-shadow: none;
border: none;
}
dans le styles et custom_filed de ton link
enlève le padding-left et utilisa ça a la place :
- position: absolute
- left: 8%
- top: 6%
et tu règle avec top et left l’emplacement exacte ou tu le veux.
c’est chouette , j’aime beaucoup avec le cercle de confort coloré, vas falloir que je creuse
Sinon en beaucoup plus light : des badges.
les couleurs de fond désignent la pièce (je n’ai pas réussi , pour le moment, à afficher son nom au dessus de la valeur) et j’essaie aussi de changer la couleur de la valeur suivant celle-ci (entre autre en dessous de zéro pour l’extérieur, pour le moment c’est fixe).
Pour afficher le nom tu peux essayer les badges mushroom disponibles sur HACS. C’est pratiquement le même design mais tu peux prendre le contrôle à 100% sur les affichages.
Et avec un template tu peux mettre les deux valeurs sur la même ligne si tu veux…
mes badges sont des ‹ mushroom-chips › et ça doit être un probème de nom ou de syntaxe parce que (voir dessous) ça ne marche pas;
Pire si j’essaie de jouer sur la couleur du texte ça me fout en l’air le background (jardin_temperature)
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.t_h_salon_temperature
primary: Salon
icon_color: red
use_entity_picture: true
unit: "%"
card_mod:
style: |
ha-card {
--chip-background: rgba(230, 50, 20, 0.5);
- type: entity
entity: sensor.t_h_salon_humidite
name: Salon
icon_color: light-blue
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(230, 50, 20, 0.5);
--text-color: rgba(128, 255, 255, 1);
}
- type: entity
entity: sensor.t_h_chambre_temperature
name: T_Chambre
icon_color: deep-purple
use_entity_picture: false
card_mod:
style: |
ha-card {
--chip-background: rgba(256, 180, 60, 0.5);
--text-color: rgba(0, 64, 30, 1);
}
- type: entity
entity: sensor.t_h_chambre_humidite
name: H_Chambre
icon_color: light-blue
card_mod:
style: |
ha-card {
--chip-background: rgba(256, 180, 60, 0.5);
--text-color: rgba(128, 255, 64, 1);
}
- type: entity
entity: sensor.capteur_t_h_jardin_temperature
name: T_Jardin
icon_color: green
card_mod:
style: |
ha-card {
--chip-background: rgba(189, 256, 150, 0.4);
{% set entity = 'sensor.capteur_t_h_jardin_temperature_h_jardin_temperature' %}
{% if is_state(entity | float < 0 %}
--text-color: red;
{% elif is_state(entity,'Jaune') %}
--text-color: yellow;
{% elif is_state(entity,'Orange') %}
--text-color: orange;
{% else %}
--text-color: black;
{% endif %}
- type: entity
entity: sensor.capteur_t_h_jardin_humidite
name: H_Jardin
icon_color: blue
card_mod:
style: |
ha-card {
--chip-background: rgba(189, 256, 150, 0.4);
--text-color: rgba(128, 255, 64, 1);
}
Bonjour @Dynaloo,
Ça rend bien comme ça et merci à @WarC0zes pour la solution !
Pour info le problème venait initialement de la ligne :
- grid-template-areas: "\"link\" \"battery\" \"i\" \"l\" \"temp\" \"hum\""
qui place tous les custom fields une ligne après l’autre.
La solution proposée par @WarC0zes est idéale car elle joue sur des réglages de carte en pourcentage et non en pixel précis (« px » comme pour le padding). Et donc lorsque l’on change d’écran la carte s’adapte bien mieux (PC <> smartphone par exemple).
Dans l’idéal, il faudrait appliquer cette même logique au style du custom field « Battery » pour qu’il ne dépende plus d’un placement en pixel mais en % sur la carte, pour éviter des bugs d’affichage entre différentes résolutions.
Bonjour @Integra
J’ai en effet appliquer cette même logique au style du custom field « Battery »
Et, pour info, je n’ai aucun problème d’affichage sur mon smartphone.
C’est parfait
Bonjour @Dynaloo ,
j’aime beaucoup ton affichage de température et je me suis permis de le reprendre, par contre, je n’arrive pas à le faire avec les paramètres cité par WarC0zes (en absolute), j’ai certains éléments qui se décalent.
Est-ce que tu pourrais partager ta carte svp ?
Aussi, tu penses qu’on pourrait réduire la largeur de l’ensemble pour ne pas faire trop large si j’en mets plusieurs cote à cote ?
Merci
Fabrice
J’ai abandonné quasi toutes mes cartes custom (sauf pour mes pièces : Mushroom) car je n’ai plus de temps à consacrer à la customisation, et je souhaitais un dashboard le plus léger et réactif possible.
Mon lovelace est passé de 40,000 à 9000 lignes.
Pour les cartes températures / humidité : idem.
Que des cartes natives, avec un code couleur pour me repairer facilement sur le graph.
Exemple la colonne température :
Je comprends tout à fait, parfois je passe trop de temps sur la maintenance de mes cartes custom suite à une maj. Ton rendu est simple mais clair
Bonne idée d’associer les couleurs des pièces aux graphes
Par curiosité, quelle carte native as-tu utilisé pour le graphe multi couleur stp ?
et à quoi correspond la valeur Etage : 20.0°c ? c’est une moyenne des pièces de l’étage ?
Merci
@herveaurel je suis en train de penser comme toi.
Ton rendu est vraiment excellent
Tu veux bien partager ton code s’il te plaît ?
Y’a rien de sorcier : carte Tuile de base, et carte graph de base.
Vraiment rien de compliqué
(je suis au centre de permis, mon fils passe son permis dans quelques minutes )
Carte titre
Carte Tile
Carte statistics-graph
Oui j’ai créé un sensor pour faire la moyenne des temp.
Bonjour @savfab
Je te joins mon code pour cette carte, ça fonctionne très bien chez moi.
Par contre je ne pourrai pas d’aider pour la réduire en largeur, peut être en utilisant une carte grille !!!
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
header:
title: Température Salon / Cuisine
standard_format: true
show: true
show_states: false
colorize_states: true
series:
- entity: sensor.z2m_capteur_snzb_sejour_temperature
max: 40
color: "#00FF00"
show:
legend_value: false
- entity: sensor.z2m_capteur_snzb_sejour_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:
type: vertical
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.z2m_capteur_snzb_sejour_temperature
size: 6%
icon: mdi:sofa
show_state: false
show_name: false
label: Chambre Ch1
show_label: false
styles:
grid:
- grid-template-areas: "\"link\" \"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:
- position: absolute
- left: 8%
- top: 6%
link:
- position: absolute
- left: 80%
- top: 6%
custom_fields:
temp: >
[[[ var temp = states['sensor.z2m_capteur_snzb_sejour_temperature'
].state; return `<ha-icon
icon="mdi:thermometer"
style="width: 20px; height: 20px; color: #f84c27 ">
</ha-icon>` + temp + '°'; ]]]
hum: >
[[[ var hum = states['sensor.z2m_capteur_snzb_sejour_humidity' ].state;
return `<ha-icon
icon="mdi:water"
style="width: 15px; height: 15px; color: #7dc8ff ">
</ha-icon>` + hum + '%'; ]]]
battery: >
[[[ var battery = states['sensor.z2m_capteur_snzb_sejour_battery'
].state;
if (states['sensor.z2m_capteur_snzb_sejour_battery'].state >= 70) return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px; color: green ">
</ha-icon>` + battery + '%';
if (states['sensor.z2m_capteur_snzb_sejour_battery'].state >= 20) return `<ha-icon
icon="mdi:battery-50"
style="width: 20px; height: 20px; color: orange ">
</ha-icon>` + battery + '%';
if (states['sensor.z2m_capteur_snzb_sejour_battery'].state >= 1) return `<ha-icon
icon="mdi:battery-10"
style="width: 20px; height: 20px; color: red ">
</ha-icon>` + battery + '%'; ]]]
link: >
[[[ var link = states['sensor.z2m_capteur_snzb_sejour_linkquality'
].state; return `<ha-icon
icon="mdi:signal"
style="width: 20px; height: 20px; color: #7dc8ff ">
</ha-icon>` + link + ' lqi'; ]]]
card_mod:
style: |
ha-card {
margin-top: -160px;
background: none;
box-shadow: none;
border: none;
}
- type: entities
entities:
- entity: sensor.z2m_capteur_snzb_sejour_last_seen
name: " Last seen"
card_mod:
style: |
ha-card {
margin-top: -40px;
background: none;
box-shadow: none;
border: none;
}
Bonsoir,
Tout pareil @herveaurel, j’ai vu beaucoup de tes belles créations mais je reste dans le standard qui s’améliore beaucoup avec les tuiles, je préfère peaufiner les automatisations et fonctionnalités que le look qui me convient bien de base.
Bob