custom-cards / dual-gauge-card Goto Github PK
View Code? Open in Web Editor NEWDual gauge custom card for Lovelace in Home Assistant
License: MIT License
Dual gauge custom card for Lovelace in Home Assistant
License: MIT License
Is there a way to have the labels not overlap?
Increasing card width to 500 does not help either
type: 'custom:dual-gauge-card'
title: Current Consumption/Production
min: 0
max: 15000
outer:
entity: sensor.envoyenvoy_current_energy_consumption
unit: W
colors:
- color: var(--label-badge-blue)
inner:
entity: sensor.envoyenvoy_current_energy_production
unit: W
colors:
- color: var(--label-badge-green)
cardwidth: 500
I don't know if it is not supported or if I am just doing it wrong, but I been trying numerous ways of using the value of a sensor to determine the color for example
colors:
- color: var(--label-badge-red)
value: '99'
- color: var(--label-badge-green)
value: '{{ states.sensor.bathroom_humidity_threshold.state }}'
where if the value of sensor.bathroom_humidity is higher sensor.bathroom_humidity_threshold it is red, and if its lower it will be green
Would it be possible to add support for Themes? Currently themes only work if I apply a theme to the whole View. But if you want any of the cards to be the default theme then you need to leave Theme turned off for the whole View and set Theme individually per card.
i.e. expose the css var --gauge-card-width
via the options.
All other values are relative to this.
I'd like to have template support for gauge values. Details may follow.
I'm planning to implement this in the comming months but I'm open to pull request if anyone would like to tackle this.
Possible to make this supported by custom-updater so we can keep things up to date if we install it ?
Would it be possible to add the ability to change the colour of the text (Not the label) of the values being measured?
It would make it easier to see the values against the gauges.
Thanks
In HACS I get error that the dual-gauge-card is on the blacklist.
I would expect to click on the right value to see the inner value plot, and the left value to see the outer plot.
However what really happens is that both the right and left values open the plot for the "inner" bar, and then clicking on the text label underneath opens the the plot for the "outer" bar.
Hi.
A change in how lovelace cards are set up in Home Assistant 0.105 increases performance, but enables cards to accidentally modify their own configuration in the loaded lovelace configuration.
I'm going through the cards in the HACS default repository, and noticed that your card may be susceptible to this. Looking through your code it seems you may modify parts of the config object passed to your card in setConfig
.
The result could be that your card does not work well with the GUI editors or that parts of the configuration start showing up multiple times.
At some point in the future, it is likely that the configuration will be frozen before being passed to setConfig
. At this point, your card will fail entirely when it tries to modify the configuration object.
There are several ways to fix/protect agains this problem.
The best is to restructure setConfig
such that the configuration is never modified.
Other alternatives are to make a copy of the configuration and work on that instead.
setConfig(config) {
config = { ...config }; // This works for simple configurations not containing arrays or objects
...
import { deepClone } from "deep-clone-simple";
// https://github.com/balloob/deep-clone-simple
setConfig(config) {
config = deepClone(config); // This is a safe and fast method
...
or
setConfig(config) {
config = JSON.parse(JSON.stringify(config)); // This uses built-in functions, but may be slower than deepClone
...
Please note that I have not tested your card agains Home Assistant 0.105 or later, but just quickly looked through the code. If I'm mistaken in my assessment, I appologize for taking your time.
See thomasloven/hass-config#6 for more info.
After adding this card to my UI, then attempting to edit the card by clicking edit, it does not open the card configuration options, it does not appear to respond at all.
When I open chrome's console this is what appears when I try to click edit. I tried to fully expand it, but it seems to be looping or something because as soon as I expand it it flickers and re-appears without being expanded. I had to be really quick on the trigger to grab this screenshot.
I also verified this is the only card being affected.
Hey,
it's not really an issue, but how can i change the background color of the gauge? Actually it's white when i have a dark card background and light grey when i have a white card background. Is there a way to adapt it inside the config or inside the themes? Like the gauge background of the "original" gauge card?
Greets and many thanks for this awesome dual gauge from Germany,
Simon
Hi,
Thanks for an amazing Card.
unfortunately it doesn't view on HA mobile.
Any idea why? it shows "Custom element doesnt exist"
Thanks
installed via hacs and added to repository and also tried adding direct to yaml
please add needle mode like https://www.home-assistant.io/dashboards/gauge/
When using a theme that has '--paper-card-background-color' set with a transparent color causes the dual-gauge-card to double the background color on the gauge-frame element of the card. This causes the overall transparency of the card to be half of the expected value.
Is the 'background-color' definition required in the .gauge-frame (::256) block of the CSS file?
Or could the frame background-color be a settable option for the card?
When entity value is outside the range of min/max the gauge is shown as in attached image
Expected:
Not sure if this is a bug or as intended but I'd for instance like a general min max in temperature of 18-25 but some odd days the temperature might actually be outside this range and when that happens it looks weird if the gauge suddenly behaves strange.
The standard gauge shipped with home assistant works as expected.
It would be good if the more-info
page of the entity can be opened on clicking on each of the entity values.
It would be nice have the option of configuring something, when the actual value is "unavailable" and that should not be visible in the ui-card. I know, there are ways to do this by dummy values or templates. But the idea is: the value can be "unavailable" - I just do not want to see that in the gauge card.
In my case it is the solar production. OpenDTU sets power production to "unavailable", because the inverter switches off at night - but I would rather see a "0" instead of "unavailable" which does not even fit into the widget.
Proposal:
A a default value can be configured in case of "unavailable".
Or it can be configured to display the min value instead.
Hi, would it be possible to have a parameter to configure the number of decimals?
Hello , I would love to have an option to make color chose for outer and inner separately
A good example of the need : SpeedTest result
My ISP is : 200 Mbps Download and 50 Upload
so performance detection is easy if the color are "green" if Download is 180+ and Upload is 45+
The config after will be something like this:
- type: custom:dual-gauge-card
title: SpeetTest
min: 0
max: 200
outer:
entity: sensor.speedtest_download
label: "Download"
unit: "Mbps"
colors:
- color: 'var(--label-badge-red)'
value: 50
- color: 'var(--label-badge-yellow)'
value: 150
- color: 'var(--label-badge-green)'
value: 180
inner:
entity: sensor.speedtest_upload
label: "Upload"
unit: "Mbps"
colors:
- color: 'var(--label-badge-red)'
value: 10
- color: 'var(--label-badge-yellow)'
value: 40
- color: 'var(--label-badge-green)'
value: 45
Thanks!
I have sensors, which disappear when I have to restart HA.
This makes the dual gauge card render an entire tab/view as WSOD. I have to remove the card via raw config editor to see the other cards again.
The default behaviour is, to show something like "Entity not available: sensor.vehicle_bat_soc" and keep the rest of the page working. Would this be doable for dual gauge card, too?
HA: 0.110.1
DGC: 0.5.2
Hello, i have upload/download from my internet box
1/
i want to set max as : upload + download
type: custom:dual-gauge-card
title: fbx
min: 0
max: sensor.my_fbx
outer:
entity: sensor.my_fbx
attribute: up
label: up
inner:
entity: sensor.my_fbx
attribute: down
label: down
sensors.yaml :
My sensor works well,
but max do not take sensor.my_fbx value wich is equal to up+down
example : up=5 down=7 sensor.my_fbx=12 : max should be 12
2/
inside sensor.my_fbx i have 3 attributes : up, down, updown
could i define max as an attribute ?
instead of :
max: sensor.my_fbx
i would like :
max:
entity: sensor.my_fbx
attribute: updown
This syntax seem not work ?
help please :)
In your example usage, you show a temperature regulation example. I would like to use it for the same, but I think it'd help to use color codes as indicators that the current temperature undershoots the target, overshoots, or is within the target range. We might use green for "in range", blue for "current temperature is too cold for set target", red for "current temperature is too hot for set target."
- type: horizontal-stack
cards:
- type: custom:dual-gauge-card
cardwidth: 230
title: Irma Bedroom
min: -5
max: 40
outer:
entity: climate.air_panel
label: "Current"
attribute: current_temperature
unit: "°"
inner:
entity: climate.air_panel
label: "Target"
attribute: temperature
unit: "°"
colors:
- color: "var(--label-badge-yellow)"
value: 25
- color: "var(--label-badge-green)"
value: 18
- color: "var(--label-badge-blue)"
value: 0
When trying to add the below...
type: custom:dual-gauge-card
inner:
entity: sensor.pv_power_now
label: "PV"
unit: "kWh"
to a dashboard using the yaml editor the SAVE button is greyed out and I get a spinning icon. Any ideas?
As stated, the repo was blacklisted by the repo owner, this caused my hacs to lock the files in a way that I now cannot remove them.
How do I recover my ha install and return to normal, now that this repo is blacklisted and it's stuck in a forever loading state when trying to uninstall.
I think the title is self explanatory. This is just a nice-to-have request to allow us to set an icon on the top right so it fits in with other cards on the dashboard.
Hi,
At first thanks I like this gauge I use it to display temperature/humidity.
I have one request, to add min and max label at least on the outer gauge.
I think it’s a bit weird to have a level gauge without a scale.
Thank you
I can't see my error
- type: horizontal-stack
cards:
- type: custom:dual-gauge-card
cardwidth: 230
title: Bedroom
min: -5
max: 40
outer:
entity: climate.air_panel
label: "Current"
attribute: current_temperature
unit: "°"
inner:
entity: climate.air_panel
label: "Target"
attribute: temperature
unit: "°"
colors:
- color: "var(--label-badge-yellow)"
value: 25
- color: "var(--label-badge-green)"
value: 18
- color: "var(--label-badge-blue)"
value: 0
Would be a nice enhancement if you could chose to show/hide a value and only see the gauges.
I primarily use the dual-gauge for a target and actual (eg. 3d print target and actual temp)
I can hide the 'target text', but i can not hide the 'target value'.
Hi,
How this should be installed? Seems that package is not compatible with latest versions of HA and HACS.
After installing via HACS and refreshing HA, custom card does not appear on dashboard editor's "+add card" list.
Using Chrome browser.
Is there issue on package or am I doing something wrong?
EDIT: Got it working. Card got to set manually and indentation must be correct. Discussion here:
https://www.facebook.com/groups/HomeAssistant/posts/2923845581220126
Hi,
My dual gauge card was working fine until a few weeks ago, now I'm getting this error: "Cannot add property min, object is not extensible".
The config is
inner:
entity: sensor.hw_top
label: HW Top
unit: °C
max: 60
outer:
entity: sensor.hw_load
label: HW Load
unit: °C
title: Varmvatten
type: 'custom:dual-gauge-card'
Any ideas?
Thanks,
Ville
As @fortepc stated in #14, support for HACS seems to be broken.
See #14 (comment)
I have the gauge set to show my thermostat's set and actual temperature. When the thermostat is off, the value of set temperature is null. Is there a way to catch the value and replace it with N/A or Off? Perhaps a value check in the java?
Unable to get the HACS installation to render the card in lovelace.
Tried:
Card just renders an error.
Hi,
How can i use a sensor value and use that sensor value as the max for the configuration "max"
max: integer(sensor.boiler_burner_max_power).
The boiler_burner_max_power is a value from 23% to 100%.
I tried to use the above, but it does not work properly. Both Inner and Outer are then showing 100%.
Hi there,
I have re-installed the dual-guage-card now that has been removed from blacklist, I've checked and based on the closed issues and comments it seems to be compatible with latest HA, but I still manage to see the same issue (yes, I've clearead the cache, and it was a new installation, I had removed it since 0.106.x compatibility issues)
create-element-base.ts:64 dual-gauge-card TypeError: Cannot add property min, object is not extensible
at HTMLElement.setConfig (dual-gauge-card.js:29)
at s (create-element-base.ts:61)
at c (create-element-base.ts:80)
at u (create-element-base.ts:131)
at Module.It (create-card-element.ts:55)
at layout-card.js:1
at HTMLElement.build_card (layout-card.js:1)
at layout-card.js:1
at Array.map (<anonymous>)
at HTMLElement.build_cards (layout-card.js:1)
One very odd thing I noticed is that while refreshing the page during cache cleanup, I can see the card load for a micro-second, then it turns into the error above
To make sure I was not being affected by any cache, I removed the card file, causing a 404 on the network tab for the card, then re-intalled it in order to have a 200 response, the problem persist
Please let me know if I can provide any information that can be of use.
I am running latest HA 0.108.8
Thanks
Andrea
HI, I am trying to change the width of the card but when I change the value to cardwidth: 200 it changes the height and not the width. Be great if both were supported but I am fine if just width worked. Great card by the way this does exactly what I wanted.
Hello,
I've changed the js source code to receipt font-size value (in pixel) for the inner and the outer gauge.
This is my code:
if (!this.config.fontsize) { this.config.fontsize = 20; } if (!this.config.outer.fontsize) { this.config.outer.fontsize = this.config.fontsize; } if (!this.config.inner.fontsize) { this.config.inner.fontsize = this.config.fontsize; }
if (this.config.outer.fontsize) { this._setCssVariable(this.nodes.content, 'outer-font-size', this.config.outer.fontsize + 'px'); } if (this.config.inner.fontsize) { this._setCssVariable(this.nodes.content, 'inner-font-size', this.config.inner.fontsize + 'px'); }
--outer-font-size: var(--outer-font-size); --inner-font-size: var(--inner-font-size);
font-size: var(--inner-font-size);
font-size: var(--outer-font-size);
The card has stopped working after upgrading to version 0.116.
Apologies if this isn't the right place to ask, but I wanted to tweak the font sizing on the gauge so I edited www\community\dual-gauge-card\dual-gauge-card.js , saved it, and added a new card to my dashboard - However the changes didn't reflect in the card that appeared.
Is the JS file cached somehow by HA and stored elsewhere? I've been digging around trying to find out what's going on but it's a little opaque when it comes to exactly how card js is internalised by Lovelace so any pointers are greatly appreciated!
It should be possible to define max and min values for both gauges at once (as is) or for each gauge individualy.
Hi
After Home Assistant update to 0.106.x the dual gauges cards not is showing correctly.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.