custom-cards / dual-gauge-card Goto Github PK

Hi,

maybe I missed but tried a lot of options.

Currently I have a picture elements card with whit background (cutted away for privacy) and I get a black background for the gauge.
also the gauges themselves vs the background are small.

How can I change that?

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

When nested in a horizontal stack in particular, the gauge does not scale correctly taking up the full horizontal width of the outer card instead of scaling to fit the inner card:

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.

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:

• In the config section, add this lines:
  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; }
• In the "_createCard()" function, add this lines:
  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'); }
• In the "_initStyles()" function, and this lines:
  --outer-font-size: var(--outer-font-size); --inner-font-size: var(--inner-font-size);
  and

1. Into the ".gauge-value-inner, .gauge-label-inner", add this lines:
   font-size: var(--inner-font-size);
2. Into the ".gauge-value-outer, .gauge-label-outer", add this lines:
   font-size: var(--outer-font-size);

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'.

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

installed via hacs and added to repository and also tried adding direct to yaml

When displaying big values they overlap and card does not adapt & render properly

It should be possible to define max and min values for both gauges at once (as is) or for each gauge individualy.

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 :

• platform: template
  sensors:
  my_fbx:
  unique_id: my_fbx
  friendly_name: "Freebox u/d max"
  unit_of_measurement: "mbps"
  icon_template: 'mdi:network'
  value_template: >
  {% set u = states('sensor.freebox_upload_speed') | int %}
  {% set d = states('sensor.freebox_download_speed') | int %}
  {{ (u + d) }}
  attribute_templates:
  up: "{{ states('sensor.freebox_upload_speed') | int }}"
  down: "{{ states('sensor.freebox_download_speed') | int }}"
  updown: "{{ (states('sensor.freebox_upload_speed') | int) + (states('sensor.freebox_download_speed') | int) | int }}"

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 :)

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.

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.

i.e. expose the css var --gauge-card-width via the options.

All other values are relative to this.

Unable to get the HACS installation to render the card in lovelace.

Tried:

• Default HACS installation with resource url: /hacsfiles/dual-gauge-card/dual-gauge-card.js?hacstag=143762825053
• Added the resource to the rawconfig of lovelace dashboard
• Added the resource to the config.yaml
• Dropped the dual-guage-card into www and references the top 3 from /local/duage-guage-card.js

Card just renders an error.

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 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

Hello, after update 0.106 dual-gauge-card not working

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?

When entity value is outside the range of min/max the gauge is shown as in attached image

Expected:

• when value is < min: empty gauge
• when value is > max: full gauge

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.

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%.

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

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."

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,
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

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

I have recently setup this card, but its not displaying as expected. I am running HA v0.92.2, viewing from Chrome browser on Windows, and the same sensors are displaying correct values on the custom:plan-coordinates card. Any ideas would be greatly appreciated

From ui-lovelace.yaml:

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

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!

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.

Possible to make this supported by custom-updater so we can keep things up to date if we install it ?

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?

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

It would be good if the more-info page of the entity can be opened on clicking on each of the entity values.

As @fortepc stated in #14, support for HACS seems to be broken.

See #14 (comment)

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.

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

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.

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.

The card has stopped working after upgrading to version 0.116.

Hi,

Thanks for an amazing Card.
unfortunately it doesn't view on HA mobile.
Any idea why? it shows "Custom element doesnt exist"

Thanks

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?

In HACS I get error that the dual-gauge-card is on the blacklist.

Hi

After Home Assistant update to 0.106.x the dual gauges cards not is showing correctly.

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, would it be possible to have a parameter to configure the number of decimals?

How can I put inner value to the left and outer value to the right? Also, how can I lower the title?

Thanks.

please add needle mode like https://www.home-assistant.io/dashboards/gauge/

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.