Previous Next Contents Index Doc Set Home


Other Editors

5

5.1 Introduction

WorkShop Visual provides special editors which simplify certain common tasks. You can use these editors to perform the following tasks:

The editors are used in this chapter to customize the tutorial interface. They are invoked from the widget resource panels and the result added to the appropriate field in the resource panel. It is also possible to display the Color Selector, Pixmap Editor and Font Selector from the "Tools" menu. The editors can be used independently of any selected widget.

5.2 Setting Colors

Because foreground and background colors are the basic elements of all widgets, these resources are located on the Core resource panel. Use the following instructions to set these colors for widgets in the hierarchy.

1. Select the "Strawberry" ToggleButton icon in the hierarchy.

2. Click on the "core resources" button on the toolbar or pull down the Widget Menu and click on "Core resources...".

In previous chapters, you entered settings for resources directly in the text boxes on the right side of the resource panels. To use the editors described in this chapter, click on the buttons on the left side of the resource panels instead.

3. On the "Display" page, click on the "Foreground color" PushButton.

WorkShop Visual displays the Color Selector, shown in Figure 5-1:

Figure  5-1 The Color Selector

5.2.1 Selecting from the X Colors List

X provides many pre-named colors. These standard colors make a good starting point for selecting colors for the interface.

1. Scroll down through the X colors displayed in the scrolled list.

2. Select a color.

As you select colors, the currently selected one is shown on the right at the top of the dialog. On the left, the original color is displayed so that you can compare the two.

Choose a dark reddish color such as maroon. These colors are clustered about half-way down the list. The selected color is displayed at the top of the Color Selector.

3. Click on "Apply" in the Color Selector.

This applies your selection to the "Foreground color" resource on the Core resources panel. To apply it to the widget, you must:

4. Click on "Apply" in the Core resources panel.

