Camera Motion position in image

@Honza wrote:

I’ve spent a few days now tinkering and I still cannot figure out how to solve this. I tried playing with the 3 different camera cards to get the desired goal: SHOW THE MOTION ICON ON THE FAR RIGHT OF THE CARD.

Here are the different cards, i’ve been testing:

TOP LEFT: picture-elements card, this work for positioning the motion icon, however for some reason the card is shrunk down and doesn’t display my whole video feed

BOTTOM LEFT: picture-glance card with no entities for motion (just a dummy)

TOP RIGHT: picture-glance card with motion entity, but its positioned 2/3 of the way. GOAL IS TO MOVE TO THE FAR RIGHT.

BOTTOM RIGHT: picture-entity card which doesn’t have the entity fields so not sure if I can show the motion icon.

camera1790×1010 721 KB

Here is my code, that I’ve been playing with.

cards:
  - type: picture-elements
    title: Sideyard
    image: "http://admin:dummy@IP/ISAPI/Streaming/channels/01/picture"
 style: |
      ha-card {
        width: 400px
        height: 400px
        top: 50%
        left: 25%
        --iron-icon-height: 60px
        --iron-icon-width: 60px
      }
    elements:
      - type: image
        camera_image: camera.sideyard
        style:
          top: 0%
          left: 50%
          width: 100%
          height: 100%
      - type: state-icon
        entity: binary_sensor.living_room_motion 
        style:
          top: 80%
          left: 80%
          --iron-icon-height: 60px
          --iron-icon-width: 60px
  - type: picture-glance
    title: Sideyard
    entities: []
    camera_image: camera.sideyard
 
 - type: picture-glance
    title: Sideyard
    entities: 
      - entity: binary_sensor.garage_motion
    camera_image: camera.sideyard

  - type: picture-entity
    entity: camera.sideyard
    name: Sideyard
    show_name: true
    show_header_toggle: true
    show_state: false

ANY GUIDANCE? Thanks in advanced.

Posts: 1

Participants: 1

Read full topic