{% set entity='"camera.barnrum"' %}
type: picture-elements
image: /local/images/placeholder-1280x720.png
elements:
  - type: image
    camera_image: {{ entity }}
    style:
      left: 50%
      top: 50%
      height: 100%
      width: 100%

  - type: icon
    icon: mdi:chevron-left
    tap_action:
      action: call-service
      service: script.camera_ptz
      service_data:
        entity_id: {{ entity }}
        dir: left
    style:
      left: 30px
      top: 50%
      color: yellow

  - type: icon
    icon: mdi:chevron-right
    tap_action:
      action: call-service
      service: script.camera_ptz
      service_data:
        entity_id: {{ entity }}
        dir: right
    style:
      right: 6px
      top: 50%
      color: yellow

  - type: icon
    icon: mdi:chevron-up
    tap_action:
      action: call-service
      service: script.camera_ptz
      service_data:
        entity_id: {{ entity }}
        dir: up
    style:
      left: 50%
      top: 30px
      color: yellow

  - type: icon
    icon: mdi:chevron-down
    tap_action:
      action: call-service
      service: script.camera_ptz
      service_data:
        entity_id: {{ entity }}
        dir: down
    style:
      left: 50%
      bottom: 6px
      color: yellow

  - type: icon
    icon: mdi:numeric-1-box-outline
    tap_action:
      action: call-service
      service: rest_command.camera_position
      service_data:
        entity_id: camera.barnrum
        position: 0
    style:
      left: 30px
      bottom: 0px
      color: blue
  - type: icon
    icon: mdi:numeric-2-box-outline
    tap_action:
      action: call-service
      service: rest_command.camera_position
      service_data:
        entity_id: camera.barnrum
        position: 1
    style:
      left: 66px
      bottom: 0px
      color: green