frontend icon indicating copy to clipboard operation
frontend copied to clipboard

Bug with camera image display: the image's bottom part is missing

Open almirus opened this issue 1 year ago • 1 comments

Checklist

  • [X] I have updated to the latest available Home Assistant version.
  • [X] I have cleared the cache of my browser.
  • [X] I have tried a different browser to see if it is related to my browser.
  • [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

When displaying the camera image, the bottom part is "cut off." The image is not vertically centered.

Describe the behavior you expected

The image must be centered

Steps to reproduce the issue

  1. Add a camera entity.
  2. Ensure that the bottom part is cut off and not displayed.

What version of Home Assistant Core has the issue?

2024.6.4

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome 126.0.6478.63

Which operating system are you using to run this browser?

win 11

State of relevant entities

No response

Problem-relevant frontend configuration

square: false
type: grid
cards:
  - type: entity
    entity: sensor.time
  - show_state: false
    show_name: false
    camera_view: live
    type: picture-entity
    entity: camera.camera_hub_g2h_e718_camera_stream_management0
    camera_image: camera.doorbell_repeater_b8b7
columns: 2

show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.doorbell_repeater_b8b7
camera_image: camera.doorbell_repeater_b8b7

Javascript errors shown in your browser console/inspector

No response

Additional information

image

original image (camera stream) image

image original image image

almirus avatar Jun 24 '24 15:06 almirus

https://github.com/home-assistant/frontend/blob/d4ace2eca510740dc7f5d4c4e38f120962326bbd/src/panels/lovelace/cards/hui-picture-entity-card.ts#L193

needed to add

ha-camera-stream img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%; 
  min-width: 100%; 
}

almirus avatar Jun 24 '24 16:06 almirus

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Sep 22 '24 17:09 github-actions[bot]