floor plan bug

[vring0]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue: 2021.9.x

Last working release (if known): 2021.7.x

Browser and Operating System:

All

Description of problem:

I am using config-template-card for picture-elements card. When you click on the floor plan on the images, the page simply refreshes and a white circle appears in the clicked area. I can record a video if it's not entirely clear what is at stake.

Additional information:

type: custom:config-template-card
entities:
  - light.livingroom_pc_zone
card:
  type: picture-elements
  image: /local/3d_png/3d_plan_layers_night_0.png
  elements:
    - type: image
      entity: light.livingroom_pc_zone
      tap_action:
        action: toggle
      hold_action: none
      state_image:
        'on': /local/3d_png/3d_plan_layers_pc_zone.png
        'off': /local/3d_png/transparent.png
      style:
        top: 50%
        left: 50%
        width: 100%
    - type: image
      entity: light.livingroom_pc_zone
      tap_action:
        action: toggle
      state_image:
        'on': /local/3d_png/transparent.png
        'off': /local/3d_png/transparent.png
        unavailable: /local/3d_png/transparent.png
      style:
        top: 36%
        left: 19%
        width: 5%
    - type: image
      entity: light.livingroom_pc_zone
      tap_action:
        action: toggle
      state_image:
        'on': /local/3d_png/transparent.png
        'off': /local/3d_png/transparent.png
        unavailable: /local/3d_png/transparent.png
      style:
        top: 36%
        left: 32%
        width: 5%

[iantrich]

You should be using it at the element level, not the card level

[vring0]

If you do this, I get an error: No card type defined

type: picture-elements
image: /local/3d_png/3d_plan_layers_night_0.png
elements:
  - type: image
    entity: light.livingroom_pc_zone
    tap_action: none
    hold_action: none
    state_image:
      'on': /local/3d_png/3d_plan_layers_pc_zone.png
      'off': /local/3d_png/transparent.png
    style:
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.livingroom_pc_zone
    tap_action:
      action: toggle
    state_image:
      'on': /local/3d_png/transparent.png
      'off': /local/3d_png/transparent.png
      unavailable: /local/3d_png/transparent.png
    style:
      top: 36%
      left: 19%
      width: 5%
  - type: image
    entity: light.livingroom_pc_zone
    tap_action:
      action: toggle
    state_image:
      'on': /local/3d_png/transparent.png
      'off': /local/3d_png/transparent.png
      unavailable: /local/3d_png/transparent.png
    style:
      top: 36%
      left: 32%
      width: 5%
  - type: custom:config-template-card
    entities:
      - media_player.samsung_tv
    card:
      - type: image
        entity: media_player.samsung_tv
        tap_action: none
        hold_action: none
        state_image:
          'on': >-
            ${states['light.livingroom_tv_zone'].state === 'off' ?
            '/local/3d_png/3d_plan_layers_tv_on_light_off.png' :
            '/local/3d_png/3d_plan_layers_tv_on_light_on.png' }
          'off': /local/3d_png/transparent.png
        style: null
        top: 50%
        left: 50%
        width: 100%

[bkr1969]

This is a duplicate of #78 and I pasted a snippet of how you should code.

Also check out #79 for my solution to the white circles.

[bkr1969]

You are getting the "no card type defined" error because "image" is not a card type.

[vring0]

This is a duplicate of #78 and I pasted a snippet of how you should code.

Also check out #79 for my solution to the white circles.

Thanks!