The "Strawberry" ToggleButton changes color in the dynamic display. Don`t worry if it looks like the background color changes instead of the foreground color; this is because the widget is selected in the hierarchy and the selection is reflected in the dynamic display by inverting the foreground and background colors.

To see the true colors:

5. Select the Shell in the hierarchy.

Now you can see the true foreground and background colors of the "Strawberry" ToggleButton in the dynamic display.

5.2.2 Using Color Components

Selecting from the X colors list is only one of several ways to specify a color. Another method is to create the color using components. Use this technique to set the background color of the "Strawberry" ToggleButton:

1. Select the "Strawberry" ToggleButton in the hierarchy.

2. On the Core resource panel, click on "Background color".

3. Use the sliders to change the color.

The sliders at the top of the Color Selector let you individually control the red, green and blue components and the hue, saturation and brightness of your color. You can use the sliders in any order. Changes are reflected immediately at the top of the Color Selector. Notice that the color name is a concatenation of values.

Since this is a background color, a light (non-saturated) color is recommended. This provides a good contrast for the labels, which are darker.

4. When you are satisfied with the color, apply it by repeating Step 3 and Step 4 in the Selecting from the X Colors List section on page 147.

Do not change the color in the Color Selector before proceeding to the next section.

5.2.3 Color Objects

To create a visually appealing interface, it is essential to use colors consistently. WorkShop Visual assists you by providing color objects, which let you bind colors to names which you specify. Use this feature to apply the same background color to all the widgets in the central part of the tutorial interface:

1. Select the "Strawberry" ToggleButton in the hierarchy.

2. In the Core resource panel, click on "Background color".

3. In the Color Selector, click in the "Name" Text box underneath the list of Color objects.

4. Type: background

5. Click on "Bind".

This binds the color to a color object named "background". The selection box shows the name background in angle brackets.

6. Click on "Apply" in the Color Selector and in the Core resources panel.

Apply this background color to other widgets in the hierarchy by entering the color object name as the setting for the background color resource:

7. Select the "Vanilla" ToggleButton in the hierarchy.

8. In the Core resource panel, double-click in the "Background color" text field.

9. Type: <background>

Note that you must use angle brackets. The angle brackets distinguish an object name from a string value. For example, a color object named <red> is distinct from the color red.

10. Click on "Apply".

The color in the "Vanilla" ToggleButton changes. Now apply this background color to the "Chocolate" ToggleButton and any other widgets you want to share the same background color.

5.2.4 Rebinding Color Objects

When you use a color object, you can easily change the color on all widgets which reference that color object. This makes experimenting with colors easy.

1. In the Color Selector, click on "background" in the "Color objects" list.

The background color is displayed at the top right of the Color Selector and "background" is displayed in the text field underneath the list of objects.

2. Using the sliders at the top of the Color Selector, change the color.

3. Click on "Bind".

All the resources which refer to the color object change to the new color and the change is reflected immediately in the dynamic display.

Experiment with creating new colors, binding them to color objects and assigning these color objects to some color resources. You can also bind colors from the X colors list to color objects. By repeating these steps, you can build your own palette of colors. Remember that it is better to name a color object for the function it serves, such as "background", than for the color it represents, since the color can change.

Color objects are saved with the design file. This means you can use the same names for color objects in different design files, even though the colors might be different. For example, the color object, background, might be yellow in one design and light blue in another. Within the same design, however, an object name such as "background" always refers to the same color.

5.3 Setting Fonts

The Font Selector lets you select font styles and sizes for the text which appears in your widgets. Your system determines which font styles are available; you can't create new fonts the way you can create new colors.

So far, you have used the default font for all text in the tutorial interface. In this section you will use the Font Selector to:

This section discusses the use of a single font in a text string. Complex font objects which let you use multiple fonts in a single label string are discussed in the Compound Strings section on page 176.

5.3.1 Selecting a Font

To add more visual interest to the tutorial interface, you are going to change some of the fonts from their default to an oblique font, as illustrated in Figure 5-2.

Figure  5-2 Toggle Buttons Before and After Setting Font
First, bring up the Font Selector:

1. Click twice on the "Double Scooper" radio button to bring up the resource panel.

2. On the "Display" page of the resource panel, click on "Font".

WorkShop Visual displays the Font Selector, shown in Figure 5-3.




 Click for closeup view.

Figure  5-3 The Font Selector

5.3.2 Regions of the Font Selector Panel

The Font Selector lists all the fonts available on your system. Because different machines may have different fonts installed, your list may look different from the figure.

Since there can be hundreds of fonts in the list, the menu bar lets you filter the list according to different criteria such as the font family, weight and point size.

The toggles below the font list let you select scalable fonts, non-scalable fonts, or both.

When you select a font from the list, the name appears in the "Font name" and "Selection" fields.

The Font Selector also lists font objects and their associated fontlist tags. Simple font objects can be used as aliases for font names. The Compound Strings section on page 176 discusses the use of more complex font objects.

5.3.3 Filtering the Font List

You are going to change the font of the "Double Scooper" label to 14-point bold oblique Helvetica. (If this font is not installed on your machine, select an alternative.) Because there are so many fonts in the list, it helps to filter the list. The "Font name" and "Selection" fields reflect your choices as you make them.

1. Pull down the Family Menu from the menu bar and select "Helvetica".

This eliminates all fonts from the list which are not Helvetica.

2. Pull down the Weight Menu and select "bold".

3. Pull down the Slant Menu and select "o" for "oblique".

4. Pull down the PtSize (point size) Menu and select "140".

Note that, because point sizes are specified in tenths of a point, this selects a 14-point font.

These steps reduce the font list to about four entries. A typical font name entry is shown in Figure 5-4. Although many fields are required to specify a font uniquely, most of them are only interesting to advanced typographers. The fields you are most likely to use are family, weight, slant and point size. You may also need to specify the display resolution such as 75 dpi (dots per inch) or 100 dpi. These fields are identified in Figure 5-4.

Figure  5-4 A Typical Font Name
The example in Figure 5-4 specifies a display resolution of 100 dpi, both horizontal and vertical, which is appropriate for most workstation displays.

5. Pull down the ResX Menu and select a resolution of 100 or 75 dpi.

Select the resolution appropriate to your display. If in doubt, use 100 dpi.

5.3.4 Applying the Font

The selections you have made are sufficient to specify a font for the interface. Now you can apply it to the "Double Scooper" radio button.

1. Click on "Apply" in the Font Selector.

This applies your selection to the "Font" resource in the resource panel.

2. Click on "Apply" in the resource panel.

The "Double Scooper" radio button is now labeled in a large, bold, oblique font.

3. Select the "Small" radio button.

4. Pull down the PtSize (point size) Menu and select "100".

You can press the "Sample text" button to re-display the example text whenever the filtering has been changed. WorkShop Visual doesn't do this automatically as some fonts can take a very long time to load.

5. Click on "Apply" in the Font Selector and in the resource panel.

The "Small" radio button is now labeled in a bold, oblique font, smaller than the "Double Scooper" label. Before proceeding, reset the Font Selector panel so that it shows all the fonts:

6. Click on the "All fonts" button at the bottom of the Font Selector.

This resets all elements of the font filter to "*" and so all available fonts are displayed again.

5.3.5 Scalable Fonts

The font you used on the radio buttons is a non-scalable font. This means that it is only available in certain fixed point sizes. X also supports scalable fonts, which can be any size you like. Try selecting some scalable fonts:

1. Clear the "Non-scalable" toggle in the Font Selector.

This eliminates all non-scalable fonts from the list and so the list is now empty.

2. Set the "Scalable" toggle.

This adds the scalable fonts to the list. You can specify a size for any of these fonts in two ways: by adjusting either the pixel size or the point size. The pixel size is the first numeric field in the font descriptor and the point size is the second numeric field. Both of these fields are initially set to zero for all scalable fonts, indicating a default size.

3. Select the "Vanilla" ToggleButton.

4. Click on one of the font names in the list.

Your selected font appears in the "Font name", "Selection" and "Sample text" fields.

5. Click in the "Font name" field (not the "Selection" field).

6. Edit the second numeric field (point size) to 240 (24 points).

7. Press <Return> or click on the "Sample text" button to display a sample of this text size.

When using scalable fonts, specify a non-zero value for either the pixel size or the point size, but not both. X adjusts the remaining zero value to fit the explicitly specified value. If you specify non-zero values for both fields, however, WorkShop Visual displays an error message if they do not match.

Typical point size values, specified in tenths of a point, are larger than typical pixel size values. A point size of 240 roughly corresponds to a pixel size between 30 and 35. The exact proportion depends on the resolution of your screen and the specific font.

X has two ways of scaling fonts: outline scaling and bit scaling. If the sample text is very jagged, the font is bit-scaled. To list only outline-scaled fonts, pull down the Fndry Menu and select "bitstream".

After experimenting, set the Font Selector to see the non-scalable fonts again:

8. Click on the "Non-scalable" toggle.

5.3.6 Simple Font Objects

For the two radio buttons, you set the fonts individually. If you use this method to set the same font for multiple widgets, any later changes must also be made for each widget individually. Also, the code generated by WorkShop Visual for the application makes a separate call to your system to load the same font for each label, which is inefficient.

Therefore, if multiple widgets use the same font, you can simplify both the code and maintenance of it by creating a simple font object. A font object is an alias for a list of fonts. A simple font object is an alias for a one-element list.

1. Use the pulldown menus to select the 12-point bold oblique helvetica font.

If more than one font appears in the list of X fonts, highlight one.

2. In the "Name" field underneath the list of Font objects, type: option_labels

Remember that it is better to name a font object for the function it serves rather than for the size or style it represents, since these specifications can change.

3. Click on "Bind".

This creates a font object called "option_labels". It only has one font in its list: the 12-point helvetica font. This has an associated fontlist tag "<Default>". The use of fontlist tags is discussed in the Compound Strings section on page 176.

Notice that the "Selection" field automatically updates to show the "<option_labels>" name. The angle brackets (<>) indicate that it is a font object rather than a font name. This font is applied to the resource panel when you click on "Apply". Do not do this yet as we are going to apply this font object to all the ToggleButtons and Labels at once.

4. Select all three ToggleButtons: "Vanilla", "Chocolate" and "Strawberry" and the three Labels: "Topping1", "Topping2" and "Topping3".

Do this by either dragging a rectangle around the widgets or by selecting each widget while holding down the Shift key.

5. Click on "Apply" in the Font Selector.

This applies the font object to the ToggleButton resource panel.

6. Click on "Apply" in the resource panel.

This applies the font object to all the selected widgets.

The interface now looks as shown in Figure 5-5.

Figure  5-5 Interface with Fonts Applied

5.3.7 Changing the Font Object

The text on the ToggleButtons and Labels is now shown in the font to which the font object is bound. To change this font style, just bind the font object to another font.

1. Pull down the Slant Menu and select "r" for "regular".

2. Pull down the Family Menu and select "Times".

The font list now displays the 12-point bold Times fonts. If the list is empty, select a different font family.

3. Click on "Bind".

The font object changes to correspond to the Times font and all the Labels and ToggleButtons change immediately in the dynamic display.

Font objects are saved with the design file. This means you can use the same names for font objects in different design files, even though the font might be different. For example, the option_labels font object might be Helvetica in one design and Times in another.

5.4 Selecting Pixmaps

You can use pixmaps instead of text strings on labels and buttons. WorkShop Visual provides two editors for creating and applying pixmaps. First you will use the Pixmap Selector to learn the basics of applying pixmaps to widgets. Then you will use the Pixmap Editor to create some custom pixmaps.

WorkShop Visual lets you use bitmaps created using the standard X bitmap editor. It also lets you use pixmaps in the public domain Xpm format and provides an editor for you to build pixmaps in this format. The Xpm library is included with the WorkShop Visual release.

5.4.1 Bitmaps and Pixmaps

Note that you can use pixmaps created with any other utility provided they are in Xpm format. The difference between a bitmap and pixmap is that bitmaps are monochrome and pixmaps are color images. They are also different formats - bitmaps are Xbm format and pixmaps are Xpm format. You can still edit X bitmaps using the WorkShop Visual Pixmap Editor. When you do this, WorkShop Visual converts the bitmap to a two-color pixmap and writes it out in Xpm format. You can keep it with only two colors or add more colors to it.

5.4.2 Selecting a Bitmap

As a first step, replace the label of a ToggleButton with one of the X bitmaps.

1. Click twice on the "Cone" PushButton in the hierarchy.

2. On the "Display" page of the resource panel, click on "Pixmap".

WorkShop Visual displays the Pixmap Selector. This is shown with example entries in Figure 5-6:

Figure  5-6 The Pixmap Selector with Example Entries

3. Select any bitmap from the list of X bitmaps.

The selected bitmap is displayed at the top of the Pixmap Selector.

4. Click on "Apply" in the Pixmap Selector.

This applies your selection to the "Pixmap" resource in the resource panel.

5. Click on "Apply" in the resource panel.

Now the ToggleButton has both a text label and a pixmap label, although only the text label appears in the dynamic display. To display the pixmap label, you must change the resource that controls which type of label is displayed.

6. On the "Settings" page of the resource panel, change the "Type" setting to "Pixmap".

7. Click on "Apply" in the resource panel.

The ToggleButton now displays the pixmap instead of the text label. Since the pixmap does not convey any useful information in this case, change the "Type" resource back to "String".

If you have additional X bitmap files on your system, you can also use these. Clicking on "Open..." displays a file selector which lets you locate bitmap files and add them to the list of X bitmaps.

You can also enter names of bitmaps in the text box under the list of X bitmaps, then click on "Add" to add the name to the list. If the bitmap doesn't exist yet, you can still add its name to the list and apply it to resources. Later, in development or at run time, you can supply the bitmap.

5.4.3 Selecting a Pixmap

The list on the right of the Pixmap Selector is the list of currently defined pixmap objects. These are pixmaps which have been bound as an object. The names in the list are the names of the objects. You can name a new pixmap object and then create a pixmap or read in an existing pixmap or bitmap. To make a new object, type its name in the text box below the list. To identify a pixmap with that object, press the "Edit" button. The Editing Pixmaps section below describes how to read in or create a pixmap.

5.5 Editing Pixmaps

WorkShop Visual provides an editor for creating pixmaps. In addition to allowing you to design your own pixmaps, the Pixmap Editor also lets you:

You can choose whether to write the pixmap in Xpm version 1 or 3. You should use version 3 as this is the most recent. Version 1 is provided for compatibility with older pixmap-handling applications.

All pixmaps used by widgets in WorkShop Visual must be bound to pixmap objects. First, you will create a pixmap for the "Cone" PushButton, as shown in Figure 5-7:

Figure  5-7 The Tutorial Interface with Pixmap Button
If you are continuing from the Selecting Pixmaps section on page 158, you already have the Pixmap Selector displayed and so you can skip the next two steps.

1. Double click on the "Cone" PushButton in the hierarchy.

2. On the "Display" page of the resource panel, click on "Pixmap".

3. In the text box in the "Pixmap objects" portion of the Pixmap Selector, type: cone

4. Press the "Edit..." button.

WorkShop Visual displays the Pixmap Editor, shown in Figure 5-8:




 Click for closeup view.

Figure  5-8 The Pixmap Editor
The Pixmap Editor has a menubar at the top of the window, a toolbar beneath the menubar, a tools palette on the left, the current foreground and background colors beneath the tools palette, an image drawing area in the centre and an image shown actual size on the right.

5.5.1 Pixmap Editor Toolbar

The toolbar, shown in Figure 5-9 contains buttons for the following operations:

Figure  5-9 Pixmap Editor Toolbar

5.5.2 Pixmap Editor File Menu

The File menu contains four options: "New", "Open File", "Save XPM File" and "Close".

New

New creates a new, blank editing area removing any image that was there before. WorkShop Visual warns you if you have not bound the image since making any changes. If you wish to bind the image, select "Cancel" and then bind it, as described in the Pixmap Objects section on page 175. If you do not wish to bind the image, press "OK" and continue.

Open file

If you have X pixmap files on your system, you can also use these in your interface. Selecting "Open file..." in the File Menu displays a file selector which lets you load a pixmap file into the Pixmap Editor. WorkShop Visual reads pixmaps in XPM3 format. It also reads X bitmap files and converts the bitmaps to pixmaps for editing in the Pixmap Editor.

Save XPM file

Selecting "Save XPM file..." lets you write the pixmaps you create to files. WorkShop Visual writes XPM1 and XPM3 format. You should normally save pixmaps in XPM3 format. XPM1 is provided for compatibility with older versions of third-party pixmap-handling utilities.

Close

This closes the editor window. If you have made changes since last binding, WorkShop Visual will issue a warning. See the Pixmap Objects section on page 175 for details on binding images to objects.

Saving Your Work

Every time you bind or write to an XPM file, you effectively save the current state of the pixmap you are creating. It's a good idea to do this frequently as you work.

5.5.3 Pixmap Editor Edit Menu

The Edit menu has seven items: "Undo", "Cut", "Copy", "Paste", "Clear", "Crop" and "Select All".

Most of these options operate on the selected portion of the pixmap. To select, use the arrow in the selection tool on the palette, as shown in Figure 5-10.

Figure  5-10 Selection Tool

1. Click on the selection tool.

2. Click in the drawing area and drag.

The selected portion of the pixmap includes pixels in the rectangular border marked with crosses and all the pixels within the border. Note that when you select an area of the image, the size and location of the selected area is displayed in the status line at the bottom left of the window. The "Select all" option in the Edit menu selects the entire image.

Undo

This undoes the last action in the editing area.

Cut

Cut removes the selected portion of the image to the clipboard.

Copy

Copy copies the selected portion of the image to the clipboard.

Paste

Pastes the contents of the clipboard into the selected area. If the selected area is smaller than the area on the clipboard, WorkShop Visual places the top left of the clipboard image at the top left of the selected area and draws as much of the area from the clipboard as there is room to do.

Clear

Clear removes the selected portion of the image without copying it to the clipboard.

Crop

Crop reduces the image to the selected area, thereby resizing it.

Select All

This selects the whole image.

5.5.4 Pixmap Editor View Menu

The view menu contains one pullright menu item, labelled "Drag color". This refers to the color of the selection rectangle as you drag it. When you pullright from this item, two radio buttons appear labelled "Invert" and "Xor". These describe the method of showing the selection rectangle.

5.5.5 Pixmap Editor Image Menu

The Image menu contains one item, "Resize". Selecting this item displays the dialog in Figure 5-11.

Figure  5-11 Resize Dialog
Type the new size in the format "width x height". Setting the "Rescale to Fit" toggle causes the Pixmap Editor to rescale the image to suit the new dimensions specified.

5.5.6 Pixmap Editor Effects Menu

The Effects menu has four items: "Reflect Horizontally", "Reflect Vertically", "Rotate 180" and "Gray Out".

Reflect

"Reflect Horizontally" and "Reflect Vertically" reflect the selected area across a horizontal or vertical axis respectively.

Rotate

"Rotate 180" rotates the selected area through 180 degrees - effectively reflecting the selected area across a diagonal axis.

Gray Out

This item creates a grayed out version of the selected area by `xor'ing each pixel. This is useful for creating insensitive pixmaps.

