Leuven script for a Yr.No weather-forecast page

Examples

Demo scriptWhat does this script
explanationFirst a page with all parts separate, beige 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 Yr.No 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.
no javascriptOne standard YrNo meteogram (.png) and one table. No tabs, no javascript. English UOMs.
iconsThe icon-view, to be used on a startpage. The KDE icons are used and the temperature color is in blue/red only.
SaratogaAnd an example with the Saratoga template using Yr.No icons.
LeuvenAnd here the script is used in the Leuven Template

How it works

Multiple forecast available for Yr.No - Met.No data

The widely used forecast data from the Norwegian Meteorological Institute and Yr.No is available in different xml streams. One of the differences is the way the location of the forecast is addressed. This script uses the country/area/city addressing and gets the data from the www.yr.no website. Using that addressing scheme two different xml sets are retrieved:

  • 10 day forecast, 6 hour interval
  • detailed forecast, 2 days, 1 hour interval

By using this country/area/city address it is also possible to obtain a forecast graph (Meteogram) for two days directly from the Yr.No site.

How does it work

Most forecast scripts work in a similar way

  1. Get the data from the data storage using the some ID
  2. Store the processed xml as an intermediate array in a cache-type folder on the webserver
  3. Generate all needed parts to be displayed, such as tables, graphs
  4. Display the data in the way the users/visitors of the website expects

1. Get the data

With the correct location ID (Belgium/Flanders/Wilsele) the information is loaded from the Yr.No . For the 10 day forecast:

http://www.yr.no/place/Belgium/Flanders/Wilsele/varsel.xml

for the detailed forecast

http://www.yr.no/place/Belgium/Flanders/Wilsele/forecast_hour_by_hour.xml

for the avansert meteogram

http://www.yr.no/place/Belgium/Flanders/Wilsele/avansert_meteogram.png

2. Save the the data for multiple use

As the forecast data has a "lifespan" of hours, it is advisable to save the data in a "cache" on the webserver so it can de reused. This lowers the load on the Yr.No servers and shortens the response time for the website vistors considerably.
In our case we partly process the xml and save a PHP array with already all unnecessary information filtered out and all UOM's converted to the required ones.

3. Generate needed HTML

While processing the intermediate arrays "forecast-by-forecast" the html for tables, graphs and so on is generated. In this case there are detailed (hour-hour) and longer term (6-hour interval) tables, Meteogram's for 6 hour intervals and icon sets generated.

4. Display a complete page using the HTML building blocks

Using the definitions in the print- settings the page is assembled to include optional surrounding HTML and the needed parts which can be displayed in optional tabs.

Step by step description of scripts executed

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 yrnoGenerateHtml.php is loaded next.
  2. yrnoGenerateHtml.php - part 1
    The settings file is now read first
  3. yrnosettings.php
    This script includes all sorts of settings that (almost) never have to be changed and only serve for internal processing.
    • unit of measurement for the xml and the output to the user.
    • the correct location ID and latitude / longitude for finding the correct sun-rise sunset-times
    • time and date formats
    The script processes all settings, loads all general functions and loads the translation tables. Then it returns control to the calling script.
  4. yrnoGenerateHtml.php - part 2
    Now the first xml has to be loaded.
  5. yrnoCreateArr.php
    As the name of the script implies, the most important task is to store the xml in an intermediate array. The first action of the script is to check if the current cached array is still usable (2 hours lifespan). If so the array is returned and control goes back to the html generation script.
    If the array is toi old a new xml file is fetched from the Yr.No site. The information is processed, unit conversion done and then all information is stored in the array in the cache. Then the array and ontrol goes back to the html generation script.
  6. yrnoGenerateHtml.php - part 3
    The array with 6 hours data is used to generate the html for
    • The icon display
    • The graphs (Meteogram)
    • The 6 hour table
    Now the script to fetch the detailed information is giving control.
  7. yrnoCreateDetailArr.php
    The checking of the cache, the optional loading and processing of the xml works in the same manner as in yrnoCreateArr step. The array and control goes back to the html generation script.
  8. yrnoGenerateHtml.php - part 4
    The array with 1 hour data is used to generate the html for the detailed table only.
    Control goes back from the html generation to the print script.
  9. print??.php - part 2
    Based on the settings the required html parts are sent to the users browser together with the optional head body javascipts If set by the settings only one extra script is called, that is the script to retrieve the "avansert", the meteogram for two days which is loaded as a ping from the Yr.No site.

