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:
-
by pressing the
-button or
selecting the Tools/Image Editor menu item in the launcher
-
by pressing the Image Editor-button in the Image section
of the Menu Editor
-
by double-clicking
on an image resource method in a System Browser
(those are marked with an
icon)
-
by evaluating one of
-
ImageEditor open
-
ImageEditor openOnImage:anImage
-
ImageEditor openOnFile:aFileName
-
ImageEditor openOnClass:aClass andSelector:aSelector
After startup, an Image Editor appears as shown in the next figure:
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... |
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.
|
| Uncrop... |
Add a margin to the image.
|
| Shift... |
Opens a dialog to shift/rotate the pixels
horizontally or vertically.
|
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 mouse buttons are used for image modification (default: pixel drawing).
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
- Point
By (continuously) clicking a mouse button over the image edit area
the pointing pixels are colored with the current selected color.
- Rect
By selecting and dragging a mouse button over the image edit area a
rectangle-outline with the current selected color can be drawn.
- FillRect
By selecting and dragging a mouse button over the image edit area a
filled rectangle with the current selected color can be drawn.
- Fill
By clicking a mouse button over the image edit area at a certain pixel
point the surrounding pixels having the same color are colored with the
current selected color (i.e. flood-fill).
- Copy
By selecting and dragging a mouse button over the image edit area a
rectangle area can be defined in order to copy the image in that selected
area to the clipboard.
- Paste
By clicking a mouse button over the image edit area at a certain pixel
point the image of the clipboard will be pasted at that pointed pixel.
The mask (if any) is not affected by this paste operation (i.e. the original
images mask controls pixel transparency).
- Paste Under
Like paste, but only pastes those pixels, which are not
equal to the selected color (see colormap below).
By selecting the background, paste-under is useful if two images are to be
combined, where the pasted image should pasted under the original image.
- Paste With Mask
Like paste, but also pastes mask information.
i.e. the pasted mask controls pixel transparency.
The Color Map
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.
Special Notes for Icons under Windows
Under win32, images which are used as Window icons must have a black color as their first palette color.
Otherwise, masked pixels will not be transparent, and the windows decoration
and taskbar icons might look wrong.
So, to prevent this, make sure that:
- the palette contains a black color
(if required, add a color to the palette)
- the palette is sorted, so that the black color is the first in the palette
(if required, sort the colors using the corresonding menu function)
- masked pixels have a 0 (zero) pixel value
(if required, clear masked pixels using the corresonding menu function)
Recent Changes
Copyright © 1998 eXept Software AG, all rights reserved
Doc $Revision: 1.16 $ $Date: 2007/11/19 13:07:23 $