targeting webatgs for refresh

[steve]

This is similar to how the new Cumulus UI works, except that it processes all of the items in the data object and looks for a matching element on the page with the same ID:

Code: Select all

        // Get the keys from the object and set
        // the element with the same id to the value
        Object.keys(data).forEach(function(key) {
            var id = '#' + key;
            if ($(id).length)
            {
                $(id).text(data[key]);
            }
        });

[mcrossley]

That's another way of doing it! One thing though, with mine it checks each span both for the element id and class name, so you can have a generic template that also sets the units (mm, mph etc) using a class name as you should not use duplicate ids.

[duke]

Mark, I finally got around to taking a look at this and copying / burrowing the piece of code from you site to experiment with. Hope that's ok.

So this is my first dabble with js so a bit of guidance would be gratefully appreciated.

I've copied the piece of code I believe I need including for now the colour change..

Code: Select all

	function doUpdate() {
		var last, id, val, numLast, numVal;

		//get all the spans on the page
		$('span').each(function () {
			id = this.id ? this.id : this.className;
			val = cumulus[id];		//get the cumulus value
			if (val !== undefined) {			//do we have a cumulus value for this field?
				last = lastVals[id];				//do we have a lastVal?
				this.innerHTML = val;			//set the field text
				if (last === val) {					//not updated
					this.style.color = '';			//clear any red flag
				} else {
					if (update && !(id === 'time' || id === 'LastDataReadT')) {		//not initial page load, or the time field
						this.style.color = 'darkGreen';		//flag general change
						if (id !== 'avgbearing') {          //not the bearing figure - it wraps 0-360 - too complex!
							numLast = parseFloat(last);
							numVal = parseFloat(val);
							if (numVal > numLast) {
								this.style.color = 'red';	//flag red
								this.innerHTML = '\u2191' + this.innerHTML;	//add up arrow
							} else if (numVal < numLast) {
								this.style.color = 'blue';	//flag blue
								this.innerHTML = '\u2193' + this.innerHTML;	//add down arrow
							}
						}
					}
					lastVals[id] = val;		//store new val as last
				}
			}
		});
	}

In my footer I have added:

Code: Select all

<!-- Tag refresh script -->
<script src="<?php echo $SITE['JSdir']; ?>index_page.js"></script>

And I have added the required span:

Code: Select all

<td><span id="temp"><?php echo $WX['temp']; ?></span></td>

As you gathered by my post I have obviously assumed something incorrectly as it fails to work. I think I may be missing two things, the timer for the refresh period and also in your post you say you have given each element an id and class name but viewing the source I only see an id.

[mcrossley]

Mark, I finally got around to taking a look at this and copying / burrowing the piece of code from you site to experiment with. Hope that's ok.

Not a problem.

...and also in your post you say you have given each element an id and class name but viewing the source I only see an id.

[/quote]
Yes, I have removed it from my page as I do not have the option for changing the displayed units, so they are now hard coded. What I had previously was where fields were duplicated, e.g. #tempunit, I would use a span such as (not sure what the WX stores the temperature UoM in so made this up!)...

Code: Select all

<td><span id="temp"><?php echo $WX['temp']; ?></span> &deg;<span class="tempunit"><?php echo $WX['tempunit']; ?></span></td>

It is only worth doing that if the UoM are subject to change, or you have other values you wish to appear in more than one place on the page.

[duke]

So am I missing anything from the code above that is preventing my success?

PM sent with link to test page.

[mcrossley]

You don't appear to have any Ajax setup on that page?

The code above is the function to process the data, but you are missing all the Ajax stuff to go fetch the data in the first place?

