[MainUI] Add a full-size Web-View-Page

[SHU-red]

The problem

• Running a advanced home-network also brings the challenge to maintain/monitor many services/devices
• Thankfully the world of open-source provides a big variety of excellent tools (Prometheus, Grafana, Uptime Kuma, InfluxDB, NVR-systems, Virtualisation, ...) to generate dedicated web-dahsboards
• I personally like to include these into the UI of openHAB to have everything worth to know/monitor/control in one place - You can argue if including these into the UI of your SmartHome makes sense but thats just the way i do it right now and i can easily access them via the openHAB Smartphone App
• To include these, i create a new empty Layout Card and only add a single Web-View-Card

Problems:

• WebView Card has a fixed size --> I have to generate very large web-views to avoid to have a scrollable embedded site, additionally to the MainUI scrollbar

Your suggestion

1. Add a "Full-Size Web-View-Page", choosable in addition to the the current available Types of Pages
2. Make this page change its size automatically to be as big as its "external" content - I am sure that this is not that easy but there are ways?
3. Showing Web-Pages from the same Network often causes problems regarding CORS - Implement a way to avoid this limitation.

The suggestions above are describing a feature i would find convenient but especially regarding 2. and 3. i am no expert and i am sure that there may be no solutions available for these things

Your environment

runtimeInfo:
  version: 3.4.0.M6
  buildString: Milestone Build
locale: en-US
systemInfo:
  configFolder: /openhab/conf
  userdataFolder: /openhab/userdata
  logFolder: /openhab/userdata/logs
  javaVersion: 11.0.17
  javaVendor: Alpine
  osName: Linux
  osVersion: 5.15.64-1-pve
  osArchitecture: amd64
  availableProcessors: 4
  freeMemory: 137897248
  totalMemory: 448790528
  startLevel: 100
bindings:
  - airq
  - amazondashbutton
  - astro
  - chromecast
  - http
  - ipcamera
  - lgwebos
  - luxtronikheatpump
  - miio
  - mqtt
  - network
  - ntp
  - openweathermap
  - pushbullet
  - shelly
  - somfytahoma
  - sony
  - telegram
  - wifiled
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: true
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: windows
    pixelRatio: 1
    prefersColorScheme: dark
  isSecureContext: false
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 8
    language: de
    languages:
      - de
      - de-DE
      - en
      - en-GB
      - en-US
      - pl
    onLine: true
    platform: Win32
  screen:
    width: 3440
    height: 1440
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: dark
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
    like Gecko) Chrome/108.0.0.0 Safari/537.36 Edg/108.0.1462.46
timestamp: 2022-12-16T08:23:48.786Z

Additional information

[florian-h05]

1. I don‘t see a need to add such a new page, you can accomplish this by using existing functionality: get the view area‘s size from the screen object (as documented https://www.openhab.org/docs/ui/building-pages.html#dynamically-configuring-components-with-expressions) and subtract the padding of the layout block (use the css var as documented here https://v5.framework7.io/docs/block#css-variables and css calc). I just created a simple widget:

uid: webview_fullpage
tags: []
props:
  parameters:
    - description: URL of webpage to embed
      label: URL
      name: url
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 4, 2023, 6:50:31 PM
component: iframe
config:
  src: =props.url
  style:
    border: none
    border-radius: var(--f7-card-border-radius)
    height: ='calc(' + screen.viewAreaHeight + 'px - 2*var(--f7-block-padding-vertical))'
    width: ='calc(' + screen.viewAreaWidth + 'px - 2*var(--f7-block-padding-horizontal))'

This widget is also available on the marketplace, see https://community.openhab.org/t/fullscreen-webview-widget/144950.

Use this widget on an empty layout page:

config:
  label: Fullscreen Webview
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:webview_fullpage
                      config:
                        url: https://grafana.localnet
masonry: null
grid: []
canvas: []

This renders to:

2. My posted code already does this — please note that it does not react to style changes like rotation during runtime. If you rotate your device, you have to reload or reopen the page to adjust itself.
3. CORS problems: We cannot influence this behaviour, because CORS is there for security. You might be able to get the browser ignore CORS using a addon, but a web app like openHAB cannot do that. Instead of doing such hacking stuff, I‘d rather prefer to configure CORS properly:
   • For Grafana, see https://grafana.com/docs/grafana/latest/setup-grafana/configure-grafana/#allow_embedding
   • For other services: there might be settings in this service, otherwise you can put them behind a reverse proxy like nginx and set the Access-Control-Allow-Origin header, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

[florian-h05]

I will close this issue then. Please let me know if my solution worked for you!