5.5.7 Pixmap Editor Palette Menu

The Palette menu allows you to edit the color palette or read in a new palette. There are two items: "Edit Palette" and "Read Palette".

Edit Palette

This produces the Palette Editor which is described in the Color Palette section on page 170.

Read Palette

This lets you read in the palette of a saved pixmap file. When you select this item, a file selection dialog appears prompting you for the name of an Xpm format file. When the file is read in, the palette of colors from the saved file replaces the existing palette. WorkShop Visual then changes the colors of the current image, if you have one, to use the colors of the new palette. WorkShop Visual will use the closest color match it can find.

Supplied with WorkShop Visual are some palettes which are color cubes. Also supplied is the palette used by WorkShop Visual for its icons. These files can be found in: $VISUROOT/lib/palettes, where VISUROOT is the install directory of your WorkShop Visual.

5.5.8 Tools Palette

To help you draw and color your image there is a palette of tools on the left of the Pixmap Editor window, as shown in Figure 5-12.

Figure  5-12 Tools Palette
Note that all of the drawing tools use the current foreground color. You can, however, use the current background color instead. See the Color Palette section on page 171. You may also change all instances of a particular color in your image. See the Color Palette section on page 171 for details on how to do this.

You must select one of these drawing tools to perform an operation on the window. There is always one and only one tool selected at any time.

