double the display-size of a BMP (8-bit color)

[sn00zerman]

Hello,

I'm using TFT_ESPI with a parallel display with SSD1963 controller, via an ESP32.
Everything works, but I'm looking for a way to "enlarge" images.
For example, if I have a BMP that is originally 60x20 pixels, I want it to be displayed as a 120x40 pixels image.
(so actually, "simply" doubling the pixels)

Can this be done in an easy way ?
Any thoughts/help on this ?

Thank you,
best regards,
Kris

[sn00zerman]

Found the answer myself :-)

old code:
//====================================================================================
// Draw an 8 bit BMP with colour table (palette)
//====================================================================================
void drawSdBmp8(const char filename, int16_t x, int16_t y) {
if ((x >= tft.width()) || (y >= tft.height())) return;
fs::File bmpFS;
// Open requested file
bmpFS = SD.open( filename);
uint32_t seekOffset, dib_size;
uint16_t w, h, row, col, num_colors;
uint8_t r, g, b;
if (read16(bmpFS) == 0x4D42) // Check it is a valid bitmap header
{
read32(bmpFS);
read32(bmpFS);
seekOffset = read32(bmpFS); // Pointer to image start
dib_size = read32(bmpFS); // DIB header size, typically 40 bytes
w = read32(bmpFS); // Get width and height of image
h = read32(bmpFS);
// Check it is 1 plane and 8 bits per pixel and no compression
if ((read16(bmpFS) == 1) && (read16(bmpFS) == 8) && (read32(bmpFS) == 0))
{
read32(bmpFS); // Throw away image size
read32(bmpFS); // Throw away x pixels per meter
read32(bmpFS); // Throw away y pixels per meter
num_colors = read32(bmpFS); // Number of colours in colour table (usually 256)
uint16_t pixel_color[num_colors]; // Lookup table for pixel colour
bmpFS.seek(14 + dib_size); // Seek to start of colour table
// Capture the colour lookup table
for (uint16_t i = 0; i < num_colors; i++)
{
uint32_t argb = read32(bmpFS); // Assume 4 byte, RGB colours in LS 3 bytes
r = (uint8_t) (argb >> 16);
g = (uint8_t) (argb >> 8);
b = (uint8_t) (argb >> 0);
col = tft.color565( r, g, b );
pixel_color[i] = col >> 8 | col << 8;
}
bmpFS.seek(seekOffset); // Seek to start of image
uint16_t padding = (4 - (w & 3)) & 3; // Calculate the BMP line padding
// Create and zero a pixel line buffer
uint16_t pixelBuffer = ( uint16_t*) calloc( w, sizeof(uint16_t));
// Create and zero a data buffer including any padding
uint8_t* readBuffer = ( uint8_t* ) calloc( w + padding, sizeof(uint8_t));
y += h - 1; // Start from bottom (assumes bottum up!)
tft.startWrite();
// Draw row by row from bottom up
for (row = 0; row < h; row++) {
// Read a row of pixels
bmpFS.read(readBuffer, w + padding);
// Prep variables
uint16_t dx = w;
uint16_t* pPtr = pixelBuffer;
uint8_t* rPtr = readBuffer;
// Fill pixel buffer using lookup table
while (dx--) *pPtr++ = pixel_color[*rPtr++];
// Push the pixel row to screen
tft.pushImage(x, y--, w, 1, pixelBuffer);
}
tft.endWrite();
free(pixelBuffer);
free(readBuffer);
}
}
bmpFS.close();
}

New code:
//====================================================================================
// Draw an 8 bit BMP with colour table (palette) - double size
//====================================================================================
void drawSdBmp8Double(const char filename, int16_t x, int16_t y) {
if ((x >= tft.width()) || (y >= tft.height())) return;
fs::File bmpFS;
// Open requested file
bmpFS = SD.open( filename);
uint32_t seekOffset, dib_size;
uint16_t w, h, row, col, num_colors;
uint8_t r, g, b;
if (read16(bmpFS) == 0x4D42) // Check it is a valid bitmap header
{
read32(bmpFS);
read32(bmpFS);
seekOffset = read32(bmpFS); // Pointer to image start
dib_size = read32(bmpFS); // DIB header size, typically 40 bytes
w = read32(bmpFS); // Get width and height of image
h = read32(bmpFS);
// Check it is 1 plane and 8 bits per pixel and no compression
if ((read16(bmpFS) == 1) && (read16(bmpFS) == 8) && (read32(bmpFS) == 0))
{
read32(bmpFS); // Throw away image size
read32(bmpFS); // Throw away x pixels per meter
read32(bmpFS); // Throw away y pixels per meter
num_colors = read32(bmpFS); // Number of colours in colour table (usually 256)
uint16_t pixel_color[num_colors]; // Lookup table for pixel colour
bmpFS.seek(14 + dib_size); // Seek to start of colour table
// Capture the colour lookup table
for (uint16_t i = 0; i < num_colors; i++)
{
uint32_t argb = read32(bmpFS); // Assume 4 byte, RGB colours in LS 3 bytes
r = (uint8_t) (argb >> 16);
g = (uint8_t) (argb >> 8);
b = (uint8_t) (argb >> 0);
col = tft.color565( r, g, b );
pixel_color[i] = col >> 8 | col << 8;
}
bmpFS.seek(seekOffset); // Seek to start of image
uint16_t padding = (4 - (w & 3)) & 3; // Calculate the BMP line padding
// Create and zero a pixel line buffer
uint16_t pixelBuffer = ( uint16_t*) calloc( w2, sizeof(uint16_t));
// Create and zero a data buffer including any padding
uint8_t readBuffer = ( uint8_t* ) calloc( w + padding, sizeof(uint8_t));
y += (h2) - 1; // Start from bottom (assumes bottum up!)
tft.startWrite();
// Draw row by row from bottom up
for (row = 0; row < h; row++) {
// Read a row of pixels
bmpFS.read(readBuffer, w + padding);
// Prep variables
uint16_t dx = w;
uint16_t pPtr = pixelBuffer;
uint8_t* rPtr = readBuffer;
// Fill pixel buffer using lookup table
while (dx--)
{
*pPtr++ = pixel_color[*rPtr++];
pPtr++ = pixel_color[rPtr];
}
// Push the pixel row to screen
tft.pushImage(x, y--, w2, 1, pixelBuffer);
tft.pushImage(x, y--, w2, 1, pixelBuffer);
}
tft.endWrite();
free(pixelBuffer);
free(readBuffer);
}
}
bmpFS.close();
}

