Zoom on Mouse Over in Archestra Object

by: Intelligent Automation Research Group

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
theEmbed 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 InitalSizeand 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:

 
Name Expression Trigger Period Script
GrowSymbol Grow WhileTrue 50 ms GrowGroup.Height = GrowGroup.Height * 1.10;

GrowGroup.Width = GrowGroup.Width * 1.10;

If GrowGroup.Height >= GrowSize then

   Grow = False;

Endif;
ShrinkSymbol Shrink WhileTrue 50 ms GrowGroup.Height = GrowGroup.Height / 1.10;
 GrowGroup.Width = GrowGroup.Width / 1.10;

If GrowGroup.Height <= InitialSize then

   Shrink = False;

Endif;

 
 
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:

 
Name After Script
On Mouse Over 0 ms Grow = True;

Shrink = False;
On Mouse Leave 0 ms Grow = False;

Shrink = True;

  
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
a. embed the new graphic,
b. add the new graphic to the group, and
c. 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:

 
Name Script Addition
GrowSymbol dim vLastX as integer;
dim vLastY as integer;
 
vLastX = GrowGroup.Width;
vLastY = GrowGroup.Height;
 
GrowGroup.Height = GrowGroup.Height * 1.10;
GrowGroup.Width = GrowGroup.Width * 1.10;
 
XOffset = (.5 * GrowGroup.Width) - (.5 * vLastX);
YOffset = (.5 * GrowGroup.Height) - (.5 * vLastY);
 
GrowGroup.X = GrowGroup.X - XOffset;
GrowGroup.Y = GrowGroup.Y - YOffset;
 
If GrowGroup.Height >= GrowSize then
            Grow = False;
endif;
ShrinkSymbol dim vLastX as integer;
dim vLastY as integer;
 
vLastX = GrowGroup.Width;
vLastY = GrowGroup.Height;
 
GrowGroup.Height = GrowGroup.Height / 1.10;
GrowGroup.Width = GrowGroup.Width / 1.10;
 
XOffset = (.5 * vLastX) - (.5 * GrowGroup.Width);
YOffset = (.5 * vLastY) - (.5 * GrowGroup.Height);
  
GrowGroup.X = GrowGroup.X + XOffset;
GrowGroup.Y = GrowGroup.Y + YOffset;
 
If GrowGroup.Height <= InitialSize then
            Shrink = False;
            GrowGroup.X = InitialX;
            GrowGroup.Y = InitialY;
endif;

 
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.

Have a nice trying..