Alternative ajaxWDwx.js Script v 9.14

ajaxWDwx.js - RELEASE V9.14

This alternative ajaxWDwx.js script has been heavily modified and has many new ajax tags.
Setup has been simplified and many new features have been added (see history below).

Weather website templates similar to the above available at: [color=blue][/color]

Go to: [color=blue]Bronberg Weather Station[/color]

o UOM switching button for METRIC and ENGLISH (imperial).
o RESTART button to resume updates without having to reload the page.
o External SETTINGS script file which should simplify upgrading to newer versions.
o Webcam image update and management.
o Swapping of current conditions icon with your webcam during day/night and vice-versa.
o Easier management of icon sets (current / wind / FWI / UV etc.).
o Dynamic [color=blue]cloud height graphic[/color] implementation.
o Simplified Unit-of-Measure management.
o Tag for acurate moon phase picture (black & white background).
o Alert if “clientraw.txt” can not be found.
o Loading of “clientrawextra.txt” for history like rain.
o Packed version of “ajaxWDwx.js” i.e “ajaxWDwx-packed.js” for smaller file size.
For the packed version you’ll need to use “ajaxWDwx-settings.js” for your configuration.
o … and many additional “ajaxtags”.

For all the available “ajaxtags” see the next post on this page.

If you want to implement the separate external settings file “ajaxWDwx-settings.js”
then you need to add the following line to your “top.php” file:
[color=brown]<script type="text/javascript" src="ajaxWDwx-settings.js"></script>[/color]
right below this line in “top.php”:
[color=brown]<script type="text/javascript" src="ajaxWDwx.js"></script>[/color]

For completely striped down version of the external settings file have a look at mine here:

If you have implemented the external settings script above then you
can use the packed version of this script i.e. “ajaxWDwx-packed.js”.
Upload this file to your server and then replace the following line in your “top.php” file:
[color=brown]<script type="text/javascript" src="ajaxWDwx.js"></script>[/color]
with this one:
[color=brown]<script type="text/javascript" src="ajaxWDwx-packed.js"></script>[/color]

For implementation see: [color=blue][/color]

Add the following code somewhere into your “ajax-dashboard.php”:

 <div onClick="javascript:ajax_changeUnits();" style="cursor: pointer"><b>
      <span id="uomM" style="color: gray;">METRIC</span> |
      <span id="uomE" style="color: blue;">IMPERIAL</span></b>

Or even better is to replace the top row in the table in “ajax-dashboard.php” which will make it look like in the picture above:

<?php // get last update time from testtags.php
   $tagsInterval = 5; // testtags.php upload interval in minutes
   $updTime = mktime($time_hour,$time_minute,0,$date_month,$date_day,$date_year);
   $nextUpd = mktime($time_hour,$time_minute+$tagsInterval,0,$date_month,$date_day,$date_year);
<tr align="center">
      <div onClick="javascript:ajax_changeUnits();" style="cursor: pointer;" title="Toggle units-of-measure &amp; restart"><b>
         <span id="uomM" style="color: gray;"><?php langtrans('METRIC'); ?></span> |
         <span id="uomE" style="color: blue;"><?php langtrans('IMPERIAL'); ?></span></b>
   <td class="data1" colspan="3" style="text-align: center">
      <span class="ajax" id="ajaxindicator"><?php langtrans('Updated'); ?>:</span>
      <span class="ajax" id="ajaxdate@">
            <?php echo date("j/n/Y @ h:ia",$updTime).' - '.langtransstr('next update at').' '.date("h:ia",$nextUpd); ?>
         <script type="text/javascript"><!--
            document.write("<?php echo $date.' @ '.$time; ?>");
      <span class="ajax" id="ajaxntimess">&nbsp;</span>
      <script type="text/javascript"><!--
         document.write(' <small><i>(<span id="ajaxcounter">0</span>&nbsp;<?php langtrans('sec ago'); ?>)</i></small>');

