Leuven script for NWS/NOAA weather-forecast pages - version March 7 2017


Demo scriptWhat does this script
explanationFirst a page with all parts separate, transparent background, explanations for every part of the page, using NOAA icons.
full pageA "normal" details page, no icons, a meteogram and a combined table for day-part forecast and detailed forecast, page style in blue colors, using KDE icons. Width set to 100%, so the contents of this page, including the graphs, will adapt to the width of the browser window.
plain pageThe standard "1 page" NOAA forecast, green colors, NOAA icons, fixed width
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, width set to 100%.
SaratogaAnd an example with the Saratoga template using NOAA icons.
LeuvenAnd here the script is used in the Leuven Template

How it works

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 (extensive forecast) or json (one-page forecast)
    The xml/json is retrieved from the NOAA webserver based on the map co-ordinates (latitude / longitude). There are two seperate datasets which can be retrieved. The NDFD SOAP - National Digital Forecast Database can deliver multiple xml streams with all kind of informnation. We are interested in a detailed forecast and in a text forecast. The information retrieved also mentions the city-place name associated with these coordinates. This location-information is also listed in the credits at the bottom of the page
  3. xml/json processing
    The information needed for the weather forecast is gathered from the xml/json.
    The information is available in different intervals, some 3 hours apart, others 6 or 12 hours. After processing and clean-up, all information is stored in two tables in the cache.
  4. html generation
    All possible parts of the html page are now generated from the information in the intermediate tables. 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 scripts 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
    After some housekeeping, 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.
    Then all other settings are loaded from the noaaSettings.php file. In this file which is customized only once, all important settings are set once at download/install time. The HTML generation script or scripts are loaded next based on the needed html to be printed later.
  2. noaaPlainGenerateHtml.php and or noaaDigitalGenerateHtml.php
    If the cache time is exceeded (defaults to 2 hours) new xml/json requests are issued, the xml/json is cleaned and stored in tables in the cache folder.
    All HTML is generated based on the information in the cached tables. 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.
  3. 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 graphs.


This page is only used for Saratoga-Template or own website install.

Do not use these instruction for the Leuven-Template, check the template support-site for up-to-date version.
  1. Download from the link HERE
  2. Unzip the downloaded file
  3. Upload (FTP) the noaafct 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 back-up copy of the noaaSettings.php script and modify according to the descriptions in the next tab
  5. Make a copy of the script printFull.php and give it a new name, for example "myforecast.php".
  6. Adjust the settings at the first part of your "myforecast.php" script
    Now you can adjust the settings to your hearts content and compare different results.
  7. If you are completely satisfied with your "myforecast.php" script, you can transfer the settings to a script for your website.
    • Saratoga-template
      1. Copy the script wxStartNoaaFct.php to the base directory of the Saratoga template. That is often the root.
      2. Customize this script based on your tests with "myforecast.php".
      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="NOAA Forecast" link="wxStartNoaaFct.php" title="NOAA Forecast"/>"
    • Other
      You should use the "myforecast.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 "myforecast.php";
      Please ensure that
      1. The generation of the HTML body is disabled in the settings of the "myforecast.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="./noaafct/noaa3.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="./noaafct/javascripts/tabber.js">
        <script type="text/javascript" src="./noaafct/javascripts/jquery.js">
        <script type="text/javascript" src="./noaafct/javascripts/highcharts.js">
        <script type="text/javascript">$=jQuery;jQuery(document).ready(function(){for(n in docready){docready[n]()}});

  8. 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 to be added later after beta tests
    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
    • NOAA_icons
    • default_icons: The KDE icons
    javascriptsfolderThe required javascripts.
    • highcharts.js the graphs are made with this script
    • jquery.js required for highcharts.js
    • tabber.js to create the tabs
    langfolderFor future use and to remove errors to the English language in the html output
    noaa3.cssCSSCSS for page layout
    noaaDigitalGenerateHtml.phpscript Main script which generates HTML for all the graphs and detailed table
    noaaPlainGenerateHtml.phpscript Main script which generates HTML for plain page texts/tables and icons
    printFull.phpscriptExample script for full page
    printIcons.phpscriptExample script icons only part
    printPlain.phpscriptExample script for plain page
    printSmall.phpscriptExample script with everything in the smallest possible representation
    startLeuven.phpscriptTo use the forecast script from within the Leuven-template
    wxStartNoaaFct.phpscriptTo use the forecast script from within the Saratoga-template


You find the most important settings in the noaaSettings.php script.

  • The forecast information is retrieved from the NWS/NOAA 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 Branford, CT.
    $myTimezone 		= 'America/Chicago'; 	// ##### 
    $myLatitude		= '41.30';     		// ##### North=positive, South=negative decimal degrees
    $myLongitude		= '-72.79'; 	 	// ##### East=positive, West=negative decimal degrees

  • Please use a descriptive name for your weatherstation and the surrounding area. This name is displayed in the (optional) heading-line on the forecast page
    $myArea			= 'your country-area';  // ##### Leuven country side
    $myStation		= 'weatherstation-name';// ##### Wilsele weather

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

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

  • Setting $tempSimple to true will use only two colors for the temperature display.
    $tempSimple		= false;		// ##### if you want blue/red temp colors set to true.  If set to false every degree has its own color

  • Setting $lower to true will convert all texts to lowercase.
    $lower			= false;		// ##### convert all texts to lowercase (true) or leave as is (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. The Saratoga and Leuven start scripts modify this setting themselves.
    $myfolder		= './';			//      	normally ok as the stand alone php script is execeuted from the same folder as the rest of the scripts

The following settings are used for all versions of the scripts. You find those settings of the start of every print??.php script.

  • Here you specify which parts should be printed.
    # Function: display a list of forecast date from nws/noaa
    #  first we set which parts  of the page should be printed
    $updateTimes	        = true;		// two lines with recent file / new update information
    $showHazards            = true;         // show hazard warnings when available
    $iconGraph	        = false;	// icon type header  with 2 icons for each day (12 hours data)
    $topCount	        = 10;		// max nr of day-part forecast-icons 
    $chartsGraph	        = true;		// high charts graph one colom for every 3 / 6 hours
    $graphHeight	        = '340';	// height of graph.					
    $graphsSeparate	        = true;		// graph separate (true) or in a tab (false)
    $fcstTable	        = true;		// table with one line for every 3 / 6 hours
    $plainTable             = true;         // table with plain forecast
    $tabHeight 	        = '400';        // to restrict height of tabs to suppress very large/long pages

  • If using outside a template these settings specify the 'look' of the resulting page.
    # some general settings FOR THIS PAGE
    $includeHTML	        = true; 	// #####        < head>< body>< css>< scripts> 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 ----------------------------------------