Yes, I have the color stops working like you have, but it’s not what I want. 
I want not only the color to change, but also the scale.
Like this:
Have you find a solution ?
Good morning
I want to install icons to some of the entities but it doesn’t work, what are the errors in my configuration?
type: custom:flex-horseshoe-card
entities:
- entity: sensor.puissance_totale_pv
decimals: 0
unit: W
name: AXPERT MAX
- entity: sensor.production_totale_pv_daily
decimals: 1
unit: kWh
name: Jour
- entity: sensor.production_totale_pv_monthly
decimals: 1
unit: kWh
name: Mois
- entity: sensor.inverter_temperature
decimals: 0
unit: °C
name: Température
- entity: sensor.mode_solaire
name: Mode Solaire
icon: mdi:sun-angle-outline
- entity: sensor.onduleur_batt_volt
decimals: 1
unit: V
name: Batt Voltage
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 43
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 59
length: 30
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 47
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 52
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: start;
- id: 3
entity_index: 3
xpos: 5
ypos: 7
styles:
- font-size: 1.2em;
- text-anchor: start;
- id: 4
entity_index: 4
xpos: 70
ypos: 19
styles:
- font-size: 1.03em;
- text-anchor: end;
- id: 5
entity_index: 5
xpos: 97
ypos: 7
styles:
- font-size: 1.2em;
- text-anchor: end;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
- id: 1
entity_index: 1
xpos: 46
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: end;
- opacity: 0.7;
- id: 2
entity_index: 2
xpos: 54
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: start;
- opacity: 0.7;
horseshoe_scale:
min: 0
max: 3600
color_stops:
'0': '#4567EF'
'700': '#D82039'
'1500': '#DBD037'
'3000': '#17AC6B'
EDIT :
It works with these command lines :
icons:
- id: 4
xpos: 23
ypos: 32
entity_index: 4
icon_size: 2
I’m also looking as much to change text color depending on display condition values
I’m trying this but nothing happened:
template: >
[[[
if (states['sensor.mode_solaire'].state === 'mode solaire') {
return '<span style="color: green;">' + states['sensor.mode_solaire'].state + '</span>';
} else if (states['sensor.mode_solaire'].state === 'mode EDF') {
return '<span style="color: red;">' + states['sensor.mode_solaire'].state + '</span>';
} else {
return states['sensor.mode_solaire'].state;
}
]]]
EDIT : here is a solution that works for me
card_mod:
style:
.container:
.card--filter-none:
.datagroup: |
text:nth-of-type(8) .state__value {
{% if states('sensor.mode_solaire') == 'Mode Solaire' %}
fill: green !important;
{% else %}
fill: red !important;
{% endif %}
}
Thx
Hi. Elja
How do I upload a dashboard to Nest Hub?
I tried two different methods.
I firstly used the default casting method of Home Assistant.
That worked somewhat, but it kept needing restarts from my desktop pc to keep up.
Then I went with Continuously Casting Dashboards.
I’m happy with this solution so far.
It did take me some time to get it up and running. If you follow the information on the Github page, you should be able to get it working. If you have any questions, just let me know.
Is it possible to make a gauge with the center in the middle zero, like on the one below, and going negative value to the left, and positive value to the right with this card ?
If so, would someone have an example ?
Do not know solution but looking for the same …
Try this.
type: gauge
min: -40
max: 40
entity: sensor.tempest_st_00032986_temperature
severity:
green: 0
red: -40
needle: true
I love this card!
How is your intention to make a ‘flex card’ as I would need this card without the horseshoe, too.
Would appreciate any possibilities 
Hi, Is this (amazing) card still maintained/working? I’m trying to change the icons colors but I cannot make it working, also with the example you provide (with 2 lamps), here is my code:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.temperatura_camino
decimals: 0
name: Termocamino
unit: °C
tap_action:
action: none
- entity: switch.uscita_1_ricircolo_camino
name: ' ' #RICIRCOLO
icon: mdi:autorenew
tap_action: none
- entity: switch.uscita_2_valvola_deviatrice
name: ' ' #RADIATORI
icon: mdi:radiator
tap_action: none
- entity: switch.uscita_3_valvola_acqua_sanitari
name: ' ' #ACQUA SANITARI
icon: mdi:faucet
tap_action: none
- entity: input_boolean.allarme_termocamino
name: ' ' #ALLARME
icon: mdi:alert
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.allarme_termocamino
animations:
entity.4:
- state: 'on'
icons:
- animation_id: 40
styles:
- fill: orange;
- animation: flash 1s ease-in-out infinite;
- transform-origin: center;
- state: 'off'
icons:
- animation_id: 40
styles:
- fill: var(--primary-text-color);
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
uom_font_size: 1.5
styles:
- font-size: 4.5em;
- opacity: 0.9;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 30
styles:
- font-size: 1.2em;
- opacity: 0.7;
icons:
- id: 0
xpos: 20
ypos: 93
entity_index: 1
icon_size: 1.5
# styles:
# - color: var(--primary-text-color);
- id: 1
xpos: 50
ypos: 93
entity_index: 2
icon_size: 1.5
# styles:
# - color: var(--primary-text-color);
- id: 2
xpos: 80
ypos: 93
entity_index: 3
icon_size: 1.5
# styles:
# - color: var(--primary-text-color);
##### ALERT #####
- id: 3
animation_id: 40
xpos: 90
ypos: 10
entity_index: 4
icon_size: 1.5
styles:
- color: var(--primary-text-color);
show:
horseshoe_style: lineargradient #fixed
# scale_tickmarks: true
horseshoe_scale:
min: 0
max: 100
color: var(--primary-background-color)
#horseshoe_state:
# color: RED
color_stops:
'0': '#FFF6E3'
'10': '#FFE9B9'
'20': '#FFDA8A'
'30': '#FFCB5B'
'40': '#FFBF37'
'50': '#ffb414'
'60': '#FFAD12'
'70': '#FFA40E'
'80': '#FF9C0B'
'90': '#FF8C06'
style: |
@keyframes stroke { to { stroke-dashoffset: 0; } }
One additional question - I want to use dynamic color_stops from a sensor
Any idea how I could use a sensor instead of a fixed color
I found a relatively simple extendable alternative to the horseshoe card: GitHub - tagcashdev/hatc-gauge-card: Gauge améliorée pour Home Assistant
Works with card mod, config template card, restriction card, …
Seems much more performant also.
Example:
Does anyone happen to have example code for this cockpit view? I’m very interested for the conciseness for my layout, but I’m having a hard time figuring out how to make it work.
Did you get the code for this?
How can i get this design?
Thanks
Hi all
anyone here with a suddenly “Custom element doesn’t exist: flex-horseshoe-card” as I am facing ?
Edit: checking on chrome error log, I found:
Access to script at ‘https://unpkg.com/lit-html@^1.0.0?module’ from origin ‘[hidden]’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Followed by some occurrences of :
GET https://unpkg.com/lit-html@^1.0.0?module net::ERR_FAILED 520
I guess the issue comes from here, while not skilled to solve it/investigate further.
Thanks
1 Like
confirming I have it also… no solution yet. One thing I just did was update to HAOS 12.2 which was released this week. Not sure if its related or not, but that is the only change i’ve made…
Seems unpkg is down, thus leading to the error
has anyone tried downloading this lit-element module and placing it locally?
my dashboards are dead now…
It makes no sense at all that a remote resource is needed to render this card.
By(t)e