Elementos de Imagem (Floorplan)

Olá pessoal.

Estou tentando fazer a planta em 3D da minha casa e não estou conseguindo fazer com que a imagem “acesa” se sobreponha a imagem “apagada”.

Será que alguém poderia me ajudar? Já vi vários vídeos e não consigo identificar onde estou errando.

Tentei pelo editor visual, sem sucesso.

Segue o código:

    type: picture-elements
image: /api/image/serve/f95157102822f2a5dec2be292aff7a77/512x512  #(Imagem dark)
elements:
  - type: image
    entity: light.interruptor_triplo_interruptor_2
    style:
      top: 50%
      left: 20%
    state-image:
      'on': /local/images/floorplan/Render_luz_garagem_on.png
      'off': /local/images/flooeplan/transparent.png
  - type: state-icon
    icon: mdi:lightbulb-off
    entity: light.interruptor_triplo_interruptor_2
    tap_action:
      action: toggle
    style:
      left: 50%
      top: 50%

segue o meu para se basear:

type: picture-elements
elements:

  • type: image
    action: nome
    entity: sun.sun
    state_image:
    above_horizon: /local/imagens/3d/casa_kleber/Casa off dia.png
    below_horizon: /local/imagens/3d/casa_kleber/Casa off noite.png
    style:
    top: 50%
    left: 50%
    height: 100%
    width: 100%
  • type: image
    entity: switch.sala_interruptor_2
    state_image:
    ‘on’: /local/imagens/3d/casa_kleber/escritorio kleber.png
    ‘off’: /local/imagens/3d/kleber/transparente.png
    style:
    top: 50%
    left: 50%
    height: 100%
    width: 100%

ai é só continuar …

1 Like

Boa @kleberkadanus me ajudou e deu certo demais.

Um video curto que me ajudou tbm foi esse:

https://youtu.be/zcKr4UDkm0Q?si=d5fNd70UTZpAGT2L