Gradient color and transparency on amoleds

For anyone wondering how to draw color gradients, here's some code :)

The result isn't entirely smooth, but using a stripy or outline font can hide the steps a bit. There are probably better ways to do this, and if you know how to please share :)

for (var i=1; i<=textH; i++) {
var color = lerpColor(color1, color2, i/textH.toFloat());
//var color = interpolateColorsCompact(color1, color2, i/textH.toFloat());
dc.setColor(color, 0);
dc.drawLine(0, i + 208-textH/2, 416, i+208-textH/2);
}

Both functions give basically the same result visually and according to the sim the performance isn't drastically different. You can probably optimize it by storing the calculated values, if memory isn't a concern.

// www.alanzucconi.com/.../
// stackoverflow.com/.../whats-the-most-effective-way-to-interpolate-between-two-colors-pseudocode-and
function interpolateColorsCompact(a, b, lerp) {
var mask1 = 0xff00ff;
var mask2 = 0x00ff00;
var f2 = (256 * lerp).toNumber();
var f1 = 256 - f2;
return ((((( a & mask1 ) * f1 ) + ( ( b & mask1 ) * f2 )) >> 8 ) & mask1 ) | ((((( a & mask2 ) * f1 ) + ( ( b & mask2 ) * f2 )) >> 8 ) & mask2 );
}

// gist.github.com/.../b0cce2261f1382159b507dd492e1ceef
function lerpColor (pFrom, pTo, pRatio as Float) {
var ar = (pFrom & 0xFF0000) >> 16;
var ag = (pFrom & 0x00FF00) >> 8;
var ab = (pFrom & 0x0000FF);

var br = (pTo & 0xFF0000) >> 16;
var bg = (pTo & 0x00FF00) >> 8;
var bb = (pTo & 0x0000FF);

var rr = (ar + pRatio * (br - ar)).toNumber();
var rg = (ag + pRatio * (bg - ag)).toNumber();
var rb = (ab + pRatio * (bb - ab)).toNumber();

//System.println("rr=" + rr +" rg=" + rg + " rb=" + rb);
return (rr << 16) + (rg << 8) + (rb | 0);
}

With this you can achieve some nice visual effects. Other ideas are a battery icon that changes from green to red based on %, progress bars that have the same effect, starting with one color and ending in another, multiple gradient stops, etc. Hopefully Garmin will build functionality like this into the sdk at some point. You can actually achieve it with a svg, but it would be static.