How to embed iFrame code into an OpenHab 4 widget

Setup, Configuration and Use Beginners
1

Hi Guys,

Just rebuilding my environment onto 4.3.5 after my Synology docker container decided to go into an endless rebooting loop, even with a completely new instance in a new container. I’ve now got 4.35 running natively on an old Mac MinI that I have and it seems to be perfectly stable which is great.

Starting from scratch allows me to fine tune the content I have presented on my wall mounted tablet which is a nice opportunity to try something new.

I have simple question and for the life of me I can’t find the answer online, I want to embed a weather map from Windy as one of the full screen displays on my tablet, Windy has a great facility (at https://embed.windy.com/config/map) where you select the map you want and a few other variables, and then it spits out an iFrame code.

For example:

< iframe width=“1280” height=“780” src=“https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=mm&metricTemp=°C&metricWind=mph&zoom=8&overlay=wind&product=ecmwf&level=surface&lat=53.342&lon=10.749&detailLat=53.51498834537313&detailLon=10.01281499862671&marker=true” frameborder=“0”>

What type of widget should I use and where would I post this iFrame string? I had it working before but just can’t seem to manage it now. I’ve tried but the Web Frame Card and the Image Card.

image
image512×1352 61.7 KB

Thanks!

2

An oh-webframe or oh-webframe-card produces the iframe itself. You only need to set the src property of the card (or basic component) to the url in the iframe element example provided by windy.

component: oh-webframe-card
config:
  src: windy.url.here
3

Thanks Justin, it must be my stupidity as I’ve tried to do exactly that but it doesn’t work.

Here’s the yaml from the web frame widget which doesn’t seem to work:

component: oh-canvas-item
config:
  x: 20
  y: 19
  h: 696
  w: 1234
slots:
  default:
    - component: oh-webframe-card
      config: https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=mm&metricTemp=%C2%B0C&metricWind=mph&zoom=8&overlay=wind&product=ecmwf&level=surface&lat=53.342&lon=10.749&detailLat=53.51498834537313&detailLon=10.01281499862671&marker=true

I also tried a different approach using the URL from the main Windy site rather but this also doesn’t work

component: oh-canvas-item
config:
  x: 20
  y: 19
  h: 696
  w: 1234
slots:
  default:
    - component: oh-webframe-card
      config: https://www.windy.com/?51.881,0.554,5
4

config is an object that holds all the properties of the component, you never set config to a direct value. You have to set the src property in the config object:

5

Justin, that’s brilliant, thank you. It seems I had to edit down the URL that the embed windy site gave me but that wasn’t too difficult :slight_smile:

component: oh-canvas-item
config:
  x: -5
  y: 19
  h: 331
  w: 486
slots:
  default:
    - component: oh-webframe-card
      config:
        src: https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=default&metricTemp=default&metricWind=default&zoom=7&overlay=wind&product=ecmwf&level=surface&lat=52.955&lon=9.547&detailLat=53.55&detailLon=10.001&detail=true