Use webview and iframes to show a pretty weather forecast

Tutorials & Examples
, ,
1

I’ve been experimenting with iFrames for the Grafana persisted data and thought i’d have a look at options for a nice weather gui as well. The benefit of an iframe is that there can be a level of interactivity within the frame; dynamically loading/modifying content/icons etc.

As luck would have it, there are a number of providers out there who have some nice looking widgets available and they are easily able to be implemented into a webview item via an html file.

MeteoBlue - https://www.meteoblue.com/en/weather/widget/setupday/auckland_new-zealand_2193733
Dark Sky - http://blog.darksky.net/forecast-embeds/
Metservice - http://about.metservice.com/our-company/weather-on-your-website/weather-widget/
Wunderground - https://www.wunderground.com/stickers/
Powerio - https://www.powr.io/tutorials/how-to-add-weather-plugin-to-your-iframe-site
…
The list goes on.

For this example I will show the one I like the best (MeteoBlue) although it’s weather forecast doesn’t align exactly with my local forecasters so my mileage may vary.

Begin by visiting MeteoBlue and choosing the type of widget/iFrame that you want to show, then configuring the output as you would like. It’s a simple procedure and you’re left with an iFrame output at the bottom of the page.

Note: I found that the MeteoBlue site was auto locating me based on my IP address location, so I needed to alter my location via the location search box at the top of the page. You can easily edit the location in the url later regardless.

Take the code block you are given after editing the widget settings and paste it into an html file with the below format:

weatherframe.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-type” CONTENT=”text/html; charset=utf-8″>
</head>
<body id=”weather-body” onload=”formatIframe()”>
<tr>
  <<<YOUR FRAME CODE GOES HERE>>>
</tr>
</body>

In OH2 you will want to save this file into the conf/html folder. Perhaps someone with OH1.x can confirm/deny the exact location for this file in that environment.

Add a webview item in the location you want the iframe to be visible with a format like:

Webview url="/static/weatherframe.html" height=18 //your height may need to change

Bonus: You can also use this in HabPanel by configuring a Template widget to display the content of the html file without the need to have it save in a file anywhere else.

Bonus 2: the MeteoBlue (at least) webview populates nicely from my.openhab.org also.

In the image below I still have data being pulled from the weather binding (wunderground) being displayed. There will no doubt be variance in the content but this is something I probably don’t care too much about when using the weather webview in a different location in the sitemap.

Capture1.JPG1229×955 67 KB

10 Likes
2

How well does this work on the phone apps?

I was able to confirm that it does indeed not work in Habdroid at least. This isn’t surprising, the old webview for the Weather binding never used to work either.

I was also unable to get Forecastio to work but MeteoBlue works.

NOTE: The instructions have the user create a weatherframe.html but the example to put it on the sitemap uses /static/weather4.html.

3

Thanks @rlkoshak I’ve fixed the naming mix up.

I only use my.openhab.org on my mobile devices so didn’t think to check on the app sorry. It does seem that all webview elements won’t work with habdroid which is a shame.

Here’s what forecastio/DarkSky looks like:

forecastio.JPG1225×613 41.5 KB

Using:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-type” CONTENT=”text/html; charset=utf-8″>
</head><body id=”weather-body” onload=”formatIframe()”>
<tr>
  <iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=-41.2865&lon=174.7762&name=Wellington color=#00aaff&font=Arial&units=ca"> </iframe>
</tr>
</body>

Note: The icons on this iframe are animated so are quite nice to look at.

4

OK, I copied this over exactly as you have it above.

It works from my local network.

It does not work when accessing through nginx reverse proxy.

It does not work when accessing through my.openhab.

It does not work on the phone.

There must be something that Forecastio is doing differently from MeteoBlue that is preventing it from working through a proxy.

5

Damn, you’re right. It doesn’t work on my.openhab for me either.

To be honest, in my ignorance, I just assumed they would all work similarly as the data is being hosted outside of my local network, so the frame doesn’t have issues accessing that info remotely/locally.

