How to Use Dual Gauge Card in Home Assistant

by Danny
0 comment

READING TIME: 6 MINUTES

Have you ever wanted to display multiple values in the same gauge card in Home Assistant? With the Dual Gauge card, you can! This is a great way to compare similar stats between two entities within the same card.

During my testing I was only able to get green, blue, white, grey, and yellow to work whenever you specify a color in the yaml ( color: var(–label-badge-blue). However, if you use RGB colors you can customize these to your liking ( color: rgb(85,190,233) ) The easiest site I’ve found to choose custom RGB colors for this card is htmlcolorcodes.com.

I’ll show examples of dual gauge cards using both methods below.

Let’s get started!


How To Setup & Install Dual Gauge Card in Home Assistant

This is another HACS Lovelace integration, and can be installed just like any others you’ve setup. Just click HACS in your Home Assistant sidebar > Frontend > search for “Dual Gauge Card“.

Once installed, you won’t be able to add a card from the frontend UI. You will have to paste the code examples into a Manual Card. (Add Card > Manual). Then, just replace the entities.

The unit: code specifies what is shown next to the number. You can use things like watts, percentage signs, symbols, etc.

The label: block is the identifying name that goes below the number. This is where you’d add device name, room, person, CPU/RAM/GPU, etc.

If you just look at the yaml below you can see a few different ways I’ve utilized these. Note: Use shorter words and abbreviations so things don’t overlap.


Energy Usage (Watts)

If you are having fun with the new Energy Dashboard, you aren’t limited to just monitoring power there. You can use the Dual Gauge card to display the current power consumption of individual devices as well. I am monitoring two Peanut Plugs for this one which have their firmware updated OTA from within Home Assistant. Since my plugs rarely go over 10w of power usage, I set my max value to 20.

If you haven’t set up your Energy Dashboard yet, I highly recommend following my Energy Dashboard in Home Assistant guide.

type: custom:dual-gauge-card
title: Power
outer:
  entity: sensor.wife_nightstand_power
  unit: w
  label: Lamp
inner:
  entity: sensor.danny_nightstand_power
  unit: w
  label: Plug
min: 0
max: 20
colors:
  - color: rgb(85,190,233)
    value: 1
  - color: rgb(143,233,85)
    value: 5
  - color: rgb(85,233,199)
    value: 9
  - color: rgb(157,233,85)
    value: 9.6

Plex/Tautulli Stats

If you would like to display your Plex bandwidth stats in a dual gauge card, here’s the YAML you would use. If you would like to do the same, you can follow my Add Tautulli to Home Assistant guide to pull in these stats.

The “outer” ring displays the number of concurrent streams. At most, I have 3 people watching Plex at any given time so I’ve customized my max: to 5, and also set different colors for each value.

The “inner” ring displays the total bandwidth used. Total bandwidth is usually no more than 15mbps, so I set the inner ring max: to 20.

type: custom:dual-gauge-card
title: Plex
outer:
  entity: sensor.tautulli
  label: streams
  min: 0
  max: 5
  colors:
    - color: var(--label-badge-blue)
      value: 1
    - color: var(--label-badge-green)
      value: 2
    - color: var(--label-badge-red)
      value: 3
inner:
  entity: sensor.tautulli_total_bandwidth
  label: mbps
  min: 0
  max: 15
  colors:
    - color: var(--label-badge-blue)
      value: 1
    - color: var(--label-badge-green)
      value: 9
    - color: var(--label-badge-red)
      value: 12

Dual Gauge Card for Thermostat + Room Sensor

For this card, I am using my Ecobee Thermostat plus a separate sensor I have in my kitchen. Rather than specifying different colors for each sensor, I’m using the same min/max values

type: custom:dual-gauge-card
title: Temp (°F)
outer:
  entity: climate.my_ecobee
  attribute: current_temperature
  label: Main
inner:
  entity: sensor.lil_bee_temperature
  label: Lil' Bee
min: 65
max: 75
colors:
  - color: rgb(85,190,233)
    value: 65
  - color: rgb(143,233,85)
    value: 70
  - color: rgb(85,233,110)
    value: 72
  - color: rgb(157,233,85)
    value: 74

Battery Level Dual Gauge Card

If you would like to compare the battery level of two devices such as cell phone batteries, you can also make use of the dual gauge card. I prefer using a Battery State Card to display batteries of everything in one collapsible card, but if you want to monitoring battery levels of just a couple devices, this is a really cool way to display it.

Since phone battery levels operate in percentages of 0-100%, that’s what I set my min/max values to. I am using the htmlcolorcodes.com website to specify RGB colors.

type: custom:dual-gauge-card
title: Phone Battery
outer:
  entity: sensor.pixel_3_wife_battery_level
  unit: '%'
  label: Wife
inner:
  entity: sensor.pixel_5_danny_battery_level
  unit: '%'
  label: Danny
min: 0
max: 100
colors:
  - color: 'rgb(233,103,85)'
    value: 25
  - color: 'rgb(233,177,85 )'
    value: 50
  - color: 'rgb(231,233,85)'
    value: 75
  - color: 'rgb(157,233,85)'
    value: 90

Computer Hardware Utilization

If you would like to display your vrious computer stats, such as RAM, CPU usage, GPU usage, etc, you can also display that is a dual gauge card. I’m using HASS Workstation Service to pull in this data.

type: custom:dual-gauge-card
title: PC (%)
outer:
  entity: sensor.cpuload
  label: CPU
inner:
  entity: sensor.memory
  label: RAM
min: 0
max: 80
colors:
  - color: rgb(85,190,233)
    value: 1
  - color: rgb(143,233,85)
    value: 25
  - color: rgb(85,233,110)
    value: 50
  - color: rgb(157,233,85)
    value: 70

Wrapping Up

Hopefully you guys found this tutorial useful with all of the included examples I’ve given!

Rather than using standard gauge cards (which can take up a lot of Lovelace dashboard real estate), this is a great way to view common values in a single card.


My Favorite Home Assistant Devices

Below are some of the Home Assistant-compatible devices I personally use in my home. I highly recommend each of them.

The full list of all Home Assistant compatible & recommended devices I use can be found on my Equipment List page.

0 comment

You may also like

Leave a Comment