Hey all,
is there a way to have a toggle/switch/dropdown, that would change an image?
i want to have a single card, which is a floor plan, but you can swtich between upstairs/downstairs.
so rather then having 2 images and taking up more space on a card, you have them in the same card and the image changes as per the input?
this is for a vacuum cleaner and only using it either upstairs or downstairs.
Are you using lovelace? You could use the conditional element on the picture-elements card.
Yes, Lovelace, sorry!
Ok, will look at that
Can I tie it to a switch somehow or something along those lines?
yes, here’s an example of how I’m using it. Not for an image but In my case I want to bold a label based on where I am…
- type: picture-elements
style: |
ha-card {
height: 231px
}
image: /local/icons/transparent.png
show_header_toggle: false
elements:
- type: state-label
entity: input_text.room
style:
top: 11%
left: 20%
font-size: 140%
font-weight: bold
- type: conditional
conditions:
- entity: sensor.room_location
state: 'lr'
elements:
- type: state-label
entity: input_text.lr
style:
top: 20%
left: '20px'
font-size: 100%
font-weight: 700
- type: conditional
conditions:
- entity: sensor.room_location
state_not: 'lr'
elements:
- type: state-label
entity: input_text.lr
style:
top: 20%
left: '20px'
Thanks, i cant work out how to change the whole image however, so it shows either the upstairs floorplan, or the downstairs floorplan
Look at the documentation for the conditional card, I think that will work