The Show/Hide Graphic script functions allows you to use QuickScript .NET to display a graphic as a pop-up window and close the pop-up window. The functionality is similar to the Show Symbol animation, but improves upon the limitations of the animation. This training document will walk you through how to use the ShowGraphic() function in two sections:

• Basic ShowGraphic Usage
• Advanced ShowGraphic Usage

This document assumes basic knowledge of WindowMaker, Industrial Graphics, and Graphic Editor.

APPLIES TO

• InTouch HMI (all versions), Operations Management Interface

EXPLANATION

With ShowGraphic, you can create a more navigable application, call multiple graphics with a single button click, drill down on specific processes, and more. The function consists of a number of properties that allow for further specifications to be made.

Required ShowGraphic Script Lines

The minimum ShowGraphic script must contain the following four lines:

Dim graphicInfo as aaGraphic.GraphicInfo;
graphicInfo.Identity = "<Identity>";
graphicInfo.GraphicName = "<SymbolName>";
ShowGraphic( graphicInfo );

1. GraphicInfo is a structure that holds the definitions, configuration options, and properties that describe the popup window. This line defines an instance of GraphicInfo named “graphicInfo”.

2. Identity is a required property that needs a unique string value. The Identity holds the configuration options for a single pop-up window, and multiple scripts can use the same Identity. For each new set of configuration options, a new Identity must be defined.

• • You can use ShowGraphic to open an existing native InTouch window by using the syntax:
    graphicInfo.Identity  = InTouch:WindowName

3. GraphicName is the name of the graphic to be shown in the pop-up window. This line is optional, as the Identity property can be used to call an already existing window.

• • It is also possible to call an existing window using the Identity property and still call a new symbol into that window by using the GraphicName property. This can be useful if you want to specify the dimensions/location of the window within WindowMaker, instead of setting those properties within the script.

4. The ShowGraphic(graphicInfo) line invokes the function with the specified properties defined for our instance of GraphicInfo, “graphicInfo” This must be the last line after all other parameters are set, as this is the line that actually invokes the function.

Script Function Browser

For a full list of Properties, open a graphic in Graphic Editor and open the QuickScript .NET editor by right-clicking the canvas -> Scripts:

Then from the Edit Scripts window, click the Display Script Function Browser button to display the Script Function Browser:

In the Script Function Browser window, expand Graphic Client -> ShowGraphic and click the Help button:

This opens the ShowGraphic() documentation which contains a full list of Properties with their Data Type, Default Value, list of acceptable values, and an example. You can also click the OK button instead of Help to load the specified function into the QuickScript .NET editor. You can also view the full list of properties in “Working with the Show/Hide Graphics Script Functions,” in the Creating and Managing Industrial Graphics User Guide.

Any properties used in this training document will be defined within the step as well.

IMPLEMENTATION

Section 1 – Basic ShowGraphic Usage

In this section, we will call the ClockAnalogWall Industrial Graphic from the Industrial Graphics Library into a pop-up window, retaining all the default ShowGraphic() settings.

1. To start, create a new symbol called OpenClock and open this symbol for editing. The Graphic Editor opens.

2. Place a button element on the canvas named OpenClock, with the text property set to “Open Clock”.

3. Double-click OpenClick to open the Edit Animations window. Click the + button to create a new Action Scripts animation. Here, you can either load in the Required ShowGraphic Script Lines using the Script Function Browser or by typing/copy and pasting these four lines:

Dim graphicInfo as aaGraphic.GraphicInfo;
graphicInfo.Identity = "<Identity>";
graphicInfo.GraphicName = "<SymbolName>";
ShowGraphic( graphicInfo );

4. Since we are not calling an existing window, we can configure the Identity property as follows:
graphicInfo.Identity = "ClockPopup";

In addition, we know we want to show the ClockAnalogWall symbol in the window, so we can configure the GraphicName property as follows:
graphicInfo.GraphicName = "ClockAnalogWall";

5. Save and Close the symbol. Embed the OpenClock symbol into a window of your choosing and open WindowViewer. With the specified window open, click the “Open Clock” button and observe the ClockPopup window appear with the default size and location.

Section 2 – Advanced ShowGraphic Usage – Setting Window Location and Dimensions

