Page 1 of 2

HTML5 Canvas based Odometer 'gauge'

Posted: Wed 08 Feb 2012 9:05 am
by mcrossley
Last night I knocked up this 'odometer' type counter.
odometer.png
Eventually it may find its way into the SteelSeries gauges as an alternative to the LCD panel, but for now it's just a standalone object. Someone may find a use for it on their web page, I just created it as an exercise with no real use in mind.

A demo page can be found here:
http://www.wilmslowastro.com/odometer/odometer.html

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Tue 06 Mar 2012 5:12 pm
by mcrossley
The odometer has now been incorporated into the SteelSeries library as a separate component, and as an option to the LCD display on the Radial gauge.

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Wed 07 Mar 2012 3:55 am
by GraemeT
Oh! I can see it now... an anemometer odometer to monitor the anemometer kilometers...

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Wed 07 Mar 2012 4:42 am
by gwheelo
Mark -

Any guidelines to incorporate the odometer in the windspeed gauge? I'm thinking windrun. Will I need to update steelseries.js from 0.9.17 - Cumulus Specific Version?

Is it just a matter of adding:

useOdometer: true,
odometerParams: {digits: 5, value: odoValue}

to the gauge initialization.

gw

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Wed 07 Mar 2012 9:02 am
by mcrossley
gwheelo wrote:Mark -

Any guidelines to incorporate the odometer in the windspeed gauge? I'm thinking windrun. Will I need to update steelseries.js from 0.9.17 - Cumulus Specific Version?

Is it just a matter of adding:

useOdometer: true,
odometerParams: {digits: 5, value: odoValue}

to the gauge initialization.

gw
Basically yes. Though you will not have an "odoValue" when the gauge is first drawn so you do not need that - it will default to zero.

When (very soon) I release v1.6.5 of the scripts that will have the 'cutdown' SS library that incorporates the odometer. If you want to try this before that, then you will have to use the current build of the full library - 0.11.1

You will need to add a couple of more pieces:
- Add the windrun tag to the realtimegaugesT.txt file: "windrun":"<#windrun>",
- Add gauge_wind.setOdoValue(data.windrun) to the doWind() function

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Wed 07 Mar 2012 9:03 am
by mcrossley
GraemeT wrote:Oh! I can see it now... an anemometer odometer to monitor the anemometer kilometers...
That would be a potential weather use yes, that is what George is suggesting too.

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Wed 07 Mar 2012 9:05 am
by mcrossley
Here is an example of what a radial gauge with odometer should look like :lol:
ss-radial-odo.jpg

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Thu 08 Mar 2012 4:21 am
by GraemeT
Ah! Yes Mark, I for one, reckon that looks pretty slick...

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Thu 08 Mar 2012 4:29 am
by gwheelo
That would be a potential weather use yes
OK - windrun implemented - but still with static data - station is still down until 2 April.

http://www.wheelocknet.net/cumulus/test_windrun.html?gb

I now need French, Dutch, German, Spanish, and Catalan translations for "Windrun" - anybody?

gw

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Fri 09 Mar 2012 5:01 am
by gwheelo
Version 1.6.5 is now available
Did the odometer make 1.6.5

gw

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Fri 09 Mar 2012 8:59 am
by mcrossley
Yes, it should be in the cut down library I supply in the zip. Is it not working?

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Fri 09 Mar 2012 1:30 pm
by gwheelo
Yes, it should be in the cut down library I supply in the zip. Is it not working?
I haven't tried it - there was no mention in the "change" list - so I thought I would ask before I downloaded.

gw

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Sat 10 Mar 2012 4:39 am
by GraemeT
Well, the odometer works.
I needed a few minutes to realise #windrun was missing from realtimegaugesT.txt but is all good now.

http://weather.gktnet.com/gauges-ss.php

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Sat 10 Mar 2012 8:43 am
by mcrossley
Well done Graeme, maybe I should add a unit string for the odometer as well.

Re: HTML5 Canvas based Odometer 'gauge'

Posted: Sat 10 Mar 2012 9:22 am
by GraemeT
I was thinking maybe a "Windrun" label underneath the odometer would be a nice touch.