6

I would have expected the same. If MeteoBlue worked I see no reason for Forecastio not to. It’s too bad because I like the simplicity and compact layout of the Forecastio widget (the animated icons are nice too) better.

Thanks for the tutorial though.

7

@rlkoshak This is a little hacky, and not as compact, but try this address for the iframe:

<iframe src="https://darksky.net/-41.2865,174.7762#week" scrolling="no" frameborder="no" width="100%" height="600px"></iframe>

Replace your lat/lon details and probably have a play with the webview height and iframe dimensions.

What it does is take the data in the div called week from the main darksky homepage and insert it into an iframe. Of course, this might stop working if the homepage changes, or the div is renamed, so not ideal. It did get me thinking about now being able to show parts of any website within a nice iframe element though…

You can also use the maps.darksky.net embedding options:

<iframe width='100%' frameBorder='0' style='height: 95vh' src='https://maps.darksky.net/@temperature,-41.2865,174.7762,4?embed=true&timeControl=true&fieldControl=false&defaultField=temperature&defaultUnits=_c'></iframe>

Compact.JPG1099×858 49.3 KB
Expanded.JPG1098×856 54.3 KB
Map.JPG1099×857 58.5 KB

2 Likes
8

That iframe worked. Odd that the official one does not. It worked both through nginx and my.openhab. Still no joy on the phone, but that is to be expected.

Thanks for the tutorial!

9

For beginners, I want to show a way to set up a pretty weather forecast in the sitemap in 5 minutes, working local and remote in the app:

First, go to https://weatherwidget.io/ and set up a widget using the instructions, adjust the width of the frame, and click “get code”.

Second, go to your conf/html folder, and set up a HTML file called weatherview.html (or whatever name you prefer). Paste in this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-type” CONTENT=”text/html; charset=utf-8?>
</head>
<body style='margin:0;padding:0;'>
	
<!--Paste the code from weather.io here!-->
 <a class="weatherwidget-io" href="https://forecast7.com/en/43d30n74d22/new-york/" data-label_1="NEW YORK" data-label_2="Weather" data-theme="original" >NEW YORK Weather</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
<!--End code from weather.io here!-->


</body>

The code from weather.io goes into the commented section. Save the file.

Last, add it to your sitemap:

Webview url="/static/weatherview.html" height=18 //your height may need to change

Voila, you are done. You can easily adjust the widget to your needs and colours, just paste the new widget code afterwards.

For me, I used grey background to use it with the grey theme of the app, and it integrates nicely:

Screenshot_20181122_143812
Screenshot_20181122_143812.jpg1040×2016 132 KB

4 Likes
10

I was just looking at those a couple of days ago and thought it looked great. Heaps of customisations too. Nice work.

11

Hello,
someone know who can I change the unit and the language like this. The addition “/ca12/de” not work.
I found this (optional parameters)

<iframe src="https://darksky.net/-41.2865,174.7762#week" scrolling="no" frameborder="no" width="100%" height="600px"></iframe>

Thanks in advance for the help!

12

For this type of widget I believe your source link needs to have the parameters added to the end as per the link you found.

However the Darksky widget api is the one you want to use if you want to change the language in the widget I think. It does use a slightly different method (a script as opposed to a html direct link).

e.g.

src="//forecast.io/embed/#lat=42.3583&lon=-71.0603&name=Downtown Boston&color=#00aaff&units=ca"
13

@pahansen:
Thank you for your help!

14

Hi Holgi,
Thanks for the weather forecast. Nice introduction for beginners. This is working fine :grinning:
I also wanted to add the trafic from home to my office in the sitemap. When I put the URL from google maps it is refused by Google on a tablet and PC. On my smart phone this works fine.
Is with the same technic you used for the weather forecast also possible. I assume that somewhere this X-Frame-Options SAMEORIGIN needs to be added but I don’t know how to do. So the question is if this should be possible and if you can help a bit would be nice.