Yet more gauges

[baritoneuk]

Hi everyone. This probably isn't the best place for my first post, but I thought I'd dive in. I got my first weather station at Christmas and it's taken me this long to get it installed! I've only just come across Cumulus- what an amazing piece of software!

Anyway...to come to the point. I think these extra gauges are fantastic. I've not played around with the html5 canvas element, but I've been very impressed with what it can acheive. I'm quite passionate about progressive enhancement when it comes to websites. It's good to cater for as many browsers as possible, although there always has to be a cut off point (IE5 anyone?!)

Unfortunately the canvas isn't available across all browsers, so the best thing would be to show the flash equivalent if there isn't canvas. If there isn't Flash available then just a static image. If you haven't come across the HTML5 Boilerplate, I'd highly recommend it. It puts together many best practices. In addition (and something recommended by some of the documentation in HTML5 Boilerplate) is the mini javascript library "YepNope" which will load scripts depending on the visitors need. For example, if the browser can't cope with canvas, you can get the browser to load a fall back script (or "polyfill"). In this case you could give all modern browsers the guages in all their html5 glory, but show older browsers the flash equivalent. For those without javascript or flash, you could just give them a static image.

I don't know if that's helpful. Hopefully it is.

And it looks like I'm quite close to you Mark. I'm based in Cheadle- just down the road!

[gemini06720]

I looked at the HTML5 Boilerplate site and was really not impressed with either their concept or their Web pages (their pages obviously do not offer much support for the old Firefox 3 browser) - for me it look just as another 'band aid' solution to browsers that should either be retired or be redesigned to be fully compliant with CSS3 and HTML5. Whereas the Web community is trying to move froward, it also feels obligated to 'bend backward' for browsers that have never care nor supported any standards other than those of their own designers. I think it is time to drop the 'backward compatibility' concept and go forward - if someone wants to fully enjoy everything CSS3/HTML5 has to offer then, that someone should use a browser that will support every aspects of CSS3/HTML5...

Note1: Many months ago, I joined an ever larger growing north american group refusing to support the old Microsoft browsers, any browsers older than Internet 7. As my Web pages are loaded, a PHP class check which browser is making the request and redirect older browsers to a message page asking that the browser be updated to a more modern software.

Note2: I have Firefox 5 installed but too many of the extensions I use have not been updated to that latest release - thus my use of the still reliable (although not fully CSS3/HTML5 compliant) browser...

Note3: I also have the latest releases of Google Chrome, Internet Explorer, Opera and Safari.

[mcrossley]

I'm tending to side with Ray on this one. I'm not running a commercial site so if some users running old browsers can't view some of my content, then so be it. Specifically for these gauges, I would refer them to the standard Cumulus gauges, but would not expend effort on porting to Flash etc. If I was doing for a living my position may well be different.

Anyway, Gerrit has made some great optimisations to his steelseries library over the weekend, it now uses less memory and runs much faster drawing multiple gauges on a page - who knows the full 8 gauge page may even work on the ipod now! The Carbon and Punched backgrounds now draw particularly faster now. I've just updated the demo page...

[steve]

who knows the full 8 gauge page may even work on the ipod now!

It does indeed

[gemini06720]

I'm tending to side with Ray on this one.

Mark, I was not expecting support from anyone... ...but still nice to know that I am not the only one with some 'drastic views on old things...

Anyway, Gerrit has made some great optimisations to his steelseries library over the weekend, it now uses less memory and runs much faster drawing multiple gauges on a page...

Mark, I know I could write them myself, but since you seem have direct communication links with the designer, could you please congratulate him on being so persistent with the design of those gauges - they are quite 'beautiful'...

Once I eventually and finally solve my problems with the Windows 7 installation, I might give the gauges a try...

[mcrossley]

It does indeed

Thanks Steve, I think my daughters iPod has melded to her body, and when she does put it down it is locked in case I read her Facebook!

Mark, I know I could write them myself, but since you seem have direct communication links with the designer, could you please congratulate him on being so persistent with the design of those gauges - they are quite 'beautiful'.

Will do Ray.

[captzero]

These gauges are great. I have been playing with them since your first post and they are getting better every day. Well done.

[mcrossley]

Thanks Dan.

An open question, does anyone have any good javascript code to 'objectify' XMLHttp requests, so I can have multiple async GETs outstanding and handle each response appropriately - ie know which response belongs to which request? I want to fetch realtime.txt and realtime-extras.txt at the same time rather than sequentially.

I have the following in progress which I modded from some code I found on the web, but there must be something already out there?

Code: Select all

/**
 *	Simple example that shows how to encapsulate
 *	XMLHTTPRequestCalls
 *
 *	Original author Mike Chambers (mesh@adobe.com)
 *  Modded Mark Crossley for Cumulus
 */

/**
 *	Constructor for the class.
 *
 *	@param {String} dataURL The path to the data that the class
 *	will load (OPTIONAL)
 *
 *	@constructor
 */
