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:
<!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.