Farbauflösung

Bangle.js Farbauflösung

Die verschiedenen Bildschirmauflösungen einer Bangle.js gehen mit unterschiedlichen Farbauflösungen einher:

240x240 Pixel² - 16-bit Farbtiefe (RGB565-kodiert)
240x160 Pixel² - 16-bit Farbtiefe (RGB565-kodiert)
120x120 Pixel² - 8-bit Farbpalette
80x80 Pixel² - 8-bit Farbpalette

Sofern Sie die Zeichenfarbe mit der Methode g.setColor(r,g,b) setzen, müssen Sie sich um die interne Kodierung keine Gedanken machen.

drawColorStripe_240x240/240x160/120x120/80x80

Einen ersten Eindruck von den Farbabstufungen in den unterschiedlichen Auflösungen liefert folgendes Beispiel:

240x240 Pixel²

Quelltext

  Bangle.setLCDMode();                                // use normal display mode
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** draw color stripe ****/

  const Width  = g.getWidth();
  const Height = g.getHeight();

  const Saturation = 1.0;
  const Value      = 1.0;

  for (let x = 0; x < Width; x++) {
    let Hue = Math.round(360*x/Width);
    let RGB = HSVtoRGB(Hue, Saturation, Value);
    g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
    g.drawLine(x,0, x,Height-1);
  }

im Emulator ausführen auf Uhr ausführen

240x160 Pixel² (bitte warten Sie, bis der Streifen auf der Anzeige erscheint)