function DataLoader(dataURL) {
	if (dataURL != undefined) {
		this._dataURL = dataURL;
	}
}

//where to load the data from
DataLoader.prototype._dataURL = "/realtime.txt";

//var to hold an instance of the XMLHTTPRequest object
DataLoader.prototype._request = undefined;


/**************** Public APIs **********************/

/**
 *	Tells the class to load its data and process the results.
 */
DataLoader.prototype.load = function () {
	//get a new XMLHTTPRequest and store it in an instance var.
	this._request = this._getXMLHTTPRequest();
	
	//set the var so we can scope the callback
	var _this = this;
	
	//callback will be an anonymous function that calls back into our class
	//this allows the call back in which we handle the response (_onData())
	// to have the correct scope.
	this._request.onreadystatechange = function () {
		_this._onData()
	};
	this._request.open("GET", this._generateDataUrl(), true);
	this._request.send(null);
}

/***************Private Data Loading Handlers*******************/

//return the URL from which the data will be loaded
DataLoader.prototype._generateDataUrl = function () {
	return this._dataURL;
}


//callback for when the data is loaded from the server
DataLoader.prototype._onData = function () {
	if (this._request.readyState == 4) {
	    //stop the timeout function
        clearTimeout(xmlHttpTimeout);

		if (this._request.status == "200") {
		
			if (this._generateDataUrl().indexOf("extra") == -1){
				//realtime.txt
				parseRealtime(this._request.responseText);
				g_realTimeReady = true;
			}else{
				//realtime-extras.txt
				parseRealtimeExtras(this._request.responseText);
				g_realTimeExtrasReady = true;
			}
			//if the onComplete callback has been defined
			//call it to let the listener know
			//that we are done creating the list
			if (this.onComplete != undefined) {
				this.onComplete();
			}
		} else {
			//check if an error callback handler has been defined
			if (this.onError != undefined) {
				//pass an object to the callback handler with info
				//about the error
				this.onError({
						status : this_request.status,
						statusText : this._request.statusText
					});
			}
		}
		
		//clean up
		delete this._request;
	}
}

/***************Private Data Util Functions ********************/

//returns an XMLHTTPRequest instance (based on browser)
DataLoader.prototype._getXMLHTTPRequest = function () {
	var xmlHttp;
	try {
		xmlHttp = new ActiveXObject("Msxml2.XMLHttp");
	} catch (e) {
		try {
			xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
		} catch (e2) {}
	}
	
	if (xmlHttp == undefined && (typeof XMLHttpRequest != 'undefined')) {
		xmlHttp = new XMLHttpRequest();
	}
	
	return xmlHttp;
}
 
/*
	var dl = new DataLoader();
		dl.load();
*/

[gemini06720]

Mark, just curious...

Why do you not just create one file (processed in almost real time) that would contain all the data/values (webtags) needed by the gauges ... rather than trying to read two files at the same time?

[mcrossley]

Only because I wanted to keep realtime.txt 'standard', you cannot fully replicate it using the web tags.
Edit: And I'd like to know how to do it!

[daj]

An open question, does anyone have any good javascript code to 'objectify' XMLHttp requests

Have you considered using the jQuery Ajax calls?

http://api.jquery.com/jQuery.ajax

I use it to load the realtime data on one of my pages

[mcrossley]

David, briefly, but I admit I haven't taken the time to learn JQuery yet The page does include JQuery 1.3.2 anyway for the popup data, so I guess I need to roll my sleeves up

[daj]

You can mix and match JS & Jquery--JQuery is simply a library of JS code.

In my script...

http://www.grantownweather.co.uk/js/getlivedata.js

Code: Select all

var rawdata = $.ajax({url: "/data/realtime.txt",  async: false  }).responseText.split(' ');

This reads the realtime.txt and stores it in a variable (in my case and array, split using the space)

So the $.ajax function replaces nearly all of the code you show in your post

[baritoneuk]

I looked at the HTML5 Boilerplate site and was really not impressed with either their concept or their Web pages (their pages obviously do not offer much support for the old Firefox 3 browser) - for me it look just as another 'band aid' solution to browsers that should either be retired or be redesigned to be fully compliant with CSS3 and HTML5. Whereas the Web community is trying to move froward, it also feels obligated to 'bend backward' for browsers that have never care nor supported any standards other than those of their own designers. I think it is time to drop the 'backward compatibility' concept and go forward - if someone wants to fully enjoy everything CSS3/HTML5 has to offer then, that someone should use a browser that will support every aspects of CSS3/HTML5...

I have every sympathy for your point of view. I'd dearly love to be able to drop support for anything but the latest browsers. However, many of my clients still use old browsers and of course demand that their websites work in theirs. One client still uses Windows 98 and IE6. It makes me want to cry, but this is where the HTML5 Boilerplate comes in really handy. It's not meant to be used straight out of the box. It's mearly something to start from. I've tweaked it for my own purpose, but it has put into place lots of good practices.

[mcrossley]

Your example is synchronous though, so I would need to use the syntax that passes the query object to the oncomplete function.