Install

  1. Download this script using this link
  2. Unzip the download
  3. Move (ftp) the folder wsyrnofct to the main folder of your website. Often this is the root, at the Leuven-template it is the weather2 folder.
  4. Set the permissions for the wsyrnofct /cache/ folder and its contents at 777, otherwise an error message
    [function.file-put-contents]: failed to open stream: Permission denied
    will occur. All retrieved forecasts are stored in this cache folder.
  5. Test the installation with www.website.xx/wsyrnofct/printfull.php. Please replace www.website.xx/ with the name of your own website. This test uses the data and settings for my Belgium/Flanders/Wilsele/ area.
  6. Check and adapt the settings as described in the next tab on this page.
  7. During adapting the settings script, continue to test often using the printfull.php script.
  8. When all settings seem correct, copy one of the print??.php scripts and give it a meaningfull name, such as "myYRNOforecast.php". On the first tab you see the differences between the print??.php scripts.
  9. Now adapt the settings in the first part of your "myYRNOforecast.php" script.
    Again, check the last tab about the menaing of the settings.
  10. If you are completely satisfied with your "myYRNOforecast.php" script, you can transfer the settings to a script for your website.
    • Saratoga
      1. Copy the script wxStartYRNOfct.php to the base directory of the Saratoga template. That is often the root.
      2. Customize this script based on your tests with "myYRNOforecast.php". ATTENTION: 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="YRNO Forecast" link="wxStartYRNOfct.php" title="YRNO Forecast"/>"
    • Leuven
      1. Adjust the wsyrnofct/startLeuven.php script based on your testing with "myYRNOforecast.php". ATTENTION: You will notice that there are far fewer settings necessary because some are already automatically retrieved from the settings.php file of the template.
      2. Add a menu entry in your menu file wsMenuData.xml. Should look like this:
        <item  nr="50-3"     
                show="yes"
        	link="wsyrnofct/startLeuven.php"		
        	caption="YRNO forecast"
        	css="wsyrnofct/yrno.css"
        	title="YRNO Weather outlook"
        />
        
    • Other
      You should use the "myYRNOforecast.php" as a starting point.
      1. To implement the script in an iFrame is a possibility.
      2. Or simply paste the whole html page into your own scripts through
              include "myYRNOforecast.php";
        Please ensure that
        1. The generation of the HTML body is disabled in the settings
          $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="./wsyrnofct/yrno.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="./wsyrnofct/javascripts/tabber.js">
          <script type="text/javascript" src="./wsyrnofct/javascripts/jquery.js">
          <script type="text/javascript" src="./wsyrnofct/javascripts/highcharts.js">
          <script type="text/javascript">$=jQuery;jQuery(document).ready(function(){for(n in docready){docready[n]()}});
          

  11. 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 is a folder with normal versions and and one with minor (for the graphs) versions of all the icon-sets used
    • default: The KDE versions of the icons with the YrNo coding-sheme of their names
    • wind-icons
    • YrNo-icons
    • and some additional icons are als found in this folder
    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
    The language translation routines from Saratoga or Leuven are NOT used.
    printfull.phpscriptExample script for full page
    printicons.phpscriptExample script icons only part
    printsimple.phpscriptExample script with only the png meteogram and 1 table
    printsmall.phpscriptExample script with everything in the smallest possible representation
    startLeuven.phpscriptScript to use the forecast from within the Leuven-template
    yrno.cssCSSCSS for page layout
    yrnoavansert3.cssscriptRetrieves the avansert (meteogram), saves the png in the cache and returns the location of the png to the calling script
    yrnoCreateArr.phpscript Loads the 6 hour forecast, saves pre-processed information in an array in the cache, returns cache information to calling script
    yrnoCreateDetailArr.phpscript Loads the detailed forecast, saves pre-processed information in an array in the cache, returns cache information to calling script
    yrnoGenerateHtml.phpscript Main script which generates all HTML for all the graphs and tables
    yrnosettings.phpscript Main settings for all scripts, only partly used in the template environments
    wxStartYRNOfct.phpscript Script to use the forecast from within the Saratoga-template

Settings


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

  • The forecast information is retrieved from the YrNo site based on the yrnoID, which is the "country/area/city"-name as used on the main YrNo forecasting site. To retrieve the names for your place
    • Go to the Yr.No website.
    • Switch the language to English at the upper right selection box
    • Search for your city name, test first with your country capital if you can not find your own city.
      When you type the first few letters (ams as an example) in the search box, all cities which start with these letters are shown. Select Amsterdam from the drop down and the forecast for Amsterdam is shown. Now the browser address area shows this
      http://www.yr.no/place/Netherlands/North_Holland/Amsterdam/
      
      The yrnoID we are looking for is Netherlands/North_Holland/Amsterdam. After you have located your own city (or one close to you), copy the country/area/cityname to the setting $yrnoID replacing my own one Belgium/Flanders/Leuven
    $yrnoID		= 'Belgium/Flanders/Leuven';
    

  • You can now specify if you want to use the YrNo icons or the KDE icons on your pages. If set to false the KDE icons are used. If set to true the YrNo icons are used. These icons are cached and can easily be replaced with other icon sets. Check them out in the /img/ folder. The KDE icons are in the default_icons folder.
    $iconsOwn	= false;        // #####    use original yrno icons or our general icons (false)
    

  • 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
    $yourArea	= 'yourArea';           // ##### Leuven country side
    $organ	        = 'yourStationName';    // ##### Wilsele weather
    

  • The sunrise and sunset times are calculated using your stations latitude/longitude. 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.
    $latitude	= '41.30';     	// ##### North=positive, South=negative decimal degrees
    $longitude	= '-72.79'; 	// ##### East=positive, West=negative decimal degrees
    

  • 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.
    $lower		= false;	// ##### convert all texts to lowercase (true) or leave as is (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
    


