Yeah I used HACS for installation and did add the things to my yaml.
I can also get it working for some of the examples, so I just dont understand why some others dont 
I’ve received a couple of requests for the yaml pertaining to this particular card. I’m placing it here since it’s the most appropriate location for Flex Card discussions. A couple of things to note:
- I use custom:card-modder to set the background transparency. Custom:card-modder has been replaced (by custom:card-mod) but since it still works, I still use it.
- The bulk of the card is a Decluttering Template. If you don’t know what that is, it’s time to read up.
- All values that are encased within <> MUST be replaced with actual entities, attributes, or values. Otherwise, the card may not load.
- The entities list at the bottom of the Decluttering Card declaration can display any attribute you want, except for attributes derived from a Template. This is a limitation of FHC at the moment. If you are savvy enough, you might be able to work around the limitation using iantrich’s Template Card.
###############################################################################
#
# Card Declaration for dc_horseshoe_cpu_three_stats_layout. Put this part in your actual view.
#
# - type: custom:decluttering-card
# template: dc_horseshoe_cpu_three_stats_layout
# variables:
# - entity_id: <the_target_vm>
# - vm_name: <Whatever_name_you_want_displayed_on_the_card>
#
###############################################################################
decluttering_templates:
dc_horseshoe_cpu_three_stats_layout:
card:
type: custom:card-modder
style:
--paper-card-background-color: rgba(0, 0, 0, 0.0)
--ha-card-background: rgba(0, 0, 0, 0.0)
--ha-card-box-shadow: none
card:
type: custom:flex-horseshoe-card
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:
# States 0 refers to the first entity in the list, ie index 0
- id: 0
entity_index: 0
xpos: 50
ypos: 26
styles:
- font-size: 2em;
# States 1 refers to the second entity in the list, ie index 1
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
# States 2 refers to the third entity in the list, ie index 2
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
# Icons 0 refers to the second entity in the list, ie index 1
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
# Icons 1 refers to the third entity in the list, ie index 2
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
# Names 0 refers to the first entity in the list, ie index 0
- id: 0
entity_index: 0
xpos: 50
ypos: 95
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 36
styles:
- font-size: 1.0em;
show:
horseshoe_style: 'colorstopgradient'
# Scale set to -10 to +40 degrees celcius
horseshoe_scale:
min: 0
max: 100
# color stop list with two colors. With the `lineargradient` fill style, only the
# colors are used. The thresholds are ignored with this setting.
color_stops:
33: 'green'
66: 'yellow'
100: 'red'
entities:
- entity: '[[entity_id]]'
attribute: <your_entitys_attribute_name_goes_here>
decimals: 2
unit: '%'
area: CPU Usage
name: '[[vm_name]]'
icon: mdi:memory
- entity: '[[entity_id]]'
attribute: <your_entitys_attribute_name_goes_here>
decimals: 0
unit: 'MB'
name: RAM
icon: mdi:chip
- entity: '[[entity_id]]'
attribute: <your_entitys_attribute_name_goes_here>
decimals: 0
unit: 'GB'
name: Disk
icon: mdi:harddisk
4 Likes
Thank you for this awesome card.
Is there a way to add animation filtering based on attribute or is it already possible?
currently, icon color can be set based on sensor’s state like:
animations:
entity.1:
- state: 'on'
It would be awesome if icon color can be set based on one of entities attributes, something like:
animations:
entity.1:
- attribute: 'attribute_name'
state: 'attribute_state'
I have installed this card via HACS and can’t configure anything 
I’m trying to enter this code in “manual card”:
type: 'custom:flex-horseshoe-card'
entities:
- entity: sensor.temperature_158d0001b95611
area: Salon
- entity: sensor.humidity_158d0001b95611
- entity: sensor.illumination_158d0001e47fd
- entity: sensor.illumination_34ce008d4fd07
show:
horseshoe_style: lineargradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 3;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 3
entity_index: 3
xpos: 60
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
areas:
- id: 4
entity_index: 0
xpos: 50
ypos: 40
styles:
- font-size: 1.0em;
- opacity: 0.8;
horseshoe_scale:
min: 15
max: 40
color_stops:
'15': '#FFF6E3'
'17': '#FFE9B9'
'18': '#FFDA8A'
'20': '#FFCB5B'
'24': '#FFBF37'
'26': '#ffb414'
'28': '#FFAD12'
'30': '#FFA40E'
'32': '#FF9C0B'
'35': '#FF8C06'
but nothing is rendering
No card is showing. No preview.
My config begins with:
background: var(--background-image)
resources:
- type: module
url: /community_plugin/dual-gauge-card/dual-gauge-card.js
- type: js
url: /community_plugin/secondaryinfo-entity-row/secondaryinfo-entity-row.js
- type: module
url: /community_plugin/button-card/button-card.js
- type: js
url: /community_plugin/lovelace-card-tools/card-tools.js
- type: js
url: /community_plugin/flex-table-card/flex-table-card.js
- type: module
url: /community_plugin/flex-horseshoe-card/flex-horseshoe-card.js
Finally started using your card due to time shortage and a 3Dprinter that came by but this is really looking great, will this be updated to the github repo also?
From that issue, it looks like [email protected] has now been cleared in the unpkg cache so this may just need the cache in your browser to be cleared and probably a force reload for good measure.
In Chrome, if you have the developer tools open, you can hold down on the Reload button and select “Empty Cache and Hard Reload” to quickly do both.
A similar problem.
uncaught exception: community_plugin / flex-horseshoe-card / flex-horseshoe-card.js.
Home Assistant 0.101.2
would love to use these sometime. Will you be putting the config on your github? Thanks for this component, I look forward to trying it soon.
Does anyone know how to reduce the height of the card?
I want to cut off the marked aera.
Was working pretty well. But all of a sudden:
https://xx.xx.xx.xx:8123/community_plugin/flex-horseshoe-card/flex-horseshoe-card.js:1914:12 TypeError: inColor is undefined
Can someone help me out? I’m really loving the card. I am using it for my home electric and gas usage.
I am having trouble with ons of the sensors (sensor.hourly_gas_consumption). Sometimes the value of the sensor is unknown. When that happens the horseshoe for that specific sensor dissapears and Lovelace starts acting very strange on refresh. When I use another sensor with a value in the same code, the horseshoe works fine. Hope someone has some ideas?
Hi, I found your great card and love it 
Started with some basic, but are stuck on the ‘colorstopgradient’ fill type (also tested with only ‘colorstop’). According to a reply you made to another post, this should work, but it doesn’t.
It doesn’t seem to accept the colors specified in ‘horseshoe_scale:’ and only uses the last listing.
My final gold would be a gradient transition from dark blue, light blue, orange, green and ending with red based on temperatures from -10 to 30 degrees Celsius.
- type: 'custom:flex-horseshoe-card'
<<: *card_mod_transparent
entities:
- entity: sensor.bad_hytta_temperature
#sensor.royk_anneks_hytta_temperature
decimals: 1
unit: '°C'
area: Hytta
show:
horseshoe_style: 'colorstopgradient'
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 30
color_stops:
-10: 'blue'
-3: 'blue'
1: 'orange'
10: 'green'
16: 'red'
If I use only ‘colorstop’ it is still only red (last color in ‘horseshoe_scale’)
Am I doing something wrong, or is it a bug somewhere?
Is anyone else having issues with the flex-horseshoe-card not loading today? Mine have been working fine up until today, now I get Custom element doesn’t exist errors.
No changes have been made to my system, I’ve also tried uninstalling and reinstalling the plugin with no joy.
Yep, same. “Custom element doesn’t exist: flex-horseshoe-card”. Yesterday it was working fine. No changes made whatsoever…
Tried firefox, chrome, edge, ios app, all same. When using edge the logs show “/lovelace/default_view:1:1 Expected identifier, string or number”
UPDATE: It is resolved by itself, again by doing nothing…
1 Like
Yeah just checked mine again and it’s working as before, as you say by doing nothing.
I already opened an issue on Github but I did not get an answer yet so I thought I try it here.
I installed the card via HACS, added the URL to the lovelace resources and copied the basic example. All I see is “No horseshoe scale defined”. After removing various elements to see if other messages show up, I ended with this:
- type: 'custom:flex-horseshoe-card'
entities:
- entity: weather.dark_sky
attribute: temperature
decimals: 1
unit: °C
area: De Maan
layout:
horseshoe_scale:
min: -10
max: 40
I tried all kinds of combinations but it always goes back to this message. I am not using the declutter card.
Any ideas what is going wrong here?
In case you’re still struggling with this I think I can see what’s wrong…
It looks to me like your yaml indentation is incorrect, layout should be in line with horseshoe_scale.
Also, some of the sections you have now removed are required for the card to function correctly (i.e everything inside the layout section like areas, names or states) so resolving the first issue alone will not suffice.
I think you will probably be better of starting again with a different example from the Github repo - I would suggest copying the code directly from the raw version of the official example yaml file to avoid indentation problems. This can be found here.
This is because I had a very similar issues after copying the example from the Github readme page, copying the code from the raw example instead instantly fixed it for me!
Thanks Jim. Now I don’t have that error any more. Instead I have… nothing! Absolutely nothing… I created a test tab and placed only one card on it. Or at least I intended to but nothing shows up. The tab is empty except for the badge.
Here is the extract from the lovelace raw editor:
- title: Test
path: test
badges:
- entity: sensor.dark_sky_apparent_temperature
cards:
- type: 'custom:flex-horseshoe-card'
entities:
- entity: weather.dark_sky
attribute: temperature
decimals: 1
area: De Maan
unit: °C
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 40
color_stops:
'10': red
'18': blue
One thing that I noticed is that the editor removed the quotes around ‘°C’ and around ‘lineargradient’ and changed the quotes in ‘color_stops:’ from 10: ‘red’ to ‘10’: red. I tried to correct that several times but every time I click on save it puts the quotes back again. Is that “normal”?
For testing purposes I removed the color_stop entries and the scale entries and then I get error messages. So the card as such is there but it does not show any content. Did I miss anything else?