best practices for building process graphics ww...

Best Practices for

Building Process

Graphics

WW HMI SCADA-13

ArchestrA Graphics offer the most powerful

tools in the market for process visualization.

In this session you will learn about

techniques for designing your symbols,

achieving optimal performance, reusing

engineering, leveraging advanced controls

and much more for your InTouch

applications.

2014 Software Global Client Conference

Today’s Presenters

Brian Martin

Technical System Consultant

Wonderware Brand

[email protected]

Jeff Tapia

Technical System Consultant

Wonderware Brand

[email protected]

Best Practices for Building

Process Graphics ArchestrA Graphics offer the most powerful

tools in the market for process

visualization. In this session you will learn

about techniques for designing your

symbols, achieving optimal performance,

reusing engineering, leveraging advanced

controls and much more for your InTouch

applications.


How many have a QR Code reader on

your phone? (Ex. RedLaser for iOS)

●QR Code for shared

content


Poll

●How many using

InTouch? Please raise

your hand.

Of this group…

●How many NOT using

ArchestrA Graphics?


ArchestrA Graphics Features & Value

Vector Based

great esthetic improvement

more elements, more animations

resolution independant

Object Oriented

standardization

high reusability

easy to update and maintain

.NET Based

more integration and ready for

the future

.NET scripting in addition to

QuickScripts

Support for .NET controls

Advanced Editor

new features for your application

more dynamic HMI

configurable HMI

save tags!

Quality & Status

safe and reliable


Vector Based

●Why is this important?

• Runtime - Resolution Independence

• Configuration – Lossless resizing


Standardization

●ArchestrA graphics make having common graphic

assets across multiple projects easy to accomplish

and manage.


.NET Extensibility –

Built on .NET – means:

●Access to a wealth of

additional script functions: 1.Entire .NET Framework

2.SQL Access Functions

3.Custom Script Function

libraries (Write your own!)

4.Etc.

.NET Controls – means:

●do not require installation.

●expose all methods.

●cleanly expose all events.

●support a wider set of data

types.


ArchestrA Graphics Editor – just a

sampling of improvements…

• A2 graphics are mini-apps with self-contained scripts, variables…

• Add named scripts to any symbol.

• Edit Groups (cells) without having to break the cell.

• Extreme reusability by embedding symbols into other symbols.

• Manipulate graphic element properties through scripts.

• All elements can now be rotated on the canvas.

• Alternate color choices; Gradients, Textures, and Patterns.

• Improved Alignment Tools, more image types (GIF, JPG, PNG),

• Many more….


In 2014 ArchestrA Graphics Get Better!

• Situational Awareness Library – Use best practices out of the box!

• Symbol Wizards – Use ours or build you own, no toolkit needed!

• Many new Animations – Sweep Angle, Points, Trend Pen…

• Element Styles – Manage all colors centrally!


Technology is moving forward!

Old Nokia works

fine...

...but new smart phones

are better!


Technology is moving forward!

Old InTouch

Graphic works

fine...

...but is your HMI modern and

effective?


Old HMI design, the Past


New High Performing HMI, the future

Situational Awareness


Opportunity: Situational Awareness

• Enhance the operator’s Situational

Awareness of current process conditions.

• Leverage a variety of visual techniques

within the HMI.

• Increase contrast between normal

operating conditions and alarm states

requiring action.

• Generally monochrome

• Vivid colored alarm states

• Graphics purposely not photo realistic.

• Just enough visual detail to deliver

functional purpose without showing

extraneous information to operators.


Color and Attention ● Situational Awareness focused displays take advantage

of the “pop out” effect to guide operators’ attention to

values that are in alarm.

Click and

watch for the

alarm border…


Key Principles Distracting and Irrelevant Detail

● Although pleasant to

see, much of this graphic

is irrelevant to control the

process.


Key Principles Distracting and Irrelevant Detail

● Although pleasant to see,

much of this graphic is

irrelevant to control the

process.

● These are the only objects

providing information to the

operator:


New Paradigm in HMI Design


Provide SAL display

in every project

Hopefully immediate benefits,

however…

Even if your first application isn’t

perfect, it can get people:

●To understand the concept

●Thinking, finding better and better

