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

Share your Projects! Dashboards & Frontend
102

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;
            }
103

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

104

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…

3 Likes
105

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
106

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.

image
image614×821 83.8 KB

107

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

IMG_6344
IMG_63441125×388 49.4 KB

108

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
109

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
110

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!!

111

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:

112

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

113

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

114

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.

115

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.

116

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.

117

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…

118

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.

119

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.

120

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.

121

0.111.4 not work . 0.106.x-compatibility