Graphics Color questions

[espruino-discuss2]

Posted at 2021-12-11 by user137493

👋

Got my banglejs 2 in the mail a couple of days ago, so far it's working great and I love it.

Been trying to create some watch faces and I always seem to come with problems when it comes to sharpness of colors and I think it's mostly because I don't understand how it works under the hood and what colors are supported so they don't dither.

I would like to understand why the Wave clock for example looks so crisp but when I try to upload an image it just looks super dithered

Would appreciate any help when it comes to understanding how I can have images within the constrains of the LCD

I was trying to reproduce the watchface I used to have on the pebble

First image is the bangle and the other two the watch face I am trying to reproduce

Thank you

Attachments:

• PXL_20211211_105821716.jpg
  
• pebble-time-round-studio-19.jpg

[espruino-discuss2]

Posted at 2021-12-11 by johan_m_o

That's as good as it's going to get with a 3-bit display, meaning you have only 8 colours to work with. Any other colours are created by dithering. You can see an example of the palette here:
http://forum.espruino.com/comments/16223395/

I think it looks great though.

Edit: the wave clock is just using the available colours properly, which prevents dithering from occurring.

[espruino-discuss2]

Posted at 2021-12-11 by Tx

On Bangle 2 you have a limited color palette of eight colors/3bit RGB. If they are not met, the colors are dithered. Just try to hit the 3bit RGB palette and everything is fine.

[espruino-discuss2]

Posted at 2021-12-11 by user137493

Thank you!

Does anyone know the exact hex codes for these allowed colors?

I could build some pixel stuff around it and make it look more crisp

[espruino-discuss2]

Posted at 2021-12-11 by user137493

Nevermind, I think I found it! https://lospec.com/palette-list/3-bit-rgb

Will try to create a nice Nyan cat with these constrains and let's see where this goes

Thank you again!

[espruino-discuss2]

Posted at 2021-12-11 by Tx

https://lospec.com/palette-list/3-bit-rgb

in code: g.setColor(r,g,b);
r,g, b = 0| 1

(ok, I was too slow ...)

[espruino-discuss2]

Posted at 2021-12-11 by HughB

Wow that looks great. Cant wait to try that out. Love it.

[espruino-discuss2]

Posted at 2021-12-11 by myownself

Out of curiosity, what are the other two watches?

[espruino-discuss2]

Posted at 2021-12-11 by HughB

They look like Pebbles. The watch company that Fitbit bought to take out the competition.

[espruino-discuss2]

Posted at 2021-12-12 by myownself

Thanks. Was vaguely aware of pebbles for a long time but not enough to recognise them. Only became interested in watches at all recently when I started doing exercise.

[espruino-discuss2]

Posted at 2021-12-12 by ajkm

Pebble Time Round and Pebble Time.

[espruino-discuss2]

Posted at 2021-12-12 by user137493

Updates in the process of making it look crisper, I re did the pixel art of the Nyan cat using mostly the colors allowed in the screen and allowing some others to be dithered and it looks so much better 🎉🎉

Thank you all so much for your help

Will package it today and make an PR to add it to the bangle app list

Attachments:

• PXL_20211212_131306937.jpg

[espruino-discuss2]

Posted at 2021-12-12 by johan_m_o

@user137493 Looks great!

[espruino-discuss2]

Posted at 2021-12-12 by user137493

I am done with the adjustments to it and uploaded it to GitHub, unfortunately, I nyan cat is actually copyrighted so I can't share it as MIT, will just share it in the forum :/

Here is the code in the IDE:
https://www.espruino.com/ide/?codeurl=https://raw.githack.com/SaraVieira/BangleApps/master/apps/nyancatclk/app.js

And the Github Repo:
https://github.com/SaraVieira/BangleApps/tree/master/apps/nyancatclk

Super happy with you it came out!

[gfwilliams]

Posted at 2021-12-13 by @gfwilliams

That looks awesome! Such a shame about the copyright though.

I've sent them an email, and maybe they'll say 'yes it's fine' - it's not like there aren't hundreds of clones out there already and you're not making any money out of it.

[espruino-discuss2]

Posted at 2021-12-21 by user137493

Oh thank you! Let me know what they say :)

Would love to share it :)

[espruino-discuss2]

Posted at 2021-12-24 by Andreas_Rozek

What a great idea! Perhaps, I should start writing down the number of my users as binary numbers as well...

[espruino-discuss2]

Posted at 2021-12-24 by Andreas_Rozek

Based on the idea with "half colors", I wrote the following little test

  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);
  }

The result does not look too bad (if you can live with half of the original spatial resolution)

Attachments:

• BangleJS2-HalfColors.png

[espruino-discuss2]

Posted at 2021-12-24 by Andreas_Rozek

And just for the records: here is the same experiment for "quarter colors", i.e. RGB channel values 0, 0.25, 0.5, 0.75 and 1.0:

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

  g.clear();

  for (let i = 0; i < 125; i++) {
    let x = (i % 12)         * PatchWidth;
    let y = Math.floor(i/12) * PatchHeight;

    let R = i % 5;
    let G = Math.floor(i/5) % 5;
    let B = Math.floor(i/25);

    g.setColor(R/4,G/4,B/4);
    g.fillRect(x,y, x+PatchWidth-1,y+PatchHeight-1);
  }

It seems that channel values 0/0.5/1.0 still look acceptable while quarter values do not...

Attachments:

• BangleJS2-QuarterColors.png

[espruino-discuss2]

Posted at 2021-12-24 by HughB

Nice one @Andreas_Rozek. It would make a useful app to have those colours on a screen, touch the screen and show the colour code in '#f8f' format.

[espruino-discuss2]

Posted at 2021-12-24 by Andreas_Rozek

Well,

try this one for the moment:

  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);
  }

  g.setFont12x20();
  
  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 = ['00','80','FF'];
    
    g.setColor(1,1,1);
    g.fillRect(3*PatchWidth,4*PatchHeight, ScreenWidth,ScreenHeight);
    
    g.setColor(0,0,0);
    g.drawString(
      '#' + HexValues[R] + HexValues[G] + HexValues[B],
      3*PatchWidth,4*PatchHeight+6
    );
  });

I'll make a "real" application out of it as soon as I find the time (it's Christmas right now, you know...time for the family)

[espruino-discuss2]

Posted at 2021-12-24 by HughB

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);
  
  });

---

Attachments:

• download (1).png

[espruino-discuss2]

Posted at 2021-12-24 by Numerist

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.

[espruino-discuss2]

Posted at 2021-12-24 by Numerist

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

Attachments:

• 08F.jpg
  
• 00F.jpg

[espruino-discuss2]

Posted at 2021-12-25 by @MaBecker

take a look into scolor

https://github.com/espruino/BangleApps/tree/master/apps/scolor

[espruino-discuss2]

Posted at 2021-12-25 by Andreas_Rozek

...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);
  });

---

Attachments:

• BangleJS2-ColorWheel-2.png
  
• BangleJS2-ColorWheel-3.png

[espruino-discuss2]

Posted at 2021-12-25 by @MaBecker

wow, that look's very cool!

[espruino-discuss2]

Posted at 2021-12-25 by Andreas_Rozek

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

[espruino-discuss2]

Posted at 2021-12-25 by Numerist

@MaBecker 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.)

[espruino-discuss2]

Posted at 2021-12-25 by Poolitzer

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.

[espruino-discuss2]

Posted at 2021-12-25 by Andreas_Rozek

The whole area is tappable:

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