So the...
$(document).ready(...
function getData()...
function checkDataError(...
function checkDataResp()...

[duke]

So I tampered with your script and removed all the items above that you listed as required, lesson learned. However, disappointingly success still alludes me and I fail to understand why.

I have, as posted above the 'span id' correct and I have replaced the index_page.js complete. I have double checked the source of your page and see nothing else relating to this other than the link to the script itself......

[mcrossley]

The ajax fetch isn't working, you are getting a 404 - Page not found error on..
http://www.nightingaleweather.co.uk/cle ... geData.php

[duke]

Now that was my fault, sorry, I forgot to upload it to the live site but I did have a burrowed copy on my local server. Now uploaded and still no play.

I've got a little confused here, I thought initially that your script was simply going to 'refresh' all the 'WX tags' that had a 'span id' associated with them so that WX'somevalue' was simply refreshed and showed the latest value for WX'somevalue'.

So now I'm totally at a loss to how this works. Your getIndexPageData.php when viewed in a browser shows a short list of values with descriptions which is what I expected and I assumed these were accomplished by processing & uploading a tags template but to confuse me even more, when I getIndexPageData.php?source=view shows a cumuluswebtags.txt.

Would I be correct in saying that getIndexPageData.php takes the value from the tags file and creates the list of values/description?

Think I'm a little out of my depth here....

[duke]

OK, a fresh day.

After a particularly late night (head / wall) and some searching, I now have 'getIndexPageData.php' modified to work from 'WX' tags and is producing the desired array. But something is still not quite as it should be. I must be a whisker away now!?

[mcrossley]

Hi Duke,

I'm afraid not, by using my home page code as base there are so many dependencies of things that are not present on your page it still requires significant cleaning up

So the script as you have it with the bits that need removing that I can see at a first pass (sorry about the text, but you cannot annotate text in a forum code block)...

//
// Script to update the 'now' conditions web page
//
// M Crossley 26 Nov 2013, 31 Aug 2014, 02 Sep 2014
//

// JSHint options:
/*global Highcharts*/
/*jshint jquery:true, plusplus:false*/


//
// Main name space, isolate us from the global namespace
//
var weather;
weather = (function () {
'use strict';

var lastVals = {}; //stores all the last values to see if they have changed.
var cumulus = {}; //stores all the data from cumulus
var update = false; //initial load or update?
var pageUpdate = 10; //page update interval in seconds
var pageCountdown = pageUpdate; //page update countdown timer
var imgRefresh = 600; //how often to refresh the Sun/Moon graphics: 10 mins = 600 secs
var imgCountdown = Date.now() + imgRefresh * 1000; //image update countdown timer
var httpError = 0;
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var chart;
var options;
var numDisplayRecs = 720; //720 = 12 hours at 1 minute per record
var wasSunny = false; //was it Sunny the last time we got data?
var sunPlotBandIdx = 0; //index to latest sun plotband
var wasNight = false; //was it night the last rime we got data?
var nightPlotBandIdx = 0; //index to latest night plotband
var jqXHR = {};

function setStatus(str) {
$('#status').html(str);
}

function countDown() {
var strCnt;
pageCountdown--;

if (pageCountdown <= 0) {
getData();
pageCountdown = pageUpdate;
} else {
setTimeout(countDown, 970); // knock a bit off 1 second to allow for script processing time
strCnt = ('0' + pageCountdown).slice(-2);
if (httpError === 0) {
setStatus('Next update ' + strCnt + ' secs');
} else {
setStatus('HTTP request failed, error:' + httpError + ' Retry:' + strCnt + 's');
}
}
if (imgCountdown <= Date.now()) {
$('#img_sun').attr('src', 'http://weather.wilmslowastro.com/images ... shine=true&_=' + Date.now());
$('#img_moon').attr('src', 'http://weather.wilmslowastro.com/utils/ ... hp?size=75&_=' + Date.now());
//$('#sager_forecast').text($.ajax({
// type: 'GET',
// url: 'utils/sager.php?print',
// cache: false,
// async: false
// }).responseText);

// Update the WU Current Conds data
$.ajax({
url: 'utils/getWuCurrentConds.php',
datatype: 'json',
cache: false,
timeout: 10 * 1000,
success: function (data) {
$('#wuCurrCond').text(data.current_observation.weather);
$('#wuCurrCondImg').attr('src', data.current_observation.icon_url);
$('#wuCurrCondImg').attr('alt', data.current_observation.weather);
}
});

// Update the WU Forecast data
$.ajax({
url: 'utils/getWuForecast.php',
datatype: 'json',
cache: false,
timeout: 10 * 1000,
success: function (data) {
var i, nr, day;
for (i=0; i < data.forecast.simpleforecast.forecastday.length; i++) {
day = data.forecast.simpleforecast.forecastday;
nr = '<tr id="wuFC' + i + '"><td>' + day.date.weekday_short + '</td>';
nr += '<td>' + day.low.celsius + '&deg;C</td><td>' + day.high.celsius + '&deg;C</td>';
nr += '<td class="only-wide">' + day.conditions + '</td>';
nr += '<td><img src="' + day.icon_url + '" class="icon" alt="icon" title="' + day.conditions + '"/></td></tr>';
$('tr#wuFC'+i).replaceWith(nr);
}
}
});

imgCountdown = Date.now() + imgRefresh * 1000;
}
}

function doUpdate() {
var last, id, val, numLast, numVal;

//get all the spans on the page
$('span').each(function () {
id = this.id ? this.id : this.className;
val = cumulus[id]; //get the cumulus value
if (val !== undefined) { //do we have a cumulus value for this field?
last = lastVals[id]; //do we have a lastVal?
this.innerHTML = val; //set the field text
if (last === val) { //not updated
this.style.color = ''; //clear any red flag
} else {
if (update && !(id === 'time' || id === 'LastDataReadT')) { //not initial page load, or the time field
this.style.color = 'darkGreen'; //flag general change
if (id !== 'avgbearing') { //not the bearing figure - it wraps 0-360 - too complex!
numLast = parseFloat(last);
numVal = parseFloat(val);
if (numVal > numLast) {
this.style.color = 'red'; //flag red
this.innerHTML = '\u2191' + this.innerHTML; //add up arrow
} else if (numVal < numLast) {
this.style.color = 'blue'; //flag blue
this.innerHTML = '\u2193' + this.innerHTML; //add down arrow
}
}
}
lastVals[id] = val; //store new val as last
}
}
});
}

function checkDataResp() {
var str = cumulus.LastRainTipISO.split(' '),
dt = str[0].split('-'),
tm = str[1].split(':'),
today = new Date(),
then = new Date(),
thenPlus1 = new Date(),
shift, tim,
status = $('#led');

today.setHours(0, 0, 0, 0);
then.setFullYear(dt[0], dt[1] - 1, dt[2]);
then.setHours(tm[0], tm[1], 0, 0);
thenPlus1.setTime(then.getTime() + 86400000);
if (then.getTime() >= today.getTime()) {
cumulus.LastRainTipISO = 'Today ';
// do not at 'at ' if we are in narrow mode (tablets)
cumulus.LastRainTipISO += skel.vars.stateId.indexOf('narrow') >= 0 ? '' : 'at ';
} else if (thenPlus1.getTime() >= today.getTime()) {
cumulus.LastRainTipISO = 'Yesterday ';
// do not at 'at ' if we are in narrow mode (tablets)
cumulus.LastRainTipISO += skel.vars.stateId.indexOf('narrow') >= 0? '' : 'at ';
} else {
cumulus.LastRainTipISO = '' + then.getDate() + ' ' + months[then.getMonth()] + ' ';
}
cumulus.LastRainTipISO += str[1];
/*
if (+cumulus.DataStopped === 1) {
status.attr({
src: 'images/red-on-16.png',
alt: 'Remote sensor contact lost',
title: 'Remote sensor contact lost'
});
} else {
if (status.attr('src') !== 'images/green-on-16.png') {
status.attr({
src: 'images/green-on-16.png',
alt: 'Remote sensor OK',
title: 'Remote sensor OK'
});
}
}
*/
cumulus.DataStopped = +cumulus.DataStopped === 0 ? 'ok' : 'stopped';

cumulus.battery = cumulus.battery.toUpperCase();
cumulus.press = (+cumulus.press).toFixed(1);
cumulus.pressTL = (+cumulus.pressTL).toFixed(1);
cumulus.pressTH = (+cumulus.pressTH).toFixed(1);
cumulus.presstrendval = (+cumulus.presstrendval).toFixed(1);
cumulus.batteries = 'Console-' + (parseFloat(cumulus.battery) > 3.75 ? 'ok' : 'LOW') + ', ' +
'ISS-' + cumulus.txbattery2 + ', ' +
'Wind-' + cumulus.txbattery1;
if (cumulus.txbattery1 !== 'ok' || cumulus.txbattery2 !== 'ok') {
if (status.attr('src') === 'images/green-on-16.png') {
status.attr({
src: 'images/red-on-16.png',
alt: 'Remote transmitter battery low',
title: 'Remote transmitter battery low'
});
} else {
status.attr({
src: 'images/red-on-16.png',
alt: status.attr('alt') + ', battery low',
title: status.attr('alt') + ', battery low'
});
}
}
if (+cumulus.rfall >= 0.2) {
cumulus.ConsecutiveRainDays = (+cumulus.ConsecutiveRainDays + 1).toString();
if (skel.vars.stateId.indexOf('narrow') >= 0) {
$('#dryDaysTitle').text('Prev');
$('#wetDaysTitle').text('Run of');
} else {
$('#dryDaysTitle').text('Previous');
$('#wetDaysTitle').text('Consecutive');
}
} else {
if (skel.vars.stateId.indexOf('narrow') >= 0) {
$('#dryDaysTitle').text('Run of');
$('#wetDaysTitle').text('Prev');
} else {
$('#dryDaysTitle').text('Consecutive');
$('#wetDaysTitle').text('Previous');
}
}
if (cumulus.rrate > 50.0) {
cumulus.rrateText = '(extreme rain!)';
} else if (cumulus.rrate >= 16.0) {
cumulus.rrateText = '(very heavy rain)';
} else if (cumulus.rrate >= 4.0) {
cumulus.rrateText = '(heavy rain)';
} else if (cumulus.rrate >= 1.0) {
cumulus.rrateText = '(moderate rain)';
} else if (cumulus.rrate >= 0.25) {
cumulus.rrateText = '(light rain)';
} else if (cumulus.rrate > 0.0) {
cumulus.rrateText = '(very light rain)';
} else {
cumulus.rrateText = '';
}

cumulus.Sunny = (cumulus.IsSunUp === '1' ? (cumulus.IsSunny === '1' ? 'Yes' : 'No') : 'Sun set');

cumulus.ET = (+cumulus.ET < 0 ? '0.00' : cumulus.ET);

/*
if (!update) {
// only update the day/night chart on inital load
dayPct = Math.round((+cumulus.daylength.split(':')[0] + cumulus.daylength.split(':')[1] / 60) / 24 * 1000) / 10;
duskPct = Math.round((+cumulus.daylightlength.split(':')[0] + cumulus.daylightlength.split(':')[1] / 60) / 24 * 1000) / 10;
duskPct -= dayPct;
nightPct = 100 - dayPct - duskPct;
duskPct = Math.round(duskPct / 2 * 10) / 10;
cumulus.daylightChart = '<img src='http://chart.apis.google.com/chart?' +
'chs=75x75' +
'&chtt=day/night' +
'&chts=000000,12' +
'&chma=0,0,0,0' +
'&chd=t:' + duskPct + ',' + dayPct + ',' + duskPct + ',' + nightPct +
'&cht=p3' +
'&chp=' + (Math.PI - (dayPct + duskPct * 2) / 100 * Math.PI) +
'&chf=bg,s,FFFFFF00' +
'&chco=FF6600,FFD700,FF6600,303060 ' +
'alt="day/night ratio"/>';
}
*/
//update the page
doUpdate();
//start the count for next update
countDown();

if (update) {
// add latest update to the graph
//tim = cumulus.timeUTC;
tim = Date.UTC(cumulus.timearray[0],+cumulus.timearray[1]-1,cumulus.timearray[2],cumulus.timearray[3],cumulus.timearray[4],0);
// do we need to remove an old records whilst adding the new to stop the graph growing?
//shift = chart.series[0].data.length < numDisplayRecs ? false : true;
//shift = true;
shift = (tim - chart.series[0].data[0].x) / 60000 > numDisplayRecs;

chart.series[0].addPoint([tim, +cumulus.rfall], false, shift);
chart.series[1].addPoint([tim, +cumulus.press], false, shift);
chart.series[2].addPoint([tim, +cumulus.wspeed], false, shift);
chart.series[3].addPoint([tim, +cumulus.temp], false, shift);
chart.series[4].addPoint([tim, +cumulus.dew], false, shift);
chart.series[5].addPoint([tim, +cumulus.wgust], false, shift);
chart.series[6].addPoint([tim, +cumulus.hum], false, shift);
//chart.series[7].addPoint([tim, +cumulus.IsSunny], false, shift);

// add IsSunny to the xAxis plot bands
if (wasSunny) {
// it was sunny when we last got data, so update the last plotband
//chart.xAxis[0].plotBands[chart.xAxis[0].plotBands.length - 1].to = tim; // HC >=3.0.9
chart.xAxis[0].plotLinesAndBands[sunPlotBandIdx].options.to = tim; // HC <=3.0.7
if (+cumulus.IsSunny === 0) {
// but the sun has gone now
wasSunny = false;
}
} else if (!wasSunny && +cumulus.IsSunny === 1) {
// it wasn't sunny when we last got data, but it has come out now.
// so start a new plotband
chart.xAxis[0].addPlotBand({
from: tim,
to: tim,
color: 'rgba(255,194,0,0.3)',
zIndex: 0
});
wasSunny = true;
sunPlotBandIdx = chart.xAxis[0].plotLinesAndBands.length - 1;
}

// add night-time to the xAxis plot bands
if (wasNight) {
// it was night when we last got data, so update the last plotBand
chart.xAxis[0].plotLinesAndBands[nightPlotBandIdx].options.to = tim;
if (+cumulus.IsSunUp === 1) {
// but sun is now up
wasNight = false;
}
} else if (!wasNight && +cumulus.IsSunUp === 0) {
// it wasn't night when we last got data, but it is now
// so start a new plot band
chart.xAxis[0].addPlotBand({
from: tim,
to: tim,
color: 'rgba(0,0,60,0.85)',
zIndex: 1
});
wasNight = true;
nightPlotBandIdx = chart.xAxis[0].plotLinesAndBands.length - 1;
}

chart.redraw();
} else {
update = true;
}

//time a page update to clear any fields flagged as updated - after 10 seconds
window.setTimeout(doUpdate, 10 * 1000);
}

function getData() {
setStatus('Downloading...');
if ($.active > 0) {
// kill any outstanding requests
jqXHR.abort();
}
/*
jqXHR = $.ajax({
//url: 'cumuluswebtags.json',
url: 'utils/getIndexPageData.php',
datatype: 'json',
cache: false,
timeout: 10 * 1000
}).done(function (data) {
cumulus = data;
checkDataResp();
}).fail(function (xhr, status, error) {
checkDataError(xhr);
});
*/
jqXHR = $.ajax({
//url: 'cumuluswebtags.json',
url: 'utils/getIndexPageData.php',
datatype: 'json',
cache: false,
timeout: 10 * 1000,
success: function (data) {
cumulus = data;
checkDataResp();
},
error: checkDataError
});
}

function checkDataError(xhr, status, error) {
if (status !== 'abort') {
pageCountdown = 6;
// setStatus('HTTP request failed, error: ' + xhr.status);
setStatus('HTTP request failed, error: ' + xhr.status + ' Retrying..');
// if ($.active === 0) {
setTimeout(getData, 5000); }
// }
}

$(document).ready(function () {

getData();

// get rid of the comma thousands separator
Highcharts.setOptions({ lang: { thousandsSep: '' } });

// define the options
options = {
chart: {
renderTo: 'container',
backgroundColor: '#F5F5F5'
},

credits: {
enabled: false
},

title: {
text: 'Rolling 12 hours',
y: 10,
margin: 20
},

subtitle: {
text: 'Click legend to enable/disable, background yellow: sun, blue: night',
y: 27
},

xAxis: {
type: 'datetime',
maxPadding: 0.005,
minPadding: 0.005,
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e %b'
}
},

yAxis: [{
// left y axis 0
title: {
text: 'pressure (hPa)',
style: { color: '#058DC7' },
margin: 5
},
minRange: 5,
showEmpty: false,
labels: {
formatter: function () {
return this.value.toFixed(0);
},
style: { color: '#058DC7' }
}
}, { // left y axis 1
title: {
text: 'rainfall (mm)',
style: { color: '#83D3FF' },
margin: 5
},
min: 0,
minRange: 5,
showEmpty: false,
labels: {
style: { color: '#83D3FF' }
}
}, { // right y axis 2
title: {
text: 'wind (mph)',
style: { color: '#50B432' },
margin: 5
},
opposite: true,
min: 0,
minRange: 3,
showEmpty: false,
labels: {
style: { color: '#50B432' }
}
}, { // right y axis 3
title: {
text: 'temperature (°C)',
style: { color: '#F00' },
margin: 5
},
opposite: true,
minRange: 2,
showEmpty: false,
plotLines: [{
// visualize zero
value: 0,
color: '#0000B4',
width: 1,
zIndex: 2
}],
labels: {
formatter: function () {
if (this.value <= 0) {
return '<span style="fill: blue;">' + this.value + '</span>';
} else {
return '<span style="fill: red;">' + this.value + '</span>';
}
}
//style: { color: '#F00' }
}
}, { // right y axis 4
title: {
text: 'relative humidity (%)',
style: { color: 'rgba(0,0,0,0.4)' },
margin: 5
},
opposite: true,
max : 100,
minRange: 20,
labels : {
//align : 'right',
//x : 5,
formatter : function () {
return this.value.toFixed(0);
},
style: { color: 'rgba(0,0,0,0.4)' }
},
showEmpty: false
}, { // left y axis 5 - Sunshine - Hidden
type: 'category',
categories: [0, 1],
linewidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
title: { enabled: false },
labels: { enabled: false },
minorTickLength: 0,
tickLength: 0,
min: 0,
max: 1,
showEmpty: false
}],

legend: {
verticalAlign: 'top',
y: 28,
borderWidth: 0
},

plotOptions: {
series: {
cursor: 'pointer',
marker: { enabled: false }
}
},

tooltip: {
xDateFormat: '%d/%m/%Y %H:%M'
},

series: [{
name: 'Rainfall',
type: 'area',
data: [],
yAxis: 1,
tooltip: { valueSuffix: ' mm' },
color: 'rgba(100,200,255,0.8)',
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, 'rgba(10,80,255,0.3)'],
[0.33, 'rgba(10,150,50,0.08)'],
[1, 'rgba(10,150,50,0.08)']
]
}
}, {
name: 'Pressure',
type: 'line',
data: [],
yAxis: 0,
tooltip: {
valueSuffix: ' hPa',
valueDecimals: 1
},
visible: true
}, {
name: 'Avg wind',
type: 'line',
step: true,
data: [],
yAxis: 2,
tooltip: { valueSuffix: ' mph' },
visible: false
}, {
name: 'Temperature',
type: 'line',
data: [],
yAxis: 3,
tooltip: { valueSuffix: ' °C' }
}, {
name: 'Dew Point',
type: 'line',
data: [],
yAxis: 3,
tooltip: { valueSuffix: ' °C' },
visible: false
}, {
name: 'Gust',
type: 'line',
step: true,
data: [],
yAxis: 2,
tooltip: { valueSuffix: ' mph' },
color: '#85BE0A'
}, {
name: 'Humidity',
type: 'line',
data: [],
yAxis: 4,
tooltip: { valueSuffix: '%' },
color: 'rgba(0,0,0,0.4)',
visible: false
}]
}; // end options{}

// draw the chart
chart = new Highcharts.Chart(options);

$.ajax({
url: 'utils/realtimeLogSql.php?recordAge=12&recordUnit=hour&rfall&press&wspeed&temp&dew&wgust&hum&IsSunny&IsSunUp',
datatype: 'json',
cache: false
success: function (resp) {

// hide some plots on initial load
// chart.series[1].visible = false;
// chart.series[2].visible = false;
// chart.series[4].visible = false;
// chart.series[6].visible = false;

chart.series[0].setData(resp.rfall);
chart.series[1].setData(resp.press);
chart.series[2].setData(resp.wspeed);
chart.series[3].setData(resp.temp);
chart.series[4].setData(resp.dew);
chart.series[5].setData(resp.wgust);
chart.series[6].setData(resp.hum);

//walk the sunshine data and create a set of plot bands
var sunOut = 0;
var plotBand = {};
for (var i=0; i<resp.IsSunny.length; i++) {
if (resp.IsSunny[1] === 1 && sunOut === 0) {
plotBand = {
color: 'rgba(255,194,0,0.3)',
from: resp.IsSunny[0],
zIndex: 0
};
sunOut = 1;
} else if (resp.IsSunny[1] === 0 && sunOut === 1) {
plotBand.to = resp.IsSunny[0];
chart.xAxis[0].addPlotBand(plotBand);
sunOut = 0;
sunPlotBandIdx++;
}
}
// trap if sun is out now
if (sunOut === 1) {
plotBand.to = resp.IsSunny[resp.IsSunny.length - 1][0];
chart.xAxis[0].addPlotBand(plotBand);
wasSunny = true;
}

//walk the IsSunUp data and create a set of plot bands
var sunUp = 1;
plotBand = {};
nightPlotBandIdx = sunPlotBandIdx;
for (i=0; i<resp.IsSunUp.length; i++) {
if (resp.IsSunUp[1] === 0 && sunUp === 1) {
plotBand = {
//color: 'rgba(104,57,155,0.2)',
color: 'rgba(0,0,60,0.85)',
// color: {
// linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
// stops: [
// [0, 'rgba(255,0,0,0.2)'],
// [0.25, 'rgba(104,57,155,0.2)'],
// [0.75, 'rgba(104,57,155,0.2)'],
// [1, 'rgba(255,0,0,0.2)']
// ]
// },
from: resp.IsSunUp[0],
zIndex: 1
};
sunUp = 0;
} else if (resp.IsSunUp[1] === 1 && sunUp === 0) {
plotBand.to = resp.IsSunUp[0];
chart.xAxis[0].addPlotBand(plotBand);
sunUp = 1;
nightPlotBandIdx++;
}
}
// trap if sun is down now
if (sunUp === 0) {
plotBand.to = resp.IsSunUp[resp.IsSunUp.length - 1][0];
chart.xAxis[0].addPlotBand(plotBand);
wasNight = true;
}
}
}); // end ajax()
}); // end document ready()

