Icon Tutorial

This page describes how to create icons for the WPS-Wizard icon engine. One of the key features of the engine is that you don't have to paint every single icon in an image manipulation application. Instead there is support for icon composing which means you build your image using several parts which are blended together. For example one choses a base icon and another image is resized and painted on top of that one and maybe additional text is added. The resulting image is not stored as an icon on the users system but only the paint commands are recorded in an initialization file and the image is constructed on the fly as soon as the icon is loaded by the system.
The images used for compositing have PNG format so alpha blending can be used.

Note: when talking about 'icon' in the following text an icon built by the icon engine is meant not one of the default eCS system icons.

How icons are stored

The engine uses paint commands recorded in an initialization file which are interpreted during icon loading. A pointer to the folder holding this ini file is stored in the users ini file OS2.INI:

   Application key name:  IconTheme
   Key name:              IconFolder
   Contents:              Path to folder holding the INI file

Be sure to keep the spelling for the keys.

Format of the initialization file

The name of the initialization file must be:

   WPSWIZ-THEME.INI

All images used for composing icons are located in the directory holding the ini file or a subdirectory of it. The engine uses the ini file loction as an anchor and searches all parts referenced in paint commands relative to this anchor point.

Icons are searched based on the objects class name and the object ID. Custom icons created from the settings notebook of an object are referenced using a numeric key. This is not described here.

---

For every class in the system there may be a unique icon. This is used when no object specific icon can be found.

   Application key name:  Class name, e.g. CWDataFile, WPFolder, AMouse
   Key names:             Various, will be described later
   Contents:              Paint commands and references to files  

Note that the application key name must reflect the exact spelling of the class.

---

For an object specific icon the object ID is used as the application key:

   Application key name:  Object ID, e.g. <XWP_SCREEN>, <WP_OS2SYS>, <WP_DESKTOP>
   Key names:             Various, will be described later
   Contents:              Paint commands and references to files  

The application key must be exactly like the ID, this includes the opening and closing braces.

---

The Search order for icons is the following:

1. Object specific icon referenced by numeric ID
2. Object specific icon referenced by object ID
3. Class specific icon referenced by class name
4. Object specific eCS icon
5. Class specific eCS icon

As can be seen the icon engine will fall back to the eCS icon handling when no engine icon can be found.

---

Creating an icon using compositing

The easiest way to create an icon for the engine is combining several icons to form a new image. The following sections will step through this compositing process. As an example the image for the multimedia folder from the Noia Warm icon set will be used.

(Note that this icon is scaled to 120x120 pixels)