With Tom’s permission, I’ve used his template set and added AJAX functionality to each page. The main page (wxlocal.html) has AJAX updated conditions throughout the page. The secondary pages (wxlocal[2…9].html) have an AJAX driven gizmo in the top right of the page. The gizmo will rotate the display of current conditions.
New users to the carterlake templates can unpack the zip file, and follow Tom’s readme.doc file to get their new site running with the AJAXed templates. For current users of the carterlake templates, a set of detailed instructions is included to allow you to refit the AJAX mods into your existing template set.
Included with the package are a set of wind direction icons, rising and falling arrows, and a set of weather condition icons. Thanks to Larry at anolecomputer.com for his permission to redistribute his weather condition icons from his PHP Weather sticker software.
The functions have been tested with IE6-SP2, IE7, Firefox 2.0, Opera 8, Netscape 7 and seem to work ok and as a bonus, it validates to XHTML-1.0 Transitional at validator.w3.org.
The new ajaxWDwx.js JavaScript supports both US(English) and Metric units (via a simple configuration change). Settings available are
// -- begin settings --------------------------------------------------------------------------
var flashcolor = '#00CC00'; // color to flash for changed observations RGB
var flashtime = 2000; // miliseconds to keep flash color on (2000 = 2 seconds);
var reloadTime = 5000; // reload AJAX conditions every 5 seconds (= 5000 ms)
var clientrawFile = '/clientraw.txt'; // location of clientraw.txt relative to this page on website
var ajaxLoaderInBody = false; // set to true if you have <body onload="ajaxLoader(..."
var imagedir = './ajax-images'; // place for wind arrows, rising/falling arrows, etc.
var useunits = 'E'; // 'E'=USA(English) or 'M'=Metric
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 showUnits = true; // set to false if no units are to be displayed
// -- end of settings -------------------------------------------------------------------------
Wow very nice Ken, excellent instructions too! Now for a silly question, for those of us that are using ajax with PHP are there any upgrades (that are easy for simple minds) for things like we talked about before, barotrends etc. If so how hard will it be to modify the ajax.js script?
Naaa… your not being greedy I was thinking ahead so I included pretty much all the variables from clientraw that folks may be interested in, so for your request, no mods to script necessary…
The ajaxWDxs.js script uses tags that are the same as the previous ajax script V1.04 that I’d released using PHP. You could even try a plug-and-play (replacing old AJAX script with this new one). If you do, be sure to set
var ajaxLoaderInBody = true; // set to true if you have <body onload="ajaxLoader(..."
in the script if you keep the <body onload=“ajaxLoader(…” in your html, otherwise, you’ll get two instances running since the default for the new script is to load itself (so no tag mod is needed for new installations).
Here’s the list of AJAXed tags supported by the ajaxWDwx.js script (from the included FAQ):
Q: What other WD variables are available?
A: the stock variables included in the JavaScript can be seen as the first argument to each of the set_ajax_obs("ajax...",) calls. Here's the list for reference:
Tagname : function/variable
----------------Temperature / Humidity --------------------------
ajaxtemp : outside temperature
ajaxbigtemp : outside temperature with no decimal point
ajaxtemparrow : outside temperature trend arrow (rising/falling)
ajaxtemprate : temperature rate (+/-)/hour
ajaxtempmin : minimum temperature for the day
ajaxtempmax : maximum temperature for the day
ajaxhumidity : current outside humidity in percent
ajaxdew : current dew point
ajaxdewmin : minimum dew point for the day
ajaxdewmax : maximum dew point for the day
ajaxhumidex : current humidex
ajaxhumidexmin : minimum humidex for the day
ajaxhumidexmax : maximum humidex for the day
ajaxwindchill : current windchill
ajaxwindchillmin : minimum windchill for the day
ajaxwindchillmax : maximum windchill for the day
ajaxheatidx : current heat index
ajaxheatidxmin : minimum heat index for the day
ajaxheatidxmax : maximum heat index for the day
ajaxfeelslike : the current 'feels like' temperature (windchill, temperature, or heatindex
based on current temperature.
ajaxapparenttemp : current apparent temperature
ajaxapparenttempmin : minimum apparent temp for the day
ajaxapparenttempmax : maximum apparent temp for the day
---------------- pressure -----------------------------------
ajaxbaro : current pressure
ajaxbarotrend : current pressure trend (+/-)
ajaxbaroarrow : <img> of rising/falling for barotrend
ajaxbarotrendtext : text (Falling rapidly, Falling Slowly, Steady, Rising Slowly, Rising Rapidly)
ajaxbaromin : minimum pressure for the day
ajaxbaromax : maximum pressure for the day
---------------- wind -----------------------------------
ajaxwind : current wind speed (or 'Calm' if wind < 0.1 )
ajaxwinddir : current wind direction (or blank if wind < 0.1 and gust < 0.1)
ajaxwindicon : <img> for wind direction (or "" if wind < 0.1 and gust < 0.1 )
ajaxbeaufort : Beaufort Scale text for current wind ('Calm' .. 'Hurricane')
ajaxgust : current gust speed (or 'None' if gust < 0.1)
ajaxmaxgust : max gust speed for the day
ajaxwindmaxavg : maximum average wind speed for the day
---------------- Solar/UV -----------------------------------
ajaxsolar : solar w/m2 (for Davis VP+)
ajaxsolarpct : solar percent of max solar for time/lat/long.(for Davis VP+)
ajaxuv : uv index (for Davis VP+)
ajaxuvword : "none" or formatted string about current uv index intensity
---------------- Rain -----------------------------------
ajaxrain : rain today
ajaxrainydy : rain yesterday
ajaxrainmo : rain for this month
ajaxrainyr : rain for this year
ajaxrainratehr : current rain rate /hour
---------------- Date/Time -----------------------------------
ajaxdatetime : formatted mm/dd/yyyy hh:mm:ss[am|pm]
ajaxdate : formatted as mm/dd/yyyy
ajaxtime : formatted as hh:mm:ss[am|pm]
---------------- Miscellaneous -----------------------------------
ajaxindicator : will flash text enclosed in <span class="ajax" id="ajaxindicator"></span> with flashcolor
every time the ajaxLoader script is run (even if no conditions have changed).
Used as a 'I'm getting the data' indicator.
ajaxconditionicon : <img> of WD current condition icon from imagedir
ajaxcurrentcond : text description .. %weathercond% %Currentsolardescription% with \s replaced by comma
ajaxcloudheight : current estimate of cloud height based on temp / humidity / pressure
All of the above are optional for use, so leave out ajaxsolar, ajaxsolarpct, ajaxuv if you don't have those sensors installed.
And… one variable change in the code switches from english(USA) units to metric units
I’ve just discovered a bit of interference with the AJAX gizmo code and my buoy-data.php script … unfortunately I’d used the same class=“contentN” markers to do the conditions rotations, so don’t install the conditions gizmo on a page that has the buoy-data.php script.
I’ll be changing the ajaxgizmo.js and wxlocal2…wxlocal9 to fix that shortly.
I’ve updated the distribution with the change to class=“contentN” → class=“ajaxcontentN” for the gizmo, and updated ajaxgizmo.js also. New zip file (with same name) is uploaded too.
Here’s what I did to replace my AJAX on my own home page:
deleted the inline version of the script, and added a to the page.
I removed the onload=“ajaxLoader…” from the tag.
I changed ajaxWDwx.js settings to not include units in the results (my page was already marked with units)
var showUnits = false; // set to false if no units are to be displayed
slightly modified my date/time info to use the ajaxdate and ajaxtime instead of ajaxdatetime for display
And… it all works with my PHP (so it should work with the folks who AJAXed using the ajax-v1-04.zip php template).
Thanks so much Ken that worked. I get so confused with the path names etc. Especially I do some probable unorthodox methods of uploading and as you know my server is confusing enough!
I’m baaaack! Can’t seem to get the arrows to work. Would it have something to do with ./images. I tried a couple of different ways. It would seem to me that if clientraw.txt is in ‘clientraw.txt’ Thar’s where the images should be? I even uploaded the images to the same place (I think).
Jack:
The package default directory for the images is ‘./ajax-images’ … if you want the images to be in the same directory as the ajaxWDwx.js script (and your wxN.html files), then change ajaxWDwx.js from:
var imagedir = './ajax-images'; // place for wind arrows, rising/falling arrows, etc.
to:
var imagedir = '.'; // place for wind arrows, rising/falling arrows, etc.
.
If you want them in the ./images directory (where you’ve uploaded the contents of ./ajax-images from the zip file), then set it to:
var imagedir = './images'; // place for wind arrows, rising/falling arrows, etc.
I’d assumed that folks didn’t want to have all the image files in the same directory as their main webpages, and I didn’t want to clobber anything that might be in their ./images directory, so I picked a new (unique) directory name for the image files.
Jack, you still need to change your ajaxWDwx.js script in the line:
var imagedir = './ajax-images'; // place for wind arrows, rising/falling arrows, etc.
to:
var imagedir = './images'; // place for wind arrows, rising/falling arrows, etc.
.
Then you’ll get the rising/falling gifs. If you want the wind arrows and conditions icons, you’ll have to upload the contents of the ./ajax-images directory in the .zip file to your ./images directory.