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

arboeh · August 8, 2022, 7:35am

I helped myself with commenting out this code passage in the horseshoes’ JavaScript file:

    if ((this.isSafari) || (this.iOS)) {
      iconSize = iconSize * correction;
  
      xpx = (xpx * correction) - (iconPixels * adjust * correction);
      ypx = (ypx * correction) - (iconPixels * 0.5 * correction) - (iconPixels * 0.25 * correction);// - (iconPixels * 0.25 / 1.86);
    }

The function isSafari() recognizes the Androids’ companion app as Safari Browser and the correction variable makes a mess then. The two functions isSafari() and isIOS() need to be updated. I will take a deeper look inside the code when I have more time…

dajomu · August 18, 2022, 12:11pm

Is this still being maintained? No changes on the Github for quite a while: https://github.com/AmoebeLabs/flex-horseshoe-card

zgadson · August 22, 2022, 5:18pm

Simple question - how do I set the font color of states and names? Nothing I try is working and I can’t find any information regarding font color.

4331525 · September 1, 2022, 11:39am

thank you very much

DivanX10 · November 7, 2022, 1:17pm

How can I make the icon status change? It is not the color of the icon that needs to be changed, but the icon itself. Where to enter the code and how?

is_state("binary_sensor.hall_occupancy","on") | iif("mdi:motion-sensor", "mdi:motion-sensor-off")

JuergenM · November 19, 2022, 2:26pm

Hello,
I’m facing the same problem right now
Have you _ or someone who is still reading it _ found a solution to the problem/error - whatever - and maybe you want to share the solution with me?
Greetings Juergen

metodi · January 3, 2023, 10:14am

Same request here!!!

irek74 · January 3, 2023, 5:49pm

I need your help: I want to change fill color of a text in layout:/states:/id: X/styles:/fill:
It works just fine if I provide a color name like green or red, but I want to make it conditional, depending of attr_state form a different entity. I’ve tried many different approaches but don’t know how to do it.

metodi · January 9, 2023, 3:55pm

Which JS file did you update?
what’s the location?

arboeh · February 20, 2023, 12:57pm

config/www/community/flex-horseshoe-card/flex-horseshoe-card.js
But doesn’t work with latest update of the card repository. Unfortunately.

arboeh · February 21, 2023, 1:53pm

I solved this problem for my needs now. Mobile App is working now also.
The trick is to overwrite the Safari-Browser style via CSS, because the Mobile- / Companion-App is recognized as Safari (no clue why), so the code example above (from flex-horseshoe-card.js) is used.
This is the card mod style you have to set:

    card_mod:
      style: |
        ha-icon {
          --ha-icon-display: content;
        }
        foreignObject {
          x: 76px;  // Adjust this for your needs
          y: 113px;  // Adjust this for your needs
          width: 48px;  // Adjust this for your needs
          height: 48px;  // Adjust this for your needs
        }

febalci · April 6, 2023, 9:30am

Since i started using Flexible Horseshoe component, i sometimes get “Custom element does not exist:flex-horseshoe-card” error on both mobile and desktop. As i see, whenever i get this error, most of you guys got the same error too at the same time. And it always comes back by its own after some time.

I myself suspect that the lines 21-26 on flex-horseshoe-card.js:

import {
  LitElement,
  html,
  css,
  svg
  } from "https://unpkg.com/[email protected]/lit-element.js?module";

is using unpkg.com. And “unpkg.com” server is sometimes down and i suspect that this error occurs when the unpkg site is down. I am now testing:

from "https://cdn.jsdelivr.net/npm/[email protected]/lit-element.js?module";

instead of:

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

as this seems a more reliable server. Will inform you guys about the outcome. Btw, i changed the code in flex-horseshoe-card. js but not in flex-horseshoe-card.gz. Do i need to change this zip file too?

EDIT: 1. Yes you should also change.gz file
2. jsdelivr instead of unpkg doesn’t work. Tried to use local litelement, that doesn’t work either.

njbillt · April 6, 2023, 1:31pm

It’s not unusual for custom elements to break when there is an update. It happens to my custom light entity card every time. There was a supervisor update yesterday and on the live call Frenk asked everyone to always update the cards as well. My Horseshoe card is working after the core update however without doing anything special though. Try unpacking the .js and reinstalling maybe?

Septain21 · September 3, 2023, 2:48pm

Good morning
I want to embed a text data instead of a number in horseshoe card.
“sensor.mode_solaire” can take 2 text values: solar mode or EDF mode.
This is my configuration :

