[ Impressum ] [ Datenschutzerklärung ] [ Kontakt ] [

]

Rastergrafiken

Bangle.js Rastergrafiken

JavaScript kann auch Rastergrafiken auf den Bildschirm einer Bangle.js bringen diese können

innerhalb des Programmes aus einer Art ASCII-Grafik erzeugt bzw. binär vorgegeben,
aus der Ausgabe des Espruino Image Converter generiert oder
vom Dateisystem geladen werden.

Bitmaps aus ASCII-Grafiken

Rastergrafiken mit einer Farbtiefe von einem Bit können aus einer Art ASCII-Grafik erzeugt werden. Gesetzte Bits werden dann in der Vordergrund-, nicht gesetzte Bits in der Hintergrundfarbe auf den Bildschirm gezeichnet. Diese Vorgehensweise funktioniert in allen LCD-Modi.

createImageFromString_240x240

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

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

  let Image = Graphics.createImage(`
  **
  **
******
******
  **
  **
`);
  g.drawImage(Image,CenterX-3,CenterY-3);

im Emulator ausführen auf Uhr ausführen

createImageFromString_120x120

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

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

  g.setColor(1,1,0);

  g.drawImage(Graphics.createImage(`
 ****
******
******
    **
******
 ****
`),CenterX-10,CenterY);

  g.drawImage(Graphics.createImage(`
 ****
******
    **
    **
******
 ****
`),CenterX,CenterY);

  g.drawImage(Graphics.createImage(`
 ****
   ***
    **
    **
   ***
 ****
`),CenterX+10,CenterY);
  g.flip();

im Emulator ausführen auf Uhr ausführen

240x240

120x120

Aus den drei Pacman-Grafiken lässt sich sogar eine kleine Animation basteln.

Quelltext

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

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

  g.setColor(1,1,0);

  let AnimationList = [Graphics.createImage(`
 ****
******
******
    **
******
 ****
`), Graphics.createImage(`
 ****
******
    **
    **
******
 ****
`), Graphics.createImage(`
 ****
   ***
    **
    **
   ***
 ****
`)];
  AnimationList.push(AnimationList[1]);

  let AnimationIndex = 0;

  function animateImage () {
    g.drawImage(AnimationList[AnimationIndex], CenterX,CenterY);
    g.flip();

    AnimationIndex++;
    if (AnimationIndex >= AnimationList.length) {
      AnimationIndex = 0;
    }
  }

  setInterval(animateImage,300);

im Emulator ausführen auf Uhr ausführen

binär vorgegebene Rastergrafiken

Etwas platzsparender (obgleich weniger komfortabel) ist, eine Bitmap gleich in Binärform anzugeben.

Quelltext

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

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

  let Image = {
    width: 8, height: 8, bpp: 1, transparent: 0,
    buffer: new Uint8Array([
      0b00000000,
      0b00011000,
      0b00011000,
      0b01111110,
      0b01111110,
      0b00011000,
      0b00011000,
      0b00000000,
    ]).buffer
  };
  g.drawImage(Image,CenterX-4,CenterY-4);

im Emulator ausführen auf Uhr ausführen

Verwendung des Espruino Image Converter

In den meisten Fällen dürfe man bereits fertige Rastergrafiken vorliegen haben und deshalb vor dem Problem stehen, diese auf eine Bangle.js zu bringen.

Espruino stellt zu diesem Zweck einen Image Converter zur Verfügung, der gegebene Bitmaps in eines der von Bangle.js unterstützten Formate umwandelt und als JavaScript-Anweisung ausgibt - diese Anweisung muss nun nur noch in das eigenen Programm eingefügt werden.

Es folgen Beispiele für die verschiedenen Farbtiefen einer Bangle.js - bitte beachten Sie auch die jeweiligen Einstellungen für den "Image Converter":

Farbtiefe 1 Bit (schwarz/weiß bzw. Vorder- und Hintergrundfarbe)

Original-Bild (vergrößert)

Converter-Einstellungen

Use Compression: no
Diffusion:       flat
Brightness:      default
Colours:         1 bit black/white
Output as:       Image Object (behält ursprgl. Bildgröße bei)

