3d Floor plan: How to change image according to sun position

Share your Projects! Dashboards & Frontend
1

Hi,

This topic appears multiple times online but I ve been struggling to get it working for a few days now
I have successfully created a sensor called Sunshine which according to sun’s position points to 4 levels of brightness. Then, following this example, i tried to create mine:

elements:
  - entity: Sunshine
    image: /local/Ground_floor/ground_floor_day_1200.png
    state_image:
      black: /local/Ground_floor/ground_floor_dark_1730.png
      bright: /local/Ground_floor/ground_floor_day_1200.png
      dark: /local/Ground_floor/ground_floor_dark_1730.png
      mid: /local/Ground_floor/ground_floor_day_1200.png
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none
    type: image
image: /local/Ground_floor/ground_floor_dark_1730.png
type: picture-elements

But it doesn’t work!.

It just shows the static image of Ground_floor/ground_floor_day_1200.png in black and white (!)
I find that this image covers, the image it is supposed to be shown.

The fact is I dont really understand the logic and syntax of yaml which is why i cant do trobleshooting…
I wish is was like C++ …

Can anybody help ?