In Section 1, we called the AnalogClockWindow in a default pop-up window, meaning we did not define any specific location or dimensions. In this section, we will provide a specific location and size for the pop-up window. We will configure ShowGraphic() to open the ClockAnalogWall symbol in a 500×500 window at the top of the screen.

1. Open the OpenClock symbol for editing and duplicate the OpenClock button element to create a new button called OpenClockTop with Text = “Open Clock at Top”.

2. Double-click OpenClockTop to open the Edit Animations window. The previous ShowGraphic() script is present. Since we want this to open a brand new window, we will need to specify a new Identity. Modify the Identity line as follows:
graphicInfo.Identity = "ClockPopupTop";

Our new lines will be added after line 3, but before line 4. The ShowGraphic(graphicInfo); line must always be the last line.

3. First we will specify the window location. We will have our window pop-up in the top-center, relative to the desktop. To accomplish this, we will use the WindowLocation property.

WindowLocation

Specifies the location of the pop-up window.

Data Type
Enum

Default Value
Center

Valid Range
One of 0–12. Each WindowLocation option has an associated integer that can be used to define the Property, as seen in the table below:

Enumerations

Additional Information
If you have selected Desktop as the window relative position, Above, LeftOf, RightOf, and Below are invalid. 

Enter a new line after Line 3, and type the following to have the pop-up appear at the top of the screen:

graphicInfo.WindowLocation = 3;

NOTE: The default relative window location is “Desktop”, so we do not need to add a line to specify the WindowRelativePosition parameter. If you did not want the window location to be relative to the desktop, you could specify the WindowRelativePosition parameter in conjunction with WindowLocation as follows:

WindowLocation

Specifies the location of the pop-up window.

Data Type
Enum

Default Value
Desktop

Valid Range
One of 0–8. Each WindowRelativePosition option has an associated integer that can be used to define the Property, as seen in the table below:

Enumerations

Examples

graphicInfo.WindowRelativePosition = aaGraphic.WindowRelativePosition.<WindowRelativePosition>;
graphicInfo.WindowRelativePosition = 1;

4. Now we will specify the Width and Height of the window to make it a 500×500 window. To accomplish this, we will need to use the RelativeTo, Width, and Height parameters, defined below.

RelativeTo

Specifies the size of the pop-up window relative to the graphic, desktop, or customized width and height.

Data Type
Enum

Default Value
Graphic

Valid Range
One of 0–2. Each RelativeTo option has an associated integer that can be used to define the Property, as seen in the table below:

Enumerations

Width

Specifies the width of the pop-up window.

Data Type
Integer

Default Value
100

Valid Range
0–10000

Additional Information
Applicable only if RelativeTo is CustomizedWidthHeight. You can specify either the height or the width of the pop-up window. The system calculates the other, based on the aspect ratio of the symbol. If you enter an out-of-boundary value, the system shows an "Out of range" message at run time. If the value > 10000, it is set at 10000. If the value < 0, it is set at 0.

Height

Specifies the height of the pop-up window.

Data Type
Integer

Default Value
100

Valid Range
0–10000

Additional Information
Applicable only if RelativeTo is the value of the CustomizedWidthHeight parameter. You can specify either the height or the width of the pop-up window. The system calculates the other, based on the aspect ratio of the symbol. If you enter an out-of-boundary value, the system shows an "Out of range" message at run time. If the value > 10000, it is set at 10000. If the value < 0, it is set at 0.

Using the above parameters to create a 500×500 window, enter a new line after line 4, and type the following:

graphicInfo.RelativeTo = 2;
graphicInfo.Width = 500;
graphicInfo.Height = 500;

5. Click OK. Then Save and Close the graphic. In WindowMaker, note that the OpenClock graphic embedded in a window of your choosing has updated to show the new button.

6. With the specified window open, click the “Open Clock at Top” button and observe the ClockPopup window appear at the Top-Center of the screen in a 500×500 window.

Since the two buttons have different Identity properties defined, it is possible to click each button and have two clock windows show simultaneously.

If the same Identity had been used, each button would respectively close the other window that had opened before.

The ShowGraphic() function is the most versatile option for displaying windows. As a reminder, you can also view the full list of properties as their definitions and examples in “Working with the Show/Hide Graphics Script Functions,” in the Creating and Managing Industrial Graphics User Guide.

The post Utilizing the ShowGraphic() Function appeared first on Industrial Software Solutions.