Glg Builder and Animation Tutorial

 

1. Using GLG Builder 7

Using GLG drawings as widgets 7

Creating a new widget 7

Creating objects 8

Editing GLG objects 8

Selecting an Object and Changing Object Geometry 8

Choosing from Several Selected Objects 9

Using Undo 10

Editing Object Properties 10

Editing object attributes using the Edit Toolbox 11

Multiple Selection 12

Editing Polygon Attributes 13

Using the Viewport Object 14

Integrated Zooming and Panning 15

Using GLG Widgets and Palettes 15

Using Palettes 15

Using GLG Graphs and other Widgets 16

Saving the drawing 16

Defining resources for animation 16

Prototyping Animation in the Builder 17

Creating resource hierarchies 18

Defining Tags for Global Resource Access 19

Prototyping a Drawing in the Builder Using Tags 20

Adding geometrical dynamics 21

Adding attribute dynamics 23

Color dynamics 23

Blinking 24

Text dynamics 25

Numerical text dynamics 25

Formatted text dynamics 26

List of strings dynamics 26

Changing attribute range 26

Editing control points and attaching control point dynamics 27

Adding Extended Rendering Attributes 27

Gradient Fill 28

Fill Dynamics 28

Shadows and Arrowheads 29

Text Boxes 29

Using permanent groups 29

Creating a group 29

Editing individual objects in a group 30

Editing all objects in a group 30

Adding and Deleting objects from a group 30

Exploding permanent groups 31

Object Layout and Alignment 31

Creating Layers of objects 32

2. Advanced features of the GLG Builder 33

Using Constraints 33

Constraining object attributes 33

Using Constrained Dynamics and Marked Transformations 34

Constrained Dynamics Example 34

Using Marked Transformations 35

The Second Flavor of the Fill Dynamics 35

Defining Object Tooltips 36

Using MouseOver Highlight and MouseClick Feedback 36

Attaching Custom Events 37

Using Editing Focus 38

Changing Viewport's Font Tables 38

3. GLG Widgets and Custom Objects 40

Using Custom Object Palette 40

Custom Button 40

Custom Toggle 40

Native Button Object 41

Native Toggle Object 41

Native Slider Objects 41

3D objects 41

Process Control Objects 42

Graph Objects 42

Adding New Objects to the Custom Object Palette 42

4. Using GLG drawings in a program 43

Loading the Drawing into a C or C++ Program 43

Loading the Drawing into a Java Program, GLG Bean or Applet 43

Loading the Drawing into an ActiveX Control 44

Supplying data for animation from a program 44

Supplying data for animation when used on a Web page 45

Programmatic data supply 45

Reading data from a URL 46

Periodic Updates 46

Source code examples 47

5. Creating the Animation example's drawing 48

Creating a Drawing's Viewport 48

Creating a Circle Object 48

Adding Color Dynamics 48

Adding the Move Dynamics 49

Creating an Area Polygon 49

Adding Buttons 50

Testing the Tooltips 50

Using the Drawing 50

6. Using GLG Graphs 51

Using graphs to display dynamic data 51

Common Graph Resources 51

Data Supply Resources 51

Title resources: 51

DataGroup Resources: 51

Axis Label Resources 52

Graphs with multiple Data Groups 52

Examples of resources and data to animate the graph 52

7. Using Containers and Reference Objects 53

Container Object 53

Creating a Template 53

Creating a Container Object 54

Creating Container Instances 55

Editing Container's Template 55

Template Reference 56

Reusing the Template 56

Creating a Reference 56

Creating Reference Instances and Editing the Template 57

Rebinding Reference Attributes 58

Using Global Attributes 59

Object Dynamics 60

Subdrawing 60

Reusing the Template 60

Creating a Subdrawing 61

Accessing the Subdrawings Template 62

Subdrawing File Dynamics 62

Object Dynamics 63

Creating a Template with Multiple Icons 63

Creating a Subdrawing 64

Using ObjectPath for Object Dynamics 64

Palette Reference 65

GLG Builder and Animation Tutorial

This tutorial presents an overview of the tasks involved in creating animated drawings using GLG and using them in a program. It is intended for users that prefer finding things by a trial and error approach rather than reading the manual. Refer to the GLG documentation for further details.

The Tutorial starts with simple animation examples and moves on to examine more complex features of the Toolkit (Constraints, etc.). You won't need these advanced features for your first animations, but you may need them later on as you develop more elaborate drawings.

Using GLG Builder

Using GLG drawings as widgets

A GLG drawing is a collection of objects created and saved using the GLG Builder . This drawing can be loaded into a C/C++ , Java or ActiveX program and animated with the data supplied by a program. A drawing used in a program is referred to as the Widget throughout this document.

Any GLG drawing must use a GLG viewport object to contain the drawing's graphical objects. A viewport is an encapsulation of the native window object that is used in the Toolkit to contain graphical objects (polygons, circles, etc.) and to provide a drawing surface for them. A viewport may also contain other nested viewports.

To use a drawing as a widget in a program, the drawing must have a viewport named "$Widget" . This viewport will be displayed in a program when the drawing is used as a widget. A drawing created and saved using the GLG Builder can then be used as a widget in a C/C++ or Java program, Java bean or applet or ActiveX control.

Creating a new widget

When the GLG Builder is first started, it automatically creates a new widget (a viewport named "$Widget" ) and moves the editing focus into it.

To see the widget, use the Hierarchy Up button from the Control Panel on the left or Traverse, Hierarchy Up from the main menu, and that will bring you up to the top level. You'll see the outline of the viewport object and a text comment at the top of the drawing.

To go back into the widget, first select the viewport by clicking on it with the left mouse button. This will show control points in two corners and the center of the viewport, and also will show the viewport's name and object type in the Status Panel at the bottom. With the viewport selected, use the Hierarchy Down button from the Control Panel or Traverse, Hierarchy Down from the main menu: this will bring you down into the viewport, so you can start creating objects.

Creating objects

You can create graphical objects by selecting from a variety of drawing primitives in the Object Palette on the left of the Drawing Area:

All buttons in the Builder have tooltips, so you can move the mouse over the button to find it's exact meaning if not sure.

To create an object, select one of the drawing primitives on the left (a Filled Polygon , for example) and click several times in the drawing to define the polygon's points. To finish defining points, click the right mouse button on Windows, the middle mouse button on Unix, or the Escape key on both platforms.

For different objects, a different number of control points may be required. For example, an arc will require 3 control points.

Some object may also require entering additional information. For example, you'll be asked to type a text string when creating a text object.

When objects are being created or any other actions requiring user input are performed, a prompt with additional instructions is displayed in the Prompt Area at the bottom.

All objects have to be created inside the widget ( "$Widget" viewport).

Editing GLG objects

After creating an object, it may be edited in a variety of ways. To edit an object, it has to be selected.

Selecting an Object and Changing Object Geometry

The simplest way to select an object is to click on it with the left mouse button. When an object is selected, its control points and resize box are highlighted in the drawing, and its name and type are displayed in the Status Panel at the bottom.

