I am trying to write a custom button for a meater probe. I want the button background to change color when a percentage of the target temperature is reached. I believe i have all the pieces, i just don’t know how they fit together and am looking for some help. This is my best effort in anything with home assistant so far, I barely know yaml and i don’t know jinja at all, so be gentle.
What i’m trying to achieve is… when the internal temp reaches 25% of the target, turn green, at 50 % turn orange, at 75 turn yellow…etc
This is what i have so far… I have tested the value template and it works to do the math as i believe it should and produces a percent number, i just don’t know how to connect them…
type: custom:button-card
entity: sensor.meater_probe_internal_1
name: Meater Probe 1
icon: mdi:thermometer
show_units: true
show_state: true
color: rgb(255,0,0)
value_template: "{{ ((states.sensor.meater_probe_internal_1.state|int) / (states.sensor.meater_probe_target_1.state|int) *100)|round(0)}}"
styles:
card:
- height: 200px
- width: 150px
- background-color: |
[[[
if (states['sensor.meater_probe_internal_1'].state > states['sensor.meater_probe_target_1']) return "green"; else return "gray"
]]]
name:
- color: black
- font-size: 20px
icon:
- height: 100px
- width: 100px
state:
- color: black
This is as it looks at the moment.
Part of the issue is that Custom Button Card doesn’t use Jinja, it uses JavaScript templates… You had a value_template: in your original, but that is not a valid configuration key for this card type and I couldn’t tell what you were trying to do with it, so I removed it. If you had some goal in mind for that template, please let us know and we can modify the card config.
type: custom:button-card
entity: sensor.meater_probe_internal_1
name: Meater Probe 1
icon: mdi:thermometer
show_units: true
show_state: true
color: rgb(255,0,0)
variables:
percentage: |
[[[ return (states['sensor.meater_probe_internal_1'].state / states['sensor.meater_probe_target_1'].state) ]]]
styles:
card:
- height: 200px
- width: 150px
- background-color: |
[[[
if (variables.percentage >= 1) return "red";
else if (variables.percentage >= .75) return "orange";
else if (variables.percentage >= .5) return "yellow";
else if (variables.percentage >= .25) return "green";
else return "gray"
]]]
name:
- color: black
- font-size: 20px
icon:
- height: 100px
- width: 100px
state:
- color: black
1 Like
Thank you SO!!! Much!! This is what i was looking to achieve. I’ve spent probably the better part of 5 whole days trying to figure this out which speaks to my level of knowledge with this stuff. But still i try and hope to get better. You made this look easy af.
In my own opinion I’m not doing anything special with it, Simply monitoring temps as an easy visual queue with the card
This is where I landed with the final layout (note: probes are not ‘on’ at the moment)
selecting the picture logo navs to another page that displays temperature history (I haven’t figured out a better way to display this data in a layout that is not a single vertical stack and a more consolidated way, probably need to do some more tinkering with it.)
Here is the final card code that i landed on if anyone else wants to recreate this
square: false
type: grid
cards:
- type: picture
image: local/SavedImages/MEATER-Logo-01.png
tap_action:
action: none
hold_action:
action: none
theme: Caule Light Gray
square: true
- type: grid
cards:
- type: custom:button-card
entity: sensor.meater_probe_internal_1
name: Meater Probe 1
icon: mdi:thermometer
show_units: true
show_state: true
color: rgb(255,0,0)
variables:
percentage: >
[[[ return (states['sensor.meater_probe_internal_1'].state /
states['sensor.meater_probe_target_1'].state) ]]]
styles:
card:
- height: 150px
- width: 105px
- background-color: |
[[[
if (variables.percentage >= 1) return "red";
else if (variables.percentage >= .75) return "orange";
else if (variables.percentage >= .5) return "yellow";
else if (variables.percentage >= .25) return "green";
else return "gray"
]]]
name:
- color: black
- font-size: 15px
icon:
- color: |
[[[ if (variables.percentage >= 1) return "black" ;
else return "red" ]]]
- height: 75px
- width: 75px
state:
- color: black
- type: custom:button-card
entity: sensor.meater_probe_internal_2
name: Meater Probe 2
icon: mdi:thermometer
show_units: true
show_state: true
color: rgb(255,0,0)
variables:
percentage: >
[[[ return (states['sensor.meater_probe_internal_2'].state /
states['sensor.meater_probe_target_2'].state) ]]]
styles:
card:
- height: 150px
- width: 105px
- background-color: |
[[[
if (variables.percentage >= 1) return "red";
else if (variables.percentage >= .75) return "orange";
else if (variables.percentage >= .5) return "yellow";
else if (variables.percentage >= .25) return "green";
else return "gray"
]]]
name:
- color: black
- font-size: 15px
icon:
- color: |
[[[ if (variables.percentage >= 1) return "black" ;
else return "red" ]]]
- height: 75px
- width: 75px
state:
- color: black
- type: custom:button-card
entity: sensor.meater_probe_internal_3
name: Meater Probe 3
icon: mdi:thermometer
show_units: true
show_state: true
color: rgb(255,0,0)
variables:
percentage: >
[[[ return (states['sensor.meater_probe_internal_3'].state /
states['sensor.meater_probe_target_3'].state) ]]]
styles:
card:
- height: 150px
- width: 105px
- background-color: |
[[[
if (variables.percentage >= 1) return "red";
else if (variables.percentage >= .75) return "orange";
else if (variables.percentage >= .5) return "yellow";
else if (variables.percentage >= .25) return "green";
else return "gray"
]]]
name:
- color: black
- font-size: 15px
icon:
- color: |
[[[ if (variables.percentage >= 1) return "black" ;
else return "red" ]]]
- height: 75px
- width: 75px
state:
- color: black
- type: custom:button-card
entity: sensor.meater_probe_internal_4
name: Meater Probe 4
icon: mdi:thermometer
show_units: true
show_state: true
color: rgb(255,0,0)
variables:
percentage: >
[[[ return (states['sensor.meater_probe_internal_4'].state /
states['sensor.meater_probe_target_4'].state) ]]]
styles:
card:
- height: 150px
- width: 105px
- background-color: |
[[[
if (variables.percentage >= 1) return "red";
else if (variables.percentage >= .75) return "orange";
else if (variables.percentage >= .5) return "yellow";
else if (variables.percentage >= .25) return "green";
else return "gray"
]]]
name:
- color: black
- font-size: 15px
icon:
- color: |
[[[ if (variables.percentage >= 1) return "black" ;
else return "red" ]]]
- height: 75px
- width: 75px
state:
- color: black
columns: 4
columns: 1