applications


Check out this session for more SAL

●WW HMI SCADA-12

●Best Practices for

Situational Awareness

●John Krajewski

Symbol Wizards


Wizard Agenda

●What is a Symbol Wizard

●Review ArchestrA Graphics

●Who Should Use Symbol Wizards

●Symbol Wizard Use Cases

● Examples

●Why Symbol Wizards Make Sense

●The Future…


WHAT IS A SYMBOL WIZARD Description


Symbol? Wizard?

●Symbol

● Picture

● Represents Something

●Wizards

● Install

● Configuration

● Update

● Something is AutoMAGIC


Specifics

●Symbol Wizards Allow

● Options to be enabled or disabled

● Scripts enabled or disabled

● Graphics turned on or turned off

●Built by users (Developer)

●Consumed by users (Consumer)

ON

OFF

Enable

Disable


What, Actors?

●Developer

● This User’s Profile

●System Platform User, experience developing ArchestrA graphics and

Application objects.

●System Integrator, Controls Engineer, Interface Developer

●Consumer\Application Configurer

● This User’s Profile

●Application Developer User, experience assembling InTouch\System

Platform Applications

●Junior Engineer at SI, Junior….

*

* My made up word


ARCHESTRA GRAPHICS A Review


The IDE ArchestrA Graphic Editor

●Graphics Have

● Elements

●Animations

● Custom Properties

● Scripts


Assembled Graphics

●Single Graphic

● Assembled from

other graphics

● Embedded

graphics to save

time

● All graphics

options resolved

at runtime.

●This is Heavy


Light Graphics

●And Lots of Them


Heavy Graphic

●Multi-Purpose Graphic

● Example Value Indicator

●Process Variable

●Setpoint

●Alarm Limits

●Alarm States

●Mode

●Button for Trending

●Button for Alarming


Why is it Heavy

●Lots of Graphical Elements

●Lots and Lots of Custom Properties

●Lots of Scripts


WHO Symbol Wizard Usage


Already Established

Individuals… (Actors)


What Customer Personas


OK More Detail

●OEMs

●System Integrators

●Corporate Users


USE CASES How Can They Be Used


System Platform 2014

●Visualization Enhancements

● Symbol Wizards

Rules Rules


Symbol Wizards Provide Options!


Air Handler Example

●Customer Order – Redo Critical Areas HVAC

● Air Handlers for Three Distinct Spaces

●Space 1-Office Area

●Space 2-Warehouse

●Space 3-Fabrication


Space 1

●Office Area

● Simple Unit Normal Temperature Control


Space 2

●Warehouse

● Simpler Unit Normal Temperature Control no Filter


Space 3

●Fabrication

● Comprehensive Unit Temperature\Humidity Multiple Coils


The Configurer

Build Model Use Toolbox Templates


Assembles Unit


AHU2, AHU3, AHU4….


WHY Why They Make Sense


Efficiency

●Standardized

●Faster

●Easier to Assemble

●Easier to Maintain


THE FUTURE What’s Next


Objects and Graphics…

Graphics Performance


Causes of ArchestrA Graphic

Performance Issues

●Retrieve Definition

●Render

●Bind Data

●Continuous Updates

●Close

●Will be grey if not relevant.

Call-Up Time

Graphic Call-up Time

Static CPU Load

Memory Utilization

Retrieve Render Bind Continuous Close


Gradient Usage

• The definition of gradients are the colors and the type of gradients.

• All of the individual colors are calculated at runtime when initially rendered and

any time an animation changes the gradient.

•When large numbers of graphic elements (1000’s) using gradients are used the

impact can be severe.

• This information consumes more memory than a solid fill.

• Be careful of a larger number of small graphic elements using gradients. The

effect may be minimal visually but severe in terms of performance.

• Transparencies have a similar performance impact.



Gradient Usage Example

• Same Embedded

Symbol (just

resized)

• Same Detail

• Same Calculations

• Same Cost

• Different Visual

Value


Custom Property Density

● Custom Properties have been greatly optimized in InTouch 2012 which has

resulted a much lower performance impact.

● Some customers have ended up with 20,000 plus custom properties on a

symbol.

● Typically an impact of embedding many symbols at many levels.