You need to enclose your static fields in “ajax-dashboard.php”, i.e. fields that don’t have an “ajaxtag” which
you want to have converted during UOM switching, with one of the following corresponding classes: ---------------------------------------------------------- [color=brown]<span class="convTemp">[color=green]82.7&deg;F[/color]</span>[/color] ...for temp [color=brown]<span class="convWind">[color=green] 2.7 mph[/color]</span>[/color] ...for wind [color=brown]<span class="convBaro">[color=green]30.30 inHg[/color]</span>[/color] ...for baro [color=brown]<span class="convRain">[color=green] 1.04 in[/color]</span>[/color] ...for rain [color=brown]<span class="convSnow">[color=green] 12.4 in[/color]</span>[/color] ...for snow [color=brown]<span class="convAlti">[color=green] 2793 ft[/color]</span>[/color] ...for altitude [color=brown]<span class="convDist">[color=green] 15 miles[/color]</span>[/color] ...for distance [color=brown]<span class="convDate">[color=green]20-10-2009[/color]</span>[/color] ...for dates [color=brown]<span class="convTime">[color=green] 15:32:27[/color]</span>[/color] ...for times ----------------------------------------------------------
NOTE: the value in the span must include the units-of-measure for them to be converted.
If you need CSS styling on the same field then you can specify it in the same class tag like this for instance: [color=brown]<span class="convRain rainStyle">[color=green]171.4 mm[/color]</span>[/color]
You’ll also need the modified [color=blue]thermometer.php[/color] script that supports UOM switching.

Have you pressed CTRL-F5 to refresh your browser?
Your browser caches javascript and stylesheets and you might still be seeing the old versions.

Make sure all your other scripts that you have included on your page don’t have javascript errors.
If this happens the javascript engine grinds to a complete halt and then this script might not run.

Also make sure you have not made any mistakes in your “ajaxWDwx-settings.js” file which will cause javascript errors.
Check your FIREFOX “Javascript Error Console” for possible errors please before reporting any problems.
Alternatively you can implement the following code on your pages: [b][color=blue]Javascript Error Dialog Box[/color][/b]
which will inform you of onpage Javascript errors.

Additional scripts you might be interested in.
[color=blue]Cloud Base Graphic[/color]
[color=blue]Gradient Thermometer[/color]
[color=blue]Mobile / Cellphone / iPhone Safari Script[/color]