Quelltext

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

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

  let Image = {
    width: 16, height: 16, bpp: 1, transparent: 0,
    buffer: E.toArrayBuffer(atob("gAFAAifkCBATyCQkKZQqVCpUKZQkJBPICBAn5EACgAE="))
  };

  g.drawImage(Image,CenterX-Image.width/2,CenterY-Image.height/2);
  g.flip();

im Emulator ausführen auf Uhr ausführen

80x80

Farbtiefe 4 Bit (16 Farben)

Originale (vergrößert)

Converter-Einstellungen

Use Compression: no
Diffusion:       flat
Brightness:      default
Colours:         4 bit Mac palette
Output as:       Image Object (behält ursprgl. Bildgröße bei)

Quelltext

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

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

  let Ghost_1 = {
    width:6, height:6, bpp:4, transparent:0,
    buffer: E.toArrayBuffer(atob("AMwADP/ADMzADMzADMzAwMwM"))
  };

  let Ghost_2 = {
    width:6, height:6, bpp:4, transparent:0,
    buffer: E.toArrayBuffer(atob("ALsAC/+wC7uwC7uwC7uwsLsL"))
  };

  let Ghost_3 = {
    width:6, height:6, bpp:4, transparent:0,
    buffer: E.toArrayBuffer(atob("AIgACP+ACIiACIiACIiAgIgI"))
  };

  let Ghost_4 = {
    width:6, height:6, bpp:4, transparent:0,
    buffer: E.toArrayBuffer(atob("AN0ADf/QDd3QDd3QDd3Q0N0N"))
  };

  g.drawImage(Ghost_1,CenterX-Ghost_1.width*3,CenterY-Ghost_1.height/2);
  g.drawImage(Ghost_2,CenterX-Ghost_2.width*1,CenterY-Ghost_2.height/2);
  g.drawImage(Ghost_3,CenterX+Ghost_3.width*1,CenterY-Ghost_3.height/2);
  g.drawImage(Ghost_4,CenterX+Ghost_4.width*3,CenterY-Ghost_4.height/2);
  g.flip();

im Emulator ausführen auf Uhr ausführen

80x80

Farbtiefe 8 Bit (Web-Palette mit 216 Farben)

Original-Bild

Converter-Einstellungen

Use Compression: yes
Diffusion:       flat
Brightness:      default
Colours:         8 bit Web palette
Output as:       Image Object (behält ursprgl. Bildgröße bei)

Quelltext

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

  let Image =  {
    width:80, height:80, bpp:8, transparent:254,
    buffer:require("heatshrink").decompress(atob("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"))
  };

  g.drawImage(Image, 0,0);
  g.flip();

im Emulator ausführen auf Uhr ausführen

80x80

Farbtiefe 16 Bit (RGB565-kodiert, 65536 Farben)

Original-Bild

Converter-Einstellungen

Use Compression: yes
Diffusion:       flat
Brightness:      default
Colours:         16 bit RGB565
Output as:       Image Object (behält ursprgl. Bildgröße bei)

Quelltext

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

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

  let Image =  {
    width:60, height:60, bpp:16, transparent:5,
  buffer:require("heatshrink").decompress(atob("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"))
  };

  g.drawImage(Image, CenterX-Image.width/2,CenterY-Image.height/2);

im Emulator ausführen auf Uhr ausführen

240x240

Rastergrafiken mit einer Farbauflösung von 16 Bit stellen für die Bangle.js eine große Herausforderung dar, weil sie (im Vergleich zu den insgesamt verfügbaren 64kB) einfach immens viel Speicher benötigen. Das gezeigte Bild mit einer Größe von 60x60 Pixel kann von der Uhr jedoch noch verarbeitet werden.

Rastergrafiken skalieren und rotieren

Rastergrafiken können während des Zeichnens auch skaliert und rotiert werden:

Skalierung