● Should consider necessity of the variables and consider if they should reside

server side.

•Is it needed for graphic presentation?

•Is the value specific to only this workstation?



Multi-Variable Expressions


● Each variable must be subscribed, bound and published individually.

•Can the calculation be done server side?

• Is the value specific to this specific workstation?

● Expressions are ad-hoc scripts and require execution.

•The AppEngine is better suited to executing volumes of scripts and should be used to handle

load where possible.


Script Utilization


● ArchestrA Graphics are extremely flexible in their ability to

execute scripts. (On Show, While Showing, On Close, Data

Change, Condition)

● Carefully plan the usage of scripts that will cyclically

execute.

•If you are setting a script to run every 50ms? Why?

•Is every execution needed? Is the same result be

calculated over and over?

•How many scripts are on the symbol?

•How many of this symbol will be used?

•Can the script be server side?


Element Grouping


●When using the Grouping mechanism in graphics

there is an optimization done for groups with no

animation. The group is handled as an image.

The Tank on the

right opens in half

the time with half

the static CPU load

of the tank on the

right.


ArchestrA Graphics in InTouch

● Avoid Assembling ArchestrA Graphics in the InTouch Window

– Create an ArchestrA Graphics Toolset For InTouch “Windows”

– For Each InTouch Window Create an ArchestrA Symbol For It

» Assemble the Graphics in the Symbol for the Window

» It is now reusable across InTouch Applications and WIS

» You will be Better Prepared for the ArchestrA Window Object

– Object Graphics must be Assembled in an Object

» Candidate Objects for this organization

» Area Objects

» View Engine Objects

– Once Laid out the InTouch app does not need to be opened in WindowMaker

● InTouch View Application Instances

– Provide a DI Gateway to the InTouch Tag Dictionary

– InTouch: is the Relative name from ArchestrA Graphics

– Galaxy: is the Relative name from InTouch


Graphic Performance Indication


1st Time Call Up Performance Resolving

References

Performance Problem:

●The 1st Time Call Up of graphics is taking crazy long (like 15+ seconds)

● GR network connectivity or availability is poor

This is a rare scenario that 99% of installations don’t encounter.

Call-Up Time



1st time call up performance of graphics

- Where does this apply? Only if…

●you have poor or non-existent connectivity to your galaxy repository

●You have an object-based system

●AND 1st time call up performance isn’t meeting expectations

●This is not common but has been found in low quality networking environments, as can be the case with radio, satellite networks

It applies to:

● InTouch native graphics

●ArchestrA graphics

●Directly using instances of graphics

●Or reassigning graphics using “.OwningObject” or SetCustomPropertyValue()


Steps involved in resolving the Objects

Have they been?

Ask next known

computer…

Ask next known

computer Ask GR

Running locally

Resolved previously


Performance Considerations

- 1st time call up performance of graphics

● Keeping GR accessible and on reliable

network

● Using graphical caching features

introduced in v2012

● Show/hide high priority graphics on startup

● Reference in script on graphic

dim s as string;

s = Tank_001.Tagname;





Call-Up Time



Element Grouping When using the Grouping mechanism in graphics there is an optimization done for

groups with no animation. The group is handled as an image.

The Tank on the left

opens in half the

time with half the

static CPU load of

the tank on the right.

Top Performance

Configuration:

• 1 Base Group

Animations

• 1 Base Group

Static elements. Clos

e

Retrieve Render Bind Waiting Data… Expression

Evaluation Render

Tips And Tricks


Where can A2 graphics be assembled?

In Graphic Toolbox On Template On Instance In InTouch (WM)

Reusability


Graphics as function

Our simple demonstration example:

●Graphic Initialization Delay Timer


If we create “OurInitializationDelay”

Graphic as a Function

●Does nothing more than

sets it’s Complete bit true 1

second after it is displayed.

●Logic not shown:

●On Show: complete=false;

●WhileFalse for 1 second

complete = true;


Functions often don’t need any visible display

components but insert a 1x1 invisible pixel


Drop OurInitializationDelay in another

graphic


In this case animate visibility using the

delayed complete bit


Use this common function across other

graphics by dropping and tying it in


The benefits of using “graphics as

functions”

