Oberon/ETH Oberon/Tutorial/Rembrandt

These tutorial pages were written by André Fischer (afi) with editorial assistance of Hannes Marais, were hosted at the ETHZ and remain under the ETH license. Related content is found in the system via Book.Tool. Extended content is also available on paper. Some tutorial pages are in the WayBack archive.

Rembrandt User's Guide

[ Text | Contents | Index | Master index]

Tutorial Objective edit

Learn how to create and modify raster pictures using the special purpose editor and the companion panel Rembrandt. This simple and handy tool is very useful to draw artful and suggestive pictures which may among others serve as captions for buttons or icons. A RembrandtDocs.NewDoc is a document containing a single Rembrandt.Frame which is linked to a picture as model. We shall call it Rembrandt document. Picture is defined in the Pictures module.

This picture editing tool shows however some imperfections: the most flagrant shortcoming is its sluggishness.

Pictures may be collected in a private or a public library with the help of the Libraries.Panel

Estimated time: 40 minutes.

Using the Rembrandt panel edit

Desktops.OpenDoc Rembrandt.Panel The panel offers three sets of tools as suggested by the button row [Drawing], [Operation] and [Color] in the Tools section at the top of the panel. The panel just opened already presents a Drawing Tool section and a Color Tool section. In fact, the panel is a "variable geometry" gadget which may contain only just the Tools section or one or more of the other sections which can be inserted by clicking the corresponding button at the top.

In order to practice drawing and editing of drawings while you read this, you are invited to open an Operation Tool first, and then to open an empty Rembrandt document by clicking the [New Picture] button. Adjust the size and the position of the picture to make room for viewing this text and the empty picture on your desktop. You will most probably need a very small surface picture to practice. If you are working in tracks, open the picture directly in the system track or move it there.

The Rembrandt document is very similar to the familiar text document viewer. Noticeable differences are: the mouse focus, the caret, the menu bar and the properties of the special purpose editor.

The mouse focus, or simply mouse, is a cross formed by intersecting horizontal and vertical line segments. It appears as soon as the mouse focus crosses the boundary of the picture. The caret, or insertion point, is set as usual by clicking the left mouse key. It is also a cross, but rotated by 45 degrees. Text may be typed in from the keyboard at the insertion point, but it cannot be edited in place. The backspace key for instance, is inoperant. To switch to another font, you have to set the system font with the command System.Set Font fontName. The menu bar layout is described in Editing a picture.

Most of the work can be performed with mouse clicks or interclicks - keyboard input is rarely needed, sometimes used.

The following description reflects the panel division described earlier.

Drawing Tool section edit

The objects drawn, such as lines, circles or spray traces, have attributes, such as color or width, which must be set first. They are described now.

Drawing attributes edit

Color : the color attribute determines which color is used
- when drawing lines, polygonal lines, rectangles, circles, or with the pen,
- when spraying, smearing, or filling an area, or
- when erasing a color.This attribute is not set by a GUI component in the "Attributes" section, but with the color picker or with the pick color button.

Width : the width attribute determines the thickness, graded from 1 to 50 pixels, of lines, polygonal lines, the perimeter line of rectangles or circles, and other objects. It is adjusted with the slider or by keying a value in the text field gadget.

Spray : the spray attribute determines the intensity of spraying, graded from 1 to 100. It is adjusted with the slider or by keying a value in the text field gadget.

Smear : the smear attribute determines the intensity of blotting, graded from 1 to 8. It is adjusted with the slider or by keying a value in the text field gadget.

Fill : When the check box is checked, rectangles and circles are filled using the current color.

Double : When the check box is checked, the trace of the pen or the spraying can is doubled by another parallel trace. Set the caret in the picture (left click) at the starting point of the double. Then follow the instructions for drawing with the pen or for spraying. The coordinates of the caret's position relative to the starting point, i.e. the distance between the two traces, are memorized and used again for subsequent pen drawing and spraying operations.

