Regarding show.horseshoe, I donāt think this has been added to the github documentation page. Am I wrong?
No you are right. It was only added to the release notes 
, as a āhiddenā feature.
@AmoebeLabs - To follow up, I think my previously reported string issue is actually an issue where flex-horseshoe wont display the value of an entity if it is derived from a value_template within a Template Sensor.
Take a look at the screenshot below. Do you see how the Storage value is missing? Similar to the aforementioned SNMP value, the Storage value is derived by a calculation done within a value template, or in this case adding the total storage of two separate entities within a Template Sensor (included below). The output in this case is far less complex than my previous example. Is it possible that flex-horsehoe doesnāt properly support value_templates?
Side Note - THANK YOU!!! Iām loving what can be done with this card!
esxi_vm0_datastore1_total_capacity:
friendly_name: 'VM0 Used Disk Space - Datastore 1'
value_template: "{{ states['sensor.esxi_datastore_datastore1'].attributes.total_space_gb + states['sensor.esxi_datastore_vms_datastore'].attributes.total_space_gb | round () }}"
unit_of_measurement: 'GBs'
1 Like
Thanx for that great screenshot 
I have never worked with value_templates and/or template sensors, so it might be the case that the horseshoe doesnāt support them. I never thought that these are different from ordinary sensors, so never bothered to check those situations.
I guess I have to look into that 
You donāt get errors in the log btw as a hint for what is going wrong??
Nice! Now I see what youāre making, I understand the question about disabling the horseshoe and have a free-format card. I really like this view you have made. The other parts are other cards I presume?
In that case you will like my new experiments I guess. The next example has 14 states, 7 names, 14 segmented arcs, 2 icons, 7 lines and 1 area on the card. It needs 600 lines of yaml to define & place every object 
Sidenote 1: text is a bit small on a mobileā¦
Sidenote 2: you can see the bugs in the arcs on the 71% humidityā¦
Sidenote 3: with a lot of copy/paste it was 10-15 minutes of work to create this cardā¦
And an example with only two sensors, with actual and historic data:
6 Likes
I tried almost everything and I canāt see why it just donāt wanna work 
No Card type? Butā¦why ?
Fixing bugs by making examples.
Probably not the right way, but it works and keeps the creativity going
Variant on 3, but now readable. Looks like my racetrack when I was 5 yrs oldā¦
Another view with arcs and barsā¦
Circling the earth 
3 Likes
That error can be caused by many settings.
You could look at this thread. It discusses yaml mode, adding custom cards to your resources.yaml and more:
I assume you used HACS to install the horseshoe card?
Then you have to include it into your resources.yaml (assuming yaml mode for lovelace).
You have to restart hass in order for hass to recognize the new resource.
I was wondering whether there is a way to have the background of the inside of the horseshoe use a different colour than the outside and, if not, whether this could be added as a feature? This would be useful for creating an old fashioned gauge style appearance, something like this (mocked up):
Nice mockup
I can add a background color, which would be a circle as your mockup shows.
However, the shadows as currently implemented - and shown in the mockup - wonāt work anymore, as the shadows only work on the complete SVG elements: everything in the circle will become āflatā.
As you can see, the original global filter (with the light colored drop shadow) is completely gone in the inside of the horseshoe.
In the next screenshot Iāve added some hard-coded SVG filters on several objects.
Also, drop shadows donāt work out of the box on lines as you also see.
But, yes it can be done.
If you donāt want the shadows, adding a setting for the background should not be that difficult. If you do want the shadows, it is more work to implement and configure.
Let me know what you prefer!
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.