COLOR GRADIENTS: RGB Colors convert to Decimals

Hello!

I want to code color gradients for datafield background (for heartrate zones etc...)

Is there a common way to do this?

I coded a sample - which would be more easy, if there is a way to convert RGB to Decimals whithin Monkey C.

My test code:

        var fullRED    = 16711680;         // rgb(255, 0, 0)
        var darkerRED  = 16056320;         // rgb(245, 0, 0)
        var difference =   655360;          
        
        for ( i = 0; i <= 20; i ++ ) {
            dc.setColor(fullRED - i*difference, Graphics.COLOR_TRANSPARENT);
            dc.drawLine(50+i, 200, 50+i, 300);
            dc.drawLine(150-i, 200, 150-i, 300);
        }

leads to following:

That's what I want to do - but with every color and fading to black as well as fading to white.

Does anybody know a simple solution?

Thanks!

0 mcinner1 10 months ago

Ok, I found the simple solution...

    function rgbToDec( rr, gg, bb ) as Number {
        return rr*65536 + gg*256 + bb;
    }

0 flocsy🤠 10 months ago

Why var and not const?

0 mcinner1 10 months ago in reply to flocsy🤠

Just testing…

0 flowstate 10 months ago in reply to mcinner1

You can also use Graphics.createColor() [although your solution looks fine]. createColor() takes an alpha value as input, as well as red, green and blue values.

Note that there's a couple of edge cases with unexpected behavior due to the fact that monkey C supports colors in either RGB or ARGB format and that the special COLOR_TRANSPARENT constant is defined as -1:

https://forums.garmin.com/developer/connect-iq/i/bug-reports/creating-full-white-color-results-in-transparent

TL;DR

- specifying 0xff / 255 for all values (A, R, G, B) gives you a transparent colour instead of white

- specifying 0 for the alpha channel gives you a fully opaque colour instead of fully transparent

0 mcinner1 10 months ago in reply to flowstate

Hi flowstate !

I've tried your suggested method to use Graphics.createColor() because it would be much simpler to use.

I draw blue lines on black (or white) background - each line with different alpha from 0 to 250 - but all lines are drwan in solid blue. No gradient... ( Edge 1050)

******************************************************

function drawGradient( dc, gr, x, y, w, h, c ) {

var r = Math.round( c / (256*256));

var g = Math.round( c / 256 ) % 256;

var b = c % 256;

for ( i = 0; i <= gr; i ++ ) {

var alph = (i*(250/gr)).toNumber(); if ( alph < 0 ) { alph = 0; }

var newCol = Graphics.createColor(alph, r, g, b);

dc.setColor( newCol, Graphics.COLOR_TRANSPARENT);

System.println ( alph + " / " + r + " / " + g + " / " + b );

dc.drawLine(x+i, y, x+i, y+h);

dc.drawLine((x+w)-i, y, (x+w)-i, y+h);

}