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

Anyone can help to explain the color stops
Tried more than 20 times, still can’t figure out how it works.

It only use the first and last color whatever number or color I use

1 Like

What am I doing wrong? I copied this from another persons example and modified the entities. No card type configured. Thanks for any help.

No card type configured

  entities:
    - entity: climate.downstairs_2
      attribute: temperature
      decimals: 1
      name: '1: Zone 1'
      area: House
      unit: °F
  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;```

anyone has the problem to call a popup with the new release of hassio 2021.1.5 and browser_mod? I m speaking about the fire-dom-event option instead of the classic call service that works only with the id of the browser instead of the argument this

you forgot the first line…the one in which the card type is configured…just like the error says :wink::

- type: 'custom:flex-horseshoe-card'
  entities:
    - entity: climate.downstairs_2
      attribute: temperature
      decimals: 1
...

I still get:

No card type configured

  • type: ‘custom:flex-horseshoe-card’
    entities:
    • entity: climate.downstairs_2
      attribute: temperature
      decimals: 1

I’m thinking I don’t have the card installed right or there is a reference to it missing somewhere? THanks for the help. I really want to get this working meven in it’s most basic form, I’ll learn from there.

1 Like

It’s hard to tell if your syntax is correct since you didn’t post the code block correctly. use three back-ticks (```) on the line before and after the code.

Also you might want to post the entire yaml code for the lovelace view.

If it was a bad reference to the install then you would be getting a different error.

- type: 'custom:flex-horseshoe-card'
  entities:
    - entity: climate.downstairs_2
      attribute: temperature
      decimals: 1

This is the entire code. If you have it working, maybe you could post a simple generic example from yours. I have copied others and I get the same error: no card type configured. That’s why I thought it was a configuration issue and not my yaml. Thanks again for helping.

Me too. Trends and graphs would be file also (as I understand there only prototypes?)

Done some experimenting with the card (and the grid card)

the click action does nothing. Can you change it to something like the picture entity card so it enlarges that card?

Could you post your yaml? All I get is

No card type configured
- type: 'custom:flex-horseshoe-card'
  entities:
    - entity: climate.downstairs_2
      attribute: temperature
      decimals: 1
1 Like

