Bangle.js2: Much faster rendering of overlays

Author: gfwilliams

ChangeLog

@@ -15,6 +15,7 @@
             Swap to using locks for watch&timer arrays (uses 4b more RAM, but faster and no defrag issues)
             Bangle.js2: Remove buzz when going back in a menu using the button (not the widget)
             Bangle.js2: Ensure overlays don't use the current Graphics colors
+            Bangle.js2: Much faster rendering of overlays
 
      2v28 : Add `E.internal` as a way to access the 'hidden root' containing Espruino internal variables that previously needed `global["\xff"]`
             Bangle.js: Fix back handler not removed when using E.setUI with a back button but without widgets (#2636)

libs/graphics/jswrap_graphics.c

@@ -405,6 +405,30 @@ NO_INLINE void _jswrap_drawImageLayerNextY(GfxDrawImageLayer *l) {
   }
 }
 
+// Called by _jswrap_drawImageSimple to blit out a row
+NO_INLINE void _jswrap_drawImageSimpleRow(JsGraphics *gfx, int xPos, int y, GfxDrawImageInfo *img, JsvStringIterator *it, JsGraphicsSetPixelFn setPixel, int *_bits, uint32_t *_colData) {
+  int bits = *_bits;
+  uint32_t colData = *_colData;
+  for (int x=xPos;x<xPos+img->width;x++) {
+    // Get the data we need...
+    while (bits < img->bpp) {
+      colData = (colData<<8) | ((unsigned char)jsvStringIteratorGetUTF8CharAndNext(it));
+      bits += 8;
+    }
+    // extract just the bits we want
+    unsigned int col = (colData>>(bits-img->bpp))&img->bitMask;
+    bits -= img->bpp;
+    // Try and write pixel!
+    if (img->transparentCol!=col) {
+      if (img->palettePtr) col = img->palettePtr[col&img->paletteMask];
+      setPixel(gfx, x, y, col);
+    }
+  }
+  *_bits = bits;
+  *_colData = colData;
+}
+
+
 /* Draw an image 1:1 at xPos,yPos. If parseFullImage=true we ensure
 we leave the StringIterator pointing right at the end of the image. If not
 we can optimise if the image is clipped/offscreen. */
