I’ve tried the basic, obvious things but still the problem persists.
I’ve opened an issue on GitHub, but I see the repo doesn’t appear to have been updated since Sept 2018, so I’m unsure if the cards are still being actively developed / monitored.
Try to use the core gauge and hope that there will be some improvements in the future.
What would/could be the problem if the error is “object is in an invalid state”?
yes, so glad… you have this too, just updated to 94.4 and I suddenly see that.
the object (if that refers to the entity) is most certainly not in an invalid state, because my regular cards (entity, glance) and the native gauge card show the entity just fine…
went to make sure I have the latest card and updated the resources accordingly, refreshed etc etc.
hi to all.
i would like to have other graphical options. is that possible?
thanks
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…
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.
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. 
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 }}'