Ide/Resource Editor/Graphics Editor

Graphics Editor Window
When the Graphics Editor is started to edit an image, the Graphics Editor window will appear on the screen:



The Graphics Editor window is divided into several areas. Each area is responsible for a definite function or combines a number of tools, which are associated by purpose.

Graphics Editor Title Bar
The title bar of the Graphics Editor window serves to display information about the type of the image (icon, cursor or bitmap), the image size in pixels, the number of colors which are available for use, and the name of the file which is opened for the current image.

For example, the title bar ProjectIcon.ico Size 32*32 Colors:16 says that:
 * the type of current image is an icon;
 * the size of the current image is 32*32 pixels;
 * 16 colors may be used in the image;
 * the name of the file, which is opened for current image, is ProjectIcon.ico.

Graphic Field
The Graphic Field is situated in the middle of the Graphics Editor window.



The Graphic Field lets you see and edit the current image in expanded mode. The Graphic Field consists of small cells, where each cell corresponds to one pixel on the actual size image. The number of cells in each horizontal row and the number of cells in each vertical column give the image size, which is displayed in the title bar of the Graphics Editor window. It is possible to turn on and off a grid in the Graphic field.

Image Screen
To the right of the in the Graphics Editor window you can see the Image Screen, painted in background color. In the middle of Image Screen you can see the current image in actual size on the selected background color. By changing the background color you can see how your current image will look in various surroundings.



Icon

Under the, you can see the Icon drop-down list:



You can choose, which of the icon images in the current file to load into the editor.

Move Toolbar
(Moving, Rotating and Flipping an Image) To the right of the Graphic Field, under the, you can see the Image Move toolbar:



By clicking the appropriate button you can move, rotate or flip the current image.

Notice that the Resource | Move menu contains the same commands as the Image Move toolbar.

Color Palette
At the top of the Graphics Editor window you can see the Color Palette.



The Color Palette lets you choose colors for the drawing operations:



Color Modes Toolbar
Under the you can see the Color Modes tool box:

The Color Modes toolbar

The Color Modes tool box is used to set:



Draw and Edit Toolbar
Using Draw and Edit Tools

To the left of the Graphic Field of the Graphics Editor window you can see the Draw and Edit Toolbar. It contains the main tools for drawing and editing:

The Draw and Edit toolbar

The Graphics Editor provides a number of tools to make creating your image easy. The tools can be activated either from the Resource | Tools menu or from the Draw and Edit toolbar.

Draw and Edit Tools
By clicking any of the buttons in the Draw and Edit toolbar you can select the required draw or edit tool. Here are short descriptions of them:

Mirror Style Dialog
The Mirror Style dialog is activated by the Resource | Set Mirror Style menu command in the Task window menu:

The Mirror Style dialog

The Mirror Style dialog is used to choose the appropriate axes of symmetry for the Mirror tool.

The Mirror tool sets the points that are the reflections of the cursor trail point relative to the different axes of symmetry.

When you place the mouse cursor onto some point inside an edited image and click the left mouse button, then we say that you set the cursor trail point.

Using the Mirror tool, you can (by one click) set up to 8 reflections of the specified cursor trail point. A reflection point will be painted to each checked ON type of reflections. They are:

Main -> Trial
 * When checked ON, then paints the clicked cursor trail point.

Main -> Reverse
 * When checked ON, then paints the point opposite to the clicked cursor trail point.

Reflect -> Horizontal
 * When checked ON, then paints the point, which is the horizontal reflection of the clicked cursor trail point.

Reflect -> Vertical
 * When checked ON, then paints the point, which is the vertical reflection of the clicked cursor trail point.

Orthogonal -> Left
 * When checked ON, then paints the point, which is 90 degrees left rotation of the clicked cursor trail point.

Orthogonal -> Right
 * When checked ON, then paints the point, which is 90 degrees right rotation of the clicked cursor trail point.

Reflect Diagonal -> Left
 * When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the left upper corner to the right lower corner of the image.

Reflect Diagonal -> Right
 * When checked ON, then paints the point, which is the reflection of the clicked cursor trail point relative to the diagonal line drawn from the right upper corner to the left lower corner of the image.

Setting the Draw and Edit Colors
To choose colors for the drawing and editing tools you can select one of the following four switches.

The Color Modes toolbar with selected "color" mode

The color of selection will be used for the drawing. It is possible to choose a new color for the active selection by a click in the.

The color and the alt-color can be used in all drawing operations, the screen (or transparent) and inverse selections have different purposes depending on the image type.

Note. There are 16 color fields on the, and all of them are available for drawing and editing in the.

Setting the Background Color
To see how your image looks on the different background colors or to color the image fragments in "transparent" (to let the background color show through) use the screen color selection.

The "screen" mode should be used for Background color

To change the background color, be sure that the screen switch is selected, then you can choose the background color by clicking in the. The background color on the, any details of the image, which were colored in (transparent) background color, and the screen indicator of Color Modes toolbar, all will change to the new color.

Usage of the "screen" Colors for Bitmaps, Cursors and Icons

Setting the Inverse (to Background) Color
Using the inverse color is a convenient way to mark the boundary of the image or to color the details, which should be always be in contrast to any background color.

The "inverse" mode should be used for Inverse color

Usage of the Inverse color for Bitmaps, Cursors and Icons

Understanding Colors

 * Colors for Bitmaps

The Visual Prolog Graphics Editor can create bitmaps with either 2 or 16 colors. A pixel in a bitmap can not have the inverse and screen colors.


 * Colors for Cursors

Any pixel in a cursor can have one of four color control values:

To understand how this works, you should create a little cursor having four areas, with these four color control values. Then select the Resources | Tools | Test Cursor, and study how the cursor looks.

In this test cursor the left upper quoter of the cursor is painted with the "color" and the left bottom quarter is painted with the "inverse"

Place the cursor over the Grid and you will see effects of "inverse" color.


 * Colors for Icons

Icons can either have 2 or 16 colors, and in addition to those, the pixels can also use the and colors.

Cursor Handling Tools
Setting Cursor Hot Spots

When working with a cursor, the menu command Resource | Set Cursor Hotspot activates a dialog box:

Defining the Hotspot for a cursor

As long as this dialog is open you can point to the pixel, which is to be the cursor Hotspot. This pixel in the cursor will determine the screen pixel which will be acted upon and which will be reported during a mouse action.

Testing a Cursor

When working with a cursor, the Resource | Tools | Test Cursor menu item allows you to see what your newly designed cursor will look like.

Undo / Redo Buffer
The Graphics Editor supports Edit|Undo and Edit|Redo operations, just as the other editors do.