Using color palettes with 4-bit images

[Sofocletus]

First of, thank you for the work you've put into this, I've been learning to use your library for a coupe months jumping from vanilla Arduinos to the ESP32 environment.
I'm not a proficient programmer so I've had problems figuring out how to use 4-bit images, in particular what I would like to do is to have a color index (say, 16 colors) so that for example I can have an image for a button that can display a grayed out disabled state, a ready state and a pressed state without needing 3 separate image arrays. The way I see it I could have three arrays of 16 colors and in pseudo-code I'd say pushSprite(X, Y, firstColorArray) or pushSprite(X, Y, secondColorArray)
Is that possible, and how would I go about doing it?

By the way, in my research I came across this amazing demos showing what can be done by changing the color palette: http://www.effectgames.com/demos/canvascycle/?sound=0

[Bodmer]

This example can be used as a basis for your needs:
https://github.com/Bodmer/TFT_eSPI/blob/master/examples/Sprite/Sprite_image_4bit/Sprite_image_4bit.ino

[Bodmer]

The [] brackets syntax means that command is optional. So the following are valid commands to type in:

python bmp2array4bit.py star.bmp
python bmp2array4bit.py star.bmp -o myfile.c
python bmp2array4bit.py -v star.bmp -o myfile.c

[Sofocletus]

I see, I didn't have luck without those either, I don't know if this is important, but when running the script the suggested usage is different (output first, input last). Still didn't work though.