[Bodmer]

Unfortunately the markdown formatting messes up code and makes it unreadable so an asterisk for a pointer turns the text into italics for example. Use the triple backtick (usually top left key next to 1 on keyboard) to encapsulate code and keep the formatting, e.g. used to format this:

void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}

[Bodmer]

See here.

[Bodmer]

Original complete sketch being referenced is in #941.

[Bodmer]

I can see what you have done, but w2 does not appear to be defined. Presumably width of image * 2. Maybe best to zip and upload as modified example from here.

[sn00zerman]

I finally managed to insert "proper" code in a posting :-)
I was using the "<> code" thingy, but then I got everything without line-brakes.
So my code was inserted between a backtick at the start, and a backtick at the end.
Triple backtick was the way to go indeed, I will never forget :-)

//=============================================================
// Draw an 8 bit BMP with colour table (palette) - double size 
//=============================================================
void drawSdBmp8Double(const char *filename, int16_t x, int16_t y) {
  if ((x >= tft.width()) || (y >= tft.height())) return;
  fs::File   bmpFS;
  // Open requested file
  bmpFS = SD.open( filename);
  uint32_t seekOffset, dib_size;
  uint16_t w, h, row, col, num_colors;
  uint8_t  r, g, b;
  if (read16(bmpFS) == 0x4D42)              
  {
    read32(bmpFS);
    read32(bmpFS);
    seekOffset = read32(bmpFS);             
    dib_size   = read32(bmpFS);             
    w = read32(bmpFS);                      
    h = read32(bmpFS);
    if ((read16(bmpFS) == 1) && (read16(bmpFS) == 8) && (read32(bmpFS) == 0))
    {
      read32(bmpFS);                        
      read32(bmpFS);                        
      read32(bmpFS);                        
      num_colors = read32(bmpFS);           
      uint16_t pixel_color[num_colors];     
      bmpFS.seek(14 + dib_size);            
      for (uint16_t i = 0; i < num_colors; i++)
      {
        uint32_t argb = read32(bmpFS);      
        r = (uint8_t) (argb >> 16);
        g = (uint8_t) (argb >>  8);
        b = (uint8_t) (argb >>  0);
        col = tft.color565( r, g, b );
        pixel_color[i] = col >> 8 | col << 8;
      }
      bmpFS.seek(seekOffset);               
      uint16_t padding = (4 - (w & 3)) & 3; 
      //--- w*2 in next line, to have twice the amount of memory allocated for double length ---
      uint16_t* pixelBuffer = ( uint16_t*) calloc( w*2, sizeof(uint16_t));
      uint8_t*  readBuffer  = ( uint8_t* ) calloc( w + padding, sizeof(uint8_t));
      //--- image is double height, so keep this into account ---
      y += (h*2) - 1; 
      tft.startWrite();
      for (row = 0; row < h; row++) {
        bmpFS.read(readBuffer, w + padding);
        uint16_t  dx = w;
        uint16_t* pPtr = pixelBuffer;
        uint8_t*  rPtr = readBuffer;
        while (dx--) 
        {
          *pPtr++ =  pixel_color[*rPtr++];
          //--- add each pixel, twice to an image-line ---
          *pPtr++ =  pixel_color[*rPtr];
        }
        tft.pushImage(x, y--, w*2, 1, pixelBuffer);
        //--- add each line twice to the image, so we get double height ---
        tft.pushImage(x, y--, w*2, 1, pixelBuffer);
      }
      tft.endWrite();
      free(pixelBuffer);
      free(readBuffer);
    }
  }
  bmpFS.close();
}

[Bodmer]

Great!