The move point appears at the object's center, it's a dynamically calculated point, provided for convenience in the Builder only. You can reposition an object precisely by Shift+clicking on the move point, and using the arrows in the Object Move Point dialog. To avoid accidental movement while you are selecting an object, use Shift+click to select the object. For less precise movements, just drag the object with the mouse.

An 8-point resize box appears around an object. Use its points to resize the object. You can also flip the object by dragging any of the resize points to the other side of the object's box. Objects with only one control point (marker, fixed text, etc.) can't be resized, and resize points for these objects appear desensitized (in a gray color).

A rotate point appears on the right side on the resize box. To rotate an object precisely by a specified angle, Shift+click on the rotate point and use the arrows in the Object Rotation Point dialog. For quicker or less precise rotation, drag the rotate point with the mouse.

Control points appear at the vertices or other important points. To change the shape of the object, drag its control points with the mouse. You can also edit a control point precisely by Shift+clicking on it and either using the arrows to move the point, or entering the point's coordinates into the Value field of the Control Point dialog.

To select an object with no fill (for example, an unfilled polygon), click on the object's edge. The FillType attribute controls this aspect of an object's appearance.

Choosing from Several Selected Objects

When several objects are located close to each other and it is difficult to select the object of your choice, you can use the Shift key to help choose among several objects.

Shift-clicking in the drawing area with the left mouse button pops up a menu that allows you to select an object out of several potentially selected objects.

If the Properties dialog is open, the arrow button in the upper right corner of the dialog may be used to select an object when several objects are potentially selected as well.

Using Undo

The changes applied to the object's geometry or attributes may be reverted by selecting Edit, Undo options from the main menu, where the last operation is displayed at the top of the menu. For example, try moving an object with the mouse. To undo the move operation, select Edit, Undo Object Move or Stretch.

For multiple step undo, Edit, Undo History option may be used. For example, try resizing the object using its resize box and then click and drag one of its control points with the mouse. To reverse one or both of these operations, select Edit, Undo History, Undo Point Move to undo the point move operation, and then select Edit, Undo History, Undo Object Move or Stretch to undo the resize operation. Notice that the Undo History list displays performed operations in the reverse order, so that the last operation appears at the top of the list.

Note: The order of undo steps is important and should be considered when undoing a complex sequence of editing operations.

Editing Object Properties

You can use the Properties toolbar button to bring up the Selected Object Properties dialog. Alternatively, you can use the right mouse button and select Properties from a popup menu, or Object , Properties from the main menu.

The Selected Object Properties dialog allows you to edit an object's properties. Some generic properties common for all objects ( Name, Visibility, HasResources flag ) are displayed at the top of the dialog. Specific properties that depend on the type of the selected object are listed below.

Some properties, for example a FillColor property, have an ellipses button next to it. The button indicates that the attribute is an object, and you can press it to get the dialog with a color palette and other options for editing the attribute.

You can select a new fill color from a palette, or give this attribute a specific name that you can later use to access the attribute from a program.

For other attributes, different attribute-related pallets will be shown: try selecting the ellipsis button for the LineWidth and LineType attributes.

The Type field of the Attribute Object dialog shows the type of the attribute object and may be D for double numerical values, S for string values or G (geometrical) for XYZ or RGB triples used to represent colors and control points in the Toolkit.

Editing object attributes using the Edit Toolbox

For faster editing of common object attributes, the Edit Toolbox can be used, alternatively to the Properties dialog. Click on the Edit Toolbox toolbar button to bring the Edit Toolbox for the selected polygon object.

You can edit various attributes, such as FillColor or LineWidth. For example, click on the LineWidth button and select a new line width from the line width palette displayed in the middle of the dialog. As the polygon's line width changes, notice that the text box value at the bottom of the dialog reflects the current setting for the selected attribute.

Only the attribute buttons that are applicable to the selected object type are activated in the Edit Toolbox , while the other buttons are disabled. For example, for the polygon object, the FillColor and EdgeColor buttons are activated, while the TextColor buttons are disabled.

While Properties dialog provides access to all attributes that are available for the selected object, the Edit Toolbox displays attributes that are commonly used for a given object type. For example, for a polygon object, you can edit such attributes as FillColor or EdgeColor via the Edit Toolbox , however, the OpenType attribute is accessible only via the Properties dialog. Likewise, the GradientType attribute can be accessed only through the Properties dialog, while the value of GradientColor attribute can be edited using the Edit Toolbox. The Edit Toolbox is convenient for a quick and easy editing of the visual appearance of objects, as well as editing multiple objects or all objects in a group. For editing the non-visual entities, such as attribute names, HasResources flag and others, the Properties dialog should be used.

Multiple Selection

Create three polygon objects using the Filled Polygon button. To select multiple objects for editing, click and drag a rectangle to enclose the objects you want to edit. For example, click and drag a rectangle to include all three polygons. This creates a temporary group that includes all selected objects.

Notice that the Status panel at the bottom of the Builder's window indicates that the selected object is of type Group and its name is $TempGroup , which is a predefined name for a temporary group. The resize box of a temporary group is shown as a dashed line. Temporary group is volatile and will be discarded when it is unselected.

To exclude or include an object from the group, you can Ctrl+click on the object you want to delete or add. For example, Ctrl+click on one of the polygons to delete it from the group. Ctrl+click on the same polygon again to add it back to the group.

Let's try to change FillColor of all three polygons. Click on the Edit Toolbox toolbar button to bring the Edit Toolbox for the selected objects. Click on the FillColor button in the Edit Toolbox and select a new color in the color palette. All selected objects will reflect the color change.

Press Escape to unselect the objects.

In the above example, a temporary group was created using a click and drag operation that defined a rectangular area containing the objects to be selected. This option may be inconvenient in some cases, when there are several intersecting objects and precise object selection is required. Alternatively, a temporary group may be created by Ctrl+clicking on each object that needs to be selected.

For example, Ctrl+click on one of the polygons with the left mouse button to select it. Ctrl+click on another polygon, and then on the third one. All three polygons will be selected. Attribute editing of all selected objects can be done using the Edit Toolbox , as described earlier.

Press escape to unselect the objects.

Editing Polygon Attributes

In GLG, the polygon is a fundamental graphical primitive. Most other GLG graphical objects (arcs, connectors, splines, etc.) inherit their attributes from the polygon object. As an example, let's try editing attributes of a filled polygon.

Click on one of the previously created polygon objects to select it, then click on the Properties toolbar button to display the polygon's Properties dialog for it.

Click the ellipsis button for the FillColor attribute and select the fill color from a color palette, then select the edge color using the same procedure for the EdgeColor attribute. The colors may also be entered as RGB values in the range of 0 to 1 by typing them into the corresponding value fields of the Properties dialog.

The LineWidth attribute may be entered by typing the pixel line width value into the LineWidth text box. To select a line width from a palette, click on the ellipsis button for the LineWidth attribute and select a line width from a palette. To select a line type from a palette, click on the ellipsis button for the LineType attribute.

