#95 palette based images on TFT_eSPI

Author: davetcc

examples/esp/esp32Amplifier/app_icondata.h

@@ -2,6 +2,10 @@
 #define TCMENU_ESPAMPLIFIER_ICONDATA_H
 
 #include <Arduino.h>
+// To use palette and size constants we need to use tcgfx types
+#include <graphics/DrawingPrimitives.h>
+
+using namespace tcgfx;
 
 #define APPICONS_WIDTH 40
 #define APPICONS_HEIGHT 40
@@ -25,6 +29,46 @@ static unsigned char statusIcon40Bits[] PROGMEM = {
         0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
         0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 };
 
+// PALETTE_4BPP width=31, height=40, size=640
+// auto size = Coord(31, 40);
+const color_t statusBitmap_palette0[] PROGMEM { RGB(48,48,218), RGB(26,107,176), RGB(14,55,120), RGB(62,70,89), RGB(158,151,110), RGB(32,34,101), RGB(217,190,50), RGB(161,85,76), RGB(229,164,27), RGB(10,41,124), RGB(135,37,108), RGB(250,91,21), RGB(133,191,216), RGB(38,184,248), RGB(233,30,101), RGB(50,204,103) };
+const uint8_t statusBitmap0[] PROGMEM = {
+        0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+        0x00,0x00,0x01,0x22,0x20,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x23,0x44,
+        0x55,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x02,0x34,0x66,0x63,0x20,0x00,0x00,
+        0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x03,0x46,0x47,0x86,0x59,0x00,0x00,0x00,0x00,0x00,0x00,
+        0x00,0x00,0x00,0x00,0x00,0x03,0x66,0x55,0x78,0xa1,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x11,0x11,0x11,
+        0x11,0x13,0x68,0x33,0x88,0x72,0x11,0x11,0x11,0x19,0x00,0x00,0x09,0x55,0x55,0x55,0x55,0x54,0x68,0x88,
+        0x8b,0x75,0x55,0x55,0x55,0x99,0x50,0x00,0x09,0xcc,0x35,0x11,0x11,0x56,0x88,0x88,0xbb,0xb3,0x21,0x11,
+        0x35,0xc7,0x50,0x00,0x09,0xcc,0x5c,0xcc,0xcc,0x57,0x77,0x77,0x77,0x75,0xcc,0xcc,0xc1,0x3b,0x90,0x00,
+        0x09,0xcc,0x5c,0xdd,0xdd,0x12,0x22,0x22,0x22,0x22,0xdd,0xdd,0xd1,0x5b,0x90,0x00,0x09,0xcc,0x2c,0xdd,
+        0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0xd1,0x5b,0x90,0x00,0x09,0xcc,0x5c,0xdd,0x11,0x11,0x11,0x11,
+        0x11,0xdd,0x11,0x1d,0xd1,0x3b,0x90,0x00,0x09,0xcc,0x2c,0xd3,0x33,0x33,0x33,0x33,0x33,0x25,0x3a,0x51,
+        0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0xd3,0x88,0x88,0x88,0x88,0x84,0x5a,0xee,0xa2,0xd1,0x3e,0x90,0x00,
+        0x09,0xcc,0x2c,0xd1,0x22,0x22,0x22,0x22,0x22,0x12,0x22,0x21,0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0xdd,
+        0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0x11,0xdd,0xd1,0x5e,0x90,0x00,0x09,0xcc,0x2c,0xdd,0xd1,0x11,0xdd,0xdd,
+        0xdd,0xdd,0xdd,0xdd,0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0xdd,0x13,0x33,0x2d,0xdd,0xd1,0x22,0x1d,0xdd,
+        0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0xd1,0x36,0x66,0x32,0xdd,0xd2,0x46,0x2d,0xdd,0xd1,0x3e,0x90,0x00,
+        0x09,0xcc,0x2c,0xd1,0x46,0xff,0xf3,0x1d,0x13,0x66,0xf1,0xdd,0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0xd9,
+        0x64,0xff,0xff,0x51,0x24,0x6f,0xf3,0x1d,0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0xd5,0x4f,0xff,0xff,0x45,
+        0x34,0xff,0xff,0x5d,0xd1,0x3e,0x90,0x00,0x09,0xcc,0x2c,0x2f,0xff,0xff,0xff,0xf2,0xff,0xff,0xff,0x11,
+        0xd1,0x5e,0x90,0x00,0x09,0xcc,0x2c,0x1d,0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0xd1,0xd1,0x5e,0x90,0x00,
+        0x09,0xcc,0x2c,0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0xdd,0x11,0xdd,0xd1,0x5e,0x90,0x00,0x09,0xcc,0x9c,0xdd,
+        0xdd,0xdd,0xdd,0xdd,0xdd,0xd2,0xcc,0x51,0xd1,0x5e,0x90,0x00,0x09,0xcc,0x9c,0xd1,0x22,0x22,0x22,0x22,
+        0x22,0x11,0xcc,0x11,0xd1,0x3e,0x90,0x00,0x09,0x1c,0x2c,0xd3,0x66,0x66,0x66,0x66,0x64,0x21,0xdd,0x1d,
+        0xd1,0x3e,0x90,0x00,0x09,0x11,0x2c,0xd3,0x77,0x77,0x77,0x77,0x77,0x22,0x11,0x11,0xd1,0x3e,0x90,0x00,
+        0x09,0x1d,0x2c,0xda,0xaa,0xaa,0xaa,0xaa,0xaa,0xaa,0xaa,0xa2,0xd1,0x3e,0x90,0x00,0x09,0x1d,0x2d,0xda,
+        0xee,0xee,0xee,0xee,0xee,0xee,0xee,0xe2,0xd1,0x3e,0x90,0x00,0x09,0x1d,0x5d,0xd1,0x99,0x99,0x99,0x99,
+        0x99,0x99,0x99,0x91,0xd2,0x3e,0x90,0x00,0x09,0x1d,0x21,0x11,0x19,0x29,0x99,0x99,0x99,0x99,0x99,0x91,
+        0x15,0xae,0x90,0x00,0x09,0x21,0x25,0x22,0x59,0x99,0x99,0x99,0x99,0x99,0x99,0x95,0x55,0xaa,0x50,0x00,
+        0x09,0x55,0x55,0x55,0x59,0x99,0x99,0x55,0x59,0x99,0x95,0x55,0x55,0x55,0x90,0x00,0x00,0x00,0x00,0x09,
+        0x25,0x55,0x55,0x05,0x59,0x99,0x55,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x25,0x55,0x55,0x00,
+        0x55,0x55,0x52,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x02,0x22,0x22,0x00,0x99,0x99,0x99,0x00,
+        0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
+
+};
+
+
 static unsigned char settingsIcon40Bits[] = {
         0x00, 0x00, 0x00, 0x07, 0x00, 0x00, 0xf8, 0x80, 0x1f, 0x00, 0x00, 0xfc,
         0xc1, 0x3f, 0x00, 0x00, 0xfe, 0xc1, 0x3f, 0x00, 0x00, 0xfe, 0xc3, 0x3f,

examples/esp/esp32Amplifier/esp32Amplifier.emf

@@ -685,7 +685,8 @@
       "menuDefinitions": []
     },
     "packageNamespace": "",
