How to display images depending on state in floorplan

[TiaPreve (Mattia Prevedini)]

Hi there,

I made the project of my house and I saved the image into the HTML folder.
Everything is working fine and I placed the marker with a light and it correctly do the ON and OFF action and the lights turn on or off without any problem.

What I want to do is that if I press the icon of my light even the image it changes.
Here is the image of my house with the light OFF:

when I press ON the icon it changes and it turns the light on but at the same time I want to show this image where it show the room with light on:

Here is my code YAML:

config:
  label: Casa
  sidebar: true
  imageUrl: /static/casa.png
  imageWidth: 1920
  imageHeight: 1260
  noZoomOrDrag: true
markers:
  - component: oh-plan-marker
    config:
      coords: 428.7093850145173,486.5851519914771
      icon: faretti
      iconUseState: true
      action: toggle
      actionItem: 2Faretti
      actionModal: page:home
      name: 2 Faretti
      item: 2Faretti
      tooltipPermanent: false
      actionCommand: ON
      actionCommandAlt: OFF
    slots:
      default: []

Thanks a lot,
Mattia

[JustinG]

I think you can apply expressions to the image property in the floorplan yaml. Read about using the widget expressions here:

Building Pages - Components & Widgets

P.S. I’m moving this post to a more appropriate category. ‘Development’ is for questions about producing code for core OH or add-ons.