Python 3.6.8 (tags/v3.6.8:3c6b436a57, Dec 24 2018, 00:16:47) [MSC v.1916 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license()" for more information.

==================== RESTART: E:\script\bmp2array4bit.py ====================
usage: bmp2array4bit.py [-h] [-v] [-o OUTPUT] input
bmp2array4bit.py: error: the following arguments are required: input

bmp2array4bit.py Icon.bmp
SyntaxError: invalid syntax

For what is worth the script header has a different version "usage: python fourbitbmp2array.py [-v] star.bmp [-o myfile.c]".
The image I'm trying to convert is a 16 color 4-bit image but I didn't use GIMP to create it, I don't know if that could be the issue.
I'll get GIMP and try just in case.

[Sofocletus]

I managed to use the scrip by running it on my Linux laptop, it must be some configuration issue on my PC.
The good news is that the index color swapping I had in mind works great, the bad news is that the image appears skewed and off center.
This is the code I'm using for testing (the image is actually 31x31 pixels despite the name):

`#include <TFT_eSPI.h> // Graphics and font library for ILI9341 driver chip
#include <SPI.h>
#include "Icon_Tech_32x32.h"

TFT_eSPI tft = TFT_eSPI(); // Invoke library
TFT_eSprite iconTech = TFT_eSprite(&tft);

#define colBG 0x098A // Background color
#define WIDTH 31
#define HEIGHT 31

uint16_t paletteA[16] = { // Blue
0x098a, 0x09aa, 0x11cb, 0x32ad,
0x222c, 0x432f, 0x5bb1, 0x7453,
0x84b4, 0x9536, 0xadb8, 0xbe19,
0xce9b, 0xffff, 0xffdf, 0xe73d
};
uint16_t paletteB[16] = { // Red
0x9000, 0x0900, 0x9861, 0xA145,
0xB208, 0xBACB, 0xC34D, 0xCBCF,
0xCC51, 0xDD14, 0xE5B6, 0xEE59,
0xF6DB, 0xF75D, 0xFFFF, 0xFFDF
};

void setup() {
tft.init();
tft.setRotation(2);
tft.fillScreen(colBG);
iconTech.setColorDepth(4);
iconTech.createSprite(WIDTH, HEIGHT);
iconTech.setSwapBytes(true);
iconTech.pushImage(0, 0, 31, 31, (uint16_t *)Icon_Tech_32x32);
}

void loop() {
tft.fillScreen(colBG);
iconTech.createPalette(paletteA, 16);
iconTech.pushSprite(0, 0);
iconTech.createPalette(paletteB, 16);
iconTech.pushSprite(0, 40);
delay(5000);
}`

This is the image array:

static const uint8_t Icon_Tech_32x32[] PROGMEM = { 0x00, 0x00, 0x00, 0x00, 0x01, 0x41, 0x00, 0x00, 0x47, 0x31, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x8f, 0xe9, 0x00, 0x01, 0xcd, 0xdf, 0x82, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x6e, 0xdd, 0xde, 0x41, 0x15, 0xdd, 0xdd, 0xda, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xcd, 0xdd, 0xdd, 0xfc, 0xff, 0xdd, 0xdd, 0xda, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x9d, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xd6, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3d, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xd8, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0xbd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0x81, 0x58, 0x30, 0x00, 0x03, 0xb8, 0x3b, 0xdd, 0xdd, 0xdd, 0xfa, 0x9b, 0xfd, 0xdd, 0xdd, 0xdc, 0xdd, 0xc1, 0x00, 0x1a, 0xdd, 0xdd, 0xdd, 0xdd, 0xc6, 0x11, 0x11, 0x26, 0xfd, 0xdd, 0xdd, 0xdd, 0xd7, 0x00, 0x4e, 0xdd, 0xdd, 0xdd, 0xd9, 0x22, 0xfc, 0x61, 0x00, 0x2b, 0xdd, 0xdd, 0xdd, 0xdc, 0x10, 0x7d, 0xdd, 0xdd, 0xdd, 0xa1, 0x00, 0x5e, 0xd7, 0x00, 0x02, 0xfd, 0xdd, 0xdd, 0xdd, 0x40, 0xbd, 0xdd, 0xdd, 0xde, 0x41, 0x00, 0x17, 0xdf, 0x10, 0x00, 0x6d, 0xdd, 0xdd, 0xdc, 0x40, 0x6e, 0xdd, 0xdd, 0xda, 0x4c, 0x40, 0x15, 0xdd, 0x40, 0x00, 0x2f, 0xdd, 0xde, 0x72, 0x00, 0x12, 0x8d, 0xdd, 0xd7, 0x1f, 0xf3, 0x3b, 0xde, 0x20, 0x00, 0x1b, 0xdd, 0xdf, 0x10, 0x00, 0x00, 0x3d, 0xdd, 0xd5, 0x19, 0xdd, 0xdd, 0xdd, 0x71, 0x00, 0x19, 0xdd, 0xdf, 0x10, 0x00, 0x00, 0x3d, 0xdd, 0xd6, 0x12, 0xbd, 0xdd, 0xdd, 0xd8, 0x10, 0x1a, 0xdd, 0xdf, 0x20, 0x00, 0x01, 0x5d, 0xdd, 0xd9, 0x10, 0x13, 0x53, 0xcd, 0xdd, 0x81, 0x1c, 0xdd, 0xdd, 0xf9, 0x20, 0x2a, 0xdd, 0xdd, 0xdf, 0x20, 0x00, 0x00, 0x2b, 0xdd, 0xd9, 0x19, 0xdd, 0xdd, 0xdd, 0x80, 0x7d, 0xdd, 0xdd, 0xdd, 0x71, 0x00, 0x00, 0x02, 0xbd, 0xdd, 0x91, 0x9d, 0xdd, 0xdd, 0x60, 0x3d, 0xdd, 0xdd, 0xdd, 0xe5, 0x10, 0x00, 0x00, 0x1a, 0xdd, 0xd9, 0x18, 0xdd, 0xde, 0x20, 0x1f, 0xdd, 0xdd, 0xdd, 0xde, 0x72, 0x00, 0x00, 0x11, 0xad, 0xdd, 0x91, 0x8d, 0xda, 0x10, 0x07, 0xdd, 0xdd, 0xdd, 0xdd, 0xdf, 0x85, 0x57, 0xaa, 0x29, 0xdd, 0xd9, 0x17, 0xe3, 0x00, 0x01, 0xac, 0x85, 0xfd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xb2, 0x9d, 0xdd, 0xb2, 0x21, 0x00, 0x00, 0x01, 0x01, 0x3f, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdb, 0x28, 0xdd, 0xdf, 0xbb, 0x82, 0x00, 0x00, 0x00, 0x18, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xc2, 0x7d, 0xdd, 0xdd, 0xdc, 0x00, 0x00, 0x00, 0x1c, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdd, 0xdc, 0x48, 0xdd, 0xc9, 0xfe, 0x00, 0x00, 0x00, 0x1e, 0xdd, 0xdd, 0xe6, 0x53, 0xad, 0xdd, 0xde, 0x67, 0xde, 0x21, 0x4c, 0x00, 0x00, 0x00, 0x07, 0xfd, 0xdd, 0xb1, 0x00, 0x4e, 0xdd, 0xc3, 0x17, 0xdf, 0x10, 0x02, 0x00, 0x00, 0x00, 0x00, 0x26, 0xac, 0x30, 0x00, 0x05, 0x84, 0x10, 0x03, 0xed, 0x91, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x11, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x6e, 0xe6, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x76, 0x00};

It looks correct, you can almost see the gear and spanner icon in the array.

[Bodmer]

The array name suggests the image width and height is 32, so using 31 will cause a skew.

[Sofocletus]

I figured it out, the bitmap is 31 by 31 pixels, but (and I should had thought of it) since the array is 8bit values it can only contain an even number of nibbles. It seems the script solves this by chopping off the last nibble, so the array ends up containing 30x31 pixels.
With #define WIDTH 30 #define HEIGHT 31 it works perfectly.
So issue solved, thank you very much for you assistance.
The take away is that the width of 4-bit sprite must be a multiple of 2.