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?
Hmm, I can confirm the code you posted above is now fine and is working for me. The behavior youâre experiencing with the quotation marks is perfectly normal - it just looks a little bizarre!
No idea why itâs not working for you though. Iâd probably start by restarting Home Assistant and then reinstalling the horseshoe card again - if restarting doesnât fix it. Also worth clearing history etc. in your browser (or loading the page in a private browsing session) as it could maybe be a cache issue?
Is it possible to use templates or use input_x (text, number, etc) entities in the card config for the scale and color_stops?
Iâm wanting to use the card for a temperature sensor that will have different setpoints for the scale & colors.
Iâve updated my test system to 0.106.0b1 to check config ahead of the release next week and have an issue with some of my flex-horseshoe-cards, I use them to display various sensor readings throughout lovelace pages, my temperature/humidity sensors display fine but where I have them displaying network and system stats I get red error boxes saying âCannot add property tap_action, object is not extensibleâ.
This is the code for my speedtest stats on my internet connection, apart from the sensor entity and scale information the code is identical to the temperature/humidity cards that display fine, has anyone else come across this?
I know there are changes in 0.106 that affect custom cards but Iâm confused as to why some work and some donât when the code is identical.
- type: horizontal-stack
cards:
- !include ../includes/h-space-1.yaml
- type: 'custom:flex-horseshoe-card'
style: |
ha-card {
background: var(--button-background-color);
border-radius: 5px;
font-family: var(--font-family);
}
entities:
- entity: sensor.speedtest_download
unit: 'Mb'
name: DOWNLOAD
show:
horseshoe_style: 'colorstop'
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3em;
- fill: var(--button-text-color);
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-weight: bold;
- font-size: 1.5em;
- fill: var(--button-text-color);
horseshoe_scale:
min: 0
max: 100
color: rgba(200,200,200,0.1)
color_stops:
40: rgb(230,0,115)
60: rgb(255,155,0)
80: rgb(0,185,255)
- type: 'custom:flex-horseshoe-card'
style: |
ha-card {
background: var(--button-background-color);
border-radius: 5px;
font-family: var(--font-family);
}
entities:
- entity: sensor.speedtest_upload
unit: 'Mb'
name: UPLOAD
show:
horseshoe_style: 'colorstop'
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3em;
- fill: var(--button-text-color);
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-weight: bold;
- font-size: 1.5em;
- fill: var(--button-text-color);
horseshoe_scale:
min: 0
max: 40
color: rgba(200,200,200,0.1)
color_stops:
16: rgb(230,0,115)
24: rgb(255,155,0)
32: rgb(0,185,255)
- type: 'custom:flex-horseshoe-card'
style: |
ha-card {
background: var(--button-background-color);
border-radius: 5px;
font-family: var(--font-family);
}
entities:
- entity: sensor.speedtest_ping
unit: 'Ms'
name: PING
show:
horseshoe_style: 'colorstop'
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3em;
- fill: var(--button-text-color);
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
styles:
- font-weight: bold;
- font-size: 1.5em;
- fill: var(--button-text-color);
horseshoe_scale:
min: 0
max: 60
color: rgba(200,200,200,0.1)
color_stops:
0: rgb(0,185,255)
30: rgb(255,155,0)
50: rgb(230,0,115)
- !include ../includes/h-space-1.yaml
I managed to fix the tap_action error by adding:
tap_action:
action: more-info
to every entity.
Unfortunately after that my horseshoes dont render at all and throwing the error below in the console:
Uncaught (in promise) TypeError: Cannot add property entity_index, object is not extensible
Maybe thereâs just some caching going on in your browser. Maybe ctrl+f5 breaks all of them?
Iâve made a fork of this card on github with a small change to make this card +0.106.x compatible:
Iâve also made a pull request on the main repo
Is it possible to make this card with 2 horseshoe lines (one inner, one outer). Similar to the dual gauge card?
1 Like
Hi @PlatoNL
Iâve tried Ctrl+F5 and adding the tap_action info to each entity and still no luck.
Iâve downloaded your forked flex-horseshoe-card.js file and replaced the file in my www folder with your version but still the same, is there something more I need to do to make it work?
The JS file is cached so to make sure your actually loading the update file add someting like ?v=1 to the link in your resources section, like:
- url: /local/flex-horseshoe-card/flex-horseshoe-card.js?v=1
type: module
Ctrl+f5 doesnt force a reload of the JS file
1 Like