The FillType attribute controls whether the polygon is drawn as an outline, fill or both. The attribute has an option menu that allows selecting the fill type. The ellipsis button for the attribute may also be used to pop up the Attribute Object dialog which allows naming the attribute, setting its flags and attaching attribute dynamics.

The OpenType attribute controls whether the polygon draws the line connecting the first and last polygon's points, and may be edited in the same way as the FillType.

The Builder's Object Palette has convenience icons for creating both filled, unfilled, open and closed polygons. However, the FillType and OpenType attributes may be changed after the polygon was created as well.

The Shading attribute provides a way to selectively disable 3D shading of the polygon when it is displayed in a viewport with the shading enabled (Light attribute set to FLAT). This attribute is not an object, so there is no ellipsis button for this attribute. The only available attribute action is changing its value using the option menu.

The PointList items in the polygon properties is enabled in the Enterprise Edition of the Builder and allows adding, deleting and rearranging the order of the polygon points after the polygon has been created. Pressing the ellipsis button for the PointList displays the list of the polygon's points, with buttons for adding, deleting and rearranging the points' order. Selecting a point in the list with the mouse displays the Control Point dialog for editing the point's value, name and flags.

The last item in the property list allows adding and editing optional rendering attributes, such as gradient fill, cast shadows, arrowheads and fill dynamics. Refer to Adding Extended Rendering Attributes on page 27 for details.

Using the Viewport Object

A viewport object is a GLG encapsulation of a window, which may be used to draw other graphical objects. In addition, the viewport object provides its own coordinate system, resizing all objects in the viewport when the viewport is resized. The viewport may be used as a container holding functionally different parts of the drawing, or as a component containing other graphical objects (a graph, control, etc.). Viewports may be used recursively, with one viewport containing a hierarchy of several nested viewports, each containing its own drawing.

To create a viewport, select the Viewport icon from the drawing primitives, then click twice in the drawing area to define the position of the viewport's corners. After the viewport was created and selected, use the Hierarchy Down button from the Control Panel or Traverse, Hierarchy Down from the main menu to go "down" into the viewport. You can add any objects to the viewport by creating them while being inside the viewport, then use the Hierarchy Up button from the Control Panel or Traverse, Hierarchy Up from the main menu to go back up to the previous level.

The viewport has its own coordinate system with the origin at the center of the viewport and the Z axis perpendicular to the plane of the viewport's rectangle. The corners of the viewport are [-1000,-1000] and [1000, 1000] in the viewport's coordinate system, and this mapping is maintained when the viewport is resized. The viewport's coordinate system is used to interpret the coordinates of any objects drawn in the viewport. When the viewport is resized, all objects within are resized as well.

Panning and zooming affects the mapping of the viewport's coordinate system. For example, if the viewport is zoomed in to by a factor of 2, the corners of the viewport will correspond to (-500 -500) and (500 500) instead of (-1000 -1000) and (1000 1000) without zooming. The screen object associated with each viewport has additional SpanX and SpanY attributes that control the viewport's coordinate extent and coordinate mapping. Refer to Screen on page 61 of the GLG User's Guide and Builder Reference Manual for details.

Setting the editing focus provides a convenient shortcut for quick access to objects inside the viewport without traversing down the hierarchy. To move the focus inside the viewport, click on the Set Focus button from the Control Panel and click on the viewport , or simply Ctrl-Shift-click on the viewport. The viewport will be highlighted with thick borders to show it has the editing focus, and you can edit, add or delete objects inside the viewport (Note: The Hierarchy Down button is disabled while the focus is inside the viewport). When finished, click on the Main Focus button in the Control Panel, or Ctrl-Shift-click outside the viewport to return the focus to the main drawing area.

Note: Set Focus should only be used for quick access to viewport's objects for minor editing. Use Hierarchy Down as the primary way to access objects inside the viewport.

The viewport's FillColor, EdgeColor and LineWidth attributes control the background color, border color and border width of the viewport. The viewport's screen ShadowWidth attribute controls drawing the shadowed bevels around the viewport's borders. The sign of the ShadowWidth controls the type of the bevels: raised shadows for positive values and depressed shadows for negative values. To gain access to the ShadowWidth attribute, display the viewport's Properties dialog, then press the ellipsis button next to the More label.

Integrated Zooming and Panning

Every viewport object provides the automatic zooming and panning feature controlled by the viewport's Pan attribute. To enable integrated panning for the viewport, set its Pan attribute to YES. This will create and display automatic scrollbars that allow the user to scroll the drawing when it extends beyond the boundaries of the viewport's visible area. The scrollbars may be enabled for any viewport object that requires them.

If the viewport's ZoomEnabled attribute is set to YES, the viewport object also handles zoom and pan accelerators. For example, "i" will zoom into the viewport, "o" will zoom out and "n" will reset zooming and panning. Refer to Viewport on page 56 of the GLG User's Guide and Builder Reference Manual for a complete list of zoom and pan accelerators. If ZoomEnabled is set to NO, the accelerators are disabled, but the integrated zooming and panning is still available for use programmatically.

To try integrated zooming and panning, draw a few objects inside of a viewport with panning enabled, then start the prototyping mode by pressing the Start toolbar button or selecting Run, Start from the main menu and entering an empty run command. Click on the viewport with the mouse to move the keyboard focus to the viewport, then press "i" several times until the objects displayed in the viewport extend beyond the visible area of the viewport's window. Use scrollbars to pan, then press "n" to reset zooming and panning, and press the Stop toolbar button to return to the edit mode.

Refer to Integrated Zooming and Panning on page 97 of the GLG User's Guide and Builder Reference Manual for details.

Using GLG Widgets and Palettes

Using Palettes

The Palettes Menu provides access to palettes of pre-built widgets and objects. You can use these objects by simply dragging them from the palette and dropping them in the drawing. The objects have built-in dynamics and resources to control their appearance. By default, only the Custom Objects palette is installed. Other palettes are optional and will be installed only if purchased. Possible palettes include 2D graphs, 3D graphs, controls, process control and special widgets palettes. You can find a Widget Catalog with images of all available palettes and widgets on GLG 's web site www.genlogic.com .

The Palette Menu lists all available palettes of pre-built objects. To display a Custom Objects palette, select it from the palettes list. To add an object from a palette into the drawing, click on its icon in the palette. For example, click on the Bar Graph in the Custom Objects palette to insert a copy of the graph in the drawing. Give the graph a name for accessing its resources and adjust its shape using the resize box.

If the Builder was just started (or after File, New Widget), the editing focus is inside the $Widget viewport and the graph will be placed inside the $Widget viewport. This is convenient when you want to create a drawing containing several widgets, for example a panel of several graphs or dials. Each instance of the widget has to be given a unique name to avoid name conflicts.

Using GLG Graphs and other Widgets

If you want to create a drawing with only one widget in it, you don't need the additional $Widget viewport: you can use the widget itself and name its viewport $Widget. In this case, you may want to start by selecting File, New (instead of File, New Widget), place a single widget in the drawing, name it "$Widget" and save the drawing.

