Change floorplan picture based at binary sensor state

Configuration Frontend
1

Hi,

As a rather newbee I’m struggeling with the following:

I have created a rather simple but working floorplan, but now I want to change the floorplan-picture based at binary sensor state.
So when my garage door is closed, I would like to see one imgae and another image when the door is open .
Both images are identical but,

  • at one version; the garage door is drawn closed and colored green
  • at the other version; the garage door is drawn half opend and colored red

Both images are uploaded at the www folder:
Woonkamer_9_closed.png
Woonkamer_9_open.png
The sensor were it should interact with is: binary_sensor.contact_sensor_garage_deur

Above shall be integrated at the below yaml text;
I 'm lacking the (yaml) knowledge to solve this.
Anybody an idea?

type: picture-elements
elements:
  - type: state-icon
    entity: binary_sensor.contact_sensor_deur_hok_hond
    title: hok hond
    show_states: true
    state_color: true
    style:
      top: 14.5%
      left: 67%
  - type: state-icon
    entity: binary_sensor.inverted_sensor
    title: hok hond
    show_states: true
    state_color: true
    style:
      top: 14.5%
      left: 62%
  - type: state-icon
    entity: binary_sensor.contact_sensor_achterraam
    title: achterraam
    show_states: true
    state_color: true
    style:
      top: 86%
      left: 67%
  - type: state-icon
    entity: binary_sensor.contact_sensor_garage_deur
    title: garagedeur
    show_states: true
    state_color: true
    style:
      top: 18.7%
      left: 35%
  - type: state-icon
    entity: binary_sensor.contact_sensor_tuindeur
    title: tuindeur
    show_states: true
    state_color: true
    style:
      top: 86%
      left: 25%
  - type: state-label
    entity: sensor.temp_sensor_woonkamer
    title: temp woonkamer
    show_states: true
    state_color: true
    style:
      top: 61%
      left: 56%
  - type: state-icon
    entity: binary_sensor.contact_sensor_voordeur
    title: Voordeur
    show_states: true
    state_color: true
    style:
      top: 33%
      left: 55%
  - type: state-label
    entity: sensor.temp_sensor_lynn_2
    title: temp hok hond
    show_states: true
    state_color: true
    style:
      top: 23%
      left: 69%
  - type: state-label
    entity: sensor.temp_sensor_gang_2
    title: temp gang
    show_states: true
    state_color: true
    style:
      top: 34%
      left: 68.5%
  - type: state-icon
    entity: light.bureau_lamp_hue1
    title: lampen woonkamer
    show_states: true
    state_color: true
    style:
      top: 70.5%
      left: 19%
  - type: state-icon
    entity: light.bureau_lamp_hue2
    title: lampen woonkamer
    show_states: true
    state_color: true
    style:
      top: 81.5%
      left: 19%
  - type: state-icon
    entity: switch.lampen_woonkamer_tv
    title: lampen woonkamer
    show_states: true
    state_color: true
    style:
      top: 77.1%
      left: 74.5%
  - type: state-icon
    entity: switch.lampen_woonkamer_tv
    title: lampen woonkamer
    show_states: true
    state_color: true
    style:
      top: 64.7%
      left: 74.5%
  - type: state-icon
    entity: binary_sensor.water_sensor_quooker
    title: quooker
    show_states: true
    state_color: true
    style:
      top: 40.5%
      left: 31.5%
  - type: state-icon
    entity: binary_sensor.water_sensor_vaatwasser
    title: vaatwasser
    show_states: true
    state_color: true
    style:
      top: 40.5%
      left: 46%
  - type: state-icon
    entity: light.lamp_trapkast
    title: lamp trapkast
    show_states: true
    state_color: true
    style:
      top: 57.5%
      left: 73.5%
  - type: state-icon
    entity: switch.garage_inloop_lamp
    title: Garage licht
    show_states: true
    state_color: true
    style:
      top: 18.7%
      left: 42%
  - type: state-icon
    entity: switch.tuinverlichting
    title: tuinverlichting
    show_states: true
    state_color: true
    style:
      top: 94.5%
      left: 48%
  - type: state-label
    entity: sensor.temp_sensor_buiten_2
    title: tuinverlichting
    show_states: true
    state_color: true
    style:
      top: 97.5%
      left: 33%
image: /local/floorplan/Woonkamer_7.png
2

Use a conditional element

3

Hi Ildar_Gabdullin,

Tx for your reply.
Yes the definition of a conditional element meets indeed my expectations, but as said, with minor knowledge of YAML-code writing I can’t get it working. (for now my skills are not much more then study examples, adjust/copy that and get some results with a lot of Try and Error :slight_smile: )

I have tried code below, but it does not change the actual picture when the binary sensor state changes.

type: picture-elements
image: /local/floorplan/Woonkamer_9_closed.png
elements:
  - type: conditional
    conditions:
      - entity: binary_sensor.contact_sensor_garage_deur
        state: 'On'
      - entity: binary_sensor.contact_sensor_garage_deur
        state: 'Off'
    state_immage:
      On: /local/floorplan/Woonkamer_9_closed.png
      Off: /local/floorplan/Woonkamer_9_open.png

BR Edward

4

Should be kind of this:

      - type: conditional
        conditions:
          - entity: input_boolean.flag_1
            state: 'on'
          - entity: input_boolean.flag_1
            state: 'on'
        elements:
          - type: image
            entity: ...
            image: /local/..../xxx.png

      - type: conditional
        conditions:
          - entity: input_boolean.flag_1
            state: 'off'
          - entity: input_boolean.flag_1
            state: 'off'
        elements:
          - type: image
            entity: ...
            image: /local/..../yyy.png
5

Hi,

Thanks for your support so far.
As I could not get it working with a conditinal element, the search went on :slight_smile:

I solved it by using state_image
Two new identical sized pictures of my garage door (one ‘open’ red colored,- and one ‘closed’ green colored) have been uploaded in the www (or local) HA Floorplan folder after it became clear :relaxed: that these age pictures are placed on top of the basic floorplan.
See below screenshots

Below the printed YAML-text for the other community members reading this tread.

type: picture-elements
image: /local/floorplan/Woonkamer_8.png
elements:
  - type: image
    entity: binary_sensor.contact_sensor_garage_deur
    image: local/floorplan/garage_closed.PNG
    state_image:
      'on': local/floorplan/garage_open.PNG
      'off': local/floorplan/garage_closed.PNG
    style:
      left: 26%
      top: 23%
      width: 8%

Dicht
open

BR Edward