This is the selection tool. You can select rectangular areas of the image. Many of the menu functions operate on the selected area.

This is the filled rectangle tool. With this selected you can draw rectangles filled with the current foreground color.

This is the fill tool. Click the mouse button over an area of the pixmap to fill that area with the current foreground color.

This allows you to draw the outline of a circle using the foreground color. The circle is drawn from the centre.

This enables you to draw individual pixels using the foreground color.

With this selected, you can draw a circle from the centre filled with the foreground color.

Select this to draw straight lines in the foreground color.

This is the dropper tool. Use this to pick up colors from the image. Clicking over a color in the image while this is the selected tool sets that color as the foreground color. See the Tools Palette section on page 170 for a quick way of doing this.

This allows you to draw the outline of a rectangle using the foreground color.

Dropper Tool Shortcut

With any tool selected, clicking over a color with the Control key held down sets the foreground color in exactly the same way as the dropper tool. Clicking with Mouse Button 2 while the Control key is held down sets the background color.

5.5.9 Dragging into the Editing Area

You can drag pixmaps and pixmap filenames into the editing area using the Motif "drag and drop" mechanism. Usually this means pressing Mouse Button 2 over the source and dragging it into the Pixmap Editor editing area before releasing the mouse button. If this does not work, check with
your system administrator for your system's configuration.

