How to display an array as image in wxWidgets

There are many scenarios where you get an array of values that represents an image of certain width and height. For example, the array could contain integers or floats of any range. You might want to display this array in wxWidgets to visualize it as a two-dimensional image.

Here is one way I was able to do this in wxWidgets:

  • A common type of value that wxWidgets uses for display is unsigned char. This has a range of 0 to 255. So, you will need to convert your float, int or any other type to unsigned char. How you do this conversion will depend on the range of values that are being represented in your type.

  • The typical type of array that wxWidgets uses for display is 3-channel (RGB) or 4-channel (RGBA). So, if you have one or two channel arrays, you will need to convert them to a 3-channel array. The values are arranged such that the RGB values of a pixel are adjacent to each other. That is, the array should be arranged as [R0 G0 B0 R1 G1 B1 ...]. If you have a single channel array, the easiest way to generate 3-channel array is to allocate a new array of 3 times the size and write every value thrice into it. Remember that the values in the array should be of type unsigned char as explained earlier.

  • One of the structures that is used to hold an image is wxImage. You can initialize it with a 3-channel array of type unsigned char as follows:

unsigned char* imgArray[width * height * 3];
// Fill in imgArray here ... 
wxImage img(width, height, imgArray, true);
  • The easiest structure to use to draw on the GUI is wxBitmap. You can directly convert a wxImage to it:
wxBitmap bmp(img);
  • Finally, we are ready to draw on the GUI. The widget that can be used to draw is wxStaticBitmap. Pass it a wxBitmap and it will render it on the GUI:
// Start with empty bitmap
wxStaticBitmap* sbmp = new wxStaticBitmap(this, wxID_STATIC, wxNullBitmap, wxDefaultPosition, wxSize(width, height));
// Update later with your bitmap

Tried with: wxWidgets 3.0.0 and Visual Studio 2012

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.