Weather Widget with XML and Javascript

[shaynenash]

I wrote this script to calculate if water restrictions were in place if it was hotter than 25deg C. It has turned out to be a pretty good weather widget that can be used elsewhere. This was initially written for Northern Midlands Council in Tasmania, Australia. I wrote this for Internet explorer and haven't tested it elsewhere. It would probably work better if it used XMLHttpRequest Object, I think I will try this next time. Let me know what you think!

Cheers!

Shayne

/* 
Shaynes Weather Script
--------------------------
-Shayne Nash 21/11/07
-Northern Midlands Council
---------------------------
 
What it does:
-Displays weather information one piece at a 
 time from XML Data source
 
How:
-Loads data from an XML and places data in array
-Cycles through data in array
-Removes bad strings
-Writes the data to span element with id "items"
 
Programming info:
-Variables prefixed with "_" are globals.
-place/link script in head.
-place loadXML() in Body onload attribute to load 
 the external data in, self.setInterval("animate()") takes care of 
 the rest.
-Does not like to be used across internet, cache 
 XML on own domain or enable "Access datasources across 
 domains" for the zone the script will be accessed in (at own risk).
 -info array elements are strings
 -Permission is given to use, copy, modify, distribute but
  at your own risk and no warranty or support implied.
 -temp.jpg and speed.gif are not my images so do not use on 
  a live website.
 
----------------------------------------------------------*/
 
//Keep writing info to the span every 2.5 seconds
var int = self.setInterval("animate()",2500);
 
//Globals
var _xmlDoc; //XML buffer
var _info = new Array(); //Array of information from XML
var _i = 0;//Array index tracking
 
//filter out the naughty strings
function filterAlpha(data)
{    
    if (data.match(/^[-]?\d*\.?\d*$/))
    {
        //Data is good output the data
        return (data);
    }
    //data is bad, don't output the data    
    return ("0");//this string can be changed to a friendly error message
}
 
//Load the xml and place the data in the info array
function loadXML()
{
// ActiveXobject only works with Internet Explorer
    if (window.ActiveXObject)
    {      
          //Create the XML object
          _xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
          _xmlDoc.async=false;
          //Grab the XML from here
          _xmlDoc.load("weather.xml");
          //Fill the Array 
          _info[0] = filterAlpha(_xmlDoc.getElementsByTagName("w:forecast")[0].attributes[3].value);
                   //filterAlpha, Just in case the xml owner/hacker puts javascript in the data    
          _info[1] = filterAlpha(_xmlDoc.getElementsByTagName("w:current")[0].attributes[0].value);      
          _info[3] = filterAlpha(_xmlDoc.getElementsByTagName("w:current")[0].attributes[2].value);
          _info[4] = filterAlpha(_xmlDoc.getElementsByTagName("w:current")[0].attributes[3].value);    
          _info[2] = "<img src='water.gif' height=50px>Water Restrictions: None";
          if (parseInt(_info[0]) >= 25)
          {
              _info[2] = "<img src='water.gif' height=50px>Water Restrictions: Apply"; 
          }
          _info[0] = "<img src='temp.jpg' height=50px>Forecast Temp: " + _info[0] + " °C";
          _info[1] = "<img src='temp.jpg' height=50px>Current Temp: " + _info[1] + " °C";
          _info[3] = "<img src='humidity.gif' height=50px>Humidity: " + _info[3] + "%";
          _info[4] = "<img src='speed.gif' height=50px>Wind Speed: " + _info[4] + " km/h";
    }
}
 
//Change the Inner HTML of the Span
//and index the next element if exists
function animate()
{
    //Change Span "Items"
    document.getElementById("items").innerHTML = _info[_i];
    _i++; //Move to next array index
    //if the index doesnt exist then start again
    if (_i >= _info.length) 
    {
        _i = 0;
    }    
}
 
//End of Script
 

[acoder]

That would only work in IE. For a cross-browser solution, add the following:

else if (document.implementation && document.implementation.createDocument) {
  _xmlDoc=document.implementation.createDocument("","",null);
  _xmlDoc.load("weather.xml");
  _xmlDoc.onload = somefunction;
}

[gits]

hi ...

a small optimization to mention - you should use a reference like:

var w_curr = _xmlDoc.getElementsByTagName("w:current")[0];

since you wrote it 3 times in the script. it's not only to shorten the lines ... but to optimize the runtime because js didn't need to parse the dom 3 times any longer ...

kind regards

[shaynenash]

Thank you both very much! Both of these suggestions worked excellent. I am very new to DOM and I am very grateful for your valuable knowledge.

Cheers!

Shayne

[acoder]

Glad it helped.