Mirror : the mirror attribute determines the mirroring of lines, pen and spray traces, and erasures. Set the caret in the picture (left click) at the point which will become the relative centre of symmetry. The drawing or the erasure action can be mirrored with respect to the X-axis, the Y-axis and a 45 degree bisecting line. It is controlled by the three check boxes in the Mirror frame. If the 45 deg check box is checked, the other two are also. If one of the axis check boxes is deactivated, the 45 deg one is also.

Drawing operations edit

The group of 12 + 1 icons at the left offers all the operations which can be directly executed by mouse clicks; that is, without first having to select an area. The icons and their function are described below in the order in which they appear in the panel, from left to right and from top to bottom. The 12 icons are captions of radio buttons: only one button at a time can be pressed (red LED lit). Clicking on one of the buttons selects the drawing action which will be controlled with the middle mouse key. The last drawing operation can be undone by clicking the Undo button. Each description ends with a list of attributes that may modify the operation.

Draw a line or a polygonal line : Move the mouse to the starting point of the line in the picture, and press the middle mouse key. Now, as you move the mouse around, you will notice a "rubber band" line with one end fixed to that point and the other end following the mouse. If you release the mouse key, the rubber band is fixed between the two points. If on the other hand, you click the right mouse key, the rubber band is also fixed but you may continue moving the mouse. A new rubber band will start at the end point of the first line. Release the right mouse key. A polygonal line is being drawn.

Finally, a freehand arbitrary line can be drawn by dragging on the right mouse key, a limit case of polygonal line.
Attributes: color, width, mirror.

Draw a rectangle : Move the mouse to the starting point of the rectangle in the picture, and press the middle mouse key. Now, as you move the mouse around, you will notice a rubber band rectangle with one end fixed on that point and the diagonally opposite end following the mouse. When the rectangle has the correct size, release the mouse key to fix it.
Attributes: color, width, filled.

Draw a circle : Move the mouse to a point in the picture which will become the centre of a circle, and press the middle mouse key. Now, as you move the mouse around, you will notice a rubber band circle with it's center fixed on that point and the circle's perimeter following the mouse. When the circle has the correct size, release the mouse key to fix it.
Attributes: color, width, filled.

Draw with a pen : Move the mouse to a point in the picture, and drag on the middle mouse key to draw a freehand line until the mouse key is released. Note: This line seems to have the same properties as the limit polygonal line, however it is drawn using a single mouse key, and it can be doubled.
Attributes: color, width, double, mirror.

Erase color : Move the mouse to a point in the picture where you want to start erasing a specific color, and press the middle mouse key. Now, as you move the mouse around, every point covered by the round eraser is erased until the mouse key is released.
Attributes: color, width.

Erase : Move the mouse to a point in the picture where you want to start erasing, and press the middle mouse key. Now, as you move the mouse around, every point covered by the round eraser is erased until the mouse key is released.
Attributes: width, mirror.

Spray : Move the mouse to a point in the picture where you want to start spraying, and press the middle mouse key. Now, as you move the mouse around, droplets of the selected color are sprinkled randomly within the specified width, until the mouse key is released.
Attributes: color, width, double, mirror, spray.

Smear : Move the mouse to a point in the picture where you want to start smearing, and press the middle mouse key. Now, as you move the mouse around, spots of the selected color are smeared within the specified width, until the mouse key is released.
Attributes: color, width, smear.

Stamp : Copies the contents of the clipboard any number of times at specified locations. Move the mouse to a point in the picture where you want to insert (paste) the clipboard contents, and press the middle mouse key. Drag on the key to move the clipboard picture. Interclicking the left mouse key copies the clipboard to the picture. The operation is not performed if the clipboard is empty.
Attribute: none.

Clone :
Attribute: width.

Pick a color : Move the mouse to a point in the picture where you want to pick a color, and press the middle mouse key. Now, as you move the mouse around, you will see the picked color appear in the rectangle, in the Color Tool section. When you release the mouse key, that color will be used for the next operations until it is changed again. Also, when the mouse key is released, the last operation selected is active again.
Attribute: none.

Fill a closed area : Move the mouse to a point inside a closed area to fill with a specific color, and press the middle mouse key.
Attribute: color, mirror.