type: custom:flex-horseshoe-card
entities:
  - entity: sensor.mode_solaire
    name: AXPERT MAX
  - entity: sensor.production_solaire_pv_daily
    decimals: 1
    unit: kWh
    name: Jour
  - entity: sensor.production_solaire_pv_monthly
    decimals: 1
    unit: kWh
    name: Mois
  - entity: sensor.onduleur_onduleur_temperature
    decimals: 0
    unit: °C
    name: Température
  - entity: sensor.onduleur_batt_volt
    decimals: 1
    unit: V
    name: Batt Voltage
show:
  horseshoe_style: colorstopgradient
layout:
  hlines:
    - id: 0
      xpos: 50
      ypos: 43
      length: 70
      styles:
        - opacity: 0.2;
  vlines:
    - id: 0
      xpos: 50
      ypos: 59
      length: 30
      styles:
        - opacity: 0.2;
  states:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 35
      styles:
        - font-size: 3em;
        - opacity: 0.9;
    - id: 1
      entity_index: 1
      xpos: 46
      ypos: 58
      styles:
        - font-size: 1.8em;
        - text-anchor: end;
    - id: 2
      entity_index: 2
      xpos: 56
      ypos: 58
      styles:
        - font-size: 1.8em;
        - text-anchor: start;
    - id: 3
      entity_index: 3
      xpos: 5
      ypos: 7
      styles:
        - font-size: 1.2em;
        - text-anchor: start;
    - id: 4
      entity_index: 4
      xpos: 97
      ypos: 7
      styles:
        - font-size: 1.2em;
        - text-anchor: end;
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 95
    - id: 1
      entity_index: 1
      xpos: 46
      ypos: 68
      styles:
        - font-size: 0.9em;
        - text-anchor: end;
        - opacity: 0.7;
    - id: 2
      entity_index: 2
      xpos: 54
      ypos: 68
      styles:
        - font-size: 0.9em;
        - text-anchor: start;
        - opacity: 0.7;
horseshoe_scale:
  min: 0
  max: 3600
color_stops:
  '0': '#0277BD'
  '3000': '#FBC02D'

any idea how to do this

Thank you

Elja · September 8, 2023, 8:42pm

I’m using this beautiful card on my Nest Hub 2.

The card on the left is showing my net usage.
This value can be negative (solarpanels delivering power) or positive (using power).

This is the code I’m currently using:

type: custom:flex-horseshoe-card
view_layout:
  grid-area: block1
entities:
  - entity: sensor.p1_meter_3c39e727dc16_active_power
    attribute: acculading
    decimals: 0
    name: Stroomverbruik
    unit: W
  - entity: sensor.maxumum_voltage
    attribute: Volt
    decimals: 1
    unit: V
    icon: mdi:sine-wave
  - entity: sensor.stroomverbruik_vandaag
    attribute: Dagelijks
    decimals: 1
    unit: kWh
    icon: mdi:lightning-bolt
show:
  horseshoe_style: colorstop
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: -17000
  max: 17000
  color: '#212121'
color_stops:
  '0': '#05ba49'
  '1': '#ba2705'

At the moment, the more power I’m adding to the grid, the lower/shorter the filled graph is.

Does anyone know of a way to have two scales and use the color to show if it’s supplying or using?
So a red line starting at 0 when using power and a green line starting at zero showing the insertion of power.

Elja · September 8, 2023, 8:52pm

I just tried and it’s fine with showing a text value in the card.
However, do not use the first entity. That one is used as the value to show the horseshoe line.
You can use it on the second entity without any problem.

Septain21 · September 9, 2023, 10:07am

Try to use this :

    color_threshold:
      - value: -10000
        color: red
      - value: 0
        color: green

or

color_stops:
  '-10000': red
  '0': green

Elja · September 10, 2023, 11:16am

Thank you for the reply.
You suggestions won’t do what I’m looking for.
I would like the horsehoe graph to change to different scales based on the value.

So one based on 0 to 15000, when I’m using energy from the grid (with the red color).
And one based on 0 to -15000, when I’m supplying energy to the grid (with the green color).

Septain21 · September 10, 2023, 1:12pm

Thx This is the solution

Septain21 · September 10, 2023, 1:21pm

For me it works though with color_stops:
color graph red from 0 to 800, yellow from 800 to 1500 and green beyond

color_stops:
  '0': '#4567EF'
  '800': '#D82039'
  '1500': '#DBD037'
  '3000': '#17AC6B'