Add webpage to a 'tabbed page'

Add-ons UIs
1

Is it possible to link a webpage to eg a tab in a ‘tabbed page’. I would like to integrate the zigbee2mqtt page in my OH UI, or any other Page which can be useful. I see that a lot of HA users do this in their layouts.

2

The webframe widget should do this pretty easily, I think. You can embed this on a page and give it your url of interest, and then set that page as the target of a tab.

3

thanks!

I quicky created a widget, but I’m strugling with the height of the of the frame.
When creating the widget, I can use a value with px or %. But when I add this widget on a page, my percentage value is not working. Actually I will mostly prefer to have the page in 100%, so it’s completely filled.

uid: webpage
tags: []
props:
  parameters:
    - description: webpage URL
      label: url
      name: url
      required: true
      type: TEXT
    - description: Set the height of the frame, either a number (eg 300px) or a percentage (eg 100%). Default is 100%
      label: height
      name: height
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 11, 2021, 8:58:57 AM
component: oh-webframe
config:
  src: =props.url
  height: "=props.height ? props.height : '100%'"
4

Adding the widget to a page via the UI puts the widget inside of other containers (which container depends on how you build the page), so something like height: 100% will be the height of the container, not the height of the whole page.

I’ve not tried to make a widget take up the entire screen size before, but I imagine you would need to manually modify the container size.

5

You don’t need a widget; just use CSS calc(), the vh unit and some framework7 variables to achieve the result you want.
The complete code for the page (to replace in the Code tab):

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
grid: []
3 Likes
6

Ok, I tried this, but some pages are not loaded.
eg, my hikvision camera or zigbee2mqtt dashboard loads, but Grafana doesn’t, or even google…
I’m just using the latest Google Chrome version.

image
image1021×309 5.19 KB

7

Many websites including Grafana and Google will not allow browsers to embed them in a iframe.

For Grafana you have an option to enable it: Configuration | Grafana Labs

8

Thanks, didn’t knew that.

9

Tried to use a webframe inside my OH3 page and failed. Page URL is here. OSM built-in in this page and all interactive content doesn’t work. Is there something i could do with that, or it’s not my fault? Page owner gives permission to embed it to iframe.