A dragged pixmap appears in the editing area exactly as if you had created it yourself, complete with a color palette containing all the colors used in the pixmap.

5.5.10 Color Palette

Color palettes are important in the Pixmap Editor. In order to create color pixmaps you need to specify which colors you wish to use. Any colors defined in the color palette for a pixmap will be stored with the pixmap. While you are creating your image you need to be aware which colors from the palette are the current background and foreground colors.

Background and Foreground Colors

The two squares of color below the tools palette show the current foreground and background colors. The foreground color is the color used for any drawing. The background color is used to fill blank space left by the editor. "Cut" and "Clear" both leave blank space which is filled with the background color. See the Pixmap Editor Edit Menu section and Pixmap Editor Edit Menu section on page 165 for details on these operations. "Gray out" uses the background color to produce the grayed out effect. See the Pixmap Editor Effects Menu section on page 167. Resizing to a larger size fills the extra space with the background color.

Swapping Background and Foreground Colors

When you draw anything in the Pixmap Editor, the current foreground color is used. If, however, you draw with Mouse Button 2 pressed down, the current background color is used.

Seeing the Color Palette

Pressing the mouse button when the pointer is over either the background or foreground square displays the color palette.

You can edit the color palette so that it contains the colors you wish to use in your image. This is described in the Editing the Color Palette section on page 171.