-    "appIsModular": false
+    "appIsModular": false,
+    "listOfEmbeddedForms": []
   },
   "stringLists": []
 }

examples/esp/esp32Amplifier/esp32Amplifier.ino

@@ -23,6 +23,7 @@
 #include "app_icondata.h"
 #include "TestingDialogController.h"
 #include <extras/DrawableTouchCalibrator.h>
+#include <graphics/TcThemeBuilder.h>
 
 #define MENU_USING_CALIBRATION_MGR true
 
@@ -81,29 +82,41 @@ void setup() {
 #else
     touchScreen.calibrateMinMaxValues(0.250F, 0.890F, 0.09F, 0.88F);
 #endif // TC_TFT_ESPI_NEEDS_TOUCH
-    // first we get the graphics factory
-    auto & factory = renderer.getGraphicsPropertiesFactory();
-
-    // now we add the icons that we want to use with certain menu items
+    /**
+     * Here we use the theme builder to modify the drawing of certain menu items, we want three of the main menu
+     * items to render using icons, we therefore request a "menuItemOverride" from the theme and then we simply
+     * say the item will render as an image.
+     */
+    TcThemeBuilder themeBuilder(renderer);
     const Coord iconSize(APPICONS_WIDTH, APPICONS_HEIGHT);
-    factory.addImageToCache(DrawableIcon(menuSettings.getId(), iconSize, DrawableIcon::ICON_XBITMAP, settingsIcon40Bits));
-    factory.addImageToCache(DrawableIcon(menuStatus.getId(), iconSize, DrawableIcon::ICON_XBITMAP, statusIcon40Bits));
-    factory.addImageToCache(DrawableIcon(menuMute.getId(), iconSize, DrawableIcon::ICON_XBITMAP, muteOffIcon40Bits, muteOnIcon40Bits));
-
-    // and now we define that row 3 of the main menu will have three columns, drawn as icons
-    factory.addGridPosition(&menuSettings, GridPosition(GridPosition::DRAW_AS_ICON_ONLY,
-                                                        GridPosition::JUSTIFY_CENTER_NO_VALUE, 3, 1, 4, 49));
-    factory.addGridPosition(&menuStatus, GridPosition(GridPosition::DRAW_AS_ICON_ONLY,
-                                                      GridPosition::JUSTIFY_CENTER_NO_VALUE, 3, 2, 4, 49));
-    factory.addGridPosition(&menuMute, GridPosition(GridPosition::DRAW_AS_ICON_ONLY,
-                                                    GridPosition::JUSTIFY_CENTER_NO_VALUE, 3, 3, 4, 49));
-
-    // here is how we completely redefine the drawing of a specific item, you can also define for submenu or default
+    themeBuilder.menuItemOverride(menuSettings)
+        .withImage4bpp(Coord(31, 40), statusBitmap_palette0, statusBitmap0)
+        .onRow(3).multiCol(1, 3)
+        .apply();
+    //themeBuilder.menuItemOverride(menuSettings)
+    //    .withImageXbmp(iconSize, settingsIcon40Bits)
+    //    .onRow(3).multiCol(1, 3)
+    //    .apply();
+    themeBuilder.menuItemOverride(menuStatus)
+        .withImageXbmp(iconSize, statusIcon40Bits)
+        .onRow(3).multiCol(2, 3)
+        .apply();
+    themeBuilder.menuItemOverride(menuMute)
+        .withImageXbmp(iconSize, muteOffIcon40Bits, muteOnIcon40Bits)
+        .onRow(3).multiCol(3, 3)
+        .apply();
+
+    /**
+     * here is how we override drawing for items only when a submenu is active, you can also define at the item level.
+     */
     color_t specialPalette[] { RGB(255, 255, 255), RGB(255, 0, 0), RGB(0, 0, 0), RGB(0, 0, 255) };
-    factory.setDrawingPropertiesAllInSub(ItemDisplayProperties::COMPTYPE_TITLE, menuStatus.getId(), specialPalette,
-                                        MenuPadding(4), nullptr, 4, 10, 36,
-                                        GridPosition::JUSTIFY_CENTER_WITH_VALUE , MenuBorder(2));
-    tcgfx::ConfigurableItemDisplayPropertiesFactory::refreshCache();
+    themeBuilder.submenuPropertiesTitleOverride(menuStatus)
+        .withPalette(specialPalette)
+        .withPadding(MenuPadding(4))
+        .withBorder(MenuBorder(2))
+        .apply();
+
+    themeBuilder.apply();
 
     setTitlePressedCallback([](int) {
         BaseDialog* dlg = MenuRenderer::getInstance()->getDialog();

examples/esp/esp32Amplifier/esp32Amplifier_menu.cpp

@@ -105,7 +105,7 @@ void setupMenu() {
     menuConnectivityAuthenticator.setLocalOnly(true);
     menuConnectivityIoTMonitor.setLocalOnly(true);
 
-    // Code generated by plugins.
+    // Code generated by plugins and new operators.
     tft.begin();
     tft.setRotation(1);
     renderer.setUpdatesPerSecond(10);

examples/esp/esp32Amplifier/tcMenuTfteSpi.cpp

@@ -42,12 +42,13 @@ void TfteSpiDrawable::internalDrawText(const Coord &where, const void *font, int
 void TfteSpiDrawable::drawBitmap(const Coord &where, const DrawableIcon *icon, bool selected) {
     if(icon->getIconType() == DrawableIcon::ICON_XBITMAP) {
         tft->drawXBitmap(where.x, where.y, icon->getIcon(selected), icon->getDimensions().x, icon->getDimensions().y, drawColor, backgroundColor);
-    }
-    else if(icon->getIconType() == DrawableIcon::ICON_MONO) {
+    } else if(icon->getIconType() == DrawableIcon::ICON_MONO) {
         tft->drawBitmap(where.x, where.y, icon->getIcon(selected), icon->getDimensions().x, icon->getDimensions().y, drawColor, backgroundColor);
-    }
-    else if(icon->getIconType() == DrawableIcon::ICON_NATIVE) {
+    } else if(icon->getIconType() == DrawableIcon::ICON_NATIVE) {
         tft->pushImage(where.x, where.y, icon->getDimensions().x, icon->getDimensions().y, (const uint16_t*)icon->getIcon(selected));
+    } else if(icon->getPalette() != nullptr) {
+        auto bpp = icon->getIconType() == tcgfx::DrawableIcon::ICON_PALLETE_2BPP ? 2 : 4;
+        drawBitmapNbpp(where, icon->getIcon(selected), icon->getDimensions(), bpp, icon->getPalette());
     }
 }
 
@@ -167,6 +168,77 @@ void TftSpriteAndConfig::transaction(bool isStarting, bool redrawNeeded) {
     }
 }
 
+void TftSpriteAndConfig::drawBitmapNbpp(const Coord& where, const uint8_t* data, const Coord& size, int bpp, const uint16_t* palette) {
+    auto yTot = int16_t(where.y + size.y);
+    auto xTot = int16_t(where.x + size.x);
+    int bitsInByte = bpp == 2 ? 4 : 2;
+    uint8_t downShift = bpp == 2 ? 6 : 4;
+
+    uint8_t byteIteration = bitsInByte;
+    uint8_t current;
+    for(int16_t y = where.y; y<yTot; y++) {
+        for(int16_t x = where.x; x<xTot; x++) {
+            if(byteIteration == bitsInByte) {
+                current = pgm_read_byte(data);
+                data += 1;
+                byteIteration = 0;
+            }
+            uint8_t idx = current >> downShift;
+            current = current << bitsInByte;
+            byteIteration++;
+            sprite.drawPixel(x, y, idx);
+        }
+        byteIteration = bitsInByte; // always need a new byte in this case
+    }
+}
+
+#ifndef COOKIE_CUT_MEMBUFFER_SIZE
+#define COOKIE_CUT_MEMBUFFER_SIZE 32
+#endif
+uint16_t memBuffer[COOKIE_CUT_MEMBUFFER_SIZE];
+
+void TfteSpiDrawable::drawBitmapNbpp(const Coord& where, const uint8_t* data, const Coord& size, int bpp, const color_t* palette) {
+    auto yTot = int16_t(where.y + size.y);
+    auto xTot = int16_t(where.x + size.x);
+    int bitsInByte = bpp == 2 ? 4 : 2;
+    uint8_t downShift = bpp == 2 ? 6 : 4;
+
+    uint16_t next = 0;
+    uint8_t byteIteration = bitsInByte;
+    uint8_t current;
+
+    tft->startWrite();
+
+    for(int16_t y = where.y; y<yTot; y++) {
+        tft->setAddrWindow(where.x, y, size.x, 1);
+        for(int16_t x = where.x; x<xTot; x++) {
+            if(byteIteration == bitsInByte) {
+                current = pgm_read_byte(data);
+                data += 1;
+                byteIteration = 0;
+            }
+            uint8_t idx = current >> downShift;
+            current = current << bpp;
+            byteIteration++;
+
+            memBuffer[next] = palette[idx];
+            next = next + 1;
+            if(next == COOKIE_CUT_MEMBUFFER_SIZE) {
+                tft->pushColors(memBuffer, next);
+                next = 0;
+            }
+        }
+        if(next != 0) {
+            tft->pushColors(memBuffer, next);
+            next = 0;
+        }
+        byteIteration = bitsInByte; // always need a new byte in this case
+    }
+
+    tft->endWrite();
+}
+
+
 #if TC_TFT_ESPI_NEEDS_TOUCH == true
 
 TouchState TftSpiTouchInterrogator::internalProcessTouch(float *ptrX, float *ptrY, const TouchOrientationSettings& rotation, const iotouch::CalibrationHandler& calib) {

examples/esp/esp32Amplifier/tcMenuTfteSpi.h

@@ -41,6 +41,8 @@ class TfteSpiDrawable : public DeviceDrawable {
 
     void drawXBitmap(const Coord &where, const Coord &size, const uint8_t *data) override;
 
+    virtual void drawBitmapNbpp(const Coord& where, const uint8_t* data, const Coord& size, int bpp, const color_t* palette);
+
     void drawBox(const Coord &where, const Coord &size, bool filled) override;
 
     void drawCircle(const Coord &where, int radius, bool filled) override;
@@ -75,6 +77,8 @@ class TftSpriteAndConfig : public TfteSpiDrawable {
     DeviceDrawable *getSubDeviceFor(const Coord &where, const Coord& size, const color_t *palette, int paletteSize) override { return nullptr; }
     void transaction(bool isStarting, bool redrawNeeded) override;
     color_t getUnderlyingColor(color_t col) override;
+    void drawBitmapNbpp(const Coord& where, const uint8_t* data, const Coord& size, int bpp, const color_t* palette) override;
+    TFT_eSprite& getTftSprite() { return sprite; }
 };
 
 #define TC_TFT_ESPI_NEEDS_TOUCH false

src/graphics/TcThemeBuilder.h

@@ -18,7 +18,6 @@
 
 namespace tcgfx {
     class TcThemeBuilder;
-    typedef void (*RowBuilderCallback)(TcThemeBuilder& themeBuilder);
 
     /**
      * Represents a set of theme properties that can be applied at any level, if at the item level, this class can also
@@ -304,8 +303,6 @@ namespace tcgfx {
          */
         explicit TcThemeBuilder(GraphicsDeviceRenderer& renderer) : renderer(renderer), factory(renderer.getGraphicsPropertiesFactory()),
                                                                     propertiesBuilder(this) {
-            auto *drawable = renderer.getDeviceDrawable();
-            renderer.setDisplayDimensions(drawable->getDisplayDimensions().x, drawable->getDisplayDimensions().y);
         }
 
         /**
@@ -493,17 +490,6 @@ namespace tcgfx {
          */
         TcThemeBuilder& withPalette(const color_t* cols);
 
-        /**
-         * With this option you conifugre the row and column count once and then within the provided closure you
-         * only need to provide the column for each item override. Instead of this you can also use the
-         * `onRow(row).onCol(col, colCount)` way of configuring instead. Either option is equal in end state.
-         * @param row the row on which the items will appear
-         * @param colCount the number of columns on that row
-         * @param callback a callback that will call `menuItemOverride` colCount times for each column
-         * @return reference to itself for chaining
-         */
-        TcThemeBuilder& defineRowWithCols(int row, int colCount, RowBuilderCallback callback);
-
         /**
          * Set up the core rendering settings, that is the way the title should be drawn, and also if analog sliders
          * should be used to represent analog items.