Quelltext

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

  let Image =  {
    width:60, height:60, bpp:16, transparent:5,
  buffer:require("heatshrink").decompress(atob("ADUCgEEAwcIpsY7Mhn4BfjMfAIYHBlN/AIcx38pz8hr4BCC4ceAoMY/cIuBTEgYBCADpzFpwxBOcpjBNYM5/86j4BBpV/rcfAINS34HBBocx74ZBPIKRDjMchGTLI0BdLABBAAMpc40+AIRzcb4XfoU/AItKz9z3+dj2U31rz9jn9SCoyPBlN+eob3Epz3GdK0Q2opFObZ1Dc4RzIboJpBNoNz7+U3+tv2Er97/yBBrX/CYIbFmO/eoRREiHYMIp1SdIP7OcYBBJoJzHOobrBOoIBBvf/xl/3v90s+wk/yiBB31S355HeoIzCPIkZjsIt51RCYIdEOYLpgJIJ1Mv5zBrcfsdfN4J3Bzsf2u82u+3v+yneeYKNBPIYDDPIg3BK4h1PiG0dMI9DlOfNop1HAYJzCAYVz7+Er+MvzpBeIO13ec/4LBvgVCPIrzIPIh1xG4IBBmPfdJJ1LtefOoWfOoX+xmUzn30s+fIL9BsdfscfqW/EYJ7FPIJ3Cd5Z1oAYI7BOp9a/5zBOouc/2tve+j+tzJNBwkQPoJ5BB4Nz36TDEINCr55FWYJDDOuA9EIIp1FpV/KYJXBOYN7/7bBb4Olr2tvN758IsEAgRRBeYOtvGdjoVBDYJ5DAIL1HlOfI4J1HhFvOscpv51LA4dKz5zHAIVfxl+0tf2u6KIUChFhgEBeYVUzsfwleDILzDPYdS771BG4bvETIUAlMZjx1fjH/U4LlHHYbpFOYX+vhbBOohhBxme1ufym0JwMY8gDBiGjeIVUzn+xl/C4N8jwjBPYNrv4BBrX+Hocx753FjH7OrrpBAIMx35zPYIJzBNIOU7+lnznBxhvB37bBzn/O4O17lCgx1CwQDBmOE1uc1t/D4IVBAYKZEnwDBznfP4JBDgEEEYW1Or4DBUIJxHAoNKz5zBsc/AIN7J4O+0tc0tZ30c0tfLoX7ymV2u9ynX3v7xlyKYMhkrtCqW9/mc7GljmtvedjKVBeoL5BT4OtzozBV4JDBd4UpjMeO7Z1Cr5tDOYlfqW/GoJzDOoa/BJIOtvlz1+Myec+29/5/BiGgrcMhFgKIUAhFBAgUgBIYABrXtmOlD4L3C72MzW136DB0teHIK5BC4MY7J1ZOYIBBlOfcpoBBPIZ1Cn4BBxme1t+xmUM4Vgzn1qWqgEBMwUCiGDOogAEhFjgEjA4djlulrWlrdjleMumdi21zl8j9a/0AprnZOYVfmPfnU/cpZ1JHoOEr+Mz+ln+c+8pLoMCM4sQwRxHABMIsUQ0YFBrcMrXLBoeU6+c/1z7xDBdqpzDkJzB385/9Kv5zNBYVfOo+U7+1329/+13TpCgEY8kIsJzRAA8Y4aVE0drt2U7OMv47BJIJxTc4V/c4JzBc4IfBtefue/AYJrBOY0/BoJxCn4BCn2dj+U61zx+li7nXABsQ0UAgUhkGtvWlr+Erw9BKIJxPcos6j5zBc4JjBzn/aYJlEb4Vz77nDcoIBDWYOMvwbB0tblOFYobpbABMIoIFDd4KvBHYN7/xzJOItCn4BBOoNKv9a/9rv5rBzse2u+NIleNIILBzn+N4QBFz+U3+dju13lzyB3DOsYADjHEAYOMqudje13uU7xzFlN/OIp1FdINjn9bb4R3B0tf41e0s+0s/e4W/MoOlrj9BxmeAIILBym+CIIPBqWnYoViOs4ADiGDGIVA2vYKILnCn8575zHOonfOoJ3Dvf/c4LXBd4O17elm+tve13/Ov1zx+tvm17gzBPoL5BRYX5pVqO90gAQMhoeUyzJBxl/dIJpBOqdjr+En53CbYPf1ucnPlpVp2uYvfxGoN8iOEiOlrG1751BQ4OEmYPBjHEdtYACgR7BzsaHoN8jx1DPI51HO4dzK4J5Br+U32lr/GntKpI0FhFjAocpoBxB3v+3yZBp4LBiGDO1sIsIDBnPm0s6aYLrPOIIBDOobrBxmf0s90taxmUnPHMIWjiHDAocYAoKzBgGMune/9SxQPCwR3tU4eMu2U7xfBOo85I4O/sdftd/tefuffvkfym/2ueynfD4OtPIMXFwUBgEgWZsZgetu0hghztO498ipZBtd+oU+nUemPeAINa/1z718j2EnwBCrwBBO4Otz29/29/vGr1rt7lDHxyFKOt8poOMvmEn9jrzjCcIO/xl/wlfAIU/AIIJBAILpC7/Gn+ty9SxWEmNKtThCoJCQkCLQAEEIoQFDwlYxmfb4Njn98juEnuMvuMvOMzoFBzn9AIIHBAYOlnetzmdi9ClAwGOqIAzkICBpWLM4LRBb4N8j53CjmEnmErdz6uMzb/Bzsczn8xmcAYOc/G13eEiQrCgTbFOX7tHtdP0s9ym/wleO4dz397/4HBzn/xl/AI2fAIOdj4BB41fzsUFINa5U5855VjHDPOFiGoXgym7MYN8jx3BoVeoU+nUeAoNrv17/wPBwk+AIVeAIOMz2tz3Gnr1B408sctFoMQ0REQkLzzjHEAYNClOU3uEn9jr06j4BBoU/Aoda/9rv79BufffoIXBym/2veeYOln+13+U6qpCsa5RwlQRqTzhJIV7+pdBO4JzBAJJ5BrcfAINjRoNfvf/DYLzBAYOlrulrLxBkMEVYXDhFhfIWCAIMY8gHBuew73+pVJI4QTCAFcQ0YDBymXzjhBzx1Je4Z1DPYYBBe4OMv4BByne0tf41dqWqc5IADscN2vd41frcNQ4bvuoIDBV4Oc/N8j8xz5zHAorzBd4R/Dr+En+Er+Mz6bB1ucjHgkKlB6bfDrcMqXLynUOoOtv+1798iQPBjHEO9sAkYCBxlWZYOEn0Zj8pv51FPJb3Dvf/O4elr217eU2edjG+j/GntS1OtvW9/YRBzsfzn+HYOUy8585JCSQIApkACBmOD0taZYLTBkM/PIIDBmO/PY4HDqXfPIdzaIMf0s/51+1t91t+A4OU7+17mdjRxByneym+ym/AoI7B2u8pWHI4MQ0buriGCAoe13BHBOYIBDPYcpz85/59FAoNS353Btd/O4Odj2172Mv4BBwleAYOlroNBBYYBEzx7B0s80sXrcOJY51kUYVz6WMu7BBzn+kM+PIp7DPoVfPooBBpV/rX/vf/aoJrBwlfOoIDCn4BEA4IBEPIbxC31a5hJBjHEhFhO0lBgECAgOU7Gln+U72EOoZ5IPYp9DmO/PoU/eoNz757BAIIFBtefsdfsc/AINrv4NBQI1eH4W1nPlwkRKQZ5hhB1CiGgzn40s+xl+HoJPBjH7PJp9JlN/mPfe4J7Be4Nbj4BLGYN8j55DeYOc/u13u+j+c61ClD1C8cAkB1ZiGCAochkeMumdjmEr47BYoMIuB3RPpMpz73BoU/pWfPYLtDAIp5BGoJ5Hym/eoOtzVKpBeGPIJ7ToLrCgEx40x0oMDym3ynfufeIYKpCeKR7JAYL1DAINKv9S75xCPJtexme0q9BmZPDvfPjHggEBA4MIwcY8jdFcocY4kQ0gTCoc54uljGc/FCotjp2di2tvl7/53DhFOOap7JeoLzBPYdCr75HPI7xBIoN8iVrt2EqW+j2djBLBlNDOI5XCPo0584DBzn21t/zsdxl32vf1ta1ueHINS38AgglC7DxZeo1fOoR7EfIp5HxmfO4OU6u9/etv2dj+djd76GtvWEibRBvfwKYMZK4V8iGlm+Emec/TpBznXD4OMvwtBym/F4W+HIJLBgEBSQUEjMdPME/nP/FoIBDfIk/WIJ5Dwk+ynd0tf1udxmeKYXe0te0s/1uf41etdtKQMY8gDBrXs30eB4Oc/4hBOoOEn+EFoQDBBYKtBoTFCOoUDAQMIt5fEPLgBBmPfPIp7Lue/vkeKYRVDr+Mv5/BM4OUyp1FiGjAYOMumdjwTBwleNYIhBvf/FYIBBVYNKv47BYYJ3Cd4QlC2h3dPYsx355HPY1fqXftd/uffK4YBBO4JhB1t/1uYJoWkAYuEqh3BSIVeEIJvBUYIBBrX/OoY7BkNfO4jzEiHYPMcpz55JPYtKz5PBKoJ7Fxl+0s/1uapVneItrx+lm+djp3BcoJzDsc/UYKnBOoa9BI4J3GgMAgR5oWIh7LYYJXEPYTxB0s91t53v9znVOoVt3v+1t9zn+CoJzDAYKfBUoYvBnP/IYJHBO4wABO4R5nAYI7BPJ5ZDAILZBPIOU7zzB409uevzn21t+xmfdoNrDYVaF4StFAoJBFO5B5DeoJ5HPbg3BAIMx755RPYd7/xpBxmezn/3vd1t6ynfwlevjrBr9S77pFE4cpv51DL4J3KeY+1Loj1glOfJIh5Jz53DMoOEn7zBO4O17u9/u17yBBvf/OoYjHOohZEO5gABeIJ7ChFxjMeeschr85/5PFAophBeYZpBO4J1B0tdAoOlr2c/yJBOYp1GK4JTEbYJ3OAAcEAYUojH5eox7aPIL1DZo5ZDrX/O4Nz7+Mz+1zrpBvkfBINrv6VHUIKlBZog1BjkIpx1SPI71Djh7jAYMx357JeYJtB0s+c4IFBsdfdY4dBEIJzBFIYFBdIxhEACUCgEDAwYlBUYp5bPYr3BaIJ9DAYJ5Dc4L5BqW/BoYVBmOfEIoBBiHYgEHLohbEADAdFlEQ2kZjp5fLIZ9Ev7ZBQIKDDmPfA4cpr4XDDIU+iHWgFMdJY"))
  };

  g.drawImage(Image, 0,0, { scale:4 });

