iFrame Panel: Weather Panel – OSKAR

This will require Builder privileges for setup and implementation.

In many instances having the weather on your dashboards a great way to keep your staff engaged in the dashboards. We can use Dark Sky's Forcast.io to create a simple iFrame to get a simple weather panel. For more on Dark Sky's Forcast.io: Forcast.io, Dark Sky

Basic Weather Widgets
Animated Weather Map

What You Will Need:

Dark Sky's Forcast.io
Latitude and Longitude Finder
iDashboards HTTP://<server:port>idashboards/

Basic Weather Widgets

Create a new dashboard and click on the Panel icon . Select the IFRAME Panel from the options. Fill in the following information to populate your chart.

URL: //forecast.io/embed/#lat=42.6064&lon=-83.1498&name=Troy, Michigan

To customize your location you will need to update the latitude (lat), longitude (lon), and name. You can use a site like Latitude and Longitude Finder to find your latitude (lat) and longitude (lon). For the name follow the same format. City, State.

lat=42.6064 & lon=-83.149
Name ( City, State)

In iFrame Panel

Uncheck: Allow Form Submission
Allow Scripts: Say Checked
Check: Allow SAME-ORIGIN

Alternatively:

You can visit: Meteoblue Weather Close to You

In the Location Search field at the top enter your city
Customize your widget
Then select just the URL in the code at the bottom and copy and paste this into your IFRAME Panel

WillyWeather is another site where you can create your own customized weather widget.

Basic Weather Widgets

Animated Weather Map

If you would like to make your HTML5 Dashboard(s) more engaging an animated weather map is one way you can do this. We can use Windy to create a custom map and it will build the iFrame code for you to insert into your Dashboards.

Please Note: You will also need to be a Builder, Data Admin, or Admin to set this up.

What You Will Need:

Windy
iDashboards http://<server:port>idashboards/

To begin go to https://www.windy.com/
In the Search Location field enter your city
At this point to you can zoom in or out to your desired elevation

Next use the controls on the upper right to select what type of map and weather conditions you'd like to display
Once you've customized your map to your liking, click the hamburger button in the upper left corner and select Embed Widget on page
A pop out window will open and you'll notice your iFrame code in the pink panel at the bottom

In the Dashboard Designer Select an empty frame
Click the Panel button
Select IFRAME panel
Next copy and paste your HTML code from windy.com to a text editor. You want to copy the URL between the parentheses out of the code and paste it into the URL field in your panel.
- Allow Form Submission
- Allow Scripts

Click OK and you will now see your Weather Map panel in your dashboard!

Weather Widget

If you would like to add a weather widget panel to your dashboard you can do so by going to Booked.net They have a number of styles to choose from and you can customize the color and size for most of them.

Start by navigating to the upper right corner and select chose your location to set your location
Next select the style of widget you like and click the customize button if you'd like to make some changes
Then click the Get HTML Code button
In your dashboard, select your panel and click this button and select HTML Panel.
Click the Edit button and copy and paste the HTML code from your widget into this window
Click OK.
Save your dashboard and now you have a weather widget in your Dashboard!