: Dynamically Growing and Shrinking ArchestrA Graphics

One of the major new features to Intouch 10’s ArchestrA graphics is their scalability. ArchestrA Graphics are inherently vector-based, and opposed to the bitmap-based traditional intouch graphics, the ArchestrA graphics lend themselves to be scaled to different sizes than their native footprint without losing clarity and readability. This is why ArchestrA graphics are classified as “resolution neutral” – they look good no matter how you scale them! Because of this, it is now more practical to do different scaling features with ArchestrA graphics that would not be as functional in a standard Intouch graphic set. One of the most noticeable, looking at the new Intouch reactor demo, is the “zoom on hover” functionality of graphics, or making an object grow to a more visible size when the mouse is placed on top of it. While some graphics in the built-in ArchestrA Symbol Library already have this Grow-Shrink functionality built in, it is very simple to add this functionality to any ArchestrA graphic, even ones that you, the engineer, create. This article will explain how to make a generic symbol template to implement this functionality with any graphic you create.
 

To start off, first pick an ArchestrA symbol that you want to make grow or shrink. In the context of this article, we will use a pre-made symbol from the ArchestrA Symbol Library; however, this functionality can be applied to any symbol created.

Next, create a new, blank symbol by right clicking in the Graphic Toolbox and clicking New->Symbol. For the purposes of this article, the symbol will be named “SymbolGrow”. Double click the object to open the symbol editor.

After the symbol editor is opened, we must now embed the graphic we want to grow or shrink. To do this, click on the Embed ArchestrA Symbol icon in the toolbar. Browse to your graphic and double click to add it into the symbol.

Now, select the symbol, right click, and select Grouping->Group. Rename the group to “GrowGroup” by using the properties editor on the right side.

Note: The group is not necessary if you were going to just do a single object to grow or shrink, but since we are making a generic template to use with any graphic, we are making a group. We will go over how to change the symbol in this group later in the article.

Next, we add four properties to the overall graphic by deselecting everything, then going to the Properties Pane and selecting the ellipsis next to custom properties.

Then, add the following parameters:

Grow: Boolean
Shrink: Boolean
InitialSize: Integer
GrowSize: Integer

The Grow and Shrink properties will trigger the scripts to grow and shrink the object, respectively, while the InitalSize and GrowSize properties will hold the initial size of the object (based off of the embedded symbol’s height, in this case), as well as the size that the developer wants the graphic to grow to on the screen. Now, given that data, the only thing the end-user would need to manipulate would be the GrowSize. Because of this, we set the other three properties to “private”. This way they cannot be manipulated by the developer in Windowmaker, but still can be written to items local to the graphic. In the GrowSize, set the default value to 600. If the user or developer wants to change this later, he or she can do so in the properties of the symbol instance.

The next step is to write the scripts that will drive the growing and shrinking of the symbol. First, we want to get the initial size of the group. This is done in the on show symbol script. Open Scripts from the Runtime Behavior properties, the Special menu, or by hitting F10. First, we add the following script to the “On Show” Predefined scripts:
 

InitalSize = GrowGroup.Height;

This sets the private property InitialSize to the GrowGroup’s height, which is what the scripting will use when the object shrinks back to its original size. Next, we add two scripts, GrowSymbol and ShrinkSymbol, to the scripts by clicking the “+” button on the Script Editor:

These scripts will, when grow or shrink is true, grow or shrink the width and the height of the group by a factor of 1.10. Once the group reaches its maximum or minimum size, it will set the value of grow or shrink to false, thus stopping the object from growing or shrinking larger or smaller.

Now that we’ve written the scripts, we need to tell the grow script to run when the mouse is placed over the symbol, and the shrink script to run when the mouse leaves the symbol. To do this, we add an action script to the group.

What you’ll initially notice is if we try to add an action script to the group as-is we will not be able to (action scripts is greyed out). This is the nature of grouping. You can consider a group to be a hybrid of an InTouch Symbol or a Cell. Initially, a group is simply a collection of individual elements. However, if we want the group to be able to be used for user input, we must tell the group to accept that. This is done by setting the “TreatAsIcon” property to true in the group’s properties on the right hand side. After setting this property, the action scripts (as well as other user-input animations) will be enabled in the animations menu for use.

After adding the action script animation to the group, we want to add two scripts to the Mouse On Hover and Mouse On Leave Properties:

This will then trigger the Grow Script when the pointer is placed over the graphic, and shrink when the pointer leaves the graphic. At this point, the graphic is complete, select Save and Close.

At this point, we can test out our new graphic. To do this, open up any one of your $InTouchViewApp templates. Add a window called “GrowTest,” then embed your SymbolGrow graphic onto the window. Switch into runtime and test. The symbol should grow when the mouse is hovered over, and shrink when the mouse is released.
 

Changing the growing symbol:
Since the graphic is set up as a group, it is very easy to change the graphic being used to grow and shrink. To do this, we must

1. embed the new graphic,

2. add the new graphic to the group, and

3. delete the old graphic

To start off, open up the SymbolGrow template. Once the editor opens up, select embed archestra graphic, then select a different symbol than the one currently in your graphic.

Now, add the symbol to the GrowGroup group. First, ctrl+click both the new symbol, and the GrowGroup in the Elements list. Then, right click on either and select grouping->add to group “GrowGroup”. The grouping should now look like this:

Finally, delete the old graphic by selecting it, right clicking, and hitting delete. Now save the graphic and switch back to windowmaker, and update the graphics. You should see the new graphic in the old graphic’s place. This will allow you to have a single template to add the grow-shrink capability to any of your custom graphics.

Adding Offsets (offsetting the graphic growth)

Through testing, you may notice that the graphic grows and shrinks out of its upper left corner. Instead, the end user may want to see this grow from the center of the object. This can be done by offsetting the x and y coordinates of the graphic as the graphic grows and shrinks. This is a simple addition to the existing scripts.
 

First, add four new custom properties:

- InitialX, type integer, private
- InitialY, type integer, private
- XOffset, type integer, private
- YOffset, type integer, private

The next thing needed is to get the initial x and y coordinates of the GrowGroup, and then store them to the two new properties. To do this, add the following two lines to the symbol->On Show script:

InitialX = GrowGroup.X;
InitialY = GrowGroup.Y;

Finally, the Grow and Shrink scripts need to be modified to move the x and y coordinates as the graphic grows and shrinks. As the graphic grows, it should move up and to the left, while when it shrinks, it should move down and to the right. To do this, replace the growSymbol and shrinkSymbol texts to be the following:

Save and close the graphic, then test in WindowViewer. You should see the graphic re-centering itself while it grows and shrinks, instead of staying “anchored” to the top left original position.

Please feel free to email support@qmation.com with questions.

©2007 Q-mation, Inc. All rights reserved. All trademarks are the property of their respective owners.