im Emulator ausführen auf Uhr ausführen

240x240

Rotation

Quelltext

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

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

  let HoursHandle = {
    width:60, height:6, bpp:1,
    buffer:require("heatshrink").decompress(atob("v//AAnvAwoAW+4GF/wA="))
  };
  g.drawImage(HoursHandle, CenterX,CenterY, {
    rotate:2*Math.PI * 50/60, centerx:3,centery:3
  });

  let MinutesHandle = {
    width:96, height:4, bpp:1,
    buffer:require("heatshrink").decompress(atob("v//ABH+BRIANEZY="))
  };
  g.drawImage(MinutesHandle, CenterX,CenterY, {
    rotate:2*Math.PI * 10/60, centerx:2,centery:2
  });

im Emulator ausführen auf Uhr ausführen

240x240

Hintergrund mit Muster füllen

In den hohen Auflösungen reicht der Hauptspeicher einer Bangle.js nicht aus, um ein komplettes Hintergrundbild zu laden und anzuzeigen.

Sofern der Hintergrund jedoch eine periodische Textur besitzt, ist es möglich ihn aus diesen kleineren Kacheln zu parkettieren.

Muster (vergrößert)

Converter-Einstellungen

Use Compression: yes
Diffusion:       flat
Brightness:      default
Colours:         16 bit RGB565
Output as:       Image Object (behält ursprgl. Bildgröße bei)

