Developer Tips & Tricks - Using Your Own Icons with the Weather Gadget

October 26, 2011

During my regular perusal of our forum, I came across another interesting question, this time from Gabe, who wanted to know if it was possible to use "a more animated weather icon forecast" with our digital signage Weather Gadget. This can be achieved by making some simple changes to the existing Gadget.

Get started with Rise Vision

To start, you'll need to download the code for our existing open source Weather Gadget. Be sure to download the files in all of the subfolders as well. The images for the Weather Gadget are stored in the aptly-named images folder. Each icon is named after a particular weather condition (e.g. cloudy.png or rain.png). There are also nighttime versions of each weather condition (e.g. night_cloudy.png or night_rain.png). You will need to replace each of these images with your own, taking care that you preserve the original filenames.

Next, open up the Weather.js file in a code editor. Do a search for the term hostURL. You are looking for the following line (it should be the first instance):

hostURL = "http://c624734.r34.cf2.rackcdn.com/";

Just replace this URL with the location to which you plan to upload your custom Weather Gadget. If you are using images with a file extension other than png, you will also need to search and replace any occurrences of png with the particular file extension that you are using (e.g. gif):

if (hr > 20 || hr < 8) {

//Use night image.

return this.imagesURL + "night_" + icon + ".png";    }

else {

//Use day image.

return this.imagesURL + icon + ".png";

}

One final change and we're done. We need to replace the URL to the Weather.js file since we have just created a new version of it. In Weather.xml, replace the following URL with the URL to your revised Weather.js code:

<script type="text/javascript" src="http://c624734.r34.cf2.rackcdn.com/Weather.js"></script>

Once that is done, upload all of the Gadget code and images to a hosting server. Copy the URL to Weather.xml, and in the Presentation editor you can add your new Gadget by URL:

 

Your Gadget should now be showing your custom weather icons on your digital signage!