Leuven script for a WeatherUnderground weather-forecast page v3


Demo scriptWhat does this script
explanationFirst a page with all parts separate, grey background-color, explanations for every part of the page, using KDE icons.
normalA "normal" page, with all parts separate, page style in blue colors, using WU icons and English UOMs.
The contents of this page, including the graphs, will adapt to the width of the browser window.
compactThe smallest possible view, but with all information combined into tabs, fixed width, transparent background, page style in green.
iconsJust the icons to be used on a startpage, using KDE icons and temperature color in blue/red only.
SaratogaAnd an example with the Saratoga template using WU icons.
LeuvenAnd here the script is used in the Leuven Template

How it works

API - key:
The page is rendered in the following steps:
  1. check the age of the cached data
    First is checked whether the last retrieved and processed information contained in the "cache" folder is still usable. If yes, then proceed to step 4
  2. Get xml
    The xml is retrieved from the Weather Underground webserver based on the map co-ordinates.. There is no other information required. The information retrieved also mentiones the city-place name associated with these coordinates. This location-information is also listed for control in the credits at the bottom of the page
  3. xml processing
    The information needed for the weather forecast is gathered from the xml.
    Some information is available in 12 hour intervals, others 24 per hour. After processing and clean-up, all information is stored on a per 12 hours basis in an intermediate table.
  4. html generation
    All possible parts of the html page are now generated from the information in the intermediate table. This html is stored in variables for use in the next step
  5. send html to the browser Based on the settings in the print script the required html parts are now sent to the browser of the visitor.

There are several print??. Php scripts available in the download which perform the steps just described in the correct order. These print??. Php scripts differ only in the number of html parts which will be displayed.

The order of execution is then:
  1. print????.php - part 1
    In this script the settings are specified for which parts of the page should be displayed later. There are also settings for color, icons used, language. All these settings are located at the start of the script and only once customized to the needs of the website administrator.
    The HTML generation script wuforecast3.php is loaded next.
  2. wuforecast3.php - part 1
    This script includes all sorts of settings that (almost) never habe to be changed and only serve for internal processing. The script wuweather3.php is now loaded to retrieve the information from the WeatherUnderground server.
  3. wuweather3.php
    If the information in the "cache" folder is still usable it is loaded and control is returned to wuforecast3.php.
    If the cache time is exceeded (defaults to 2 hours) then a new xml request is issued, the xml is cleaned and stored as a table in the cache folder. The control will return to wuforecast3.php.
  4. wuforecast3.php - part 2
    All HTML is generated based on the information in the table received from wuweather3.php received. The language used, the units, the color and the type of icons are generated according to the settings from the first step. The different pieces of information are stored in html variables and the control is returned to the print program.
  5. print????.php - part 2
    Based on the settings, the required html parts are sent to the users browser. It does not have to be all at one time. On somepages one wants to display the icons on the top, then other information from other scripts and than the forecast grpahs.


  1. Download from the link HERE
  2. Unzip the downloaded file
  3. Upload (FTP) the wuforecast folder to the main-folder of your website. Often this is the root, at the Leuven-template it is the weather2 folder.
  4. Make a copy of the script printFull.php and give it a new name, for example "myWUforecast.php".
  5. Adjust the settings at the first part of your "myWUforecast.php" script
    Now you can adjust the settings to your hearts content and compare different results.
  6. If you are completely satisfied with your "myWUforecast.php" script, you can transfer the settings to a script for your website.
    • Saratoga-template
      1. Copy the script wxStartWuFct.php to the base directory of the Saratoga template. That is often the root.
      2. Customize this script based on your tests with "myWUforecast.php". You will notice that there are far fewer settings necessary because some are already automatically retrieved from the settings.php file of the template.
      3. Create a menu entry in your menu file. Often this has the name flyout-menu.xml and a menu entry looks like:
        <item caption="WU Forecast" link="wxStartWuFct.php" title="WU Forecast"/>"
    • Leuven-templae
      1. Adjust the wuforecast/startLeuven.php script based on your testing with "myWUforecast.php". You will notice that there are far fewer settings necessary because some are already automatically retrieved from the wsSettings.php file of the template.
      2. Add a menu entry in your menu file wsMenuData.xml. Should look like this:
        <item  nr="50-3"     
        	caption="WU forecast"
        	title="Weather outlook by Wunderground"
    • Other
      You should use the "myWUforecast.php" as a starting point. To implement the script in an iFrame is a possibility. Or simply paste the whole html page into your own scripts through
            include "myWUforecast.php";
      Please ensure that
      1. The generation of the HTML body is disabled in the settings of the "myWUforecast.php" script
        $includeHTML	 = false; 		// #####         head-body-css-scripts are loaded
      2. That the CSS is loaded into your page by including these lines in the head section of your page
        <link rel="stylesheet" href="./wuforecast.css" type="text/css">
        <link rel="stylesheet" href="./wuforecast3.css" type="text/css">
      3. And that the correct java scripts are loaded from the correct folder at the bottom of the html page.
        <script type="text/javascript" src="./javascripts/tabber.js">
        <script type="text/javascript" src="./javascripts/jquery.js">
        <script type="text/javascript" src="./javascripts/highcharts.js">
        <script type="text/javascript">$=jQuery;jQuery(document).ready(function(){for(n in docready){docready[n]()}});

  7. These files and folders can be found in the download after unzip:
    nameWhere is it used for
    _read-me.txttexta summary of all this information
    cachefoldercache folder
    imgfolderThe images used by the scripts.
    There are normal versions and minor (for the graphs) versions of all the icons used
    • wind-icons
    • WeatherUnderground
    • The KDE versions of the icons with the WU coding-sheme of their names
    javascriptsfolderThe required javascripts.
    • highcharts.js the graphs are made with this script
    • jquery.js required for highcharts.js
    • tabber.js to create the tabs
    langfolderThe translation files, with a separate file for each language
    If you want to add your own language request the instructions how to do so
    printFull.phpscriptExample script for full page
    printIcons.phpscriptExample script icons only part
    printSmall.phpscriptExample script with everything in the smallest possible representation
    startLeuven.phpscriptTo use the forecast script from within the Leuven-template
    wuforecast.cssCSSSeparate CSS script for color temperature
    wuforecast3.cssCSSCSS for page layout
    wuforecast3.phpscriptMain script which generates all HTML for all the graphs and tables
    wuweather3.phpscriptScript loads the xml from wunder ground and stores the processed data in the cache.
    wxStartWuFct.phpscriptTo use the forecast script from within the Saratoga-template