You can also use the widget files exactly as they are, loading them in the Builder, editing resources and saving them as custom drawings. The Builder provides a convenient shortcut for loading widget files from the palettes. Simply press the Ctrl key down while selecting a widget from the palette, the content of the drawing will be discarded and the selected widget file will be loaded. This will also set up the correct animation command to animate the widget (see Prototyping Animation in the Builder on page 17).

Saving the drawing

To save the drawing, use either the Save toolbar button or File, Save from the main menu.

The Options menu contains settings that control how the drawing is saved. The default ASCII save format enables the drawing to be displayed on different hardware platforms and in the Java version of the Toolkit. The default Save Compressed option minimizes the size of the drawing. Disable the drawing compression if the drawing is used for code generation.

Defining resources for animation

Defining resources for animation is as simple as naming the objects. For example, name the polygon you created "Poly1" by entering the name into the Properties dialog, then select the ellipsis button next to its LineWidth attribute and name the attribute "Width1" .

Select All Resources from either the toolbar, popup menu or Object menu to bring up the Resource Browser dialog showing all resources of the drawing. The dialog will show the "Poly1" and "Width1" resources we just created.

Select the "Width1" resource by double-clicking on it and try changing the resource by selecting a new line width from the Line Width palette.

Double-clicking on the "Poly1" will show the default resources of a polygon, such as Fill Color, Edge Color, Line Width , etc. You can double-click on any of these resources to edit them.

All these resource names can later be used to animate the drawing in the program or on a Web page.

Prototyping Animation in the Builder

You can animate any named resources right in the editor by selecting Start from the toolbar or Run, Start from the main menu. If you were inside the widget, running will bring you back to the top level.

You'll have to supply an animation script to specify what resource you want to animate. For example, you may use the line:

$datagen -sin d 1 50 $Widget/Width1

to animate the "Width1" resource of the polygon we named earlier, where:

$datagen is the name of the Builder's data generator,

 

-sin parameter selects a sinusoidal waive to be used for animation ( -lin is another alternative for incrementing the value linearly),

 

d specifies a data type for animation (d for double, s for string or G for geometrical),

 

1 50 parameters supply the range for generated data values.

 

$Widget/Width1 specifies a resource name to animate. The "$Widget" prefix is used since the polygon is inside the widget. Refer to the next chapter for more details on defining resource hierarchies.

Quit the prototyping mode by using the Stop toolbar button or Run, Stop from the main menu.

You can also animate any default resource of the "Poly1" polygon using one of the following scripts:

To animate the polygon's fill color with random RGB values (RGB range is from 0 to 1):

$datagen g 0 1 $Widget/Poly1/FillColor

To animate the polygon's fill color with a smoothly changing gray color:

$datagen -sin g 0 1 $Widget/Poly1/FillColor

To animate polygon's line width using a default name of the width attribute:

$datagen -sin d 0 50 $Widget/Poly1/LineWidth

To animate polygon's line width using a linear increment:

$datagen -lin d 0 50 $Widget/Poly1/LineWidth

You can also animate several resources at a time with the following script:

$datagen g 0 1 $Widget/Poly1/FillColor
-sin d 0 50 $Widget/Poly1/LineWidth

Refer to the Data Generator Reference Manual for more details of animation script parameters and on saving an animation script in a file.

Creating resource hierarchies

As you recall, both "Poly1" and "Width1" resources were displayed on the same level in the Resource Browser , even though logically the width resource belongs to the polygon. This section will explain how to change this to arrange the resource hierarchy in which the "Width1" resource belongs to the "Poly1" resource.

Bring up the Resource Browser again by using All Resources toolbar button. Since you are at the top level, you'll have to double-click on "$Widget" to see the resources inside it. The "Poly1" and "Width1" resources are displayed at the same level of hierarchy.

Select the widget viewport and go down into it. Select the "Poly1" polygon and bring up the Properties dialog.

Set the polygon's HasResources flag to YES . This defines a resource hierarchy, and now the "Width1" resource will now appear under the "Poly1" in the Resource Browser . The default value of the HasResources property was NO , that means that the object is resource-transparent.

Bring up the Resource Browser. You'll see "Poly1" but not "Width1" . Double-click on "Poly1" to see the resources inside it, and you'll now see "Width1" as one of the resources of the "Poly1" polygon.

Note: Default attributes of the object always appear under the object in the resource hierarchy, even if HasResources flag is set to NO .

Create a copy of a polygon by using Edit, Full Clone from the main menu or pressing Control+L accelerator key to create a copy of the polygon. Name the copy "Poly2" . Move the copy further away from the first polygon.

Bring up the Resource Browser and open "Poly1" by double-clicking on it to see its resources. Then double-click on ".." to return back, and open "Poly2" . You can see that both "Poly1" and "Poly2" have their own "Width1" resources. You can now edit the "Width1" resource of each polygon individually and use "Poly1/Width1" or "Poly2/Width1" resource names to access the line width of one polygon or another.

Try prototyping using the following animation script:

$datagen -sin d 1 50 $Widget/Poly1/Width1

to animate the first polygon and:

$datagen -sin d 1 50 $Widget/Poly2/Width1

script to animate the second one.

The resource hierarchies are a convenient way to define collections of objects. You can copy or instantiate objects several times using different names and access the attributes or dynamics properties of each instance by simply using a different top level name without changing the resource hierarchy inside an object. The following three lines show an example of accessing the "Valve/Open" resource of three different instances of an object:

Assembly0/Valve/Open

Assembly1/Valve/Open

Assembly2/Valve/Open

Since the resource hierarchy inside each instance is identical, a function may be used to set the valve open for any of the instances:

// assembly_name may be "Assembly0", "Assembly1", etc.
void SetValveOpen( GlgObject drawing, char * assembly_name, double open_value )
{
char * res_name = GlgConcatResNames( assembly_name, "Valve/Open" );
GlgSetDResource( drawing, res_name, open_value );
GlgFree( res_name );
}

or, if the Extended API is used:

void SetValveOpen( GlgObject drawing, char * assembly_name, double open_value )
{
GlgObject assembly;
assembly = GlgGetResourceObject( drawing, assembly_name );
GlgSetDResource( assembly, "Valve/Open", open_value );
}

Defining Tags for Global Resource Access

Each attribute has two string properties which can be used to access that attribute: a resource name, specified in its Name field, and tag name, specified in the Tag field. Unlike resources, which are hierarchical, tag names are global and provide a way to access attributes using a flat structure. The use of tags shields an application from a necessity to be aware of the resource hierarchy in the drawing.

Tags provide a convenient way to implement a data connectivity task in the application, using tag names as variable names that represent source of dynamic data for a particular attribute. A tag name can be a name of a custom data source, such as a name of a field in a process database used to provide data for animation. When the application receives a data change event for a particular field, it can update the corresponding tag using the GLG API. The tags provide a mapping between database fields and dynamic attributes in the drawing.

