Greetings to the whole community.
I’m opening this post, even just for an idea from someone who certainly understands more than me. Hoping it is possible to resolve this request of mine.
Here are the two components in question.
flex-horseshoe-card
config-template-card
I really like the “horseshoe card” component and even if it’s a little dated, when I tried it I don’t think there are any problems.
Here is an example that displays the instantaneous electrical power measured and, following, the related yaml:
type: custom:config-template-card
variables:
MAX: states['sensor.potenza_totale'].state
LV1: states['sensor.potenza_totale_10'].state
LV2: states['sensor.potenza_totale_90'].state
LIV:
'60': '#FF8C06'
'120': '#FFF6E3'
entities:
- sensor.potenza_non_misurata
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.potenza_non_misurata
decimals: 2
unit: W
name: Altro
- entity: sensor.energia_non_misurata_giornaliera
decimals: 2
icon: mdi:gauge-full
unit: Kwh
show:
horseshoe_style: lineargradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 2.2em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-weight: bold;
- font-size: 1.8em;
horseshoe_scale:
min: 0
max: ${MAX}
color_stops:
'60': '#FF8C06'
'120': '#FFF6E3'
What I would like to be able to do, with the “config-template-card” component, is replace the color_stops values of the “flex-horseshoe-card” component with the variables created with the component “config-template-card”.
The parts of code that are of interest are
.......
variables:
MAX: states['sensor.potenza_totale'].state
LV1: states['sensor.potenza_totale_10'].state
LV2: states['sensor.potenza_totale_90'].state
LIV:
'60': '#FF8C06'
'120': '#FFF6E3'
........
........
color_stops:
'60': '#FF8C06'
'120': '#FFF6E3'
if I modify color_stops like this:
color_stops:
${LIV}
the “flex-horseshoe-card” component works regularly, and takes the values of the LIV variable
What I can’t do is something like this:
color_stops:
${LV1}: '#FF8C06'
${LV2}: '#FF8C06'
so “flex-horseshoe-card” becomes
and, on chrome developer tools I see
I’ve also done other tests but I’m stuck…yet there should be a way, a hint, color_stops should be an array/vector…or maybe not…it can’t be done
Thanks anyway.