To me, it looks like a cache issue because the gauge should look like 360 degrees one.
You are absolutely right. After clearing the cache it works fine. Thank you.
Hi, I am trying to use templates for âfromâ values for the gauge colors so the colors are dynamic, depending on a setting. I get the wanted values when checking via the developer tools. However the gauge does not colorize as expected.
When the values are entered directly as numbers, it works.
What am I doing wrong?
type: custom:modern-circular-gauge
secondary: {}
tertiary: {}
entity: sensor.temperatur
min: 20
max: "{{ states(\"sensor.soll_temperatur\") | float(0) + 10}}"
segments:
- from: 20
color:
- 0
- 255
- 251
- from: "{{ states(\"sensor.soll_temperatur\") | float(0) - 30}}"
color:
- 0
- 255
- 191
- from: "{{ states(\"sensor.soll_temperatur\") | float(0) - 0}}"
color:
- 12
- 198
- 33
- from: "{{ states(\"sensor.soll_temperatur\") | float(0) + 5}}"
color:
- 234
- 238
- 27
- from: "{{ states(\"sensor.soll_temperatur\") | float(0) + 10}}"
color:
- 255
- 0
- 0
gauge_foreground_style:
color: adaptive
gauge_background_style:
color: adaptive
Thanks for any help!
Just for the record, putting the entitiy inside of â instead of " solved it.
i.e.:
- from: "{{ states('sensor.soll_temperatur') | float(0) - 30}}"
Iâm gonna need to take a look why putting " breaks color segments template. Iâve always used ' so maybe thatâs why this issue exists.
Sorry for late reply.
Just have to ask, is there a way to display som kind of actual needle? I LOVE this card because I can change so much, and the âneedle dotâ is ok, but I have a design in mind that would be so much better if I had all the customisation with this card but some kind of actual needle
Iâm not sure what you mean with âsome kind of actual needleâ,
but I am using this code to modify the needle look to my needs.
needle: true
needle_color: Red
shapes:
main_needle: M -30 0 L -27 -4 L -50 0 L -27 4 z
If the SVG-Code is not readable to you, ChatGPT will explain the code in detail.
In the image above your last comment I have drawn on the image on what looks like a needle, I would prefer just a line from the center of the gauge, or a long arrow, but really anything except just a dot.
But it seems like you can modify the look of it with your code, but cant get it to work. Would you consider sharing a complete YAML block for one you have made so I can see where I go wrong?
Sorry, I made a mistake. My code was not from the modern-circular-gauge it was from the gauge-card-pro which looks partly compareable. So maybe the needle of this gauge here cannot be modified.
It is the same pitty that can be observed for many HACS-cards. Instead of having 1 perfect card providing all the requested features, we are having a lot of cards but each of it only providing parts of the needed features.
An AI-Function in the sense of âMerge all the best togetherâ would be highly appreciated.
I love the Modern Circular Gauge Cards and I use some for Zigbee Plugs. Not all of these Plugs are online the whole time. When the source is not available the Modern Circular Gauge shows the full circle, like maximum power. Is there anything I could do to set it to zero instead?
When entity state is unavailable card should reflect that and do not show the full circle, only the gauge background is supposed to be present with state displaying localized âunavailableâ. But if you want it to display zero instead of unavailable you could use templates to do that.
Maybe your entity state is not really unavailable and card is confused displaying full circle. Some images would be helpful to diagnose it.
Hi, thank you for your answer. I think that the entity state is really unavailable. I will show some screenshots of my problem. I donât need a real âzeroâ. I wrote this some misunderstanding. I want not to see the full power circle when the entity ist not available.
If you need more information let me know what you need.
I thought that the problem was with primary entity but thanks to your screenshot I know that the secondary and tertiary entity has a bug with unavailable states.
I will try to release a new version with bug fix and a few new features hopefully next week.
Thank you
That would be great. Thank you very much.
It works
. Thank you very much. ![]()
Hi , Love the card⊠I would love to be able to put the icon on the top/bottom left or right outside the guage? 2nd picture to show possible locations? it gets a bit cramped between the name and the icon on smaller devices. Is there any way to do this? , I tried with custom mods but keep getting stuck. Thanks
Right now natively you can only change vertical position with âicon_vertical_positionâ.
I will check later if there is a way to modify horizontal position with card mod but I will keep in mind to implement the native config later.
Liking this card so far⊠yet to play with it too much, but Iâm stumbling on the very first hurdle. Iâm copying the template for the creation of the temperature graph.
Do I need to do something to make these extra items in the templates work? Is this automatic, or is this something else I have to somehow create?
secondary:
entity: >-
{% if is_state("binary_sensor.outside_zigbee_temperature_rising", "on") %}
Rising {% elif is_state("binary_sensor.outside_zigbee_temperature_falling",
"on") %} Falling {% endif %}
max: "{{states('input_number.max_number')}}"
Itâs creating the max temperature super high, when it should be around the 35ish, it is reading now. At the moment, it looks like itâs around 100 (God, I hope it doesnât get there).
I donât know how I could create a binary sensor for rising or falling manually ![]()
Whatâs the state of your input_number.max_number helper? Do you want to use other entity for max gauge range or set it static to some value?
To create a binary sensor for rising and falling you can use trend helper.








