Lovelace: dual gauge card

Share your Projects! Dashboards & Frontend
1

Hi everyone!

Inspired by ciotlosms gauge card I created a similar card which shows two gauges at once.

I’m using completly new CSS because the styles in the ciotlosms version weren’t suitable for a second gauge - and because I like fiddling with CSS sometimes :wink:

It’s still a bit “work in progress” but I already use it “productiv” for my own climate controls.

Installation works as usual: copy dual-gauge-card.js to your www directory and add the url to the resources section of your lovelace config. (detailed instructions may follow if requested)

I hope someone has a use for this and I’d love to get some feedback!

19 Likes
2

Thank you for your work.
I tried it and looks really nice.
I have 2 sensors in the same room, so it’s nice to compare them in one picture.
image

3

can this gauge card be scaled?

4

i don’t think it can be scaled.

5

That’s one of the reasons I call it work in progress :wink:

There is a css-variable for the width of the card as a whole and all other values are relative to this. This must be set statically in pixels, thats why the card doesn’t scale dynamically.

I will however make that variable configurable, so expect an update soon.
https://github.com/Rocka84/dual-gauge-card/issues/2

I hope that helps, @jnvd3b

6

Btw: feel free to add issues on github!

1 Like
7

Option “cardwidth” is implemented now. Here’s a new example:
dual_gauge_screenshot2

- type: horizontal-stack
  cards:
  - type: custom:dual-gauge-card
    cardwidth: 230
    title: Bedroom
    min: -20
    max: 40
    outer:
      entity: climate.sz_heizung
      label: "Current"
      attribute: current_temperature
      unit: "°"
    inner:
      entity: climate.sz_heizung
      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
  - type: custom:dual-gauge-card
    cardwidth: 230
    title: Bathroom
    min: -20
    max: 40
    outer:
      entity: climate.bad_heizung
      label: "Current"
      attribute: current_temperature
      unit: "°"
    inner:
      entity: climate.bad_heizung
      label: "Target"
      attribute: temperature
      unit: "°"
    colors:
      - color: "#8263b1"
        value: 0
- type: custom:dual-gauge-card
  title: Living room
  cardwidth: 400
  min: -20
  max: 40
  outer:
    entity: climate.wz_heizung
    label: "Current"
    attribute: current_temperature
    unit: "°"
  inner:
    entity: climate.wz_heizung
    label: "Target"
    attribute: temperature
    unit: "°"
5 Likes
9

Dear Rocka84,

this is my most favorite custom card by far. :slight_smile: Great work!

Quick question: I am using this card to display temperature and humidity of a room within one card. This saves space in lovelace because I have a lot (> 10 temperature/humidity sensors spread all over the house) and looks really nice too. :slight_smile: Right now I use a custom sensor template for each sensor to round the temperature and the humidity value to one decimal place in order to avoid overlapping of the left and the right sensor text in the dual gauge card. Is there a trick to round/display to only one decimal place, e.g., by using “attribute” without having to define a custom sensor template?

Thanks in advance and kind regards!

10

Great card! Exactly what I was looking for! I need to move the inner and outer labels as I am using this to measure watts of my power usage and input of my solar, so the values are 4 digits and the label name itself. I have tried CSS but I may be doing it wrong. Can you help me move this with CCS? AN example would be great. Also, I want to compare the values of the inner and outer that change the color if the inner value becomes greater than out value. Thanks in advance.

1 Like
11

Seems there’s a problem after upgrading to 0.106 :slight_smile:

Cannot add property min, object is not extensible
type: 'custom:dual-gauge-card'
title: Living room
min: -20
max: 40
outer:
  entity: climate.living_room
  attribute: sensor.energy_production_tarif_1
  label: Current
  unit: °kWh
inner:
  entity: sensor.energy_consumption_tarif_1
  label: Target
  attribute: temperature
  unit: °kWh
colors:
  - color: var(--label-badge-red)
    value: 20
  - color: var(--label-badge-green)
    value: 25
  - color: var(--label-badge-yellow)
    value: 18
  - color: var(--label-badge-blue)
    value: 0
  - color: var(--paper-blue-400)
    value: -40
12

Issue raised here for it.

1 Like
14

@Rocka84 do you have any plans to update this card with the fixs on github, i used to use this quite a bit in my config and would be nice to have the real HACS version instead of my hacked JS file.

1 Like
15

Getting error that this card is on the blacklist. Is this card no longer supported?

16

Hi, this card is great :slight_smile:

Is it possible to add others / same colors steps ?

Example :
0 to 25 in red
25 to 40 in yellow
40 to 60 in green
60 to 85 in yellow
85 to 100 in red

17

Good News everybody!
I recently began to take care of this card again. Sorry for being absent for such a long time. I won’t go into detail but work, family and other hobbys kept me from being active in the home assistant community for some months.
My home assistant setup wasn’t quite up to date as well (I upgraded from 0.103 to 0.108 last weekend) so I didn’t experience all the bugs myself. In other words: it worked for me :roll_eyes:
Sorry about that.

@dacorn Could you open an issue over at github? Maybe we can figure something out together.

@TheCosmicGate @BertrumUK @james_hiscott The fixes have now been applied and the card is working in HA 0.108 again.

@bschatzow totally my fault but I’m working on it. I opened a pull request on hacs to get off the blacklist. Please see your issue over on github.

@pitp2 If I get this right, this is already possible. See the color config section and the examples in the readme file.

2 Likes
18

Awesome news @Rocka84 glad to know your able to have some time to look at it again. Will add the card again when its off the black llist. Thanks

19

thnx @Rocka84 but at the moment still “black listed” ?

20

Yes, unfortunately. As I mentioned before I opened a pull request to get off that list yesterday but when and if that is accepted is beyond my control.

See https://github.com/hacs/default/pull/343

1 Like
21

Looking on the HACS discord channel I believe from Ludeeus statement this should be able to be unlocked by you. I don’t know if it is true, just passing on what I read. I it is not, I’ll comment back in the discord as Ludeeus is usually very responsive.

fun fact, all publishers have write access (at least for now) to the "default" repo, when 3 approve (and CI passes) anyone can merge, this way it's not locked to just me
If a PR needs a retrigger of the CI, just add the "recheck" label to it
22

Its off the blacklist now. Yay :grinning:

But still get the below. Boo :frowning_face:

Cannot add property min, object is not extensible
type: 'custom:dual-gauge-card'
title: Steps
outer:
  entity: sensor.total_steps
  label: James steps
inner:
  entity: sensor.total_steps2
  label: Debs steps