Converter-Ausgabe

var img = {
  width : 16, height : 16, bpp : 16,
  transparent : 0,
  buffer : require("heatshrink").decompress(atob("s2EAIsVooVTDpIBDDrohHDrIBDDrohRJ4IhbR4ohXZ5IhTd5ohRDpapVDpYhXdtohPDp7LNDqYhJDq4hFCo4"))
}

240x240

Quelltext

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

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

  let Pattern = {
    width:16, height:16, bpp:16, transparent:0,
    buffer:require("heatshrink").decompress(atob("s2EAIsVooVTDpIBDDrohHDrIBDDrohRJ4IhbR4ohXZ5IhTd5ohRDpapVDpYhXdtohPDp7LNDqYhJDq4hFCo4"))
  };

  let PatternWidth  = Pattern.width;
  let PatternHeight = Pattern.height;

  for (let x = 0; x < Width; x += PatternWidth) {
    for (let y = 0; y < Height; y += PatternHeight) {
      g.drawImage(Pattern, x,y);
    }
  }

im Emulator ausführen auf Uhr ausführen

Auf der Uhr des Autors dauert das Füllen des Bildschirmes mit dem gezeigten Muster ca. 874ms.

Rastergrafiken in voller Bildschirmauflösung

Der Bildschirm einer Bangle.js bietet im Prinzip 240x240 Pixel mit einer Farbauflösung von 16 Bit - da wäre es doch schade, wenn es nicht gelänge, diese Fähigkeit auch auszunutzen!

