Hi all
Very new to HA and I’m trying to customise it so that the status label for my garage door is either green or red when the door is open or closed. I have a door/window sensor that works but I can’t seem to code it correctly with the card-mod add on to make it work, any help would be greatly appreciated!
type: picture-elements
type: state-label
Try this…
type: picture-elements
image: /api/image/serve/3bfa961a2455ba030963677d2748f90a/512x512
elements:
- type: state-label
entity: binary_sensor.bthome_sensor_df42_window
icon: mdi:cloud
style:
left: 21%
top: 91%
card_mod:
style:
hui-state-label-element:
$: |
div {
color: {{ 'green' if is_state('binary_sensor.bthome_sensor_df42_window', 'on') else 'red' }}
}
Check out this thread
Or google “picture elements small tutorial”
LiQuid_cOOled:
type: picture-elements
image: /api/image/serve/3bfa961a2455ba030963677d2748f90a/512x512
elements:
- type: state-label
entity: binary_sensor.bthome_sensor_df42_window
icon: mdi:cloud
style:
left: 21%
top: 91%
card_mod:
style:
hui-state-label-element:
$: |
div {
color: {{ 'green' if is_state('binary_sensor.bthome_sensor_df42_window', 'on') else 'red' }}
}
Doesn’t seem to work - any other tips?
What version of card_mod do you have installed?
The code was tested and works fine.
I’m using v3.4.4
This is how the whole code looks:
views:
- title: Home
sections:
- type: grid
cards:
- type: heading
heading_style: title
heading: Ground Floor
icon: mdi:home
- type: picture-elements
elements:
- type: state-icon
entity: switch.shelly1minig3_54320468d244_switch_0
style:
left: 4%
top: 97%
title: Outdoor Light
- type: state-icon
entity: switch.shelly1g3_dcda0cb1bb54_switch_0
state_color: false
style:
left: 21%
top: 95%
- type: state-icon
entity: switch.shelly1minig3_54320468d244_switch_0
style:
left: 38%
top: 97%
title: Outdoor Light
- type: state-icon
entity: switch.shelly1minig3_54320468d244_switch_0
title: Outdoor Light
style:
left: 57%
top: 63%
- type: state-icon
entity: switch.shelly1minig3_54320468d244_switch_0
title: Outdoor Light
style:
left: 76%
top: 63%
- type: state-icon
entity: switch.shelly1minig3_54320468d244_switch_0
title: Outdoor Light
style:
left: 92%
top: 63%
- type: state-icon
entity: fan.shelly1minig3_54320468c0d8_switch_0
title: Kitchen Fan
icon: mdi:fan
style:
left: 19%
top: 35%
- type: picture-elements
image: /api/image/serve/3bfa961a2455ba030963677d2748f90a/512x512
elements:
- type: state-label
entity: binary_sensor.bthome_sensor_df42_window
icon: mdi:cloud
style:
left: 21%
top: 91%
card_mod:
style:
hui-state-label-element:
$: |
div {
color: {{ 'green' if is_state('binary_sensor.bthome_sensor_df42_window', 'on') else 'red' }}
}
- type: grid
cards:
- type: heading
heading: First Floor
heading_style: title
icon: mdi:home
- type: picture-elements
elements: []
image: /api/image/serve/fd13857700d6882fc521e772991a60c0/512x512
- type: grid
cards:
- type: heading
heading: Smart Home
heading_style: title
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: event.shelly1g3_dcda0cb1bb54_input_0
icon: mdi:garage
name: Garage Door
show_state: false
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: fan.shelly1minig3_54320468c0d8_switch_0
icon: mdi:fan
name: Kitchen Fan
show_state: true
Can you share what error you are seeing?
My test code
type: picture-elements
elements:
- type: state-icon
entity: fan.bedroom_fan
title: Kitchen Fan
icon: mdi:fan
style:
left: 19%
top: 35%
- type: state-label
entity: light.pc_lights
icon: mdi:cloud
style:
left: 21%
top: 91%
font-size: 30px
card_mod:
style:
hui-state-label-element:
$: |
div {
color: {{ 'green' if is_state('light.pc_lights', 'on') else 'red' }}
}
image: /local/pics/white.png
Where is the image: for the first picture-element?
views:
- title: Home
sections:
- type: grid
cards:
- type: heading
heading_style: title
heading: Ground Floor
icon: mdi:home
- type: picture-elements
elements:
Did you just not include it in the post?
Try simplifying your code to just the state label in its own card and see if you get the same results.
