Cumulus Support

Posted: **Wed 12 May 2010 12:50 pm**

I was thinking of looking into using the new canvas features of HTML5 for gauge/graph rendering. Has anyone else looked at this, give any pointers etc?

I know IE8 doesn't support canvas natively, but excanvas seems to provide a decent translation into VML for IE support. This canvas demo page works fine on IE8 (albeit a bit slower than Chrome).

Posted: **Wed 12 May 2010 4:50 pm**

I have had a quick play and converted my gauges page animation to use a HTML5 canvas instead of the wz_jsgraphics library. Only the Windspeed gauge has been converted on this test page (the rest still use wz_jsgraphics for now), but if seems to work OK in Chrome, Firefox, and IE8.

Firefox performs the animation much faster than using wz_jsgraphics.

This is just scratching the surface of canvas capabilites though - the whole guage could be drawn from scratch rather than using background graphics.

My test page is here:
<< Link removed - no longer exists >>

Posted: **Wed 12 May 2010 6:13 pm**

At this time there nothing (rather than zero) for windspeed, nor is there a cursor-over ?

My test page is here:
http://weather.wilmslowastro.com/gauges_canvas.htm

Posted: **Wed 12 May 2010 7:00 pm**

Hmm, odd, but <canvas> will not take height and width within the style settings, they have to be explicitly set as parameters.

Try it again now...

Oh, and I haven't set a mouse-over yet either.

Posted: **Wed 12 May 2010 10:44 pm**

Yup - that (reading) is visible now

Posted: **Thu 13 May 2010 12:54 pm**

And a (static) version with the Wind Rose on a canvas
<< Link removed - no longer exists >>

I found that using the .fillRectangle() function to plot the wind points was really slow, rectangles render directly to the browser, so drawing short fat lines instead which only render to memory until you .stroke() them gives a huge performance increase.

Posted: **Thu 13 May 2010 7:50 pm**

mcrossley wrote:And a (static) version with the Wind Rose on a canvas

Mark, the results for this new page:

Code: Select all

- withr Firefox, the page displayed completely and quickly;
- with Google Chrome, the page completely displayed quickly; 
- with Internet Explorer, it took 2 clicks on the refresh button to get the gauges displayed completely
  (the page is way too large for my 1920*1200 screen and, again, the gauges are not neatly/properly
  organized - starting at the wind rose,  the wind speed and the cloud base have moved down, step style); 
- with Opera, to my surprise, it took 3 clicks to get the gauges displayed completely (and, for the first
  time, the gauges are getting disorganized - starting at the wind rose, the wind speed and the cloud base
  have moved down, step style).

And I read in may newsletters I am receiving that all the browser were ready for HTML 5...

Mark, I really appreciate that you have made the screen static for the time being...

Posted: **Thu 13 May 2010 9:55 pm**

Thanks Ray, actually I fiddled with the gauges_canvas2.htm page again today, and both the windspeed and wind rose are now animated - though there is very little wind at the mo.

The problem with the image alignment in IE is due to the excanvas.js library - it creates child VML objects of the canvas, these are absolutely positioned and mess up the layout. I'll have a look to see if I can fix this, otherwise excanvas will be difficult to use. Also the CSS does not seem to be applying correctly, I haven't looked into that yet, but why elements of the page I have not touched display with different styles from the base page is a bit of a mystery at the mo.

From what I am seeing, Chrome and Safari seem to handle HTML 5 best, followed by Firefox. Strange how you have to refresh the page to get it to work, I wonder what is happening there?

Interesting experiment though, even at the if the conclusion at the end is that it isn't a 'goer'.

Posted: **Fri 14 May 2010 3:52 pm**

Right gauges_canvas2 is now fully converted to using HTML5 and canvas, and has animated wiindrose and windspeed gauges. wz_jsgraphics has gone from that page.

One thing I do not like is that I preload all possible gauge images for all wind speeds etc, which slows the initial page load time. This is becuase if I change an image element in script to a new source, if it has not downloaded when canvas attempts to draw the image, you get a blank space. I either need to wait for the image to download, or move the images back out of the canvas objects into background <divs>

Posted: **Fri 14 May 2010 7:31 pm**

mcrossley wrote:...gauges_canvas2 is now fully converted to using HTML5 and canvas, and has animated wiindrose and windspeed gauges. wz_jsgraphics has gone from that page.

Mark, good work - just quickly tried the page/link with Firefox and it loaded and displayed the gauges at a good speed.

The design of those new gauges also look very good.

One thing, while you still work on the graphic development of the gauges, how about deactivating the mouse-over text as that get distracting - by the way, I get nothing (no help information) for 3 gauges (Dew Point/Wind Chill/Heat Index, Inside Temperature, Outside/Inside Humidty <<-- please note the spelling mistake).

