Using PNG images stored as "resources" in Visual Studio 2022

[Rod Morgan]

I'm hoping someone has an example of creating an Fl_PNG_Image from PNG images compiled into the .exe file by/with Visual Studio.  I use images as backgrounds for Fl_Buttons.  My goal is to have the images included/compiled into the .exe file and remove the need to include the individual .png files when using/distributing the application.  This is for personal/family use and making it easy on my aging parents is paramount.

FLTK thankfully hides most of the underlying Windows 10/11 GUI coding complexity.  I think my request exposes some of that to connect to FLTK widgets.  Any/all help is appreciated.

[Rod Morgan]

I should have mentioned I'm using C++.

[Albrecht Schlosser]

On 12/27/23 21:01 Rod Morgan wrote:
> I'm hoping someone has an example of creating an Fl_PNG_Image from PNG
> images compiled into the .exe file by/with Visual Studio.  I use
> images as backgrounds for Fl_Buttons.  My goal is to have the images
> included/compiled into the .exe file and remove the need to include
> the individual .png files when using/distributing the application. 
> This is for personal/family use and making it easy on my aging parents
> is paramount.

I wouldn't recommend to use "Windows Resources" literally but you can
compile images into your sources and load the images from memory. This
would be cross platform rather than (Windows) platform specific.

See the Fl_PNG_Image constructor(s) in the docs:
https://www.fltk.org/doc-1.4/classFl__PNG__Image.html#ae8f77a54a4cef7cb04203036b04e1b62

Fluid can help to embed an image in the source code. I can't check this
right now but I assume it works with PNG images as well. If you could
use Linux I would recommend to use `xxd -i` to create a source file that
can be included from your PNG file(s). I'm sure there are also tools
that work under Windows - you could use Fluid for instance.

> FLTK thankfully hides most of the underlying Windows 10/11 GUI coding
> complexity.  I think my request exposes some of that to connect to
> FLTK widgets.

Yep, that's the intention of FLTK. Not only Windows but cross-platform,
i.e. also for Unix/Linux and macOS.

> Any/all help is appreciated.

I hope others may be able to help you with further details, my time is
currently limited.

[Gonzalo Garramuño]

On 28/12/23 10:38, Albrecht Schlosser wrote:
>
> Fluid can help to embed an image in the source code. I can't check
> this right now but I assume it works with PNG images as well.
>

I believe only ASCII formats are supported, like XPM or SVG.  I could be
wrong.  Matt should know better.

--
Gonzalo Garramuño
ggar...@gmail.com

[Matthias Melcher]

You can include images into your source code via FLUID. It's really easy and fast and compatible across all four platforms. 

Here are two ways with FLUID:

Option 1: Create your UI and select any widget. In the properties dialog, you can add the filename to any image ("Image:" and "Inactive:" fields). FLUID will embed those images into your source code. If you are using FLTK 1.4, you have a bunch of additional options, including rider size for hi res displays, and storage format (compressed or uncompressed).

Option 2: this is great if you don't want a FLUID GUI, but still need inlined images. Create a new DLUID project and select "New > Code > Inlined data..." . This will embed any external file in binary or text mode (or gzip compressed in 1.4). Then simply load the data as an image with Fl_PNG_Image(name, data, size) ( https://www.fltk.org/doc-1.3/classFl__PNG__Image.html#ae8f77a54a4cef7cb04203036b04e1b62 ) or whatever other format your original data has. 

If you don't care about cross platform compatibility, you can use this last call directly with WIN32 LoadResource() which also should return a pointer to your PNG (JPEG, BMP,  etc.) data, but I have not tested that (not using MSWindows).

Matthias

[pvr...@btinternet.com]

Thanks Guys,

I had also been looking for something like this as well a while back.

Tested the generated code on both Debian and W11. I had previously used hand coded RGB bitmaps for icons. So probably a lot easier to add new ones.

Phil.

 

[Matthias Melcher]

We even support SVG vector graphics now, even inlined which be really helpful.

[Greg Ercolano]

    There's this approach on the FLTK cheat page which converts the PNG
    file to compilable inline hex, and shows how to pass that to Fl_PNG_Image:

    https://www.seriss.com/people/erco/fltk/#Fl_PNG_Hex_Dump

    Once it's in Fl_PNG_Image, you can assign it to a button or box
    using the usual techniques with Fl_Widget::image() and deimage().

[Gonzalo Garramuño]

El 12/28/2023 a las 7:17 PM, Greg Ercolano escribió:

On 12/27/23 17:52, Rod Morgan wrote:

