I think I’ve found a case where the card fails to load. The built-in Synology integration provides a sensor whose value is the system uptime in Days, Hours, and Minutes combined.
If I attempt to use this entity as declared below, the card fails to load. Thoughts?
entities:
- entity: sensor.synology_uptime
area: Uptime
name: VM0
icon: mdi:memory
where did you find this? I can’t see it in the Synology DSM - Home Assistant, and I don’t have another built-in Synology in the integrations page?
Nope, you are looking for the show.horseshoe option. Set this one to false, and 
Is that a value or a string? If it is a string I guess it won’t load as a sensor, but if this is a float (value), it should work…
In other news, some experiments in progress 
The cockpit view:
and some other view with more partial segmented arcs and horizontal bars.
The simple bars (vertical and horizontal lines) show the historic data over 24 hours. Data is fetched every 5 minutes at this moment.
In its early stages, full of annoying and hard to find bugs, but (of course) fully defined in yaml.
I personally already like the cockpit view with 3 sensors 
Thanks to @Mariusthvdb, I’ve realized I confused the synologydsm component with a custom SNMP sensor I borrowed from someone else (I believe it was petro). I won’t pretend that I know what is going on in that value template other than I know it works. 
. That said, this is how I am getting the aforementioned output.
- platform: snmp
host: !secret synology_host
community: !secret synology_snmp
version: !secret snmp_version
name: Synology Uptime
baseoid: 1.3.6.1.2.1.25.1.1.0
value_template: >
{%- set time = value | int // 100 %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}min'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}hr '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }}
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'
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:
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 
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):
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:
###############################################################################
#
# 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
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'