carterlake HTML templates with AJAX package

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

See http://saratoga-weather.org/scripts-WD-AJAX.php for more info and to download the package .zip file

Best regards,
Ken

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?

Am I being greedy? #-o

Jack

Naaa… your not being greedy :smiley: 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 :slight_smile:

Ken

This is really cool, looks like another late night :lol:

many thanks to both Ken and Tom!!

You’re very welcome!

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.

Ken

Ken tried the “Plug and Play” and Ajax died, any ideas?

Followed your instructions and simply changed my script to the ajaxWDxs.js within my page. Do you want me to zip you any of the files?

Jack

Sure, please send files zipped…

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:

  1. deleted the inline version of the script, and added a to the page.

  2. I removed the onload=“ajaxLoader…” from the tag.

  3. 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
  1. 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).

Best regards,
Ken

Jack:
You need a one line change to the ajaxWDwx.js to show your clientraw isn’t in the root directory of the server, so change

var clientrawFile = '/clientraw.txt'; // location of clientraw.txt relative to this page on website

to

var clientrawFile = 'clientraw.txt'; // location of clientraw.txt relative to this page on website

and it should work fine. I noted you’d changed

var ajaxLoaderInBody = true; // set to true if you have <body onload="ajaxLoader(..."

to reflect the presence of ajaxLoader in your <body onload=… statement).

Try changing the clientrawFile to the setting above and your AJAX should work fine :slight_smile:

Best regards,
Ken

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!

Just have to do a little tweaking and adding now.

Regards,

Jack

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

Jack,

In the ajaxWDwx.js file, where are your arrows currently placed?

–Tim

Hi Tim,

Currently they are in ./images

Jack

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.

Best regards,
Ken

Jack,

Could you please post the part of the ajaxWDwx.js file that shows the location of the arrows?

Maybe try adding a “/” to the end of “images”.

–Tim

Tim… no on adding a / to the end of the

var imagedir = './ajax-images';  // place for wind arrows, rising/falling arrows, etc.

– the function that generates the code adds a ‘/’ to whatever is in the ‘var imagedir’ JavaScript variable.

That statement in the JavaScript is the one specifying where (relative to the JavaScript) the ajax-images directory is located.

I talked about that in the AJAX-WD-readme.txt installation document :smiley:

Ken

Ken,

Ah okay, didn’t know that. :wink:

Jack,

I just checked http://www.branfordfire.com/weather/images/ and see that your images are there.

–Tim

OK, so maybe it’s something in my code?

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.

Best regards,
Ken

Thank you “Master Ken” you rescued me once again! I see Ajax all over the place pretty soon with the new html addition! This code is fantastic!

Jack