Modern take on Home Assistant gauge. This card has mostly the same config as the gauge included in HASS with few additions like template support and badge.
min, max, entity, icon and secondary (YAML only)Looks great!!
@selvalt7 , great work! Many thanks for this card.
Is it bug or feature? I get a view with a decimal. Is there an option to change this behaviour?
The default view inside the entity is without a decimal:
Thanks,
Yeah, it’s a bug which is fixed in the dev branch, so hopefully soon it will be available in the main branch.
It would be great if you could provide few yaml examples!
I’ve added few examples in the repository readme file on the dev branch.
Bonjour
comment peut on rendre plus opaque la jauge svp?
cordialement
Could you be more specific which part of gauge?
Hi,
Is it possible to change the thickness of the line and scale the text? It’s an layout of my pv panels but the graphic layout is a bit too small.
is there a way to use theme varibales for the color segements like var(–red-color) etc.?
Yes, here’s a code and image how it looks
segments:
- from: 0
color: var(--orange-color)
- from: 80
color: var(--green-color)
- from: 160
color: var(--red-color)
tried this but it goes black:
type: custom:modern-circular-gauge-badge
entity: sensor.temperatur_aussen
min: -20
max: 50
show_name: true
show_state: true
show_icon: true
smooth_segments: true
segments:
- color: var(--red-color)
from: -20
- color: var(--green-color)
from: 0
- color: var(--blue-color)
from: 10
- color: var(--red-color)
from: 30
name: Außen Temp.
ok had to remove smooth_segments: true
Because It seems that I forgot to implement css variables handling inside color interpolation function, so variables does not work with smooth_segments for now.
Nice card, I’m using the following config
type: custom:modern-circular-gauge
entity: sensor.alfen_monthly_energy
name: EV Energy
height: 200
header_position: bottom
min: 0
max: 650
decimals: 0
unit: kWh
needle: false
show_icon: true
show_unit: true
show_header: true
show_state: true
smooth_segments: true
adaptive_state_color: true
adaptive_icon_color: true
icon: |-
{% if is_state('sensor.alfen_active_power_total_socket_1', '0') %}
mdi:car-off
{% else %}
mdi:car-electric
{% endif %}
gauge_foreground_style:
color: adaptive
width: 6
gauge_background_style:
width: 8
color: rgba(200,200,200,0.3)
segments:
- from: 0
color:
- 18
- 147
- 94
- from: 200
color:
- 244
- 228
- 0
- from: 400
color:
- 255
- 117
- 20
- from: 500
color:
- 222
- 49
- 99
secondary:
entity: sensor.alfen_yearly_energy
unit: kWh
min: 0
max: 3500
show_gauge: inner
state_size: small
needle: false
segments:
- from: 0
color:
- 18
- 147
- 94
- from: 1000
color:
- 244
- 228
- 0
- from: 2000
color:
- 255
- 117
- 20
- from: 2800
color:
- 222
- 49
- 99
adaptive_state_color: true
animation_speed: 500
style: |
ha-card {
margin: 5px;
border-radius: 12px;
background: var(--card-background-color);
}
This is nice @elRadix!! Just built a couple of gauges yesterday and I really love how compact they can be and still show a ton of data.
Used my Sense energy monitor data and some sensor templates to give me kWh Cost and personal CO2 Emission (Carbon Footprint):
Outdoor UVI and Air Quality using WAQI and OpenUV integrations:
can you share the code for the UV gauge?
