Lovelace: Gauge card

finity · July 2, 2019, 1:59am

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?

boota · July 6, 2019, 11:24am

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…

Mariusthvdb · July 6, 2019, 3:41pm

No, I’ve stopped using it…

finity · July 6, 2019, 4:27pm

See the post right above yours…

VDRainer · August 5, 2019, 9:58pm

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

VDRainer · August 6, 2019, 3:36pm

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.

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.

Mariusthvdb · September 7, 2019, 10:41pm

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?

mr_white · September 19, 2019, 9:12am

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

SledgeHammer · September 25, 2019, 7:00pm

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

VDRainer · September 25, 2019, 7:52pm

What about

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

Denman2103 · June 9, 2020, 12:00pm

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?

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.

firstof9 · June 9, 2020, 3:02pm

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

hipsi · July 29, 2020, 3:08am

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'

aceindy · June 3, 2021, 9:01pm

Hi,

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

VDRainer · June 3, 2021, 11:12pm

Should be possible with my customization above.

GlennHA · June 4, 2021, 4:42am

You could use canvas-gauge.

It does have some sizing issues with picture-elements in that it must be sized in pixels and not % like most things, but it does work:

aceindy · June 4, 2021, 5:54am

Both offered solutions look good, but i’ll try out VDRainers first

aceindy · June 4, 2021, 2:21pm

Hi @VDRainer
It seems to work somehow…
but the inner part isn’t 100%…
It looks more like a dial instead of a gauge…the center should be black too

Any ideas ??
Oh…and I found this repository, which appears to be identical to your modifications…yours??
Although the initials seems to be from @GlennHA

aceindy · June 4, 2021, 3:06pm

@GlennHA
And canvas doesn’t support attributes ??
Not really an issue, but would be nice if I don’t have to convert my existing attributes into sensors

VDRainer · June 4, 2021, 9:46pm

What if you try the default HA dark theme?

No, but looks like someone had the same idea.
Even the colors in the example are 100% the same.