Bonjour,
Pour mon dashboard « météo » et me sensor netatmo, j’aimerais savoir si on peut créer des « jauges » droites comme sur les captures avec des zones de couleurs et des « légendes » pour le bon, mauvais etc… Le mien et max…
L’idée serait de superposer plusieurs jauges pour des zones différentes et peut-être aussi des courbes
Merci pour vos avis et aide
Bonjour,
As-tu testé la bar-card de HACS ?
Oui, c’est faisable avec custom:button-card. Il suffit d’un custom_fields pour la barre horizontale, un pour le curseur, etc. en fonction de ce que tu veux afficher
Bonjour,
tu as cette carte :
tu as un sujet sur cette carte si besoin :
Je voudrais vraiment reproduire exactement cela et en faire plusieurs pour différents capteurs
J’ai installé cette carte
Que j’ai mis dans une nouvelle page labo de mon aperçu
mais après comment reproduire ça
Je n’ai clairement pas encore les compétences
Tu ne pourras pas reproduire pareil avec cette carte. Il faut voir ce que peut te proposer @btncrd avec button-card.
Ça marche, je vais regarder avec button card
Le code :
type: custom:button-card
entity: sensor.salle_a_manger_climatisation_ble_humidity
name: Humidité intérieure
show_state: false
show_icon: false
show_name: false
custom_fields:
icon:
card:
type: custom:button-card
icon: mdi:water-outline
styles:
card:
- aspect-ratio: 1/1
- width: 60px
- padding: 0
- border: none
- border-radius: 0
- background: none
icon:
- width: 100%
- color: white
name:
card:
type: custom:button-card
name: "Humidité extérieure"
styles:
card:
- width: 200px
- padding: 0
- border: none
- border-radius: 0
- background: none
name:
- font-size: 1.4rem
- align-self: start
- justify-self: start
- color: white
- font-weight: 500
value:
card:
type: custom:button-card
entity: sensor.salle_a_manger_climatisation_ble_humidity
show_name: false
show_icon: false
show_state: true
state_display: |
[[[
return parseFloat(entity.state).toFixed(1);
]]]
styles:
card:
- width: 200px
- padding: 0
- border: none
- border-radius: 0
- background: none
state:
- color: white
- font-size: 2.5rem
- font-weight: 800
unit:
card:
type: custom:button-card
name: "%"
styles:
card:
- width: auto
- padding: 0
- border: none
- border-radius: 0
- background: none
name:
- font-size: 1.4rem
- align-self: start
- justify-self: start
- color: rgba(167,176,205,1.0)
- font-weight: 800
min_val:
card:
type: custom:button-card
name: "0"
styles:
card:
- width: auto
- padding: 0
- border: none
- border-radius: 0
- background: none
name:
- font-size: 1.0rem
- align-self: start
- justify-self: start
- color: rgba(167,176,205,1.0)
- font-weight: 400
max_val:
card:
type: custom:button-card
name: "100"
styles:
card:
- width: auto
- padding: 0
- border: none
- border-radius: 0
- background: none
name:
- font-size: 1.0rem
- align-self: start
- justify-self: start
- color: rgba(167,176,205,1.0)
- font-weight: 400
bar:
card:
type: custom:button-card
show_name: false
show_icon: false
show_state: false
styles:
card:
- height: 12px
- width: 380px
- border-radius: 999px
- padding: 0px
- background: >-
linear-gradient(to right, rgba(253,75,63,1.0) 0%,
rgba(252,133,33,1.0) 5%, rgba(251,205,47,1.0) 15%,
rgba(51,210,92,1.0) 50%, rgba(251,205,47,1.0) 85%,
rgba(252,133,33,1.0) 95%, rgba(253,75,63,1.0) 100%)
cursor:
card:
type: custom:button-card
show_name: false
show_icon: false
show_state: false
styles:
card:
- width: 16px
- height: 32px
- border-radius: 999px
- border: 4px solid
- background-color: |
[[[
const h = Number(entity.state) || 0;
if (h <= 20) return "rgba(253,75,63,1.0)";
if (h <= 30) return "rgba(252,133,33,1.0)";
if (h <= 40) return "rgba(251,205,47,1.0)";
if (h <= 60) return "rgba(51,210,92,1.0)";
if (h <= 70) return "rgba(251,205,47,1.0)";
if (h <= 80) return "rgba(252,133,33,1.0)";
return "rgba(253,75,63,1.0)";
]]]
styles:
card:
- background-color: "#2A2D36"
- aspect-ratio: 2/1
custom_fields:
icon:
- position: absolute
- top: 3%
name:
- position: absolute
- top: 10%
- left: 15%
value:
- position: absolute
- left: 50%
- top: 43%
- transform: translate(-50%, -50%)
unit:
- position: absolute
- left: 60%
- top: 46%
- padding-left: 1%
- transform: translate(-50%, -50%)
min_val:
- position: absolute
- bottom: 28%
- left: 9%
max_val:
- position: absolute
- bottom: 28%
- right: 9%
bar:
- position: absolute
- left: 50%
- top: 60%
- transform: translate(-50%, -50%)
cursor:
- position: absolute
- top: "[[[ return 'calc(60% - 16px)'; ]]]"
- left: |
[[[
const h = Number(entity.state) || 0;
return `calc(${Math.max(0, Math.min(100, h))}% - 5px)`;
]]]
Ca fait beaucoup de lignes de code mais absolument tous les éléments sont configurables à ta guise. Il faut encore que j’ajoute une « étiquette » en bas au centre
wahou mais c’est trop bien je vais essayer de regarder le code pour adapter pour la température etc les zones, tu crois qu’on peut aussi récupérer les mins et max et faire une bulle comme le excellent ?
Merci beaucoup pour l’aide, qu’est-ce que j’aimerais apprendre le code et bien le comprendre.
Je crois que j’avais réussi à trouver les valeurs sur le site de netatmo des niveaux je vais essayer de les retrouver.
Je viens de retrouver pour le CO2 :
Je vais essayer de trouver pour les températures et l’humidité
Je travaille dessus 
mais il faut que je sache quoi mettre si l’humidité est un peu trop faible, trop faible, beaucoup trop faible ou un peu trop importante, trop importante ou beaucoup trop importante…
Oui nos messages ce sont croisés, merci c’est vraiment hyper sympa d’avoir autant d’aide sur ce forum
Voilà une capture qui devrait pouvoir un peu aider pour l’humidité
https://helpcenter.netatmo.com/hc/fr/articles/17031952548498-Hygromètre
Tu ne sais pas ce qu’il y a quand on clique sur « Plus d’information » ?
si c’est ce lien là :
https://helpcenter.netatmo.com/hc/fr/articles/17031952548498-Hygromètre
je chercher à voir s’il y a un tableau comme pour le c02
Je vais déjà faire un exemple pour le CO2
Deux entités à changer et voila, bravo @btncrd, je la mets dans mes petites cartes en attente:
J’ai essayé mais le bouton dépasse la barre et j’aimerais que ce soit beaucoup plus compact, un peu comme les lignes au dessus, pour en visualiser plusieurs en même temps 
tu pourrais dans le code m’indiquer à quoi sert chaque chose avec des commentaire :
###espace exemple###
je ne sais pas si c’est possible ?
Comme ça j’essaie de le faire
Merci
Peut être déjà lire l’excellent article de @btncrd aussi non?
Merci, c’est génial je vais lire cet article
