Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

HTML5 Canvas based Odometer 'gauge'

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

HTML5 Canvas based Odometer 'gauge'

Post 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
You do not have the required permissions to view the files attached to this post.
User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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.
User avatar
GraemeT
Posts: 312
Joined: Wed 21 Oct 2009 11:19 am
Weather Station: La Crosse WS-2355 & WS-2306
Operating System: Windoze 7, 10, 11
Location: Bayswater, Australia
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by GraemeT »

Oh! I can see it now... an anemometer odometer to monitor the anemometer kilometers...
Cheers,
Graeme.
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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
Image
User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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
User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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.
User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by mcrossley »

Here is an example of what a radial gauge with odometer should look like :lol:
ss-radial-odo.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
GraemeT
Posts: 312
Joined: Wed 21 Oct 2009 11:19 am
Weather Station: La Crosse WS-2355 & WS-2306
Operating System: Windoze 7, 10, 11
Location: Bayswater, Australia
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by GraemeT »

Ah! Yes Mark, I for one, reckon that looks pretty slick...
Cheers,
Graeme.
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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
Image
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by gwheelo »

Version 1.6.5 is now available
Did the odometer make 1.6.5

gw
Image
User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by mcrossley »

Yes, it should be in the cut down library I supply in the zip. Is it not working?
User avatar
gwheelo
Posts: 453
Joined: Wed 11 Jun 2008 7:36 pm
Weather Station: WMR-88
Operating System: Windows 8.1
Location: L'Estartit, Spain
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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
Image
User avatar
GraemeT
Posts: 312
Joined: Wed 21 Oct 2009 11:19 am
Weather Station: La Crosse WS-2355 & WS-2306
Operating System: Windoze 7, 10, 11
Location: Bayswater, Australia
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post 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
Cheers,
Graeme.
User avatar
mcrossley
Posts: 12692
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by mcrossley »

Well done Graeme, maybe I should add a unit string for the odometer as well.
User avatar
GraemeT
Posts: 312
Joined: Wed 21 Oct 2009 11:19 am
Weather Station: La Crosse WS-2355 & WS-2306
Operating System: Windoze 7, 10, 11
Location: Bayswater, Australia
Contact:

Re: HTML5 Canvas based Odometer 'gauge'

Post by GraemeT »

I was thinking maybe a "Windrun" label underneath the odometer would be a nice touch.
Cheers,
Graeme.
Post Reply