Weather Panel

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.  This can be used in both, Flash or HTML5 iDashboards.

For more on Dark Sky's Forcast.io: Forcast.io, Dark Sky 

Please Note:  Flash refers to anything before v10, HTML5 refers to v10.0 and above.  You will also need to be a Builder, Data Admin, or Admin to set this up.

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)

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:  HTML5 refers to v10.0 and above.  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.

• 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.

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