3d floor plan with probable code compilation error

Configuration Frontend
1

Hi everyone, I have a problem with the 3D floor plan with a probable code compilation error, because even though I uploaded and compiled everything when it’s morning the photo remains the one from the evening and if I turn on the lights then the morning photo is visible. Can someone help me please? I insert the written code:

type: picture-elements
image: /local/Floorplan/foto_serale_floorplan.png
elements:

type: image
action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/Floorplan/foto_mattina.png
below_horizon: /local/Floorplanp/pulsante_trasparente90.png
style:
height: 100%
left: 50%
opacity: ${ states[‘sensor.sunlight_opacity’].state }
top: 50%
width: 100%
tap_action:
action: none
type: image
entity: light.lampada1
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada2
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada3
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada4
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada1
image: local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada2
image: /local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada3
image: /local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada4
image: /local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada1
style:
left: 55.5%
top: 43.5%
tap_action:
action: toggle
type: image
entity: light.lampada2
style:
left: 53%
top: 43.5%
tap_action: null
type: image
entity: light.lampada3
style:
left: 53%
top: 48%
tap_action: null
type: image
entity: light.lampada4
style:
left: 55.5%
top: 48%
tap_action: null
type: state-icon
entity: light.lampada1
style:
left: 55.5%
top: 43.5%
tap_action:
action: toggle
type: state-icon
entity: light.lampada2
style:
left: 53%
top: 43.5%
tap_action:
action: toggle
type: state-icon
entity: light.lampada3
style:
left: 53%
top: 48%
tap_action:
action: toggle
type: state-icon
entity: light.lampada4
style:
left: 55.5%
top: 48%
tap_action:
action: toggle
2

We can’t help you until you format the yaml correctly in your post (tabs are important).

Put 3 back ticks like this one ➜ ` on the line above the yaml with the word yaml and then another 3 on the line below the yaml - it will look something like the following in your editor:
Screenshot 2025-04-11 at 20.14.46

and look like this when posted:

my yaml here
  an indent
4

ok ok I think I fixed it and reposted it

5

Still indentation is lost, can’t you see it?

6

If I had realized where I went wrong I wouldn’t have asked for help, don’t you think? Can you help me understand what I did wrong and where? Thank you very much in advance

7

Place a code into triple backticks as it was suggested here.
This is a community rule.

8 
type: picture-elements
image: /local/Floorplan/foto_serale_floorplan.png
elements:

type: image
action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/Floorplan/foto_mattina.png
below_horizon: /local/Floorplanp/pulsante_trasparente90.png
style:
height: 100%
left: 50%
opacity: ${ states[‘sensor.sunlight_opacity’].state }
top: 50%
width: 100%
tap_action:
action: none
type: image
entity: light.lampada1
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada2
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada3
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada4
style:
top: 50%
left: 50%
width: 100%
tap_action:
action: none
image: null
state_image:
“off”: /local/Floorplan/foto_serale_floorplan.png
“on”: /local/Floorplan/salone.png
type: image
entity: light.lampada1
image: local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada2
image: /local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada3
image: /local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada4
image: /local/Floorplan/pulsante_trasparente90.png
style:
left: 54.3%
top: 45%
tap_action:
action: toggle
type: image
entity: light.lampada1
style:
left: 55.5%
top: 43.5%
tap_action:
action: toggle
type: image
entity: light.lampada2
style:
left: 53%
top: 43.5%
tap_action: null
type: image
entity: light.lampada3
style:
left: 53%
top: 48%
tap_action: null
type: image
entity: light.lampada4
style:
left: 55.5%
top: 48%
tap_action: null
type: state-icon
entity: light.lampada1
style:
left: 55.5%
top: 43.5%
tap_action:
action: toggle
type: state-icon
entity: light.lampada2
style:
left: 53%
top: 43.5%
tap_action:
action: toggle
type: state-icon
entity: light.lampada3
style:
left: 53%
top: 48%
tap_action:
action: toggle
type: state-icon
entity: light.lampada4
style:
left: 55.5%
top: 48%
tap_action:
action: toggle

​​

2 3 / 3

​

9

Anyway, a proper indentation is already lost. Suggest to take an original code & paste it again.

Also, check this line:

It seems to be related to another custom config-template-card which is not mentioned in your code.

1 Like