How to view .h graphics files

Hi all, I have some graphics in a grapics.h file that I want to be able to see on my PC so that I can verify that it is correct and revise if necessary. I have seen and used editors that convert bitmaps etc into .h usable code, but I want to go the other way

Is there something I can use for this?

Cheers

Les

there are many tools available on line to do image ➜ HEX or HEX ➜ image (you need to copy only the hexadecimal content, not the array definition) some require python for example on the computer. I'm pretty sure you can find also something online

Thanks, I was searching for .h to graphics, so was not getting the right hits

Cheers

Les

They're most likely in (or similar to) the XBM format: X BitMap - Wikipedia

You can add the array of data in a .xbm file with the right format.

It might be difficult to find anything ready made for this.

If it were my problem then I would write some code in the Processing language (free) to do the conversion. Whilst it is java based, it looks a lot like C, so it is readable if you know C, it is just the class functions are called differently.

I have a couple of python apps, one takes an image file and creates a PROGMEM header file the other takes an image file and displays it in a GUI. I think I can combine elements from each so that I can display a header file image into the GUI, if it looks ok I'll post back later.

I looked on line and found a few sites, however none actually seemed to work. Of course the problem is that what you are trying to show is all in code so you don't know what it is supposed to look like, but I'm pretty certain it shouldn't be a long long column of hex code!

To explain my reasons for wanting to do this, I have a sketch written for a microcontroller (in this case an ESP32 programmed via the IDE interface) that partially works but appears to have a memory issue. The defect manifests itself as some of the graphics parts not being displayed, aven though there is clearly other parts that are.

As the writer is no longer reachable, my intention is to lower the resolution of the Graphics or at least make them smaller, in order to see if they can be made to display. I can't get hold of the original graphics files, so wanted to reverse engineer them into .jpegs that can be edited and converted back again.

Cheers

Les

Bad idea, a jpeg is a compressed file and doing that will bring out a lot of compression artefacts. A better idea is to stick to a non compressed form of image like a .png.

Do you know the image format?
Where are they being partially displayed? (Web? Local screen?)

They are being displayed on a 240 x 240 TFT for the purposes of the sketch, for example one is 200 x 1012 pixels

I changed the in-sketch colour depth from 16bit to 8 bit, which resolved the issue, apart from the graphics not being optimised, you get borders of a different colour around text and things. They are all gauge face images, so not a great deal of colour depth required, so if I could change the original bitmaps to lower colour depth to match I believe that I could improve the quality of the graphics being displayed

Les

Ok, progress, I now have managed to make and amend the bitmaps and have saved them as both 8 bit and 16bit bitmaps. However when I save back into the hex form, either it's complete garbage and looks like nothing, or all the colours are messed up - black becomes light green for example

Looking at the original sketch I see that the coding is for example 0xfdce which leads me to believe that it is in RRGGBB format in the sketch. Now I have the new bitmap I would like to convert to RRGGBB, but there are no working converters out there on the web - I have tried 25 or 30 sites, and none of them seem to work.

Is there somewhere that does work for this conversion?

Cheers

Les

Did you try this one @Lesthegringo?

I don't know whether it does what you need, but it does offer multiple palette options.

just to be clear : you have a C++ array declaration that holds hexadecimal values such as 0xfdce, so two bytes which could be a RGB565 representation So something like

const uint16_t image[] = { // whatever content
0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,
0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,
0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,
0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,
0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,0xfdce,
};

you want to take this array definition and visualise it on your PC.

do you know what image format was used ? is that a plain bitmap and just the pixels description or is there a header and a trailer and it is a JPEG or another type of encoded image file representation ?

Doesn't seem to - it only outputs 4 character code

Actually, I managed to get the bitmap and fix it, so now I want to return it to the 0xfdce array format

Thanks for the replies, very much appreciated!

Les

so what do you have as source for that? a JPEG file?

All, it can't be a RRGGBB type code; I am looking at reference material here https://www.rapidtables.com/web/color/RGB_Color.html

and for example 0xfdce does not correspont to a colour, so I think that the RRGGBB thing was a red herring.

However looking into 6 character HEX colour sets makes me more confused still as this https://www.quackit.com/css/color/values/css_hex_color_notation_6_digits.cfm

shows that an x would not be part of the code. Simply using the code generated before and prefixing the four character codes with 0x will not do it either, seems I ned a converter that outputs a s six character code starting with 0X

As for the file, it's a 16 bit .bmp file

Les

it could be a RGB565 (5 bits Red, 6 bits green, 5 bits blue) ➜ see conversion ideas here for example RGB565 to RGB888 Color Conversion – SheekGeek

can you share such a file ?

Of course, need to work out how to do it - every site has different ways! It's only small, 395kb

Les

Ok, only allowed the .png version

Les

zip de .bmp and post the zip or change the suffix to .bin and then you can attach it