Changing the Background and Foreground Colors

You can change the current background and foreground colors by displaying the color palette and releasing the mouse button over the new color.

Changing a Color in the Image

If you have a color image and you wish to change all instances of one particular color to another, do the following:

1. Make sure the color you wish to change is the current foreground color.

2. Press the Control key and select another foreground color.

Wherever the previous color was displayed in your image, the new color is now displayed.

5.6 Editing the Color Palette

Selecting "Edit palette" from the Palette menu produces the Palette Editor, as shown in Figure 5-13.

Figure  5-13 Palette Editor
Each color square is a button. You can select a color square by pressing the mouse button over it. The name of the selected color is displayed at the bottom of the Palette Editor window.

5.6.1 Removing Colors

The "Remove" button removes the currently selected color from the palette. If that color was being used in the pixmap, it is replaced by the background color.

5.6.2 Adding Colors

Pressing the "New" button adds a color to the end of the palette. The new color is the same as the last color on the palette.

5.6.3 Editing Colors

To change a color, double click over it or select it and press "Edit". This invokes the Color Editor. See the Setting Colors section on page 145 for more details on the Color Editor.

5.6.4 Transparent Colors

If you set the toggle labelled "Transparent" for a selected color, the color will be "transparent" in the pixmap. This means that when the pixmap is displayed in the final application those areas of the pixmap which are transparent show the color that is beneath them. You may wish to use this so that the background of a button, for example, shows through parts of the pixmap.

Note, however, that it is XPM that supports transparent colors. The Motif PushButton and Label widgets provide no support for them. You could use the XPM library to translate the "none" color to the background color of the widget displaying the pixmap. The following file provides more detailed information on using the XPM library:

$VISUROOT/contrib/xpm/doc/xpm.ps

where VISUROOT is the install directory of your WorkShop Visual.

If you wish to use transparent colors, some third-party widgets may provide more support.

The name "none" is displayed for the transparent color in the color palette editor.

5.6.5 Saving a Color Palette

A color palette is saved with the pixmap to which it is attached. There are, however, two options regarding color palettes when saving a pixmap:

The first option compresses the number of colors saved with the pixmap to those used in the picture. The second option saves all the colors in the palette regardless of whether or not they were used.

5.6.6 Reading a Color Palette

See the Pixmap Editor Palette Menu section on page 167 for details on reading in a color palette from a saved pixmap.

Note - If you plan to use a lot of colors you should run WorkShop Visual with the "-L" command line switch, as described in the Command Line Switches for Interactive Use section on page 601, so that WorkShop Visual uses its own private colormap. Otherwise, you may not be able to use many colors.

5.7 Using the Pixmap Editor

First, set the size of the pixmap you'll be creating.

1. Select "Resize" from the Image menu.

2. Type: 40 x 40 into the text box in the Resize dialog.

3. Press "OK".

The actual-size pixmap display and the grid in the drawing area should resize. To draw:

4. Select black as the foreground color.

See the Color Palette section on page 171 for details on changing the foreground color.

5. Click on the filled rectangle tool.

See the Tools Palette section on page 167 if you are not sure which is the filled rectangle tool.

6. Click in the drawing area and drag to create a black filled rectangle.

The actual-size pixmap display updates to show what you've just drawn.

7. Experiment with the drawing tools until you feel comfortable using them.

It is helpful to learn the options on the Edit Menu and add some colors to the color palette before you undertake a drawing task.

8. Add some colors to your color palette.

Now that you have more colors, experiment more with the drawing tools. When you are ready, use the tools and colors to create a pixmap showing an ice cream cone.

9. Draw an ice cream cone.

5.7.1 Pixmap Objects

To display your finished pixmap, you must bind it to a pixmap object first. Because you entered the name of the pixmap object originally in the Pixmap Selector, all you have to do now is bind the pixmap to the object.

1. Click on "Bind" in the Pixmap Editor or press <Return> in the "Bind" field.

In the Pixmap Selector, the pixmap object name appears in the list of pixmap objects and in the selection box.

2. Click on "Apply" in the Pixmap Selector.

3. Click on "Apply" in the resource panel.

4. On the "Settings" page, change the "Type" setting to "Pixmap".

5. Click on "Apply" in the resource panel.

Pixmap objects work very much like color objects. You can use the same pixmap in more than one place. Changes you make to the pixmap are reflected in the dynamic display as soon as you bind again.

