Change card picture based on state

Configuration
1

Hello,
I started building my UI from scratch in Lovelace. What I want is to show a picture on the dashboard if a device’s state is ‘home’, and a different picture if that same device is ‘not_home’.
I have the following code so far which shows a 2 picture with labels, each for a device (phone). Instead of the label to change (home/not home) I’d like the picture itself to change.
The pictures represent me and my partner, both in a home and not home state:
J_ON.jpg
J_OFF.jpg
L_ON.jpg
L_OFF.jpg

cards:
  - cards:
  - elements:
      - entity: device_tracker.94_65_2d_d8_51_83
        style:
          color: white
          left: 5%
          top: 5%
        type: state-label
    image: /local/JON.jpg
    type: picture-elements
  - elements:
      - entity: device_tracker.94_65_2d_8e_ab_49
        state: home
        style:
          color: white
          left: 5%
          top: 5%
        type: state-label
    image: /local/LON.jpg
    type: picture-elements
type: horizontal-stack
type: horizontal-stack

ps: I used the code blocks but it’s not showing properly but that’s not relevant now because it works, just not how I want it to.

2

please format your code properly by following the directions in the blue stripe at the top of every page. Your code blocks aren’t working because you are doing something wrong. Either use 3 ``` at the start of your code block or highlight your text and press the correct button. Whatever you do, don’t copy the code from your post and try to add codeblocks because the format is lost.

1 Like
3

SOOOOOOOOOOO, now that I read your post. You should use 2 conditional cards. One that shows card A when the state is home, and the other that shows card b when the state is not home.

1 Like
4

Is that not what a picture-entity card does?

5

Yes it does, you are using picture-elements.

6

I’m not doing anything. :wink:

I didn’t pay enough attention to see that they were trying to use picture-elements. I just read the description.

7

Hah! same color icon… almost!

8

thx for the replies. Managed to get it to work with the picture-entities card, combined in a vertical stack card :grin: I don’t get the conditional card though, yet…

9

Is there a way to change the image according to a variable?

elements:
  - entity: sensor.time
    style:
      color: red
      font-size: 5vw
      left: 75%
      top: 35%
    type: state-label
  - entity: sensor.date
    style:
      color: red
      font-size: 2vw
      left: 75%
      top: 75%
    type: state-label
image: /local/{{states.input_select.theme.state}}.png
type: picture-elements

Thank you

10

Hi. Did you find out a way to change the image according to a variable, like in your example?

1 Like
11

no :frowning: unfortunately