The next settings in the yrnosettings.php script are used for units of measurement and date/time formats.

  • We describe one of these UOM settings in more detail. They are all adapted the same way.
    For every unit there are different settings but ALL possible settings are already in the script. Do not change the value at the right of the = as this will give errors for sure. Select only the one you want to use. Default the first one is made active by removing the comment mark on the first position of the line. So if you want to change the uom for temperature from Celcius to Fahrenheit:
    • You remove the comment mark for $uomTemp = '&deg;F';
    • And type a comment mark for $uomTemp = '&deg;C';
    #-----------------------------------------------------------------------
    # units of measurement UOM      // ##### set them the same as used on your other webpages
    #-----------------------------------------------------------------------
    $uomTemp	= '&deg;C';	
    #$uomTemp	= '&deg;F';
    

  • Most of the uoms have only two choices. But always end with one uom per weather value without a comment mark and all the others per weather value with a comment mark.
    $uomRain	= ' mm';
    #$uomRain	= ' in';
    

    $uomWind 	= ' km/h';
    #$uomWind 	= ' kts';
    #$uomWind 	= ' m/s';
    #$uomWind 	= ' mph';
    

    $uomBaro	= ' hPa';
    #$uomBaro	= ' mb';
    #$uomBaro	= ' inHg';
    

    $uomSnow	= ' cm';
    #$uomSnow	= ' in';
    

    $uomDistance	= ' km';
    #$uomDistance	= ' mi';
    

  • Here we set the format the date and time are displayed. Again by adding and removing comment marks.
    #-----------------------------------------------------------------------
    # date and time settings
    #-----------------------------------------------------------------------
    $timeFormat	 = 'd-m-Y H:i';	        // 31-03-2012 14:03
    #$timeFormat     = 'M j Y g:i a';       // March 31 2012 2:03 pm
    $timeOnlyFormat	 = 'H:i';	        // 14:03  (hh=00..23);
    #$timeOnlyFormat = 'g:i a';             // 2:03 pm
    $hourOnlyFormat	 = 'H';		        // 14  
    #$hourOnlyFormat = 'ga';                // 2pm
    $dateOnlyFormat	 = 'd-m-Y';	        // 31-03-2013
    #$dateOnlyFormat = 'M j Y';             // March 3 2013
    $dateLongFormat	 = 'l d F Y';	        // Thursday 3 january 2013
    #$dateLongFormat = 'l M j Y';           // Thursday January 3 2013
    

  • This setting is extremely important as all date/time information is translated to your own area. You can find your time-zone at this page on the PHP website
    $timezone	= 'Europe/Brussels';	// Time zone for the whole of western europe, 
    


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 NEED TO MAKE SOME CHANGES --------------------
    #
    $defaultWidth		= '96%';	// set do desired width 999px  or 100%
    #
    # what parts should be printed
    #
    $times                  = true;        // 
    #       icons for top of page or startpage
    $iconGraph		= true; 	// icon type header  with 2 icons for each day (12 hours data)
    $topCount		= 10;		// max nr of day-part forecasts in icons or graph
    #       two kinds of meteograms
    $yrnoMeteogram          = true;         // standard yrno meteogram two days - one column per hour
    $chartsMeteogram	= true;	        // high charts meteogram -  6 days - one colom for every 6 hours - 
    $chartsMeteogramHeight  = '340px';
    $MeteogramInTabs	= false; 	// high charts graph separate (false) or in a tab (true)
    #
    $yrnoTable		= true;		// table with one line for every 6 hours
    $yrnoDetailTable	= true;		// table with one line for every 3 or 1 hours
    $tableHeight            = '500px';      // no restricted height use ''  - restrict use number of pixels: '500px' 
    $tableInTabs            = true;         // put tables in tabs
    

  • 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
    $colorClass		= 'pastel';	// pastel green blue beige orange 
    $pageWidth		= '100%';	// set do disired width 999px  or 100%
    # --------------- END OF SETTINGS ----------------------------------------