Undo last operation : reverses the last operation. This applies to all of the drawing operations described before, except picking a color, and also to the operations on a selection move and cut.
Attribute: none.

Operation Tool section - Kind of selection edit

There are three methods for selecting objects in a picture. To select one, middle click on one of the three buttons "Kind of selection". They are radio buttons.

Area selection edit

To select all the objects or parts of objects contained in a rectangular area, move the mouse to the starting point of the rectangle in the picture, and press the right mouse key. Now, as you move the mouse around, you will notice a rubber band rectangle with one end fixed on that point and the diagonally opposite end following the mouse. When the rectangle has the correct size, release the mouse key to fix it. To deselect the area, click the right mouse key again or press ESC.

Object selection edit

To select an object, move the mouse on any point of the object and click the right mouse key. All the contiguous points with the same color will be selected. It is thus possible to select a very complicated area with a single click. The selected object is entirely contained in a thick selection frame. If the selected object is too large to be entirely visible in the viewer, the selection frame will also not be entirely visible. To deselect the object, click the right mouse key again or press ESC.

Freehand selection edit

To select an arbitrary area (of any shape) in a picture, move the mouse to the starting point of what will become the perimeter line of the area, and press the right mouse key. Dragging on that key causes a rubber band line to appear. Repeatedly interclicking the middle key while dragging, causes a polygonal line to be drawn. When both keys are released, the polygon is closed and a selection frame appears. If you drag of both keys (right + middle) a freehand line is drawn. If the selection frame subsumes to a simple line (not enclosing an area), the entire picture is selected. To deselect the area, click the right mouse key again or press ESC.

Selection of the entire picture edit

??

Operation Tool section - Operations on selection edit

These operations are controlled with the middle mouse key, only if a selection exists. Otherwise, a drawing operation is executed.

The three following buttons are radio buttons.

[Move] Move or copy the selection. Move the mouse inside the picture, and press the middle mouse key. Drag on that key until the new position is reached, then release the mouse key to end the operation. If you interclick with the left mouse key before releasing the key, the selection is copied at the new position (instead of being moved).

[Scale] Scale the selection. Move the mouse inside the picture, and press the middle mouse key. A rubber band rectangle showing the new dimensions of the selected area appears. Now, as you move the mouse around, one corner of rectangle will follow the mouse. The current scaling, relative to the original size, is displayed in a highlighted text field, in the form "X: 79 % Y: 114 %". When the correct scaling is obtained, release the mouse key to end the operation. The transformed selection is presented in a new unnamed picture frame, thereby leaving the original picture unchanged.

[Rotate] Rotate the selection. Move the mouse inside the picture, and press the middle mouse key. A rectangle showing the dimensions of the selected area appears. Now, if you move the mouse horizontally to the right, the rectangle rotates anticlock-wise. Conversely, it rotates clockwise when the mouse moves to the left. The current rotation angle is displayed in a highlighted text field, in the form "xy". When the correct rotation angle is obtained, release the mouse key to end the operation. The transformed selection is presented in a new unnamed picture frame, thereby leaving the original picture unchanged.

[Mirror vertically] Mirror the selection with respect to the horizontal axis. The transformed selection is presented in a new unnamed picture frame, thereby leaving the original picture unchanged. If there is no selection but a picture is marked, the entire picture is mirrored. If there is no selection and no marking, no action is performed.

[Mirror horizontally] Mirror the selection with respect to the vertical axis. The transformed selection is presented in a new unnamed picture frame, thereby leaving the original picture unchanged. If there is no selection but a picture is marked, the entire picture is mirrored. If there is no selection and no marking, no action is performed.

[Make icon] Make an icon of the selected area. Click on the little square in the iconizer to flip it, and key in the width and height of the icon in pixels. The default dimensions are 32 * 32. The transformed selection is presented in a new unnamed picture frame, thereby leaving the original picture unchanged. If there is no selection but a picture is marked, the entire picture is mirrored. If there is no selection and no marking, no action is performed.

[Print *] Print the marked picture on the printer defined on the other side of the iconizer. Click on the little square in the iconizer to flip it, and key in the printer name. The default value is "LPT1".