Die folgenden Abschnitte zeigen, wie man

eine Rastergrafik in dieser Auflösung auf eine Bangle.js überträgt und
diese Rastergrafik dort zur Anzeige bringt.

Auf der Uhr des Autors dauert das Zeichnen eines solchen Bildes etwa 2.2 Sekunden - das Ergebnis entschädigt aber für diesen (Zeit-)Aufwand!

Funktionsprinzip

Das zugrundeliegende Funktionsprinzip ist recht einfach:

zunächst wird (auf einem PC) eine vorhandene Bilddatei der Größe 240x240 oder 240x160 Pixel RGB565-farbkodiert, anschließend Zeile für Zeile mittels btoa in Text umgewandelt, an eine angeschlossene Uhr übertragen und dort in eine Datei geschrieben.
Auf der Uhr selbst wird die Datei nun zeilenweise gelesen sowie jede Zeile mittels atob wieder in Binärdaten konvertiert, daraus ein Image-Objekt erzeugt und dieses Image an passender Stelle auf den Bildschirm gezeichnet.

Diese umständliche Vorgehensweise ist erforderlich, weil

Storage.read entgegen der Dokumentation eben doch keine großen Dateien verkraftet,
segmentierte Dateien aber keine binären Daten vertragen (das Lesen der Datei würde nach dem ersten Byte mit dem Wert 0xFF abbrechen).

Rastergrafik auf Bangle.js übertragen

Die JavaScript-Anweisungen, mit denen eine große Bilddatei (in RGB565-Kodierung) von einem PC aus auf eine angeschlossene Uhr übertragen werden kann, lauten im Prinzip:

reset(); // important!

let File = require('Storage').open('FileName','w');
File.write('encoded pixel line\n');
repeat for all remaining pixel lines

Sofern Ihr gerade benutzter Browser Web-Bluetooth unterstützt, nimmt Ihnen das folgende Formular die mühevolle Prozedur der Bild-Übertragung ab: ziehen Sie einfach die gewünschte Grafikdatei (in den Größen 240x240 oder 240x160 Pixel) auf das dafür vorgesehene Feld - das Bild wird dann passend kodiert und auf eine angeschlossene Uhr übertragen.

Der Dateiname auf dem Dateisystem der Bangle.js wird aus den ersten 7 druckbaren ASCII-Zeichen des ursprünglichen Dateinamens gebildet - Steuerzeichen, Leerzeichen und Nicht-ASCII-Zeichen werden also ignoriert.

Die für die Übertragung erforderliche Bluetooth-Verbindung wird automatisch aufgebaut.

Drop your Image here
(it will be sliced and uploaded to Bangle.js automatically)

Status: choose the image to be sliced and uploaded

Rastergrafik auf Bangle.js anzeigen

Die soeben übertragene Bilddatei zur Anzeige zu bringen, ist erstaunlich einfach:

const Storage = require('Storage');

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

let ImageFile = Storage.open('image file name','r');
for (let y = 0; y < 240; y++) {
  let LineData = ImageFile.readLine();
  if (LineData == null) { break }

  g.drawImage({
    width:240, height:1, bpp:16, transparent:0,
    buffer:E.toArrayBuffer(atob(LineData))
  }, 0,y);
}
g.flip();

Beispiel

Als Beispielbild soll die auf 240x240 Pixel verkleinerte Version der häufig für solche Zwecke eingesetzten "Lena" dienen (einem Scan aus einer Ausgabe der Zeitschrift "Playboy", welcher ausnahmsweise frei verwendet werden darf)

Testbild

Download

Anzeige im Emulator (RGB565-kodiert)

240x240

(manchmal leicht grünstichig)