Fullscreen Webview Widget

This simple widget embeds a web page full-screen into the openHAB UI.
Please note that the widget is unable to resize on screen orientation change, you need to reopen or reload the page.

To use the fullscreen web view, create a new layout page, add this widget as the only widget to that page. Set the URL property and you are nearly finished.

Finally, make sure that the web page you try to embed allows embedding (CORS policy):

Changelog

Version 0.1

  • initial release

Resources

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))'
1 Like

Nice, I use the oh-webframe for this, but that doesn’t read the style object so styling is less trivial. I hadn’t thought to just skip right to the iframe

If you just use the f7 variables instead of the screen object it is responsive to orientation changes

- component: iframe
  config:
    style:
      border: none
      height: calc(100vh - var(--f7-navbar-height) - var(--f7-tabbar-labels-height) - var(--f7-safe-area-top))
      width: 100%
      margin: 0
      padding: 0
    src: http://openhab.lan:9002/

although I image there are situations where using the screen object is more flexible.

Correct. If I use this widget on different pages (normal layout page, tabbed layout page) on different devices, your solution unfortunately doesn‘t size correctly size on all of them. The screen object is in benefit here, since it is reading the DOM to get the height & width (note that the screen object in expressions is not exactly the same as the one from the browser API).
But I think it could be possible to make height and width available as css variables.

I had a good run with this:

config:
  layoutType: responsive
  label: Fullscreen Webframe
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-webframe
                      config:
                        height: calc(100vh - var(--f7-navbar-height) - var(--f7-tabbar-labels-height) -
                          var(--f7-safe-area-top) - var(--f7-safe-area-bottom) -
                          2rem)
                        src: https://ventusky.com
masonry: null

You can probably forego the - var(--f7-tabbar-labels-height) part if you don’t have tabs at the bottom.