splendid: works like a charm ! Thanks a lot.
1 Like
For icon template the elif doesn’t work by me.
icon:
type: template
value: |-
{% if states('sensor.toyota_fuel_level', '=< 25') %}
{{ { "icon": 'mdi:fuel', "color": "#FF453A" } }}
{% elif states('sensor.toyota_fuel_level', '=> 25') %}
{{ { "icon": 'mdi:fuel', "color": "#00ff00" } }}
{% endif %}
You need something like:
states('sensor.toyota_fuel_level') | float =< 25
Changed to
value: |-
{% if states('sensor.toyota_fuel_level') | float =< 25) %}
{{ { "icon": 'mdi:fuel', "color": "#FF453A" } }}
{% elif states('sensor.toyota_fuel_level') | float => 25) %}
{{ { "icon": 'mdi:fuel', "color": "#00ff00" } }}
{% endif %}
I see no icon.
What do you get when you paste the template in Developer Tools → Template?
Or just this part:
{{ states('sensor.toyota_fuel_level') }}
The syntax also needs to be <=
Works, typo the ‘)’ behind 25.
icon:
type: template
value: |-
{% if states('sensor.toyota_fuel_level') | float <= 25 %}
{{ { "icon": 'mdi:fuel', "color": "#FF453A" } }}
{% elif states('sensor.toyota_fuel_level') | float >= 25 %}
{{ { "icon": 'mdi:fuel', "color": "#00ff00" } }}
{% endif %}
1 Like
My config for this gauge is;
type: custom:gauge-card-pro
segments:
- from: 0
color: var(--light-green-color)
- from: 30
color: var(--green-color)
- from: 70
color: var(--green-color)
- from: 100
color: "397722"
needle: false
gradient: true
titles:
primary: Fan Speed
entity: sensor.ventilation_fan_load_percentage
hide_background: true
entity2: sensor.ventilation_intake_pressure
grid_options:
columns: 6
rows: 2
gradient_resolution: high
min: 10
max: 100
Rereading this again; wondering if that ‘min: 10’ is what’s causing it? I’ll change that to 0 and see what happens!
The way this type of gauge works is by creating a semi-circle image and rotate that to the desired ‘value’ (angle). The remaining part of the semi-circle is hidden beneath the baseline. What I think happens in your case is that you see just 1px of both ends of the circle.
I have tried to recreate the issue on my screens/browser but it doesn’t happen on my machine. However, in the next release I’ve included a fix which most likely solves your issue
1 Like
Great work on the low res segments in the new version.
1 Like
Thanks! Gotta give @Protoncek some credit here 
1 Like
Ahh… i was just “P.I.T.A.” here, wanting extra features… 
But this with number for gradient resolution really rocks!
1 Like
You have made it to Youtube https://www.youtube.com/watch?v=1QH25Qb-QRs
2 Likes
Resting Heart Rate
segments:Non Gradient color segmentsvalue_texts:secondary_value:Template to produce a word ratingvalue_texts:secondary_color:Template to change secondary text color inline with segments
Card Code
type: custom:gauge-card-pro
entity: sensor.cph2271_resting_heart_rate
segments:
- from: 50
color: purple
- from: 57
color: blue
- from: 63
color: limegreen
- from: 67
color: lime
- from: 71
color: gold
- from: 76
color: darkorange
- from: 83
color: red
needle: true
gradient: false
titles:
primary: Resting Heart Rate
min: 45
max: 88
value_texts:
secondary: >-
{% set bpm = states('sensor.cph2271_resting_heart_rate') | float(default=0)
%} {% if bpm >= 50 and bpm <= 56 %}
Athlete
{% elif bpm >= 57 and bpm <= 62 %}
Excellent
{% elif bpm >= 63 and bpm <= 66 %}
Great
{% elif bpm >= 67 and bpm <= 70 %}
Good
{% elif bpm >= 71 and bpm <= 75 %}
Average
{% elif bpm >= 76 and bpm <= 82 %}
Below Average
{% elif bpm >= 83 %}
Poor
{% else %}
Unknown
{% endif %}
secondary_color: >-
{% set bpm = states('sensor.cph2271_resting_heart_rate') | float(default=0)
%} {% if bpm >= 50 and bpm <= 56 %}
purple
{% elif bpm >= 57 and bpm <= 62 %}
blue
{% elif bpm >= 63 and bpm <= 66 %}
limegreen
{% elif bpm >= 67 and bpm <= 70 %}
lime
{% elif bpm >= 71 and bpm <= 75 %}
gold
{% elif bpm >= 76 and bpm <= 82 %}
darkorange
{% elif bpm >= 83 %}
red
{% else %}
black
{% endif %}
1 Like
I saw it pop-up on my youtube, I was shocked! Never imagined my card would get this kind of traction 
Great example, thanks for sharing! At some point I changed the 2nd value_text from being tied to the inner-gauge to just independent elements, exactly for use-cases like this
2 Likes
Trying to do the same on a card for a Lifepoe battery but the primary and secondary colors are not changing can’t see what I’m getting wrong any help would be appreciated
cards:
- type: custom:gauge-card-pro
segments:
- from: 20
color: red
- from: 40
color: "#FFA500"
- from: 60
color: rgb(255, 255, 0)
- from: 75
color: var(--green-color)
needle: false
gradient: true
titles:
primary: SOC
secondary: Current
primary_color: white
secondary_color: yellow
primary_font_size: 12pt
secondary_font_size: 10pt
entity: sensor.bp00_battery
entity2: sensor.bp00_current
inner:
segments:
- from: -20
color: red
- from: 0
color: "#FFA500"
- from: 10
color: rgb(255, 255, 0)
- from: 20
color: var(--green-color)
max: 20
mode: severity
gradient: true
gradient_resolution: medium
min: -20
min: 20
max: 100
hide_background: true
value_texts:
primary_font_size_reduction: 10
secondary_color: |-
{% set cur = states('sensor.bp00_current) | float(default=0)
%} {% if cur <= 0 and cur <= 2 %}
red
{% elif cur >= 3 and cur <= 5 %}
yellow
{% elif cur >= 6 and cur <= 10 %}
gold
{% elif cur >= 11 and cur <= 15 %}
limegreen
{% elif cur >= 16 %}
green
{% else %}
black
{% endif %}
primary_color: |-
{% set soc = states('sensor.bp00_battery) | float(default=0)
%} {% if soc >= 0 and soc <= .30 %}
red
{% elif soc >= .31 and soc <= .50 %}
yellow
{% elif soc >= .51 and soc <= .75 %}
gold
{% elif soc >= .76 and soc <= .80 %}
limegreen
{% elif soc >= .81 %}
green
{% else %}
black
{% endif %}
icon:
type: template
value: |-
{% if is_state('binary_sensor.bp00_charging', 'on') %}
{{ { "icon": 'mdi:battery-charging', "color": "#00ff00" } }}
{% endif %}
gradient_resolution: medium
Figured out the issue here’s the corrected code was missing a ’ after naming the sensor
,
secondary_color: >-
{% set cur = states(‘sensor.bp00_current’) | float(default=0)
%} {% if cur <= 0 and cur <= 2 %}
red
{% elif cur >= 3 and cur <= 5 %}
yellow
{% elif cur >= 6 and cur <= 10 %}
gold
{% elif cur >= 11 and cur <= 15 %}
limegreen
{% elif cur >= 16 %}
green
{% else %}
black
{% endif %}
primary_color: >-
{% set soc = states(‘sensor.bp00_battery’) | float(default=0)
%} {% if soc >= 0 and soc <= 10 %}
red
{% elif soc >= 11 and soc <= 50 %}
yellow
{% elif soc >= 51 and soc <= 75 %}
gold
{% elif soc >= 76 and soc <= 80 %}
limegreen
{% elif soc >= 81 %}
green
{% else %}
black
{% endif %}
,
1 Like
Currently not possible, but it’s something I’ve got in my head for the somewhat longer term
2 Likes