Let's modify our drawing so that it can be animated from a " TagLW " datasource using tags.

Select the " Poly1 " object you created. Bring its Properties dialog and click on the ellipsis button next to the LineWidth attribute. As indicated in the Attribute Object dialog, the LineWidth attribute is named " Width1 ", making " Width1 " a resource of the Poly1 object.

Add a tag name to the LineWidth property, by typing " TagLW " in the Tag field. Now LineWidth attribute of the Poly1 object has both a resource name, " Width1 ", as well as a tag name, " TagLW ", enabling LineWidth attribute to be accessed in the application using one of the following methods:

using resource name Poly1/Width1

using default resource name Poly1/LineWidth

using a tag name TagLW

Notice that TagLW is a global name. The application doesn't need to know which object or attribute it is connected to.

Each time an application receives a data change event from the TagLW datasource (which can be a TagLW field in a database), all it need to do to animate the LineWidth property of Poly1 object is to push new data value into the TagLW tag.

To view all tags defined in the Poly1 object, select it and click on the Tags toolbar button. All object's tags will be displayed.

Select TagLW from the list of tags. The Attribute Object dialog pops up, indicating what resource is associated with a given tag. In this case, it is Width1 resource.

Often times, defining tag names manually is not convenient, and a user wants to be able to browse available variable names from a custom data source and select an appropriate variable name for a tag name. For that purpose, the Browse button is provided next to the Tag field of the Attribute Object dialog.

Click on the Browse button next to Tag field. A data browser comes up with a list of available tag names. This list is populated by a custom data DLL, glg_custom_data.dll , which is found in the same directory as the GlgBuilder executable. Select one of the fields from a list of available tags, for example " controller1/group11/tag111 ". This tag name gets assigned to the "Width1" resource. Change the tag name back to TagLW to continue with the rest of this example.

A sample of a custom data browser DLL is provided with the release, including a source code. A user can use the source code as a template for writing a custom DLL which will connect to the application's data sources using a custom data acquisition system and returns a list of available datasource's names or field names. The returned list of names is used by the Builder to populate the Data Browser with names of available custom data sources to be assigned to tags.

To view a list of all tags defined in the drawing, close the Tag Browser, unselect the object by pressing ESC button and click on the Tags toolbar button again. The Tag Browser will show all tags defined in the drawing. You can also select drawing's $Widget viewport to see all tags defined in it.

Prototyping a Drawing in the Builder Using Tags

In the previous section, the LineWidth attribute was animated using a resource name Width1 . Alternatively, the LineWidth attribute of the polygon Poly1 can be animated using an assigned tag name, TagLW .

Select the Start toolbar button and supply the following animation command:

$datagen -tag -lin d 0 10 TagLW

Please notice that since tags are global, the tag names do not have a hierarchy related to a resource structure in the drawing, like the $Widget/Width1 resource path we used to animate the polygon's LineWidth using resources.

Quit prototyping mode by using the Stop toolbar button.

Adding geometrical dynamics

You can add 2D and 3D dynamic behavior by adding dynamics to objects. The available geometrical dynamics include rotate, scale, move, path and other types of dynamics.

Let's add rotation dynamics to the "Poly1" polygon. Select the "Poly1" polygon and use Add Dynamics from the toolbar, popup menu or Object menu to bring up the Add Dynamics dialog.

Select the Rotate transformation type at the top of the Add Dynamics dialog, and select the Z rotation axis to rotate in 2D:

You can either enter the rotation angle in degrees, or define it by selecting Angle In Drawing and selecting two points anywhere in the Drawing Area. Try entering 180 as the angle value.

You can also change the center of rotation from its default position by either entering its new coordinates (in the range -1000 to 1000) or selecting the Center In Drawing button and clicking in the drawing with the mouse to define a new position.

Type "RotateVar" as the Variable Name and click on Apply . This will attach the dynamics to the object and will bring up the Edit Dynamics dialog that shows dynamics attached to the object. The dialog also shows the resource names assigned to the dynamics' parameters that will later be used to animate or change them: notice that "RotateVar" is used as a resource name of the dynamics' controlling factor .

Prototype the dynamics ( Start icon from the toolbar) with the following animation script:

$datagen -sin d 0 1 $Widget/Poly1/RotateVar

that will change the "RotateVar" parameter from 0 to 1, causing the object to do a 180 degree rotation defined by the Angle parameter. Also notice the use of the resource hierarchy since "Poly1" has the HasResources set to YES.

Stop the animation ( Stop toolbar button), go down into the widget viewport and select the "Poly1" object. Activate the Edit Dynamics dialog by selecting Edit Dynamics from the toolbar (you can also select Dynamics Edit from the bottom of the Properties dialog, or use the Edit Dynamics button from the Object or popup menu).

The Edit Dynamics dialog shows the number and types of dynamics attached to an object (any number of dynamics may be attached), as well as parameters of the selected dynamic transformation. You can edit the dynamics' parameters after it has been created by either entering numerical values or selecting the ellipsis button next to the parameter for more options.

For the rotate transformation, either the Angle or the controlling Factor parameter may be changed. The controlling factor is a normalized value in the range from 0 to 1. The actual rotation angle displayed in the drawing is calculated as multiplication of the Angle and Factor parameters. Therefore, there are two ways of animating the rotation dynamics.

1. You can set the Angle to the actual value and animate the controlling Factor in the range from 0 to 1 to rotate the object by the defined angle.

2. You can set the Factor to 1 and animate the Angle parameter by setting it to the actual desired angle of rotation.

While animating the Angle is specific to the Rotate dynamics, animating the controlling Factor may be used as a universal way to animate geometrical dynamics of any type.

If the object is moved, the rotation center does not move with the object, resulting in the object still rotating around the old center position. It's not a desired behavior when you want an object to rotate around it's corner, for example. In this case, select an object and place it into a container by using the Container icon from the Object Palette . This will create a container and place the object into it. The container preserves the object's coordinate system when the container is moved, so that the object will still rotate around its corner.

Adding attribute dynamics

In addition to setting attribute values directly as it was done in earlier examples, you can also add attribute dynamics to the attribute object in a way similar to adding geometrical dynamics to objects. The types of dynamics differ for different attributes and some of them are described below. Refer to the GLG documentation for the complete list of available attribute dynamics.

Color dynamics

In addition to setting the RGB value of objects' color attributes using the resource mechanism, color dynamics may be used to allow selecting a color from a list of colors.

Go down into the widget's viewport, select the "Poly1" polygon and bring up the Properties dialog. Select the ellipsis button next to the Fill Color attribute to activate the Attribute Object dialog.

Select the Dynamics Add button at the bottom of this Attribute Object dialog. This will display the list of available dynamics on the right of the dialog. Select the List dynamics button, which attaches a list of color values to the attribute and brings the Edit Dynamics dialog showing the List dynamics attached to the Fill Color attribute object.

The Edit Dynamics dialog may later be invoked by selecting the Dynamic Edit button from the Attribute Object dialog.