●Provide a single place to make changes

●Provide consistency across multiple graphics

●Allow you to identify everywhere that logic is used


Applications where we have used

Graphics as Functions

●Adding debug logic or LogMessages

●Creating animation timers

●Storing parameters to & retrieving from the AppDomain

●Encode/decode bit mapping to bytes, integers, etc.

●Parsing comma separated variables to individual values

●Associating equipment colors with product names

●Etc.


When might you consider using a

graphic as a function?

Ask yourself?

● Is the need for the function display oriented?

● Is it needed in multiple places?

Planning For The Future


Challenges, trends & direction in design

What is the standard

resolution to guide you

customers to design for

the future?

●1280x1024?






the future?

●1920x1080?






the future?

●1600x900



●iPad

●iPhone

●4, 5, ?6?

●Android

●Portrait/Landscape

●Portrait Monitors

●Pinch / Zoom


New “layouts” planned for

InTouch with A2 graphics

Location 1

Location 2

Location 3

Location 4

Location 5


How do we design for this?

(What are others doing?)


So what do you design for?


Be thinking

●1:1 aspect ratio

●It’s OK to use a space

factor of 2x1, 2x2, etc.

for some displays but…

●be thinking 1:1 as the

base unit

●Tablet/Touch even with

non-tablet applications


Future Navigation &

QuickClient today


What if many aspects of the InTouch

HMI “Built itself”?

It just works

• Alarming, Trending, Navigation, etc.

• Functional “Out of the Box”

• Minimize touch points

• Keeps working


Why QuickClient

● Canned navigation entirely using IDE,

Graphics Toolbox & Object Model.

● No need to develop in WindowMaker

● “Out-of-the-box” Alarming, Historian

Client Trending, Embedded

Information Server access

● The InTouch app has 1 tag, 1 script,

& never needs to be touched

●Great application to

start/test/demo

●Be more prepared for the future of standardized navigation.

●can be added to any

InTouch or WSP system

●works in 2012 R1, R2 & 2014, etc.


Using QuickClient v 2014

●Formerly

known as

ThinView


QuickClient Introduction

●How to use it?

1. Import QuickClient aaPKG



●How to use it?

2. Update settings in ArchestrA Graphics



●How to use it?

3. On $QuickClient InTouchApp

Turn on “Include all galaxy graphics…”



●How to use it?

4. Configure Model and/or Graphic Toolset(s) for whatever you want to see

=



●How to use it?

1. Import QuickClient aaPKG

2. Update settings in ArchestrA Graphics

3. Turn on “Include all galaxy graphics…” on $QuickClient InTouch App

4. Configure Model and/or Graphic Toolset(s) for whatever you want to see

5. Go into Runtime


QuickClient download

●WDN.WONDERWARE.COM


What is there?

●Contains zipped folder with:

1.QuickClient v1.7 for 2012R1.aaPKG

2.QuickClient v1.7 for 2012R2.aaPKG (also use for 2014, no change)

3.QuickClient v1.7 MES Additions.aaPKG – DON’T USE

4.QuickClient User Guide

●Download it!


Wonderware InTouch QuickClient v2014

V2014 via skydrive Focus

●Aspect Ratio

●Bottom bar only (eliminated

upper bar)

●Applied Galaxy Styles

●Misc cleanup


Coming version v2014R2

●Planned for 2014R2

release soon after User

Conference

●Further Simplification:

●4 basic settings

●Platform required w/hist

●Allowed autoID of:

● GalaxyName, Historian,

GRNode

●Remove MES

●16:10 Aspect Ratio

●Misc features & cleanup


Why QuickClient

● Canned navigation entirely using IDE,

Graphics Toolbox & Object Model.

● No need to develop in WindowMaker

● “Out-of-the-box” Alarming, Historian

Client Trending, Embedded

Information Server access

● The InTouch app has 1 tag, 1 script,

& never needs to be touched

●Great application to

start/test/demo

●Be more prepared for the future of standardized navigation.

●can be added to any

InTouch or WSP system

●works in 2012 R1, R2 & 2014, etc.


QC

It’s a Wrap


Ready, aim, fire…

●QR Code for shared

content

best practices for building process graphics ww...

Documents