MelSam's Blog

Spot the Bug - Episode 2 solution and explanation

Thanks to everyone that participated in the second Spot the Bug contest this week. As "patters" pointed out, the application compatibility issue was hard coding icon sizes. Everyone else had very valid points about memory allocation, color capabilities etc., but remember - the focus is on maximizing compatibility for Windows Mobile.

Take a look at the following snippet from the contest code sample:

void CTestAppDlg::initializeListCtrl()
{
    // Create the imagelist and assign it to the listview control
    m_imageList.Create(32, 32, ILC_COLOR|ILC_MASK, 1, 1);
    m_wndListCtrl.SetImageList(&m_imageList, LVSIL_NORMAL);

    // Add an icon to the imagelist
    HICON hIcon = 
        (HICON)LoadImage(AfxGetResourceHandle(),
        MAKEINTRESOURCE(IDI_MYICON), IMAGE_ICON, 32, 32, 0);

    m_imageList.Add(hIcon);    
}

When creating the imagelist above, we're hard coding the width and height (32x32). When loading the icon, we're hard coding the same sizes again. As Windows Mobile developers, you should know that Pocket PC and Smartphone devices do not always use standard desktop icon sizes. Because these devices come in various DPIs and resolutions, the icon sizes vary.

Here's a handy reference table that will help you determine which icon sizes to include in your application.

To determine the correct icon size for the device your application is running on, use the GetSystemMetrics API. For example, GetSystemMetrics(SM_CXICON) will give you the correct "large" icon size, which is usually 32 pixels.

The GetSystemMetrics API is part of the Win32 SDK, so it's a good idea to use it for your desktop applications as well. This will be particularly important for Windows Vista compatibility because controls such as listviews may expect icons of different sizes.

Merely using this API is not enough though. You also have to include the actual icon resources of the expected sizes. Admittedly, this means more work for your art department and larger resource files or .exes. True, but if you don't have the right sized icons, the system will have to scale the image up or down, and thus make your icons look blurry.

Take a look at the following screenshots.

Above is a high DPI Pocket PC device where a 64x64 icon was expected, but 32x32 icon was available. The system scaled up the icon, thus making it blurry.

Above is a high DPI Smartphone device in which a 44x44 icon was expected, but 64x64 was available. In this case the system scaled down the available icon, again making it blurry. Due to jpg compression, these screenshots do not convey the exact amount of "blurriness", but users will notice a significant difference on real devices.

Bottom-line, don't hard code icon sizes in your code. Instead, use the API to query icon sizes from the system, and include appropriately sized icons in your application.

Feel free to discuss this issue or post any other thoughts about the contest so far. And get ready for the next round of Spot the Bug!