Enter "ColorIndex" as a name for the dynamics' Value Index parameter in the right-most field. This resource name will be used to change the color displayed. The value of 0 will display the first color, the value of 1 will display the second color, and so on.

Select the ellipsis button next to the List of Values to display the list of colors. Select the first item in the list and define it's color by selecting a color from the palette, then select the second item and define its color as well.

Click on the Add button at the bottom of the List dialog to add the third color value and define its color.

Try changing the value of the Value Index parameter from 0 to 1 and 2 and notice the colors changing according to the colors in the list.

Animate the drawing with the following script:

$datagen -sleep 0.2 d 0 3 $Widget/Poly1/ColorIndex

where -sleep 0.2 is used to slow down the animation by pausing for 0.2 sec. after each update.

Note: the color of the attribute itself is added to the color from the list, so the attribute value is set to black (RGB value of [0,0,0]) when the list dynamics is applied to avoid interference.

Blinking

GLG objects may have a blinking or simple animation functionality added in the GLG Builder, so that the "blinking effect" or animation is incorporated into the drawing and achieved with no programming.

It is accomplished by adding a timer transformation to an object's attribute which needs to be animated. To achieve blinking effect, the value of the attribute needs to be toggled between two values representing the OFF and ON state. Timer transformation can be added only to an attribute of a D type. For example, it may be attached to object's Visibility attribute to toggle the object's visibility on and off. To implement color blinking, the timer transformation can be attached to the ValueIndex attribute of the color list transformation attached to an object's color.

Let's add timer transformation to the ColorIndex attribute of the Poly1 object.

Go down into the widget's viewport, select the " Poly1 " polygon and bring its Properties dialog. Click in the ellipsis button next to the FillColor attribute. In the Attribute Object dialog, select the Dynamics Edit button. This will bring a dialog for editing the List transformation attached to the polygon's FillColor . Click on the ellipsis button next to the ValueIndex attribute (which is named ColorIndex ).

In the Attribute Object dialog of the ColorIndex attribute, select the Dynamics Add button and select Timer . This will add a Timer transformation to the attribute and pop up a dialog for editing the transformation's attributes.

To alternate between 3 colors of the color list transformation, set the Period attribute to 3. Name the Interval attribute " TimeInterval " and set its value to 0.5 (time interval is defined in seconds). Set MaxValue to 2, since we want the ColorIndex attribute to alternate between values 0, 1 and 2.

Name the Enabled attribute " AlarmEnabled ", so that it can be accessed as a resource if needed. When the attribute is set to 1, the timer will go off automatically with a specified timer interval, and the object will "blink" at run time with no programming involved. The blinking effect will be achieved by alternating between 3 colors in this case (to alternate between two colors, set Period =2 and MaxValue =1). To turn off the timer, the AlarmEnabled resource may be set 0.

Let's animate the drawing by clicking on the Start toolbar button. Erase the animation command, since no resources need to be animated (the timer goes off automatically), and click OK . The polygon will change its color every 0.5 seconds to indicate an alarm state.

Quit the prototype.

Blinking effect also may be achieved by adding a Timer transformation to the Visibility attribute of an object. As an example, let's use a text object and add blinking functionality to it by toggling its visibility.

Create a fixed text object by clicking on the Fixed Text button in the Object Palette . Click in the drawing to define its anchor point and enter the string to be displayed, for example "ALARM", then click on OK to finish.

Bring the Properties dialog for the text object. Name the object " Label" and set HasResources =YES.

Click on the ellipsis button next to the Visibility attribute to pop up its Attribute Object dialog. Click on the Add Dynamics button and select Timer transformation.

When the timer is disabled, the value of the text object's Visibility attribute will be set to the timer's MinValue attribute. To make text object visible when the timer is disabled, set MinValue =1 and MaxValue =0.

Set the timer's Interval attribute to 0.3 to define 0.3 sec. time interval. Name the Enabled attribute " AlarmEnabled ". When it is set to 1, the timer will go off and the text will blink. The Label/AlarmEnabled resource can be set programmatically to enable or disable text object's blinking.

Let's animate the drawing again by clicking on the Start toolbar button. A polygon object will blink by alternating its color, and the text object will blink by alternating its visibility. Quit the prototype.

The timer transformation may also be used to animate attributes of objects or object's transformations. For example, a timer transformation may be connected to an angle attribute of the rotate transformation to continuously rotate the object the transformation is attached to.

Text dynamics

The simplest way to implement text dynamics is by setting the string attribute of the text object directly from a program. If a numerical or formatted value has to be displayed, GLG also provides a way to format the numerical value right in the drawing instead of coding it in the program.

Numerical text dynamics

This type of dynamics is used to display formatted numbers. Let's create a text object to exercise this type of dynamics. We'll use the Fixed Text in this section, but the dynamics may be applied to any type of a GLG text object.

Go down inside the widget viewport. Select Fixed Text from the Object Palette , click in the drawing to define text's position and enter the text string. Bring up the Properties dialog and select the ellipsis button next to the Text String attribute to bring up the Attribute Object dialog for the string attribute.

Select the Dynamics Add button from the Attribute Object dialog to list the available text dynamics and click on the FormatD button to add numerical format dynamics. This will activate the Edit Dynamics dialog, showing the format dynamics attached to the text object's String attribute.

Name the Data parameter "Value1" by entering the name in the right-most field. This resource name may now be used to supply data for display. Try entering a different numerical value for the Data parameter and see how it changes in the drawing.

The Format parameter is a C language double format specification used to format the output. It must use some form of the "%lf" C format for double values. The number after the decimal point defines the number of digits after the decimal point displayed in the output. You may also add other format symbols, for example try changing format to read "Value1 = %.3lf" .

Formatted text dynamics

The FormatS dynamics is similar to the numerical text dynamics described above. The only differences are that the Data parameter is a string instead of a double numerical value, and the format uses the " %s" C format specification to format the output.

As an example, try attaching a formatted text dynamics to the Text String attribute of another text object and name it's Data parameter "string1" . Use "string1 = %s" as the format and "Hello, world!" as the value of the Data attribute.

List of strings dynamics

The list dynamics used above for colors may also be applied to the String attribute of the text object. In this case the list will contain strings to be displayed, and the Value Index parameter of the list dynamics will control which string is displayed.

Changing attribute range

The Range transformation may be used to change the range of an object attribute or dynamics' parameter to adjust to the range of a variable used in a program. For example, it may be used to change the range of the controlling variable of the rotate dynamics attached to the "Poly1" polygon created earlier.

Let's try changing the range so that the object rotates by an angle defined by the dynamics' Angle parameter when the Factor parameter changes from 5 to 10 instead of from 0 to 1.

Go down inside the widget viewport. Select the "Poly1" object, bring up the Edit Dynamics dialog (use the Edit Dynamics toolbar button), make sure the Rotate dynamics is selected and click on the ellipsis button next to the Factor to display the list of available transformations. Select Range to attach a range transformation. This will also display the just attached range transformation in the Edit Dynamics dialog.

