Gauge Card Pro 🌈

[stefan1982 (Stefan)]

I think you can do that by making a template sensor, where you are free to use jinja.

[Miura]

The entity and entity2 fields are fairly static. They are just ‘text’ fields and are used as such. A solution could be to use the value field.

[mariorpc (Mário Cardoso)]

Hello there!
I love your Card, thank you!

It is possible to put a mdi icon instead of plain text in the Titles camp?
Like the one I attached. That is from dual-gauge-card.

Thank you!

[Miura]

[mariorpc (Mário Cardoso)]

Hello! Thanks for your reply.

But what I want to do is replace the text I marked in red and still see both values ​​(temperature and humidity).

I assume that doesn’t work… can you add that feature?

[Miura]

That text indeed cannot be an icon. I feel it’s better to have the icons inside the gauge and than template the title(s) to show the values.

[MarkusTec]

Any additional insights on this display issue? I noticed that setting the gradient to “false” (i.e. turning off), the inner arc value metrics are more stable.

[MarkusTec]

Also, with the gradient set to “true” or on, I notice cross platform inconsistencies between the iOS companion app on iPhone, iPad as well as desktop browsers (Chrome and Safari) i.e. the same gauges display the values on one device and not on the other. Appears random.

[Miura]

Can you try pre-release v1.7.1-b1? It’s got performance improvements. You need to manually download it through HACS

[MarkusTec]

Done! Now taking b1 for a test drive! Fingers crossed…

[mzijderhand]

I’m using an entity within the label of an icon, but the value of the entity is not updating like the value text.

        secondary_color: Yellow
      icon:
        type: template
        value: |-
          {% if states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 99  %} 
            {{ {"icon":'mdi:battery', "color": "#57C101", "label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 90  %} 
            {{ {"icon":'mdi:battery-charging-90', "color": "#69B307","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 80  %} 
            {{ {"icon":'mdi:battery-charging-80', "color": "#7CA50D","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 70  %} 
            {{ {"icon":'mdi:battery-charging-70', "color": "#8F9714","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 60  %} 
            {{ {"icon":'mdi:battery-charging-60', "color": "#A1891A","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 50  %} 
            {{ {"icon":'mdi:battery-charging-50', "color": "#B47C20","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 40  %} 
            {{ {"icon":'mdi:battery-charging-40', "color": "#C76E27","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 30  %} 
            {{ {"icon":'mdi:battery-charging-30', "color": "#D9602D","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 20 %}
            {{ {"icon":'mdi:battery-charging-20',"color": "#EC5233","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% elif states('sensor.solarbank_3_e2700_pro_state_of_charge') |
            float  >= 10 %}
            {{ {"icon":'mdi:battery-charging-10', "color": "#FF453A","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "%" } }}
          {% else %}
            {{ {"icon":'mdi:battery-e', "color": "#e60000","label": (states('sensor.solarbank_3_e2700_pro_state_of_charge')) | string + "!" } }}
          {% endif %}

[Miura]

This indeed seems to happen sometimes. You can use entity_id to supply the entity or a list of entities that should help trigger updates

Readme:

[Bastiaan1977 (Bastiaan)]

Hi @StefaanVD , mind sharing your code to make this nice gauge? I love this gauge to see my current solar panel

thanks in advance
Bas

[MarkusTec]

@Miura

v1.7.1-b1

Just an update on running v1.7.1-b1 for almost 2 weeks. It appears negligibly better than the current release version, but unfortunately it’s still occasionally producing “blank value metrics” on both mobile and tablet dashboards. Let me know if there’s anything else I can do help resolve this bug?

[Miura]

Can you share the config of (at least) one of your problematic cards?

[Gianlu (Gianluca)]

Hi,
after updated to 2025.12, on my android Tablet (11" display) i have this view
( exmple i have tens of your wonderful cards in different views dash)
Config still be the same from several montths::

the first with little image is After done update, 2nd is previous before

It seems from my view:
with this release there are a lot of BIG changes in Companion App,
resizing from PC to Android or viceversa is completely lost

Thanks in advance for your reply

[Miura]

I don’t think that’s something I (can) control. It seems more related to your dashboard configuration. Try to look for things like section width for example

[Gianlu (Gianluca)]

yeaap I think so, not related to your card but in the system itself
I’m doing some tests starting from your suggestion:

• i am able to adapt the card based on the screen , with a mix on sections and config card
  but the sections and cards no longer adapt to the screens in use, I mean smartphone,tablet,monitor PC.
• No such of “upscaling” or “downscaling” proportional, I’m puzzled
• surely the terms are not correct I’m not a technician.

By the way:
thanks for your great job with these cards, you cannot imagine as they help me too much.

[DeltaNu1142]

I’m probably overlooking this somewhere… but I’ve not found a key or another way to change the background color of the card. I can hide the background, sure… but change the color? Would it require embedding this card with a hidden background in another card that has a background color?

EDIT: In the meantime, I just dropped three gauge pro cards into a horizontal stack:

[Miura]

I indeed don’t have native support for background colours. With card-mod you should be able to achieve this.