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

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

Same problem.
Already try ?v=1 without sucess :frowning:

1 Like

I noticed that the github of @PlatoNL has a heavily modified file compared to the original file. not sure how that happened.

however, when I applied the actual changes in the pull request the cards showed up in HA.

I am facing two issues when I applied the change:

  1. in the IOS it won’t show any tab that has this card in. it sill simple have blank content.
  2. in Chrome browser, the page will initially show empty but if I refresh the page it show up okay, however, if you try to edit the tab nothing show up in that tab, and refreshing the page will remove the edit mode.

I have the same issue here… Horseshoe cards are not showing at all on all tabs. Just downgraded back to 105.5 (snapshot restore)

106.4: Horseshow cards not showing up. Tried the change of @PlatoNL; still not showing up with the error:

flex-horseshoe-card.js?v=1:1938:0 NotSupportedError: 'flex-horseshoe-card' has already been defined as a custom element

UPDATE:
Done!!! I made the change on flex-horseshoe-card.js, then deleted the flex-horseshoe-card.gz. If you don’t delete the gz file, browser still uses the gzipped version. After that i pressed Ctrl+F5 in firefox. Voila… everything works fine now… thanks a lot @PostNL

2 Likes

Awesome, it works!

Thanks @febalci!

I checked the master branch in my fork and thats indeed a heavily modified version I was using before. There was a seperate branch containing the modified version for 106.x compatibility. I’ve merged that branch with master in my repo, so other people won’t have the same problem as you guys.

Also good catch on the Gzipped version. I’ve cloned my own repo into the ‘www’ folder and referenced that in my lovelace file, so I didn’t have that problem.

friends what else to change? I downloaded, installed the modified file with tap_action added at the end ?V=1 ! But still this error: can’t define property “tap_action”: Object is not extensible!!! What else needs to be changed? The gz file was deleted. Home Assistant 0.106.5 HELP!!! HELP!!! HELP!!!

Is this amazing card not being maintained anymore? No responses here or on GitHub…

Yes, the original developer seems to have abandoned it.

Has anybody shown interest in adopting the orphaned code? It would be a shame if we loose this gem. For me, I was about to migrate from Canvas gauges (that cannot handle percentages in sizing) but I won’t if there is no clear future.

Anyone else has problems rendering the Horseshoe card icons within the HA app? Mobile browsers, like Chrome, are displaying the cards correctly.

Home Assistant app:
ha

Chrome in Android:
correct

Do you have a yaml example of this card with two sensors and actual + historic data?
thansk!

Flex Horseshoe card broke again for me today, due to a change in the way the Lit-Element is supposed to be referenced. I fixed it in my fork: https://github.com/Lau-ie/flex-horseshoe-card

2 Likes

I’ve tried implementing the card and its great exactly what I was looking for, I just can’t seem to get the sensor state to appear think its to do with the Theme color being close to state color but have tried on dark theme also and can’t get it to show any idea?

image

        - type: 'custom:flex-horseshoe-card'
          entities:
            - entity: sensor.bh_main_capacity
              name: 'CAPACITY'
              unit: 'Mbps'
          show:
            horseshoe_style: 'lineargradient'
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 50
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 5;
                  - stroke-linecap: round;
                  - opacity: 0.7;
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 34
              styles:
               - font-size: 3em;
          icons:
            - id: 0
              entity_index: 1
              xpos: 37
              ypos: 57
              align: end
              size: 1.3
          horseshoe_scale:
            min: 0
            max: 350000
          color_stops:
            16: '#E7FAFC'
            17: '#D0F5FA'
            18: '#B8F0F8'
            19: '#A1EBF6'
            20: '#89E7F4'
            21: '#72E2F2'
            22: '#5ADDF0'
            23: '#43D8EE'
            24: '#2BD3EC' 
            25: '#14cfea' 
          style: |
            ha-card {
              height: 175px;
            }

Home assistant 0.108.9, can’t define property “tap_action”: Object is not extensible error.
Please help me…
Card is version 0.8.3 installed via HACS