Welcome to the Cumulus Support forum.

Latest Cumulus MX release v3.3.0 build 3063 - 10 January 2020.
    Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014

    See the Wiki for downloading either version.

    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 » Thu 20 Feb 2014 3:20 pm

    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: 5944
    Joined: Thu 07 Jan 2010 9:44 pm
    Weather Station: Davis VP2
    Operating System: Stretch Lite rPi
    Location: Wilmslow, Cheshire, UK
    Contact:

    Re: dynamically change gradient on LED guage

    Post by mcrossley » Thu 20 Feb 2014 3:41 pm

    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 » Thu 20 Feb 2014 3:47 pm

    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: 5944
    Joined: Thu 07 Jan 2010 9:44 pm
    Weather Station: Davis VP2
    Operating System: Stretch Lite rPi
    Location: Wilmslow, Cheshire, UK
    Contact:

    Re: dynamically change gradient on LED guage

    Post by mcrossley » Thu 20 Feb 2014 4:47 pm

    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 » Thu 20 Feb 2014 5:49 pm

    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: 1570
    Joined: Sat 13 Aug 2011 9:33 am
    Weather Station: WH1081
    Operating System: Windows 7 64bit HP SP1
    Location: Somewhere in the USA
    Contact:

    Re: dynamically change gradient on LED guage

    Post by water01 » Thu 20 Feb 2014 6:41 pm

    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.

    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 » Thu 20 Feb 2014 8:44 pm

    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: 1570
    Joined: Sat 13 Aug 2011 9:33 am
    Weather Station: WH1081
    Operating System: Windows 7 64bit HP SP1
    Location: Somewhere in the USA
    Contact:

    Re: dynamically change gradient on LED guage

    Post by water01 » Fri 21 Feb 2014 12:28 am

    IE11 and the readings still have A degree sign on them, which is a bit strange if you have fixed the problems.

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

    Re: dynamically change gradient on LED guage

    Post by mcrossley » Fri 21 Feb 2014 12:31 am

    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 » Fri 21 Feb 2014 8:54 am

    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 » Fri 21 Feb 2014 9:05 am

    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 » Fri 21 Feb 2014 9:47 am

    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 » Fri 21 Feb 2014 9:53 am

    :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: 1570
    Joined: Sat 13 Aug 2011 9:33 am
    Weather Station: WH1081
    Operating System: Windows 7 64bit HP SP1
    Location: Somewhere in the USA
    Contact:

    Re: dynamically change gradient on LED guage

    Post by water01 » Fri 21 Feb 2014 10:06 am

    Yep that is fixed on my IE11.

    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 » Fri 21 Feb 2014 10:42 am

    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