Convert png-file into array, and resize

dsebastian · March 28, 2025, 10:15pm

Hi,

not sure, if this is the right category. But at least it has to do with displays ...

I have a png-File with 512x512 pixel size. Now I'm desperately looking for a tool that does both converting the size (e.g. 64x64 or smaller, i.e. selectable) and provides the result as (C++) - array, which I can later include into my code. Once I have it, u8g2-Library will do the job to show the grafic on the display ... at least, this is the plan.

Does anybody have a good hint for this? Thanks for your support.

kenb4 · March 28, 2025, 10:42pm

Instead of a single tool, first resize the image. Your desktop OS might even have that in a built-in utility.

Then use xxd with the -i option to generate a C header file with the binary data. That program is available in Linux and Mac. On Windows, WSL will give you Linux; or you can try some equivalent program.

dsebastian · March 29, 2025, 10:11pm

OK. Using Win, I have updated my IrfanView to 4.7, and to use IrfanView for resizing.

But, it still drives me crazy. For whatever reason all *.bmp-files turn to single(!)-color files, "white eagle on white flag", if you like. While converting the png-file to tif, I do can the resizing of even change color.

So far, I tried some conversion tools (websites), but they fail reading tif, and when reading the bmp-files it is all just one color (either black or white, as they have been created by IrfanView). I get mad ...

Attached the previews

So, at the end, I even fail to convert the png to a bmp. Any idea what could be wrong here?
Attached also the orignal png-file.

david_2018 · March 29, 2025, 11:14pm

Which display are you using? U8g2 is generally used for monochrome displays.

Have you tried converting to XBM format? That literally produces c-code, and U8g2 has commands to draw this format. You will need to save this file and change the extension to .xbm, the website will not allow me to upload it directly.

raven-svgrepo-com.h (200.1 KB)

dsebastian · March 30, 2025, 1:35pm

No, but meanwhile I did. At the end the working solution even though not every PNG-to-XBM converter is working (the one that did the job is linked below)

My workflow ended up in doing this:

Resizing *.png using IrfanView
Convert *.png to *.xbm using this URL
Checked the result using this xbm-Viewer

And did some iterations until I got it runing using PROGMEN. Which was my fault - the documentation of u8g2-Library is saying it correctly, but I missed the detail ... (see comment in code below)

#include <U8g2lib.h>
#include <SPI.h>

// Purpose is to display the raven via XBM-Printing function of u8g2

// 30. March 2025

// Constructor for Display
//U8G2_SH1106_128X64_WINSTAR_F_4W_HW_SPI u8g2(U8G2_R2, 10, 9, 8);
U8G2_SH1106_128X64_WINSTAR_1_4W_HW_SPI u8g2(U8G2_R2, 10, 9, 8);

