Lovelace card for displaying a public 360° webcam

Configuration
1

Hi Community!
Been fiddling with trying to get a card set up for displaying a public webcamera in the city live so i can easily see what the weather conditions are like.

  • The “stream” is a still image that update every 10minutes or so.
  • The camera is 360° and available through a website.
  • There are no direct links to the stream.
  • The link to the still image will change it’s date and time as it updates.
  • The full resolution of the image is 3020x450

My goal is to have a 5x4 card updating every hour, panning back and forth across the image in a decent enough resolution.

I’ve had moderate success with the picture elements card by first creating a template which will create the image link every hour (or however often i want the card to update.

camera.yaml

name: Weather
platform: generic
still_image_url: >
  {% set current_date = now().year ~ '-' ~ now().strftime('%m') ~ '-' ~ now().strftime('%d') %}
  {% set assembled_date = current_date ~ '/' ~ now().hour ~ '-00-00/' ~ current_date ~ '-' ~ now().hour ~ '-00-00' %}
  {% set webcamlink = 'link to webcam without the date' ~ assembled_date ~ '_medium.jpg' %}
  {{ webcamlink }}
limit_refetch_to_url_change: true

This successfully assembles the URL and grabs the image.

I then call my weather camera as the main camera_image in the picture elements card and with some aspect ratio cropping and transform values displays and updates as expected in good resolution.
However without any panning, or (as far as i have worked out) being able to chose what part of the image i want to display.

The website itself pans the whole 360°.
I would love for my card to do the same, as an example would be that the sky, when facing north, is hazy, but facing south is clear.

I have not found out whether the picture element card can pan. I can see it’s possible in CSS, but have not been able to achieve this on the card.

I have also tried adding the webcam as an element on the picture element card. However due to the wide angle, i have to scale and transform the image quite a lot, which results in it being extremely low resolution.

type: picture-elements
elements:
  - type: image
    camera_image: camera.weather
    style:
      top: 0%
      left: 0%
      transform: scale(6.5) translate(-40%, 42%)
      overflow: hidden
      image-rendering: smooth
  - type: state-label
    entity: sensor.temperature
    icon: null
    style:
      top: 90%
      left: 20%
  - type: state-label
    entity: sensor.wind_speed
    title: null
    style:
      top: 90%
      left: 40%
  - type: state-label
    entity: sensor.pressure
    style:
      top: 90%
      left: 60%
  - type: state-label
    entity: weather.zurich
    style:
      top: 90%
      left: 80%
      tap_action: null
      action: more-info
image: https://i.imgur.com/hDS6kU3.jpeg
theme: ios-dark-mode
aspect_ratio: 5x4

Using the website card for lovelace, i can kind of achive this.
It will display the camera, even with the controls that let me pan the view myself, which is great!
However, the website is full of other elements like tourist commercials and nonsense i do not want on my dashboard. If it’s possible to select what HTML elements you want i think this would be the ideal solution.

Have anyone figured out how to do this or have any tips?