Fullscreen Webview Widget

[florian-h05 (Florian H.)]

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):

• for Grafana, enable embedding (see Configure Grafana | Grafana documentation)
• for other applications: they probably have such a configuration option as well
• else: put your web application behind a reverse proxy (e.g. nginx) and set the Access-Control-Allow-Origin header (help: Access-Control-Allow-Origin - HTTP | MDN)

Changelog

The git history can be used as a changelog: History for UI/widgets/webview_fullpage.yaml - florian-h05/openhab-conf · GitHub

Resources

https://github.com/florian-h05/openhab-conf/raw/main/UI/widgets/webview_fullpage.yaml

[JustinG]

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…

@florian-h05

Please note that the widget is unable to resize on screen orientation change, you need to reopen or reload the page.

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.

[florian-h05 (Florian H.)]

@JustinG

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.

[ysc (Yannick Schaus)]

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.