Using the Image Editor

Index

• Introduction
• Files vs. Resource Methods
• Starting the Image Editor
• Drawing in the Image Editor
• "Edit Modes"
• Menu & Toolbar Functions
• Images with Alpha Channel
• Limitations and Bugs
• Special Notes for Icons under Windows
• Recent Changes / New Features

Introduction

• Tool Bar (MenuPanels)
• Label and Button
• Menu

• List
• Tree List
• Table

• Window and Taskbar icons

Files vs. Resource Methods

Commonly used and sharable images are found in the GenericToolbarIconLibrary-class and its view-style specific subclasses, whereas application-specific images are usually kept in the application class itself.
Notice that the global variable ToolbarIconLibrary is dynamically rebound to one of the concrete libraries, depending on the view style. Programmers should not refer to images in one of the subclasses, but instead always to ToolbarIconLibrary.

Image resource methods are usually invoked during the setup of an application instance, if an image has been specified for one of the above listed widgets. (for example, for a Label-widget, if the labelIsImage flag is turned on).

For enhanced performance, the generated resource methods remember their generated bitmap image objects in a cache (a dictionary inside the Icon class). Within this cache, the resurce method's name (class plus selector) are used as key. When first invoked, the image is created from bitmap information and cached for further calls. Be sure to flush this cache, if an image-resource method is modified by hand and recompiled (the imageEditor does this automatically for you, when an image is saved, but the system browser does not, when you edit the method's code).
To avoid large ST/X snapshot images (not to confuse with bitmap-images), all 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.]

Warning:
If you manually copy-paste such a resource method's code, do not forget to modify this key in the source code. Otherwise, the cache slot will be overwritten by the other image. Alternatively, open an image editor on the old method's image, and save the image back into the new resource method.

Starting the Image Editor

1. by pressing the   -button in the toolbar 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   icon)
4. by evaluating one of
• ImageEditor open
• ImageEditor openOnImage:anImage
• ImageEditor openOnFile:aFileName
• ImageEditor openOnClass:aClass andSelector:aSelector
5. many other tools (inspector, file browser) offer an option to open an image editor

Image editors also appear as embedded editor in the new system browser, when the "Use Embedded Editors" option flag is enabled AND an image resource method has been selected.

The editor consists of 3 major parts:

• the "Color/Cut/Fill" parameter area at the upper left,
• the preview area at the lower left,
• the drawing (or edit) area at the right

Drawing in the Image Editor

Pressing the ESCAPE-key while still holding down the mouse button aborts a current draw operation. Also, the last few drawing operations can be undone by the toolbars "Undo" function.

The kind of draw function is selected by the "drawing mode". This can be changed either via the main menu, or one of the mode buttons in the central vertical mode toolbar.

The drawing functions (point, rectangle, fill) use the current selected drawing color (from the left color list).

Notice that both the first and the second mouse button can be used for drawing. Each has its own assigned drawing color, which is specified by selecting one of the colors in the colormap (select the button which is to be affected using one of the mouse-button icons above the color list).

Edit Modes

• Point

By clicking or continuously holding down a mouse button over the image edit area, pixels are drawn with the current selected color (like drawing with a pen). The point size can be changed via the "Settings" menu.
• Spray

By clicking or continuously holding down clicking a mouse button over the image edit area, pixels are spray-like drawn with the current selected color. The spray-area size can be changed via the "Settings" menu.
• Smooth (only in menu)

Applies a smoothing filter on the pixel under the mouse pointer. The pixel's color is replaced by the average color of the 1-pixel area around the clicked point.
• Rectangle

Select and drag a mouse button over the image edit area, to draw a rectangle with the current color.
• Filled Rectangle

Select and drag a mouse button over the image edit area, to draw a filled rectangle with the current color.
• Circle

Select and drag a mouse button over the image edit area, to draw a circle with the current color.
• Filled Circle (only in menu)

Select and drag a mouse button over the image edit area, to draw a filled circle with the current color.
• Fill (Flood Fill)

By clicking a mouse button over the image edit area at some point, surrounding pixels which have the same color are drawn with the selected color (i.e. flood-fill).
• Mask Outside Rectangle (only in menu)

First select a rectangular area. When the mouse button is released, the image mask is changed so that all pixels outside the rectangle are masked.
• Mask Outside Circle (only in menu)

First select a rectangular area. When the mouse button is released, a circle is placed into the rectangle and the image mask is changed so that all pixels outside the circle are masked.
• Copy

Select and drag a mouse button over the image edit area, to define a rectangular area. When releasing, the subimage defined by this frame is copied to the clipboard.
• Paste With Mask

By clicking a mouse button over the image edit area, the image in the clipboard can be pasted at that position. If the shift-key is held down, the clipboard image's corner (bottom-right) is aligned with the click point; otherwise, the origin (top-left) is aligned to that point.
Both the color and the mask are pasted.
• Paste Under