@@ -438,21 +462,7 @@ NO_INLINE void _jswrap_drawImageSimple(JsGraphics *gfx, int xPos, int yPos, GfxD
 #endif
   JsGraphicsSetPixelFn setPixel = graphicsGetSetPixelUnclippedFn(gfx, xPos, y1, xPos+img->width-1, y2, true);
   for (int y=y1;y<=y2;y++) {
-    for (int x=xPos;x<xPos+img->width;x++) {
-      // Get the data we need...
-      while (bits < img->bpp) {
-        colData = (colData<<8) | ((unsigned char)jsvStringIteratorGetUTF8CharAndNext(it));
-        bits += 8;
-      }
-      // extract just the bits we want
-      unsigned int col = (colData>>(bits-img->bpp))&img->bitMask;
-      bits -= img->bpp;
-      // Try and write pixel!
-      if (img->transparentCol!=col) {
-        if (img->palettePtr) col = img->palettePtr[col&img->paletteMask];
-        setPixel(gfx, x, y, col);
-      }
-    }
+    _jswrap_drawImageSimpleRow(gfx, xPos, y, img, it, setPixel, &bits, &colData);
   }
 #ifndef SAVE_ON_FLASH
   if (parseFullImage) {

libs/graphics/jswrap_graphics.h

@@ -153,4 +153,6 @@ void _jswrap_drawImageLayerStartX(GfxDrawImageLayer *l);
 void _jswrap_drawImageLayerNextX(GfxDrawImageLayer *l);
 void _jswrap_drawImageLayerNextXRepeat(GfxDrawImageLayer *l);
 void _jswrap_drawImageLayerNextY(GfxDrawImageLayer *l);
+// Called by _jswrap_drawImageSimple to blit out a row
+void _jswrap_drawImageSimpleRow(JsGraphics *gfx, int xPos, int y, GfxDrawImageInfo *img, JsvStringIterator *it, JsGraphicsSetPixelFn setPixel, int *_bits, uint32_t *_colData);
 void _jswrap_drawImageSimple(JsGraphics *gfx, int xPos, int yPos, GfxDrawImageInfo *img, JsvStringIterator *it, bool parseFullImage);

libs/graphics/lcd_memlcd.c

@@ -277,6 +277,10 @@ void lcdMemLCD_flip_spi_callback() {
   jshPinSetValue(LCD_SPI_CS, 0);
   lcdIsBusy = false;
 }
+// Mirror X - use when doing overlays when screen is rotated 180
+static void _lcdMemLCD_setPixel_mirrored(JsGraphics *gfx, int x, int y, unsigned int col) {
+  lcdMemLCD_setPixel(gfx, (LCD_WIDTH-1)-x, y, col);
+}
 // send the data to the screen
 void lcdMemLCD_flip(JsGraphics *gfx) {
   if (gfx->data.modMinY > gfx->data.modMaxY) return; // nothing to do!
@@ -320,44 +324,38 @@ void lcdMemLCD_flip(JsGraphics *gfx) {
     // Take account of rotation - only check for a full 180 rotation - doing 90 is too hard
     bool isRotated180 = (graphicsInternal.data.flags & (JSGRAPHICSFLAGS_SWAP_XY | JSGRAPHICSFLAGS_INVERT_X | JSGRAPHICSFLAGS_INVERT_Y)) ==
                       (JSGRAPHICSFLAGS_INVERT_X | JSGRAPHICSFLAGS_INVERT_Y);
-    int ovY = isRotated180 ? (LCD_HEIGHT-(lcdOverlayY+overlayImg.height)) : lcdOverlayY;
-    // initialise image layer
-    GfxDrawImageLayer l;
-    l.x1 = 0;
-    l.y1 = ovY * 256;
-    l.img = overlayImg;
-    l.rotate = isRotated180 ? 3.141592 : 0;
-    l.scale = 1;
-    l.center = false;
-    l.repeat = false;
-    jsvStringIteratorNew(&l.it, l.img.buffer, (size_t)l.img.bitmapOffset);
-    _jswrap_drawImageLayerInit(&l);
-    _jswrap_drawImageLayerSetStart(&l, 0, y1);
-    for (int y=y1;y<=y2;y++) {
+    int ovY = lcdOverlayY;
+    int yd = 1;
+    JsGraphicsSetPixelFn setPixel = lcdMemLCD_setPixel;
+    int bits = (ovY<y1) ? (ovY-y1)*overlayImg.bpp*overlayImg.width : 0;
+    uint32_t colData;
+    if (isRotated180) {
+      yd = -1;
+      int y = y1;
+      y1 = y2;
+      y2 = y-1;
+      ovY = LCD_HEIGHT-(lcdOverlayY+overlayImg.height);
+      setPixel = _lcdMemLCD_setPixel_mirrored;
+    } else y2++;
+    JsvStringIterator it;
+    jsvStringIteratorNew(&it, overlayImg.buffer, (size_t)overlayImg.bitmapOffset);
+    for (int y=y1;y!=y2;y+=yd) {
       int bufferLine = LCD_HEIGHT + (y&1); // alternate lines so we still get dither AND we can send while calculating next line
       unsigned char *buf = &lcdBuffer[LCD_STRIDE*bufferLine]; // point to line right on the end of gfx
       // copy original line in
       memcpy(buf, &lcdBuffer[LCD_STRIDE*y], LCD_STRIDE);
       // overwrite areas with overlay image
       if (y>=ovY && y<ovY+overlayImg.height) {
-        _jswrap_drawImageLayerStartX(&l);
-        for (int x=0;x<overlayImg.width;x++) {
-          uint32_t c;
-          int ox = x+lcdOverlayX;
-          if (_jswrap_drawImageLayerGetPixel(&l, &c) && (ox < LCD_WIDTH) && (ox >= 0))
-            lcdMemLCD_setPixel(NULL, ox, bufferLine, c);
-          _jswrap_drawImageLayerNextX(&l);
-        }
+        _jswrap_drawImageSimpleRow(gfx, lcdOverlayX, bufferLine, &overlayImg, &it, lcdMemLCD_setPixel, &bits, &colData);
       }
-      _jswrap_drawImageLayerNextY(&l);
       // send the line
 #ifdef EMULATED
       memcpy(&fakeLCDBuffer[LCD_STRIDE*y], buf, LCD_STRIDE);
 #else
       jshSPISendMany(LCD_SPI, buf, NULL, LCD_STRIDE, lcdMemLCD_flip_spi_ovr_callback);
 #endif
     }
-    jsvStringIteratorFree(&l.it);
+    jsvStringIteratorFree(&it);
     _jswrap_graphics_freeImageInfo(&overlayImg);
     // and 2 final bytes to finish the transfer
 #ifndef EMULATED