Pixmap objects are saved with the design file. This means you can use the same names for pixmap objects in different design files, even though the pixmap might be different. For example, the pixmap object, cancel, might be a cancel stamp in one design and the international "No" symbol in another.

If you want, try creating and adding pixmap objects for the "Dish" and "Cancel" buttons. Hint: the lettering for the "Cancel" stamp shown in Figure 5-14 was done with the line tool, not the pencil tool.

Figure  5-14 The Tutorial Interface with Three Pixmap Buttons

6. Save your design.

5.8 Compound Strings

The labels in the tutorial example all use simple text strings. This section describes the WorkShop Visual compound string editor, which uses an internal structure to let you create more complex strings. In conjunction with complex font objects, these strings let you display labels that use more than one font, or labels that are written entirely or partly from right to left.

To most people a string is just an ordered list of ASCII characters - a character string. Most Motif resources that have string values use a different string representation: the compound string.

Motif compound strings are used for all string resource values except for the strings in Text and TextField, which are ordinary character strings. (It is important not to confuse the Motif compound string with the compound text format of X. The Motif compound string is often called an XmString because this is the naming convention for the Motif toolkit functions used to manipulate it.)

A compound string is a way of encoding text so that it can be displayed in multiple languages and fonts without changing the code. In this section, you will learn how to create a string to be displayed in multiple fonts. For information about using multiple languages, see Chapter 18, "Internationalization", starting on page 587 and your Motif documentation. Appendix D, "Further Reading contains some ideas for information on Motif.

Conceptually, a compound string consists of four types of component:

Although these types of component can be in any order, it is common for each text string component to be preceded by a fontlist tag component.

A compound string can be used for the label of a widget by specifying a fontlist for the widget's font resource. A fontlist is a set of (font, tag) pairs. The fontlist tags indicate which font in the fontlist to use for each text string component.

To familiarize yourself with the features of WorkShop Visual's compound string editor, use the following step-by-step example while running WorkShop Visual at your workstation.

   Select "New" from the File Menu.
The object of the exercise is to reproduce the masthead of the London Guardian on a Label widget, shown in Figure 5-15.

Figure  5-15 Final Appearance of the Text String

5.8.1 Creating a Complex Font Object

So far, you have learned how to select a font and apply it to a widget. You have also created a simple font object that corresponds to a single font. Complex font objects let you produce more complex visual effects. A complex font object corresponds to a list of fonts; different parts of a string can then be displayed using different fonts from the list. The step-by-step example in this section requires a complex font object.

Create a widget that uses a label and give it a font object with more than one font in its list.

1. Create a widget hierarchy with a Label as the child of a Form.

2. Double-click on the Label widget to display the resource panel.

3. Click on the "Font" resource button to display the font selector.

4. Use the pulldown menus to select a 24-point medium italic Times font.

5. In the "Font object" field, type: masthead

6. In the "Fontlist tag" field to the right of the "Font object" field,
type: italic

7. Click on "Bind".

This creates a font object called masthead with one font in its list. The font is tagged italic.