Quelltext

  Bangle.setLCDMode('doublebuffered');
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** draw color stripe ****/

  const Width  = g.getWidth();
  const Height = g.getHeight();

  const Saturation = 1.0;
  const Value      = 1.0;

  for (let x = 0; x < Width; x++) {
    let Hue = Math.round(360*x/Width);
    let RGB = HSVtoRGB(Hue, Saturation, Value);
    g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
    g.drawLine(x,0, x,Height-1);
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

120x120 Pixel² (bitte warten Sie, bis der Streifen auf der Anzeige erscheint)

Quelltext

  Bangle.setLCDMode('120x120');
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** draw color stripe ****/

  const Width  = g.getWidth();
  const Height = g.getHeight();

  const Saturation = 1.0;
  const Value      = 1.0;

  for (let x = 0; x < Width; x++) {
    let Hue = Math.round(360*x/Width);
    let RGB = HSVtoRGB(Hue, Saturation, Value);
    g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
    g.drawLine(x,0, x,Height-1);
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

80x80 Pixel²

Quelltext

  Bangle.setLCDMode('80x80');
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** draw color stripe ****/

  const Width  = g.getWidth();
  const Height = g.getHeight();

  const Saturation = 1.0;
  const Value      = 1.0;

  for (let x = 0; x < Width; x++) {
    let Hue = Math.round(360*x/Width);
    let RGB = HSVtoRGB(Hue, Saturation, Value);
    g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
    g.drawLine(x,0, x,Height-1);
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

240x240

240x160

120x120

80x80

drawColorDisc_240x240/240x160/120x120/80x80

Die folgende Farbscheibe verdeutlicht die Farbfähigkeiten der unterschiedlichen Auflösungen besser, benötigt jedoch wesentlich mehr Zeit für die Darstellung (nämlich mehrere Minuten):

240x240 Pixel² (wird vor Ihren Augen aufgebaut)

Quelltext

  Bangle.setLCDMode();                                // use normal display mode
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** Rad2Deg ****/

  function Rad2Deg (AngleInRad) {
    let AngleInDeg = (180*AngleInRad/Math.PI) % 360;
    return (AngleInDeg < 0 ? 360+AngleInDeg : AngleInDeg);
  }

/**** draw color disc ****/

  const Width  = g.getWidth(),  CenterX = Width/2;
  const Height = g.getHeight(), CenterY = Height/2;

  const Radius        = Math.min(CenterX,CenterY);
  const RadiusSquared = Radius*Radius;

  const Saturation = 1.0;

  for (let yOffset = -Radius; yOffset <= Radius; yOffset++) {
    for (let xOffset = -Radius; xOffset <= Radius; xOffset++) {
      let OffsetSquared = xOffset*xOffset + yOffset*yOffset;
      if (OffsetSquared <= RadiusSquared) {
        let Hue   = Rad2Deg(Math.atan2(yOffset,xOffset));
        let Value = Math.sqrt(OffsetSquared)/Radius;
        let RGB   = HSVtoRGB(Hue, Saturation, Value);
        g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
        g.setPixel(CenterX+xOffset,CenterY+yOffset);
      }
    }
  }

im Emulator ausführen auf Uhr ausführen

240x160 Pixel² (wird unsichtbar aufgebaut, dauert sehr lange)

Quelltext

  Bangle.setLCDMode('doublebuffered');
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** Rad2Deg ****/

  function Rad2Deg (AngleInRad) {
    let AngleInDeg = (180*AngleInRad/Math.PI) % 360;
    return (AngleInDeg < 0 ? 360+AngleInDeg : AngleInDeg);
  }

/**** draw color disc ****/

  const Width  = g.getWidth(),  CenterX = Width/2;
  const Height = g.getHeight(), CenterY = Height/2;

  const Radius        = Math.min(CenterX,CenterY);
  const RadiusSquared = Radius*Radius;

  const Saturation = 1.0;

  for (let yOffset = -Radius; yOffset <= Radius; yOffset++) {
    for (let xOffset = -Radius; xOffset <= Radius; xOffset++) {
      let OffsetSquared = xOffset*xOffset + yOffset*yOffset;
      if (OffsetSquared <= RadiusSquared) {
        let Hue   = Rad2Deg(Math.atan2(yOffset,xOffset));
        let Value = Math.sqrt(OffsetSquared)/Radius;
        let RGB   = HSVtoRGB(Hue, Saturation, Value);
        g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
        g.setPixel(CenterX+xOffset,CenterY+yOffset);
      }
    }
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

120x120 Pixel² (wird unsichtbar aufgebaut, dauert lange)

Quelltext

  Bangle.setLCDMode('120x120');
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** Rad2Deg ****/

  function Rad2Deg (AngleInRad) {
    let AngleInDeg = (180*AngleInRad/Math.PI) % 360;
    return (AngleInDeg < 0 ? 360+AngleInDeg : AngleInDeg);
  }

/**** draw color disc ****/

  const Width  = g.getWidth(),  CenterX = Width/2;
  const Height = g.getHeight(), CenterY = Height/2;

  const Radius        = Math.min(CenterX,CenterY);
  const RadiusSquared = Radius*Radius;

  const Saturation = 1.0;

  for (let yOffset = -Radius; yOffset <= Radius; yOffset++) {
    for (let xOffset = -Radius; xOffset <= Radius; xOffset++) {
      let OffsetSquared = xOffset*xOffset + yOffset*yOffset;
      if (OffsetSquared <= RadiusSquared) {
        let Hue   = Rad2Deg(Math.atan2(yOffset,xOffset));
        let Value = Math.sqrt(OffsetSquared)/Radius;
        let RGB   = HSVtoRGB(Hue, Saturation, Value);
        g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
        g.setPixel(CenterX+xOffset,CenterY+yOffset);
      }
    }
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

80x80 Pixel² (wird unsichtbar aufgebaut, dauert lange)

Quelltext

  Bangle.setLCDMode('80x80');
  g.clear();

/**** HSVtoRGB ****/
// see https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB

  function HSVtoRGB (h, s, v) {
    let c = v*s;
    let k = h/60;
    let x = c*(1 - Math.abs(k%2 - 1));

    let r, g, b;
    switch (true) {
      case (k >=0) && (k <= 1): r = c; g = x; b = 0; break;
      case (k > 1) && (k <= 2): r = x; g = c; b = 0; break;
      case (k > 2) && (k <= 3): r = 0; g = c; b = x; break;
      case (k > 3) && (k <= 4): r = 0; g = x; b = c; break;
      case (k > 4) && (k <= 5): r = x; g = 0; b = c; break;
      case (k > 5) && (k <= 6): r = c; g = 0; b = x; break;
    }
    let m = v-c;

    return [
      Math.round(255*(r+m)), Math.round(255*(g+m)), Math.round(255*(b+m))
    ];
  }

/**** Rad2Deg ****/

  function Rad2Deg (AngleInRad) {
    let AngleInDeg = (180*AngleInRad/Math.PI) % 360;
    return (AngleInDeg < 0 ? 360+AngleInDeg : AngleInDeg);
  }

/**** draw color disc ****/

  const Width  = g.getWidth(),  CenterX = Width/2;
  const Height = g.getHeight(), CenterY = Height/2;

  const Radius        = Math.min(CenterX,CenterY);
  const RadiusSquared = Radius*Radius;

  const Saturation = 1.0;

  for (let yOffset = -Radius; yOffset <= Radius; yOffset++) {
    for (let xOffset = -Radius; xOffset <= Radius; xOffset++) {
      let OffsetSquared = xOffset*xOffset + yOffset*yOffset;
      if (OffsetSquared <= RadiusSquared) {
        let Hue   = Rad2Deg(Math.atan2(yOffset,xOffset));
        let Value = Math.sqrt(OffsetSquared)/Radius;
        let RGB   = HSVtoRGB(Hue, Saturation, Value);
        g.setColor(RGB[0]/255,RGB[1]/255,RGB[2]/255);
        g.setPixel(CenterX+xOffset,CenterY+yOffset);
      }
    }
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

240x240

240x160

120x120

80x80

Nota bene: die Anzeigen von Emulator und tatsächlicher Uhr unterscheiden sich erheblich voneinander. Falls Farbabstufungen für eine Anwendung relevant sind (wie z.B. für die Mandelbrot-Menge), sollte man direkt auf RGB565-kodierte Farben oder (in den niedrigeren Auflösungen) auf die Einträge der Farbpalette zurückgreifen und sich nicht auf g.setColor für leicht unterschiedliche RGB-Farben verlassen.

drawPalette_120x120/80x80

In den beiden niedrigsten Auflösungen kommt eine Farbpalette zum Einsatz. Das folgende Beispiel zeigt deren Belegung:

120x120 Pixel² (wird im Hintergrund aufgebaut, dauert ein paar Sekunden)

Quelltext

  Bangle.setLCDMode('120x120');
  g.clear();

  const Width  = g.getWidth(),  CenterX = Width/2;
  const Height = g.getHeight(), CenterY = Height/2;

  const CellWidth  = Math.floor(Width/16);
  const CellHeight = Math.floor(Height/16);

  for (let Row = 0; Row < 16; Row++) {  
    let yMin = CenterY + (Row-8)*CellHeight;
    let yMax = yMin+CellHeight-1;

    for (let Column = 0; Column < 16; Column++) {
      let xMin = CenterX + (Column-8)*CellWidth;
      let xMax = xMin + CellWidth-1;

      let PaletteIndex = Row*16 + Column;
      for (let y = yMin; y <= yMax; y++) {
        for (let x = xMin; x <= xMax; x++) {
          g.setPixel(x,y,PaletteIndex);
        }
      }
    }
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

80x80 Pixel² (wird im Hintergrund aufgebaut, dauert ein paar Sekunden)

Quelltext

  Bangle.setLCDMode('80x80');
  g.clear();

  const Width  = g.getWidth(),  CenterX = Width/2;
  const Height = g.getHeight(), CenterY = Height/2;

  const CellWidth  = Math.floor(Width/16);
  const CellHeight = Math.floor(Height/16);

  for (let Row = 0; Row < 16; Row++) {  
    let yMin = CenterY + (Row-8)*CellHeight;
    let yMax = yMin+CellHeight-1;

    for (let Column = 0; Column < 16; Column++) {
      let xMin = CenterX + (Column-8)*CellWidth;
      let xMax = xMin + CellWidth-1;

      let PaletteIndex = Row*16 + Column;
      for (let y = yMin; y <= yMax; y++) {
        for (let x = xMin; x <= xMax; x++) {
          g.setPixel(x,y,PaletteIndex);
        }
      }
    }
  }

  g.flip();

im Emulator ausführen auf Uhr ausführen

120x120

80x80