Can 'image' be conditional in a picture elements card?

Configuration Frontend
1

As topic question.
I want to have the boolean be the toggle between ground floor and upper floor.
But can I somehow change the image based on the boolean? It’s a level above the “actual card”.
Or is there any other way you can toggle the actual image so that you can have two floor in a picture elements card and toggle the image and all the entities?

image: local/GroundFloor.png
panel: true
type: picture-elements
elements:
  - conditions:
      - entity: input_boolean.floor
        state: 'on'
    elements:
      - entity: input_boolean.floor
        style:
          left: 90%
          top: 4%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
    type: conditional
  - conditions:
      - entity: input_boolean.floor
        state: 'off'
    elements:
      - entity: input_boolean.floor
        style:
          left: 90%
          top: 4%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
    type: conditional
2

No, the base image can’t be conditional. You could make the whole card for each floor conditional, so you’d only have to apply the conditional part once. Since panel mode is meant for 1 card only, you might have to put both of them in a vertical-stack to be functional.

3

I actually made it. I was just about to post how

4

I found a way. But it does not change the base image, it overlays the same image over the base image.

image: local/GroundFloor.png
panel: true
type: picture-elements
elements:
  - conditions:
      - entity: input_boolean.floor
        state: 'on'
    elements:
      - type: image
        entity: input_boolean.floor
        image: /local/GroundFloor.png
        style:
          left: 0%
          top: 0%
          transform: 'scale(1,1)'
        state_image:
          'off': /local/1Level.png
          'on': /local/GroundFloor.png
      - entity: input_boolean.floor
        style:
          left: 90%
          top: 4%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
  - conditions:
      - entity: input_boolean.floor
        state: 'off'
    elements:
      - type: image
        entity: input_boolean.floor
        image: /local/GroundFloor.png
        style:
          left: 0%
          top: 0%
          transform: 'scale(1,1)'
        state_image:
          'off': /local/1Level.png
          'on': /local/GroundFloor.png
      - entity: input_boolean.floor
        style:
          left: 90%
          top: 4%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
    type: conditional

So what you do is you create a conditional element which will toggle between the views.
In both views you have the floor toggle (a boolean) and a state-image, and here we toggle the actual image.

Example image:
The toggle button is at the top right

image
image1853×875 599 KB

image
image1852×871 541 KB

1 Like
5

My bad, I thought there are more elements to be conditional. In this case, you chose a better way imo.

6

Well there are more elements, I just didn’t want to clutter the post.

But all entities should just go below the input_boolean entity on each floor.

7

Hi!

I tried your code without any success:
I have an error message but it is not exactly shown:

image
image801×1389 11.7 KB

Somehow I could read the erros message that says: No card type configured

I have just copied your code to a newly added Picture-elements card and the error message has just came up immidiately.

What could be the wrong? Maybe I missed something?

Krisztian

8

If that is correct then I assume you must have deleted a line where it should say type: something

9

Yes. I found that. Thanks.

10

Hi everibody,
I found my way using a transparent picture. A first binary sensor has 2 picture one for each state. For a third case I use a second binary sensor, this is off in the previous case having a transparent figure, while when on has a different picture.
Obvious all have same dimension and place and the second is defined after the first in such way is placed over the first.
For the moment appear to work flawless.
Not very elegant but simple.