ajaxWDwx.js - RELEASE V9.14
DESCRIPTION:
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]Saratoga-Weather.org[/color]
EXAMPLE:
Go to: [color=blue]Bronberg Weather Station[/color]
MAJOR ADDITIONS:
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.
HOW TO IMPLEMENT EXTERNAL SETTINGS:
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:
[color=blue]http://www.bashewa.com/ajaxWDwx-settings-bws.js[/color]
HOW TO HAVE YOUR SCRIPT LOAD FASTER:
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]
HOW TO IMPLEMENT UOM SWITCHING:
For implementation see: [color=blue]http://www.bashewa.com/ajax-dashboard.php?sce=view[/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>
</div>
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:
<!-- TOP TABLE ROW - FOR UPDATED HEADER & UOM SWITCHING -->
<?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">
<td>
<div onClick="javascript:ajax_changeUnits();" style="cursor: pointer;" title="Toggle units-of-measure & restart"><b>
<span id="uomM" style="color: gray;"><?php langtrans('METRIC'); ?></span> |
<span id="uomE" style="color: blue;"><?php langtrans('IMPERIAL'); ?></span></b>
</div>
</td>
<td class="data1" colspan="3" style="text-align: center">
<span class="ajax" id="ajaxindicator"><?php langtrans('Updated'); ?>:</span>
<span class="ajax" id="ajaxdate@">
<noscript>
<?php echo date("j/n/Y @ h:ia",$updTime).' - '.langtransstr('next update at').' '.date("h:ia",$nextUpd); ?>
</noscript>
<script type="text/javascript"><!--
document.write("<?php echo $date.' @ '.$time; ?>");
//--></script>
</span>
<span class="ajax" id="ajaxntimess"> </span>
<script type="text/javascript"><!--
document.write(' <small><i>(<span id="ajaxcounter">0</span> <?php langtrans('sec ago'); ?>)</i></small>');
//--></script>
</td>
</tr>
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°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.
I HAVE PROBLEMS - I DON’T SEE THE AJAX UPDATES:
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:
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 ICONS & GRAPHICS:
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]http://www.bashewa.com/downloads/bws-iconsets.zip[/color] (2.5mb)
------------------------------------------------------------------------------------------- ---------FOLDER----------
Current conditions icons: [color=blue]http://www.bashewa.com/downloads/bws-icons-current.zip[/color] (269kb) “./ajax-images/icon/…”
Moon pictures x28: [color=blue]http://www.bashewa.com/downloads/bws-icons-moon.zip[/color] (188kb) “./ajax-images/moon/…”
Fire Weather Index: [color=blue]http://www.bashewa.com/downloads/bws-icons-fire.zip[/color] (291kb) “./ajax-images/fire/…”
Wind Rose icons: [color=blue]http://www.bashewa.com/downloads/bws-icons-wind.zip[/color] (822kb) “./ajax-images/wind/…”
UV icons: [color=blue]http://www.bashewa.com/downloads/bws-icons-uv.zip[/color] ( 20kb) “./ajax-images/uv/…”
Forcast icons: [color=blue]http://www.bashewa.com/downloads/bws-icons-forecast.zip[/color] (1.1mb) “./forecast/images/1/…”
Sun/Moon bg, Moon ph x4: [color=blue]http://www.bashewa.com/downloads/bws-icons-moonphase.zip[/color] ( 19kb) “./…”
`
VERSION HISTORY:`
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
…thru…
“ajaxrainSat” … for last Saturday’s rain
Added… tag “ajaxwinddeg” … for wind in degrees e.g. 334