I think prefer the version with the drop shadows, but the version without would also be OK if it will be easier to implement.
It can be a two step implementation.
If I first add the ability to color the background, and then figure out how to implement the per item dropshadows you can at least use the background…
Will add two issues in Github for easy tracking.
I’ve actually worked out a way of doing this without needing changes to the card. I have card-mod installed, and using this I was able to apply a background to the card like this:
- type: 'custom:flex-horseshoe-card'
style: |
ha-card {
background-image: url("/local/horseshoe-background2.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
... rest of card config here
The only other thing to do was to set the fill style of the text items and the stroke style of the lines to a dark colour, so there won’t be a problem if it is used with a dark theme. With some other tweaking for the layout, this is what my system monitor card now looks like:
Here is the image I used for the background (it has a transparent background so the background colour of the card shows through):
5 Likes
Looks nice that black & white look!
And you have been creative. This card needs that 
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