Rofo
February 20, 2023, 1:23pm
1
I’m trying to take the value of a power monitoring plug and if its above 2 watts, change the colour of an icon. This is what I have so far:-
type: custom:button-card
entity: sensor.tz3000_okaz9tjs_ts011f_active_power_2
tap_action:
action: navigate
navigation_path: /dashboard-rooms/office
icon: mdi:desktop-classic
name: Office
styles:
card:
- height: 100px
- font-size: 18px
- font-weight: normal
- icon:
- color: |
[[[
var is_on = parseFloat(entity.state)>2? 'on' : 'off';
if (is_on == "on") return "#4D4D4D";
if (is_on == "off") return "#FFFFFF";
]]]
I added parseFloat incase the value of entity.state was not a numeric, but I can’t seem to get the colour to change from anything other than white.
I can see the value I need via the dev tools templates menu:-
What am I doing wrong ?
P.S. I do have working examples, but they require the state of the entity to be a specific value, rather than greater than.
type: custom:button-card
entity: light.moes_rgb_bulb_first_floor_hall_light
tap_action:
action: navigate
navigation_path: /dashboard-rooms/hallways
name: Hallways
styles:
card:
- height: 100px
- font-size: 18px
- font-weight: normal
state:
- value: 'on'
icon: mdi:faucet
color: yellow
- value: 'off'
icon: mdi:lightbulb
color: rgb(68,115,158)
jchh
February 20, 2023, 2:03pm
2
Try this:
- color: |
[[[
if (states['sensor.tz3000_okaz9tjs_ts011f_active_power_2'].satte > 2) return "#4D4D4D";
if (states['sensor.tz3000_okaz9tjs_ts011f_active_power_2'].satte <= 2) return "#FFFFFF";
]]]
…might need quotes around the 2 ➜ '2'
Rofo
February 20, 2023, 2:19pm
3
Unfortunately still doesn’t work… Icon stays white with this code:-
- icon:
- color: |
[[[
if (states['sensor.tz3000_okaz9tjs_ts011f_active_power_2'].state > 2) return "#4D4D4D";
if (states['sensor.tz3000_okaz9tjs_ts011f_active_power_2'].state <= 2) return "#FFFFFF";
]]]
I suspect its because the entity is defined earlier in the button card config, and you usually then access its state by using ‘entity.state’
I can get around it by creating a template sensor but wondered if there was a way of doing it directly in the card.
Rofo
February 20, 2023, 2:33pm
4
Turns out the answer was in the docs all along:
state:
- value: 2
operator: '>='
icon: mdi:desktop-classic
color: yellow
- value: 2
operator: '<'
icon: mdi:desktop-classic
color: rgb(68,115,158)
1 Like
jchh
February 20, 2023, 2:58pm
5
No, you can still reference the entity as I showed. I didn’t think entity.state worked for custom:button-card though - good to know!
Glad you solved it.
This isn’t work for me. Any clue? Here is my template:
energy:
styles:
state:
- box-sizing: border-box
- display: flex
- align-items: end;
- font-family: ui-rounded, system-ui, "SF Pro Text", Roboto, sans-serif
# - color: "var(--primary-text-color)"
- grid-area: value
- font-size: 12px
- line-height: 15px
- font-weight: 600
- text-align: left
- width: 100%
- align-self: end
- value: 0.3
operator: '>='
color: rgb(252,127,3)
- value: 0.3
operator: '<'
color: rgb(111,176,0)
jchh
October 13, 2023, 9:43am
7
Shouldn’t it be:
styles:
energy:
- box-sizing: border-box
- display: flex
- align-items: end;
- font-family: ui-rounded, system-ui, "SF Pro Text", Roboto, sans-serif
# - color: "var(--primary-text-color)"
- grid-area: value
- font-size: 12px
- line-height: 15px
- font-weight: 600
- text-align: left
- width: 100%
- align-self: end
states:
- value: 0.3
operator: '>='
color: rgb(252,127,3)
- value: 0.3
operator: '<'
color: rgb(111,176,0)
I am not sure. The first line is the name of the template so it can’t be styles . But following your code I could separate styles and states and see what happens.
energy:
styles:
- box-sizing: border-box
- display: flex
- align-items: end;
- font-family: ui-rounded, system-ui, "SF Pro Text", Roboto, sans-serif
# - color: "var(--primary-text-color)"
- grid-area: value
- font-size: 12px
- line-height: 15px
- font-weight: 600
- text-align: left
- width: 100%
- align-self: end
states:
- value: 0.3
operator: '>='
color: rgb(252,127,3)
- value: 0.3
operator: '<'
color: rgb(111,176,0)
No, it didn’t apply any of the styles. I guess it’s something else. Basically, the state color works, but only the last one on the bottom.
jchh
October 13, 2023, 4:15pm
10
Sorry, didn’t realise that was a template.
hatarez
October 18, 2023, 12:08am
11
No problem. I hope someone can help.
Have you tried to move the “states: - values section” in line with above - ( the indentation doesn’t seems right the - should start under the “a” in states:
hatarez
October 18, 2023, 4:40pm
13
Oh yes, I tried that as well. The template is this and when applied to the cards (the right one needs to have its own template) it does give this result:
utility:
show_state: true
state_display: |
[[[
if (entity) {
var value = states[entity.entity_id];
if (
value
&& value.attributes
&& value.attributes.unit_of_measurement
&& value.attributes.unit_of_measurement === "$/kWh")
{
var formattedState = Number(value.state);
return `${formattedState.toFixed(2)} $/kWh`;
}
return `${value.state}`;
}
return null;
]]]
styles:
grid:
- box-sizing: border-box
- grid-template-columns: 32px auto
- grid-template-areas: |
"icon value"
"icon name"
- grid-template-rows: 19px 13px
- column-gap: 4px
- row-gap: 0px
- padding-right: 8px
- padding-left: 8px
- padding-top: 8px
- padding-bottom: 8px
img_cell:
- display: none
- box-sizing: border-box
custom_fields:
icon:
- box-sizing: border-box
- color: "var(--secondary-text-color)"
- height: 32px
state:
- box-sizing: border-box
- display: flex
- align-items: end;
- font-family: ui-rounded, system-ui, "SF Pro Text", Roboto, sans-serif
- color: "var(--primary-text-color)"
- grid-area: value
- font-size: 12px
- line-height: 15px
- font-weight: 600
- text-align: left
- width: 100%
- align-self: end
- value: 0.3
operator: '>='
color: rgb(252,127,3)
- value: 0.3
operator: '<'
color: rgb(0, 190, 29)
Well, you keep posting a fraction of what you are doing. and maybe you are mixing up, yaml-Template-Sensors, and template/style in Custom:button Card, i really don’t know, and cant tell from you “fraction done somewhere”
hatarez
October 19, 2023, 3:38am
15
No worries. There is a lot to learn, try and retry. I don’t know either. I have a couple of ideas tho.
Can anyone point me in the right direction, I thought I can figured this out, but it only seems to work with two states not three?? See code below
type: custom:button-card
entity: sensor.living_room_sensor_temperature
show_state: true
icon: mdi:thermometer
state:
- value: 4
operator: '<'
icon: mdi:thermometer
color: blue
- value: 4
operator: '>='
icon: mdi:thermometer
color: green
- value: 10
operator: '>='
icon: mdi:thermometer
color: orange
I’m trying to get the icon to change color based on three different temperatures. My sensor temp is currently higher than 10, so I thought it would be orange, but its still green. Maybe I’m doing something wrong??
1 Like
sri4iot
June 24, 2024, 2:35pm
17
I know this is old thread. If you are still looking for answer then try the values in higher to lower.
type: custom:button-card
entity: sensor.living_room_sensor_temperature
show_state: true
icon: mdi:thermometer
state:
- value: 10
operator: '>='
icon: mdi:thermometer
color: orange
- value: 4
operator: '>='
icon: mdi:thermometer
color: green
- value: 4
operator: '<'
icon: mdi:thermometer
color: blue
