ZeeImage Quick-Start Tutorial

What is ZeeImage?

ZeeImage is an extremely simple control that manages images for your application. The most basic function of a ZeeImage control is to get an image file from disk (JPG, GIF, TIF, PNG, BMP, ICO) and load it into the ZeeImage control as a Windows bitmap. The ZeeImage control manages an array of 256 of these bitmaps, and can display the images in the control. An image sequence can be loaded, then the display can switch instantly between any of the loaded bitmaps. The ZeeImage control also uses its own timer to display an animation of a sequence of the loaded images at a framerate of the programmer's choosing. Animations can define their starting and ending "frame", and the number of times the animation will loop to play again.

When ZeeImage is used to display images, they are resized to keep the same aspect ratio as the original, but adjusted in size to fill the client area of the control. Each image can be configured to expand in size to fill the controls client area, or display at the images resolution if it is smaller than the client area of the control.

Getting Started

For this example, we will create an image control that resizes with the application to occupy the full client area of the application. I will load 3 images and then have the 3 images automatically cycle repeatedly with a 1/2 second pause between each image.

As with all Zee control DLLs, the DLL for the ZeeImage control should reside in the directory of your executable file. This won't be the case while you're compiling your code in an IDE such as Microsoft's Visual Studio. I've found it needs to be in the same directory as my C++ code, but once compiled to your finished applicaiton, it will need to reside with your executable file, or at least be somewhere in the search path of your computer.

In your global variables section you will need to create the following:


#include "zeeimage.h"
HMODULE hmod;        //for result of LoadLibrary() function
HWND himage;         //window handle for the ZeeImage control.

In the window procedure, in the WM_CREATE section, we will need to load the DLL file with the LoadLibrary() function. We will then check the result of the LoadLibrary() function to determine if the load was successful. If LoadLibrary() fails, it's because the ZeeImage.DLL file is not in the correct directory. It should be in the same directory as your program's source code file.


	case WM_CREATE:
		hmod=LoadLibrary("zeeimage.dll");
		if(!hmod)
		{
			MessageBox(hWnd,"Unable to load ZeeImage.DLL","Error",MB_OK);
			PostQuitMessage(0);
		}
		break;

We will now continue modifying the WM_CREATE section to actually create the ZeeImage control. Since the ZeeImage control will need to resize itself to the application window size, I create the ZeeImage control with a width and height of 0 pixels, then size the control in the WM_SIZE section.

	case WM_CREATE:
		hmod=LoadLibrary("zeeimage.dll");
		if(!hmod)
		{
			MessageBox(hWnd,"Unable to load ZeeImage.DLL","Error",MB_OK);
			PostQuitMessage(0);
		}
		//if you’re here, then the DLL loaded successfully
		himage=CreateWindow("ZeeImage","No Title",WS_CHILD|WS_VISIBLE,0,0,0,0,hWnd,(HMENU)700,hInst,NULL);

		break;


...and the WM_SIZE section code to handle resizing the ZeeImage control based on the size of the application window...

	case WM_SIZE:
		{
			RECT rect;
			GetClientRect(hWnd,&rect);
			MoveWindow(himage,0,0,rect.right,rect.bottom,TRUE);
		}
		break;



Before we load the images, we will set the transparency and background colors. These colors are white, RGB(255,255,255) by default.

I will set the tranparency color to red RGB(255,0,0) and the background color to blue RGB(0,0,255).


	case WM_CREATE:
		hmod=LoadLibrary("zeeimage.dll");
		if(!hmod)
		{
			MessageBox(hWnd,"Unable to load ZeeImage.DLL","Error",MB_OK);
			PostQuitMessage(0);
		}
		//if you’re here, then the DLL loaded successfully
		himage=CreateWindow("ZeeImage","No Title",WS_CHILD|WS_VISIBLE,0,0,0,0,hWnd,(HMENU)700,hInst,NULL);
		
		
        SendMessage(himage,ZIM_SETTRANSPARENTCOLOR,0,RGB(255,0,0));     //  set the transparent color to red for any images loaded that support transparency.
                                                                        //  This will stay in effect until changed with another ZIM_SETTRANSPARENTCOLOR message.

        for(int j=0;j<=3;j++)                                           //  loop through the first three image slots because we're loading 3 images
        {
            SendMessage(himage,ZIM_SETBGCOLOR,j,RGB(0,0,255));          //  Set the slot [j] to have a blue background.  The background for each image will
                                                                        //  default to white if not set with the ZIM_SETBGCOLOR message.
        }

                                                                        //  Now load the three images...
        SendMessage(himage,ZIM_LOADIMAGE,0,(LPARAM)"tree.tif");         //  Use your own image here...Try using a TIF or PNG image that has transparency in it.
        SendMessage(himage,ZIM_LOADIMAGE,1,(LPARAM)"image2.jpg");       //  Use your own image here...Use a normal sized image, such as from your digital camera.
        SendMessage(himage,ZIM_LOADIMAGE,2,(LPARAM)"image3.ico");       //  Use your own image here...Try a very small image, such as a program ICON.
                                                                        //  Load more images if you want.  The ZeeImage control will hold up to 256 images.

        SendMessage(himage,ZIM_SETANIMATEDELAY,500,0);                  //  Set the time to delay between each image to 500 milliseconds (1/2 second)
        SendMessage(himage,ZIM_SETANIMATELOOP,-1,0);                    //  Set the control to loop infinitely
        SendMessage(himage,ZIM_STARTANIMATE,0,2);                       //  Start the animation beginning with image 0 and ending with image 2
        
		break;


Conserve Memory

If you are loading an image just to display in a small area of the screen, use the ZIM_SETDIVISOR to reduce the size of the loaded bitmap.

Putting images on buttons

Get best results by using image formats that support transparency. Use the API GetSysColor() message to get the color of the button face, then use ZIM_SETTRANSPARENTCOLOR to set the transparency of your image to match the color of your button face. Then use the ZIM_GETBITAP to get a handle to the bitmap and then place it on your button with the button message BM_SETIMAGE. Don't forget to set the style of the button to BS_BITMAP.

Background color vs. Transparency color

When loading an image that supports transparency, the transparent color is "set" when loading and becomes an actual non-transparent color in the loaded bitmap image. The background color is not part of the image at all, but rather the color of the client area of the control when displaying the image. Since the client area will almost always be wider or taller than the displayed image, that area of the client area is painted with the background color. The background color is a setting per image. The transparent color is a setting per control. The transparent color, once set, stays set to that color until changed with another ZIM_SETTRANSPARENTCOLOR.

Animating Buttons

You will need to set up your own WM_TIMER to control the changing of images on buttons you need to animate. You cannot use the ZeeImage control's built-in animation ability to animate something external to the ZeeImage control. Just react to your WM_TIMER to keep an index counter then get the bitmap from the ZeeImage control and then put it on the button. Over and over of course.

Images from the internet

This control will eventually be able to get images from the internet. HTTP URLs for sure. Hopefully HTTPS also. I got tied up working COVID-19 related issues and have not had time to implement the network part of this control. That is why I am releasing it now as a beta release. I do not know a date for implementation of HTTP capability. Just keep checking.

Questions / Bugs / Feedback

I am setting up a Facebook page for ZeeControls to have a public forum to answer your questions or issues with my ZeeControls. Facebook ZeeControls