They're free, but use at your own risk
The scripts in PHP and Perl referenced here are used in the operation of this weather station, and may be freely copied and used to support your station. Please note that you use these scripts at your own risk. No warranty is expressed or implied. I accept no liability for any damages that may ensue from their use.
You will need to configure them for your own particular station website.
A RSS Feed is available to help keep you informed on updates to the scripts.
A Version History is available -- check back from time to time to see if there are updates to scripts you have downloaded earlier. Announcements of version updates and new scripts are made on WXForum.net , Weather-Watch, Ambient and Weather-Matrix forums as they become available.
This page was updated
Sunday, 30-Dec-2007 7:27 PM
Using AJAX for near real-time updates with Virtual Weather Station (VWS) and VWS Weather Flash
AJAX can be used to update your conditions webpage between regular update times without reloading the entire page in the browser. It does require a 'modern' browser, and that JavaScript be enabled in the browser. This script and template set allows you to use a capability of VWS software to frequently update a small pair of data files associated with Weather Flash: wflash.txt and wflash2.txt. In these files, the current conditions values are set in comma-delimited format. While the format of these files is undocumented by the developers, thanks to the work of Matt at weatherbus.com and my own sleuthing, a layout has been determined and is available in an Excel spreadsheet.
What you need to make this work on your VWS-driven weather website:
- Virtual Weather Station software, installed and running using your weather station's data.
- VWS Weather Flash software installed on your website and configured for your desired units display ((it appears that 'Demo' mode will work fine if you haven't purchased the full Weather Flash package).
- VWS configured to update the Weather Flash condistions files (wflash.txt, wfash2.txt), hopefully using the PHP or ASP method. It will work with the FTP method (for sites without PHP or ASP (like free hosting sites), but the FTP update frequency will by a minimum of 1 minute .. probably not worth the effort for 'real-time'.
- Configure ajaxVWSwxf.js (the AJAX JavaScript for VWS) for your website directories and other setup options
- Use either the sample wx-V2.htx or usa-V2.htx files as VWS templates, or do manual markup on your own pages.
- Upload the configured ajaxVWSwxf.js file, and the wind-arrow icons to your website, then update your weather pages (either by replacing the templates, or by manual markup) and have them uploaded to your website via VWS FTP (so the ^vwsNNN^ variables can be substituted by VWS with current conditions values on the HTML pages).
You'll need to change the settings area of the JavaScript before you use it:
// -- begin settings --------------------------------------------------------------------------
var flashcolor = '#CC0000'; // RGB color to flash for changed observations
var flashtime = 2000; // miliseconds to keep flash color on (2000 = 2 seconds);
var reloadTime = 5000; // reload AJAX conditions every 5 seconds (= 5000 ms)
var maxupdates = 0; // Maxium Number of updates allowed (set to zero for unlimited)
// maxupdates * reloadTime / 1000 = number of seconds to update
var wflashDir = '/wflash/'; // URL for directory for WeatherFlash relative to this script with
// trailing '/'. In Root = '/', in /wflash = '/wflash/'
var imagedir = './ajax-images' // place for wind arrows, rising/falling arrows, etc.
var useunits = 'E'; // 'E'=USA(English) or 'M'=Metric or 'W'=use WeatherFlash settings
var useKnots = false; // set to true to use wind speed in Knots (otherwise
// wind in km/hr for Metric or mph for English will be used.
var useMPS = false; // set to true for meters/second for metric wind speeds, false= km/h
var showUnits = true; // set to false if no units are to be displayed
var useAMPM = true; // set to false for 24hr time (only used for update time value)
var showNoWind = true; // true shows wind=0 as 'Calm' and gust=0 as 'No Wind'
// // flase shows wind=0 as '0' and gust=0 as '0'
var thermometer = './thermometer.php'; // script for dynamic thermometer PNG image (optional)
// optional settings for the Wind Rose graphic in ajaxwindiconwr as wrName + winddir + wrType
var wrName = 'wr-'; // first part of the graphic filename (followed by winddir to complete it)
var wrType = '.gif'; // extension of the graphic filename
var wrHeight = '58'; // windrose graphic height=
var wrWidth = '58'; // windrose graphic width=
var wrCalm = 'wr-calm.gif'; // set to full name of graphic for calm display ('wr-calm.gif')
// -- end of settings -------------------------------------------------------------------------
- wflashDir
-
The setting for wflashDir is critical -- it needs to point to the URL path for the Weather Flash directory, as the script is expecting to find three files in that directory structure:
Config/Units.txt (for the current units of measure settings),
and Data/wflash.txt, Data/wflash2.txt (for the current weather conditions).
- useunits
-
Select the Units of Measure (uom) to display by setting the useunits variable. It has three choices:
useunits='E' (default) selects English/USA units (°F, mph, in, inHg, ft, miles)
useunits='M' selects Metric units (°C, km/h, mm, hPa, m, km)
useunits='W' selects to use the Weather Flash units settings.
- imagedir
- You'll need to upload the set of images (wind direction icons, rising/falling arrows) and adjust the imagedir setting to reflect the relative URL path to the directory. The default is ./ajax-images .
- maxupdates
- (new with V2.04) - controls maximum number of refresh cycles before the AJAX routines stop uploading. Set to zero (default) for no limit.
- showUnits
- Set to true (default) to include units in the AJAX updated variables, set to false to include the variables only (no units)
If you use markup like <span class="ajax" id="ajaxtemp">^vxv007^ ^uni007^</span> then set to true
If you use markup like <span class="ajax" id="ajaxtemp">^vxv007^</span> ^uni007^ then set to false.
- useKnots
- Set to true to display windspeed/wind gust speed in Knots. Default value is false (show mps or km/h).
- useMPS
- Set to true to display windspeed/wind gust speed in meters per second instead of km/h (only used if useunits='M' or useunits='W"). Default value is false (show km/h for wind in metric mode).
- useAMPM
- Set to true (default) to display the update time in AM/PM format. Only affects the display of the updated time (ajaxtime). Set to false to display the update time in 24hr time (00:mm:ss .. 23:mm:ss )
- showNoWind (added in V2.02)
- Set to true (default) to display 'Calm' for wind=0, and 'No wind' for gust=0, and suppress wind direction/icon when both wind and gust are zero. Set to false to show wind icon/direction at all times and '0' for wind or gust when respective speeds are zero.
- thermometer (added in V2.03)
- Set to relative address of the thermometer.php script on your site (optional). If used, the ajax id="ajaxthermometer" will be updated on your page.
- wrName, wrType, wrHeight, wrWidth, wrCalm (added in v2.04)
- These settings are used to generate the name of the wind-rose file based on current wind direction.
the name of the file will be [imagedir]+"/"+[wrName]+[winddirname]+[wrType].
-
New with version 2.04 is a language settings area to allow you to substitute for the English phrases used in the script. The language area appears in ajaxVWSwxf.js just below the settings area. You can make changes in the text areas. Please note that langMonths and langDays are NOT currently used (in V2.04).
// -- language settings -- you don't need to customize this area if you are using English -----
var langPauseMsg = 'Updates paused - reload page to start'; // substitute this for ajaxindicator when
// maxupdates has been reached and updating paused.
var langMonths = new Array ( "January","February","March","April","May",
"June","July","August","September","October","November","December");
var langDays = new Array ( "Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun");
var langBaroTrend = new Array (
"Steady", "Rising Slowly", "Rising Rapidly", "Falling Slowly", "Falling Rapidly");
var langUVWords = new Array (
"None", "Low", "Medium", "High",
"Very High", /* be sure to include for space */
"Extreme" );
var langBeaufort = new Array ( /* Beaufort 0 to 12 in array */
"Calm", "Light air", "Light breeze", "Gentle breeze", "Moderate breeze", "Fresh breeze",
"Strong breeze", "Near gale", "Gale", "Strong gale", "Storm",
"Violent storm", "Hurricane"
);
var langWindDir = new Array( /* used for alt and title tags on wind dir arrow and wind direction display */
"N", "NNE", "NE", "ENE",
"E", "ESE", "SE", "SSE",
"S", "SSW", "SW", "WSW",
"W", "WNW", "NW", "NNW");
var langWindCalm = 'Calm';
var langGustNone = 'None';
var langWindFrom = 'Wind from '; /* used on alt/title tags on wind direction arrow*/
var langBaroRising = 'Rising %s '; /* used for trend arrow alt/title tags .. %s marks where value will be placed */
var langBaroFalling = 'Falling %s ';
var langBaroPerHour = '/hour.'; /* will be assembled as rising/falling + value + uom + perhour text */
var langThermoCurrently = 'Currently: '; /* used on alt/title tags for thermometer */
var langThermoMax = 'Max: ';
var langThermoMin = 'Min: ';
var langTempRising = 'Rising %s '; /* used for trend arrow alt/title tags .. %s marks where value will be placed */
var langTempFalling = 'Falling %s ';
var langTempPerHour = '/hour.';
var langHumRising = 'Rising %s '; /* used for trend arrow alt/title tags .. %s marks where value will be placed */
var langHumFalling = 'Falling %s ';
var langHumPerHour = '/hour.';
// -- end of language settings ----------------------------------------------------------
To invoke the script on your page, just include a
<script type="text/javascript" src="ajaxVWSwxf.js"></script>
on the page using the script, and perform the <span class="ajax" id="ajax...."></span> markups on your page for the variables you'd like to have AJAX updated.
Remember that only ONE instance of a particular id="ajax...." can be used on a page (that's an HTML rule).
Making AJAX work on your VWS with Weather Flash weather website
The key to successful use of AJAX is to present the same appearing display to your visitor when JavaScript is not enabled in their browser. AJAX is only available if JavaScript is enabled, since AJAX is a JavaScript technology.
If you'll glance at the sample wx-V2.htx or usa-V2.htx files, you'll see two types of code for each condition variable to be updated. The first type is a <span class="ajax" id="ajax..."></span> pair, between the start/end tag is where the JavaScript will write the value on the page. The VWS tags to display the condition and the units for the condition is contained within the <span></span> tags so the no-JavaScript condition will automatically display the uploaded values from VWS. The class="ajax" attribute in the <span></span> are used to enable the 'red flash' of conditions during AJAX updates (and for 2 seconds afterwards).
The AJAX script for VWS with Weather Flash (ajaxVWSwxf.js) has three AJAX enabled functions inside. The ajaxGetUnits function is used once when the script is loaded (if useunits='W'; ) and reads the Weather Flash Config/Units.txt file for the preferences for units to use for the AJAX display. The function is not invoked for useunits='E' (USA) or useunits="M" (Metric). If anything other than English/USA units is selected, the ajaxLoader scripts below will automatically convert the display values to the selected units of measure (and change the UOM text too).
The other AJAX functions ajaxLoaderVWSf and ajaxLoaderVWSf2 do the heavy lifting by reading wflash.txt and wflash2.txt (using the JavaScript XMLHttpRequest). The comma-delimited files are sliced up by the JavaScript split command and the appropriate value retrieved from the split array. As each condition is computed (converted from English units if needed) and formatted, it is then updated on the browser by a statement like set_ajax_obs(("ajaxhumidity",humidity); . This small set_ajax_obs function is:
function set_ajax_obs( name, value ) {
// store away the current value in both the doc and the span as lastobs="value"
// change color if value != lastobs
var element = document.getElementById(name);
if (! element) { return; } // don't store if no <span> tag found for this id=
var lastobs = element.getAttribute("lastobs");
element.setAttribute("lastobs",value);
if (value != lastobs) {
element.style.color=flashcolor;
}
element.innerHTML = value;
}
The set_ajax_obs function replaces the direct update of the value on the page so that the new value can be 'remembered' in the 'lastobs="value"' so that only changed values (from last time) can be highlighted with the 'red-flash' like the 'green-flash' on WeatherUnderground.
The ajaxLoaderVWSf and ajaxLoaderVWSf2 functions will reinvoke themselves at the interval specified (in milliseconds) by the setting reloadTime (which has a default of 5000 ms = 5 seconds).
Included in the package is a second JavaScript (ajaxVWSgizmo.js) which works with ajaxVWSwxf.js to provide a rotating conditions gizmo display -- you can use this on auxillary pages on your website to show current conditions. There is a sample file included with the HTML markup needed to provide this function. There is only one setting inside the ajaxVWSgizmo.js script that may need changing: set showUV = false; if you don't have a UV Sensor on your station.
A PHP program is included which allows you to display the current values of the weather variables inside wflash.txt and wflash2.txt. It does require your website to support PHP (the rest of the files require HTML only). There is one setting inside the PHP, so make sure that $wflashDir = './wflash/Data/'; points to the relative FILE address of the Weather Flash Data directory (relative to the location of the show-wflash.php script on your website).
I hope you find this explanation helpful. Take a look at the sample code with markups, and adapt to your own website. Good luck with your own AJAX project.
AJAX demo package for VWS with Weather Flash: [v2.04] [see version history]
Version 2.04 has new wind-rose icons in the zip package
(Note: right click on Download links to Save As... the files).
| Component |
Demo | Download |
Updated (UTC) |
| Full .zip package (with icons and docs) |
n/a |
|
31 Dec 2007 01:18:33 |
| Demo page | | | 31 Dec 2007 01:20:41 |
| wx.htx VWS template with AJAX | | | 18 Dec 2007 15:38:12 |
| usa.htx VWS template with AJAX | | | 18 Dec 2007 15:38:12 |
| Gizmo demo | | | 18 Dec 2007 15:38:12 |
| AJAX Javascript | n/a | | 31 Dec 2007 00:41:16 |
| AJAX Gizmo | n/a | | 18 Dec 2007 15:38:12 |
| PHP to display wflash/wflash2.txt | | | 18 Dec 2007 15:38:59 |
| Text doc of AJAX markups available |
n/a |
|
18 Dec 2007 15:38:12 |
| Spreadsheet of VWS, AJAX values | n/a | | 18 Dec 2007 15:38:12 |
Special thanks goes to 'pinto' (http://www.joske-online.be/clientraw/index.php) and
Tom (carterlake) who together pioneered the AJAX techniques
with Weather-Display and shared it with the world on the Weather-Display forum. My efforts here are based on their work and they have my gratitude for allowing other websites to use it.
Special thanks also goes to Chris at Cape Coral Online Weather for inspiring the original VWS-AJAX project (using data.csv) and helping develop/test the code, and offering a platform to view the samples processed by VWS.
Special thanks also goes to Matt at WeatherBus.com for mapping much of the wflash.txt/wflash2.txt layouts, and creating the initial AJAX script. His homepage uses most of the features of the AJAX JavaScript code.
The functions have been tested with IE7, Firefox 2.0, Opera 9, Netscape 7, Safari (Windows)and seem to work ok.
Upgrading from VWS AJAX using data.csv version 1.0
The AJAX markup used in this script set is compatible (and an extension to) the markup used with the first VWS AJAX script. To upgrade your website to use this script set, you'll need to have:
- VWS Weather Flash software installed on your website and configured for your desired units display ((it appears that 'Demo' mode will work fine if you haven't purchased the full Weather Flash package).
- VWS configured to update the Weather Flash condistions files (wflash.txt, wfash2.txt), hopefully using the PHP or ASP method. It will work with the FTP method (for sites without PHP or ASP (like free hosting sites), but the FTP update frequency will by a minimum of 1 minute .. probably not worth the effort for 'real-time'.
- Configure ajaxVWSwxf.js (the AJAX JavaScript for VWS) for your website directories and other setup options
- Upload the configured ajaxVWSwxf.js and the icon set to your website.
- Edit your existing AJAXed page templates to
- change the <body onload="JavaScript: ajaxLoader('data.csv?'+new Date());"> to <body>
- remove the embedded AJAX javascript and replace it with
<script type="text/javascript" src="ajaxVWSwxf.js"></script>
- Have VWS upload your modified pages.