Project:World Weather Online

Specifications

World Weather Online Project

Version 1.0

• Category: Weather
• Author: SpinetiX S.A.
• License: GPL Version 3
• Target: HMD (for Elementi, see Weather widgets page)

Description

Sample project

This is an advanced HMD project consisting of some custom JavaScript which retrieves weather data from the http://www.worldweatheronline.com/ web site,and uses it to display weather information on the HMP.

This example will query the worldweatheronline website to retrieve weather forecast info for the current day and previsions for up to the next 7 days.

• To use this example you must first register http://www.worldweatheronline.com/ to obtain a free API key

  Edit the weather.js file to set the variable key, i.e. var key = "XXXXXXXXXXXXXXXXXXXX";

This script is based on the concept of ID, and will replace the text content of the SVG document with the information returned by the datasource (worldweatheronline in this case).

• The script will search for element whose id is equal to one of the entry of the data source and replace the content of this element by the content of the data source. For instance in the following the "xx" will be replaced by the "observation_time" from the data source:

<textArea>Time: <tspan id="observation_time">xx</tspan></textArea>

• For element ending with "Url" the xlink:href attribute will be modified.
• For the prevision of the next day, the id should be called "weatherN_elementname". Where "N" is the day of the prevision (0=today, 1=tomorrow) and "elementname" is the name of the element to match.

Controlling the parameters

• Open the JavaScript file with a text editor.
• The line var city = "zurich,switzerland"; controls the city for which the weather data is requested.
• The line var num_day = 3; controls the number of day for which the prevision must be query.
• Save the JavaScript file

Controlling the layout

The layout is controlled in the SVG file calling the script. The Svg file can be edited by HMD for the layout. However it is necessary to either use an external text editing tools, or the XML-Tree view to modify the Id of the elements that will be modified by the script.

• Open the XML tree view
• Find the element you want to be modified by the script
• If the element already has an id or an xml:id, modify this id to match the element name of the source, otherwise add an new attribute called id.
• It might be necessary to do advanced XML editing to add <tspan> elements in order to be more flexible in creating your layout.