Change the In Low to 5 and In High to 10, leaving the Out Low as 0 and Out High as 1. Now the object will rotate from 0 degrees to the angle defined by the Angle parameter when the controlling Factor changes from 5 to 10.

Click on the Prev button at the bottom of the Edit Dynamics dialog to return to the Rotate dynamics and try changing the Factor by entering values in the range from 5 to 10.

The range transformation may be attached to any numerical attribute of any object.

To return to the Factor's Range transformation at a later time, select the ellipsis button next to the Factor and click on the Dynamics Add button in the activated Attribute Object dialog.

Editing control points and attaching control point dynamics

You can adjust control points by moving them with the mouse. You can also Shift -click on the control point (click on the point with the left mouse button while pressing the Shift key) to bring up the Control Point dialog for fine tuning the control point values. Shift -click is also convenient for selecting one out of several closely positioned control points.

You can use the Control Point dialog to enter the X, Y and Z coordinate values of the control point (in the -1000 to +1000 range for the default coordinate mapping).

You can also use the directional buttons to fine-tune the control point position, moving it by one or more pixels in a selected direction.

You can Shift -click on the Move Control Point (a special point in the center of the object) to move the object using directional buttons. You can also Shift -click on the Rotate Point (a special point on the right side of the Resize Box ) to rotate the object by a defined angle using directional buttons.

You can add geometrical dynamics to individual control points by selecting the Dynamics Add button in the Control Point dialog, and then proceeding in the same way as when attaching geometrical dynamics to objects.

To move several control points uniformly, use the constrained transformations described in Using Constrained Dynamics and Marked Transformations.

Adding Extended Rendering Attributes

A rendering object may be attached to GLG graphical primitives (polygon, arc, etc.) to define an optional set of extended rendering attributes. These attributes are not part of the object by default for the sake of efficiency, and are added only to the objects that truly need them. The extended rendering attributes include attributes that define and control several types of gradient fill, cast shadows, arrowheads and fill dynamics.

To add rendering attributes to an object, select the object, display its Properties dialog, then click on the Add Rendering button at the end of the properties list. This will add rendering to the selected object and display the properties of the rendering object. For example, create a filled polygon, set its FillColor to white, display its Properties dialog and add rendering to it.

If the selected object has already had rendering added, the Edit Rendering button will be displayed, allowing the user to access the rendering attributes for editing.

To delete the rendering, press the Delete Rendering button at the end of the Rendering Properties list.

To return to the object attributes without deleting Rendering Attributes, press the Previous button at the bottom of the Properties dialog.

Gradient Fill

To add a linear gradient fill to the polygon created above, change the Gradient Type from NONE to ACYCLIC LINEAR in the Rendering Properties dialog. The object will be rendered with a gradient fill, changing its color from its original FillColor to the GradientColor.

The GradientColor attribute defines the second color for the gradient fill. Press the ellipsis button next to the GradientColor to display a color palette for selecting it.

Change the GradientType to CYCLIC LINEAR and notice the change in the gradient fill: it now cycles from the object's FillColor to the GradientColor and back to the FillColor.

The GradientAngle attribute controls the angle of the gradient, measured counter clock-wise relative to the X axis. Change the angle to 90 to render a vertical gradient fill.

Change the GradientType to CONICAL and then SPHERICAL to see the corresponding gradient fills. Finally, change the GradientType from SPHERICAL to INVERSED SHPERICAL and notice the change in the gradient fill colors: instead of changing from the object's FillColor to the GradientColor, the color change is inversed.

The GradientLength attribute controls area of the object rendered using the gradient fill. Change the GradientLength to 0.5 to see only half of the object area filled with the corresponding gradient.

The GradientCenter attribute defines the gradient center in relative coordinates. Change the GradientCenter to 0,0,0 to have the gradient centered at the lower left corner of the object's bounding box. Setting the attribute's value to 1,1,1 centers the gradient at the top right corner of the object's bounding box.

The GradientResolution defines the number of polygon segments used to render the gradient fill. On non-True Color systems, due to the lack of available colors, the actual number of polygons used may be less than the specified value.

Fill Dynamics

The FillAmount attribute is used to implement the fill dynamics commonly encountered in process control and other drawings showing tanks filled with liquid substances. A changing substance level may be implemented by adding rendering attributes and changing the FillAmount of the object representing the tank.

Try changing the value of the FillAmount of a filled polygon with rendering attributes. If the value is 1, the whole object is drawn. If the value is less then 1 (0.5, for example), only a portion of the object's fill will be drawn, as defined by the fill amount. If the value is 0, the fill is not drawn (i.e. tank is empty). Notice that the object's edge is not affected by the value of the FillAmount, and that the object's fill type must be either FILL or FILL AND EDGE in order to use fill dynamics.

The FillAmount attribute may be named for easy access (press the ellipsis button next to the FillAmount and enter the name in the Attribute Object dialog). The name of the FillAmount will appear in the resource browser together with the other object resources.

The FillDirection attribute defines the direction of the fill dynamics. You may select one of the 4 preset values: UP, DOWN, LEFT or RIGHT, or define an arbitrary angle. To define an arbitrary angle, press the ellipsis button next to the FillDirection and enter the value of the fill angle. The angle is measured counter clock-wise, relative to the X axis (for example, an angle of 90 corresponds to the UP fill direction).

Shadows and Arrowheads

The ShadowOffset attribute controls the offset of the cast shadow. The offset is in screen pixels, and if the offset's value is not 0 in the X or Y direction, a shadow is rendered, as defined by the ShadowColor attribute. Press the ellipsis button next to the ShadowColor to display a color palette for selecting the color.

The ArrowType attribute defines the type (LINES or FILLED) and position (one of the ends, both ends, or the middle) of arrowheads drawn on a polygon, arc, and other polygon-like objects. The arrowheads are drawn when the ArrowType differs from NONE. Try selecting different ArrowType values and observe the resulting arrowheads.

Text Boxes

The text object allows the user to define an optional text box around the text by attaching the Box Attributes object. The Box Attributes define the attributes of an outline or filled box drawn around the text.

Try creating a text object and adding Box Attributes by clicking on the ellipsis button next to the Add Box Attributes label at the end of the text's Properties dialog. An outline drawn around the text will appear. Change the FillType from EDGE to FILL & EDGE to display a filled box, then select the FillColor of the box (click on the FillColor's ellipsis button to display a color palette). The BoxOffset attribute defines an offset in pixels between the text and the edge of the box.

To delete the Box Attributes, click on the Delete Box Attributes button at the bottom of the Box Attributes' properties.

To return to the text object's attributes without deleting the Box Attributes, press the Previous button at the bottom of the Properties dialog.

Using permanent groups

A group object provides a convenient way to hold several objects together, so that they can be saved, moved or edited as one entity.

Creating a group

To create a group, select the Group icon from the Object Palette, then click and drag the mouse to define a rectangular area. A new group will be created and all objects that are either completely or partially inside the defined rectangle will be placed inside that group.

