Smart UI Re-use Quick Start

This Smart UI Re-use Techniques quick start is the fourth in the series of Adroit Smart SCADA quick start guides. As with other quick start guides, it is not a substitute for the training material or in-built help but rather an additional resource to these

A widely accepted fact amongst software development professionals and quality assurance practitioners is that, for software, re-use is the only sure-fired way of ensuring quality and consistency. The term itself, re-use might at first seem a bit obscure, but it refers to the fact that by the time you get around to using a software component for real, it will already have been used many, many times before. It is the reason why large software development projects enrol whole armies of beta testers and inside trackers – to make sure software is well and truly exercised before being deployed in general use

In the context of Adroit Smart SCADA, there are several axes of re-use, offering varying degrees of reusability. In this guide we will be finding out about two of them: Wizards and Templates in some detail

Wizards allow you to reuse the same graphical set of objects and assigned behaviours, over and over again - assigning different values, without having to recreate them from scratch every time. In other words, a wizard is a re-usable design-time object, much like a Windows control. Very importantly, a wizard also has the ability optionally to update all the instances of itself that have already been added to graphic forms, if the wizard is subsequently modified

Templates are similar in some ways to wizards in that they facilitate graphic object and behaviour re-use. But instead of being instantiated at design-time by pasting onto a graphic form, they are always referenced at run-time. This means that any changes made to a template are always reflected whenever the template is subsequently referenced

By way of revision of something learned in Quick Start Guide 1, but also because we need some suitable dynamically changing data, we start by creating half-a-dozen Expressions that vary with respect to time in noticeably different ways.

Next, in order to verify these tags are changing as expected, and also by way of revision, we chart the tags using a LineChart control

We then create a fairly simple graphic form, adapt it to become a Wizard and then re-use it several times – once for each different expression

Finally, we create a Template from the same graphic form previously used to create a Wizard

Creating some tags to display

Making use of the in-built SystemInfo.second tag is a simple and effective way to create dynamically varying tags. For example, an Expression agent of the form:


when set to evaluate Continuously and where v1 contains the value of SystemInfo.second, i.e. the current real-time second value, will result in its value toggling between one and zero every n seconds

So, using the Agent Configurator, create half-a-dozen Expression agents as follows:

Name Expression
TOGGLE_EVERY_01 (v1/1)%2
TOGGLE_EVERY_02 (v1/2)%2
TOGGLE_EVERY_03 (v1/3)%2
TOGGLE_EVERY_04 (v1/4)%2
TOGGLE_EVERY_05 (v1/5)%2
TOGGLE_EVERY_06 (v1/6)%2

The screenshot alongside shows Expression TOGGLE_EVERY_03, with the SystemInfo.second tag allocated to input v01, and Evaluation options defined as Continuous

Displaying tags on a LineChart

Create a fourth graphic form, Form_04, and drop a LineChart control somewhere in the top half of the form. Remove all extraneous paraphernalia from the chart by unchecking the various options as shown in the following two screenshots:

Add six FastLine series to the chart – one for each of the tags just created

FastLine series have somewhat limited options compared to Line series, but also less overhead, and are therefore faster and less resource-intensive to draw

As shown, ensure that:

Distribute the custom axes positions evenly over the entire vertical range: Position 10 – 20 for Series 1, Position 25 – 35 for Series 2…, etc., right through to Position 85 – 95 for Series 6

Configure the Bottom Axis Increment to be every five minutes, and on the Time Details Settings, set the chart Timespan to be 2 minutes, as shown

When displayed in Smart UI Operator or even just run in Designer your chart should look something like…

Note that on the minute boundary, when SystemInfo.second is zero, all pens show a zero value as you would expect. Thereafter, each successive pen shows a value toggling between zero and one at progressively slower rates – every second for pen 1 through to every six seconds for pen 6

Now we have established that we have half-a-dozen tags changing in recognisably different patterns, we are in a position to start creating a wizard and then a template, and thereby try out some of the re-use mechanisms described earlier

Creating a Wizard

Start by creating a fairly simple faceplate-type graphic form called, say Popup something like the screenshots shown alongside - Design mode on the left and Run mode on the right

Choose a font like Verdana 10 Bold to show up nice and clear on screen

Configure the top Vector Text element with a Display Value behaviour for the first Expression’s agentTagName slot, as shown

The central element is a Vector Rectangle with Background Colour behaviour driven by the value slot, once again of the first Expression, as shown

At the bottom, just so that you can see when things happen, configure another Vector Text element, this time showing the contents of the SystemInfo.second slot, as shown