Additional graphics you might be interested in.
Make sure to unzip into your root folder with “use folder names” ticked when unzipping them.
If you do so it will leave your current graphics intact.`

All of the icons below: [color=blue][/color] (2.5mb)
------------------------------------------------------------------------------------------- ---------FOLDER----------
Current conditions icons: [color=blue][/color] (269kb) “./ajax-images/icon/…”
Moon pictures x28: [color=blue][/color] (188kb) “./ajax-images/moon/…”
Fire Weather Index: [color=blue][/color] (291kb) “./ajax-images/fire/…”
Wind Rose icons: [color=blue][/color] (822kb) “./ajax-images/wind/…”
UV icons: [color=blue][/color] ( 20kb) “./ajax-images/uv/…”
Forcast icons: [color=blue][/color] (1.1mb) “./forecast/images/1/…”
Sun/Moon bg, Moon ph x4: [color=blue][/color] ( 19kb) “./…”


Version 9.00 - 15-Apr-2009
Added… fetching of “clientrawextra.txt” for history data (e.g. rain etc.).
Added… tag “ajaxrainSun” … for last Sunday’s rain
“ajaxrainSat” … for last Saturday’s rain
Added… tag “ajaxwinddeg” … for wind in degrees e.g. 334

Example: [color=brown][color=green]77

Version 9.05 released.
It’s now possible to have an external settings file which
should make upgrading to new versions easier.

A packed version of ajaxWDwx.js i.e ajaxWDwx-packed.js is also included in the latest release.
If you use the packed version you’ll need to use ajaxWDwx-settings.js as well.

Also an ALERT has been added if the “clientraw.txt” file can not be found.

See the 1st post above for more modifications and additions.

I guess this would just require replacing the currently used True’s js with yours, and after making the required settings adjustmnts, I would just have to reallign my own customizations that I made to the old js.

All the original tags are still there so you should have no problems.

All you have to do is set your location for clientraw.txt,
your graphic paths and pick your UOM to get started.

Afterwards you can play around with it.

Congratulations Rainer!! This is a major leap forward in capability of the ajaxWDwx.js script – thank you!!

I like your suggestion on version-number ranges, so I’ll stick to the 2.xx range for mine. Would you allow me to bundle your latest version with the 5 template sets? I’d be pleased to do so :slight_smile:

Best regards,

Hi Ken,
You are more than welcome to do so.

I’ve tested this script on my end for the last 6-8 months and it works fine on my end.
However I don’t know if there’s going to be any hiccups with the script since I only
released it to the community this morning.

I guess I will have to wait until some more people take the plunge.

Forgot to say:
Please download the latest version … I’ve added some more documentation to the script.

Have it semi running, the webcam and forecast images are setup so far. All is well so far!

Hi guys,
i have ver. 3.00 of this file…could i install the new version without problem?
I’ve attached my ajaxWDwx.js file.
Many thanks,


Welcome back Ken!

ajaxWDwx.js.txt (41.1 KB)

Should not be a problem … the Webster Weather modifications have been added to this script.

Hi Rainer,
could you explain me how to use new version of ajaxWDwx.js?
I’ve installed it but it seems to change nothing in my site.
I’ve seen that the new version has a lot of customization but i don’t know how to use some/all of these.
Should i upload the ajaxWDwx-settings.js too?
Many thanks,


Yes, I suggest you use “ajaxWDwx-settings.js” for your setup and then upload it to your server.
This will ensure that you won’t have to make changes to it again for the next upgrade.
However keep in mind that you also need to make the patch to “top.php” as suggested in the main post above.
I can’'t help you other than that as only you would know where your files/graphics are.

I believe that i should change the link about my graphics images in “ajax-images”.
The new version has a different folders about icons set used.
Is it ok?
Because, at this time, I don’t have any icons in my ajax-dashboard:


You need to upload the “ajaxWDwx-settings.js” file to your server as you’ve included it in your “top.php”.
It’s not there at the moment. You need to make all the changes in this file.

HERE’S YOUR ICON SETUP: (I think it’s this)// 1: NWS icons (55x58) wxIconSet1 = {src : imgDir+"#PIC#.jpg" // where #PIC# = picname from table in useName ,width : 55 ,height: 58 ,hspace: 0 ,vspace: 0 ,border: 0 ,style : "" // eg. "border: 2px solid silver" ,align : "" // [ left | right | top | bottom | middle | texttop | absbottom | absmiddle ] ,useName: 1 // must be 1 for this icon set ... NWS icon nameing convention ... see ajax_getIconName1()) };
Do not delete the #PIC" part as that later gets replaced by a icon name depending on the current condition icon required.

and set this to:wxIconSet = wxIconSet1; // choose from an icon set above that you want to use.

You need to upload the "ajaxWDwx-settings.js" file to your server as you've included it in your "top.php". It's not there at the moment. You need to make all the changes in this file.

I’ve just done.
I’ve set like this “var wxIconSet = wxIconSet1” but i’ve all images in “ajax-images/”.
Unfortunately, there isn’t any choise for that.
Do you believe that i come back to the previously version?
Best regards,


Have you done the changes as I’ve posted above?

yes, i have.

Nope, I cant see them in either of the 2 files.
Maybe your server is caching somewhere.

Remember to make the changes to “ajaxWDws-settings.js” only as you have included it in your “top.php” file.

Allesandro and propably everybody else, here is your setup for ajaxWDwx-settings.js:

// 1: NWS icons (55x58)wxIconSet1 = {src : imgDir+"#PIC#.jpg" // where #PIC# will be replaced by picname from table in ajax_getIconName1() function ,width : 55 ,height: 58 ,hspace: 0 ,vspace: 0 ,border: 0 ,style : "" // eg. "border: 2px solid silver" ,align : "" // [ left | right | top | bottom | middle | texttop | absbottom | absmiddle ] ,useName: 1 // must be 1 for this icon set ... NWS icon nameing convention ... see ajax_getIconName1()) };

and set this to:wxIconSet = wxIconSet1; // choose from an icon set above that you want to use.

// WIND ROSE: optional settings for the Wind Rose graphicwrImg = {src : imgDir+"wr-#LANG##DIR#.gif" // where #DIR# will = wind dir (e.g. NNW), #LANG# = wrImg.lang ,lang : "" // with trailing dash (e.g. "nl-" will result in graphic name: "./ajax-images/wind/wr-nl-SSE.gif") ,calm : "calm" // substitution for #DIR# (e.g "wr-calm.gif") ... specify "" if not to be shown or not available ,width : 58,height: 58,hspace: 0 ,vspace: 0 ,border: 0 ,style : "" ,align : "" // [ left | right | top | bottom | middle | texttop | absbottom | absmiddle ] };
Don’t despair … once you’ve sorted this out you’ll never have to do it again.

Just downloaded this today, will try to implement this sometime this coming weekend.

Could you add the below:

//--- begin VPLEAF -------------------------------------------------------------
		VPleaf = clientraw[156];
//--- end VPLEAF ------- -------------------------------------------------------

If its possible, could the Wind Speed and Wind Direction be separate? During the Winter months Ice buildup freezes either or both gauges here. I’ve attached what I’m currently using here, I just comment/uncomment a few lines for when gauges are frozen. And then upload it until the gauges thaw out.

Lines I modified for Ice, Wind Speed, and Wind Direction:
97-98, 110-111, 791-813

ajaxWDwx_js.txt (42.8 KB)