When the group is selected, the control points of all objects in the group are displayed. Also, the group's control points don't have a cross in the middle.

Editing individual objects in a group

To get access to individual objects in the group, go inside the group in the same way you got used to with the viewport object. Select the group and click on the Hierarchy Down button to zoom into the group. After this you'll be able to select and edit individual objects inside the group. Go back up when finished editing.

You can also select individual objects in the group in the context of the drawing without traversing down. Click on Select Next in the group's Properties dialog and selecting the object in the group you want to edit. After editing an object, simply select the next one with the mouse. Select an object outside of the group to finish editing group objects.

When several groups are nested, you may use Select Bottom from the group's Properties dialog to select an object on the bottom of the group's hierarchy.

Select Next and Select Bottom are also available as toolbar buttons. When a permanent group is selected, Ctrl-Shift-click on an object inside the group also works as a shortcut for the SelectNext operation.

Editing all objects in a group

Groups provide a convenient way to edit many objects at once. To edit multiple objects in an existing group, select the group, click on the Edit All button in the group's Properties dialog and select some object in the group with the mouse.

The group may contain objects of different types: polygons, text objects, etc., and selecting an object of a particular type defines the set of attributes to edit. For example, to edit Anchoring of all text objects in the group, select some text object to define text attribute set. To edit the Line Width of all polygons in the group, select a polygon to define polygon attribute set.

Selecting an object will display the selected set of attributes. As you edit any of the attributes, all objects in the group that have that attribute will be changed.

If you constrain attributes (see Using Constraints below) while editing all objects in the group, attributes of that type of all objects in the group will be constrained.

If you want edit several objects together, that are not in the group, create a temporary group as described in the next section, and explode the group when finished editing the objects.

Adding and Deleting objects from a group

You can add or delete objects from a group by using the Add To Group and Delete From Group toolbar buttons.

To add to a group, select the group, click on the Add To Group toolbar button and select objects in the Drawing Area you want to add. Press the Escape key to finish.

To delete objects from the group, select the group, click on the Delete From Group toolbar button and select the objects in the group you want to delete. The objects will be deleted from the group and added to the Drawing Area.

You can also zoom down into the group to manipulate group objects one by one.

Exploding permanent groups

To release the objects from the group, explode the group by using the Explode Object toolbar button or Arrange, Explode, Explode Object from the main menu.

Explode operation may be applied to other objects as well, such as circles, arcs or series, but keep in mind that Explode action can't be reversed when executed.

Object Layout and Alignment

If you need to align or layout a group of objects, Layout Toolbox provides a point and click interface for such functionality. Examples of layout and alignment operations include aligning several objects horizontally or vertically, setting the same width for several objects, positioning objects within a defined distance from each other, or distributing the objects evenly across the defined extent in a horizontal or vertical direction.

Create three rectangles using the Filled Rectangle button and position them horizontally, one next to the other. Select all rectangles by clicking and dragging to define a rectangular area that includes all three rectangle objects. This will create a temporary group that contains selected objects.

Click on the Layout Toolbox button in the toolbar to activate a Layout Toolbox . Alternatively, the Layout Toolbox can be activated using Layout, Layout Toolbox option in the main menu. The following picture shows the Layout Toolbox:

Let's align the bottom of all selected rectangles. First, we need to select an anchor object relatively to which all other objects will be aligned. If the anchor is not defined explicitly, one of the objects in the group will be chosen as an anchor automatically. Click on the Select Anchor Object button in the Layout Toolbox , then click on one of the rectangles. Click on the Align Bottom button in the Layout Toolbox and notice that the bottom of all selected rectangles will be aligned to the bottom of the anchor rectangle.

Once the anchor is defined, it will be persistent for all layout operation until another anchor is chosen or the objects are unselected.

Let's position all rectangles to be within 50 world coordinates from each other, as measured between the rectangles' extents in the horizontal direction. Click on the Set Horizontal Space button in the Layout Toolbox. Notice that the label of the text edit box at the bottom of the Layout Toolbox displays the selected operation and is set to Horiz.Space.

Click on Coord: World button in the Layout Toolbox to indicate that the horizontal space between objects will be defined in world coordinates. Enter 50 as the value in the Horiz. Space text box. The rectangles will be positioned so that the space between them will be 50 world coordinates.

Press Escape to unselect the rectangles.

Creating Layers of objects

A layer is a collection of objects whose visibility may be turned ON or OFF . Layers are usually used to display collections of objects or icons on maps, schematic diagrams, etc.

A layer of objects may be created by placing several objects in a permanent group. The group's visibility attribute is then used to make the layer visible or invisible by setting just one visibility attribute (of the group). Objects in the layer may use attribute constraints described in the previous section to constrain some attributes to have the same value. For example, if you constrain the color attributes of all the layer's objects, changing one color resource will change the color of all objects. Different layers may use different colors, line widths, etc., to accent the layer.

Advanced features of the GLG Builder

Using Constraints

Constraints may be used to constrain the value of an object attribute to an attribute of another object. This simplifies maintaining or animating collections of objects.

For example, imagine a drawing or a car that uses different polygon objects to render different parts of the body. If the color attributes of all the polygons are constrained, you can change the color of just one polygon object and the color of the whole car will change.

In more complex cases, parameters of dynamics may be constrained to change synchronously as will be shown in Using Constrained Dynamics and Marked Transformations.

Constraining object attributes

To exercise attribute constraints, start with a new widget (use File, New Widget from the main menu). Create three polygons in the drawing and name them "Poly1", "Poly2" and "Poly3" . Select "Poly1" , bring up it's Properties dialog and select the ellipsis button next to it's Fill Color attribute to activate the Attribute Object dialog.

Select the Constrain button on the left of the Attribute Object dialog and select the "Poly2" polygon in the drawing with the mouse: this will constrain the Fill Color attribute of the currently selected polygon to the Fill Color attribute of the polygon you selected with the mouse.

Try changing the color by selecting a new color from the color palette: the color of both polygons will change.

This way of constraining works for constraining attributes of the same type. It will not work for example, for constraining Fill Color of one polygon to the Edge Color of another polygon. To do this, the Builder has features to mark attributes and later use marked attributes.

Click on the Mark button in the Attribute Object dialog to mark the Fill Color attribute of "Poly1" , which is still selected (in editions of the Builder other than Basic, you also have to select Mark 0 from the list since more then one mark is available).

Now select "Poly3" , bring up the Attribute Object dialog for its Edge Color attribute and click Constrain . To constrain the edge color to the attribute that was previously marked, select the Use Marked button from the list on the right of the Attribute Object dialog (another option is to constrain to a resource by using the Resource Browser ).

If you now select a new color from the palette, the Edge Color of "Poly3" and the Fill Color of the other two polygons will change simultaneously.

The marking feature may also be used to constrain parameters of object's dynamics to change in unison.

The object's control points (other then the move point) may be constrained as well. Shift -click on a control point to bring up the Control Point dialog, click on