[prev] Using the Menu Editor [up] Programming Tools [next] Using the Help Tool
 

Using the Image Editor

Index


Introduction

The Image Editor of ST/X allows you to define bitmap images - especially (but not limited to) for use with the following widgets: The Image Editor can generate an image resource method in the image specs category of the class protocol, which returns the bitmap image when invoked.
This image resource method is invoked by the widgets of the application, if that methods selector was specified as label selector (the labelIsImage flag must be turned on).
For enhanced performance, the generated resource methods caches the bitmap image in the Icon class, when first invoked, and returns this cached image from further calls.
To avoid large ST/X snapshot images (not to confuse with bitmap-images), the cached bitmap images are deleted from this cache, whenever an ST/X-snapshot image file is saved.

A typical resource method looks like:

newImageIcon
    "Generated by the Image Editor"

    "ImageEditor openOnClass:self andSelector: #newImageIcon"

    <resource: #image>

    ^Icon
        constantNamed:#'ImageEditor newImageEditor'
        ifAbsentPut:[(Depth4Image new) width: 22 height: 22; etc.]
Here, #'ImageEditor newImageEditor' is the identifier for the cache dictionary, and the value in brackets represents the bitmapImage.
 
 


Starting the Image Editor

There are 4 ways to start the Image Editor:
  1. by pressing the  The Start Button of the Image Editor -button or selecting the Tools/Image Editor menu item in the launcher
  2. by pressing the Image Editor-button in the Image section of the Menu Editor
  3. by double-clicking on an image resource method in a System Browser (those are marked with an  An icon representing an image resource method icon)
  4. by evaluating one of
 After startup, an Image Editor appears as shown in the next figure:

A View of a Image Editor
 
 


Functions of the Image Editor

The Image Editor offers all functions for loading, saving, and modifying bitmap images. The functions are as following:

Basic Loading and Saving Functions

Menu Button Description
New Opens a dialog with choices of size and color depth to create a new image. 
Load Opens a dialog for selecting and loading an image from a resource method of a class.
Load from File Opens a dialog for selecting and loading an image from a file.
Grab from Screen Lets you pick a rectangular area on the screen.
Save Saves the image as resource method in the current class and selector. 
Save as Asks for class and selector and saves the image as resource method. 
Save to File Asks for fileName and saves the image into it. 
Save Mask to File Asks for fileName and saves the images mask only into it. 
 

Edit Functions

Edit Menu Description
Undo Reverses the last action.
Flip - Horizontal Flips the image vertically.
Flip - Vertical Flips the image horizontally.
Resize... Opens a dialog to resize the image.
If its made larger, the new area will be empty,
If its made smaller, the area will be chopped off.
Magnify... Opens a dialog to magnify the image.
Rotate... Opens a dialog to rotate the image in degrees.
Crop... Opens a dialog to cut off margins of the image.
You may either manually specify the number of pixels
which are to be chopped off,
or use the autocrop function, which detects margins
consisting of constant color.
The autocrop function is useful to remove frames around
images.

Colormap Manipulating Functions

ColorMap Menu Description
n-Plane Converts the image to an n-plane colormap image.
You will get a warnBox, if the number of colors
exceeds the available number of colorMap slots.
n-Plane + Mask Converts the image to an n-plane colormap image
with an additional mask plane (transparent pixels).
You will get a warnBox, if the number of colors
exceeds the available number of colorMap slots.
Compress ColorMap Removes unneeded colors from the colorMap.
Sort ColorMap Sorts the colorMap by red-green-blue.
Reduce number of colors Reduces color resolution.
You will be asked for the number bits which are
to be stripped off.
This is useful when 24bit images are to be converted to
n-plane palette images.
 

Mouse Button Functions

The View of a Mouse Button Functions Panel

The mouse buttons are used for image modification. For both left and right mouse buttons, a separate color can be defined. By switching the toggle menu items ColorMap-Left/Right-Mouse-Button, the drawing color of the button can be seen and defined.
You can also pick a color in the edited image, by clicking into the magnified image view while holding down the shift-key.
 

Pixel Edit Functions

The View of a Pixel Edit Functions Panel

The Color Map

A View of a Color Map Table

The set of colors which are used by a bitmap image are held in the images color map. Depending on the size of the colormap, different classes are used to represent the image
There are (currently) 4 depths which can be defined:
 
 Color Depth (bits per pixel)   Number of Colors   Real Class
  1  1 -   2  Depth1Image 
 2  1 -   4  Depth2Image 
 4  1 -  16  Depth4Image 
 8  1 - 256  Depth8Image 
 
The Image class is an abstract class. Depending on the size of the colormap, instances of one of the Depth*Image classes are used to represent the real image.

Adding a Color

After loading an image, the color map table only shows its used colors. In order to use a color which is not available in the color map, you have to increase the images depth by selecting one of the items from the Color Map menu.
You may also reduce the colormap size, by selecting a smaller depth from the menu - however, if the number of colors exceeds the colormaps size, colors will be lost and the image may not look as expected afterwards.

Defining your own initial colormap

The colormap of a new image is defined by the Image Editor's listOfColorMaps class method. This method can be redefined if you prefer some other default colormap.
 

The Image Mask

The mask of an image defines which pixels are painted as opposed to being transparent.
Technically, the mask is another (depth1 / monochrome) image, where each black pixel makes the corresponding pixel of the actual image invisible (i.e. transparent).

All pixel edit functions treat the mask color like any other ordinary color. In the color map, the mask color is always the first entry (if defined).
 

Picking a color for drawing

Press the SHIFT-Key while clicking on a pixel in the drawing area, in order to pick a color for drawing.

Limitations and Bugs

The imageEditor cannot handle images without a palette (colormap) - i.e. it is not (yet) possible to edit true-color (24-bit) images.

It may not be useful to edit big images.

Notice - after all, this was written as an icon-editor;
not as a general image manipulation program.

Recent Changes


[stx-logo]
Copyright © 1998 eXept Software AG, all rights reserved


Doc $Revision: 1.13 $ $Date: 2002/10/29 09:54:32 $