• I have had this exact problem on imageclock while working with 4 bit. Copying over my solution from there yields the correct result, but it seems a bit complicated. It essentially uses a palette to force the colors to be correct. I suspect there is an easier way.

        let colormap={
          "#000":0,
          "#00f":1,
          "#0f0":2,
          "#0ff":3,
          "#f00":4,
          "#f0f":5,
          "#ff0":6,
          "#fff":7
        };
    
        let palette = new Uint16Array([
          0x0000, //black #000
          0x001f, //blue [#00f](https://forum.espruino.com/search­/?q=%2300f)
          0x07e0, //green [#0f0](https://forum.espruino.com/search­/?q=%230f0)
          0x07ff, //cyan [#0ff](https://forum.espruino.com/search­/?q=%230ff)
          0xf800, //red [#f00](https://forum.espruino.com/search­/?q=%23f00)
          0xf81f, //magenta [#f0f](https://forum.espruino.com/search­/?q=%23f0f)
          0xffe0, //yellow [#ff0](https://forum.espruino.com/search­/?q=%23ff0)
          0xffff, //white [#fff](https://forum.espruino.com/search­/?q=%23fff)
          0xffff, //white
          0xffff, //white
          0xffff, //white
          0xffff, //white
          0xffff, //white
          0xffff, //white
          0xffff, //white
          0xffff, //white
        ]);
    
        let g2 = Graphics.createArrayBuffer(g.getWidth() * 2, g.getHeight(), 4, {msb:true});
        let g2img = { width:g2.getWidth(), height:g2.getHeight(), bpp:4, buffer:g2.buffer, palette: palette };
        let R = Bangle.appRect;
        let x = R.w / 2;
        let y = R.y + R.h / 2;
        let animInterval;
        let animate = function(step) {
          if (animInterval) clearInterval(animInterval);
          slideX = -g2.getWidth()/2;
          animInterval = setInterval(function() {
            slideX += step;
            let stop = false;
            if (slideX>=0) {
              slideX=0;
              stop = true;
            }
            g.drawImage(g2img, slideX, 0);
            if (stop) {
              clearInterval(animInterval);
              animInterval=undefined;
            }
          }, 50);
        };
        g.reset().setBgColor("#0f0").clearRect(R­); // clear whole background
        g.setFontAlign(0, 0).setFont("Vector:30").drawString("WIBB­LE", g.getWidth()/2, g.getHeight()/2);
        let screengrab = g.asImage();
        // Draw to offscreen buffer
        g2.setColor(colormap["#f00"]).fillRect(0­,0,g2.getWidth(),g2.getHeight());
        g2.setColor(colormap["#fff"]).setFontAli­gn(0, 0).setFont("Vector:30").drawString("FLIB­BLE", g2.getWidth()/4, g2.getHeight()/2);
        g2.drawImage(screengrab, g2.getWidth()/2, 0);
        animate(3);
    

    Edit: The forum search links in the comments are somehow autogenerated from the #colorvalues

About

Avatar for halemmerich @halemmerich started