Lovelace: Flexible Horseshoe Card (Donut graph, flexible layout, multiple entities, actions & animations), including next-gen experimental examples

Add this git as a custom repo in HACS:

Remove the old Flexible Horseshoe Card. Make sure any files from your first installation are completely removed from your www-folder. Then install the new flex-horseshoe-card from the added repo.

Add:

 tap_action:
   action: more-info

To every entity in you entities configuration

Add something like ?v=1 to the flex-horseshoe-card reference in your lovelace.yaml

Restart HomeAssistant

That should do it…

2 Likes

Ok, working fine now. Thanks.
Another question, i want a gradient transition from dark blue, light blue, orange, green and ending with red based on temperatures from -10 to 30 degrees Celsius.
I use color_stops:
-10: ‘blue’
-3: ‘blue’
1: ‘orange’
10: ‘green’
16: ‘red’
But have a gradient from blue to red, no orange and no green. Why?

1 Like

mode lineargradient doesnt look-up state value. You have to use colorstopgradient for that. That being said i am trying tot get a gradient for temperature sensors but it doesnt seem to work anymore. The color is alright based upon the value but there is none (or almost none) gradient. Maybe something to do with a update from home assistant and the card not being updated by the original maker. I hope someone will improve this card futher because it sure has enough potential.

HA 0.110.3. Is it just me or you all having this icon scale problem on IOS app and mobile browsers?

Hello!
Yesterday this beautiful card stopped working, but only from the computer. It does not work with Chrome, nor does Firefox. Ctrl-F5 doesn’t solve it either. Nor on computers that have never previously connected. However, it still works on the tablet and on my mobile, using WallPanel. I have uninstalled and reinstalled using HACS. I’ve also added “? V = 1” in resources, but nothing solves it. Any ideas?

The error is ‘Custom element doesn’t exist: flex-horseshoe-card.’
Thanks in advance

1 Like

Same problem, but for me stop working only on Chrome e Edge, but working on Firefox and Android mobile phone. CLear cache of chrome not solve. Any ideas?

1 Like

Same here… stopped working on chrome yesterday but now its no longer working anywhere (Android, mobile app…)

What happened?

EDIT: Use this repo and its working again… THANKS!!

Hey folks.
It looks like author, @AmoebeLabs of this great thing has not been active since some time.
Can someone know how to create something similiar to racetrack variant? :slight_smile:

Another problem today, after yesterday upgraded hassio to 0.11.4. Card not showing, i see only [object] [Object].
Thanks

Same here, broken since yesterday… Very strange, i have installed .0.111.4 days ago…

Yes, mine are broken as well. And I’ve got no clue as to whats the issue. I’ve got no errors in the console, and it also doen’t seem to be related to an update.

I’m seeing the same error since yesterday morning as well. Interestingly, I was running 0.111.1 still (now updated) when it happened so it doesn’t appear to be related to the update.

I don’t think it’s a problem with updating home assistant. The day I updated everything worked, the next day this error came out.

My wall mounted tablet hasn’t refreshed in days and is still working… Very strange. I really like this card but it seems support and development is gone…

I can confirm it is not a Home Assistant or Chrome update related issue. I have tested on my dev box running 0.110 as well as using a version of Chrome from before the card broke.

Got it working again. There was something wrong with the CDN used for importing the litelement. If you update from my repo it should work.

I’m not seeing the change in your repo yet, but I changed the import back to the original from unpkg and it is now working.

0.111.4 not work . 0.106.x-compatibility

For me not working with update repo. “Cannot add property tap_action, object is not extensible”

You need to be running the 0.106.x compatibility branch: 0.106.x-compatibility.

Then change line 23 of flex-horseshoe-card.js from this:

} from "https://cdn.pika.dev/lit-element";

To this:

} from "https://unpkg.com/[email protected]/lit-element.js?module";

Make sure to remove the flex-horseshoe-card.js.gz file if you are using HACS, clear your cache, and all should be working.