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.
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.