The ‘shortcut’ by doubling segments in the config to create the looks you just created is definitely my intended way and one of the reasons to remove support for severity. Any other way to achieve what you just did will become significantly more complex I think.
2 Likes
You sure this is working. Your custom repository would not install it, nor would using your asset file directly using local with the js file in my www folder. Anyone else get it working? version 0.9.1 Yes, Im comfortable installing integrations and cards.
What steps did you take at which point you would end up with “it won’t install”. Have you got it added as custom repo in HACS? Have you than been able to browse to the repo and see the readme?
Discovered the Gauge Card Pro and was the perfect fit to improve my power dashboard.
The top two are the standard Gauges included in home Assistant, combined those two into a single Gauge
yaml code
type: custom:stack-in-card
cards:
- type: entities
entities:
- text: Whole House
type: custom:text-divider-row
card_mod:
style: |
ha-card { --ha-card-border-width: 0; }
- type: gauge
entity: sensor.power_consumption_1_power
name: ""
needle: true
min: 0
segments:
- from: 0
color: "#43a047"
- from: 6000
color: "#ffa600"
- from: 8000
color: "#db4437"
max: 10000
card_mod:
style: |
ha-card { --ha-card-border-width: 0; }
- type: gauge
entity: sensor.power_consumption_1_current
name: ""
needle: true
min: 0
max: 65
segments:
- from: 0
color: "#43a047"
- from: 40
color: "#ffa600"
- from: 50
color: "#db4437"
card_mod:
style: |
ha-card { --ha-card-border-width: 0; }
- type: custom:gauge-card-pro
entity: sensor.power_consumption_1_power
min: "0"
max: "6500"
needle: true
gradient: true
gradient_resolution: high
segments:
- from: 0
color: var(--green-color)
- from: 2750
color: var(--yellow-color)
- from: 3750
color: var(--orange-color)
- from: 6000
color: var(--red-color)
entity2: sensor.power_consumption_1_current
inner:
min: "0"
max: "30"
mode: needle
gradient: true
gradient_resolution: high
segments:
- from: 0
color: var(--green-color)
- from: 15
color: var(--yellow-color)
- from: 20
color: var(--orange-color)
- from: 25
color: var(--red-color)
value_texts:
primary: "{{ states(entity) | float | round(0)}} W"
secondary: "{{ states(entity2) | float | round(1)}} A"
grid_options:
columns: 12
rows: auto
card_mod:
style: |
ha-card { --ha-card-border-width: 0; }
3 Likes
Awesome to see you like it!
I’m wondering whether you need to card_mod. I believe stack-in-card should hide the border/background of its cards automatically. I also provide native functionality to hide the background using hide_background: true in your config. Does this give you the same effect?
@Miura, Some testing revealed that I can use hide_brackground: true without the need for card_mod with stack-in-card for Gauge Card Pro, however still need card_mod to hide borders for the other remaining cards in the stack.
1 Like
I’ve made a lot of gauges over several dashboards but how more gauges how slower Home Assistant will be. After 15 gauges several errors because of the performance, so i’ve restored a backup. But the Gauge Card Pro cards looks very fine, bad that they slowdown the performance.
Certainly, here is the English translation of your message with appropriate technical phrasing:
Thank you for the excellent integration. Using the standard Gauge card, I implemented the following in order to achieve a color gradient and to set a fixed black line at 3300W.
`type: gauge
entity: sensor.shelly_3em_channel_a_power
name: W assorbimento
unit: " "
needle: true
min: 0
max: 4500
segments:
- from: 0
to: 2750
color: “#008f39” - from: 2750
to: 2800
color: “#33B35C” - from: 2800
to: 2850
color: “#66C94B” - from: 2850
to: 2900
color: “#99D63B” - from: 2900
to: 2950
color: “#CCDB2B” - from: 2950
to: 3000
color: “#FFFF00” - from: 3000
to: 3050
color: “#FFDF00” - from: 3050
to: 3100
color: “#FFCC00” - from: 3100
to: 3150
color: “#FFB500” - from: 3150
to: 3200
color: “#FF9F00” - from: 3200
to: 3250
color: “#FF7F00” - from: 3250
to: 3300
color: “#FF6600” - from: 3300
to: 3325
color: “#000000” - from: 3325
to: 3350
color: “#FF9F00” - from: 3350
to: 3400
color: “#FF7F00” - from: 3400
to: 3450
color: “#FF6600” - from: 3450
to: 3500
color: “#FF4D00” - from: 3500
to: 3550
color: “#FF3300” - from: 3550
to: 3600
color: “#FF1A00” - from: 3600
to: 3675
color: “#FF0D00” - from: 3675
to: 3750
color: “#FF0000” - from: 3750
to: 4500
color: “#FF0000”
grid_options:
columns: 6
rows: 4
`
Now, I’ve tried using a card with this integration, but I’m unsure whether it is possible to configure a fixed black indicator line, as I previously did.
type: custom:gauge-card-pro
entity: sensor.shelly_3em_channel_a_power
name: W assorbimento
unit: " "
needle: true
min: 0
max: 4500
gradient: true
segments:
- from: 0
color: green
- from: 2800
color: yellow
- from: 3300
color: orange
- from: 4000
color: red
Let me know if you’d like help reviewing the code or replicating the black threshold line using this new integration.
@mzijderhand That unfortunate to hear. Performance is definitely one of my focus point, but also most definitely the most challenging one. Unfortunately there is no native support for gradient, so I use a ‘gradient engine’ that produces very small colored segments. There’s a limit to what I can do. Upcoming v1.0 will include more resolutions including something like a ‘very low’ setting
@Diegocampy
Definitely possible, checkout how in this example:
2 Likes
I experience this lag, too. I have 8 of these cards in a horizontal stack (proxmox monitoring) and if i enable gradient i have so much lag that it’s impossible to edit - when i edit card it can take 5-10 seconds before what i press is shown. setting resolution to low improves things a lot, but disabling gradient at all solves problems.
I guess since you say that there’s no gradient engine built-in i guess there’s little you can do. However, your card is still extremely useful even without gradient, since what i miss most in original gauge card is placing more text into it… before your card I’ve had to solve that with vertical stack and additional button card just for text in a second line, which wasn’t exactly “nice”…
EDIT:
Upcoming v1.0 will include more resolutions including something like a ‘very low’ setting
that would be very usefull, i think. Looking forward to it!
1 Like
I’ve created a beta-release for v1.0.0. Besides added functionality (see release notes) this also includes an attempt to increase the performance of the gradient rendering. Famous developer words: This works on my machine:
@Protoncek and @mzijderhand (and others of course!)- as you both noted the performance degradation, I’d love to see if you are willing to try out this pre-release and let me know if you notice any improvement (in HACS press the three-dots → Redownload or enable beta release for my card).
2 Likes
thanks for the support and sorry if I didn’t understand well. Good work
First tests on my machine are good - no more lag even at highest gradient with beta version. Congratulations, it seems that you made it!
Although… i like “very low” setting a lot… 
I like those (not to) narrow chunks of the same color going from green via orange to red. It just might be my end setting…
1 Like
Really funny to see how something like the very_low setting can meet someone else’s taste, great you like it!
Have you been able, or could you test with multiple (you mentioned 8+) cards in one dashboard as well? Really curious to see if you are now able to set this up.
1 Like
Yes, i used same 8 cards as before, i only enabled gradient on all of them.
1 Like
I just released v1.0.0 - Enjoy!
1 Like
Really nice card. I really like all the options and possibilites. I’m experimenting to see if I can replace my current Dual Gauge with your version. With Dual Gauge it was possible to use card_mod to customize the look such as optimizing the space for the gauges. Is that possible with Gauge Card Pro?
The two cards to the left shows my current Dual Gauge, and the rightmost card is Gauge Card Pro.
2 Likes
I natively support coloring of pretty much each element and customising the font-size of the two titles. With card-mod you should be able to get quite far.
Has anyone used card_mod with Gauge Card Pro? I have a hard time finding out what to refer to in order to stretch the gauge (width/heigh).
I don’t think card_mod (or css for that matter) is going to be able to do that. The way the gauge is constructed cannot be changed by card_mod I think. I’ll think about more customisation options, but I’m really not sure yet where I want to go with that. It implies quite some work as well, as all the sizes are dependant on each other