// The raven itself
#define raven_width 64
#define raven_height 64
static const byte raven_bits[] U8X8_PROGMEM = {
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFE, 0x01, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x80, 0xFF, 0x03, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFE, 0xFF, 0x07, 
  0x00, 0x00, 0x00, 0x00, 0x80, 0xFF, 0xFF, 0x0F, 0x00, 0x00, 0x00, 0x00, 
  0x80, 0xFF, 0xFF, 0x1F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xFF, 0x3F, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0xC0, 0xFF, 0x3F, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0xFF, 0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0x7F, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFE, 0x7F, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0xFE, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0xC0, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0xFF, 0x7F, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xFF, 0x7F, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0xFC, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 
  0x00, 0x00, 0x00, 0x00, 0x80, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 
  0xC0, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0xE0, 0xFF, 0xFF, 0xFF, 
  0x00, 0x00, 0x00, 0x00, 0xF0, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 
  0xF8, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0xFE, 0xFF, 0xFF, 0xFF, 
  0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x80, 
  0xFF, 0xFF, 0xFF, 0x7F, 0x00, 0x00, 0x00, 0xC0, 0xFF, 0xFF, 0xFF, 0x7F, 
  0x00, 0x00, 0x00, 0xE0, 0xFF, 0xFF, 0xFF, 0x3F, 0x00, 0x00, 0x00, 0xF8, 
  0xFF, 0xFF, 0xFF, 0x3F, 0x00, 0x00, 0x00, 0xFC, 0xFF, 0xFF, 0xFF, 0x3F, 
  0x00, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 0xFF, 0x1F, 0x00, 0x00, 0x80, 0xFF, 
  0xFF, 0xFF, 0xFF, 0x1F, 0x00, 0x00, 0xE0, 0xFF, 0xFF, 0xFF, 0xFF, 0x0F, 
  0x00, 0x00, 0xF0, 0xFF, 0xFF, 0xFF, 0xFF, 0x0F, 0x00, 0x00, 0xFC, 0xFF, 
  0xFF, 0xFF, 0xFF, 0x07, 0x00, 0x00, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF, 0x03, 
  0x00, 0x80, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x03, 0x00, 0xC0, 0xFF, 0xFF, 
  0xFF, 0xFF, 0xFF, 0x01, 0x00, 0xF0, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 
  0x00, 0xFC, 0xFF, 0xFF, 0xFF, 0xFF, 0x7F, 0x00, 0x00, 0xFF, 0xFF, 0xFF, 
  0xFF, 0xFF, 0x3F, 0x00, 0x80, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x1F, 0x00, 
  0xC0, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x0F, 0x00, 0xE0, 0xFF, 0xFF, 0xFF, 
  0xFF, 0xFF, 0x03, 0x00, 0xF0, 0xFF, 0xFF, 0x7F, 0xF0, 0xFF, 0x01, 0x00, 
  0xF8, 0xFF, 0xFF, 0x01, 0xC0, 0xFF, 0x00, 0x00, 0x80, 0xFF, 0x1F, 0x00, 
  0x80, 0xFF, 0x00, 0x00, 0xC0, 0xFF, 0x07, 0x00, 0x80, 0xE3, 0x00, 0x00, 
  0xF0, 0xFF, 0x01, 0x00, 0x80, 0xE3, 0x00, 0x00, 0xFC, 0x7F, 0x00, 0x00, 
  0x80, 0xE3, 0x01, 0x00, 0xFE, 0x1F, 0x00, 0x00, 0x80, 0xC3, 0x03, 0x00, 
  0xFF, 0x07, 0x00, 0x00, 0x80, 0x87, 0x03, 0x06, 0xF8, 0x01, 0x00, 0x00, 
  0x00, 0x0F, 0xCF, 0x1B, 0x18, 0x00, 0x00, 0x00, 0x00, 0x1E, 0xFF, 0x01, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0xFC, 0xFF, 0x0F, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0xFF, 0x7F, 0x18, 0x00, 0x00, 0x00, 0x00, 0xC0, 0xFF, 0x3F, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x60, 0x40, 0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 };

// =======================================================================================================
const byte displayWidth  = 128;             
const byte displayHeight =  64;             
// =======================================================================================================

void setup() {
  // All put into setup, as just raven is to show once
  u8g2.begin();
  u8g2.clearBuffer();                         // clear the internal memory
  u8g2.firstPage();
  do {
    // Logo - HERE: use u8g2.drawXBMP .. with the 'P' when array is stored in P(!)ROGMEM
    u8g2.drawXBMP((displayWidth - raven_width)/2 , 0, raven_width, raven_height, raven_bits);
  } while ( u8g2.nextPage() );
}

void loop() {
  while(1);
}

And the bird itself

david_2018 · March 30, 2025, 3:20pm

I use the GNU Image Manipulation Program, https://www.gimp.org/. That will do the resizing (scale the image) and export to XBM (X Bitmap) format. Does have one slight problem, the array in the xbm is declared as "unsigned char", which needs to be changed to "byte" to match the drawXBMP() function.

Topic		Replies	Views
Convertire immagine to array Generale	11	202	April 6, 2025
Bitmap to HEX for OLED Display ! I don´t get it to work ! Programming	31	2718	April 15, 2024
Display SSD1309 - drawXBMP - Convert picture to byte Displays	3	3624	May 6, 2021
How to view .h graphics files Programming	32	1889	April 29, 2023
U8g2, Bitmap funktioniert nicht Deutsch	19	2128	September 30, 2021

Convert png-file into array, and resize

Related topics