Before creating a wizard from this, verify that it all works by running the Popup form. You should see the rectangle alternating green and red every second, if you are displaying slots from the TOGGLE_EVERY_01 Expression agent

To create a Wizard from our Popup graphic form, all we need do is click the Save As Wizard toolbar button, as shown. The default wzdPopup name suggested is fine, as is the option to Optimise graphic form size which will ensure all unnecessary space is removed from the extremities of the form before it is saved as a wizard
As part of the wizard-saving process, a Substitutions Overview dialog is displayed

This is where you specify which textual substrings in the various behaviours are to be substituted each time the wizard is re-used

In our case, we are only going to vary the agent name between TOGGLE_EVERY_01 and TOGGLE_EVERY_06, so we replace the ‘01’ substring with ‘{n}’

Note: The curly braces are super-important as these act as substitution delimiters. The ‘n’ is just a place-holder character that you can choose to be as meaningful as you like

You need to go through all Graphic Objects on the form substituting as required. Clearly the SystemInfo.second display does not require any substitution as this is common to all Expressions
Once substitution configuration is complete, and the wizard has been saved, drag it across from Enterprise Manager on the left to the Favourites pane to right of Designer workspace

If the Favourites pane is not visible, you can enable it by clicking the relevant button on the View tab, as shown

Next, re-open Form_04 and drag wzdPopup from the Favourites pane over to a free area on Form_04 - just below the LineChart previously configured, say, and click the Paste Wizard option that pops up

This will cause the Substitution Assignment dialog, as shown below, to be displayed

In the left column, you can see our place-holder string ‘n’ which in the right screenshot is substituted with ‘01’. If the substitution resolves correctly the result column shows the completely substituted string and in light green background. If something is invalid about a substitution the background colour will be light red

Paste the wizard six times, at different horizontal offsets below the chart – once for each of our Expressions, and the result should be something like…

Creating a Template

To create a template from your Popup form, first make a copy of it by saving it as, say, tplPopup

Next, for each of the behaviours that reference TOGGLE_EVERY_01 Expression, change the ‘01’ substring to ‘{n}’ as shown, just like you did when previously creating a wizard. Once again, the curly brace substitution delimiters are very important but the ‘n’ character is just a place-holder, and can be anything you like. Save the tplPopup template popup when you have changed all the required behaviours

To make use of our template, we need a TemplateGO (Template Graphic Object) control which is really a Container control to host other graphic forms. So drop a TemplateGO control onto Form_04 somewhere below the second wizard instance previously pasted onto Form_04. The TemplateGO control is located in the Templates folder in the toolbox pane to the left of the Designer workspace. You should see something like…

The TemplateGO Tasks dialog can be invoked at any time simply by clicking the triangular Smart Tag top right of the pale blue TemplateGO control

Click the Browse for a Default Graphic Form to load… link at the top of the dialog, and select our tplPopup template graphic form, at which point you should see it rendered inside the TemplateGO control

Next click the Open TemplateGO Aliases… link at the very bottom of the dialog and substitute value ‘01’ for Alias name ‘n’, as shown

At this point, if you run Form_04 you should see our tplPopup template form, parameterized for the first Expression TOGGLE_EVERY_01 shown inside the TemplateGO container control

To fully illustrate the runtime referencing capability of templates we add a bank of six buttons to the left of the TemplateGO control

As shown, change the Text property of each button from 1 to 6, and configure each button to have an Execute Command behaviour

Choose Open graphic form command, select our tplPopup template, and make sure you Open As: Template Graphic Object

Next, to allocate a different Expression to each button, we need to go to the Aliases tab after selecting the Advanced View at the bottom of the Execute Command Behaviour Configuration

For each button, choose the relevant input for our Alias ‘n’ place-holder corresponding to the button. The screenshot shows ‘05’ allocated for button 5

Execute Command behaviours don’t work in Designer preview Run mode, so we’ll have to adapt the Navigation Template used in earlier quick start guides by adding a button to display the new Form_04 created as part of this re-use guide, which when clicked should result in something like…

Clicking any of the six bottom left buttons will cause a suitable parameterized instance of tplPopup to be rendered inside the TemplateGO container. The screenshot shows button 3 clicked and correspondingly TOGGLE_EVERY_03 displayed

In Conclusion

These may seem trivial examples – merely showing different tags going on and off at different intervals, but hopefully they are pertinent enough illustrations of configuration re-use, to make you realize that the techniques elaborated can be of great benefit both productivity-wise and quality-wise in a real SCADA HMI project context


Please email any feedback or suggested improvements to

Download Adroit