mcrossley wrote:One thing I do not like is that I preload all possible gauge images for all wind speeds etc, which slows the initial page load time.

Mark is there no way to pre-load a background image and then 'printing' the relevant weather data onto the image - I am, obviously, not familiar with 'canvas' nor with HTML 5...

And this all started when you decided to make some minor modifications to the pressure gauge and I asked if you could also modify (beautify) the other gauges...

Posted: **Fri 14 May 2010 8:08 pm**

I think this HTML 5 stuff could actually work. It would be nice if they added support into IE8 though.

Thanks for spotting the spelling mistake.

The mouse over is only on gauges where it displays extra information, I have finally figured out how to fix the boxover scripts so they work with refreshed pages.

You will be pleased to hear that I think I have fixed all the HTML validation errors - including the HTML 5

I've quite enjoyed learning a new technology - never know where else it will come in useful

Posted: **Fri 14 May 2010 8:46 pm**

mcrossley wrote:I think this HTML 5 stuff could actually work.

Mark, from what I have read so far about HTML 5 I am impressed (and the comments have been positive) - it will be a nice 'upgrade' from HTML 4 - and, if I read correctly, HTML 5 will help in easing the production of graphic displays/screens.

mcrossley wrote:It would be nice if they added support into IE8 though.

Mark, were you expecting something less from Microsoft - you should know by now as you certainly were not born yesterday (I do not know your age - no birth date in your profile) but, unless the software is designed by Microsoft or unless Microsoft can buy the designing company and release the software under the Microsoft name or unless Microsoft receive zillions of requests for a particular option in the software, thus, adding anything that would make the Microsoft software compatible with non Microsoft products is not acceptable and would certainly not be included/merged into the Microsoft software...

mcrossley wrote:Thanks for spotting the spelling mistake.

Mark, making you blush was not the reason for reporting the spelling mistake ... but I was not sure either if english was your spoken/written language (I really dislike using the term 'mother tongue' because, in my insane mind, I can only see the muscle in my mother's mouth...)

mcrossley wrote:...I have finally figured out how to fix the boxover scripts so they work with refreshed pages.

I sincerely hope that you will eventually share you newly discovered findings...

mcrossley wrote:You will be pleased to hear that I think I have fixed all the HTML validation errors - including the HTML 5

Mark, are you really really really sure...

Odd that the W3C Markup Validation Service page still gives one warning but display no warning for your page - the warning is about their experimental feature HTML5 Conformance Checker???

mcrossley wrote:I've quite enjoyed learning a new technology - never know where else it will come in useful

Mark, what is you day/night line of work, if you are still employable...

Posted: **Fri 14 May 2010 9:25 pm**

gemini06720 wrote:
mcrossley wrote:...I have finally figured out how to fix the boxover scripts so they work with refreshed pages.
I sincerely hope that you will eventually share you newly discovered findings...

Sure, I'll maybe produce a simple demo page showing how to animate using <canvas> and use the boxover with client side updating pages. Though anyone is welcome to download the stuff from this thread and re-use it however they wish.

gemini06720 wrote:
mcrossley wrote:You will be pleased to hear that I think I have fixed all the HTML validation errors - including the HTML 5
Mark, are you really really really sure...

Odd that the W3C Markup Validation Service page still gives one warning but display no warning for your page - the warning is about their experimental feature HTML5 Conformance Checker???

That made me do a double take too, the warning is about their system!

gemini06720 wrote: Mark, what is you day/night line of work, if you are still employable...

I'm an IT consultant for HP during the day, mainly Windows infrastructure and VMware design for large corporates/government - boring stuff compared with learning PHP, MySQL, javascript etc for weather stations

Posted: **Sat 15 May 2010 5:25 pm**

I have put a simple wind direction demo page together which uses the realtime.txt file.

I have put a load of comments in the javascript, which I hope will be enough to get anyone going with this, it shows adding background images, drawing lines and shapes, and adding text to a canvas, and animating the pointers. It also shows how to use the boxover script with pages that refresh.

You can find the demo here: << Link removed - no longer exists >>

A zip file with all the htlm, scripts, and images is here: << Link removed - no longer exists >>

I recommend that you use the boxover.js script in my zip rather than the Cumulus supplied one as it has been updated.
Same goes for the excanvas.js file, which has text support added over the standard download you normally find.

Posted: **Sat 15 May 2010 11:42 pm**

mcrossley wrote:I have put a simple wind direction demo page together which uses the realtime.txt file.

Mark, I really, really, really like that new gauge - finally indicators/pointers that do not to be viewed under a magnifying glass...

I have downloaded the ZIP file and should have a look at its contents later on this evening (Pacific coast time).

I will also compare your modified 'boxover.js' with my modified 'boxover.js' and see if I can find (reach) a coalition/compromise between the two versions...

Cumulus Support

HTML5 and Canvas

HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas

Re: HTML5 and Canvas