You find those settings at the start of the scripts.

  • This is the most important setting and the key should be requested at www.wunderground.com/weather/api/
    Always logon with you WeatherUnderground credentials first. Make a request as a developer for the free API. The minimum number of request is far bigger than you need for your website where a maximum of 12 request per day per language is all you need.
    # ---------------HERE YOU NEED TO MAKE SOME CHANGES ----------------------
    $wuKey		        = 'd65f913c37abd8a9'; 	// #####	set to your (free) Wunderground API key to retreive weatherinfo in xml

  • Set to your default language. Supported in the first release are English: 'en', French: 'fr', German: 'de' and Dutch: 'nl'
    $myLang		        = 'nl';			// #####	set to your default language

  • The forecast information is retrieved from the WeatherUnderground site based on the latitude and longitude. If you are using either the Saratoga- or Leuven-template these values can be found in the appropriate settings files. Be aware that the decimal coordinate system is used. Not the HH MM SS.SS system. North of the equator is positive. West of "greenwich' is negative. The latitude/longitude in this example points to a city in Belgium.
    $myLatitude	        = '53.29437';   	// #####	North=positive, South=negative decimal degrees
    $myLongitude	        = '6.53786'; 	 	// #####	East=positive, West=negative decimal degrees

  • Please use a descriptive name for your weatherstation. This name is displayed in the (optional) heading-line on the forecast page
    $myWeatherstation	= 'my weatherstation';	// #####	your real weather station name

  • This time format is used to report the "fetch" time in the credits.
    $myTimeFormat           = 'd-m-Y H:i';		// #####	Euro 'd-m-Y H:i'; 31-03-2012 14:03  US  'M j Y g:i a';  03 31 2013 02:03 pm

  • If set to false the KDE icons are used. If set to true the WeatherUnderground icons are used. These icons are cached and can easily be replaced with other icon sets. Check them out in the wuforecast/img/ folder. The KDE icons are in the wx-icons folder.
    $wuicons	        = true; 		// #####	use wu icons set true;  use KDE icons set to false

  • The date on the table can be set to MMM dd or dd MMM here
    $monthDay		= true;			// #####	june 30  ==> true   30 june	==> false				

  • If you use the stand-alone version of the script you will type the full script-name in the browser. So leave this folder-name as is.
    $myfolder		= './';			//      	normally ok as the stand alone php script is execeuted from the same folder as the rest of the scripts

  • For testing, leave as is. For integrating the script in your own page, set this to the correct character set used.
    $charset		= 'UTF-8';		// #####	scripts default to UTF-8, change if necessary to ISO-8859-1'

  • Setting $lower to true will convert all texts to lowercase.
    setting $tempSimple to true will use only two colors for the temperature display.
    $lower			= false;		// #####	convert all texts to lowercase (true) or leave as is (false)
    $tempSimple		= false;		// #####	if you want blue/red temp colors set to true.  If set to false every degree has its own color

  • Choose your uom system here. You can change individual settings also WITHIN the constrains of your first choice.
    $metric			= true;   		// #####	units are metric = true (C mm ) or english = false (F in) for WeatherUnderground data
    #						// #####	set metric to your value (UK -US false, rest of the world true
    #						// #####	remove comment marks # for the units you want to use, leave all other comment marks
    if ($metric	== true) {
    	$myTemp		= '°C';
    #	$myBaro 	= ' mb';	        // ##### 	either hPa  or mb is a metric uom for pressure	
    	$myBaro		= ' hPa';	        // ##### 
    	$myRain 	= ' mm';
    	$myWind  	= ' km/h';
    #	$myWind 	= ' m/s';	        // #####	m/s or kts is seldom used but supported also
    #	$myWind 	= ' kts';
            $mySnow         = ' cm';
    else {
    	$myTemp		= '°F';
    	$myBaro 	= ' inHg';
    	$myRain		= ' in';
    	$myWind 	= ' mph';
    #	$myWind 	= ' kts';	        // #####	kts is seldom used but supported also
            $mySnow         = ' in';

  • The following settings are used for all versions of the scripts. you specify which parts should be printed. Be aware that ALL parts are always generated.
    $printHead		= true;                 //              head string
    $printIcons		= true;                 //              icons part
    $cntIcons		= 10;			// #####        number of icons to be printed
    $printGraph		= true;                 //              meteogram graph
    $graphHeight            = 340;                  // 340 = 340px heigh  So it is in pixels without the px characters
    $printTable		= true;                 //              details table
    $printCredit	        = true;                 //              credit line and debug info

  • If using outside a template these settings specify the 'look' of the resulting page.
    $includeHTML	        = true; 		// #####         are loaded, if set to false include the CSS also
    $colorClass		= 'pastel';		//              pastel green blue beige orange 
    $pageWidth		= '95%';		//              set do desired width of the html page example 999px  or 100%
    # --------------- END OF SETTINGS ----------------------------------------