For images with a mask:
only paste pixels which are currently masked; the effect looks like the pasted image "shining through" the previously masked pixels. (For images without a mask, this is the same as "Paste with Mask" above)
Paste-under is useful if two images are to be combined, where the pasted image should pasted under the original image.
• Paste Over

Only unmasked pixels are pasted. The mask (if any) is not affected by this operation (i.e. the original mask controls pixel transparency).
 
• Special Edit Operation

First select a rectangular area in the image, then choose one of the special functions in the appearing dialog. This function will be applied to the selected area only.

Available special functions are:

• Edit separately
  Extracts the selected area into a new image and opens another editor on it.

• Extract subimage
  Extracts the selected area to edit this image (i.e. effectively crop off the outside of the selected rectangle)

• Flip
  Mirror the selected area (either vertical or horizontal)

• Slightly Brighter/Darker
  Makes the pixels in the selected area slightly brighter or darker

• Brighter/Darker
  Makes the pixels in the selected area brighter or darker

• Make Gray
  Changes the pixels in the selected area to greyscale (b&w image)

• Engray
  Changes the color saturation in the selected area slightly towards greyscale (b&w image)

• Gray Pattern
  Draws an alternating grey pattern over the selected area

• Invert
  Inverts pixels in the selected area

• Shift in Color Space
  Changes the hue value of the pixels in the selected area

• Encolor
  Colorizes the pixels in the selected area

• Gradient Fill
  Fills the selected area with a color1/color2 gradient. Make sure to first select the two colors in the color-list (i.e. assign color1 to the left mouse button, color2 to the right button)

• Auto Gradient Fill
  Fills the selected area to fit nicely. This looks at the boundary colors and fills the area with a matching gradient.

Menu & Toolbar Functions

Basic Load and Save Functions

Menu	Button	Description
New Image Editor		Opens another Image Editor (useful to merge multiple images into one).
New...		Opens a dialog with choices of size and color depth to create a new image.
New From Clipboard		Loads the image contained in the clipBoard (see "Copy to ClipBoard" below).
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 image's mask only into it.
Copy to ClipBoard		Saves the image in the clipBoard (see "New from ClipBoard" above).

(*)

The file's extension determins its format. Currently supported are tiff, png, gif, bmp, xbm and xpm.

Edit Functions

Drawing-Mode SelectionMenu

Colormap and Image Manipulating Functions

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.
 

The Color Map

The set of colors which are used by a bitmap image are held in the image's color map. Depending on the size of the colormap, different classes are used to represent the image Only bitmaps with a depth up to 8 do actually have a colormap, Wide bitmaps (i.e. with 16, 24 or 32 bits per pixel) can also be shown and edited; however, these do not have a colormap. Instead, the pixels of the image directly define the r/g/b values of a pixel's color. For those non-palette images, the used colors are shown in the colormap area.
 

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 colormap provides its own popup menu with functions to add/remove or edit colormap entries.

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

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

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

Images with Alpha Channel

When an image with alpha channel is being edited, the current drawing alpha value (that is the alpha value attached to the drawn pixels) is shown in an additional input field above the colormap. If the mask-pseudo-color is selected for drawing, only the alpha value is applied to the pixel (i.e. the pixel color is unchanged by the drawing).

Limitations and Bugs

• Some functions are unsupported (or lead to a debugger to open) when applied to images without colormap.
• It may not be useful to edit big images.
• Animated gifs can only be viewed and individual frames be extracted. It is currently not possible to generate animated gif image sequences.

Notice - after all, this was written as an icon-editor - not as a general image manipulation program. For real image processing, we recommend tools like gimp, photoshop or a bitmap editor like ms-paint.

Special Notes for Icons under Windows

So, to prevent this, make sure that:

1. the palette contains a black color
   (if required, add a color to the palette)

2. the palette is sorted, so that the black color is the first in the palette
   (if required, sort the colors using the corresponding menu function)

3. masked pixels have a 0 (zero) pixel value
   (if required, clear masked pixels using the corresponding menu function)

Recent Changes / New Features

• Crop and AutoCrop Crop can be done manually, or by having the editor search for constant-colored edges automatically.

• Mask Outside Rectangle/Circle

• Flood Fill Tolerance Setting
  allows for easy flood fill of areas with slight color differences (eg. gradiented backgrounds)

• Gradient Filling
  fill a gradiented background with perfect fitting edges, by first choosing "Special Operation", then selecting a rectangle which is 1 pixel larger than the area to be filled. The editor will fill the background with a gradient which fits correctly into the area.

Copyright © 1992-2017 Claus Gittinger, all rights reserved
Copyright © 1998-2017 eXept Software AG, all rights reserved