$(function () {
$.ajaxSetup({
error: function (jqXHR) {
checkDataError(jqXHR.status);
}
});
});

}());

[duke]

Mark, I'm grateful for your effort and assistance, thank you, but alas it will not play ball. I'll revisit this when I have a better understanding of js.

After re-reading this thread last night I realized I totally missed BCJKiwi's post (sorry) referring to the Saratoga script 'ajaxCUwx.js'. After reading through the script I successfully implemented this quite quickly.

Whilst implementing the script it occured to me that it 'should' be straight forward to make this work with webtags instead of fetching values from the 'realtime.txt'.

So looking at 'UV' for example:

Code: Select all

		// UV Index
		var uv       = realtime[43];
		set_ajax_obs("ajaxuv",uv) ;
		set_ajax_obs("gizmouv",uv) ;

To adapt this to a 'tag' value I beleive should be this:

Code: Select all

		// ajax test with tags
		var test       = "<?php echo $WX['temp']; ?>";
		set_ajax_obs("ajaxtest",test) ;

// html
<span class="ajax" id="ajaxtest"></span>

But another successful failure on my behalf .

After searching the net, some examples show php in js with quotes whether or not it is an array and in this case obviously it is not, but fails either way. I have not specifically included my tags file in the script as the realtime file is not. These are included by the inclusion of the 'settings' template earlier in the page. Should I perhaps? How do I 'include a file using js?

