Xibo

Basic weather - Just a weather icon and temperature

Asked by Jeremy Ellis

Can someone assist with getting a weather display like this:
http://www.d.umn.edu/~dhansen/ds

Thanks!

Question information

Language:
English Edit question
Status:
Solved
For:
Xibo Edit question
Assignee:
No assignee Edit question
Solved by:
Jeremy Ellis
Solved:
Last query:
Last reply:
Revision history for this message
Jeremy Ellis (jeremy-ellis) said : 		#1

I figured it out using the downloadable sample from this site:
http://www.onextrapixel.com/2011/08/22/adding-weather-to-your-site-with-jquery-and-yql/

This uses the Yahoo weather API (http://developer.yahoo.com/weather/).

I pasted the code from weather.html into the embed tab of Xibo. I changed up a few things in the css to get colors and remove the box from around the weather.

The icons were too small, so I found a pack of icons and placed them in a folder on my web server. I named them according to the weather condition codes listed on the Yahoo API site. Then I repaced the URL called for the icons in this line:

$('#wxIcon2').append('<img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');

I just changed the URL to the folder on my server that contains the new graphics. I changed the width and height to 50 and replaced the .gif with .png.

The CSS required some tweaking for spacing and such, but it turned out well.

Hope this helps someone else out.