Lovelace: Gauge card

Really strange things

I have just installed the HACS custom components and moved most of my plugins (the ones that I find in the Store).

With Gauge Card I get the error “Failed to execute ‘attachShadow’ on ‘Element’: Shadow root cannot be created on a host which already hosts a shadow tree”

I followed the issue in Github and removed row 24. But no change.

If I restore the Gauge card to the previous method, installing manually in the /loca/… folder all is working again.

What can be the issue?

Thanks

Yeah, I installed with hacs too and had that same error also until I modified the code. Then that error went away and I started getting the one posted above.

I haven’t tried to install it manually yet.

I found that after removing row 24 from the js file, it’s needed to create also the gz file.

After that now it’s working.

Why is needed to remove that row manually ?
This will happen every time there is an update?

The problem is that there is no update on the gauge-card.

i think this is not a real problem.

i have this message when the sensor doesn’t return a numeric value, for exemple when photovoltaic doesn’t produce, i have this message.

it can be a suggestion (make an empty gauge in place of an error when no value)

I think that the author of this custom gauge-card has abandoned it.

There hasn’t been any activity in a couple of months and I submitted an issue on the “shadowRoot” problem over two weeks ago and it hasn’t been touched.

However, the good news is that it looks like most of the functionality of this card has been incorporated into the core gauge card. The only thing that it looks like it is missing is the ability to specify displaying an attribute of the entity instead of the state of the entity.

If you decide to move to the core card the only other thing you should know is that the severity color for “amber” in the custom card is now “yellow” in the core card.

If the decision was intentional to move away from this card in favor of the core card at the developer level then this should be announced here. And the references to the custom card should be removed from the github HA custom-card repo along with removing the card from HACS.

This is causing too much confusion among users and if it’s not being maintained then it should be removed.

What say you @ciotlosm?

Did you happen to figure this out? I’m just now trying to use the custom component here and am having the same issue of ‘invalid state’. Looking at the object in the developer tools shows it looks “valid” to me…

No, I’ve stopped using it…

See the post right above yours…

Looks like the gauge-card is fixed.
Installed via HACS and works!

I love this card, but it bites me since this card came out, and now that it’s working again, i tried to implement custom colors.

As a total js noob and a lot of trial and error, i hacked the severity config from the Big number card into this card. :sweat_smile:

As a result, it will be possible to use any and as much colors you like.
my_gauge
The config will be a Breaking Change!

      - entity: input_number.slider1
        measurement: ' '
        severity:
          - style: 'rgb(255,12,12)'
            value: 10
          - style: orange
            value: 20
          - style: '#ffff00'
            value: 30
          - style: var(--my-green)
            value: 40
          - style: blue
            value: 50
          - style: indigo
            value: 60
          - style: violet
            value: 70
          - style: pink
            value: 80
          - style: cyan
            value: 90
          - style: white
            value: 100
        title: Custom gauge
        type: 'custom:gauge-card'

After all the experiments, there are no big changes in the code.
From:

  _computeSeverity(stateValue, sections) {
    let numberValue = Number(stateValue);
    const severityMap = {
      red: "var(--label-badge-red)",
      green: "var(--label-badge-green)",
      amber: "var(--label-badge-yellow)",
      normal: "var(--label-badge-blue)",
    }
    if (!sections) return severityMap["normal"];
    let sortable = [];
    for (let severity in sections) {
      sortable.push([severity, sections[severity]]);
    }
    sortable.sort((a, b) => { return a[1] - b[1] });

    if (numberValue >= sortable[0][1] && numberValue < sortable[1][1]) {
      return severityMap[sortable[0][0]]
    }
    if (numberValue >= sortable[1][1] && numberValue < sortable[2][1]) {
      return severityMap[sortable[1][0]]
    }
    if (numberValue >= sortable[2][1]) {
      return severityMap[sortable[2][0]]
    }
    return severityMap["normal"];
  }

To:

  _computeSeverity(stateValue, sections) {
    let numberValue = Number(stateValue);
    if (!sections) return 'var(--primary-color)';
    let style;
    sections.forEach(section => {
      if (numberValue <= section.value && !style) {
        style = section.style;
      }
    });
    return style;
  }

If anyone likes it, maybe i’ll submit a PR. :fearful:

7 Likes

is this even actual any more? would love to have more than 3 severities…would like to set the size of the text under the gauge also. Think we now have to resort to setting a theme on the card?

1 Like

hello!

if i copy yours it looks like that one in green:

      - id: 167724gwzzukks713 # Automatically created id
        type: horizontal-stack
        cards:
        
        
          - type: gauge
            title: IN/OUT Differenz
            entity: sensor.in_out_temp_diff
            min: -10
            max: 10
            severity:
              orange: 6
              green: 2
              blue: -10
      - id: 1677bauu6122kks713 # Automatically created id
        type: horizontal-stack
        cards:              
          - type: gauge
            name: diff
            entity: sensor.in_out_temp_diff
            min: -40
            max: 40
            severity:
              red: -40
              green: 0
              yellow: 30

looks not right.

zero should be in the middle. don’t know what else can be wrong. also the colors do not work correct for me.

greez

1 Like

Hi all,

I get data in HA with MQTT via a belgian regional integration, eg for Voltage HA receives 239,4.
In developer option - states this value is presented with a comma and clicking it I get a nice graph.
But with the gauge card, HA complains with the message ‘Entity non numeric: sensor.tension’.
I assume the gauge sees this as a text value.

I tried to overcome this problem with a value_template but it did not work (eg I get 2 in stead of 239,4)
value_template: ‘{{ value | multiply(1) | float(2) }}’
value_template: ‘{{ value | round(2) }}’

Can somebody help me to find a good value_template or gauge modification please?

Mario

What about

value_template: '{{ value | replace(',', '.') | float }}'

I have a problem with the scaling of the value. Is there a way to scale the value so it will fit within the gauge?
image
i use the hass gauge card.
here is the code:

      - entity: sensor.speedtest_download
        max: 200
        type: gauge
      - entity: sensor.speedtest_upload
        max: 100
        type: gauge
    type: horizontal-stack

is doen’t matter witch browser i use.

You’ll need to report that on the home assistant github.

My gauge doesn’t look right, it does this also if I just use a single entity card by itself like in the examples. I added the customization from HACS. I’m using the normal UI mode, not YAML. Here’s my card configuration within the Picture elements card:

  - entity: sensor.netpower
    max: 4000
    min: -5000
    scale: 30px
    style:
      left: 50%
      top: 40%
    title: Net Power
    type: 'custom:gauge-card'

Hi,

Anyone figured out how to:
0 → red
25 → yellow
50 → green
75 → yellow
100 → red
?

Should be possible with my customization above.

1 Like