The next three buttons control operations making use of the clipboard.

[Cut] Cut the selected area from the picture and copies it to the clipboard. No action is performed if there is no selection.

[Copy] Copy the selected area to the clipboard. No action is performed if there is no selection.

[Paste] Paste the contents of the clipboard in a picture, set the caret first. The caret's position determines the lower left corner of the pasted area. Then, clicking on this button, inserts the clipboard contents at that position. No action is performed if the caret is not set, or if the clipboard is empty.

[New Picture] Open an unnamed Rembrandt document, ready for editing a picture. The picture is either the selected area of a picture or by default, an empty picture. Click on the flip button in the iconizer to flip it, and key in the width and height of the picture in pixels. The default dimensions are 640 * 400.

[Show] Update the list of currently available pictures in the list gadget. A picture in this list may be opened directly by middle clicking on it.

Color Tool section edit

This section serves as a control panel for selecting the color attribute, for changing a color, and for setting the color palette. Windows reserves 20 colors (out of 256) for itself. Hence, these colors cannot be changed under Oberon and have been allocated as the first 20 colors in the Oberon palette. If you require more color use the instructions in UserGuide.Text. For MacOberon, the 16 first colors cannot be changed.

To set the color used by the drawing tools use the color picker to select a color. The selected color is displayed in the rectangle at the right and is assigned to the color attribute. You can define your own color by adjusting the three sliders R, G, B, which define the amount of primary colors to use. Alternatively, you may use the three associated text fields. Changes are immediately reflected in the color sample rectangle.

The [Dither] iconizer is used to change the colors of the marked picture as follows:

Click on the flip button in the iconizer to flip it, and adjust the intensity and the saturation of colors with the sliders.

The buttons have the following meaning:

[Load Palette] loads the display palette from the marked picture.

[Store Palette] stores the display palette in the marked picture.

[Darken] darkens the display palette.

[Lighten] lightens the display palette.

[Reset Palette] resets the display palette to its standard value.

[Reset Color] resets the selected color to its standard value.

Editing a picture edit

Using the Rembrandt panel, you have learned how to start editing a picture, either a new one by clicking on New Picture, or an existing one selected among the pictures stored on your system. In both case the Oberon command executed is (try it): Desktops.OpenDoc pictureName.Pict

The menu bar features two buttons used for zooming.

[+] magnifies the selection, or the entire picture if there is none. The button may be clicked 5 times in succession to obtain a magnification of 16. This makes it very easy to retouch pictures pixel-wise.

[-] reduces the entire picture. The button may be clicked a maximun of 5 times in succession until the original size is restored, and not beyond.

Useful hint: to ease picture retouching, make a copy of the picture first, then magnify either of the two views as required. Whatever is retouched in the zoomed picture will be reflected in the original.

Editing with the mouse edit

You have learned how drawing is performed with the middle mouse key that is, inside the drawing area, middle mouse clicks have a different meaning. Otherwise, mouse clicks and interclicks fully comply with the Oberon standard described by Wirth and by Fischer & Marais.

Selection

Clicking the right mouse key (anywhere in the viewer) selects the entire picture. The cursor changes to a flat hand and the entire white area is surrounded by a frame. Clicking again, deselects the picture and restores the cursor.

Pressing the key and dragging on it, tracks the selection which is delimited by a rubber band rectangle. When the key is released, a selection frame is drawn. When copying a selection, the caret may be set in a Rembrandt document different from the viewer containing the selection.

Moving a picture

Moving the white area in the viewer can be done in two ways. First, select the entire area with a right mouse click, then press the middle mouse key and drag. Second, if the area does not cover the viewer entirely, place the mouse focus outside the area, press the middle mouse key (the cursor changes to a flat hand), and drag. In both cases, when the white area is correctly positioned, release the key.

When editing is completed, name the picture by editing a name in the nameplate and store the picture. Picture names must be suffixed with ".Pict".

To print a picture you may either:

mark it and click the "Print *" button in the panel or

execute the command: Desktops.PrintDoc printDevice (pictureName | *) ~