[SpaceWalker]

You just cannot add webtags to 'ajaxCUwx.js' - the script has been designed to read the near-real-time data file (such as Cumulus' 'realtime.txt' or Weather Display's 'clientraw.txt') - look at line #58 of 'ajaxCUwx.js' (version 3.04 - 19-Aug-2013):

Code: Select all

var realtimeFile = '/realtime.txt'; //  URL location of realtime.txt relative to document root of website

Why would you want to use the value of a webtag instead of the value of the data provided by a near-real-time data file - normally, the webtag data file is only updated every few minutes whereas the near-real-time data file is updated every few seconds...

[duke]

Yes Ray, I perfectly understand that in it's 'standard' form it reads the realtime.txt. But, the script for refreshing the variables I assume would be the same no matter the source. So if instead of being asked to fetch a value from the realtime file (var uv = realtime[43] it was asked to fetch a tag value (var uv = "<?php echo $WX['uv']; ?>";) it would refresh that as well. It does not care what the variable or the source of the variable is as long as their is one. Correct?

And yes I realise that in it's standard form it loads realtime.txt but I see no reason why it could not be adapted to load a tags file with the required variables in too.

It's the refresh routines I was interested in using in this script not the specific data source. Like several others here I do not use a realtime.txt but instead a tags file for my realtime data. I was simply after a simple / robust method of refreshing them without refreshing the whole page.