Is it impossible to resize the live camera view in picture-elements card?

Configuration Frontend
1

I have set up a camera that will be pointing at my boat, and I’d like to have the card fill up the dashboard page where I watch it. But I can’t seem to do that. Here’s the code:

type: picture-elements
entity: camera.batkamera_stream0_0
camera_image: camera.batkamera_stream0_0
camera_view: live
style:
  width: 200%
  border: 2px solid red
  border-radius: 10%
elements:
  - type: icon
    icon: mdi:arrow-up
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 25px
      bottom: 50px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        tilt: UP
  - type: icon
    icon: mdi:arrow-down
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 25px
      bottom: 0px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        tilt: DOWN
  - type: icon
    icon: mdi:arrow-left
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 50px
      bottom: 25px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        pan: LEFT
  - type: icon
    icon: mdi:arrow-right
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 0px
      bottom: 25px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        pan: RIGHT
  - type: icon
    icon: mdi:arrow-top-left
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 50px
      bottom: 50px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        tilt: UP
        pan: LEFT
  - type: icon
    icon: mdi:arrow-top-right
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 0px
      bottom: 50px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        tilt: UP
        pan: RIGHT
  - type: icon
    icon: mdi:arrow-bottom-left
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 50px
      bottom: 0px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        tilt: DOWN
        pan: LEFT
  - type: icon
    icon: mdi:arrow-bottom-right
    style:
      background: rgba(255, 255, 255, 0.35)
      right: 0px
      bottom: 0px
    tap_action:
      action: call-service
      service: onvif.ptz
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8
        move_mode: ContinuousMove
        tilt: DOWN
        pan: RIGHT
  - type: icon
    icon: mdi:camera
    title: "TODO: snapshot (in SD?)"
    style:
      background: rgba(255, 255, 255, 0.35)
      bottom: 25px
      right: 25px
    tap_action:
      action: call-service
      service: camera.record
      service_data:
        device_id: 634fd116f09069a261a348cd97a37cd8

It looks like this in a regular Chrome window (just laying in the window, which is why the image is so weird, you can only see the roof of my boat). Obviously the “style” part for the camera does nothing:

image
image1920×1112 53.8 KB

Is there something I can do to fix this?

2

I had a comparable problem with an Apex-Charts card looking small and ugly for a couple of days, leaving me wondering whether any settings for size exist somewhere. Here is what I did: From your dashboard the pen icon top-right edit dashboard; try poking around to get it to create a new section, set that to “full width” and then within your new section drop the image card and also poke the card to be “full width” or 4/4 or whatever it offers. One of those on its own is never enough, and I’ll bet that the dashboard interface is showing you one but not showing you the other. Having got a full width new section full width new card on a Dashboard, ctrl + to get some browser zoom, which might also have made it bigger.

So I did not find a .yaml solution but did find some mouse poking to allow a big card.

ps. it is fair enough for you to edit your post so that your device_id is replaced with anything you like. A good one is “0111010101” just anyold nonsense.

3

Thanks a lot for answering! That set me on the right path! It’s not even necessary to make anything new, only a few lines of code at the bottom of the card:

grid_options:
  columns: full
  rows: 13

The 13 rows was just a bit of fiddling to find out what would fit my screen.

As for the device ID’s I didn’t see any problems in this case, this camera is directly connected on the LAN, not via a cloud account (I avoid cloud as much as I can), so the most somebody who can actually understand the ID numbers could get out if it, is the camera name and the internal IP address on the 192.168.2.x network. :grin: Not that it would be a problem anyway, if somebody actually manages to crack both my pfSense firewall and the strong (10 characters plus) password on the Hass instance they have my permission to do anything, including setting of the siren in the middle of the night! :joy: