Graphics Color questions

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

take a look into scolor

https://github.com/espruino/BangleApps/t­ree/master/apps/scolor

...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