Graphics Color questions

Posted on
Page
of 2
/ 2
• love it. had a bit of a tinker with it.
You only need 1 hex digit for each color.

``````let ScreenWidth  = g.getWidth(),  PatchWidth  = ScreenWidth/6;
let ScreenHeight = g.getHeight(), PatchHeight = ScreenHeight/6;

g.clear();
for (let i = 0; i < 27; i++) {
let x = (i % 6)         * PatchWidth;
let y = Math.floor(i/6) * PatchHeight;
let R = i % 3;
let G = Math.floor(i/3) % 3;
let B = Math.floor(i/9);
g.setColor(R/2,G/2,B/2);
g.fillRect(x,y, x+PatchWidth-1,y+PatchHeight-1);
}

Bangle.on('touch', function (Button,Position) {
let x = Math.floor(Position.x / PatchWidth);
let y = Math.floor(Position.y / PatchHeight);

let i = y*6 + x;
if (i >= 27) { return; }
let R = i % 3;
let G = Math.floor(i/3) % 3;
let B = Math.floor(i/9);
let HexValues = ['0','8','F'];  //changed
Bangle.buzz();   // new

g.setColor(R/2,G/2,B/2);  // changed
g.fillRect(3*PatchWidth,4*PatchHeight, ScreenWidth,ScreenHeight);

g.setFont('Vector', 28);
g.setColor('#000');  // black
g.setFontAlign(0,-1);  // new
g.drawString(
'#' + HexValues[R] + HexValues[G] + HexValues[B],
(ScreenWidth - 1.5*PatchWidth),  ScreenHeight - 2*PatchHeight);

g.setColor('#fff');  // white
g.drawString(
'#' + HexValues[R] + HexValues[G] + HexValues[B],
(ScreenWidth - 1.5*PatchWidth),  ScreenHeight - PatchHeight);

});
``````

1 Attachment

• Thanks to both of you. Very helpful. I needed the "official" rainbow colors, which seem like F00, F80, FF0, 0F0, 00F, F0F. Because on a black background 00F is nearly unreadable, I'm using 08F. 0FF looks too green.

Those'll do, although they're not ideal. Even one more bit for color would've helped.

• On the bottom: 00F. On the top: 08F. Photos not great but you get the idea.

2 Attachments

• ...and here is the same in a touchable version:

``````  let ColorList = [
'#0000FF', '#8000FF', '#FF00FF', '#FF0080', '#FF0000', '#FF8000',
'#FFFF00', '#80FF00', '#00FF00', '#00FF80', '#00FFFF', '#0080FF'
];

let ScreenWidth  = g.getWidth(),  CenterX = ScreenWidth/2;
let ScreenHeight = g.getHeight(), CenterY = ScreenHeight/2;

let outerRadius = Math.min(CenterX,CenterY) * 0.9;
let innerRadius = outerRadius*0.5;

let sin = Math.sin, cos = Math.cos;
let twoPi = 2*Math.PI, halfPi = Math.PI/2;

let DeltaPhi = twoPi/72;
let Epsilon  = 0.001;

g.clear();

g.setColor(0,0,0);
g.fillRect(0,0, ScreenWidth,ScreenHeight);

for (let i = 0; i < 12; i++) {
let Phi0 = i * twoPi/12, Phi1 = (i+1) * twoPi/12;

let Polygon = [];
for (let Phi = Phi0; Phi <= Phi1+Epsilon; Phi += DeltaPhi) {
Polygon.push(CenterX + outerRadius * sin(Phi));
Polygon.push(CenterY - outerRadius * cos(Phi));
}

for (let Phi = Phi1; Phi >= Phi0-Epsilon; Phi -= DeltaPhi) {
Polygon.push(CenterX + innerRadius * sin(Phi));
Polygon.push(CenterY - innerRadius * cos(Phi));
}
g.setColor(ColorList[i]);
g.fillPoly(Polygon);
}

g.setColor(1,1,1);
g.fillCircle(CenterX,CenterY, innerRadius);

g.setFont12x20();
g.setFontAlign(0,0);
g.setColor(0,0,0);

g.drawString('Tap',   CenterX,CenterY-20);
g.drawString('on',    CenterX,CenterY);
g.drawString('Color', CenterX,CenterY+20);

Bangle.on('touch', function (Button,Position) {
let dx = Position.x - CenterX;
let dy = Position.y - CenterY;

let Radius = Math.sqrt(dx*dx + dy*dy);

let Color;
switch (true) {
case (Radius > outerRadius): Color = '#000000'; break;
case (Radius < innerRadius): Color = '#FFFFFF'; break;
default:
let Phi = Math.atan2(dy,dx) + halfPi;
if (Phi < 0)     { Phi += twoPi; }
if (Phi > twoPi) { Phi -= twoPi; }

let Index = Math.floor(12*Phi/twoPi);
Color = ColorList[Index];
}
g.setColor(1,1,1);
g.fillCircle(CenterX,CenterY, innerRadius);

g.setColor(0,0,0);
g.drawString(Color, CenterX,CenterY);
});
``````

2 Attachments

• wow, that look's very cool!

• ...now available on my personal App Loader (look for "ColorWheel") and - hopefully - soon on the official one as well.

• @MaBe I assume that show color is only for Bangle.js 1. Nice displays.

@Andreas_Rozek The color wheel is a good addition, thanks. Is the entire area covered by a color tappable? Sometimes it seems like just the edge, to get the right answer and avoid getting black or white.

Could a future firmware upgrade for Bangle.js 2 improve color, or is there a limitation making that impossible? (Gordon's on a well-deserved holiday.)

• Could a future firmware upgrade for Bangle.js 2 improve color, or is there a limitation making that impossible?

As I understand it, the issue is the 3 bit display, which can't be "improved" with a software upgrade. It was a hardware decision, the more colour you support, the more power the display consumes. That was the tradeoff to have the full touchscreen and acceptable battery life, again, from my understanding.

• The whole area is tappable:

• tap outside for black
• tap inside for white
• tap on a color for that color
• Post a reply

Graphics Color questions

Posted by @user137493