J’avoue ne pas comprendre a quoi sert ton dernier code que tu as posté ni comment ça marche.
J’ai mis à résolu ce qui m’a permis de mettre côte à côte les cartes.
1 « J'aime »
Tu as cet article qui est très complet sur les interfaces et comment les editer…
Un peu daté car certains aspects ont évolué (comme la notion de sections notamment apparue cette année…), mais globalement l’architecture a peu changé…
Bon, voici la dernière version : Je modifie la couleur de la flèche, le centrage et la couleur du titre, le la couleur du texte de la jauge / titre du texte de la jauge. J’utilise des constantes, enfin des variables dans Paramètres / Appareils et services / Entrées
A moins qu’il y ait mieux…
Reste un souci, lorsque la jauge se met à jour, le code suivant perd son effet (le fill reste valable, c’est le font-size qui pose problème)!
svg.text > .value-text {
font-size: {{ states("input_text.gauge_fontsize_value") }}px;
}
Le code complet :
type: custom:mod-card
square: false
card_mod:
style:
':first-child $': |
h1.card-header {
color: rgba(50,90,250,0.8) !important;
background-color: rgba(90,250,90,0.5);
text-align:center;
font-weight: {{ states("input_text.conso_title_font_width") }};
border-radius: 5px 5px 0px 0px;
}
.: |
ha-card {
border-top: 2px outset #F0F0FF;
border-left: 2px outset #F0F0F0;
border-bottom: 2px inset #F0F0FF;
border-right: 2px inset #F0F0FF;
background-color: rgba(60,80,250,0.05);
}
card:
title: Consommation Net
type: grid
square: false
columns: 2
style: ''
cards:
- type: gauge
name: Total
entity: sensor.envoy_122308022894_current_net_power_consumption
card_mod:
style:
ha-gauge:
$: |
svg > .needle {
fill: {{ states("input_text.gauge_color_needle") }} !important;
}
svg.text > .value-text {
fill: {{ states("input_text.gauge_color_value") }} !important;
font-size: {{ states("input_text.gauge_fontsize_value") }}px;
}
.: |
.name {
color: {{ states("input_text.gauge_color_title") }} !important;
}
ha-card {
background-color: rgba(60,255,250,0.1);
}
max: 4000
needle: true
segments:
- from: -5000
color: '#EB16FF'
- from: 0
color: '#47FF4D'
- from: 1000
color: '#EEFF32'
- from: 2000
color: '#FFA426'
- from: 3000
color: '#FF0037'
min: -1000
- type: vertical-stack
cards:
- type: gauge
name: Phase 1
entity: sensor.envoy_122308022894_current_net_power_consumption_l1
card_mod:
style:
ha-gauge:
$: |
svg > .needle {
fill: {{ states("input_text.gauge_color_needle") }} !important;
}
svg.text > .value-text {
fill: {{ states("input_text.gauge_color_value") }} !important;
font-size: {{ states("input_text.gauge_fontsize_value") }}px;
}
.: |
.name {
color: {{ states("input_text.gauge_color_title") }} !important;
}
ha-card {
background-color: rgba(60,255,250,0.1);
}
max: 3000
needle: true
segments:
- from: -5000
color: '#EB16FF'
- from: 0
color: '#47FF4D'
- from: 500
color: '#EEFF32'
- from: 1000
color: '#FFA426'
- from: 2000
color: '#FF0037'
min: -500
- type: gauge
name: Phase 2
entity: sensor.envoy_122308022894_current_net_power_consumption_l2
card_mod:
style:
ha-gauge:
$: |
svg > .needle {
fill: {{ states("input_text.gauge_color_needle") }} !important;
}
svg.text > .value-text {
fill: {{ states("input_text.gauge_color_value") }} !important;
font-size: {{ states("input_text.gauge_fontsize_value") }}px;
}
.: |
.name {
color: {{ states("input_text.gauge_color_title") }} !important;
}
ha-card {
background-color: rgba(60,255,250,0.1);
}
max: 3000
needle: true
segments:
- from: -5000
color: '#EB16FF'
- from: 0
color: '#47FF4D'
- from: 500
color: '#EEFF32'
- from: 1000
color: '#FFA426'
- from: 2000
color: '#FF0037'
min: -500
- type: gauge
name: Phase 3
entity: sensor.envoy_122308022894_current_net_power_consumption_l3
card_mod:
style:
ha-gauge:
$: |
svg > .needle {
fill: {{ states("input_text.gauge_color_needle") }} !important;
}
svg.text > .value-text {
fill: {{ states("input_text.gauge_color_value") }} !important;
font-size: {{ states("input_text.gauge_fontsize_value") }}px;
}
.: |
.name {
color: {{ states("input_text.gauge_color_title") }} !important;
}
ha-card {
background-color: rgba(60,255,250,0.1);
}
max: 3000
needle: true
segments:
- from: -5000
color: '#EB16FF'
- from: 0
color: '#47FF4D'
- from: 500
color: '#EEFF32'
- from: 1000
color: '#FFA426'
- from: 2000
color: '#FF0037'
min: -500
1 « J'aime »
Salut,
tu peux utiliser des templates dans card_mod. Au lieu d’utiliser une entité ( ton input_text ), passe par un template. Ça évite de créer des input_text.
exemple :
card_mod:
style: |
ha-state-icon {
{% if is_state('binary_sensor.0x00158d0007d49ec1_occupancy','off') %}
fill: green;
{% else %}
fill: red;
{% endif %}
}
Le but n’est pas de changer dynamiquement les couleurs. C’est de pouvoir changer à loisir les valeurs pour faire des tests de ce qui rend mieux, un peu comme un thème, une constante dans du code (je suis dev).
Si je veux changer l’aiguille, j’ai 3 cards qui contiennent chacun 4 jauges, c’est un peu chiant à faire de modifier partout, j’utilise donc cette façon de faire pour changer tout d’un coup.
Peut-être qu’un thème serait plus simple ou conviendrait mieux, je ne sais pas, je ne connais pas encore assez.