Note - Tag names are arbitrary. However, several pre-defined tags are listed by the "Default" button and the "UIL" pulldown menu. The "Default" and "UIL" buttons are above the "Fontlist tag" field. Selecting the "Default" option produces the tag XmFONTLIST_DEFAULT_TAG. The UIL menu lists tags that can be used in UIL (Motif's User Interface Language). If you are a UIL user, note that most UIL compilers produce a "severe internal error" if you use a tag that is not on this list. If you are not a UIL user, ignore the UIL options.
Next, add another font to the font object. The second font has a different tag.

8. Select a 24-point bold regular Helvetica font.

9. In the "Fontlist tag" field, type: bold

Do not change the masthead font object name.

10. Click on "Bind".

This adds the bold font to the font object list and tags it "bold". You can see samples of the two fonts in the "Sample" field by selecting the different tags in the "Fontlist tag" list.

You now have a font object that can be used to display a string using two different fonts. Apply it to the Label widget:

11. Click on "Apply" in the font selector.

12. Click on "Apply" in the Label resource panel.

The text in the Label is displayed in the italic Times font because it is the first in the list. To display a text string that uses both fonts, you must create a compound string.

5.8.2 Creating A Compound String

When you type text into the "Label" text field of the resource panel, WorkShop Visual creates a compound string which only contains text string components and separator components, which correspond to the newlines. To create a compound string that includes fontlist tags, you must use the compound string editor.

1. Click on the "Label" button in the resource panel.

This displays the compound string editor, shown in Figure 5-16.

Figure  5-16 Compound String Editor
The compound string editor includes the current fontlist name, an editing area and a list of existing compound string objects. The fontlist name is currently "masthead", to correspond with the name of the font object used in the widget.

As you enter text in the compound string, it appears in the editing area. The fontlist named at the top of the screen is used to display the text. Other components, such as empty text components and directional indicators, appear as symbols. You can turn off the symbol display using the "Show symbols" toggle to see how the text will look in the widget.

If the "Show symbols" toggle is not on:

2. Click on the "Show symbols" toggle.

To create the compound string, start by entering the text:

3. Click on the I-beam cursor in the editing area.

This makes the cursor blink, indicating that the editor is ready for text entry.

4. Type the following string with no space between the
words: TheGuardian

The text is displayed using the first font in the fontlist, which is the italic Times font, as shown in Figure 5-17.

Figure  5-17 Initial Text for the Compound String
To make different parts of the text display in different fonts, you must insert fontlist tags into the compound string.

5. Position the pointer between "The" and "Guardian", then press and hold mouse button 3.

A popup menu appears. Selecting an item from this menu inserts a component of the corresponding type into the string. Selecting "Delete" deletes the current component. To display the word "Guardian" in the bold Helvetica font, you must insert the appropriate fontlist tag ("bold") at the pointer.

6. Pull right for the Fontlist tags Menu and select "bold".

This inserts the fontlist tag symbol and changes the display as shown in Figure 5-18.

Figure  5-18 Compound String with Fontlist Tag
If you accidentally insert the tag in the wrong position, you can pick it up and move it using mouse button 1.

While the word "The" is now correctly displayed in the italic font, this is only because Motif uses the first font in the fontlist by default. To make the compound string complete you should insert the italic tag at the beginning of the string.

7. Position the pointer before "The", then press and hold mouse button 3.

8. Pull right and select "italic".

This inserts a second fontlist tag symbol, as shown in Figure 5-19.

Figure  5-19 Compound String with Fontlist Tags
The compound string is now complete. To see it as it will appear on the label:

9. Click on the "Show symbols" toggle to turn off the symbols.

This redraws the string without the fontlist tag symbols, as shown in Figure 5-20.

Figure  5-20 Compound String Without Symbols

5.8.3 Creating a Compound String Object

Now you can create a compound string object and bind it to the string.

1. In the field labelled "Name" underneath the list of XmString objects, type: guardian

2. Click on "Bind".

The name of the object appears in the XmString object list. Finally, you can apply the compound string object to the Label.

3. Click on "Apply" in the compound string editor.

This applies the compound string object to the Label resource panel.

4. Click on "Apply" in the Label resource panel.

The text in the Label now displays the compound string in the selected fonts.

5.8.4 Direction Indicators

So far, this exercise has demonstrated two of the components in a compound string: the text and fontlist tags. The other two components are the newlines used as delimiters and direction indicators.

A newline causes a line break in the text. You can either press <Return> while entering text, or insert a newline using the pull-down menu. Before experimenting with inserting, moving and deleting newlines, make sure the "Show symbols" toggle is on so you can see what you are doing.

The direction indicators let you create text in either a left-to-right or a right-to-left direction. Although the default direction is from left to right, you can specify any portion of the string to be drawn from right to left.

If the "Show symbols" toggle is not on:

1. Click on the "Show symbols" toggle to display the symbols.

2. Position the pointer between "Guar" and "dian", then press and hold mouse button 3.

3. Pull down and select "Right to left".

The compound string changes as shown in Figure 5-21.

Figure  5-21 Compound String with Direction Change
The small diamond represents a change of direction from left-to-right to right-to-left. The arrow is the direction indicator, which appears at the beginning of the affected text. Since this is a right-to-left segment, the beginning of the text is on the right, not on the left. A change to left-to-right is represented by a direction indicator arrow pointing to the right at the beginning (the left end) of the new text.

Inserting newlines and fontlist tags into a right-to-left segment may seem to produce the opposite effects from what you expect if your normal reading direction is from left to right.

Remember that symbols affect the text that follows them, which means the text to the left in a right-to-left segment.

Finally, bind the compound string object guardian to the new string.

4. Click on "Bind".

The Label text changes as shown in Figure 5-22.

Figure  5-22 Final Appearance of the Text String

5.8.5 Updating Changes to the Font

If you create a new font object, or decide to use a different one while using the compound string editor, you can update the "Font" field in the widget's resource dialog by pressing the "Update font" button in the Compound String Editor. This ensures that the widget is using the same font object as the editor. This is not necessary if you have changed the contents of the font object - only if you want to use a different one.

5.9 Callback and Prelude Editing

WorkShop Visual provides a means of editing callbacks and code preludes. This facility is available once you have specified a callback and generated a stubs file or, in the case of code prelude editing, you have defined a code prelude and generated the primary source file.

You must first select the widget which has been given the callback or prelude. For callbacks, the editing capabilities are available from the Callbacks dialog. For code preludes they are available from the Widget menu. See the Designating a Callback section on page 188 for details on the Callbacks dialog.

When you ask to edit a callback or prelude you are given a text editor running inside an Xterm window. The editor used is determined by the editor application default which is described in Appendix , "Application Defaults".

If you have not already generated a stubs file or primary source file, you are prompted to do so.

More about callback editing is provided in the Adding Callback Functionality section on page 239. More about code prelude editing is provided in the Code Preludes section on page 256.


Previous Next Contents Index Doc Set Home