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 4017) - 17 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

dynamically change gradient on LED guage

Discussion of Mark Crossley's HTML5/Javascript gauges

Moderator: mcrossley

Post Reply
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

dynamically change gradient on LED guage

Post by mmcp42 »

my weather page is working very nicely - so thanks for great gauges
I'm using a RadialBargraph for rainfall
I want to show rain per hour, day, week, month year
a) I need to change the max value - sorted :)
b) I want to change the gradient - can't seem to get that working :(

a nudge in the right direction would be great - thanks
Mike

http://www.mmcpix.com/wx.html
weather station here: http://www.mmcpix.com/wx.html
User avatar
mcrossley
Posts: 12689
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: dynamically change gradient on LED guage

Post by mcrossley »

Code: Select all

        createRainfallGradient = function (metric) {
            var grad = new steelseries.gradientWrapper(
                0,  // Start value
                (metric ? 100 : 4), // End value
                [0, 0.1, 0.62, 1],  // Fractional stops
                [new steelseries.rgbaColor(15,  148,  0, 1), // Start colour
                 new steelseries.rgbaColor(213, 213,  0, 1), // Fraction 1 colour
                 new steelseries.rgbaColor(213,   0, 25, 1), // Fraction 2 colour... etc
                 new steelseries.rgbaColor(250,   0,  0, 1)]
            );
            return grad;
        },
But you will probably need to modify this to pass your upper limit value and define the gradient based on that. By default the gradient runs from 0 - 100 when you use mm as the UoM.
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

aha thanks
I get that part, but how do I Get the gauge to use the new gradient?
thanks
weather station here: http://www.mmcpix.com/wx.html
User avatar
mcrossley
Posts: 12689
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: dynamically change gradient on LED guage

Post by mcrossley »

OK, you will have to call the .setGradient() method of the gauge...

Assuming you store the updated gradient in _rain.grad...

Code: Select all

_gaugeRain.setGradient(_rain.grad);
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

excellent
works a treat now
(we'll ignore the spurious commas instead of semi-colons along the way!)
thanks :)
weather station here: http://www.mmcpix.com/wx.html
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: dynamically change gradient on LED guage

Post by water01 »

Believe that you should also change

Code: Select all

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
to either

Code: Select all

<meta http-equiv="content-type" content="text/html; charset=utf-8">
or

Code: Select all

    <meta charset="utf-8">
not both and make sure you save the source of gauges-ssT.htm as "UTF-8 without BOM" to rid yourself of the spurious A in the degree display for the wind.
David
Image
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

water01 wrote:Believe that you should also change

Code: Select all

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
to either

Code: Select all

<meta http-equiv="content-type" content="text/html; charset=utf-8">
or

Code: Select all

    <meta charset="utf-8">
not both and make sure you save the source of gauges-ssT.htm as "UTF-8 without BOM" to rid yourself of the spurious A in the degree display for the wind.
thanks for taking the trouble to dig so deeply
I've made the change you suggested, but i wasn't seeing a spurious A in the degree symbol
I'm using Chrome - which browser did you see it with?

thanks again
Mike
weather station here: http://www.mmcpix.com/wx.html
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: dynamically change gradient on LED guage

Post by water01 »

IE11 and the readings still have A degree sign on them, which is a bit strange if you have fixed the problems.
David
Image
User avatar
mcrossley
Posts: 12689
Joined: Thu 07 Jan 2010 9:44 pm
Weather Station: Davis VP2/WLL
Operating System: Bullseye Lite rPi
Location: Wilmslow, Cheshire, UK
Contact:

Re: dynamically change gradient on LED guage

Post by mcrossley »

Looks fine in IE10 and Chrome to me.
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

water01 wrote:IE11 and the readings still have A degree sign on them, which is a bit strange if you have fixed the problems.
you are absolutely correct - I just upgraded to IE 11 and there it is - standby
weather station here: http://www.mmcpix.com/wx.html
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

hmm
just checked again
wx.html is UTF-8 without BOM
as are steelseries-min.js and tween-min.js
I don't see gauges-ssT.htm
:?

hmm
just checked Opera shows the same fault wtf?
weather station here: http://www.mmcpix.com/wx.html
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

Opera now works if I change to UTF-8 (but NOT without BOM)
IE 11 still fighting me
weather station here: http://www.mmcpix.com/wx.html
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

:D
success
converted ALL files to UTF-8 (NOT UTF-8 without BOM)
Opera, IE 11, Firefox, Chrome and iPad (Opera again I think) are all behaving :clap:

thanks for the heads up
weather station here: http://www.mmcpix.com/wx.html
water01
Posts: 3215
Joined: Sat 13 Aug 2011 9:33 am
Weather Station: Ecowitt HP2551
Operating System: Windows 10 64bit
Location: Burnham-on-Sea
Contact:

Re: dynamically change gradient on LED guage

Post by water01 »

Yep that is fixed on my IE11.
David
Image
User avatar
mmcp42
Posts: 13
Joined: Wed 11 Dec 2013 9:21 am
Weather Station: own build
Operating System: Windows 7
Location: Leighton Buzzard

Re: dynamically change gradient on LED guage

Post by mmcp42 »

water01 wrote:Yep that is fixed on my IE11.
phew! that's a relief
thanks :D
weather station here: http://www.mmcpix.com/wx.html
Post Reply