I should have mentioned I'm using C++.

On Wednesday, December 27, 2023 at 5:48:14 PM UTC-5 Rod Morgan wrote:

I'm hoping someone has an example of creating an Fl_PNG_Image from PNG images compiled into the .exe file by/with Visual Studio.  I use images as backgrounds for Fl_Buttons.  My goal is to have the images included/compiled into the .exe file and remove the need to include the individual .png files when using/distributing the application.  This is for personal/family use and making it easy on my aging parents is paramount.

Would it be possible to refactor the Matt's FLUID inline compilation code into a stand-alone like Fl_PNG_Hex_Dump?  Something like:

fltk-image <any_valid_fltk_image> output.h

-- 
Gonzalo Garramuño
ggar...@gmail.com

[Rod Morgan]

I liked Greg's approach of converting the png using PNG2HEX...so I tried it.  PNG2HEX seems to have worked flawlessly and created the attached file named allon.h.  I then created a small FLTK app, included the allon.h file and tried to load it using the Fl_PNG_Image::Fl_PNG_Image(const char * name_png, const unsigned char *  buffer, int maxsize) constructor.  The source is in source.cpp.  The code compiles and links without error, but I don't get the image displayed in the button.  Can someone point out my error?

[Greg Ercolano]

On 12/30/23 17:49, Rod Morgan wrote:

I liked Greg's approach of converting the png using PNG2HEX...so I tried it.  PNG2HEX seems to have worked flawlessly and created the attached file named allon.h.  I then created a small FLTK app, included the allon.h file and tried to load it using the Fl_PNG_Image::Fl_PNG_Image(const char * name_png, const unsigned char *  buffer, int maxsize) constructor.  The source is in source.cpp.  The code compiles and links without error, but I don't get the image displayed in the button.  Can someone point out my error?

Hmm, png2hex is converting the PNG into raw RGBA bytes,
so you'd want to pass this to Fl_RGB_Image instead of Fl_PNG_Image.
So try instead:

---

#include <FL/Fl.H>
#include <FL/Fl_Window.H>
#include <FL/Fl_Button.H>
#include <FL/Fl_RGB_Image.H>
#include "allon.h"

int main(int argc, char** argv) {
    Fl_Window window(148, 112);
    Fl_RGB_Image rgb(allon_png, 48, 72, 4);   // 48,72,4 comes from allon.h's W,H,D -- width,height,depth (in bytes)
    Fl_Button b1(40, 20, 68, 72, "");
    b1.image(&rgb);
    window.end();
    window.show();
    return Fl::run();
}

---

My cheat example predates when Fl_PNG_Image started supporting
loading a raw PNG image from a memory buffer, so it had to provide
the data in raw RGBA format.

Since raw RGBA takes up more space than a raw version of PNG,
I should probably update this example, as that'd be more efficient,
i.e. fewer hex bytes in your app.

For your code to work using Fl_PNG_Image to load the data, the data
would have to be in raw PNG hex code. I'm pretty sure linux probably
provides a program that does this (just takes any binary file and converts
it to C/C++ parseable source code bytes in a static char array),
though I can't think what it is offhand..

[Greg Ercolano]

On 12/30/23 18:33, Greg Ercolano wrote:

I'm pretty sure linux provides a program that does this (just takes

any binary file and converts it to C/C++ parseable source code bytes
in a static char array), though I can't think what it is offhand..

    Ah, here we go:

        xxd -i your.png > allon.h

    ..that should work for then loading into Fl_PNG_Image's constructor.

    From the man page for xxd(1):

---

XXD(1)                                          General Commands Manual                                          XXD(1)

NAME
       xxd - make a hexdump or do the reverse.

SYNOPSIS
       xxd -h[elp]
       xxd [options] [infile [outfile]]
       xxd -r[evert] [options] [infile [outfile]]

DESCRIPTION
       xxd  creates  a hex dump of a given file or standard input.  It can also convert a hex dump back to its original
       binary form.  Like uuencode(1) and uudecode(1) it allows the transmission of binary data in a `mail-safe'  ASCII
       representation,  but  has the advantage of decoding to standard output.  Moreover, it can be used to perform bi-
       nary file patching.

[..]
       -i | -include
              Output in C include file style. A complete static array definition is  written  (named  after  the  input
              file), unless xxd reads from stdin.

---

[Rod Morgan]

Greg, thank you.  I had just discovered xxd and was confirming it was available on my FreeBSD system.  It is, it worked and my original code worked with the newly generated allon.h file.  This is exactly what I wanted to accomplish.  Thanks to all on the list!

Rod