Maybe they have to adjust the manual a bit or explain it a bit better. To get the card to work i first used the RAW editor of the dashboard (found in the upper right corner
Selection_530 Selection_531

And then pasted the documented - type: 'custom… etc…

But if you just want to use the custom card (in the add a card menu) and paste the code in. Use the below example.

Selection_532

Be aware that you will have to change the lines below Entities: containing the entity and the attributes (if there is no attribute and you want to use just the entity value (numerical) just leave it as is or remove the line entirely) harddisk icons and degrees as an example

Just create a new custom cart and paste:

type: 'custom:flex-horseshoe-card'
entities:
  - entity: sun.sun
    attribute: elevation
    decimals: 2
    unit: '%'
    name: Sun
  - entity: sun.sun
    attribute: elevation
    decimals: 2
    unit: degrees °
    icon: 'mdi:harddisk'
  - entity: sun.sun
    attribute: azimuth
    decimals: 2
    unit: degrees °
    icon: 'mdi:harddisk'
show:
  horseshoe_style: lineargradient
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:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 34
      styles:
        - font-size: 3em;
    - id: 1
      entity_index: 1
      xpos: 40
      ypos: 57
      styles:
        - text-anchor: start;
        - font-size: 1.5em;
    - id: 2
      entity_index: 2
      xpos: 40
      ypos: 72
      styles:
        - text-anchor: start;
        - font-size: 1.5em;
  icons:
    - id: 0
      entity_index: 1
      xpos: 37
      ypos: 57
      align: end
      size: 1.3
    - id: 1
      entity_index: 2
      xpos: 37
      ypos: 72
      align: end
      size: 1.3
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 95
horseshoe_scale:
  min: 0
  max: 7
color_stops:
  '0': red
  '20': yellow
  '40': yellow
  '60': green

I have used the default sun.sun entity. This must be active in your config to able to see the card. If the entity is not found the card will not show.

I have edited my post to insert some pictures for clarity ( My English is not always great. Pardon me for that)

2 Likes

I hope this will help you, i struggled with adding the card too. i totally forgot there was a RAW editor under Edit dashboard :stuck_out_tongue:

But you don’t need that for it to work :slight_smile:

I must add that you might want to use a grid card (or multiple cards) to get the desired look and feel. (i have used panel mode for that dashboard to make it look even nicer and to stop HA lovelace stretching and compressing the tiles all together.)

I appreciate your help, but I’m still stuck. I really think I need to do something in the config yaml to see this work. I created a new custom card and pasted in your card and all I got was

Configuration errors detected:
duplicated mapping key at line 78, column 1:

And the thing is, there is no line 78. This is a great looking card but too complicated for me to get working. Maybe create a simple, and I mean SIMPLE card example that just needs me to add an entity and I’ll see what happens, but my guess is the “No Card Type Configured” error will persist. Thanks again and congrats on getting it to work.

I think you should first check your RAW config file in the dashboard.

Maybe try and add the example in the docs to it at the very bottom of that file. The card would then show on the last tab of that dashboard :slight_smile:

Remember to change the entities to ones that are available in you HA instance

Hello, all.

A few days ago was the first time to started to learn how to make nice dashboard in my home assistant.
I love this horseshoe card, I can configure it, but I found a “bug”.
If the data is not available for a specific card, another card or cards are disappearing.
What I mean:
For example my solar system interface is powered from the solar inverter, nighttime it’s not available.
If I do a restart at nighttime, the entities of the solar system are unknown till morning, therefore another card, for example the status of the irrigation water tank cannot be seen.

Is there any way to get this problem solved ?

Try pasting this code into a button-card.

type: 'custom:flex-horseshoe-card'
entities:
  - entity: sensor.living_room_temperature
    attribute: temperature
    decimals: 1
    name: Living Room
    area: Living Room
    unit: °C
  - entity: sensor.living_room_humidity
    attribute: humidity
    decimals: 0
    unit: '%'
    icon: 'mdi:water-percent'
  - entity: sensor.living_room_temp_battery
    attribute: battery
    decimals: 0
    unit: '%'
    icon: 'mdi:battery'
show:
  horseshoe_style: lineargradient
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:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 34
      styles:
        - font-size: 3em;
    - id: 1
      entity_index: 1
      xpos: 40
      ypos: 57
      styles:
        - text-anchor: start;
        - font-size: 1.5em;
    - id: 2
      entity_index: 2
      xpos: 40
      ypos: 72
      styles:
        - text-anchor: start;
        - font-size: 1.5em;
  icons:
    - id: 0
      entity_index: 1
      xpos: 37
      ypos: 57
      align: end
      size: 1.3
    - id: 1
      entity_index: 2
      xpos: 37
      ypos: 72
      align: end
      size: 1.3
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 95
horseshoe_scale:
  min: -10
  max: 40
color_stops:
  '16': '#FFF6E3'
  '17': '#FFE9B9'
  '18': '#FFDA8A'
  '19': '#FFCB5B'
  '20': '#FFBF37'
  '21': '#ffb414'
  '22': '#FFAD12'
  '23': '#FFA40E'
  '24': '#FF9C0B'
  '25': '#FF8C06'

You should get this hopefully.

1 Like

@dexter First I want to thank you for trying to help me. I think we’re getting close but still no joy. Previously, I would get “card not configured”. Copying your yaml code into a button card does not give me that error, but the card doesn’t display anything either. Since I don’t have your Livingroom temp sensor, I replaced it with a humidity sensor that I do have. I also removed the battery entity just trying to keep it simple. Here’s what I pasted in. See if it displays a horseshoe graph for you, or something in my code that’s not right. Like, I left it degrees even though I’m humidity. I didn’t know what to put there. Thanks again for your help.

type: ‘custom:flex-horseshoe-card’
entities:

  • entity: sensor.downstairs_humidity
    attribute: humidity
    decimals: 1
    name: test 2
    area: test 2
    unit: °C
    show:
    horseshoe_style: lineargradient
    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:
    • id: 0
      entity_index: 0
      xpos: 50
      ypos: 34
      styles:
      • font-size: 3em;
    • id: 1
      entity_index: 1
      xpos: 40
      ypos: 57
      styles:
      • text-anchor: start;
      • font-size: 1.5em;
    • id: 2
      entity_index: 2
      xpos: 40
      ypos: 72
      styles:
      • text-anchor: start;
      • font-size: 1.5em;
        icons:
    • id: 0
      entity_index: 1
      xpos: 37
      ypos: 57
      align: end
      size: 1.3
    • id: 1
      entity_index: 2
      xpos: 37
      ypos: 72
      align: end
      size: 1.3
      names:
    • id: 0
      entity_index: 0
      xpos: 50
      ypos: 95
      horseshoe_scale:
      min: 0
      max: 100
      color_stops:
      ‘16’: ‘#FFF6E3
      ‘17’: ‘#FFE9B9
      ‘18’: ‘#FFDA8A
      ‘19’: ‘#FFCB5B
      ‘20’: ‘#FFBF37
      ‘21’: ‘#ffb414
      ‘22’: ‘#FFAD12
      ‘23’: ‘#FFA40E
      ‘24’: ‘#FF9C0B
      ‘25’: ‘#FF8C06

Your code looks all wrong for some reason. Try using the Preformatted text option when posting your code.

The Minus ( - ) in your code you posted is missing and your Apostrophe ( ’ ) character is totally different to mine.

This code works for displaying ’ Humidity ’ from your sensor.
Paste it into a button-card. Good luck :+1:

type: 'custom:flex-horseshoe-card'
entities:
  - entity: sensor.living_room_humidity
    name: Living Room
    area: Living Room
    decimals: 0
    unit: '%'
  - entity: sensor.living_room_humidity
show:
  horseshoe_style: lineargradient
layout:
  states:
    - id: 0
      entity_index: 0
      xpos: 52
      ypos: 52
      styles:
        - font-size: 3em;
  names:
    - id: 0
      entity_index: 1
      xpos: 50
      ypos: 95
horseshoe_scale:
  min: 0
  max: 100
color_stops:
  '10': '#FFF6E3'
  '20': '#FFE9B9'
  '30': '#FFDA8A'
  '40': '#FFCB5B'
  '50': '#FFBF37'
  '60': '#ffb414'
  '70': '#FFAD12'
  '80': '#FFA40E'
  '90': '#FF9C0B'
  '100': '#FE3600'

humidity

Anyone know if it’s possible to resize the actual card? Trying to see if it will match up with my other gauges for display on a tablet with limited real estate.

Was looking at that too. Going off the examples, looks like it’s fixed at 100x100.

Might be possible going thru the code ? I’ve put a few in grid cards on larger displays; looks good and their size reduces the more you have. On a tablet may become too small ?? Can you share the gauges you are using please ??