Download as pdf or txt
Download as pdf or txt
You are on page 1of 394

W O N D E R W A R E ® T R A I N I N G

Training Manual
Revision C
October 2007
Part Number 05-2085

InTouch® 10.0
New Features and
ArchestrA Graphics
INFORMATION IN THIS DOCUMENT IS SUBJECT TO CHANGE WITHOUT NOTICE.

© 2007 by Invensys Systems, Inc. All rights reserved. No part of this document may be reproduced, stored in
or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical,
photocopying, recording or otherwise), or for any purpose, without the express written permission of Invensys
Systems, Inc. Except where noted, the companies, organizations, products, domain names, e-mail
addresses, logos, people, places and events depicted herein are fictitious and no association with any real
company, organization, product, domain name, e-mail address, logo, person, place or event is intended or
should be inferred.

Invensys and the author(s) assume no responsibility for errors or omissions and no liability is assumed for
damages resulting from the use of the information contained herein. Use of the Invensys software described
in this document is subject to the terms of the applicable Wonderware Corporation or Invensys Systems, Inc.,
license. These terms include provisions that limit your rights such as use restrictions, disclaimers of
warranties and limitations of Wonderware and Invensys liability. A copy of the applicable license will be
displayed upon initial installation of the software. If a copy of the license is not displayed or you require an
additional copy of the license, you may obtain one from Invensys' Wonderware business unit upon request by
calling 1.949.727.3200 or by sending an e-mail to support@wonderware.com.

Invensys; Wonderware; ActiveFactory; ArchestrA; DT Analyst; FactorySuite; FactorySuite A2; InBatch;


InControl; IndustrialSQL Server; InTouch; InTrack; QI Analyst; SCADAlarm; SPCPro; SuiteLink;
SuiteVoyager; WindowMaker; WindowViewer; Every system in your plant, working in concert; and the
Visualize, Analyze, Optimize logo are trademarks or service marks of Invensys plc, its subsidiaries and
affiliated companies. All other brands and product or service names may be the trademarks or service marks
of their respective owners.
Table of Contents 1

Table of Contents
Module 1 Introduction .................................................................................1-1
Section 1 – Course Introduction......................................................................... 1-3

Module 2 InTouch 10.0 Stand-Alone ..........................................................2-1


Section 1 – Using InTouch Without ArchestrA................................................... 2-3

Module 3 New Functionality Overview ......................................................3-1


Section 1 – Introduction and Demonstration Topics .......................................... 3-3

Module 4 Import, Migration and Integration..............................................4-1


Section 1 – About InTouch ArchestrA Integration.............................................. 4-3
Section 2 – Managing InTouch Applications with IDE ..................................... 4-13
Section 3 – Using IDE-Managed InTouch Applications At Runtime ................ 4-21
Lab 1 – Creating and Importing InTouch Applications in the IDE.............. 4-25

Module 5 Symbol Creation and Editing .....................................................5-1


Section 1 – Managing Symbols ......................................................................... 5-3
Section 2 – Using ArchestrA Symbols in WindowMaker.................................. 5-93
Lab 2 – Creating and Embedding Symbols ............................................. 5-105

Module 6 Custom Properties and Animation ............................................6-1


Section 1 – Using Custom Properties ................................................................ 6-3
Section 2 – Animating Graphic Elements ........................................................ 6-17
Lab 3 – Adding Custom Properties and Animation.................................... 6-93
Lab 4 – Animating ArchestrA Symbols in InTouch .................................. 6-101

Module 7 Scripting.......................................................................................7-1
Section 1 – Scripting with ArchestrA Symbols ................................................... 7-3
Lab 5 – Associating Scripts with ArchestrA Symbols ................................ 7-15

Module 8 Other Features.............................................................................8-1


Section 1 – Object Relationships ....................................................................... 8-3
Lab 6 – Using ArchestrA Symbols with Application Objects........................ 8-9
Section 2 – Deploying an InTouch Managed Application ................................ 8-19
Lab 7 – Deploying an InTouch Application ................................................ 8-23
Section 3 – Quality and Status......................................................................... 8-27
Lab 8 – Configuring Quality and Status Display ........................................ 8-33
Section 4 – Multiple Symbols........................................................................... 8-37
Lab 9 – Using Multiple Symbols ................................................................ 8-39
Section 5 – Common Controls ......................................................................... 8-43
Section 6 – Advanced Editing .......................................................................... 8-49
Lab 10 – Embedding Symbols .................................................................. 8-57
Section 7 – Multi-User Environments............................................................... 8-61
Section 8 – Using Client Controls .................................................................... 8-63
Lab 11 – Using Client Controls.................................................................. 8-77

InTouch® 10.0 New Features and ArchestrA Graphics


2 InTouch® 10.0 New Features and ArchestrA Graphics

– Intentionally left blank –

Wonderware Training
Module 1

Introduction
Section 1 – Course Introduction 1-3
1-2 Module 1 – Introduction

Module Objective
z Introduce the InTouch® 10.0 Product Marketing Beta Course and review how to build and
deploy standard InTouch® applications using ArchestrA® technology.

Wonderware Training
Section 1 – Course Introduction 1-3

Section 1 – Course Introduction

Section Objectives
z Introduce the InTouch® Beta course.
z Review System Requirements, Wonderware® Licensing and Technical Support options.

This section will familiarize you with the objectives and agenda for the InTouch® 10 - New
Features course as well as Wonderware® FactorySuite® basics, System Requirements, Licensing
and Technical Support.

Course Description
The InTouch™ 10.0 New Features and ArchestrA Graphics course is a 2-day, instructor-led class
that provides you with a fundamental understanding of InTouch integrated into the ArchestrA®
architecture including the differences between InTouch 10.0 and InTouch 9.5. InTouch 10.0 works
in conjunction with the Wonderware® System Platform to provide visualization for ArchestrA®
applications.
The InTouch 10.0 New Features and ArchestrA Graphics course includes the graphics capability
built into the ArchestrA IDE. The ArchestrA IDE adds the functionality and ease of maintenance by
deploying InTouch as an object in the Wonderware Application Server application. It allows you to
create, edit, animate and deploy graphics within the ArchestrA environment. InTouch 10.0 retains
all of the functionality from previous versions of InTouch.

Course Objective
Upon completion of this course, students should be able to:
z Create, edit, and animate ArchestrA symbols
z Configure and apply scripts
z Demonstrate new features included in InTouch 10.0
z Demonstrate integration of InTouch and ArchestrA

Audience
All current users of InTouch 9.5 or earlier.

Prerequisites
The prerequisites for this course are:
z Completion of the InTouch™ HMI 9.5 Fundamentals of Application Development Course
z InTouch scripting experience
z Wonderware Application Server experience is helpful
z Extensive knowledge of Microsoft Windows
z Familiarity with networking
z Manufacturing industry experience

InTouch® 10.0 New Features and ArchestrA Graphics


1-4 Module 1 – Introduction

Agenda

Module 1 – Introduction
Section 1 – Course Introduction
This section will familiarize you with the objectives and agenda for the InTouch® 10 - New
Features course as well as Wonderware® FactorySuite® basics, System Requirements,
Licensing and Technical Support.

Module 2 – InTouch 10.0 Stand-Alone


Section 1 – Using InTouch Without ArchestrA

Module 3 – New Functionality Overview


Section 1 – Introduction and Demonstration Topics

Module 4 – Import, Migration and Integration


Section 1 – About InTouch ArchestrA Integration
This section explains the concepts and capabilities of the integration of ArchestrA architecture
and the Wonderware IDE with InTouch HMI.
Section 2 – Managing InTouch Applications with IDE
Section 3 – Using IDE-Managed InTouch Applications At Runtime
Lab 1 – Creating and Importing InTouch Applications in the IDE

Module 5 – Symbol Creation and Editing


Section 1 – Managing Symbols
Section 2 – Using ArchestrA Symbols in WindowMaker
Lab 2 – Creating and Embedding Symbols

Module 6 – Custom Properties and Animation


Section 1 – Using Custom Properties
Section 2 – Animating Graphic Elements
Lab 3 – Adding Custom Properties and Animation
Lab 4 – Animating ArchestrA Symbols in InTouch

Module 7 – Scripting
Section 1 – Scripting with ArchestrA Symbols
Lab 5 – Associating Scripts with ArchestrA Symbols

Module 8 – Other Features


Section 1 – Object Relationships

Wonderware Training
Section 1 – Course Introduction 1-5

This section illustrates the concept of containment and how it works with Application Objects
and Templates.
Lab 6 – Using ArchestrA Symbols with Application Objects
Section 2 – Deploying an InTouch Managed Application
Lab 7 – Deploying an InTouch Application
Section 3 – Quality and Status
Lab 8 – Configuring Quality and Status Display
Section 4 – Multiple Symbols
Lab 9 – Using Multiple Symbols
Section 5 – Common Controls
Section 6 – Advanced Editing
Lab 10 – Embedding Symbols
Section 7 – Multi-User Environments
Section 8 – Using Client Controls
Lab 11 – Using Client Controls

Wonderware Software Solutions


Wonderware® Software Solutions provide valuable tools for optimizing and standardizing your
industrial organization. They offer essential time and cost-saving techniques that increase
efficiency and reduce application engineering effort and deployment.
The solutions deliver manufacturing and operational performance improvements that can reduce
the amount of project-specific work required to develop information and automation applications
that are integrated across entire operational enterprises. These solutions can also be implemented
in the context of existing systems, at your own pace and to the extent that you choose.
The Wonderware solutions leverage a powerful, layered software architecture that enables a
variety of features and capabilities.

InTouch® 10.0 New Features and ArchestrA Graphics


1-6 Module 1 – Introduction

z Microsoft® Technologies, such as Microsoft Windows®, Microsoft SQL Server, and


.NET, are applied as a basis, enabling compatibility with commercial IT hardware and
software.
z Wonderware System Platform and Wonderware Client Software provide a
comprehensive set of services and capabilities to enable an industrial infrastructure that
includes all the necessary functions needed by any industrial application solution.
z Function-Specific Modules make it easier than ever before to optimize production and
performance management by providing common tools for a variety of functions, from
tracking production orders to analyzing performance data.
z Wonderware QuickStart Applications provide examples of configuration best practices,
pre-defined graphics, and Web reports, using a fully functional and documented demo
application.
All Wonderware Software Solutions—whether in the areas of Supervisory HMI, Production and
Performance Management, or Geo-SCADA—leverage the comprehensive ArchestrA® industrial
automation and information software architecture.

Wonderware System Platform


The Wonderware System Platform provides a single platform for all the SCADA, Supervisory HMI,
and Production and Performance Management needs of industrial automation and information
personnel. The Wonderware System Platform, built on ArchestrA technologies, is a strategic
application infrastructure. Its modular approach allows new application components to be created
now, with the understanding that the requirements, and even the application itself, could
completely change tomorrow.

Functional Capabilities
The Wonderware System Platform contains an integral core set of capabilities and services to
support sustainable production and operations performance improvements via a comprehensive
set of six capability areas:
z Industrial domain services for industrial computing functions that are not provided by
commercial operating systems or products
z Software and device connectivity services for easy communication to any plant or
business information source
z Information and data management services for management of real-time and historical
information
z Information-delivery and visualization services for functions that provide information to
the right user at the right time, and in the form in which they expect it
z Application development services that provide easy and intuitive development of
modular industrial software solutions that are easily changed to meet future needs
z System management and extensibility services that provide easy management,
expansion, and modification of the application or host computing architecture

Wonderware Training
Section 1 – Course Introduction 1-7

3rd Party
Clients

Modular Industrial and Manufacturing Solutions

Wonderware Clients

Industrial Domain Application System Mgmt and


Features Development Extensibility
Information Delivery
and Visualization
Information and
Database and
ArchestrA Data Management
Historian
Applications Architecture

Software and Device Connectivity

Existing HMI’s, Software Applications - Field Devices - PLC’s,


Historian, Lab Systems, Business Systems, MES RTU’s, DCS
CMM’s Databases

InTouch® 10.0 New Features and ArchestrA Graphics


1-8 Module 1 – Introduction

System Platform Components


The Wonderware System Platform consists of a variety of software components.

Wonderware Clients

InTouch View ActiveFactory Reporting Client


(Information Server CAL)

Functional
Modules Wonderware System Platform

Application Server Historian Information Server


(IAS) (InSQL) (SuiteVoyager)

Device Integration

3rd Party S/W Field Devices


Data Sources Applications PLC, RTU
HMI, LIMS DB, MES DCS

Wonderware System Platform


z Wonderware Application Server (formerly known as Industrial Application Server)
framework for system-wide, real-time data acquisition, alarm and event management,
centralized security, data manipulation, remote deployment, and collaborative engineering
z Wonderware Historian (formerly known as IndustrialSQL Server™) plant data historian
z Wonderware Information Server (formerly known as SuiteVoyager®) industrial portal
software for Internet/intranet visualization and content management
z Wonderware Device Integration Tools for field device connectivity
Wonderware Clients
z Wonderware InTouch® View human-machine interface (HMI) software as a visualization
client for the System Platform
z ActiveFactory™ trending and analysis software
z Reporting Client-Access Licenses for Information Server to enable information-sharing
and reporting over the Web
Wonderware Functional Modules
To complement the capabilities and benefits offered by the Wonderware System Platform,
Wonderware also offers a set of easily implemented add-on modules to assist you in the areas of
Performance Management, Production Management, Supervisory Control, and Geo-SCADA.

Wonderware Training
Section 1 – Course Introduction 1-9

Production and Performance Management Software Solutions


Wonderware provides tools that empower you to take a proactive approach to production and
performance management. Appropriate for a wide range of manufacturing and production
operations, these integrated software applications are designed to drive operational improvements
and substantially decrease total cost of ownership.

These software solutions:


z Integrate with your existing plant, IT and business systems, creating one effective system
for the entire organization
z Leverage a single, open and scalable software architecture called the ArchestrA industrial
automation and information software architecture
z Complete MES and flexible batching capabilities that can help you actively manage
production and collect data for analysis and reporting
z Enable secure, wide-scale delivery of reports on KPIs, downtime, OEE, and SPC through
a powerful portal that delivers the information contextually
z Improve data analysis and information sharing with advanced trending and reporting
capabilities

InTouch® 10.0 New Features and ArchestrA Graphics


1-10 Module 1 – Introduction

Product Offerings
Wonderware's Production and Performance Management Software Solutions consist of a variety
of products:
z Wonderware System Platform providing a core set of service capabilities as a
foundation for application development, operations, and information delivery
z InBatch™ flexible batch management software
z Manufacturing Execution Module (formerly known as InTrack™) resource and WIP
tracking software
z Equipment Operations Module for formula management including product definitions
and equipment setups, and for capturing and storing information from production events
including product and production history and genealogy
z Equipment Performance Module (formerly known as DT Analyst™) equipment
downtime tracking and performance management software
z QI Analyst™ for using real-time and historical data to monitor, analyze, and predict
potentially harmful process variations, allowing for online adjustments for improved
production quality and consistency

Supervisory HMI Software Solutions


Wonderware's market-leading Supervisory HMI Software Solutions can be applied in process,
discrete, and hybrid markets where there is demand for an information and automation
infrastructure for centralized monitoring and control. These software solutions enable plant
personnel to:
z Easily design, build, deploy and maintain the most flexible and secure supervisory
solutions with the lowest total life-cycle costs
z Scale from a single machine up to multiple networked supervisory stations
z Integrate plant devices, databases, and control systems
z Incorporate strong security at the data-element level and for every user in the system
z Rapidly expand production and performance management solutions
z Standardize on a common set of supervisory HMI tools at all levels of the plant with
Wonderware's rugged Industrial Tablets and Touch Panel Computers, which are pre-
bundled with powerful visualization software

Product Offerings
Wonderware's Supervisory HMI Software Solutions consist of a variety of products:
z Wonderware System Platform providing a core set of service capabilities as a
foundation for application development, operations, and information delivery
z InTouch human-machine interface (HMI) software for process visualization and control
z InControl™ real-time control software

Wonderware Training
Section 1 – Course Introduction 1-11

Geographically Distributed SCADA (Geo-SCADA) Software Solutions


Since the late 1980s, Wonderware's Geographically Distributed (Geo-SCADA) Software Solutions
have been present in almost every industry including water & wastewater, oil & gas, facility
management, power delivery, transportation, and telecommunications.

These solutions offer several unique features that can greatly benefit companies looking to
implement a new SCADA solution or upgrade an existing system.
z The easiest and most efficient, open software solution for SCADA
z Highly available, reliable, and scalable SCADA applications
z Single-click software redundancy
z Leverages ArchestrA architecture for easy configuration and management of operational
and system security that is compatible with existing IT security capabilities
z Empowers users to design, build, deploy, and maintain standardized SCADA applications
z Lowest total system lifecycle costs

Product Offerings
Wonderware's Geo-SCADA Software Solutions consist of a variety of products:
z Wonderware System Platform providing a core set of service capabilities as a
foundation for application development, operations, and information delivery.
z InTouch human-machine interface (HMI) software for process visualization and control
z SCADAlarm™ event notification software for real-time alarm notification, data acquisition,
and remote control from telecommunication devices to industrial automation software
systems

InTouch® 10.0 New Features and ArchestrA Graphics


1-12 Module 1 – Introduction

Wonderware Individual Software Products


All the latest Wonderware software offerings leverage the latest ArchestrA technology and are
essential to Wonderware's Production and Performance Management, GEO-SCADA, and
Supervisory HMI Software Solutions.
The following Wonderware products offer increased functionality and flexibility as well as
extensive connectivity:
z Wonderware Application Server (formerly known as Industrial Application Server) for
system-wide, real-time data acquisition, alarm and event management, centralized
security, data manipulation, remote deployment, and collaborative engineering
„ ArchestrA Object Toolkit for creating application objects for use within the
Wonderware Application Server
z InTouch human-machine interface (HMI) software for process visualization and control
z Wonderware System Platform providing a core set of service capabilities as a
foundation for application development, operations, and information delivery
z Functional Modules for seamlessly integrating new functional capabilities into
Wonderware Application Server applications using a modular approach, including:
„ Equipment Operations Module for formula management and real-time production
events collection
„ Equipment Performance Module (formerly known as DT Analyst) for equipment
downtime tracking and performance management
„ Manufacturing Execution Module (formerly known as InTrack) for resource and
WIP tracking
z Wonderware Historian (formerly known as IndustrialSQL Server) real-time historian for
SCADA and factory data
z Wonderware Information Server (formerly known as SuiteVoyager) Web analysis
software for Internet/intranet visualization and content management
z Device and Software Connectivity Tools offering a library of hundreds of DA Servers
and I/O Servers, the DA Server Toolkit, and Device Integration (DI) Objects
z InTouch View human-machine interface (HMI) software as a visualization client for the
System Platform
z ActiveFactory trending and analysis software for accelerating and improving decision-
making at all levels within an organization
z QI Analyst statistical process and quality control software to predict process variations
and enable online adjustments for improved production
z InControl real-time control software
z InBatch flexible batch management software
z SCADAlarm event notification software for real-time alarm notification, data acquisition,
and remote control from telecommunication devices to industrial automation software
systems
z InTouch for Terminal Services software for remote hosting of InTouch applications
Wonderware software offers robust, best-of-breed software components that empower customers
to effectively develop and manage their automation and information applications in continuous,
discrete, process, hybrid, and batch manufacturing environments.
Wonderware's mission is to power intelligent plant decisions in real time.

Wonderware Training
Section 1 – Course Introduction 1-13

System Requirements
This section describes the hardware and software requirements to install InTouch HMI version 10.
For updates to this information, see the Wonderware Technical Support website at
www.wonderware.com/support.

Hardware Recommendations
The following lists show the recommended hardware specifications to install InTouch HMI 10.0 by
itself or the InTouch HMI with the ArchestrA IDE. These recommendations are for development
systems. Run-time requirements may be different, depending on the InTouch application and
other factors.

InTouch HMI Stand-alone Hardware


z Computer with 1.2 GHz or faster processor clock speed
z 512 MB of memory minimum, 1 GB or greater recommended
z At least 4 GB of available hard disk space
z Super VGA (1024 × 768) or higher resolution video adapter and monitor
z CD-ROM or DVD drive to read Wonderware installation media
z Keyboard and mouse or compatible pointing device

InTouch HMI and the ArchestrA IDE Hardware


z Computer with 2 GHz or faster processor clock speed
(dual core processor recommended for optimal performance)
z 2 GB of memory
z At least 4 GB of available hard disk space
z Super VGA (1024 × 768) or higher resolution video adapter and monitor
z CD-ROM or DVD drive to read Wonderware installation media
z Keyboard and mouse or compatible pointing device

Note: The Microsoft Windows Vista operating system imposes hardware requirements that
exceed the minimum requirements for InTouch HMI version 10. If you intend to run InTouch
HMI version 10 with Windows Vista, see the following Microsoft web site for current hardware
requirements: www.microsoft.com/windows/products/windowsvista/editions/
systemrequirements.mspx

InTouch® 10.0 New Features and ArchestrA Graphics


1-14 Module 1 – Introduction

Software Requirements
This section describes the operating system and other software requirements to install InTouch
HMI version 10.

Operating Systems
The following table lists the supported operating systems that can be installed on computers
running InTouch server and client components.

InTouch HMI Components


Window Window ArchestrA ArchestrA Galaxy
Operating Systems Maker Viewer IDE Runtime Repository
Windows Vista Enterprise * • • • •
Windows Vista Business * • • • •
Windows Vista Ultimate * • • • •
Windows Server 2003 Standard SP2 • • • • •
Windows Server 2003 Enterprise SP2 • • • • •
Windows Server 2003 Standard R2 SP2 • • • • •
Windows Server 2003 Enterprise R2 SP2 • • • • •
Windows XP Professional SP2 • • • •
Windows XP Tablet 2005 • • •

Note: InTouch HMI version 10 does not support any version of the Microsoft Windows 2000
operating system.

Note: Microsoft Windows Server 2003 SP2 is the recommended operating system to run InTouch
server components.

Note: Microsoft Windows XP Professional SP2 is the recommended operating system to run
InTouch client components.

Other Software Requirements


The following list describes other third-party software requirements to support InTouch HMI 10.0.
z The InTouch HMI requires Microsoft .NET Framework 2.0 or .NET Framework 3.0, which
are both at version CLR 2.0.50727. You can select to install .NET Framework from the
InTouch HMI installation CD or manually using your own version of .NET Framework.
z SQL Server 2005 SP2 (Standard or Enterprise only) or SQL Server 2000 SP4 can be
used for InTouch database components. Note: A SQL Server 2000 SP4 database cannot
be used as the Galaxy Repository database. Also, other versions of SQL Server 2005,
including Compact, Express, Workgroup, and Developer are not supported as a Galaxy
Repository.
z SQL Server 2005 SP2 is the recommended database to use with InTouch HMI 10.0.
z The SQL Server 2005 SP2 database must be installed on the same computer as the
ArchestrA Galaxy Repository.

Wonderware Training
Section 1 – Course Introduction 1-15

* Windows Vista Restrictions


z InTouch HMI version 10 can run under Windows Vista Enterprise, Windows Vista
Business, or Windows Vista Ultimate. The Windows Vista Home Basic and Home
Premium editions are not supported.
z Users must log on as a Windows Vista administrator to run the InTouch HMI. You cannot
run the InTouch HMI as a Windows Vista standard user or power user.
z You can run Wonderware 32-bit software only with a 32-bit version of Windows Vista.
Running a Wonderware 32-bit application with a 64-bit version of Windows Vista on 64-bit
hardware is not supported
z The Windows Vista User Account Control (UAC) must be disabled when running the
InTouch HMI. Refer to the following Microsoft web site for instructions to disable the UAC.
http://technet2.microsoft.com/WindowsVista/en/library/0d75f774-8514-4c9e-ac08-
4c21f5c6c2d91033.mspx?mfr=true
z When you disable Windows Vista UAC, restart is required before attempting to install the
ArchestrA IDE or Wonderware Application Server.
z Windows Vista does not support a dedicated single-node server configuration that runs
one or more databases for an InTouch HMI system.
z If a computer runs Windows Vista as part of an InTouch system, it cannot be configured to
be both an InTouch and ArchestrA alarm provider. The computer running Windows Vista
can be either an InTouch or ArchestrA alarm provider, but not both simultaneously.
z Windows Server 2003 and Windows XP Pro still support NetDDE.
z Windows Vista does not support NetDDE for InTouchView applications. By design, an
InTouchView application does not serve data to any other source, including InTouch itself.
When WindowViewer starts, it verifies if the application is an InTouchView application.
When WindowViewer detects an InTouchView application, it does not register to become
a DDE server.

ArchestrA graphics make use of the client layer when accessing InTouch tags, and appear
as a third-party client trying to access WindowViewer as a data server. As a result,
ArchestrA symbols cannot communicate with InTouch tags when used with an
InTouchView license.
z InTouch HMI cannot be configured to run as a Windows Vista service. Windows Vista
security prevents started Windows services from interacting with desktop objects. When
the InTouch HMI is installed on a computer running Windows Vista, scripts do not run
correctly if they include the InTouch ActivateApp() and SendKeys() functions. These
functions interact with desktop objects by starting Windows programs and sending
keystrokes to these programs.

InTouch® 10.0 New Features and ArchestrA Graphics


1-16 Module 1 – Introduction

ArchestrA and FactorySuite Licensing


Your Wonderware system license information can be viewed through the license viewing utility
from the Windows Start menu:
Start / All Programs / Wonderware / Common / License Utility

\\<Computer Name

Your license file needs to be in the Program Files/Wonderware/Common/License directory in


order to run FactorySuite programs.
Your license file is typically contained on a floppy disk or mini-CD and is not included on the
FactorySuite CDs. For more licensing information, see your online FactorySuite System
Administrator's Guide.
If you purchase a license only for InTouch, you will only be able to use the $InTouchViewApp
Template. All other Templates in the IDE will be unavailable. In order to use other Templates, you
must purchase a license for the System Platform.

Prerequisites
We are assuming that you are attending the InTouch 10 New Features and ArchestrA Graphics
course having done the following:
z Created tags and used “.” (dot) fields
z Created windows and graphic objects
z Used animation links
z Created basic scripts and built-in functions
z Used alarming and history on single node applications
We are also assuming that you have:
z A basic understanding of networks
z A basic understanding of communications

Wonderware Training
Module 2

InTouch 10.0 Stand-Alone


Section 1 – Using InTouch Without ArchestrA 2-3
2-2 Module 2 – InTouch 10.0 Stand-Alone

Module Objective
z Introduce features available in InTouch 10 in a stand alone environment.

Wonderware Training
Section 1 – Using InTouch Without ArchestrA 2-3

Section 1 – Using InTouch Without ArchestrA

Section Objective
z Introduce changes to and features added with the release of InTouch 10.0 when
launching with the InTouch Application Manager.

“Stand Alone” InTouch


Definition of Stand Alone for this course:
z A stand alone application is one which
z Is built using InTouch and WindowMaker directly
(Not using the IDE)
z Does not make use of ArchestrA Graphics
z Is maintained by InTouch in the directory file system
z An InTouch 10.0 Stand Alone Application is
z Architecturally similar to 9.x or earlier
z Not meant to imply “Single Node”
z Still networked like previous versions

Benefits for Existing Users


One major advantage for existing users is a short learning curve. The new features of InTouch will
require minimal effort for advanced users. InTouch remains similar to avoid re-learning.

Application Manager
The InTouch Application Manager is very similar to previous versions. The icons have been
updated for a sleeker look and feel.

InTouch® 10.0 New Features and ArchestrA Graphics


2-4 Module 2 – InTouch 10.0 Stand-Alone

New Features in WindowMaker

New Views / Organization Methods


z Project View
z Hierarchical Window Organization

Wonderware Training
Section 1 – Using InTouch Without ArchestrA 2-5

Updates and Enhancements to Alarming


z Alarm Viewer Control
z New Property and Event
z NewAlarm property on AlarmViewer
z NewAlarm Event
‰ Raised when any new alarm is detected
‰ Capability to detect new Industrial Application Server alarms
‰ Not the same as $NewAlarm
z NewAlarmEventMode Property (Integer)
‰ Controls when NewAlarm events are raised
z Terminal Server
z Runtime Language Switching
z Alarm Comments and some Display Fields can be switched
z Alarm Comment Language Switching
‰ Accessed from Language menu
z New Property Controls
z New NewAlarmEventWorks

Multi Monitor Enhancements


z Improvements to ‘Category B’
z OS Managed multiple monitors
z Maximize behavior – maximizes across all screens
z Input Dialogs appear on correct screen
z Pop-ups, Overlays, Replace work as they should
z Keyboards appear where they should (except Microsoft’s)
z ShowAt(), DialogStringEntry() etc. work as they should

Other Technology and Performance Updates


z Vista Support
z Business Edition recommended
(Final supported versions not announced at this time)
z Terminal Server Capability
z Up to 75 clients supported
z CR and Hot Fix Updates (up to Patch 04)

Default Font
z The Default Font has been changed from “System” to “Tahoma”.
Tahoma was selected because it has been included in every version of Windows.

InTouch® 10.0 New Features and ArchestrA Graphics


2-6 Module 2 – InTouch 10.0 Stand-Alone

– Intentionally left blank –

Wonderware Training
Module 3

New Functionality Overview


Section 1 – Introduction and Demonstration Topics 3-3
3-2 Module 3 – New Functionality Overview

Module Objectives
z Introduce the new features from InTouch 9.5 to InTouch 10
z Instructor demonstration of new features

Wonderware Training
Section 1 – Introduction and Demonstration Topics 3-3

Section 1 – Introduction and Demonstration Topics

Section Objectives
z Orient users to features available in InTouch 10 when integrated into the ArchestrA IDE
before using InTouch.
z Demonstrate new features using the ArchestrA IDE.

Main Focus of InTouch 10


z ArchestrA Graphics
z The next generation of graphics
z IDE Integration
z Central Management of an entire application

Models for Using InTouch 10


z Stand-Alone Application
z Managed Applications
z Integrated ArchestrA Graphics
z Integrated Industrial Application Server

InTouch® 10.0 New Features and ArchestrA Graphics


3-4 Module 3 – New Functionality Overview

Demo
z The goal of InTouch 10 is to continue the evolution of the Wonderware Industrial Suite of
products toward a purely ArchestrA based offering.
z The workflow for using InTouch 10 will be centered on the IDE. All configuration activities
begin from the IDE. This allows the leveraging of key concepts already present in the IDE
such as security and a multi-user environment.

Note: All features and functions of WindowMaker have been preserved.

z New Drawing Primitives:


‰ Curves
‰ Closed Curves
‰ Arcs
‰ Pies
‰ Chords
‰ Text Box
‰ Status Primitive
‰ Windows Controls
‰ Format Paint
z Element Properties:
‰ Colors
‰ Gradients
‰ Transparency
‰ Rotation
‰ Locked
‰ Fill
z Scripts
z Custom Properties

Wonderware Training
Section 1 – Introduction and Demonstration Topics 3-5

z Animations:
‰ General Management
‰ Truth Table
‰ Show Symbol
z Grouping Options:
‰ Group
‰ Path
z Elements View
z Setting the Anchor Point
z Format and Animation Painting
z Converting SmartSymbols to ArchestrA Symbols
z Central Quality and Status Configuration
z Using Symbols in the ArchestrA Graphic Editor
z Embedding
z Overriding Custom Properties
z Redirect Object Association
z Building the InTouch Application
z InTouchViewApp Object
z InTouch Make-Over
z Embedding Symbols
z Editor Navigation
z Overriding Custom Properties
z Delivering the InTouch Applications
z Instantiate Template
z Deploy Instance
z Maintaining the Symbols and InTouch Application
z Content Change
z Size Change
z Deploy Changes

InTouch® 10.0 New Features and ArchestrA Graphics


3-6 Module 3 – New Functionality Overview

– Intentionally left blank –

Wonderware Training
Module 4

Import, Migration and Integration


Section 1 – About InTouch ArchestrA Integration 4-3
Section 2 – Managing InTouch Applications with IDE 4-13
Section 3 – Using IDE-Managed InTouch Applications At Runtime 4-21
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-25
4-2 Module 4 – Import, Migration and Integration

Module Objectives
z Become familiar with Managed Applications.
z Become familiar with the ArchestrA IDE.
z Distinguish between portions of the ArchestrA IDE used with InTouch and those
used with Wonderware® Application Server.
z Create a new IDE-managed InTouch application.
z Import an existing InTouch application to use as an IDE-managed InTouch application.
z Start WindowMaker from within the IDE.
z Submit the changes you make in WindowMaker to the IDE-managed InTouch
application.
z Export and import the IDE-managed InTouch application together with its
InTouchViewApp object.
z Convert an IDE-managed InTouch application to a stand alone InTouch application.
z Delete the IDE-managed InTouch application.

Wonderware Training
Section 1 – About InTouch ArchestrA Integration 4-3

Section 1 – About InTouch ArchestrA Integration

Section Objectives
z Introduce the ArchestrA environment as it applies to InTouch users.

This section explains the concepts and capabilities of the integration of ArchestrA architecture and
the Wonderware IDE with InTouch HMI.

Overview of InTouch ArchestrA Integration


You can integrate applications and graphics between ArchestrA and InTouch. You can:
z Use the ArchestrA Integrated Development Environment (IDE) to manage InTouch
applications instead of the InTouch Application Manager.
z Use the ArchestrA Symbol Editor within the ArchestrA IDE to create ArchestrA symbols,
which you can also use in InTouch WindowMaker.

ArchestrA IDE InTouch WindowMaker

Stand Alone
InTouchViewApp Imports and Exports Manages
InTouch Applications
Automation
Object (Template)

Manages
IDE-Managed InTouch
Provides Applications
ArchestrA
Symbols
ArchestrA Symbol InTouch
Derive
Editor Application Manager
InTouch WindowViewer

Provides
ArchestrA Test Application
Symbols

InTouchViewApp
Automation
Object (Instance) Creates IDE-Managed InTouch Starts
Application Directory Applications

InTouch® 10.0 New Features and ArchestrA Graphics


4-4 Module 4 – Import, Migration and Integration

Instead of creating an InTouch application with visualization objects in WindowMaker that connect
to plant data and also to ArchestrA galaxy objects which you can configure independently, you can
now:
z Develop the visualization directly in the IDE with the ArchestrA Symbol Editor.
z Create a new InTouch application using the ArchestrA IDE.
z Use the IDE to start WindowMaker.
z Insert the ArchestrA Symbols on to your InTouch windows.
z Test the InTouch application in WindowViewer.
z The following diagram shows you the workflow of using InTouch and ArchestrA in this
new way:

InTouch
ArchestrA Symbol
Application WindowMaker WindowViewer ArchestrA IDE
Editor
Manager

1. Install InTouch ArchestrA IDE

2. Licensing Wonderware License


FactorySuite License

Start ArchestrA IDE


3. Launching and create new
Galaxy

Create ArchestrA
4. Creating Symbol Symbol

5. Configure ArchestrA Configure and deploy


Objects ArchestrA objects

Derive
6. Creating InTouch App. InTouchViewApp
Template

Start WindowMaker
7. Adding Tags etc. and add tags etc.

Select ArchestrA
8. Embedding Symbols Symbol with Galaxy
Browser

Configure Custom
9. Configuring Symbols Properties

Test Application in
10. Testing Application WindowViewer

Wonderware Training
Section 1 – About InTouch ArchestrA Integration 4-5

IDE-Managed InTouch Applications


You can manage your InTouch applications using ArchestrA. These applications are called
Managed InTouch applications.
Unlike stand alone InTouch applications that are managed by the InTouch Application Manager,
they are better integrated into the ArchestrA environment and support advanced graphics.
They are not fully interchangeable with stand alone InTouch applications and can only be
interchanged by importing and exporting.

Differences to Stand Alone InTouch Applications


Stand Alone InTouch applications appear in the InTouch Application Manager as Stand Alone
and you can edit them by selecting them and clicking the WindowMaker icon.
IDE-Managed InTouch applications appear in the InTouch Application Manager as Managed and
only after deployment, and can only be edited by starting WindowMaker from within the IDE.
Unlike stand alone InTouch applications, with IDE-managed InTouch applications you cannot:
z Create an application with the InTouch Application Manager.
z Start an application in WindowMaker from the InTouch Application Manager.
z Change the properties of an IDE-managed InTouch application.
z Rename IDE-managed InTouch applications in the InTouch Application Manager.
z Configure security settings in the Configure Security dialog box of the IDE while an IDE-
managed InTouch application is opened for editing in WindowMaker.
You can however:
z Read the properties of an IDE-managed InTouch application.
z Fast-switch between WindowMaker and WindowViewer to test and develop the
application.
z Change the node properties in the InTouch Application Manager.
z Close the IDE. WindowMaker attempts to close and may prompt you to save any
changes. If you started WindowViewer from within WindowMaker, it closes as well.
z Use DBLoad or DBDump to import or export the tagname dictionary of an IDE-managed
InTouch application.

InTouch® 10.0 New Features and ArchestrA Graphics


4-6 Module 4 – Import, Migration and Integration

InTouchViewApp Object
ArchestrA manages your InTouch applications with a specific type of ArchestrA object called the
InTouchViewApp object.
An InTouchViewApp template references one specific IDE-managed InTouch application.
However, a number of limitations apply on what you can do with the InTouchViewApp compared to
other automation objects. For more information, see Restrictions of the InTouchViewApp Object.

InTouch Data Storage


The InTouchViewApp object contains the following information:
z Reference to the IDE-managed InTouch application folder.
z Other behavior-specific information of the IDE-managed InTouch application.
The object does not contain the InTouch application data, such as the tagname configuration and
values, but when it is exported, the resulting .aaPKG file contains the InTouch application.
The IDE-managed InTouch application itself is stored in two separate folders in the file repository:
z The last checked-in version of the InTouch application.
z The last checked-out version of the InTouch application.
When you deploy the InTouchViewApp instance to a target node, the InTouch application is
contained in:
z A folder on the development node.
z A folder on the target node from which the InTouch application is run.

Wonderware Training
Section 1 – About InTouch ArchestrA Integration 4-7

Restrictions of the InTouchViewApp Object


The InTouchViewApp object is unlike other Automation objects. You cannot perform some
operations that you would normally do with other Automation objects.

InTouchViewApp Object – Permitted Operations

InTouchViewApp base
template

$InTouchViewApp Derive instances?

Configure?
Derive templates

InTouchViewApp
template derived from
base template
$MyInTouchViewA
$MyInTouchViewA
$MyInTouchView
pp_Template WindowMaker
pp_Template Configure
App_Template
O
pe
ns

Derive Instances Configure?


InTouchViewApp
instance derived from
template
MyInTouchViewAp
MyInTouchViewAp
MyInTouchView
p_Instance
p_Instance
App_Instance

You cannot:
z Configure an InTouchViewApp instance. Only InTouchViewApp templates can be
configured. If you attempt to configure an InTouchViewApp instance, you can select to
open associated InTouchViewApp object template instead.
z Derive templates from an InTouchViewApp template that is derived from the
InTouchViewApp base template.
z Derive instances from the InTouchViewApp base template.
z Change the association between the InTouchViewApp and the InTouch application. You
must delete the template and all instances and recreate them.
z Open more than one InTouchViewApp template for configuration at a time. This is
because you can only run one instance of WindowMaker at one time.
z Use ArchestrA security in InTouch, if InTouch only uses the Galaxy as a provider of
ArchestrA symbols. In order to use ArchestrA security, you must at least deploy a
WinPlatform to the node on which the deployed IDE-managed InTouch application is
running.

InTouch® 10.0 New Features and ArchestrA Graphics


4-8 Module 4 – Import, Migration and Integration

Editing the IDE-Managed InTouch Application


You can edit the IDE-managed InTouch application with WindowMaker as with stand alone
InTouch applications. The only difference is that you:
z Open the editor of the InTouchViewApp template to start the associated InTouch
application in WindowMaker.
z Close WindowMaker after making changes to the InTouch application, which checks the
InTouchViewApp object in again.

Testing the IDE-Managed InTouch Application


You can test the IDE-managed InTouch application with WindowViewer as with stand alone
InTouch applications. From the IDE-managed InTouch application that is open in WindowMaker,
you can fast-switch to WindowViewer and back to WindowMaker again.

Deploying the InTouchViewApp Object


After you derive an instance of your InTouchViewApp object template (not the base template), you
can assign it to the target platform under a ViewEngine object.
After you deploy the InTouchViewApp object, you can open the InTouch Application Manager on
the target node and the associated IDE-managed InTouch application appears in the list together
with the timestamp of its last deployment in the Date Modified column.
You can only start the IDE-managed application in WindowViewer. When WindowViewer is
started, it copies the application to a special folder that it uses for Runtime. This folder is, for
example, c:\documents and settings\all users\application data\archestra\managedapp.

IDE-Managed InTouch Applications


INTEGRATED DEVELOPMENT ENVIRONMENT INTOUCH

$InTouchViewApp
Base Template

Shared

DERIVATION
Checked-Out
Version

$MyITViewApp
Derived Template CHECK OUT

WindowMaker
CHECK IN

Checked-In
DERIVATION Version Application
Manager

DEPLOYMENT Run-Time STARTS


Version

MyITViewApp_001 Deployed
Derived Instance Version
WindowViewer

Wonderware Training
Section 1 – About InTouch ArchestrA Integration 4-9

Exporting the InTouchViewApp Object


You can export the InTouchViewApp object. You would do this, for example, to use the IDE-
managed InTouch application together with its hosting InTouchViewApp object in other Galaxies.
When you export the object, a package file is created containing information about the object and
also the associated IDE-managed InTouch application.

Converting IDE-Managed InTouch Applications to Stand Alone InTouch


Applications
You can convert an IDE-managed InTouch application to a stand alone InTouch application by
publish the IDE-managed InTouch application that is managed by the InTouchViewApp object.
When you publish the InTouch application, a folder is created containing the InTouch application
itself and possibly inserted ArchestrA symbols.

Note: If you publish the IDE-managed InTouch application for use as a stand alone InTouch
application, you can still use any contained ArchestrA symbols. However, you can only resize,
delete, configure animations, move, duplicate and perform clipboard operations on them. You
cannot add new ArchestrA symbols or change to alternate symbols or instances.

Importing the InTouchViewApp Object


When you import an InTouchViewApp object, the ArchestrA IDE imports the InTouchViewApp
object itself as well as the IDE-managed InTouch application.

Importing a Stand Alone InTouch Application


You can import a stand alone InTouch application to use as an IDE-managed InTouch application.
The advantage is that you can use the sophisticated ArchestrA Symbol Editor to enhance existing
applications with enhanced functionality and animations that were previously not possible.

Renaming the InTouchViewApp Object


You can rename the IDE-managed InTouch application or the InTouchViewApp object. Renaming
the InTouchViewApp object has no impact on the associated InTouch application.

Attributes of the InTouchViewApp Object


You can use the ArchestrA attributes of the InTouchViewApp object to access the run-time data of
the tagnames of the associated InTouch application. This is useful for using InTouch data directly
in the Galaxy namespace and replaces the purpose of the InTouchProxy object.

ViewEngine Object
The ViewEngine is an ArchestrA object that manages session and security information for the
running InTouchViewApp instances and the terminal service sessions.
A platform can host multiple ViewEngine objects, every InTouchViewApp must be assigned to
a ViewEngine.
You cannot create multiple instances of the same InTouchViewApp template to run under the
same ViewEngine object. But you can run instances from different templates under the same
ViewEngine object, or run multiple instances of the same template under different ViewEngine
objects.

InTouch® 10.0 New Features and ArchestrA Graphics


4-10 Module 4 – Import, Migration and Integration

ArchestrA Symbols
The ArchestrA IDE contains a symbol editor that lets you create symbols that visualize production
processes and provide an HMI interface to ArchestrA automation objects.

Creating ArchestrA Symbols


ArchestrA symbols are created with the ArchestrA Symbol Editor in the IDE.
You can either create:
z ArchestrA Symbols in the Graphic Toolbox. These are not associated with any specific
ArchestrA object template or ArchestrA object instance.
z ArchestrA Symbols contained in a specific ArchestrA object template or instance.

Inserting ArchestrA Symbols in InTouch Windows


The ArchestrA Symbols can be inserted into an IDE-managed InTouch application and used.
You can insert an ArchestrA symbol to a window of an IDE-managed InTouch application from
either:
z The Graphic Toolbox.
z An Automation object template.
z An Automation object instance.

Creating New Object Instances Automatically


If you insert an ArchestrA symbol from an object template, the InTouch HMI can create an
instance of that object and the symbol instance references the new object instance.
Example:
a. Create an Automation object template $Valve1 and open it in the ArchestrA IDE editor.
b. On the Graphics tab, add an ArchestrA symbol, called ValveSymbol.
c. Create a derived template of the InTouchViewApp object and open it in WindowMaker.
d. Create a new InTouch window and insert the ArchestrA symbol ValveSymbol from the
Automation object template $Valve1. WindowMaker prompts for an instance name.
e. Type a name, for example Valve1_E122 and click OK.
The ArchestrA symbol is pasted on the InTouch window and an object instance called
Valve1_E122 is derived from $Valve1 in the IDE.

Wonderware Training
Section 1 – About InTouch ArchestrA Integration 4-11

Symbol Change Propagation


Any changes to the parent ArchestrA symbol are propagated to all child Archestra symbols
derived from it. This affects the ArchestrA symbols in WindowMaker as well as the ArchestrA
symbols of its derived child objects.
If WindowMaker is open and one of its windows contains an inserted ArchestrA symbol and a
change is made to the inserted ArchestrA symbol, an icon appears in the status bar.

You can double-click this icon to accept the change.


Example:
a. Follow the example from InTouch ArchestrA Integration Guide - Chapter 1 About Intouch
ArchestrA Integration - Creating New Object Instances Automatically.
b. Open the ArchestrA symbol ValveSymbol that is hosted by the Automation object template
$Valve1.
c. Make some changes and click Close and Save.
The changes are propagated to Automation object instance Valve1_E22.
In WindowMaker, the Change Symbol icon appears.

d. Click on the Symbol Changed icon.


The changes are updated in WindowMaker.

Symbol Dynamic Size Propagation


You can control the way that size changes of the parent symbol are propagated to its child
symbols, which are inserted ArchestrA symbols. For example, a size change is:
z Resizing one of the elements in the parent symbol so that the symbol boundary changes.
z Adding elements to or removing elements from the parent symbol so that the symbol
boundary changes.
This feature is called dynamic size change and can be either enabled or disabled.

Note: For more information about dynamic size propagation, see Creating and Managing
ArchestrA Graphics User’s Guide.

InTouch® 10.0 New Features and ArchestrA Graphics


4-12 Module 4 – Import, Migration and Integration

Overview Diagram
The following diagram shows you how symbols that are created with the ArchestrA IDE ArchestrA
Symbol Editor can be used in InTouch applications.

Usage of ArchestrA Symbols


INDUSTRIAL APPLICATION SERVER OBJECTS INTOUCH WINDOWMAKER

Graphic BROWSING Browsing the


Toolbox Symbol Toolbox

Instances of
ArchestrA Symbols

Object Templates Browsing for


BROWSING
with Symbols Object Template with
Symbol

Object Instances Instances of


with Symbols ArchestrA
Symbols

CREATING
OBJECT
INSTANCES

Wonderware Training
Section 2 – Managing InTouch Applications with IDE 4-13

Section 2 – Managing InTouch Applications with IDE

Section Objectives
z Create a new IDE-managed InTouch application
z Import an existing InTouch application to use as an IDE-managed InTouch application
z Start WindowMaker from within the IDE
z Submit the changes you make in WindowMaker to the IDE-managed InTouch application
z Export and import the IDE-managed InTouch application together with its
InTouchViewApp object
z Convert an IDE-managed InTouch application to a stand alone InTouch application
z Delete the IDE-managed InTouch application

ArchestrA IDE InTouch WindowMaker

Imports Stand Alone InTouch


InTouchViewApp and Applications
Automation Exports
Object (Template)
Manages

IDE-Managed InTouch
Applications
Imports and Exports

aaPKG. File

IDE-Managed
InTouch
Applications

Creating an IDE-Managed InTouch Application


You can create an IDE-managed InTouch application by creating and configuring an
InTouchViewApp object.
To create an IDE-managed InTouch application
a. Open the ArchestrA IDE.
b. In the Template Toolbox, expand the System toolset.
c. Derive a template from the $InTouchViewApp base template.
d. Open the derived template.
The InTouchViewApp Initialization dialog box appears.
e. Select Create New InTouch Application and click Next.
The next panel appears.
f. Type a name for the InTouch application and a description.

InTouch® 10.0 New Features and ArchestrA Graphics


4-14 Module 4 – Import, Migration and Integration

g. Select InTouchView Application to create an InTouch application that uses only ArchestrA
references
h. Click Next.
WindowMaker is started.

Note: The InTouch application directory is created as a share \\$ARCHESTRA-GalaxyName-


$InTouchViewAppObjectName. It is managed by IDE, not by the InTouch Application
Manager.

Starting WindowMaker from the ArchestrA IDE


You can edit an IDE-managed InTouch application at any time by starting WindowMaker from
within the ArchestrA IDE.
To start WindowMaker from within the ArchestrA IDE
a. Open the ArchestrA IDE.
b. Locate the InTouchViewApp object template or instance that contains the IDE-managed
InTouch application you want to modify.
c. Double-click on it. If the InTouchViewApp object is:
z a template, WindowMaker starts as the object’s default editor and opens the InTouch
application. You are ready to edit the IDE-managed application.
z an instance, the InTouchViewApp Instance Edit dialog box appears.

d. Click Yes to open the associated InTouchViewApp template in WindowMaker,


or No to not open it.

Note: If you select Don’t ask me again and click Yes, the next time you open an
InTouchViewApp object instance, the IDE-managed InTouch application is automatically
opened from the associated InTouchViewApp object template.

Wonderware Training
Section 2 – Managing InTouch Applications with IDE 4-15

Submitting the Changes of an InTouch Application


After you modify your IDE-managed InTouch application, you can submit the changes to IDE.
To submit the changes of an InTouch Application
a. Modify your IDE-managed InTouch application in WindowMaker as you would do with a stand
alone InTouch application.
b. When you are done, save and close your InTouch windows.
c. Click File, then Exit.
WindowMaker closes and the focus returns to IDE.
The Check In dialog box appears.
d. Type a comment for the Check In procedure, if necessary, and click OK.
The Check In progress dialog box appears.
e. Click Close.

Importing an InTouch Application


You can import an existing InTouch application to use as an IDE-managed InTouch application.
This is done in two steps:
z Create an InTouchViewApp object to associate with the imported InTouch application.
z Import the InTouch application.
The imported InTouch application becomes an IDE-managed InTouch application.

Note: The ArchestrA IDE creates a copy of the existing InTouch application in a folder that it
manages and accesses and leaves the existing InTouch application and location unchanged.

To import an InTouch application into a Galaxy


a. Open the ArchestrA IDE.
b. In the Template Toolbox, derive a template from the $InTouchViewApp base template.
c. Open the derived template.
The InTouchViewApp Initialization dialog box appears.

InTouch® 10.0 New Features and ArchestrA Graphics


4-16 Module 4 – Import, Migration and Integration

d. Select Import Existing Application and click Next.


The next panel appears.

e. You can either:


z Browse for the InTouch application folder, if you know its location.
z Select Find applications, specify a search root for the search to begin, and click Find.
After InTouch applications are found, they appear in the list. Select one from the list.
f. Click Next.
The next panel appears.

g. If necessary, type:
z A new name in the Application Name box.
z A new description in the Description box.

Wonderware Training
Section 2 – Managing InTouch Applications with IDE 4-17

h. After you are done, click Next.


The next panel appears and shows you the import progress.

i. Click Done.
InTouch WindowMaker is started and you can edit the InTouch application as an IDE-
managed InTouch application.

Importing and Exporting the InTouchViewApp Object


You can import and export the InTouchViewApp object. The InTouchViewApp object contains all
information for hosting an IDE-managed InTouch application and can be used to exchange IDE-
managed InTouch application between Galaxies.

Note: For more information about importing and exporting Automation objects, see the Industrial
Application Server User’s Guide.

To import an InTouchViewApp object


z Import the ArchestrA package (.aaPKG) file that contains the InTouchViewApp object(s)
you want to import. This is the same as importing any other Automation object.
To export an InTouchViewApp object
z Export the ArchestrA package (.aaPKG) file that contains the InTouchViewApp object(s)
you want to export. This is the same as exporting any other Automation object.

InTouch® 10.0 New Features and ArchestrA Graphics


4-18 Module 4 – Import, Migration and Integration

Publish an InTouch Application


You can convert an IDE-managed InTouch application to a stand alone application by publishing
the application. Once completed, this application cannot be edited in the IDE. Editing can then be
done in WindowMaker once the application is published by opening the application in the InTouch
Application Manager. As a best practice, editing should be done in the original master application
within the IDE and then re-published.
It is exported as a folder containing information about the object and the InTouch application.

Note: This is different than exporting the InTouchViewApp object itself. For more information, see
InTouch ArchestrA Integration Guide - Chapter 1 About InTouch ArchestrA Integration - Importing
and Exporting the InTouchViewApp Object.

To convert an IDE-managed InTouch application to a stand alone InTouch application


a. Open the ArchestrA IDE.
b. Locate the InTouchViewApp object that contains the IDE-managed InTouch application you
want to convert.
c. Right-click on it, select Publish InTouch Application.

Wonderware Training
Section 2 – Managing InTouch Applications with IDE 4-19

The Browse For Folder dialog box appears.

d. You can either:


z Select a folder to which you want to export the InTouch application.
z Create a new folder or folder structure by clicking Make New Folder.
e. When you are done, click OK.
The Publish Intouch Application progress dialog box appears.

f. When the export is complete, click Close.


A directory containing the new published InTouch application is created in the selected folder.

InTouch® 10.0 New Features and ArchestrA Graphics


4-20 Module 4 – Import, Migration and Integration

Deleting the IDE-Managed InTouch Application


You can delete an InTouch application in the ArchestrA IDE by deleting the associated
InTouchViewApp object.
When you do this, the template and the InTouch application directory associated with that
template are deleted completely.
You can only delete an InTouch application if the associated InTouchViewApp object does not
have any derived instances.
To delete the InTouchViewApp object
a. Select the InTouchViewApp object that contains the IDE-managed InTouch application you
want to delete.
b. On the Edit menu, click Delete.
The Delete dialog box appears.
c. Click Yes.
The InTouchViewApp object and the associated InTouch application folder are deleted.

Note: Deleting an InTouchViewApp instance does not delete the associated InTouch
application.

Wonderware Training
Section 3 – Using IDE-Managed InTouch Applications At Runtime 4-21

Section 3 – Using IDE-Managed InTouch Applications At Runtime

Section Objectives
z Test a managed InTouch application in Runtime.

You can run IDE-managed InTouch applications on remote nodes by deploying InTouchViewApp
object instances to those nodes.

ArchestrA IDE

InTouchViewApp
Automation
Derive Object (Template) Derive

InTouchViewApp InTouchViewApp
Automation Automation
Object (Instance) Object (Instance)

Create
Application Directories on
Operator Nodes When Deployed

InTouch InTouch
WindowViewer WindowViewer
on Node 1 on Node 2

IDE-Managed InTouch IDE-Managed InTouch


Application Application

Start WindowViewer on
Operator Nodes

InTouch InTouch
Application Manager on Node 1 Application Manager on Node 2

You can also deploy changes of the InTouch application and contained ArchestrA symbols to
these nodes and select whether to accept or decline the changes for each node.

InTouch® 10.0 New Features and ArchestrA Graphics


4-22 Module 4 – Import, Migration and Integration

Deploying an IDE-Managed InTouch Application


You can deploy an IDE-managed InTouch application from the ArchestrA IDE to the local node or
a remote node. After you deploy the application, you can run it in WindowViewer on the operator
nodes.

Deploying the InTouchViewApp Object for the First Time


The first time you deploy an InTouchViewApp object, the associated InTouch application is copied
to the node of the platform that hosts the object. This is called the operator node.
To deploy an IDE-managed InTouch application
a. Open the ArchestrA IDE.
b. Select the object instance of the InTouchViewApp for which you want to deploy the IDE-
managed InTouch application.

c. On the Object menu, click Deploy.


The Deploy dialog box appears.
d. Click OK and the complete InTouch application is copied to the operator node.

Deploying Changes to the IDE-Managed InTouch Application


You can change the IDE-managed InTouch application either by:
z Changing the references, content or size of an ArchestrA symbol that is used in an IDE-
managed InTouch application.
z Changing the IDE-managed InTouch application itself by opening WindowMaker from the
InTouchViewApp object template.
In both cases, when you save the changes, the changes are propagated from the updated
template to the derived children instances.

These appear with the Pending Changes icon.


To deploy changes to an IDE-managed InTouch application
a. Open the ArchestrA IDE.
b. Select the object instance of the InTouchViewApp for which you want to deploy the changes of
an IDE-managed InTouch application.
c. On the Object menu, click Deploy.
The Deploy dialog box appears.
d. Click OK and the changes are copied to the operator node.

Note: The changes are not immediately reflected in a running WindowViewer session. The
operator of each node can select to accept or decline the changes. For more information, see
Accepting New Application Versions at the Operator Node.

Wonderware Training
Section 3 – Using IDE-Managed InTouch Applications At Runtime 4-23

Starting the IDE-Managed InTouch Application


On the operator node, you can start WindowViewer to run the IDE-managed InTouch application.
To start the IDE-managed InTouch application
a. On the node the InTouchViewApp object is deployed to,
start the InTouch Application Manager.
b. In the application list,
select the IDE-managed InTouch application you want to run in WindowViewer.
c. Click the WindowViewer icon.
The application starts in WindowViewer after a short while.

Accepting New Application Versions at the Operator Node


If the IDE-managed InTouch application is changed and its associated InTouchViewApp object
instance deployed, you can select to accept or decline the changes.
A message appears prompting you if you want to accept the changes to the IDE-managed
InTouch application, either:
z When you start WindowViewer from the InTouch Application Manager.
z While WindowViewer is running.

Note: Depending on the nature of the change, you may either be prompted to restart the
WindowViewer application, or just reload it.

To accept new application versions at the operator node


z Click Yes.
The changes to the IDE-managed InTouch application are copied to the operator node
and WindowViewer either restarts or reloads.

InTouch® 10.0 New Features and ArchestrA Graphics


4-24 Module 4 – Import, Migration and Integration

Deploying the InTouchViewApp Object in a Terminal Services


Environment
You can run IDE-managed InTouch applications in a Terminal Services environment. The main
advantage of this architecture is that you can run multiple InTouch applications on one machine at
the same time.
To do this, you must:
z Use InTouch Terminal Services Edition.
z Deploy each InTouchViewApp object instance with its own ViewEngine host.
z Run each IDE-managed InTouch application in its own terminal services client session.

Using IDE-managed InTouch applications


in a Terminal Services environment
Galaxy and Development Node

ArchestrA EDIT
$InTouchViewApp1
IDE $InTouchViewApp2
ViewEngine1
WindowMaker
DERIVE InTouchViewApp1
ViewEngine2
InTouchViewApp2

DEPLOY DEPLOY

Terminal Server

WindowViewer running
InTouchViewApp1
InTouch
IDE Platform
(Terminal
Services)
WindowViewer running
InTouchViewApp2

VISUALIZATION VISUALIZATION

Client1 Client2

Wonderware Training
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-25

Lab 1 – Creating and Importing InTouch


Applications in the IDE
Introduction
This lab is designed to familiarize you with creating managed InTouch applications in the
Wonderware Application Server Integrated Development Environment (IDE). You will use the new
InTouchViewApp object template to create, import, and work with InTouch applications in the IDE.

Objectives
Upon completion of this lab, you will be able to:
z Use the $InTouchViewApp object to create a new InTouch application
z Import an existing InTouch application and view it in Runtime

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. Launch the IDE and create a New Galaxy using your initials as the name and
Base_Application_Server.cab as the Galaxy type.
b. Connect to your newly created Galaxy and observe the new layout in the IDE, as well as:
z Icon changes
z Graphic Toolbox tab
z New object: $InTouchViewApp
c. In the Template Toolbox, create a new derived template of the $InTouchViewApp object, and
name it $TankApp.
d. Create a new Template Toolset named ABCInTouchApps, where ABC are your initials, and
place your derived template in it.
e. Open $TankApp and create a new InTouch application.
f. Observe the new layout in WindowMaker, and then close WindowMaker and Check In the
object.
g. Create a new derived template from $InTouchViewApp and name it $ReactorApp.
h. Assign $ReactorApp to the ABCInTouchApps Template Toolset.
i. Open $ReactorApp and import an existing demoapp1 application from the following folder:
C:\Documents and Settings\All Users\Application Data\InTouchDemos
j. Switch between Development and Runtime to verify that everything works as expected.
k. Close WindowMaker and verify that the application is checked in.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


4-26 Module 4 – Import, Migration and Integration

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Start IDE and Observe New InTouch WindowMaker Layout


1. Launch the ArchestrA IDE.
Start / All Programs / Wonderware / ArchestrA IDE
2. Click the New Galaxy button to create a new Galaxy.
Name the Galaxy ABCGalaxy inserting your own initials for ABC.

Note: Name your Galaxy with your own initials.

3. Select Base_Application_Server.cab for the Galaxy type.


4. Click Create.

Note: It will take a few minutes for the Galaxy to be created.

5. Connect to your Galaxy.

Observe the new layout if you are familiar with previous versions of the ArchestrA IDE.

Wonderware Training
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-27

Create a New Managed InTouch Application


Create a new Derived Template of the InTouchViewApp object in the IDE.
6. Click Template Toolbox tab.
Expand your Galaxy Name.
Expand the System folder.
Select the $InTouchView App System Template.

7. Right-click and select New / Derived Template.

InTouch® 10.0 New Features and ArchestrA Graphics


4-28 Module 4 – Import, Migration and Integration

8. Rename the new Derived Template to $TankApp.

Note: The red “x” box indicates that the template is not configured with an application.

It is good practice to separate the Templates you created from those that get imported when
the Galaxy is created.
Create a New Template Toolset to contain the Templates you create.
9. Right-click the Galaxy name and select New Template Toolset.

Wonderware Training
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-29

10. Name the Template Toolset ABCInTouchApps or use your initials to match your Galaxy
name.

11. Drag the Derived Template $TankApp into the Template Toolset just created.

InTouch® 10.0 New Features and ArchestrA Graphics


4-30 Module 4 – Import, Migration and Integration

Open WindowMaker
12. Double-click on the $TankApp Template to Initialize the application and launch WindowMaker.

13. Select Create New InTouch Application from the InTouchViewApp Initialization dialog
box.
Click Next.

14. Fill in the Application Name or accept the default.


Click Next.

Wonderware Training
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-31

WindowMaker will launch automatically.

15. Exit WindowMaker.


16. Click OK to Check In the object.
Click Close.

Note: This application will be used again later.

Congratulations! You have just created your first InTouch application from the AchestrA IDE.

InTouch® 10.0 New Features and ArchestrA Graphics


4-32 Module 4 – Import, Migration and Integration

Import an Existing InTouch Application


17. Create a new Derived Template from $InTouchViewApp and rename it $ReactorApp.
18. Drag $ReactorApp to the ABCInTouchApps folder.
19. Double-click the $ReactorApp Template to launch WindowMaker.

20. Select Import Existing InTouch Application from the InTouchViewApp Initialization dialog
box.
21. Click Next.

22. Browse to the Application Path.

Note: The instructor will provide the application name, node name, and file location.

Wonderware Training
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-33

23. Select the folder containing the InTouch application.


Click OK.

24. Click Next.

InTouch® 10.0 New Features and ArchestrA Graphics


4-34 Module 4 – Import, Migration and Integration

25. Click Next.

26. Click Done when the import is finished.

WindowMaker will launch automatically.

Wonderware Training
Lab 1 – Creating and Importing InTouch Applications in the IDE 4-35

27. Open the following windows:


z Main
z Menu
z Reactor display
28. Switch between Development and Runtime.
Verify that everything functions as expected.

29. Close WindowMaker.


Verify that the application is Checked In and click Close.

Note: InTouch applications should only be launched here for development purposes. They should
be deployed for production.

InTouch® 10.0 New Features and ArchestrA Graphics


4-36 Module 4 – Import, Migration and Integration

– Intentionally left blank –

Wonderware Training
Module 5

Symbol Creation and Editing


Section 1 – Managing Symbols 5-3
Section 2 – Using ArchestrA Symbols in WindowMaker 5-93
Lab 2 – Creating and Embedding Symbols 5-105
5-2 Module 5 – Symbol Creation and Editing

Module Objectives
z Create an ArchestrA Symbol.
z Organize Symbols using the Graphic Toolbox.
z Customize Graphic Toolsets.
z Edit Symbols.
z Import Symbols.
z Delete a Symbol.
z Insert an ArchestrA Symbol into an InTouch Window.
z Connect an ArchestrA Symbol to an InTouch Tagname.

Wonderware Training
Section 1 – Managing Symbols 5-3

Section 1 – Managing Symbols

Section Objectives
z Create ArchestrA Symbols.
z Use the Graphic Toolbox to manage a library of symbols.

This section explains what ArchestrA Symbols are, how they are stored in the ArchestrA
environment, and how they can be managed using the IDE tools.

About Symbols
ArchestrA Symbols are graphical symbols that you can use to visualize data in an InTouch HMI
application. They are managed by the IDE.
Using the IDE, you can:
z Create a new symbol.
z Open the symbol for editing with the ArchestrA Symbol Editor.
z Organize symbols within the Graphic Toolbox.
z Import and export symbols.
z Delete a symbol.
z Configure security for a symbol.
z Open the symbol in read-only mode with the ArchestrA Symbol Editor.

Creating a New Symbol


You can create a new symbol in either:
z The Graphic Toolbox for generic symbols that you are likely to frequently use in different
situations, for example a valve symbol.
z The Graphics panel of an Automation object template, if you are likely to re-use the
ArchestrA symbol in combination with the object functionality. An example would be a
symbol representing a specific tank and your production facility has multiple tanks.
z The Graphics panel of an Automation object instance, if you are unlikely to re-use the
symbol in any other situation.

ArchestrA Symbol Creation: The ArchestrA Symbol Editor


The ArchestrA Symbol Editor is the tool you use to create an ArchestrA Symbol.
First you select a basic graphical object, called an Element, from a tools panel and place it on the
drawing area, called the Canvas. Typical elements are lines, rectangles, ellipses, curves and
many more.
You can then change the appearance of your drawn elements either by accessing their Properties
directly, or by graphically manipulating them.
Then you can configure the elements or the symbol with Animations.

InTouch® 10.0 New Features and ArchestrA Graphics


5-4 Module 5 – Symbol Creation and Editing

The ArchestrA Symbol Editor


After you open the ArchestrA Symbol Editor, you see the various tools and palettes that you use to
create and customize symbols.

The ArchestrA Symbol Editor includes the following areas:


z Tools Panel - a collection of elements you use to create your symbol.
z Canvas - the area in which you place and move elements to create a symbol.
z Elements List - a list of named elements on the canvas in a hierarchical view.
z Properties Editor - a list of properties belonging to the currently selected element(s).
z Animation Summary - a list of animations belonging to the currently selected element. It
is only visible if an element is selected.

Tools Panel
The Tools panel contains elements you can select to create your symbol on the canvas.

The Tools panel includes:


z Basic objects such as lines, rectangles, polygons, arcs and many more.
z A pointer tool to select and move elements on the canvas.
z Windows Common controls such as combo boxes, calendar controls, radio button groups
and others.
z Status Element you can use as elements to show quality and status of selected ArchestrA
attributes.

Wonderware Training
Section 1 – Managing Symbols 5-5

Elements List
The Elements List is a list of all elements on the canvas.

The Elements List is particularly useful for selecting one or more elements that are visually hidden
by other elements on the canvas. You can use the Elements List to:
z See a list of all elements, groups of elements and embedded symbols on the canvas.
z Select elements or groups of elements to work with them.
z Rename an element or a group of elements.

Caution: If you rename an element or a group, the animation references to it are not automatically
updated. You must manually change all animation links referencing the old name.

Properties Editor
You can use the Properties Editor to view and set properties for the selected element or group of
elements.

Custom Properties will be discussed in detail later.

Animation Summary
You can use the animation summary to review, select and configure the animation behavior of a
selected element on the canvas.

InTouch® 10.0 New Features and ArchestrA Graphics


5-6 Module 5 – Symbol Creation and Editing

Canvas
The canvas is your drawing area. You use it as you would in other image editing software by
drawing elements and changing them to your requirements.

Elements
You use elements to create a symbol. The ArchestrA Symbol Editor provides the following:
z Basic Elements such as lines, rectangles, ellipses, arcs and more.
z Status element to show a quality status icon.
z Windows Common controls such as combo boxes, calendar controls, radio button groups
and more.
You can create the following from existing elements on the canvas:
z Groups - Grouping Elements together
z Path Graphics - Joining two unrelated Elements into one enclosed Element
You can embed the following on the canvas:
z Imported Client Controls
z Other Symbols

Basic Elements
You can use the following basic elements to create a symbol:
z Open elements such as line, H/V line, polyline, curve and arc.

z Closed elements such as rectangle, rounded rectangle, ellipse, polygon, closed curve, pie
and chord.

z Text elements such as button, text and text box.

Note: You can draw the arcs, pies and chords from either two points or three points.

Wonderware Training
Section 1 – Managing Symbols 5-7

Status Element
You can use a Status element to monitor and indicate the status or quality of:
z All ArchestrA attributes used in one or more specified animated elements in the same
hierarchical level.
Status elements will be discussed in more detail later.

Creating Symbols in the Graphic Toolbox


You can create a symbol in the Graphic Toolbox.
When you create a new symbol, the symbol is listed in the Graphic Toolbox. After you create a
new symbol, you can move the symbol or open the ArchestrA Symbol Editor to edit it.
To create a new symbol from the IDE
a. On the Galaxy menu, point to New, and then click Symbol.
The Graphic Toolbox appears and a new symbol is listed.

Note: You can press the following keys to create a new ArchestrA symbol: Ctrl + Shift + S.

b. Rename the symbol.


Names must be unique within the entire hierarchy.
Valid characters for symbol names include alphanumeric characters, # and _ (underscore).
Symbol names cannot contain spaces and the symbol name cannot begin with the $
character.

Note: Plan your naming conventions carefully. ANY object, whether and InTouch Application
or a ArchestrA Graphic object, exported from the IDE has the same .aaPKG file extension.
The naming convention you use will determine your ability to recognize the object type.

InTouch® 10.0 New Features and ArchestrA Graphics


5-8 Module 5 – Symbol Creation and Editing

c. Double-click the symbol name.


The ArchestrA Symbol Editor opens.

d. Now you can draw your symbol.

Wonderware Training
Section 1 – Managing Symbols 5-9

Working with Graphic Elements


This section shows you how to work with the common features of graphic elements.

About Graphic Elements


Graphic elements are basic shapes and controls you can use to create a symbol to your
specifications. You can:
z Draw an element by selecting an element from the Tools panel, placing it on the canvas,
and then configuring its properties.
z Select one or more elements on the canvas with the mouse or from the Element list.
z Edit certain elements in a special way called inline editing.
z Copy, cut, paste, and duplicate elements.
z Move elements around on the canvas.
z Align elements to each other.
z Change the spacing between elements.
z Resize elements.
z Change the z-order of elements to change which elements appear on top of others when
they overlap.
z Rotate elements.
z Change the origin of elements to specify around which point the elements are rotated.
z Flip elements on their horizontal or vertical axis.
z Lock elements to stop them being moved or changed.
z Undo and redo any number of changes made previously to the symbol.
z Create groups of elements to bind them together.
z Create a path graphic from multiple open line elements.

Drawing and Dragging Elements


You can create elements such as lines, curves, circles, squares, and so on. You can combine
these elements to create complex drawings of all the equipment in your manufacturing
environment.
After you draw an element, you can modify its properties.
Regardless of the kind of element you are drawing, drawing each kind of element is very similar.
After you draw an element, the pointer tool is selected again by default. To draw multiple elements
of the same type, double-click the element in the Tools panel. It remains selected after you draw
your first element of that type. You can press the ESC key to return to the pointer tool again.
If you draw or drag an element outside of the visible canvas area to the right or bottom, horizontal
and/or vertical scroll bars appear but the visible area does not follow the mouse.
You can later use the scroll bars to scroll the canvas and see the element you drew or moved.

InTouch® 10.0 New Features and ArchestrA Graphics


5-10 Module 5 – Symbol Creation and Editing

Drawing Rectangles, Rounded Rectangles, Ellipses, and Lines


You can draw rectangles, rounded rectangles, ellipses, and lines on the canvas.

To draw a rectangle, rounded rectangle, ellipse, or line


a. Click the appropriate icon in the Tools panel.
b. Click the canvas and drag the shape of the element on the canvas.
c. When you are done, release the mouse button.

Drawing Polylines, Polygons, Curves, and Closed Curves


You can draw polylines, polygons, curves, and closed curves on the canvas. If you are drawing a
closed element, the element automatically closes when you are done drawing.

To draw a polyline, polygon, curve, or closed curve


a. Click the appropriate icon in the Tools panel.
b. Click the canvas where you want to start the element.
c. Click the next point for the element.
d. Continue clicking until you have all the points you require.
e. When you are done, right-click.
f. You can change the shape of these elements anytime by editing their control points.

Drawing 2-Point Arcs, 2-Point Pies and 2-Point Chords


You can draw 2-point arcs, 2-point pies, and 2-point chords on the canvas. If you are drawing a
closed element, the element automatically closes when you are done drawing.

To draw a 2-point arc, 2-point pie, or 2-point chord


a. Click the appropriate icon in the Tools panel.
b. Click the canvas where you want to start the element and hold the mouse button.
c. Drag the mouse to where you want the element to end.
d. When you are done, release the mouse button.
e. You can change the shape of these elements anytime by editing their control points.

Wonderware Training
Section 1 – Managing Symbols 5-11

Drawing 3-Point Arcs, 3-Point Pies, and 3-Point Chords


You can draw 3-point arcs, 3-point pies and 3-point chords on the canvas. If you are drawing a
closed element, the element automatically closes when you are done drawing.

To draw a 3-point arc, 3-point pie, or 3-point chord


a. Click the appropriate icon in the Tools panel.
b. Click the canvas where you want to start the element.
c. Click the canvas in two other places to define the element.
d. You can change the shape of these elements anytime by editing their control points.

Placing and Importing Images


You can place an image element on the canvas and import an image into it.

To draw an image
a. Click the image icon in the Tools panel.
b. Click the canvas and drag the shape of the image element.
c. Release the mouse button.
The Open dialog box appears.
d. Browse to the image file, select it, and then click Open.
The image file is loaded into the image element.

Drawing Buttons
You can draw a button on the canvas. You can configure a button with a text label or an image.

To draw a button
a. Click the button icon in the Tools panel.
b. Click the canvas and drag the shape of the button element.
c. Release the mouse button.
The button text appears in edit mode.
d. Type a text label for the button and then press Enter.

InTouch® 10.0 New Features and ArchestrA Graphics


5-12 Module 5 – Symbol Creation and Editing

Placing Text
You can place text on the canvas.
The text element has no border and no background fill. The text does not wrap. When you type the
text, the size of the Text element expands.
You can also drag the handles of the Text element to resize it.

To place text
a. Click the text icon in the Tools panel.
b. Click the canvas where you want to place the text.
c. Type the single line of text you want.
d. When you are done, do one of the following:
z Press Enter to type a new line of text.
This new line is a new element.
z Click the canvas outside the text element.

Drawing Text Boxes


You can draw text boxes on the canvas. Text boxes can have borders and background fill.
You can also configure the text to wrap in the text box.

To draw a text box


a. Click the text box icon in the Tools panel.
b. Click the canvas where you want to place the text box.
c. Drag a rectangle on the canvas.
d. Release the mouse button.
The text appears in edit mode.
e. Type a text label for the text box, and then press Enter.

Drawing Status Elements


You can use the status element to indicate specific quality and status conditions of attributes.

To draw status elements


a. Click the status icon in the Tools panel.
b. Click the canvas where you want to place the status element.
c. Drag a rectangle on the canvas.
d. Release the mouse button.

Wonderware Training
Section 1 – Managing Symbols 5-13

Drawing Windows Controls


You can draw Windows controls on the canvas to add additional functionality to your symbol. Each
of the Windows controls has specific behavior when it is drawn. For example, you can change the
width of a combo box, but not the height.

To draw a windows control


a. Click the appropriate Windows control icon in the Tools panel.
b. Click the canvas where you want to place the Windows control.
c. Drag a rectangle on the canvas.
d. Release the mouse button.

Dragging Elements
After you draw elements on the canvas, you can drag them to a new position.
To drag elements on the canvas
a. Select one or more elements.
b. Click one of them and hold the mouse button down.
c. Drag the mouse to the new position.
d. Release the mouse button.

InTouch® 10.0 New Features and ArchestrA Graphics


5-14 Module 5 – Symbol Creation and Editing

Editing Element Properties


You can control the appearance of an element, a group of elements, or multiple elements with
functions on the toolbar and/or properties in the Properties Editor.
Often you can edit an element by changing the values of its properties instead of using the mouse
to perform the same function. This is useful when you want very exact editing, such as when you
want to resize an element to a specific width.
The Properties Editor shows the properties common to all selected elements.
z Read-only properties appear in grey.
z Non-default values appear in bold.

Note: The Properties Editor not only supports values, but also allows input of color, font, and
file information in the respective dialog boxes.

Properties are organized in categories so you can find them more easily. The following table
shows the categories:

Property Category Purpose Properties Editor


Element name or other describing
Graphic
identifiers
Element location, size, orientation,
Appearance
offset, transparency and locked status
Any parameters related to the fill
Fill Style
appearance of the element
Any parameters related to the line
Line Style
appearance of the element
Any parameters related to the text
Text Style
appearance of the element
Element visibility, tab order and any
Runtime Behavior
other element behavior at Runtime
Additional user-defined properties you
Custom Properties
can associate with any element

Wonderware Training
Section 1 – Managing Symbols 5-15

Selecting Elements
You can select one or more elements by:
z Clicking on them with the mouse.
z Dragging the lasso around them with the mouse.
z Selecting them with a menu option or with a shortcut key.
z Selecting them in the Elements List.
When you select an element, it appears with handles that give you control over its size and
orientation.

When you select multiple elements, the last selected element is the primary element. All other
previously selected elements are secondary elements.

Selected Element Description


Primary Element Appears with color-filled handles.
Behaves as an active selected
element.
Is the point of reference for all
operations, such as aligning or
spacing multiple selected elements.
Secondary Elements Appear with white handles.
Behave as inactive selected
elements.
Follow the edits made to the primary
element.

To select a group, you must click one of the elements contained in the group.

InTouch® 10.0 New Features and ArchestrA Graphics


5-16 Module 5 – Symbol Creation and Editing

Selecting Elements by Mouse Click


You can select one or more elements by pressing Shift + clicking. This is particularly useful for
selecting multiple elements that are not necessarily all included in a specified rectangular area on
the canvas.
To select an element or multiple elements by mouse click
a. On the canvas, click an element. It becomes selected.

b. To select further elements, press Shift + click. The other elements become selected.

Note: Note You can see in the Elements List which elements are selected.

Selecting Elements by Lasso


You can select one or more elements by lassoing them with your mouse. This is useful for
selecting multiple elements within a specified rectangular area on the canvas.
To select elements by lasso
a. On the canvas, click outside any element and hold the mouse button down.
b. Drag the mouse so that the lasso wraps around all elements that you want to select.

c. When you are done, release the mouse button.


The elements that are fully included in the lasso are selected.

Selecting All Elements


You can select all elements using the Select All function.
To select all elements
z On the Edit menu, click Select All. All elements on the canvas are selected.

Note: Note You can also press the F2 key to select all elements.

Wonderware Training
Section 1 – Managing Symbols 5-17

Selecting Elements Using the Elements List


You can use the Elements List to select any elements on the canvas. The Elements List is
particularly useful for selecting elements behind other elements.
The Elements List shows which elements are currently selected. The primary selected element
appears by default in dark blue, the secondary selected elements appear by default in light blue.

Note: Note The color setting of the Elements List depends on the setting for the Selected Items
option in the operating system’s Display Properties Appearance panel.

To select elements using the Elements List


a. In the Elements List, select the element name.
b. To select multiple elements, Ctrl + click the other elements.

Unselecting Elements
You can unselect one or more selected elements. You can do this by clicking on them individually
on the canvas or in the Elements List.
If you want to remove the selected elements in a specified rectangular area, you can use the
lasso.
To unselect elements individually
a. Do one of the following:
z Shift + click the selected element on the canvas.
z Ctrl + click the selected element name in the Elements List.
b. 2 Repeat the previous step for all elements you want to unselect.
To unselect elements from a specified rectangular area
a. Shift + click the canvas outside of any element.
b. Drag the mouse so that the lasso surrounds the elements that you want to unselect.
c. Release the mouse button. The selected elements within the lasso are unselected, and the
selected elements outside the lasso remain selected.

InTouch® 10.0 New Features and ArchestrA Graphics


5-18 Module 5 – Symbol Creation and Editing

Inline Editing
After you place certain elements on the canvas, you can edit them by selecting them and clicking
on them again. This is called inline editing. The following elements can be edited in this way:

Element Use inline editing to


Button, text, text box Edit the text.
Polyline, polygon, curve, closed curve Edit the control points.
2-point arc, 2-point pie, 2-point chord, Edit the start and sweep angles.
3-point arc, 3-point pie, 3-point chord
Group Edit the individual elements and
groups contained in the group.
Path Edit the control points.

To edit elements with inline editing


a. Select an element. The element handles appear.
b. Click the element again to begin inline editing.
z For buttons, text, and text boxes, the text is selected and you can type new text.

z For polylines, polygons, curves, and closed curves, the control points of the element
appear. Use these to change the shape of the element. You can also add and delete
control points.

z For arcs, pies, and chords, the handles for the start angle and sweep angle appear. Use
these to change the start angle and sweep angle.

z For groups, the group handle is replaced with a shaded outline. You can select individual
elements and groups within the group to edit and move them.

c. Click the canvas outside the element.

Wonderware Training
Section 1 – Managing Symbols 5-19

Copying, Cutting, and Pasting Elements


After you draw elements, you have the same cut, copy, and paste options available to you as in
any other Windows application. However, some of these options behave differently in the
ArchestrA Symbol Editor.
You can also duplicate elements. Duplicating elements lets you quickly make copies of existing
selected elements without first copying or cutting. You can duplicate one or more selected
elements at the same time.
When you copy or duplicate elements, all of its properties are copied with the element. If you do
not want the properties to be identical, you must change the properties after you copy.
Locked grouped elements and the path element behave differently when you copy or duplicate
them.
If you copy or duplicate:
z A set of elements that are locked, the copy is not locked.
z Grouped elements, the copy is still grouped.
z A path element, the copy is also a path.

Copying Elements
After you select an element, you can copy it by using menu options or you can Ctrl + click.

To copy one or more elements


z Do any of the following:
z Select one or more elements to be copied on the canvas.
On the Edit menu, click Copy.
On the Edit menu, click Paste.
The paste pointer appears.
Click the canvas where you want to place the copy.
z Ctrl + click an element.
z Select one or more elements to be copied on the canvas. Press Ctrl + C. Press Ctrl +
V. The paste pointer appears. Click the canvas where you want to place the copy.

InTouch® 10.0 New Features and ArchestrA Graphics


5-20 Module 5 – Symbol Creation and Editing

Cutting or Deleting Elements


You can cut elements or groups or you can delete them. Cutting lets you select elements or groups
and remove them from the canvas. You can paste the removed elements or groups.
Deleting elements or groups deletes them from the canvas. You cannot paste deleted elements or
groups.
To cut one or more elements
z Select one or more elements, and then do one of the following:
z On the Edit menu, click Cut.
z Press Ctrl + X.
To cut and paste elements on the canvas
a. Select the element or group.
b. On the Edit menu, click Cut.
c. Do one of the following:
z Click Paste on the Edit menu.
z Press Ctrl + V.
d. Click the canvas location where you want the element or group to be placed.
To delete an element or a group
a. To remove the element or group and not use it in the future, select the element or group.
b. Do one of the following:
z Click Delete on the Edit menu.
z Press Delete on your keyboard.

Wonderware Training
Section 1 – Managing Symbols 5-21

Duplicating Elements
Duplicating elements allows you to select an element or elements and quickly make copies of
them.
You can also specify the amount of overlap when you duplicate.
To duplicate elements
a. Select one or more elements.
b. Do one of the following:
z Click Duplicate on the Edit menu.
The selected element is duplicated and appears offset to the original element.
z Press Ctrl + D.
The selected element is duplicated and appears offset to the original element.

z Ctrl + click one of the selected elements to duplicate all selected elements.
You can keep the mouse button down and drag them to the new position on the canvas.
To set the overlap when you duplicate
a. Duplicate an element or elements. The element is copied overlapping the original.
b. Move the duplicated element to the location relative to the original. For example, move the
duplicated element five grid spaces above the original element.
c. Duplicate the element again. The new duplicate is placed in the same offset you specified in
the preceding step. For example, five grid spaces above the original element.

InTouch® 10.0 New Features and ArchestrA Graphics


5-22 Module 5 – Symbol Creation and Editing

Resizing Elements
You can resize selected elements by:
z Dragging the handles of a single element to increase or decrease its horizontal or vertical
size.
z Changing the Width and Height properties of one or more elements using the Properties
Editor.
z Proportionally resizing multiple elements.
z Making multiple objects the same width and/or height.
Some elements cannot be resized or can only be resized in certain directions, such as the
Calendar control or DateTime Picker. If the primary element has such restrictions, then any
secondary elements resize proportional to the change in primary element's size and do not resize
independently.

Resizing a Single Element with the Mouse


You can resize a single selected element with the mouse.
You can resize most elements to any given width and height, or to a fixed width to height ratio.
To resize a single selected element with the mouse
a. Select an element. The handles of the selected element appear.

b. Drag one of the handles. The object is resized while you drag.
c. Release the mouse button.
To resize a single selected element with the mouse and keeping a fixed width/height ratio
a. Select an element. The handles of the selected element appear.
b. Press and hold the Shift key.
c. Drag one of the handles.
The object is resized while you drag, the width/height ratio stays unchanged.
d. Release the mouse button and Shift key.

Resizing Elements by Changing Size Properties


You can resize one or more elements by changing the width and/or height property of the selected
element(s).
To resize elements by changing their size properties
a. Select one or more elements.
b. In the Properties Editor, type a value for Width and for Height.
The selected elements are resized accordingly.

Wonderware Training
Section 1 – Managing Symbols 5-23

Resizing Elements Proportionally


You can resize multiple elements proportionally on the canvas. One element is the primary
element you can use to resize. The secondary elements resize proportionally to the change of the
primary element.

To resize elements proportionally


a. Select multiple elements.
b. Drag one of the handles of the primary element. The secondary elements are resized
accordingly by the same percentage.
c. Release the mouse button.
For example, assume the primary element is 100 pixels wide and 50 pixels high. A secondary
element is 200 pixels wide and 20 pixels high.
You drag the handle of the primary element so that it is 120 pixels wide (20% increase) and 100
pixels high (100% increase).
Then the secondary element is resized to 240 pixels wide (20% increase of the original width of
200 pixels) and 40 pixels high (100% increase of the original width of 20 pixels).

Making Elements the Same Width, Height, or Size


You can make elements the same width, height, or size.
To make elements the same width
a. Select at least two elements. Make sure the primary element is the element with the target
width for all elements.
b. On the Arrange menu, point to Size, and then click Make Same Width. The width of the
secondary elements are resized to the same width as the primary element.

InTouch® 10.0 New Features and ArchestrA Graphics


5-24 Module 5 – Symbol Creation and Editing

To make elements the same height


a. Select at least two elements. Make sure the primary element is the element with the target
height for all elements.
b. On the Arrange menu, point to Size, and then click Make Same Height. The height of the
secondary elements are resized to the same height as the primary element.

To make elements the same size


a. Select at least two elements. Make sure the primary element is the element with the target
size for all elements.
b. On the Arrange menu, point to Size, and then click Make Same Size. The size of the
secondary elements are resized to the same size as the primary element.

Adjusting the z-Order of Elements


The z-order of elements specifies which element appears on top of other elements when the
elements overlap on the canvas. The z-order also determines how the elements of a path graphic
connect.
When you place new elements on the canvas, they are placed at the top and can cover all other
elements.
However, you might want to bring certain elements forward so that they are always visible or
overlap certain other elements. Or you may want to use a large background element behind all
other elements. You can:
z Bring one or more elements to the very front.
z Send one or more elements to the very back.
z Bring one or more elements one level forward.
z Send one or more elements one level backward.
You can use the Elements List to see or change the z-order of the elements.
For more information of Adjusting the z-Order of Elements see Chapter 5 of Creating and
Managing ArchestrA Graphics User’s Guide.

Wonderware Training
Section 1 – Managing Symbols 5-25

Rotating Elements
You can rotate elements to any orientation (0 - 359 degrees):
z Graphically with the rotation handle.
z Numerically by typing the orientation angle in the Properties Editor.
z By rotating them by 90 degrees in a clockwise or counter-clockwise direction.
The element is rotated around its point of origin. By default, the point of origin is in the center of the
element. You can move the point of origin to any other location, even outside of the object itself.

Rotating Elements with the Mouse


You can rotate one or more elements with the mouse. If you select multiple elements, you can
rotate the primary element. The secondary elements are rotated together with the primary
element.
You can rotate elements:
z Freely in the range 0 to 359 in integer degrees.
z In multiples of 15 degrees.
z In multiples of 45 degrees.
You can rotate an element with the rotation handle. The rotation handle is a light-blue circle at the
top of a selected element.

To rotate elements freely with the mouse


a. Select one or more elements.
b. Grab the rotation handle of the primary element.
c. Drag the mouse across the screen. All selected elements are rotated around their own points
of origin as you move the mouse.
d. Release the mouse button.
To rotate elements by multiple of 15 degrees with the mouse
a. Select one or more elements.
b. Grab the rotation handle of the primary element.
c. Press and hold the Shift key.
d. Drag the mouse across the screen. All selected elements are rotated in multiples of 15
degrees around their own points or origin as you move the mouse.
e. Release the mouse button and the Shift key.
To rotate elements by multiple of 45 degrees with the mouse
a. Select one or more elements.
b. Grab the rotation handle of the primary element.
c. Press and hold the Ctrl key.
d. Drag the mouse across the screen. All selected elements are rotated in multiples of 45
degrees around their own points or origin as you move the mouse.
e. Release the mouse button and the Ctrl key.

InTouch® 10.0 New Features and ArchestrA Graphics


5-26 Module 5 – Symbol Creation and Editing

Rotating Elements by Changing the Angle Property


You can change the angle property of one or more selected elements.
To rotate elements by changing the angle property
a. Select one or more elements.
b. In the Properties Editor, type a value in the Angle box.
c. Press Enter. The selected elements rotate to the specified angle.

Rotating Elements by 90 Degrees


You can rotate elements by 90 degrees clockwise or counter-clockwise.
To rotate elements by 90 degrees clockwise
a. Select one or more elements.
b. On the Arrange menu, point to Transform, and then click Rotate Clockwise.
The selected elements rotate by 90 degrees clockwise.

To rotate elements by 90 degrees counter-clockwise


a. Select one or more elements.
b. On the Arrange menu, point to Transform, and then click Rotate Counter Clockwise.
The selected elements rotate by 90 degrees counter-clockwise.

Wonderware Training
Section 1 – Managing Symbols 5-27

Moving the Origin of an Element


You can change the point of origin for any element. The point of origin specifies around which point
the element rotates or flips. By default the point of origin is in the center of the element.
You can change the point of origin:
z With the mouse on the canvas.
z By specifying the absolute origin in the Properties Editor.
z By specifying the relative origin in the Properties Editor.

Changing Points of Origin with the Mouse


You can change the point of origin for an element with the mouse.

To change the point of origin for an element with the mouse


a. Select an element on the canvas.
b. Move the mouse over the rotation handle of the element.
The point of origin icon for the element appears.
c. Drag the Point of Origin icon to where you want to place the new point of origin for the
element.
d. Release the mouse button.

Changing Points of Origin in the Properties Editor


You can change the absolute or relative point of origin in the Properties Editor.
The absolute point of origin shows the position of the point of origin in relation to the canvas. The
absolute point of origin changes when the element moves.
The relative point of origin shows the position of the point of origin in relation to the center of the
element. The relative point of origin does not change when the element moves.
To change the point of origin in the Properties Editor
a. Select one or more elements on the canvas.
b. In the Properties Editor, do one of the following:
z Type the absolute coordinates in the x, y format for the point of origin.
z Type the relative coordinates in the x, y format for the point of origin.
c. Press Enter. The points of origin move to the specified absolute position or to the specified
position in relation to the center points of the selected elements.
For example, if you have two elements, you can set the relative point of origin to 10, 10 to place
the points of origin for both elements 10 pixels to the right and 10 pixels below the corresponding
center points of each element.

InTouch® 10.0 New Features and ArchestrA Graphics


5-28 Module 5 – Symbol Creation and Editing

Flipping Elements
You can flip elements on their horizontal or their vertical axis. The axis for each element is
determined by its point of origin.
To flip elements vertically
a. Select one or more elements.
b. On the Arrange menu, point to Transform, and then click Flip Vertical. The selected elements
are flipped vertically on their horizontal axis.

To flip elements horizontally


a. Select one or more elements.
b. On the Arrange menu, point to Transform, and then click Flip Horizontal. The selected
elements are flipped horizontally on their vertical axis.

Working with Groups of Elements


You can group together multiple elements. This is useful to bind certain element together so that
they are not inadvertently moved. The group is treated as a new element.
You can:
z Create a group from one or more elements.
z Ungroup the elements without losing their original configuration information.
z Add more elements to an existing group.
z Remove elements from a group.
z Edit the elements of a group without having to ungroup them.

Wonderware Training
Section 1 – Managing Symbols 5-29

Creating a Group of Elements


After you create elements, you can group them. Grouping elements lets you manage the elements
as one unit.
Groups are assigned default names when you create them, such as Group1, Group2, and so on.
After you create a group, you can rename it.
Groups can have properties that are different than the properties of the elements.
To create a group
a. Select the elements you want as part of the new group.
b. On the Arrange menu, point to Grouping, and then click Group.
The elements are combined into a group. The group is listed in the Elements List.
c. Rename the group as required. To do this:
z In the Elements List, click the group name and click again.
The group name is in edit mode.

z Type a new name and press Enter. The group is renamed.


z You can also rename a group or elements by changing the Name property in the
Properties Editor.

Ungrouping
After you create a group, you can ungroup it if you no longer want it.
If the group included elements and other groups, when you ungroup, the original elements and
groups again exist as independent items. To ungroup any subgroups, you must select each one
and ungroup it separately.
If you ungroup a set of elements and elements already exist with the names of the grouped
elements, then the newly ungrouped elements are renamed.
To ungroup
a. Select the groups you want to ungroup.
b. On the Arrange menu, point to Grouping, and then click Ungroup.
The groups is converted to the original elements.
The group name is removed from the Elements List and the element names appear.

InTouch® 10.0 New Features and ArchestrA Graphics


5-30 Module 5 – Symbol Creation and Editing

Adding Elements to Existing Groups


After you create a group, you can add elements or other groups to an existing group.
For example, you can combine a group that represents a valve with another group that represents
a tank to create a new group that can be called a tank unit.
You can add:
z Elements to groups.
z Groups to the primary selected group.
To add elements to an existing group
a. On the canvas, select the group and also elements and groups that you want to add.
b. Right-click a selected element or on the group, point to Grouping, and then click Add to Group.
The selected elements are added to the group.

Note: Note You can also add elements to existing groups by using the Elements List in similar
way.

Removing Elements from Groups


After you create a group, you can remove elements from the group. This lets you remove one or
more elements you no longer want in that group.
Removing elements from the group removes them from the canvas. It also removes any scripts or
animations you added to the element.
To remove an element from a group
a. On the canvas, select the group with the element(s) that you want to remove.
b. Click the group again to enter inline editing mode.
c. Select the element(s) that you want to remove from the group.
d. Right-click a selected elements, point to Grouping, and then click Remove from Group.
The selected elements are removed from the group.

Note: Note You can also remove elements from existing groups by using the Elements List in
similar way.

Wonderware Training
Section 1 – Managing Symbols 5-31

Editing Components within a Group


You can edit components within a group without having to dissolve the group. Do this by:
z Selecting the element in Elements List.
z Using the Edit Group command on the shortcut menu.
z Slowly double-clicking to enter inline editing mode.
To edit components within a group by using the Elements List
a. In the Elements List, expand the group that contains the element that you want to edit.
b. Select the element that you want to edit. The element appears selected in the group and the
group is outlined with a diagonal pattern.

c. Edit the element with the Properties Editor, by mouse or by menu according to your
requirements.
d. Click outside the group.
To edit components within a group by using the Edit Group command
a. On the canvas, select the group that you want to edit.
b. On the menu Edit, click Edit Group ‘GroupName’.
The group is outlined with a diagonal pattern.

c. Select the element that you want to edit.


d. Edit the element with the Properties Editor, by mouse, by menu or pop-up menu according to
your requirements.
e. Click outside the group.

Note: Note If you move the position of an element in a group outside the group, the group
size is automatically changed to incorporate the new position of the element.

InTouch® 10.0 New Features and ArchestrA Graphics


5-32 Module 5 – Symbol Creation and Editing

Path Graphics
Complex Shapes and Paths are a useful addition to InTouch 10.0.
Path graphics are elements that combine selected open elements, such as lines, H/V lines,
polylines, curves and arcs to a single closed graphic element.

The path graphic depends:


z On the order in which you drew its elements. Each element is linked to the next element
by z-order. The z-order of the elements is the order shown in the Element Browser list.
z On the direction in which you drew its elements. The end point of one element is
connected to the start point of the next element.
The properties of the elements contained within a path graphic are retained, so that when you
break the path graphic, the elements of which it consists appear as they did before the path
graphic is created.
The Path Graphic has the same properties as a rectangle, ellipse or polyline. It loses these
properties when you break the path.

Wonderware Training
Section 1 – Managing Symbols 5-33

Any shape with 2 open points can be joined


z Joined shapes can be Filled, animated etc.

z Path Tool:
z Example – create a shield:

z Create using Path button

z Break using Path Break button


(or Arrange | Path)
z Path element can be animated as closed shape
z Paths can be edited using Edit | Path menu
z New elements can be added by drawing
z Existing contained elements can be deleted

InTouch® 10.0 New Features and ArchestrA Graphics


5-34 Module 5 – Symbol Creation and Editing

Editing Common Properties of Elements and Symbols


Some properties are common to most types of elements, such as fill, line styles, and visibility. You
can:
z Edit the name of an element.
z Edit the fill properties of an element.
z Edit the line properties of an element.
z Edit the text properties of an element.
z Set the style.
z Set the transparency level of an element.
z Tweaking colors and style for an element’s gradient style.
z Enable and disable elements for run-time interaction.
z Change the visibility of an element.
z Change the tab order of an element.
z Use the Format Painter to format elements.
z Edit the general properties of a symbol.

Editing the Name of an Element


The name of an element uniquely identifies the element on the drawing surface.
When you draw a new element on the drawing surface, it is assigned a default name. You can
then change its name in the Properties Editor or the Elements List.
Element names are case-insensitive and unique within the same element hierarchy. It is possible
to have two elements with the same name if one is, for example, in a group and the other outside
that group.
To change an element’s name in the Properties Editor
a. Select the element on the drawing surface.
b. In the Properties Editor, click the value for the Name box.
c. Type a new name and press Enter.
To change an element’s name in the Elements List
a. Select the element in the Elements List.
b. Click the element in the Elements List again.
c. Type a new name and press Enter.

Wonderware Training
Section 1 – Managing Symbols 5-35

Editing the Fill Properties of an Element


You can configure the following fill properties for an element:
z Fill style as solid color, gradient, pattern or texture
z Unfilled style
z Fill orientation, relative to the element or to the screen
z Fill behavior, which determines if the object is to be filled horizontally, vertically, or both
z Horizontal fill direction
z Vertical fill direction
z Percent of horizontal fill
z Percent of vertical fill

Setting Fill Style


You can configure the fill style of one or more elements. You can do this to:
z Selected elements on the toolbar.
z Style properties in the Properties Editor.
z Nested style properties, such as just one color of a multi-colored gradient.
To configure the fill style of an element with the toolbar
a. Select one or more elements you want to configure.
b. On the toolbar, click the Fill Color icon. The fill style list appears.

c. Configure the fill color. Do any of the following:


z Click No Fill to configure an empty element.
z Click a predefined solid color in the display.
z Click More Solid Colors to open the Style Selection dialog box and select a solid color.
z Click Color Picker to select a color from the screen.
d. Configure the fill gradient, pattern, or texture. Do any of the following:
z Click a predefined gradient.
z Click More Gradients to open the Style Selection dialog box and configure a gradient.
z Click Patterns to open the Style Selection dialog box and select a pattern.
z Click Textures to open the Style Selection dialog box and select a texture.

InTouch® 10.0 New Features and ArchestrA Graphics


5-36 Module 5 – Symbol Creation and Editing

To configure the fill style by setting style properties


a. Select one or more elements.
b. In the Properties Editor, locate the FillStyle property.
c. Click the browse button to open the Style Selection dialog box.
To configure the fill style by setting gradient color style properties
a. Select one or more elements with gradient fill style.
b. In the Properties Editor, locate the Color1, Color2, and Color3 properties.
c. lick the browse button for any of these to set the selected gradient color from the Style
Selection dialog box.

Setting Unfilled Style


You can configure an element’s unfilled style. The unfilled style of an element determines the
element’s unfilled portion at design time and run time.
To configure the unfilled style of an element
a. Select one or more elements.
b. In the Properties Editor, click UnfilledStyle.
c. Click the browse button in the UnfilledStyle line. The Style Selection dialog box appears.
d. Select a solid color, gradient, pattern, or texture.
e. Click OK.

Setting Fill Orientation


You can configure an element’s fill orientation in the Properties Editor. The fill orientation property
determines if the fill style is relative to the screen or element.
z If relative to the screen, the gradient, pattern, or texture does not rotate with the element.
z If relative to the element, the gradient, pattern, or texture rotates with the element.
To configure an element’s fill orientation
a. Select one or more elements you want to configure.
b. In the Properties Editor, click FillOrientation.
c. From the list in the same line, click RelativeToScreen or RelativeToGraphic.

Wonderware Training
Section 1 – Managing Symbols 5-37

Setting Fill Behavior


You can set the fill behavior of an element. The fill can be:
z Horizontal.
z Vertical.
z Both horizontal and vertical.
To set an element’s fill behavior
a. Select one or more elements you want to configure.
b. In the Properties Editor, set the property FillBehavior to one of the following:
z Horizontal
z Vertical
z Both

Setting Horizontal Fill Direction and Percentage


An element can fill:
z From left to right.
z From right to left.
You can also set the amount you want the element to be horizontally filled by as a percentage.
To set an element’s horizontal fill direction and percentage
a. Select one or more elements you want to configure.
b. In the Properties Editor, set the HorizontalDirection property to:
z Right to fill from left to right.
z Left to fill from right to left.
c. For the HorizontalPercentFill property, type a percentage (0 - 100) in the value box.

Setting Vertical Fill Direction and Percentage


An element can fill:
z From bottom to top.
z From top to bottom.
You can also set the amount you want the element to be vertically filled by as a percentage.
To set an element’s vertical fill direction and percentage
a. Select one or more elements you want to configure.
b. In the Properties Editor, set the VerticalDirection property to:
z Top to fill from bottom to top.
z Bottom to fill from top to bottom.
c. For the VerticalPercentFill property, type a percentage (0 - 100) in the value box.

InTouch® 10.0 New Features and ArchestrA Graphics


5-38 Module 5 – Symbol Creation and Editing

Editing the Line Properties of an Element


You can set the line properties for any element that contains lines, such as:
z Lines and polylines.
z Rectangles, rounded rectangles, and ellipses.
z Curves, closed curves, and polygons.
z Arcs, pies, and chords.
z Text boxes.
You can set the:
z Start and end points for lines, arcs, and H/V lines.
z Line weight, which is the thickness of a line.
z Line pattern, which is the continuity of a line. For example, a continuous line, a dotted line,
a dashed line, or a combination.
z Line style, which is the fill style of a line.
z Shape and size of the end points of a line.

Note: You can also set the element’s line properties in the Line Format properties group in
the Properties Editor.

Setting Start or End Points of a Line


After you draw a line or H/V line, you can change its start or end points in the Properties Editor.
To set the line or H/V line start or end point
a. Select a line or H/V line.
b. In the Properties Editor, type coordinate values X, Y for the Start or End properties.

Wonderware Training
Section 1 – Managing Symbols 5-39

Setting the Line Weight


You can set a line weight from 0 pixels to 255 pixels for any element that contains lines. You can
set the line weight using the Format menu, the toolbar, or the LineWeight property in the
Properties Editor.

Note: Extreme weight settings can cause unexpected behavior, especially with curves and line
end styles.

To set the line weight using the Format menu


a. Select one or more elements.
b. On the Format menu, click Line Weight.

c. To use a predefined line weight, select it from the list.


d. To use another line weight, click More Line Options. The Select Line Options dialog box
appears. In the Weight box, type a new line weight from 0 to 255 and then click OK.

Setting the Line Pattern


You can set the line pattern for any element that contains lines. The line pattern specifies the
continuity of a line (continuous, dotted, dashed) and not its fill properties.
To set the line pattern
a. Select one or more elements.
b. On the Format menu, click Line Pattern.

c. To use a predefined line pattern, select it from the list.


d. To use another line pattern, click More Line Options. The Select Line Options dialog box
appears. In the Pattern list, select a pattern, and then click OK.

Note: You can also set the line pattern by changing the LinePattern property in the Properties
Editor.

InTouch® 10.0 New Features and ArchestrA Graphics


5-40 Module 5 – Symbol Creation and Editing

Setting the Line Style


You can set the line style for any element that contains lines. Setting the line style is similar to
setting the fill style. You can also set the solid color, gradient, pattern, and texture for a line.
To set the line style
a. Select one or more elements.
b. On the toolbar, click the Line Color icon. The line style list appears.
c. Configure the line color. Do any of the following:
z Click a predefined solid color in the display.
z Click More Solid Colors to open the Style Selection dialog box and select a solid color.
z Click Color Picker to select a color from the screen.
d. Configure the line gradient, pattern, or texture. Do any of the following:
z Click a predefined gradient.
z Click More Gradients to open the Style Selection dialog box and configure a gradient.
z Click Patterns to open the Style Selection dialog box and select a pattern.
z Click Textures to open the Style Selection dialog box and select a texture.

Note: You can also set the element’s line style in the Properties Editor. If you do this, you can
configure the solid color, gradient, pattern, or texture in the Style Selection dialog box.

Setting the Text Properties of an Element


You can set the following for text, text box, and button elements:
z The text that appears
z The format in which the text appears
z The font of the text
z The alignment of the text
z The text style
You can also substitute strings in text, text box, and button elements.

Setting the Displayed Text


You can set the text of a text element, text box, or button in the canvas or by changing the Text
property in the Properties Editor.

To set the text to display


a. Select the text element, text box or button on the canvas.
b. On the Edit menu, click Edit Text. The selected element appears in edit mode.
c. Type a text string and press Enter.

Wonderware Training
Section 1 – Managing Symbols 5-41

Setting the Text Display Format


You can configure how values are shown for the text in a text box or button. For example, as a
rounded float with the format #.###.
You can format the text display for the:
z Text element and the button element in the same way as in the InTouch HMI or with the
TextFormat property in the Properties Editor.
z Text box element only with the TextFormat property.
To set the text display format
a. Select a text element, text box, or button.
b. In the Properties Editor, type a format for the TextFormat property.

Setting the Text Font


You can change the font style and font size of a text using:
z The Format menu.
z The Font property in the Properties Editor.
z Lists on the toolbar.

To set the text font, font style, and size


a. Select a text element, a text box, or a button element on the canvas.
b. On the Format menu, click Fonts. The Font dialog box appears.
c. Set the font, font style, size, and effects.
d. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


5-42 Module 5 – Symbol Creation and Editing

Setting the Text Color


You can set the text color as a solid color, a gradient, a pattern, or a texture.

Note: You can also change the text color in the Properties Editor with the TextColor property.

To set the text color


a. Select a text element, a text box, or a button element on the canvas.
b. Click the Text Color icon.

c. Configure the text color. Do any of the following:


z Click a predefined solid color in the display.
z Click More Solid Colors to open the Style Selection dialog box and select a solid color.
z Click Color Picker to select a color from the screen.
d. 4 Configure the text gradient, pattern, or texture. Do any of the following:
z Click a predefined gradient.
z Click More Gradients to open the Style Selection dialog box and configure a gradient.
z Click Patterns to open the Style Selection dialog box and select a pattern.
z Click Textures to open the Style Selection dialog box and select a texture.

Wonderware Training
Section 1 – Managing Symbols 5-43

Setting the Text Alignment


You can change the horizontal and vertical positioning of text within a text box element or button
element.
You can also change the positioning for a text element. If the text is modified at design time or run
time, the alignment sets how the element boundary changes to fit around the modified text.

Note: You can also set the text alignment in the Properties Editor by setting the Alignment
property.

If the element is a text box or a button, then the text is aligned accordingly.

Text Boxes Buttons

If the element is a text element and you then modify the text at design time or run time, the text is
anchored to the point of alignment.
z Text right alignments move additional text further over to the left.
z Text left alignments move additional text to the right.
z Changes in font size leave the point of alignment unchanged and modify the frame
accordingly.

InTouch® 10.0 New Features and ArchestrA Graphics


5-44 Module 5 – Symbol Creation and Editing

To set the text alignment


a. Select a text element, text box element or button element on the canvas.
b. On the Format menu, point to Text Alignment, and then click the appropriate command:

Click this command To


Top Left Align the text at the top left frame handle.
Top Center Align the text at the top middle frame handle.
Top Right Align the text at the top right frame handle.
Middle Left Align the text at the middle left frame handle.
Middle Center Align the text in the middle of the element.
Middle Right Align the text at the middle right frame handle.
Bottom Left Align the text at the bottom left frame handle.
Bottom Center Align the text at the bottom center frame handle.
Bottom Right Align the text at the bottom right frame handle.

Substituting Strings
You can search and replace strings of any element that have the Text property on your canvas.
You can use the basic mode to replace strings in a list.
You can also use advanced functions, such as find and replace, ignore, case-sensitivity, and
wildcards.
You cannot substitute static strings that are used in an Radio Button Group, List Box or Combo
Box.

To substitute strings in a symbol by using the list


a. Select one or more elements.
b. Do one of the following:
z Press Ctrl + L.
z On the Special menu, click Substitute Strings.
The Substitute Strings dialog box appears.

Wonderware Training
Section 1 – Managing Symbols 5-45

c. In the New column, type the text to be replaced.


d. Click OK.
To substitute strings in a symbol by using advanced functions
a. Select one or more elements.
b. Do one of the following:
z Press Ctrl + E.
z On the Special menu, click Substitute Strings.
The Substitute Strings dialog box appears.
c. Click Find & Replace. The dialog box expands and shows advanced options.

d. Configure the search strings. Do any of the following:


z To find specific strings in the list, type a string in the Find What box and click Find Next to
find the next string.
z To replace a selected found string with another string, type a string in the Replace with
box and click Replace.
z To replace multiple strings, type values in the Find What and Replace with boxes and click
Replace all.
e. Configure the search options. Do any of the following:
z If you want the search to be case-sensitive, click Match Case.
z To find only entire words that match your search string, click Match Whole Word Only.
z To use wildcards, click Use Wildcards. Use an asterisk (*) to search for any sequence of
characters. Use a question mark (?) to search for strings with one variable character.
f. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


5-46 Module 5 – Symbol Creation and Editing

Setting Style
You can set the fill, line, and text style from various places in the ArchestrA Symbol Editor using
the Style Selection dialog box. The Style Selection dialog box is common to any element for which
you can set a solid color, gradient, pattern, or texture. You can also set the transparency of the
style.
Because you can open the Style Selection dialog box from different places in the ArchestrA
Symbol Editor, the dialog box header can be different.
Also, not all tabs may be available. For example, for setting one color of a gradient in the
Properties Editor, you can only select a solid color from the Style Selection dialog box.

Setting a Solid Color


You can set a solid color using the Solid Color tab in the Style Selection dialog box. You can set a
solid color from the:
z Standard palette.
z Color disc and bar.
z Value input boxes.
z Color picker.
z Custom palette.
You can also:
z Add the new color to the custom palette.
z Remove a color from the custom palette.
z Save the custom palette.
z Load a custom palette.

Wonderware Training
Section 1 – Managing Symbols 5-47

Setting a Solid Color from the Standard Palette


You can set a solid color from the standard palette using the Solid Color tab in the Style Selection
dialog box. The standard palette is a set of 48 predefined colors you can use to quickly select a
solid color.
To set a solid color from the Standard Palette
a. In the Style Selection dialog box, click the Solid Color tab.

b. In the Standard Palette area, click a color. The new color appears in the New color box on the
right of the dialog box.
c. Click OK.

Setting a Solid Color from the Color Disc and Bar


You can set a solid color using the color disc and bar on the Solid Color tab in the Style Selection
dialog box. The color disc and bar let you graphically select the color and the luminance
(brightness).

InTouch® 10.0 New Features and ArchestrA Graphics


5-48 Module 5 – Symbol Creation and Editing

To set a solid color from the color disc and bar


a. In the Style Selection dialog box, click the Solid Color tab.
b. Click on the color disk to select a color. The bar is updated and shows the selected color in
varying degrees of luminance (brightness).
c. Click on the bar to select a luminance (brightness). The new color appears in the New color
box on the right of the dialog box.

d. Click OK.

Setting a Solid Color with the Value Input Boxes


You can set a solid color by typing values that define the color, such as:
z Red component (0-255).
z Green component (0-255).
z Blue component (0-255).
z Hue (0-255).
z Saturation (0-255).
z Luminance (0-255).
To set a solid color with the value input boxes
a. In the Style Selection dialog box, click the Solid Color tab.
b. In the Red, Green, Blue, Hue, Sat. and Lum. boxes, type respective values. The resulting
color appears in the New color box on the right of the dialog box and also on the color wheel
and bar.
c. Click OK.

Setting a Solid Color with the Color Picker


You can set a solid color by using the color picker on the Solid Color tab in the Style Selection
dialog box. The color picker lets you select a color from anywhere on the screen, even outside the
IDE application.
To set a solid color with the color picker
a. In the Style Selection dialog box, click the Solid Color tab.
b. Click the Color Picker button. The color picker pointer appears.
c. Select a color from anywhere on the screen by moving the mouse. As you move the mouse,
the new color appears in the New color box on the right of the dialog box.
d. Click the mouse to complete the color selection.
e. Click OK.

Wonderware Training
Section 1 – Managing Symbols 5-49

Setting a Solid Color from the Custom Palette


You can set a solid color from the custom palette on the Solid Color tab in the Style Selection
dialog box.
The custom palette is a set of colors that you want to frequently use. You can save the custom
palette to a .pal file or load a custom palette from a .pal file.
To use colors from the custom palette, you must first add them.
To set a solid color from the custom palette
a. In the Style Selection dialog box, click the Solid Color tab.
b. In the Custom Palette area, select a color. The new color appears in the New color box on the
right of the dialog box.
c. Click OK.

Adding and Removing Colors in the Custom Palette


You can add up to 36 solid colors to the custom palette. You can also remove any colors from the
custom palette.
You cannot add a color that is already in the custom palette.
To add a solid color to the custom palette
a. In the Style Selection dialog box, click the Solid Color tab.
b. Add the color. Do any of the following:
z Select a solid color from the custom palette.
z Select a solid color from the color disc and bar.
z Type values for red, green, blue, hue, saturation, and luminance.
z Select a solid color with the color picker.
The new solid color appears in the New color box on the right of the dialog box.

c. Click the add button above Custom Palette.


The solid color is added to the Custom Palette area.
To remove a solid color from the custom palette
a. In the Style Selection dialog box, click the Solid Color tab.
b. In the Custom Palette area, select the solid color you want to remove.

c. Click the Delete button above Custom Palette.


The solid color is removed from the custom palette.

InTouch® 10.0 New Features and ArchestrA Graphics


5-50 Module 5 – Symbol Creation and Editing

Saving and Loading the Custom Palette


You can save the current custom palette or load a previously saved custom palette. The custom
palette is loaded from or saved to a Windows Palette file (.pal).
After you save or load a custom palette, the .pal file is not connected to the symbol in any way.
To save a custom palette
a. In the Style Selection dialog box, click the Solid Color.
b. Click the Save Palette button. The Save Palette dialog box appears.
c. Browse to the location where you want to save the custom palette, type a name, and then click
Save. The custom palette is saved as a palette file.
To load a custom palette
a. In the Style Selection dialog box, click the Solid Color tab.
b. Click the Load Palette button.
c. If you currently have colors in the custom palette, a message appears. Click Yes to continue
and overwrite the current colors in the custom palette.
d. In the Load Palette dialog box, browse to the location of the palette file, select it, and then click
Open. The custom palette is loaded from the selected file.

Wonderware Training
Section 1 – Managing Symbols 5-51

Setting a Gradient
You can configure gradients by the:
z Number of colors - 1, 2 or 3.
z Direction - horizontal, vertical, radial, point based, or customized.
z Variant - depending on your selection for the number of colors and direction.
z Color distribution shape - bell or triangular with options to configure the center and falloff.
z Focus scales - width and height.
You set a gradient on the Gradient tab in the Style Selection dialog box.

InTouch® 10.0 New Features and ArchestrA Graphics


5-52 Module 5 – Symbol Creation and Editing

Setting the Number of Colors for a Gradient


You can set the number of colors you want to use in a gradient.
z If you use one color, the gradient is between this solid color and a specified shade of black
to white.
z If you use two colors, the gradient is between these two colors.
z If you use three colors, the gradient is between these three colors in sequence.
To set a gradient using one color
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Colors area, click One.
A color selection box and a slider for the dark to light selection appears.

c. Click the color selection box to open the Select Solid Color 1 dialog box. Select a solid color
and click OK. For more information about this dialog box, see Setting a Solid Color on page
164.
d. Move the slider between Dark and Light. The new gradient appears in the New color box on
the right of the dialog box.
e. Click OK.
To set a gradient using two colors
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Colors area, click Two. Two color selection boxes appear.

c. Click the Color 1 or Color 2 color field to select a color from the Select Solid Color dialog box.
The new gradient appears in the New color box on the right of the dialog box.
d. 4 Click OK.

Wonderware Training
Section 1 – Managing Symbols 5-53

To set a gradient for three colors


a. In the Style Selection dialog box, click the Gradient tab.
b. In the Colors area, select Three. Three color selection boxes appear.

c. Click the Color 1, Color 2 or Color 3 color field to select a color from the Select Solid Color
dialog box.
The new gradient appears in the New color box on the right of the dialog box.
d. Click OK.

Setting the Direction of the Gradient


You can configure the direction of the gradient to be one of the following:
z Horizontal - from side to side
z Vertical - up and down
z Radial - circular from the center outwards
z Point based - from the inside outwards in linear fashion depending on the bounding points
z Custom angle - across the element at a specified angle
To set a horizontal gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Direction area, click Horizontal. The new gradient appears in the New color box on the
right of the dialog box.
c. Click OK.
To set a vertical gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Direction area, click Vertical. The new gradient appears in the New color box on the
right of the dialog box.
c. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


5-54 Module 5 – Symbol Creation and Editing

To set a radial gradient


a. In the Style Selection dialog box, click the Gradient tab.
b. In the Direction area, click Radial.

c. Set the center location. Do any of the following:


z In the Horizontal and Vertical boxes, type values for the center location.
z Click and drag the center point in the adjacent box.
The new gradient appears in the New color box on the right of the dialog box.
d. Click OK.
To set a point based gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Direction area, click Point Based.

c. Set the center location. Do any of the following:


z In the Horizontal and Vertical text boxes, type values for the center location.
z Click and drag the center point in the adjacent box.
The new gradient appears in the New color box on the right of the dialog box.
d. Click OK.

Wonderware Training
Section 1 – Managing Symbols 5-55

To set the custom angle of a gradient


a. In the Style Selection dialog box, click the Gradient tab.
b. In the Direction area, click Custom.

c. Set the angle. Do any of the following:


z In the Angle text box, type a value for the angle.
z Click and drag the angle bar in the adjacent box.
The new gradient appears in the New color box on the right of the dialog box.
d. Click OK.

Changing the Variant of a Gradient


You can change the variant of a gradient. The variants are alternate gradients with the same
colors you can quickly select.
To change the variant of a gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Variants area, click on a variant gradient.

The new gradient appears in the New color box on the right of the dialog box.
c. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


5-56 Module 5 – Symbol Creation and Editing

Setting the Color Distribution Shape


You can configure the distribution shape of a gradient with one or two colors. The shape can be a
bell or a triangle.
z In a bell-shaped distribution, the gradient from one color to the next falls at a slow rate,
then increasingly at a larger rate, then drops down to small rate again.

z In a triangular distribution, the gradient from one color to the next rises and falls at the
same rate.

You can also configure the peak and the falloff.


z The peak specifies the offset of the gradient if it has one or two colors.
z The falloff specifies the amplitude of the gradient if it has one or two colors.
Additionally, you can configure the center point of a radial or point based gradient if it is defined by
three colors.
To use a bell-shaped gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Color Distribution Shape area, click Bell. The new gradient appears in the New color box
on the right of the dialog box.
c. Click OK.
To use a triangular gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Color Distribution Shape area, click Triangular. The new gradient appears in the New
color box on the right of the dialog box.
c. Click OK.

Wonderware Training
Section 1 – Managing Symbols 5-57

To set the peak of a gradient with one or two colors


a. In the Style Selection dialog box, click the Gradient tab.
b. In the Color Distribution Shape area, do one of the following:
z Use the Peak slider to specify the peak.
z In the Peak box, type a value from 0 to 100.
The new gradient appears in the New color box on the right of the dialog box.
c. Click OK.
To set the falloff of a gradient with one or two colors
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Color Distribution Shape area, do one of the following:
z Use the Falloff slider to specify the peak.
z In the Falloff box, type a value from 0 to 100.
The new gradient appears in the New color box on the right of the dialog box.
c. Click OK.
To set the center point of a radial or point based gradient with three colors
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Color Distribution Shape area, do one of the following:
z Use the Center slider to specify the peak.
z In the Center box, type a value from 0 to 100.
The new gradient appears in the New color box on the right of the dialog box.
c. Click OK.

Setting the Focus Scales of a Gradient


You can set the focus scales of a radial or point based gradient. The focus scales acts as a
magnification of the gradient. You can set the width or the height of the focus scales.

Width Height Appearance

0 0

50 0

0 50

50 50

You can also lock the width and the height.

InTouch® 10.0 New Features and ArchestrA Graphics


5-58 Module 5 – Symbol Creation and Editing

To set the width of the focus scales for a gradient


a. In the Style Selection dialog box, click the Gradient tab.
– Intentionally
b. In the Focus Scales area, do one left
of the following: blank –
z Use the Width slider to specify the width.
z In the Width text box, type a width value.
The new gradient appears in the New color box on the right of the dialog box.
c. Click OK.
To set the height of the focus scales for a gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. In the Focus Scales area, do one of the following:
z Use the Height slider to specify the height.
z In the Height text box, type a height value.
The new gradient appears in the New color box on the right of the dialog box.
c. Click OK.
To lock the width and the height of the focus scales for a gradient
a. In the Style Selection dialog box, click the Gradient tab.
b. Click Lock Width = Height. The width and height are set equal. When you make changes to
the width or the height, they are set equal to each other.
c. Click OK.

Setting a Pattern
You can set a pattern for an element. The following table describes the pattern options:

Pattern Options
Horizontal Simple, Light, Narrow, Dark, Dashed
Vertical Simple, Light, Narrow, Dark, Dashed
Percent 05, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90
Grid Small, Large, Dotted
Checker Board Small, Large
Diagonals Forward, Backward, Dashed Upward/Downward, Light/Dark/Wide
Upward/Downward
Diamond Dotted, Outlined, Solid
Cross Diagonal
Brick Horizontal, Diagonal
Confetti Small, Large
Others Zig Zag, Wave, Weave, Plaid, Divot, Shingle, Trellis, and Sphere

Patterns consist of the foreground color and the background color that you can change.

Wonderware Training
Section 1 – Managing Symbols 5-59

To set a pattern
a. In the Style Selection dialog box, click the Pattern tab.

b. Select a pattern. The new pattern appears in the New color box on the right of the dialog box.
c. If you want to change the foreground color of the pattern, click the Foreground color selection
box. The Style Selection dialog box appears. Select a solid color and click OK.
d. If you want to change the background color of the pattern, click the Background color selection
box. The Style Selection dialog box appears. Select a solid color and click OK.
e. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


5-60 Module 5 – Symbol Creation and Editing

Setting a Texture
Textures are images you can use as styles for lines, fills and text. You can stretch the image or tile
the image across the entire element to be filled.
To set a texture
a. In the Style Selection dialog box, click the Textures tab.

b. Click Select Image. The Open dialog box appears. You can import the following image
formats: .BMP, .GIF, .JPG, .JPEG, .TIF, .TIFF, .PNG, .ICO, .EMF. Animated GIF images are
not supported.
c. Browse to and select an image file and click Open. The new pattern appears in the New color
box on the right of the dialog box.
d. Configure the size mode. Do one of the following:
z Click Tile to create a pattern that repeats itself.
z Click Stretch to enlarge (or shrink) the pattern across the selected element.
e. Click OK.

Wonderware Training
Section 1 – Managing Symbols 5-61

Setting the Style to No Fill


You can set the style to “No Fill”. For example if you set the fill style of a rectangle element to No
Fill, the background of the rectangle appears transparent.
To set the No Fill style
a. In the Style Selection dialog box, click the No Fill tab.

The No Fill style appears as a red cross-through line in the New color box on the right of the
dialog box.
b. Click OK.

Setting the Transparency of a Style


You can set the transparency of a solid color, gradient, pattern, or texture.
To set the transparency of a style
a. Open the Style Selection dialog box.

b. At the bottom of the dialog box, do one of the following:


z Drag the Transparency slider handle.
z In the Transparency text box, type a percentage value.
The new style appears in the New color box.
c. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


5-62 Module 5 – Symbol Creation and Editing

Setting the Transparency Level of an Element


You can set the transparency level of an element. Levels range from 0% (opaque) to 100%
(transparent).
Transparency of a group of elements behaves in a special way.

To set the transparency level of an element


a. Select one or more elements.
b. On the Format menu, click Transparency.

c. To use a predefined level, select it from the list.


d. To use a different level, click More Transparency Levels.
The Select Transparency Level dialog box appears. Type a transparency level in the
Transparency text box or use the slider to select a transparency level. Click OK.

Note: You can also set the transparency level by changing the Transparency property in the
Properties Editor.

Tweaking the Colors and Transparency of a Gradient


You can easily change the colors and transparency of an element with a gradient style.
For example, you can create pipes with a gradient style of different colors. You can change the
pipe color, but still keep the 3-D appearance.
You do this in the Properties Editor using the Color1, Color2, Color3, and Transparency sub-
properties.

Wonderware Training
Section 1 – Managing Symbols 5-63

To tweak the colors and transparency of a gradient


a. Select the element for which you want to change colors or transparency.
b. In the Properties Editor, locate the appropriate style setting. This can be:
z FillColor
z LineColor
z TextColor
z UnFillColor
c. Click the + icon to expand the property. The Color1, Color2, Color3, and Transparency sub-
properties are shown.
d. Do one of the following:
z Click the color box of one of the color sub-properties.
z Type a new value for the transparency and press Enter. You are done.
e. Click the browse button. The Style Selection dialog box appears.
f. Select a color from the Style Selection dialog box and click OK.
The solid color is applied to the selected element.

Enabling and Disabling Elements for Run-Time Interaction


You can enable or disable elements so that the run time user cannot use any interaction
animations, such as:
z User input.
z Horizontal and vertical sliders.
z Pushbuttons.
z Action scripts.
z Showing and hiding symbols.
Other animations such as horizontal fills and tooltips continue to work as expected.
To enable an element for run-time interaction
a. Select one or more elements you want to enable.
b. In the Properties Editor Runtime Behavior group, set the Enabled property to True.
To disable an element for run-time interaction
a. Select one or more elements you want to disable.
b. In the Properties Editor Runtime Behavior group, set the Enabled property to False.

InTouch® 10.0 New Features and ArchestrA Graphics


5-64 Module 5 – Symbol Creation and Editing

Changing the Visibility of Elements


You can configure elements to be hidden or shown at run time.
The visibility of an element does not affect its animations. Even when an element is invisible, its
animations continue to be evaluated.
To configure an element to be shown at run time
a. Select one or more elements you want to have shown at run time.
b. In the Properties Editor Runtime Behavior group, set the Visible property to True.
To configure an element to be hidden at run time
a. Select one or more elements you want to have hidden at run time.
b. In the Properties Editor Runtime Behavior group, set the Visible property to False.

Editing the Tab Order of an Element


You can configure the elements on the canvas so that at run time you can use the tab key to put
each element in focus in a specified sequence. This sequence is called the tab order.
By default, when you place elements on the canvas, they have a tab order number of 0. Elements
with the same tab order number are placed into focus by tabbing at run time according to their z-
order. This means they are tabbed through at run time according to their position in the Elements
List.
You can override the tab order by assigning a unique index number to the TabOrder property of
each element.
Lower tab order numbers take precedence over higher tab order numbers. You must change this
value to determine the tab order sequence.

You must also make sure that the TabStop property of each element is set to true. When the
TabStop property is set to true, you can use the tab key at run time to switch to the selected
element.
To edit the element’s tab order
a. Select the element for which you want to set the tab order.
b. In the Properties Editor, ensure that the TabStop property is set to True.
c. Type a unique value for the TabOrder property.

Wonderware Training
Section 1 – Managing Symbols 5-65

Using the Format Painter to Format Elements


You can apply formatting of one element to other elements quickly by using the format painter.
You can apply the format of one element:
z One time to other elements.
z In repetitive mode to other elements.
When you use the format painter, it copies the following formats of the element if applicable for the
target element(s):
z Font family, size, and style
z Text style, alignment, and word wrap settings
z Line style, weight, pattern, and ends
z Transparency
z Fill style, orientation, behavior, horizontal percent fill, and vertical percent fill
z Unfilled style
z Horizontal and vertical direction properties
You cannot use the format painter for:
z The status element.
z An element that is part of a path.
z Groups of elements.
z Elements in different hierarchy groups.

To copy the format of an element one time


a. Select the element with the format you want to copy.
b. On the Edit menu, click Format Painter. The pointer appears as the format painter cursor.
c. Select the element you want to apply the format to. The format is applied to the clicked
element.

InTouch® 10.0 New Features and ArchestrA Graphics


5-66 Module 5 – Symbol Creation and Editing

To copy the format of an element in repetitive mode


a. Select the element with the format you want to copy.
b. On the toolbar, double-click the Format Painter icon. The pointer appears as the format painter
cursor.
c. Click each element you want to apply the format to. The format is applied to the clicked
element.
d. Repeat Step 3 for any other elements you want to apply the format to.
e. When you are done, press the Escape key.

Editing the General Properties of a Symbol


You can configure the general properties of a symbol. The general properties determine the
overall appearance and behavior of the symbol. You can:
z Add a meaningful description to your symbol.
z Enable anti-aliasing, or smoothing, for your symbol to improve its appearance. The anti-
aliasing filter essentially blurs the elements slightly at the edges.

z Allow or prevent the opening of more than one symbol or display from a symbol. One
example is a symbol with multiple Show Symbol animations. If this option is enabled, you
can open more than one pop-up and each pop-up is modeless.
To edit the description of a symbol
a. Click on the canvas so that no elements are selected.
b. In the Properties Editor, type a meaningful description for the Description property.
To use smoothing (anti-aliasing) for a symbol
a. Click on the canvas so that no elements are selected.
b. In the Properties Editor, select True for the Smoothing property.

Wonderware Training
Section 1 – Managing Symbols 5-67

To allow multiple pop-ups for a symbol


a. Click on the canvas so that no elements are selected.
b. In the Properties Editor, select True for the MultiplePopupsAllowed property.

Setting Symbol and Element-Specific Properties


You can configure symbol-specific and element-specific properties.
You can configure:
z General properties of a symbol.
z Radius of rounded rectangles.
z Shape and end appearance of lines and H/V lines.
z Auto-sizing and word-wrapping in text boxes.
z Image-specific properties.
z Button-specific properties.
z Control points and tension in curves.
z Angles in pies, chords, and arcs.
z Status elements.
z Windows common controls.

Setting the Radius of Rounded Rectangles


You can specify the radius, in pixels, of the corners of rounded rectangles. The radius determines
their “roundness”. You can:
z Enlarge or reduce the radius of the rounded rectangle on the fly. The easiest way to do
this is with the keyboard.
z Set the radius of the rounded rectangle to a specific value using the Properties Editor.

Rounded rectangles maintain their radius when their size is changed. If the symbol containing
rounded rectangles is embedded into an InTouch window and resized, the radius is not affected.
This can have adverse affects on the graphic representation of your symbol.
To enlarge the radius of a rounded rectangle
a. Select one or more rounded rectangles on the canvas.
b. Press and hold Shift and the + key on the numeric keypad.
The radius is enlarged, and the rounded rectangle becomes more round.
To reduce the radius of a rounded rectangle
a. Select one or more rounded rectangles on the canvas.

InTouch® 10.0 New Features and ArchestrA Graphics


5-68 Module 5 – Symbol Creation and Editing

b. Press and hold Shift and the minus (-) key on the numeric keypad.
The radius is reduced, and the rounded rectangle becomes more rectangular.
To set the radius of a rounded rectangle exactly
a. Select one or more rounded rectangles on the canvas.
b. In the Properties Editor, change the value for Radius property and press Enter. The selected
rounded rectangles are updated accordingly.

Setting Line End Shape and Size


You can set the line end shape and size for any element that contains open lines such as lines, H/
V lines, polylines, curves, and arcs.
For a line end, you can set the shape to be an arrowhead, diamond, circle, or square. You can set
the size if the line end shape is an arrowhead.

To set the line end shape


a. Select one or more elements.
b. On the Format menu, click Line Ends.

c. To use a predefined line end shape, select it from the list.


d. To use another line shape, click More Line Options. The Select Line Options dialog box
appears. Do the following:

z In the Line Start list, click a shape for the start of the line.
z In the Line End list, click a shape for the end of the line.
z Click OK.
To set the size of the line arrowheads
a. 1 Select one or more open line elements.

Wonderware Training
Section 1 – Managing Symbols 5-69

b. On the Format menu, click More Line Options. The Select Line Options dialog box appears.
c. Select a size on the Line Start Size list if the line starts with an arrowhead. Valid sizes are: XX
Small, X Small, Small, Medium Small, Medium, Medium Large, Large, X Large, XX Large.
d. Select a size on the Line End Size list if the line ends with a shape.
e. Click OK.

Note: You can also set the line end shapes by changing the StartCap and EndCap properties
in the Properties Editor.

Setting Auto Scaling and Word Wrapping for a Text Box


You can configure a text box to auto scale the text or to word wrap the text within the text box.

z For auto scaling, the text is resized to fit the text box.
z For word wrapping, the text in a text box continues in the next line.
To auto scale the text in a text box
a. Select one or more text boxes.
b. In the Properties Editor, set the AutoScale property to true.
To word wrap the text in a text box
a. Select one or more text boxes.
b. In the Properties Editor, set the WordWrap property to true.

Using Images
You can place images on the canvas. This is a two step process:
a. Draw a frame which specifies the target size of the image.
b. Import the image from an image file.
After you place an image on the canvas, you can:
z Set the display mode (ImageStyle).
z Set the image alignment (ImageAlignment).
z Set the transparency color (HasTransparentColor, TransparentColor properties).
z Open the image in an image editing application.
z Select a different image for the image element.

InTouch® 10.0 New Features and ArchestrA Graphics


5-70 Module 5 – Symbol Creation and Editing

Placing an Image on the Canvas


You can place an image on the canvas. The image data must come from an image file. You can
import the following image formats: .BMP, .GIF, .JPG, .JPEG, .TIF, .TIFF, .PNG, .ICO, .EMF.
You cannot use animated GIF images.
To place an image on the canvas
a. In the Tools panel, select the image icon.
b. Click the canvas where you want to place the image and drag the mouse to draw a rectangle
that will contain your image.
c. Release the mouse button. The Open dialog box appears.
d. Browse to and select an image file, and then click Open. The image is loaded into the image
frame. If the image frame is smaller than the image, the image is cropped to fit into the frame.
If the image frame is larger than the image, the image appears in its original size.

Setting the Image Display Mode


You can set the way the image appears on the canvas.
z In normal mode, the image is not stretched or tiled. You can resize the image frame with
the resizing handles.
z In stretch mode, the image is stretched so that it fills its frame.
z In tile mode, the image is repeated so that a tiled pattern that fills its frame is created.
z In auto mode, the image frame is enlarged or reduced to the image size. The resizing
handles are locked. When the image style of an image element is Auto, you cannot
change its size.
To stretch an image to the image frame
a. Select the image element you want to stretch.
b. In the Properties Editor, select ImageStyle.
c. In the list, click Stretch. The image is stretched to the image frame.

To tile an image in an image frame


a. Select the image element you want to tile.
b. In the Properties Editor, select ImageStyle.
c. In the list, click Tile. The image is tiled to fill the image frame.

Wonderware Training
Section 1 – Managing Symbols 5-71

To set an image frame size to its image size


a. Select the image element you want to adjust.
b. In the Properties Editor, select ImageStyle.
c. In the list, click Auto. The image frame is enlarged or reduced to the image size.

Setting the Image Alignment


The image alignment specifies where the image appears in an image frame. By default, images
appear in the center of the image frame. You can change this setting to one of the following:
z Top left, top center, or top right
z Middle left, center, or middle right
z Bottom left, bottom center, or bottom right

Note: You can also set the image alignment in the ImageAlignment property in the Properties
Editor.

To set the image alignment


a. Select the image element with the image you want to align.
b. In the Properties Editor, select ImageAlignment.
c. In the list, click one of the following options: TopLeft, TopCenter, TopRight, MiddleLeft,
Centers, MiddleRight, BottomLeft, BottomCenter or BottomRight. The image is aligned
accordingly in the image frame.

InTouch® 10.0 New Features and ArchestrA Graphics


5-72 Module 5 – Symbol Creation and Editing

Setting the Image Color Transparency


Image color transparency lets you define a certain color within an image to be partially or entirely
transparent. When you configure image transparency, you must:
z Enable color transparency for images.
z Specify the color that is to be used for transparency.
Setting the image color transparency is different than setting the transparency of the image
element, as it only applies to one color. Image transparency applies to the entire image.
To enable image color transparency
a. Select the image element.
b. In the Properties Editor, select HasTransparentColor.
c. In the list, click True.
To set the transparency color for an image
a. Select the image element.
b. On the Edit menu, click Select Image Transparent Color. The pointer becomes a color picker.
c. Click the color you want to use as the transparency color. The image is updated with the new
transparency color.

Note: You can also select a transparency color with the TransparentColor property in the
Properties Editor.

Editing the Image


You can edit the image in an image element by opening it in an image editing application.
You can specify the image editor by changing the designer preferences.

To edit an image
a. Select the image element with the image you want to edit.
b. On the Edit menu, click Edit Image. The image is opened with the associated image editing
application.
c. Make changes to the image as needed, save the image and close the image editing
application. The image is updated on the canvas.

Wonderware Training
Section 1 – Managing Symbols 5-73

Setting the Image Editing Application


You can specify the image editor that opens when you select it edit an image.
You can select a currently registered image editing application or add one.
To set the image editing application
a. On the Special menu, click Preferences. The Designer Preferences dialog box appears.

b. Select an image editor from the Image Editor list.


To add an image editing application
a. On the Special menu, click Preferences. The Designer Preferences dialog box appears.
b. In the Image Editor list, click Choose Custom Editor. The Select Image Editing Application
dialog box appears.

c. Browse to and select the executable of the image editing application and click Open. The
image editor is added to the list.

InTouch® 10.0 New Features and ArchestrA Graphics


5-74 Module 5 – Symbol Creation and Editing

Selecting a Different Image


You can change the current image of an image element by selecting a new image.
To select a different image
a. Select the image element with the image you want to change.
b. On the Edit menu, click Select Image. The Open dialog box appears.
c. Browse to and select an image file, and then click Open. The image is loaded into the image
frame.

Note: You can also select a different image by clicking the browse button in the Image
property in the Properties Editor.

Using Buttons
You can use buttons in ArchestrA Symbols. Buttons show a text caption or an image. If they show
a text caption, you can:
z Automatically scale the font size
z Configure the text to wrap within the button

Automatically Scaling Text in Buttons


You can automatically scale text so that the font size is adapted to the button size.
To automatically scale text in buttons
a. Select the button element on the canvas.
b. In the Properties Editor, set the AutoScale property to True.

Wrapping Text in Buttons


You can wrap text in buttons.
To wrap text in buttons
a. Select the button element on the canvas.
b. In the Properties Editor, set the WordWrap property to True.

Wonderware Training
Section 1 – Managing Symbols 5-75

Configuring Buttons with Images


You can use buttons with an image in ArchestrA Symbols.
z The “up” image is the image that appears when the button is released at run time
z The “down” image is the image that appears then the button is pressed at run time
You can edit an up image or a down image after you assign it to a button.
To use a down image or up image on a button
a. Select the button element on the canvas.
b. In the Properties Editor, select Image in the property ButtonStyle list.
c. Click the browse button of the UpImage property and select an image in the Open dialog box.
This is the image that appears on the button by default and also when the button is released.
d. Click the browse button of the DownImage property and select an image in the Open dialog
box. This is the image that appears on the button when the button is clicked on.
To edit an up image or a down image of a button
a. Right-click the button element on the canvas. The context menu appears.
b. Click Edit Button Image, then click one of the following:
z Edit Up Image
z Edit Down Image
The up image or down image is opened in the default image editor.
c. Edit the image.
d. Save the image and close the image editor. The up image or down image is updated.

Editing Control Points


Control points determine the shapes of polylines, polygons, curves, and closed curves. To change
the shape of these elements after they have been placed on the canvas, you can:
z Move individual control points.
z Add or remove control points.

InTouch® 10.0 New Features and ArchestrA Graphics


5-76 Module 5 – Symbol Creation and Editing

Moving Control Points


After you place a polyline, polygon, curve, or closed curve on the canvas, you can change its
shape by editing its control points.
To move the control points of a polyline, polygon, curve, or closed curve
a. Select the polyline, polygon, curve, or closed curve.
b. On the Edit menu, click Edit Control Points. The control points of the element are shown.

c. Click a control point you want to change and drag it to the new location. The element is
updated accordingly.
d. Repeat the previous step for all control points you want to change.

Adding and Removing Control Points


You can add or remove control points from polylines, polygons, curves, and closed curves.

To add control points to a curve or closed curve


a. Select the curve or closed curve.
b. On the Edit menu, click Edit Control Points. The control points of the element are shown.
c. Press and hold the Shift key.
d. Move the mouse over the curve or closed curve at the point you want to add a control point.
The pointer appears as a pen with a plus symbol.
e. Click the curve or closed curve. The control point is added to the curve or closed curve.
f. Repeat the last step for any other control points you want to add.
g. When you are done, release the Shift key.

To delete control points from a curve or closed curve


a. Select the curve or closed curve.
b. On the Edit menu, click Edit Control Points. The control points of the element are shown.
c. Press and hold the Shift key.
d. Move the mouse over the control point you want to remove. The pointer appears as a pen with
a minus symbol.
e. Click the control point. The control point is removed from the curve or closed curve.
f. Repeat the last step for any other control points you want to remove. You must have at least
two control points.
g. When you are done, release the Ctrl key.

Wonderware Training
Section 1 – Managing Symbols 5-77

Changing the Tension of Curves and Closed Curves


After you place a curve or a closed curve, you can change its tension. The tension specifies how
tightly the curve bends through the control points. Valid range are float values from 0 (tightly) to 2
(loosely).

Note: You can also change the tension of a curve or closed curve by changing the value for the
Tension property in the Properties Editor.

To edit the tension of a curve or closed curve


a. Select the curve or closed curve.
b. In the Properties Editor, type a float value from 0 to 2 for the Tension property.

Changing Angles of Arcs, Pies and Chords


After you place an arc, pie, or chord, you can change the start angle and sweep angle of these
elements.
You can change the angles to any integer degree from 0 to 359. When you change the angles, you
can press the Shift and Ctrl key to make the angle snap to multiples of 15 or 45 degrees.
You can also move the start angle and sweep angle at the same time. The object appears to be
“rotated” around its arc/pie/chord center point while keeping the same center point angle.

Note: You can also change the start or sweep angle of an arc, pie or chord in the StartAngle or
SweepAngle properties in the Properties Editor.

InTouch® 10.0 New Features and ArchestrA Graphics


5-78 Module 5 – Symbol Creation and Editing

To change the start or sweep angle of an arc, pie, or chord


a. Select the arc, pie, or chord.
b. On the Edit menu, click Edit Start and Sweep Angles. The start and sweep angle handles
appear on the selected element.

c. If you want to the angle to be multiples of 15 degrees, press and hold the Shift key.

d. If you want to the angle to be multiples of 45 degrees, press and hold the Ctrl key.

e. Grab the start angle or the sweep angle handle and drag it to the new location. The element is
updated accordingly.

Wonderware Training
Section 1 – Managing Symbols 5-79

To change the start and sweep angle of an arc, pie, or chord together
a. Select the arc, pie, or chord.
b. On the Edit menu, click Edit Start and Sweep Angles. The start and sweep angle handles
appear on the selected element.
c. Select the start angle or the sweep angle handle and keep the mouse button down.
d. Press and hold the Alt key.
e. If you want additionally either angles to be multiples of 15 degrees, press and hold the Shift
key.
f. If you want additionally either angles to be multiples of 45 degrees, press and hold the Ctrl
key.
g. Drag the mouse. The start angle and sweep angle are changed accordingly.

h. When you are done, release the mouse button and then any keys.

InTouch® 10.0 New Features and ArchestrA Graphics


5-80 Module 5 – Symbol Creation and Editing

Organizing Symbols in the Toolbox


In the Graphic Toolbox, you can organize your symbols by creating a folder hierarchy as you
would with files and folders in Microsoft Explorer. You can move symbols around within the folder
hierarchy. These folders are called Graphic Toolsets.

Creating Graphic Toolsets in the Toolbox


You can create Graphic Toolsets in the Graphic Toolbox to organize your symbols. For example
you can create a Graphic Toolset called “Valves” to store all different types of valve symbols.
To create a Graphic Toolset in the Toolbox
a. Open the Graphic Toolbox.
b. Select either the Graphic Toolset under which you want to create a new Graphic Toolset or
the Galaxy name if there are currently no Graphic Toolsets.
c. On the Galaxy menu, point to New, and then click Graphic Toolset.
A new Graphic Toolset is created with a default name.
d. Rename the new Graphic Toolset as desired.

Moving Symbols between Graphic Toolsets


You can move symbols from one Graphic Toolset in the Graphic Toolbox to another. Moving
symbols between Graphic Toolsets does not affect the functionality of any of its child symbols.
To move symbols between Graphic Toolsets in the Toolbox
a. Open the Graphic Toolbox.
b. Locate the symbol you want to move.
c. Drag the symbol to the Graphic Toolset you want to place it in.
The symbol is moved to the new Graphic Toolset.

Note: To move the symbol to the top level in the Graphic Toolset hierarchy, drag the symbol
to the Galaxy name icon.

Wonderware Training
Section 1 – Managing Symbols 5-81

Renaming Symbols
You can rename a symbol at any time. Renaming a symbol does not affect the functionality of any
its child symbols.

Note: Symbol names must be unique within the whole hierarchy of the Graphic Toolbox.

To rename a symbol in the Toolbox


a. Open the Graphic Toolbox.
b. Select the symbol you want to rename.
c. Click Edit and then Rename.
The symbol name is in edit mode.

d. Type a new unique name for the symbol and press Enter.
The symbol is renamed.

Renaming Graphic Toolsets


You can rename a Graphic Toolset at any time. Renaming a Graphic Toolset does not affect the
functionality of any symbols it contains.
To rename a Graphic Toolset in the Toolbox
a. Open the Graphic Toolbox.
b. Select the Graphic Toolset you want to rename.
c. Click Edit and then Rename.
The Graphic Toolset name is in edit mode.
d. Type a new unique name for the Graphic Toolset and press Enter.
The Graphic Toolset is renamed.

InTouch® 10.0 New Features and ArchestrA Graphics


5-82 Module 5 – Symbol Creation and Editing

Deleting Graphic Toolsets


You can delete a Graphic Toolset in the Graphic Toolbox at any time.

Note: You can only delete Graphic Toolsets that do not contain any symbols. Move the symbols
to another Graphic Toolset or delete them before deleting the Graphic Toolset.

To delete a Graphic Toolset in the Toolbox


a. Open the Graphic Toolbox.
b. Select the Graphic Toolset you want to delete.
c. Click Edit and then Delete.
The Delete Graphic Toolset dialog box appears.

d. Click Yes.
The Graphic Toolset is deleted.

Moving Graphic Toolsets


You can move a Graphic Toolset within the Graphic Toolset hierarchy of the Graphic Toolbox. If
you move a Graphic Toolsets, all symbols and Graphic Toolsets it contains are also moved.
To move a Graphic Toolset in the Toolbox
a. Open the Graphic Toolbox.
b. Locate the Graphic Toolset you want to move.
c. Drag it to the Graphic Toolset you want to place it in.
The Graphic Toolset is moved to the new Graphic Toolset.

Note: To move the Graphic Toolset to the top level in the Graphic Toolset hierarchy, drag the
Graphic Toolset to the Galaxy name icon.

Wonderware Training
Section 1 – Managing Symbols 5-83

Customizing Graphic Toolsets


You can hide or show Graphic Toolsets after creating them. You can either do this for selected
Graphic Toolsets or for all Graphic Toolsets.
To customize Graphic Toolsets
a. Open the Graphic Toolbox.
b. Right-click the Galaxy icon in the Graphic Toolbox and
click Customize Toolsets from the context menu.
The Customize Toolsets dialog box appears.

c. To hide Graphic Toolsets, clear the check box next to the Toolsets you want to hide.
d. To show Graphic Toolsets, check the check box next to the Toolsets you want to show.
e. To select or unselect all Toolsets, click the Check All or Uncheck All buttons.
f. When you are done, click Close.
The selected Graphic Toolsets are either shown or hidden depending on your settings.

InTouch® 10.0 New Features and ArchestrA Graphics


5-84 Module 5 – Symbol Creation and Editing

Creating Symbols in Automation Object Templates


You can create a symbol from the Graphics Tab in an Automation Object template. Creating a
symbol this way automatically associates the new symbol with the Automation Object.
To create a new symbol for an Automation Object template
a. Open an Automation Object template.
Click the Graphics tab.
Any local and inherited symbols are listed.

b. Click the New Symbol icon.


Give the new symbol a name. Names must be unique.
Valid characters for symbol names include alphanumeric characters, $, # and _ (underscore).
Symbol names cannot include spaces and the symbol name cannot begin with the $
character.
c. If required, type the description of the symbol in the Description box.

Wonderware Training
Section 1 – Managing Symbols 5-85

d. Click the symbol name and click Open.


The ArchestrA Symbol Editor opens.

e. Now you can draw your symbol.


For specific information about using the drawing tools, see Creating and Managing ArchestrA
Graphics User’s Guide Chapter 5 - Working with Graphic Elements.

InTouch® 10.0 New Features and ArchestrA Graphics


5-86 Module 5 – Symbol Creation and Editing

Creating Symbols in Automation Object Instances


You can create a symbol from the Graphics tab in an Automation Object instance. Creating a
symbol this way automatically associates the new symbol with the Automation Object instance.

Note: Automation Objects can also inherit symbols from their parent template. You can edit an
inherited graphic in the child object. Inherited graphics cannot be removed in the child object.

To create a new symbol for an Automation Object instance


a. Open the Automation Object instance.
Click the Graphics tab.
Any local and inherited symbols are listed.

b. Click the New Symbol icon.


Give the new symbol a name. Names must be unique.
Valid characters for symbol names include alphanumeric characters, $, # and _ (underscore).
Symbol names cannot include spaces and the symbol name cannot begin with the $
character.
c. If required, type the description of the symbol in the Description box.
d. Click the symbol name and click Open.
The ArchestrA Symbol Editor opens.
e. Now you can draw your symbol.
For specific information about using the drawing tools, see Creating and Managing ArchestrA
Graphics User’s Guide Chapter 5 - Working with Graphic Elements.
Your updated symbol is checked in.

Wonderware Training
Section 1 – Managing Symbols 5-87

To edit a symbol contained in an Automation Object


a. Open the Automation Object.
b. Click the Graphics tab.
c. Select the symbol you want to edit and click Open.
The ArchestrA Symbol Editor opens.
d. Now you can edit your symbol. For specific information about using the drawing tools, see
Creating and Managing ArchestrA Graphics User’s Guide Chapter 5 - Working with Graphic
Elements.
e. When you are done, click Save and Close.
The ArchestrA Symbol Editor is closed and the updated symbol is checked in.

Opening Symbols for Editing


You can either start the ArchestrA Symbol Editor from a symbol:
z Contained in the Graphic Toolbox.
z Contained in an Automation object template or instance.
z Inserted in an InTouch window.
When you open a symbol in the ArchestrA Symbol Editor, it is checked-out. No other user can edit
the symbol until you check the symbol in again.

Note: You can open multiple instances of the ArchestrA Symbol Editor at the same time.
However, you cannot edit the same symbol in multiple instances of the ArchestrA Symbol Editor

To edit a symbol in the Graphic Toolbox


a. Open the Graphic Toolbox.
b. Locate the symbol you want to edit by browsing in the Graphic Toolbox.

c. Double-click it.
The ArchestrA Symbol Editor opens.

InTouch® 10.0 New Features and ArchestrA Graphics


5-88 Module 5 – Symbol Creation and Editing

d. Now you can edit your symbol.


For specific information about using the drawing tools, see Creating and Managing ArchestrA
Graphics User’s Guide Chapter 5 - Working with Graphic Elements.
e. When you are done, click Save and Close.
The ArchestrA Symbol Editor is closed and the To edit a symbol that is embedded in an
InTouch window
To edit a symbol that is embedded in an InTouch window
a. In WindowMaker, open the InTouch window that contains the embedded symbol.
b. Right-click the embedded symbol you want to edit.
Select the symbol name.
The ArchestrA Symbol Editor opens.
c. Now you can edit your symbol.
For specific information about using the drawing tools, see Creating and Managing ArchestrA
Graphics User’s Guide Chapter 5 - Working with Graphic Elements.
d. When you are done, click Save and Close.
The ArchestrA Symbol Editor is closed and the updated symbol is checked in.

Note: To leave the symbol checked-out, click Keep Checked Out in the ArchestrA Symbol
Editor. This ensures that no other user can check out your symbol for editing.

Importing and Exporting Symbols as ArchestrA Object Files


You can import and export symbols as ArchestrA Automation object files.
When you export (or import) templates or instances that contain symbols, the symbols are
exported (imported) with the template or instance.
When you export (import) all automation objects, the contained symbols and the symbols in the
graphic toolsets are also exported (imported).
When you export an Automation object A that contains symbols, if these symbols:
z contain embedded symbols from the Graphic Toolbox, these symbols are exported along
with the symbols associated with the Automation object.
z contain embedded graphics from other Automation objects, these symbols (including any
embedded symbols from the Graphic Toolbox contained in them) and their parent
Automation object are not exported with Automated object A. They remain as references,
and upon import, the system tries to reestablish the connection with those exact
references in the target Galaxy.

Wonderware Training
Section 1 – Managing Symbols 5-89

Importing Symbols
You can import symbols and graphic toolsets from a symbol .aaPKG file.
To import symbols from a symbol .aaPKG file
a. On the Galaxy menu, point to Import, and then click Object(s).
The Import Automation Object(s) dialog box appears.
b. Select one or more symbol .aaPKG files you want to import and click Open.
The Import Preferences dialog box appears.
c. Select the appropriate options for the object version mismatch and object name conflict and
click OK. The symbols and graphic toolsets are imported.
d. Click Close.

Exporting Symbols
You can export symbols to a symbol .aaPKG file.
To export symbols to a symbol .aaPKG file
a. In the Graphic Toolbox, select the symbols that you want to export.
b. On the Galaxy menu, point to Export, and then click Object(s).
The Export Automation Object(s) dialog box appears.
c. Browse to the save location and type a name for the symbol .aaPKG file.
d. Click Save. The symbols and their toolset folders are exported.
e. Click Close.

InTouch® 10.0 New Features and ArchestrA Graphics


5-90 Module 5 – Symbol Creation and Editing

Deleting a Symbol
You can delete a symbol you no longer want. Deleting a symbol removes it completely from the
Industrial Application Server. You can delete a symbol from the Graphic Toolbox or from an
Automation Object in the ArchestrA Symbol Editor.
z When you delete a symbol, you are shown where the symbol is used. This lets you
understand the impact of deleting the symbol before you actually delete it.
z You cannot delete symbols that someone else has open for editing or left checked out.
z If you delete a symbol from an Automation Object, the symbol still appears to other users
until you check in the Automation Object.
z If you delete a symbol that is used in an InTouch window, it is not deleted from that
window. However, the ArchestrA animation links no longer work and you cannot edit the
symbol with the ArchestrA Symbol Editor.
To delete a symbol
a. Do one of the following:
z Open the Graphic Toolbox.
z Open the Automation Object with the symbol you want to delete.
Click the Graphics tab.
b. Select the symbol you want to delete and click Delete.
The Delete confirmation dialog box appears.

c. At the prompt, review the places this symbol is being used, if any.
d. Click Yes. The symbol is deleted.

Note: You can also delete multiple symbols at the same time.

Copying a Symbol

You can copy a symbol by saving it to another location and renaming it.
To copy a symbol:
a. In the Graphic Toolbox, select the symbol you want to copy.
b. On the Edit menu, click Duplicate. A copy of the symbol is created.
c. If needed, type a new name for the symbol.

Wonderware Training
Section 1 – Managing Symbols 5-91

Configuring ArchestrA Security for Symbols


You can set IDE security permissions so that at design time, the user cannot:
z Import or export symbols.
z Create, modify or delete symbols in the Graphic Toolbox.
z Create, modify or delete symbols in any Automation object template.
z Create, modify or delete symbols in any Automation object instance.
z Create, modify or delete View Applications, such as the InTouch View Applications.
z Deploy or undeploy View Applications, such as InTouch View Applications.
z Edit the configuration of the Quality and Status Display.

Note: To restrict a user, the user must be assigned to a role and the permissions must be
assigned to that role. Also security must be enabled. For more information on how to configure
security, users and roles, see the Industrial Application Server User’s Guide.

To configure security for symbols


a. On the Galaxy menu, point to Configure, and then click Security.
The Configure Security dialog box appears.
b. Click the Roles tab. The Roles panel appears.
c. In the Roles available list, click the role you want to assign the permissions to.
d. In the General Permissions list, unfold the Graphic management permissions.
e. If you want to restrict the user from:
z Importing symbols, unselect Can import graphics.
z Exporting symbols, unselect Can export graphics.
z Creating, modifying or deleting symbols within toolsets,
unselect Can Create/Modify/Delete graphics within toolsets.
z Creating, modifying or deleting symbols attached to a template,
unselect Can Create/Modify/Delete attached object graphics in template.
z Creating, modifying or deleting symbols attached to an instance,
unselect Can Create/Modify/Delete attached object graphics in instance.
z Creating, modifying or deleting view applications,
unselect Can Create/Modify/Delete View Applications.
z Deploying and undeploying view applications,
unselect Can Deploy/Undeploy View Applications.
z Accessing the Edit Quality and Status Display configuration,
unselect Can Edit Quality and Status Indicator Configuration.
f. When you are done, click OK.

Note: If the user attempts to export a symbol without appropriate permissions, the message
“User doesn’t have permission to export graphics object” appears.

Note: If the user attempts to import a symbol without appropriate permissions, the message
“User doesn’t have permission to import graphics object” appears.

InTouch® 10.0 New Features and ArchestrA Graphics


5-92 Module 5 – Symbol Creation and Editing

Viewing a Symbol in Read-Only Mode


You can view a symbol in read-only mode if you don’t want to edit it, or if it is checked out by
somebody else.
To view a symbol in read-only mode
a. In the Graphic Toolbox, select the symbol that you want to view in read-only mode.
b. On the Galaxy menu, click Open Read-Only.
The selected symbol opens in the ArchestrA Symbol Editor.

Note: If you open a symbol in read-only mode, you still have access to all functions in the
ArchestrA Symbol Editor that do not change the symbol.

Wonderware Training
Section 2 – Using ArchestrA Symbols in WindowMaker 5-93

Section 2 – Using ArchestrA Symbols in WindowMaker

Section Objectives
z Embed ArchestrA Symbols in InTouch.

You can use ArchestrA Symbols that are created with the ArchestrA Symbol Editor in the IDE in
your IDE-managed InTouch application.

ArchestrA IDE InTouch WindowMaker

InTouchViewApp
IDE-Managed InTouch
Automation Manages
Applications
Object (Template)

Provides
ArchestrA
Symbols InTouch WindowViewer

ArchestrA Symbol Test Application


Editor

Templates and
Instances
IDE-Managed InTouch
Provides Applications
ArchestrA
Symbol Functionality

You can:
z Insert ArchestrA symbols into an InTouch window.
z Configure inserted ArchestrA symbols.
z Start the ArchestrA IDE Symbol Editor.
z Test the ArchestrA Symbols in WindowViewer.
z Create a new Instance of the Automation object that is hosting the inserted ArchestrA
Symbol.

InTouch® 10.0 New Features and ArchestrA Graphics


5-94 Module 5 – Symbol Creation and Editing

Inserting ArchestrA Symbols into an InTouch Window


You can insert an ArchestrA symbol into the InTouch Windows of your IDE-managed InTouch
application.
The ArchestrA symbol may either be part of:
z The Graphic Toolbox.
z An ArchestrA object template.
z An ArchestrA object instance.

Note: You cannot insert ArchestrA Symbols into windows of stand alone InTouch applications.
Instead, convert the IDE-managed InTouch applications to stand alone InTouch applications.
ArchestrA symbols are converted, but can not be edited.

Inserting ArchestrA Symbols from the Graphic Toolbox


You can insert any number of ArchestrA symbols from the Graphic Toolbox.
To insert an ArchestrA symbol from the Graphic Toolbox

a. In WindowMaker, on the Edit menu, click Embed ArchestrA Symbol.


The Galaxy Browser dialog box appears.

b. Click the Graphic Toolbox icon.


The Graphic Toolbox list appears on the left.

c. Select the ArchestrA symbol you want to insert and click OK.
The insertion icon appears if the mouse is over the InTouch window.
d. Click on the InTouch window where you want to insert the ArchestrA symbol.
The object is inserted on the InTouch window.

Wonderware Training
Section 2 – Using ArchestrA Symbols in WindowMaker 5-95

Inserting ArchestrA Symbols from Object Templates


You can insert an ArchestrA symbol from an object template that hosts ArchestrA symbols. At the
same time, a new derived instance of the selected template is created.

Note: To create a new instance based on an ArchestrA symbol already on the InTouch window,
see InTouch ArchestrA Integration Guide - Chapter 3 Using ArchestrA Symbols in WindowMaker -
Testing ArchestrA Symbols in WindowViewer.

To insert an ArchestrA symbol from an object template

a. In WindowMaker, on the Edit menu, click Embed ArchestrA Symbol.


The Galaxy Browser dialog box appears.

b. Click the Template Toolbox icon.


The Template Toolbox list appears on the left.

c. Click on the template that contains the ArchestrA symbol you want to insert.
The ArchestrA symbols that are contained in the selected template appear on the right.
d. Click on the ArchestrA symbol you want to insert and click OK. The Galaxy Browser closes
and the insertion icon appears if the mouse is over the InTouch window.

InTouch® 10.0 New Features and ArchestrA Graphics


5-96 Module 5 – Symbol Creation and Editing

e. Click on the InTouch window where you want to insert the ArchestrA symbol.
The Create Instance dialog box appears.

f. Type a name for the instance and click OK. An object instance is automatically derived from
the object template with the name you specify. The symbol is inserted on the InTouch window.

Inserting ArchestrA Symbols from Object Instances


You can insert ArchestrA symbols from object instances that have ArchestrA symbols associated
with them.

Note: When you insert an ArchestrA symbol from an object instance, the symbol is associated
with that instance.

To insert an ArchestrA symbol from an object instance


a. In WindowMaker, on the Edit menu, click Embed ArchestrA Symbol.
The Galaxy Browser dialog box appears.
b. Click the Instances icon.
The Instances list appears on the left.

c. Click on the instance that contains the ArchestrA symbol you want to insert.
The ArchestrA symbols that are associated with the selected instance appear on the right.
d. Click on the ArchestrA symbol you want to insert and click OK. The Galaxy Browser closes
and the insertion icon appears if the mouse is over the InTouch window.
e. Click on the InTouch window where you want to insert the ArchestrA symbol.
The symbol is inserted on the InTouch window.

Wonderware Training
Section 2 – Using ArchestrA Symbols in WindowMaker 5-97

Selecting an Alternate Instance from the Same Parent


You can use this function to redirect all references in the ArchestrA symbol to the alternate
instance. The appearance of the ArchestrA symbol does not change, except possibly for its size,
as it is not possible to edit inherited ArchestrA symbols.

Note: You cannot use this function with ArchestrA symbols that originate from the Graphics
Toolbox, as they are not associated with any object.

To select an alternate instance from the same parent


a. Select the inserted ArchestrA symbol.
b. On the Special menu, point to ArchestrA Graphic Object "name", and then click Select
Alternate Instance. The Galaxy Browser dialog box appears. It shows all other instances
that have the same parent.

c. Select an alternate instance from the list and click OK.


The references of the ArchestrA symbol are updated to point at the new alternate instance.

Note: The size of the ArchestrA symbol on the InTouch window is unchanged.

InTouch® 10.0 New Features and ArchestrA Graphics


5-98 Module 5 – Symbol Creation and Editing

Selecting Alternate Symbols of the Same Instance


You can use this function to replace an inserted ArchestrA symbol with another ArchestrA symbol
belonging to the same instance.

Note: You cannot use this function with ArchestrA symbols that originate from the Graphic
Toolbox, as they are not associated with any object.

To select an alternate ArchestrA symbol from the same instance


a. Select the inserted ArchestrA symbol.
b. On the Special menu, point to ArchestrA Graphic Object "name", and then click Select
Alternate Symbol. The Galaxy Browser dialog box appears.

c. Select an alternate symbol from the window on the right and click OK.
d. If the alternate symbol is a different size than the original symbol, a message appears
prompting if you want to keep the size of the currently inserted ArchestrA symbol.

Either click:
z Yes, to keep the current size of the selected ArchestrA symbol.
z No, to update the size of the selected ArchestrA symbol to the size of the new ArchestrA
symbol.
In both cases, the inserted ArchestrA symbol is updated with the new alternate ArchestrA
symbol.

Substituting Strings in an ArchestrA Symbol


You can substitute all strings in an inserted ArchestrA Symbol with alternate strings.
To substitute all strings in an inserted ArchestrA symbol
a. Select the inserted ArchestrA symbol.
b. On the Special menu, point to Substitute, and then click Substitute Strings.
The Substitute Strings dialog box appears.
c. Type new strings in the corresponding boxes and click OK.
The strings in the inserted ArchestrA symbol are substituted by the new alternate strings.

Wonderware Training
Section 2 – Using ArchestrA Symbols in WindowMaker 5-99

Substituting References in an ArchestrA Symbol


You can substitute all references in an inserted ArchestrA Symbol with alternate references.
To substitute all references in an inserted ArchestrA symbol
a. Select the inserted ArchestrA symbol.
b. On the Special menu, click Substitute Tags.
The Substitute Tags dialog box appears.
c. Type new references in the corresponding boxes and click OK.
The references in the inserted ArchestrA symbol are substituted by the new alternate
references.

Resizing the Inserted ArchestrA Symbol to its Original Size


You can resize the inserted ArchestrA Symbol to its original size when created in the ArchestrA
Symbol Editor.
To resize an inserted ArchestrA symbol to its original size
a. Select the inserted ArchestrA symbol you want to change to its original size.
b. On the Special menu, point to ArchestrA Graphic ‘name’, and then click Symbol - Original
Size. The inserted ArchestrA symbol is changed to its original size.

Enabling or Disabling Dynamic Size Change of Inserted ArchestrA Symbols


You can enable or disable the dynamic size change of inserted ArchestrA symbols.
If the dynamic size change is enabled, any changes to the absolute anchor point position of the
parent symbol:
z Leave the anchor points of its child symbols unchanged.
z Move the child symbol position accordingly.
If the dynamic size change is disabled, any changes to the absolute anchor point position of the
parent symbol:
z Move the anchor points of its child symbols accordingly.
z Leave the child symbol position unchanged.

Note: For more information about dynamic size propagation, see Creating and Managing
ArchestrA Graphics User’s Guide.

To enable or disable dynamic size change of an inserted symbol


a. Select the inserted ArchestrA symbol.
b. On the Special menu, point to ArchestrA Graphic ‘name’, then check or uncheck Dynamic
Size Propagation.

InTouch® 10.0 New Features and ArchestrA Graphics


5-100 Module 5 – Symbol Creation and Editing

Editing ArchestrA Symbols in the ArchestrA Symbol Editor


You can edit inserted ArchestrA symbols with the ArchestrA Symbol Editor that is integrated in the
ArchestrA IDE. This is done in two steps:
a. Open the inserted ArchestrA symbol in ArchestrA Symbol Editor, modify the symbol and
save it. The ArchestrA symbol is updated in object template, instance or in the Graphic
Toolbox.

b. Accept the changes in WindowMaker by clicking on the Symbol Changed icon in the
status bar. The changes are then propagated to WindowMaker.

Editing an Inserted ArchestrA Symbol


You can easily edit an inserted ArchestrA symbol from within InTouch WindowMaker.
If the symbol or its children are used by other IDE-managed InTouch applications, the changes are
propagated to the children and the InTouch applications.

Note: Any changes you make to the ArchestrA symbol are not propagated to the inserted
ArchestrA symbol automatically. For more information, see Creating and Managing ArchestrA
Graphics User’s Guide - Using IDE-Managed Intouch Application at Runtime - Accepting Symbol
Changes in WindowMaker.

To edit inserted ArchestrA symbols with the ArchestrA Symbol Editor


a. Select the inserted ArchestrA symbol.
b. On the Special menu, point to ArchestrA Graphic Object "name",
and then click Edit Symbol.
The ArchestrA Symbol Editor with the ArchestrA symbol appears.

c. Edit the ArchestrA symbol.


For more information, see the Creating and Managing ArchestrA Graphics User’s Guide.
d. When you are done, click Close and Save.
The changes are saved and the ArchestrA Symbol Editor closes.
e. If the ArchestrA object is hosted by an object instance or object template, save and close the
object editor in the IDE.

Wonderware Training
Section 2 – Using ArchestrA Symbols in WindowMaker 5-101

Accepting Symbol Changes in WindowMaker


After an ArchestrA symbol has changed and you are currently using it in WindowMaker, you can
accept the change in WindowMaker.
To accept symbol changes in WindowMaker
Either:

z Double-click the Symbol Changed icon in the status bar.


z Close the InTouch window containing the inserted ArchestrA symbol and open it again.
z Switch to WindowViewer using the Fast Switch (Runtime button).
In all cases the changes made to the ArchestrA symbol are reflected in the inserted symbol in the
InTouch window.

InTouch® 10.0 New Features and ArchestrA Graphics


5-102 Module 5 – Symbol Creation and Editing

Accepting Symbol Changes in WindowViewer


After an ArchestrA symbol has changed and you are currently testing it in WindowViewer, you can
accept the change in WindowViewer.
For more information about testing inserted ArchestrA symbols, see InTouch ArchestrA Integration
Guide - Chapter 3 Using ArchestrA Symbols in WindowMaker - Testing ArchestrA Symbols in
WindowViewer.
To accept symbol changes in WindowViewer when testing
Either:
z Fast-switch to WindowMaker and then back to WindowViewer.
z Close the InTouch window and open it again.
In both cases the changes made to the ArchestrA symbol are reflected in the inserted ArchestrA
symbol in the InTouch window.

Testing ArchestrA Symbols in WindowViewer


You can test the inserted ArchestrA symbol in an InTouch window without having to derive an
InTouchViewApp instance. You can test an inserted ArchestrA symbol, if you have previously:
z Created an ArchestrA symbol in the Graphic Toolbox,
in an automation object template or automation object instance.
z Created an IDE-managed InTouch application.
z Inserted the ArchestrA symbol in the IDE-managed InTouch application.

Development and Testing Process of


ArchestrA Symbols

ArchestrA Symbol Editor

Modify
Create
ArchestrA
ArchestrA
Symbol and
Symbol
Save

WindowMaker

Insert
ArchestrA Accept
Symbol into Changes in
InTouch WindowMaker
Window

WindowViewer

Test ArchestrA
Fast Switch to Fast Switch to
Symbol in
WindowViewer WindowMaker
WindowViewer

Wonderware Training
Section 2 – Using ArchestrA Symbols in WindowMaker 5-103

To test inserted ArchestrA symbols in WindowViewer


a. From WindowMaker, click Runtime to switch to WindowViewer.
b. Test the animations, behavior and appearance of the inserted symbol(s) as you would with a
normal run-time environment.

Note: You can fast-switch back to WindowMaker to make changes to the way the ArchestrA
symbol is inserted.

To change and test inserted ArchestrA symbols in WindowViewer


a. Make changes to the ArchestrA symbol in the IDE.
b. Save the changes. If WindowViewer is:
z Open then after a short while, a message appears in WindowViewer asking you to accept
the changes. Click Yes.
z Closed then you can fast-switch from WindowMaker to WindowViewer to see your
changes.

Note: After you have made changes to an ArchestrA symbol and saved it, it is faster to close
WindowViewer and to re-open WindowViewer than to wait for the changes to propagate to the
open WindowViewer session.

Creating a New Automation Instance


You can quickly create a new instance of the Automation object that hosts a currently embedded
ArchestrA Symbol.This saves you the trouble of switching to the ArchestrA IDE and deriving an
instance.
The new instance is unassigned, so you need to assign and deploy it in the ArchestrA IDE before
you can use it.

Note: You can only create new object instances for ArchestrA symbols that are hosted by
templates or instances. ArchestrA symbols that are in the Graphic Toolbox do not have this
functionality.

To create a new automation instance


a. Select the inserted ArchestrA symbol.
b. On the Special menu, point to ArchestrA Graphic Object "name",
and then click New Instance.
The Create Instance box dialog box appears.

c. Type a name for the instance and click OK.


An object instance is automatically derived from the object template with the name you
specify.

InTouch® 10.0 New Features and ArchestrA Graphics


5-104 Module 5 – Symbol Creation and Editing

– Intentionally left blank –

Wonderware Training
Lab 2 – Creating and Embedding Symbols 5-105

Lab 2 – Creating and Embedding Symbols


Introduction
In the last lab, you created a new Galaxy, and then in the IDE created new InTouch applications by
using the $InTouchViewApp object and by importing an existing application. In this lab, you will
create a new tank symbol in the ArchestrA Symbol editor and embed an ArchestrA symbol in an
InTouch window.

Objectives
Upon completion of this lab, you will be able to:
z Use the new ArchestrA Symbol editor and drawing tools
z Create a new ArchestrA Symbol
z Embed an ArchestrA symbol in an InTouch window

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

The IDE should be open from the last lab.


a. In the Graphic Toolbox, create a new symbol named SimpleTank.
b. Draw a tank similar to the following:

c. Save and Close the symbol.


d. Import the Calculator_Keypads.aaPKG.
e. Open TankApp and create a new Window named Calculator.
f. Embed the Calculator object from the Keypads Graphic Toolset in the ArchestrA Graphic
Toolbox.
g. Test the Reverse Polish calculator in Runtime and close the application when finished.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


5-106 Module 5 – Symbol Creation and Editing

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Create and Save a New Tank Symbol


1. If the IDE is not open, launch the ArchestrA IDE and connect to your Galaxy.
2. Click the Graphic Toolbox tab.
3. Right-click on the Galaxy root and select New / Symbol to create a new symbol.

4. Rename the symbol SimpleTank.


5. Double-click SimpleTank to open the new symbol editor.

The ArchestrA Symbol editor opens.

Wonderware Training
Lab 2 – Creating and Embedding Symbols 5-107

6. Draw a basic tank that includes inlet and outlet valves with pipes, a level indicator window, and
a level display, similar to the example shown below.
This will give you an opportunity to experiment with the graphic tools and properties.

Hint: The tank above was drawn with the following tools:

Tank Element Drawing Tool


Level Display Text Box
Level Indicator Rounded Rectangle
Outlet Valve Rectangle
Outlet Pipe Rounded Rectangle
Inlet Valve Rectangle
Inlet Pipe Rounded Rectangle
Tank Rounded Rectangle

Rectangle
Rounded Rectangle

Rounded Rectangle

Text Box Rectangle

Rounded Rectangle
Rounded Rectangle

7. Click Save and Close to close the editor.


8. Check In the object when prompted.

InTouch® 10.0 New Features and ArchestrA Graphics


5-108 Module 5 – Symbol Creation and Editing

9. Import the ArchestrA package file called Calculator_Keypads.aaPKG.


In the IDE, select Galaxy / Import / Object(s)

10. Browse to the location of Calculator_Keypads.aaPKG.

Note: Your instructor will provide the file location.

11. Accept the defaults and click OK.

Wonderware Training
Lab 2 – Creating and Embedding Symbols 5-109

12. Click Close when finished.

13. Launch the TankApp application if it is not already open.

14. In WindowMaker, create a new window named Calculator.

InTouch® 10.0 New Features and ArchestrA Graphics


5-110 Module 5 – Symbol Creation and Editing

15. Click the Embed ArchestrA Graphic button on the menu bar.

16. Browse the Graphic Toolbox and select the Calculator object.

Instructor will
provide location.

17. Insert the Calculator object.


Resize the symbol or the window to fit the symbol in the window.

18. Switch to Runtime and observe the behavior of the object.

Note: This calculator uses Reverse Polish notation like many HP calculator models.

Example: 3 <Enter> 5 X — the result is 15

19. Close WindowMaker.


Make sure the $TankApp object is checked in.

Wonderware Training
Module 6

Custom Properties and Animation


Section 1 – Using Custom Properties 6-3
Section 2 – Animating Graphic Elements 6-17
Lab 3 – Adding Custom Properties and Animation 6-93
Lab 4 – Animating ArchestrA Symbols in InTouch 6-101
6-2 Module 6 – Custom Properties and Animation

Module Objectives
z Configure Custom Properties.
z Apply Custom Properties to elements and objects.
z Configure Animation.
z Apply Animation to objects.

Wonderware Training
Section 1 – Using Custom Properties 6-3

Section 1 – Using Custom Properties

Section Objective
z Configure and apply Custom Properties.

Configuring ArchestrA Symbols in WindowMaker


You can configure inserted ArchestrA symbols in the following ways:
z Standard editing, such as copying, cutting, pasting, duplicating, resizing, moving and
deleting. For more information, see the InTouch Visualization Guide.
z Configuring WindowMaker animation links.
z Connect an ArchestrA symbol with InTouch tagnames.
z Selecting an alternate instance of the same parent.
z Selecting an alternate symbol of the same instance.
z Resizing the inserted ArchestrA symbol to its original size.
z Enabling or disabling dynamic size propagation.

Configuring WindowMaker Animation Links of an ArchestrA Symbol


You can configure WindowMaker animation links of an inserted ArchestrA Symbol in the same
way as any other InTouch object. You can only configure animation links that are external to the
inserted ArchestrA Symbol. These are:
z Object size.
z Object location.
z Visibility.
z Orientation.
z Enablement.

Note: The animation links configured in WindowMaker are independent from those configured in
the ArchestrA Symbol Editor. They do not inherit the settings of the ArchestrA symbol and take
precedence when run in WindowViewer.

InTouch® 10.0 New Features and ArchestrA Graphics


6-4 Module 6 – Custom Properties and Animation

To configure WindowMaker animation links of an inserted ArchestrA symbol


a. Select the inserted ArchestrA symbol.
b. From the Special menu, select Animation Links.
The Animation Links dialog box appears.
The kinds of animation links available are nearly identical to those available in earlier versions
of InTouch. The configuration of various animation links will be demonstrated in the lab
exercises.

c. Click on the button for the desired type of animation link.


d. When you are done, click OK.

Wonderware Training
Section 1 – Using Custom Properties 6-5

Example:
This example shows you how to connect a tank symbol with a percent vertical fill animation
created by the ArchestrA Symbol Editor to an InTouch tagname.

Note: For more details on the individual steps, see Creating and Managing ArchestrA Graphics
User’s Guide.

a. Create a new symbol called “Tank” and open it in the ArchestrA Symbol Editor.
b. Paste a rectangle on the canvas. Change its appearance as desired.
c. Create a colored polygon element that represents a cutout of the tank to show the tank level.

d. Click on the canvas and from the Special menu select Custom Properties.
The Edit Custom Properties dialog box appears.
e. Add a custom property called, for example, Level.
f. On the right panel, set:
z Data Type as Float.
z Default Value as 0.

g. Click OK.
h. Double-click on the polygon element that represents the tank level.
The Edit Animations dialog box appears.
i. Add a % Vertical Fill animation.

InTouch® 10.0 New Features and ArchestrA Graphics


6-6 Module 6 – Custom Properties and Animation

j. On the right panel, in the Analog box, type the name of the custom property.
In this example, it is Level.

k. Click OK to close the Edit Animations dialog box.


l. Click Close and Save to close the ArchestrA Symbol Editor.
m. Open an IDE-managed InTouch application in WindowMaker.
For more information, see Industrial Application Server InTouch Integration Guide.
n. Create a new window and define a new Real InTouch tagname, for example TankLevel.
o. Insert the Tank symbol on the window.

p. On the Special menu, point to ArchestrA Graphic “Tank”, and then click Edit Custom
Properties. The Edit Custom Properties dialog box appears.

Wonderware Training
Section 1 – Using Custom Properties 6-7

q. Select the custom property Level, and in the Default Value box, either:
z Type TankLevel.
z Browse for TankLevel with the Select Tag dialog box that is opened from the ellipsis
button.

r. Click OK.
s. Paste a slider on the window and configure it with the local InTouch tagname TankLevel.
t. Click Runtime.
u. Move the slider to affect the tank level and observe the object’s behavior.

InTouch® 10.0 New Features and ArchestrA Graphics


6-8 Module 6 – Custom Properties and Animation

This section shows you how to configure and use custom properties to extend the functionality of
symbols and also to use in combination with InTouch tagnames.

Data Type:
- Boolean
- Integer
- Float
- Double
- String
- Time Default Value:
- Elapsed Time - Value
- Reference (Element or Attribute)
- Expression

CUSTOM PROPERTY 1

Description

CUSTOM PROPERTY 2
SYMBOL
CUSTOM PROPERTY 3 Visibility:
- Public Custom Property
...

- Private Custom Property

CUSTOM PROPERTY N

Wonderware Training
Section 1 – Using Custom Properties 6-9

Managing Custom Properties


You can manage all custom properties of a symbol in the Edit Custom Properties dialog box.

About Custom Properties


Custom Properties let you extend the standard properties of a symbol or an embedded or inserted
symbol. You can associate custom properties with functions you want exposed and that you want
to re-use. You can also use custom properties to connect an inserted ArchestrA symbol to InTouch
tagnames.
The Edit Custom Properties dialog box lets you:
z Add and delete custom properties.
z Set the types and data types of custom properties.
z Set the default values of custom properties.
z Determine the visibility of each custom property.
z Add a description for each custom property.
z Validate and clear custom properties.
You can also:
z Link custom properties to external sources.
z Override custom properties with new values.
z Revert custom property values to their default values.

InTouch® 10.0 New Features and ArchestrA Graphics


6-10 Module 6 – Custom Properties and Animation

Adding and Deleting Custom Properties


You can add and delete custom properties in the Edit Custom Properties dialog box.
To add a custom property
a. Click the canvas to deselect any elements.
b. On the Special menu, click Custom Properties.
The Edit Custom Properties dialog box appears.

c. Click the Add icon.


A new line is added in the custom properties list.
d. Type a name for the new custom property and press Enter.

You can see the name of the symbol and the custom property in the header of the right side of
the dialog box.

e. Configure the custom property on the right side of the Edit Custom Properties dialog box.
For more information see Creating and Managing ArchestrA Graphics User’s Guide - Chapter
10 Using Custom Properties - Configuring Custom Properties.
f. When finished, click OK.
To delete a custom property
a. Click the canvas to deselect any elements.
b. On the Special menu, click Custom Properties.
The Edit Custom Properties dialog box appears.

c. Select the custom property you want to delete and click the Remove icon.
A confirmation message appears.
d. Click Yes.
The custom property is removed from the custom properties list.
e. When you are done, click OK.

Wonderware Training
Section 1 – Using Custom Properties 6-11

Configuring Custom Properties


You can configure custom properties either when you create them or at a later point of time.
To configure a custom property
a. Click the canvas of the symbol.
b. On the Special menu, click Custom Properties.
The Edit Custom Properties dialog box appears.
c. Select the custom property you want to edit.
The configuration for the selected custom property appears on the right side of the dialog box.

Note: The header of the configuration section shows you the symbol name, for example
Symbol_001, on the right and the custom property name on the left, for example
MyCustomProperty. It can be accessed from scripting as Symbol_001.MyCustomProperty.

InTouch® 10.0 New Features and ArchestrA Graphics


6-12 Module 6 – Custom Properties and Animation

d. In the Data Type list, select the data type of the custom property.
You can select one of the following:

Data Type Symbol


Boolean

Elapsed Time

Float

Integer

String

Time

e. If you want to either:


z Make the property read-only at design time and prevent further changes to it when the

symbol is embedded into another symbol, click the Lock icon.


z Make the property read-only at Runtime and prevent its value being changed,
click the Lock icon.
f. In the Default Value box, type a literal value, reference or expression or browse for a
reference using the Browse icon.
g. If the selected data type is String, Time or Elapsed Time, you can click either the T icon or
label icon.

z Select the T icon to indicate that the default value is a static value.

z Select the label icon to indicate that the default value is a reference to a value.
h. In the Visibility box, select either:
z Public, so that the custom property is visible and can be used in a parent symbol if the
symbol is embedded or inserted.
z Private, so that the custom property is not visible outside of the defining symbol and
cannot be used if the symbol is embedded or inserted.
i. In the Description box, type a meaningful description for the custom property.

Wonderware Training
Section 1 – Using Custom Properties 6-13

Validating Custom Properties


You can validate custom properties to track down and avoid configuration errors.
To validate a custom property
a. Click on the canvas to deselect any elements.
b. On the Special menu, click Custom Properties.
The Edit Custom Properties dialog box appears.

c. Select the custom property you want to validate and click the Validate icon.
Required boxes are highlighted by a red box, possible errors appear in the status area under
the custom properties list.

Clearing the Configuration of Custom Properties


You can clear the configuration of custom properties. This resets the configuration to its default
values.
To clear the configuration of a custom property
a. In the Edit Custom Properties dialog box, select the custom property.

b. Click the Clear icon.


The configured values are reset to their default values.

Linking Custom Properties to External Sources


You can link custom properties of a symbol directly to external sources, either by:
z Configuring Automation objects that point at external sources and then pointing the
custom property at the corresponding attribute reference.
z Configuring a special InTouch reference syntax in the Default Value box. When you insert
the symbol on an InTouch window, the referenced InTouch tagnames connect to the
tagnames of InTouch.

Note: For more information, see Connecting Animations with Custom Properties on page
219, Connecting Animations with InTouch tags on page 220 and the InTouch ArchestrA
Integration Guide.

InTouch® 10.0 New Features and ArchestrA Graphics


6-14 Module 6 – Custom Properties and Animation

Overriding Custom Properties


You can override the custom property default values of:
z Embedded symbols within symbols in the ArchestrA Symbol Editor.
z Inserted symbols in InTouch WindowMaker.

Note: When you override the custom property, it appears bold in the custom property list.

z You can override the following custom property values:


z Default value.
z Visibility, but only from public to private, not private to public.
z Description.
z Locked state.
z String mode setting.
You cannot override the Data Type of a custom property.

Reverting to Original Custom Property Values


After you have overridden a custom property value, you can revert to the original custom property
value. This can be done for overridden custom properties of embedded symbols in other symbols
and in InTouch WindowMaker.
To revert to the original custom property value

In the Edit Custom Properties dialog box, click the Revert icon.
The custom property value is reverted to the original custom property value.

Examples
This section shows you some possible uses for using custom properties.
Examples:
z A TankLevel custom property of type Writable Attribute can be given a value of me.pv.
z A MaxFillLevel Custom Property of type Expression can be given a value of 250 +
me.FillLevel.

Note: A more extensive example on how to use custom properties in inserted symbols on an
InTouch window can be found in the section Connecting ArchestrA Symbols with InTouch
Tagnames in the InTouch ArchestrA Integration Guide .

Wonderware Training
Section 1 – Using Custom Properties 6-15

Connecting ArchestrA Symbols with InTouch Tagnames


You can connect ArchestrA symbols with InTouch tagnames by overriding the custom properties
of an inserted ArchestrA symbol. The custom properties expose the ArchestrA symbol animation
links to InTouch.

Connecting ArchestrA Symbols with InTouch Tags

ArchestrA Symbol Editor

SYMBOL4
SYMBOL3

SYMBOL1 SYMBOL2

ELEMENT1 CustomProperty1

ANI CustomProperty2
MA
TIO
N CustomProperty3

InTouch WindowMaker EMBED ARCHESTRA SYMBOL

InTouch Tags

tag3

SYMBOL1 tag2

tag1
ELEMENT1 CustomProperty1

ANI CustomProperty2
MA
TIO
N CustomProperty3
USES INTOUCH
TAG AS REFERENCE

When you insert an ArchestrA symbol in an InTouch window, the references in the animation links
are converted as follows:

ArchestrA Symbol Inserted ArchestrA Symbol


Object.Extension galaxy:Object.Extension
intouch:Tagname Tagname

For more information about custom properties, see the Creating and Managing ArchestrA
Graphics User’s Guide.

InTouch® 10.0 New Features and ArchestrA Graphics


6-16 Module 6 – Custom Properties and Animation

To connect an ArchestrA symbol with an InTouch tagname


a. Select the inserted ArchestrA symbol on the InTouch window.
b. Right-click on the object and select the ArchestrA Graphic Object "name",
and then click Edit Custom Properties.
The Edit Custom Properties dialog box appears.

c. Select the custom property you want to connect to an InTouch tagname.


The configuration for the selected custom property appears on the right.
d. In the Default Value box, either:
z Type the name of the InTouch tagname.
z Click the browse button and select a tagname from the Select Tag dialog box.

Note: You can restore the original value of the custom property by clicking the Restore icon.

e. When you are done, click OK.


Any animation in the ArchestrA symbol that is configured with the selected custom property
now interacts with the InTouch tagname instead.

Wonderware Training
Section 2 – Animating Graphic Elements 6-17

Section 2 – Animating Graphic Elements

Section Objective
z Configure and apply Animation to objects.
z Observe Animation in Runtime.

You can use animations to specify how the element appears at Runtime. Animations are driven by
data that comes from ArchestrA attribute values and expressions as well as element properties,
and InTouch tags.
You can use:
z Visualization animations, such as visibility, fill style, line style, text style, blinking, percent
fill horizontal, percent fill vertical, horizontal location, vertical location, width, height,
orientation, value display or tooltip.
z Interaction animations, such as disablement, user input, horizontal slider, vertical slider,
pushbutton, action script, show symbol or hide symbol.
z Element-specific animations for Status element and Windows Common Control elements.
Each element in your ArchestrA symbol can have one or more animations.
You can disable and enable individual animations for debugging purposes.
You can also cut, copy and paste animations between elements, regardless of their type. Only
animations that are supported by the target element are pasted.
You can also substitute references and strings in animations.

Note: Not all animations are available for all element types, as some do not make logical sense,
such as line style with a text element. You are not able to select or copy these invalid
combinations.

InTouch® 10.0 New Features and ArchestrA Graphics


6-18 Module 6 – Custom Properties and Animation

Adding an Animation to an Element


You can add one or more animations to a single element in your ArchestrA symbol.
To add an animation to an element
a. Select the element to which you want to add an animation.

b. On the Special menu, click Edit Animations.


The Edit Animations dialog box appears.

c. Click the Add icon.


The list of animations appears.

Wonderware Training
Section 2 – Animating Graphic Elements 6-19

d. Select an animation from the list. The animation is added to the animation list and you can
configure the selected animation on the right side of the Edit Animations dialog box.

Note: Depending on the animation type you may get an animation state selection panel
instead.

Reviewing which Animations are Assigned to an Element


You can review which animations are assigned to an element and change the number of
animations or their configuration at the same time.
To review which animations are assigned to an element
z Select the element. The assigned animations appear in the Animation Editor.

InTouch® 10.0 New Features and ArchestrA Graphics


6-20 Module 6 – Custom Properties and Animation

Showing and Hiding the Animation List


You can show or hide the animation list. If you hide the animation list, the configuration space is
expanded giving you more space to configure the animations.
To hide the animation list

z In the Edit Animations dialog box, click the Hide icon.


The animation list is hidden and the configuration space is expanded.

To show the animation list

z In the Edit Animations dialog box, click the Show icon.


The animation list is shown and the configuration space is reduced to its default width.

Wonderware Training
Section 2 – Animating Graphic Elements 6-21

Removing Animations from an Element


You can remove an animation from an element by using the Edit Animations dialog box.
You can do this for either:
z Individual animations.
z All animations at the same time.
To remove an animation from an element
a. Select the element from which you want to remove an animation.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Select the animation you want to remove from the animation list on the left side of the dialog
box.

d. Click the Remove icon.


A confirmation dialog box appears.
e. Click Yes.
The animation is removed from the list and no longer associated with the element.
To remove all animations from an element
a. Select one or more elements from which you want to remove all animations.
b. On the Edit menu, point to Animations, and then click Clear.
All animations are removed from the selected element(s).

InTouch® 10.0 New Features and ArchestrA Graphics


6-22 Module 6 – Custom Properties and Animation

Enabling and Disabling Animations


You can enable or disable animations for an element. When you disable an animation, its
configuration is not lost. This lets you see, for example, each animation independently from each
other.
To disable an animation
a. Select the element.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
c. Locate the animation you want to disable from the animation list on the left side of the dialog
box.
d. Select Disabled from the list of that row.

e. Repeat for any other animations you want to disable and click OK when you are done.
To enable an animation
a. Select the element.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
c. Locate the animation you want to enable from the animation list on the left side of the dialog
box.
d. Select Enabled from the list of that row.

e. Repeat for any other animations you want to enable and click OK when you are done.

Wonderware Training
Section 2 – Animating Graphic Elements 6-23

Validating the Configuration of an Animation


You can validate the configuration of an animation.

If the configuration has an error, an exclamation mark is shown next to the animation icon.

Errors include for example:


z Animation is disabled.
z Syntax errors, such as data mismatches.
z Required values not specified.
z Specified values out of valid range.
To validate the configuration of an animation
a. Select the element that contains the animations you want to validate.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Select the animation you want to validate.

d. Click the Validate icon on the right side of the Edit Animations dialog box.
The currently selected animation is validated and possible errors are highlighted in the right
side of the dialog box.

Clearing the Configuration from an Animation


You can clear all data from the configuration boxes of an animation and reset the settings to their
defaults.
To clear all data from the configuration boxes of an animation
a. In the Edit Animations dialog box, select the animation.

b. In the configuration panel, click the Clear icon.


All data from the configuration boxes is cleared and the settings are reset to their defaults.

Connecting Animations with Data Sources


You can connect animations to:
z ArchestrA attributes.
z Element properties.
z Custom properties.
z InTouch tags.

InTouch® 10.0 New Features and ArchestrA Graphics


6-24 Module 6 – Custom Properties and Animation

Connecting Animations with ArchestrA Attributes


You connect the element behavior and appearance with an ArchestrA attribute. The ArchestrA
attribute provides values at Runtime that control the behavior and appearance of the element.
Example: a rectangle element fill behavior can be connected to the run-time value of the ArchestrA
attribute Tanklevel.
You can browse all ArchestrA attributes and Element Properties with the Galaxy Browser.
To connect animations to attribute references using the Galaxy Browser
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Select the animation you want to configure from the animation list.
d. Select the parameter you want to configure.
e. Click the Browse button.
The Galaxy Browser appears.

f. Select an attribute reference and click OK.


The selected attribute reference is shown in the configuration box.
g. Repeat for any other animation parameters and click OK when you are done.

Wonderware Training
Section 2 – Animating Graphic Elements 6-25

Connecting Animations with Element Properties


You can connect the element behavior and appearance with a property of any element on the
canvas.
You can browse the properties of all elements on the canvas with the Galaxy Browser.

Note: You cannot connect animations to properties of elements that are part of an embedded
symbol on the canvas.

To connect animations to element property references using the Galaxy Browser


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Select the animation you want to configure from the animation list.
d. Select the parameter you want to configure.
e. Click the Browse button.
The Galaxy Browser appears.
f. Click the Element Browser tab.
The Element Browser panel appears.

g. From the Elements list on the left select an element.


The right side shows the properties of the selected element.
h. Select a property and click OK.
The selected element and property is shown in the configuration box.

InTouch® 10.0 New Features and ArchestrA Graphics


6-26 Module 6 – Custom Properties and Animation

Connecting Animations with Custom Properties


You can connect the element behavior and appearance with a custom property of either:
z The current symbol.
z An embedded symbol on the canvas.
To connect animations to element property references using the Galaxy Browser
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Select the animation you want to configure from the animation list.
d. Select the parameter you want to configure.
e. Click the Browse button.
The Galaxy Browser appears.
f. Click the Element Browser tab.
The Element Browser panel appears.

g. From the Elements list on the left select the symbol.


The right side shows the custom properties and other properties of the selected symbol.
h. Select a custom property and click OK.
The selected custom property is shown in the configuration box.

Connecting Animations with InTouch tags


You can connect the element behavior and appearance with an InTouch tagname. The InTouch
tagname provides values at runtime that control the behavior and appearance of the element.
This can be done either by:
z Configuring a reference with the intouch:tagname syntax. The animation connects to the
InTouch tagname of the node the symbol is deployed to.
z Using a custom property and configuring the custom property in the inserted ArchestrA
symbol in InTouch to reference an InTouch tag. For more information, see the InTouch
ArchestrA Integration Guide.
z Configuring an ArchestrA attribute reference to the IDE-managed InTouch application
object InTouchViewApp that contains the InTouch tagnames as attributes. This is bound
to a specific node. This is a special case of configuring an ArchestrA attribute reference.
z Configuring an ArchestrA attribute reference to an InTouchProxy object that contains the
InTouch tagnames as items. This is a special case of configuring an ArchestrA attribute
reference.

Wonderware Training
Section 2 – Animating Graphic Elements 6-27

Note: To configure a reference to use an InTouch SuperTag, use the following syntax:
attribute(“intouch:SuperTag\Member”).

Connecting Animations with InTouchViewApp Attributes


To be able to browse for InTouch tags, you must first:
z Create an IDE-managed InTouch application by deriving an InTouchViewApp object and
configuring it in WindowMaker.
z Derive an instance of the InTouchViewApp object.
The InTouch tags are represented by attributes of the InTouchViewApp object instance.

To connect animations to InTouch tags


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Select the animation you want to configure from the animation list.
d. Select the parameter you want to configure.
e. Click the Browse button.
The Galaxy Browser appears.
f. Select the InTouchViewApp object that corresponds to the IDE-managed InTouch
application. The right panel is populated with InTouch tags.

g. Select a tag and click OK.


The selected ArchestrA reference to an InTouch tag is shown in the configuration box.

InTouch® 10.0 New Features and ArchestrA Graphics


6-28 Module 6 – Custom Properties and Animation

Managing Animations
You can easily manage animations in the Edit Animations dialog box. You can:
z Change the way the list of animations appears.
z Switch easily between multiple animations of an element.

Organizing the Animation List


You can either organize the list of animations alphabetically or by category.
To organize the animation list
z In the Edit Animations dialog box, click the:

z Alphabetic sort icon to sort alphabetically.

z Category icon to sort by category.

Switching between Animations


If you have more than one animation for an element you can easily switch between their
configuration panels without having to use the animation list. This is particularly useful when the
animation list is hidden.

To switch between animations


z In the Edit Animations dialog box, on the configuration panel click either the left or right
arrow icon.

The configuration panel changes to the configuration panel of the previous or next animation.

Wonderware Training
Section 2 – Animating Graphic Elements 6-29

Configuring Common Types of Animations


Every animation type has its own set of configuration parameters. This section shows you how to
configure each type of animation and what references it can use.
You can either configure:
z Visualization animations, such as:
z Visibility animations.
z Fill style, line style or text style animations.
z Blink animations.
z Horizontal or vertical percent fill animations.
z Horizontal or vertical location animations.
z Width or height animations.
z Orientation animations.
z Value display animations.
z Tooltip animations.
z Interaction animations, such as:
z Disablement animation.
z User input animation.
z Horizontal and vertical slider animations.
z Pushbutton animations.
z Action script animations.
z Show or hide animations.

Configuring a Visibility Animation


You can configure an element with a visibility animation.

To configure an element with a visibility animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Visibility. The visibility animation is added to the animation list
and the Visibility configuration panel appears.

d. In the Boolean box, type either a boolean numeric value, attribute reference or expression.
e. Select True, 1, On, if you want the element to show, when the expression is true, otherwise
select False, 0, Off.

InTouch® 10.0 New Features and ArchestrA Graphics


6-30 Module 6 – Custom Properties and Animation

Configuring a Fill Style Animation


You can configure an element either with a:
z Boolean fill style animation.
z Truth table fill style animation.
The truth table fill style animation lets you:
z Associate expressions of any data type supported by ArchestrA with a fill style.
z Define as many fill styles as you require and associate each one with a condition.
You can define the conditions by specifying a comparison operator (=, >, >=, <, <=) and a
breakpoint, which itself can be a value, an attribute reference or an expression.
You can add conditions, delete conditions and also change the order in which the conditions are
processed.

Configuring a Boolean Fill Style Animation


You can configure an element with a boolean/discrete fill style animation.

To configure an element with a boolean fill style animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Fill Style. The fill style animation is added to the animation list
and the Fill Style state selection panel appears.
d. Click the Boolean button. The Boolean Fill Style configuration panel appears.

e. In the Boolean box, type either a boolean numeric value, attribute reference or expression.
f. Unselect Color in the True, 1, On area OR False, 0, Off area if you do not want a different fill
style for the true or false condition than the default fill style.
g. In the True, 1, On area, click the color box to configure the fill color when the expression is
true. The style selection dialog box appears.
h. In the False, 0, Off area, click the color box to configure the fill color when the expression is
false. The style selection dialog box appears.
i. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-31

To set default fill style in a boolean fill style animation


a. Open the Edit Animations dialog box, Boolean Fill Style panel.
b. In the Element Fill Style area, click the color box to select a style from the style selection
dialog box.

To use default fill style in a boolean fill style animation


a. Open the Edit Animations dialog box, Boolean Fill Style panel.
b. Unselect Color to use the corresponding default fill style.

Configuring a Truth Table Fill Style Animation


You can configure an element with a fill style animation based on a truth table.

To configure an element with a truth table fill style animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
c. Click the Add icon and select Fill Style. The fill style animation is added to the animation list
and the Fill Style state selection panel appears.
d. Click the Truth Table button. The Truth Table Fill Style configuration panel appears.
e. In the Expression Or Reference area:
z Select the data type of the expression from the list.
z Type a value, attribute reference or expression in the text box.
f. If the data type of the expression is string or internationalized string, you can specify to ignore
the case by selecting Ignore Case.
g. In the Truth Table, click the color box in the Color column. The style selection dialog box
appears.
h. In the Operator column, select the comparison operator.
i. In the Value or Expression column, type a value, attribute reference or expression.
j. When you are done, click OK.

To set the default fill style for a truth table fill style animation
a. Open the Edit Animations dialog box, Truth Table Fill Style panel.
b. In the Element Fill Style area, click the color box. The style selection dialog box appears.

To use the default fill style in a truth table fill style animation
a. Open the Edit Animations dialog box, Truth Table Fill Style panel.
b. Locate the condition for which you want to set the style to default style.
c. Uncheck the mark for that condition in the Color column of the truth table.
The associated style is the same as the style for the Element Fill Style.

InTouch® 10.0 New Features and ArchestrA Graphics


6-32 Module 6 – Custom Properties and Animation

To add a condition to a truth table fill style animation


a. Open the Edit Animations dialog box, Truth Table Fill Style panel.

b. Click the Add icon.


An additional condition is added to the truth table.

c. Configure color, operator and breakpoint value according to your requirements.

To delete a condition from an analog fill style animation


a. Open the Edit Animations dialog box, Truth Table Fill Style panel.
b. Select the condition you want to delete.

c. Click the Remove icon.


The condition is removed.

To change the processing order of fill style conditions


a. Open the Edit Animations dialog box, Truth Table Fill Style panel.
b. Select the condition you want to move up or down the condition list in order for it to be
processed sooner or later.

c. Either click the:


z Arrow up icon to move the condition up in the truth table.
z Arrow down icon to move the condition down in the truth table.

Wonderware Training
Section 2 – Animating Graphic Elements 6-33

Example:
The table below shows an analog fill color animation that describes the following behavior:
z When the attribute TankLevel_001.PV is 0 then the fill style is solid black.
z When the attribute TankLevel_001.PV is smaller than 20, then the fill style is solid red.
z When the attribute TankLevel_001.PV is greater than the attribute Standards.TankMax
then the fill style is red with a diagonal pattern.
z In all other cases, the fill style is solid blue.

Condition Color Operator Expression


1 Solid Black = 0
2 Solid Red < 20
3 Red, Pattern > Standards.TankMax
Expression: TankLevel_001.PV
Element Fill Style: Solid blue

Configuring a Line Style Animation


You can configure an element either with a:
z Boolean line style animation.
z Truth table line style animation.
The truth table line style animation lets you:
z Associate expressions of any data type supported by ArchestrA with a line style.
z Define as many line styles as you want and associate each one with a condition.
You can define the conditions by specifying a comparison operator (=, >, >=, <, <=) and a
breakpoint, which itself can be a value, an attribute reference or an expression.
You can add conditions, delete conditions and also change the order in which the conditions are
processed.

InTouch® 10.0 New Features and ArchestrA Graphics


6-34 Module 6 – Custom Properties and Animation

Configuring a Boolean Line Style Animation


You can configure an element with a boolean line style animation. You can either use a new style
or use all or parts of the default appearance of a line for:
z Line style.
z Line thickness.
z Line pattern.

To configure an element with a boolean line style animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Line Style. The line style animation is added to the animation
list and the Line Style state selection panel appears.
d. Click the Boolean button.
The Boolean Line Style configuration panel appears.

e. In the Boolean box, type either a boolean numeric value, attribute reference or expression.
f. In the True, 1, On area, click the Color box to configure the line style when the expression is
true. The style selection dialog box appears.
g. In the Weight box, type a value for the line thickness when the expression is true.
h. From the Pattern list, select a line pattern for the line when the expression is true.
i. Repeat the above steps for the false condition in the False, 0, Off area.
j. When you are done, click OK.

To set default line style, thickness and/or pattern in a boolean line style animation
a. Open the Edit Animations dialog box, Boolean Line Style panel.
b. In the Element Line Style area, select a style, type a value for the width and select a pattern
for the default boolean line style.

Wonderware Training
Section 2 – Animating Graphic Elements 6-35

To use default line style, thickness and/or pattern in a boolean line style animation
a. Open the Edit Animations dialog box, Boolean Line Style panel.
b. In either the True, 1, On or False, 0, Off areas, unselect Color, Weight and/or Pattern to use
the corresponding default style, weight and/or pattern.

Configuring a Truth Table Line Style Animation


You can configure an element with a truth table line style animation.
To configure an element with a truth table line style animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Line Style. The line style animation is added to the animation
list and the Line Style state selection panel appears.
d. Click the Truth Table button.
The Truth Table Line Style configuration panel appears.

e. In the Expression or Reference box:


z Select the data type of the expression from the list.
z Type a value, attribute reference or expression in the text box.
f. If the data type of the expression is string or internationalized string, you can specify to ignore
the case by selecting Ignore Case.
g. In the Truth Table, click the color box in the Color column.
The Style Selection dialog box appears.
h. In the Weight column, type a value for the line weight.
i. In the Pattern column, select a line pattern.
j. In the Operator column, select the comparison operator.
k. In the Value or Expression column, type a value, attribute reference or expression.
l. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-36 Module 6 – Custom Properties and Animation

To set the default line style, width or pattern for a truth table line style animation
a. Open the Edit Animations dialog box, Truth Table Line Style panel.
b. In the Element Line Style area, select a style, type a value for the width and select a pattern
for the default truth table line style.

To use the default line style, width or pattern in a truth table line style animation
a. Open the Edit Animations dialog box, Truth Table Line Style panel.
b. Locate the condition for which you want to change the line style, width or pattern.
c. To use the default line style for the condition, uncheck the mark in the Color column of the
truth table.
d. To use the default line width for the condition, uncheck the mark in the Width column of the
truth table.
e. To use the default line pattern for the condition, uncheck the mark in the Pattern column of the
truth table.

To add a condition to a truth table line style animation

a. In the Edit Animations dialog box, Truth Table Line Style panel, click the Add icon.
An additional condition is added to the truth table.
b. Configure color, weight, pattern, operator and breakpoint value according to your
requirements.

To delete a condition from an analog line color animation


a. In the Edit Animations dialog box, Truth Table Line Style panel, select the condition you
want to delete.

b. Click the Remove button.


The condition is removed.

To change the processing order of line style conditions


a. Open the Edit Animations dialog box, Truth Table Line Style panel
b. Select the condition you want to move up or down the condition list in order for it to be
processed sooner or later.

c. Either click the:


z Arrow up icon to move the condition up in the truth table.
z Arrow down icon to move the condition down in the truth table.

Wonderware Training
Section 2 – Animating Graphic Elements 6-37

Configuring a Text Style Animation


You can configure an element either with a:
z Boolean text style animation.
z Truth table text style animation.
The truth table text style animation lets you:
z Associate expressions of any data type supported by ArchestrA with a text style.
z Define as many text styles as you want and associate each one with a condition.
You can define the conditions by specifying a comparison operator (=, >, >=, <, <=) and a
breakpoint, which itself can be a value, an attribute reference or an expression.
You can add conditions, delete conditions and also change the order in which the conditions are
processed.

Configuring a Boolean Text Style Animation


You can configure an element with a boolean text style animation.
To configure an element with a boolean text style animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Text Style. The text style animation is added to the animation
list and the Text Style state selection panel appears.
d. Click the Boolean button.
The Boolean Text Style configuration panel appears.

e. In the Boolean box, type either a boolean numeric value, attribute reference or expression.
f. In the True, 1, On area, click the Color box to configure the text style when the expression is
true.
The Style Selection dialog box appears.
g. Click the Browse button for the Font box, to select a font, font style and size for the text when
the expression is true.
h. Repeat the above steps for the false condition in the False, 0, Off area.
i. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-38 Module 6 – Custom Properties and Animation

To set default text style and/or font in a boolean text style animation
a. Open the Edit Animations dialog box, Boolean Text Style panel.
b. In the Element Text Style area, select a style and/or a font for the default boolean text style.

To use default text style and/or font in a boolean text style animation
a. Open the Edit Animations dialog box, Boolean Text Style panel.
b. In either the True, 1, On or False, 0, Off areas, unselect Color and/or Font to use the
corresponding default style and/or font.
c. Configuring a Truth Table Text Style Animation.
d. You can configure an element with a truth table text style animation.

To configure an element with a truth table text style animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Text Style.
The text style animation is added to the animation list.
The Text Style information page appears.
d. Click the Truth Table button.
The Truth Table Text Style configuration panel appears.
e. Select the data type of the expression from the list.
f. Type a value, attribute reference or expression in the text box.
g. If the data type of the expression is string or internationalized string, you can specify to ignore
the case by selecting Ignore Case.
h. In the Truth Table, click the color box in the Color column.
The style selection dialog box appears.
i. Click on the cell in the Font column to select a font.
j. In the Operator column, select the comparison operator.
k. In the Value or Expression column, type a value, attribute reference or expression.
l. When you are done, click OK.

To set the default text style or font for a truth table text style animation
a. Open the Edit Animations dialog box, Truth Table Text Style panel.
b. In the Element Text Style area, select a style and a font for the default truth table text style.

Wonderware Training
Section 2 – Animating Graphic Elements 6-39

To use the default text style or font in a truth table text style animation
a. Open the Edit Animations dialog box, Truth Table Text Style panel.
b. Locate the condition for which you want to change the text style or font.
c. To use the default text style for the condition, uncheck the mark in the Color column of the
truth table.
d. To use the default font for the condition, uncheck the mark in the Font column of the truth
table.

To add a condition to a truth table text style animation

a. In the Edit Animations dialog box, Truth Table Text Style panel, click the Add icon.
An additional condition is added to the truth table.
b. Configure style, font, operator and breakpoint value according to your requirements.

To delete a condition from a truth table text style animation


a. In the Edit Animations dialog box, Truth Table Text Style panel, select the condition you
want to delete.

b. Click the Remove button.


The condition is removed.

To change the processing order of text style conditions


a. Open the Edit Animations dialog box, Truth Table Text Style panel
b. Select the condition you want to move up or down the condition list in order for it to be
processed sooner or later.

c. Either click the:


z Arrow up icon to move the condition up in the truth table.
z Arrow down icon to move the condition down in the truth table.

InTouch® 10.0 New Features and ArchestrA Graphics


6-40 Module 6 – Custom Properties and Animation

Configuring a Blink Animation


You can configure an element with a blink animation. You can specify:
z The blinking speed: slow, medium or fast.
z If the element should blink invisibly or if it should blink with specified colors.
To configure an element with a blink animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Blink.
The blink animation is added to the animation list and the Blink configuration panel appears.

d. In the Boolean box, type either a boolean numeric value, attribute reference or expression.
e. In the Blink When Expression Is area, select either:
z True, 1, On to enable blinking when the expression is true.
z False,0 ,Off to enable blinking when the expression is false.
f. In the Blink Speed area, select either Slow, Medium or Fast for the blinking speed.
g. In the Blink Attributes area, select either Blink Visible With These Attributes or Blink Invisible.
h. If you selected Blink Visible With These Attributes, you can configure the styles that are
used at Runtime for the text, line and fill component of the element. Click on the corresponding
color box, and the style selection dialog box appears.
i. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-41

Configuring a Percent Fill Horizontal Animation


You can configure an element with a percent fill horizontal animation.
Besides specifying the expressions that determine how much of the element is filled at Runtime,
you can also specify:
z Fill Direction: from left to right or right to left.
z Unfill Color: the style of the background when the element has 0% filling.
z Fill Orientation: if the filling is in relation to the element or to the screen.

Note: The fill orientation is a common setting to the percent fill horizontal and percent fill vertical
animations. If you configure an element with both these animations, then the last set orientation is
the setting that is used.

You can also preview how the percent fill horizontal animation appears at Runtime.
To configure an element with a percent fill horizontal animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select % Fill Horizontal. The percent fill horizontal animation is added
to the animation list and the % Fill Horizontal configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.

InTouch® 10.0 New Features and ArchestrA Graphics


6-42 Module 6 – Custom Properties and Animation

e. In the Value - At Min Fill box, type an analog value, attribute reference or expression that
causes the minimum percent of filling at Runtime.
f. In the Value - At Max Fill box, type an analog value, attribute reference or expression that
causes the maximum percent of filling at Runtime.
g. In the Fill - Min% box, type an analog value, attribute reference or expression to specify the
minimum percent of filling.
h. In the Fill - Max% box, type an analog value, attribute reference or expression to specify the
maximum percent of filling.
i. In the Colors area, click the:
z Fill Color box to select a style from the style selection dialog box.
This is the fill style of the element.
z Unfilled Color box to select a style from the style selection dialog box.
This is the background fill style of the element.
j. In the Direction area, select either:
z Right - to fill from left to right.
z Left - to fill from right to left.
k. In the Orientation area, select either:
z Relative to Graphic - so that the filling is in relation to the element and the filling rotates
with the element.
z Relative to Screen - so that the filling is in relation to the screen and the filling does not
rotate with the element.
l. You can preview your configuration by using the slider in the Preview area.
Drag the slider to see how different values affect the appearance at Runtime.

m. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-43

Configuring a Percent Fill Vertical Animation


You can configure an element with a percent fill vertical animation.
Besides specifying the expressions that determine how much of the element is filled at Runtime,
you can also specify:
z Fill Direction: from bottom to top or top to bottom.
z Unfill Color: the style of the background when the element has 0% filling.
z Fill Orientation: if the filling is in relation to the element or to the screen.

To configure an element with a percent fill vertical animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select % Fill Vertical. The percent fill vertical animation is added to the
animation list and the % Fill Vertical configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.


e. In the Value-At Min Fill box, type an analog value, attribute reference or expression that
causes the minimum percent of filling at Runtime.
f. In the Value-At Max Fill box, type an analog value, attribute reference or expression that
causes the maximum percent of filling at Runtime.
g. In the Fill-Min% box, type an analog value, attribute reference or expression to specify the
minimum percent of filling.

InTouch® 10.0 New Features and ArchestrA Graphics


6-44 Module 6 – Custom Properties and Animation

h. In the Fill-Max% box, type an analog value, attribute reference or expression to specify the
maximum percent of filling.
i. In the Colors area, click the:
z Fill Color box to select a style from the style selection dialog box.
This is the fill style of the element.
z Unfilled Color box to select a style from the style selection dialog box.
This is the background fill style of the element.
j. In the Direction area, select either:
z Up - to fill from bottom to top.
z Down - to fill from top to bottom.
k. In the Orientation area, select either:
z Relative to Graphic - so that the filling is in relation to the element and the filling rotates
with the element.
z Relative to Screen - so that the filling is in relation to the screen and the filling does not
rotate with the element.
l. You can preview your configuration by using the slider in the Preview area.
Drag the slider to see how different values affect the appearance at Runtime.

m. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-45

Configuring a Location Horizontal Animation


You can configure an element with a location horizontal animation.
To configure an element with a location horizontal animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Location Horizontal. The location horizontal animation is added
to the animation list and the Location Horizontal configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.


e. In the Value-At Left End box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement-To Left value.
f. In the Value-At Right End box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement-To Right value.
g. In the Movement-To Left box, type an analog value, attribute reference or expression for the
maximum offset to the left.
h. In the Movement-To Right box, type an analog value, attribute reference or expression for
the maximum offset to the right.
i. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-46 Module 6 – Custom Properties and Animation

Configuring a Location Vertical Animation


You can configure an element with a location vertical animation.
To configure an element with a location vertical animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Location Vertical. The location vertical animation is added to
the animation list and the Location Vertical configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.


e. In the Value - At Top box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - Up value.
f. In the Value - At Bottom box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - Down value.
g. In the Movement - Up box, type an analog value, attribute reference or expression for the
maximum offset upwards.
h. In the Movement - Down box, type an analog value, attribute reference or expression for the
maximum offset downwards.
i. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-47

Configuring a Width Animation


You can configure an element with a width animation.
You can also specify if the element is to be anchored to its left side, center, right side or origin.
To configure an element with a width animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Width.
The width animation is added to the animation list and the Width configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.


e. In the Value-At Min Size box, type an analog value, attribute reference or expression that
corresponds to the minimum width specified by the Width-Min% value.
f. In the Value-At Max Size box, type an analog value, attribute reference or expression that
corresponds to the maximum width specified by the Width-Max% value.
g. In the Width-Min% box, type an analog value, attribute reference or expression for the
minimum width in percent of the original element.
h. In the Width-Max% box, type an analog value, attribute reference or expression for the
maximum width in percent of the original element.
i. In the Anchor area, select either:
z Left - to specify that the left side of the element is anchored.
z Center - to specify that the horizontal center of the element is anchored.
z Right - to specify that the right side of the element is anchored.
z Origin - to specify that the origin of the element is anchored.
j. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-48 Module 6 – Custom Properties and Animation

Configuring a Height Animation


You can configure an element with a height animation.
You can also specify if the element is to be anchored to its top side, middle, bottom side or origin.
To configure an element with a height animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Height. The height animation is added to the animation list and
the Height configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.


e. In the Value-At Min Size box, type an analog value, attribute reference or expression that
corresponds to the minimum height specified by the Height-Min% value.
f. In the Value-At Max Size box, type an analog value, attribute reference or expression that
corresponds to the maximum height specified by the Height-Max% value.
g. In the Height-Min% box, type an analog value, attribute reference or expression for the
minimum height in percent of the original element.
h. In the Height-Max% box, type an analog value, attribute reference or expression for the
maximum height in percent of the original element.
i. In the Anchor area, select either:
z Top - to specify that the top side of the element is anchored.
z Middle - to specify that the vertical center of the element is anchored.
z Bottom - to specify that the bottom side of the element is anchored.
z Origin - to specify that the origin of the element is anchored.
j. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-49

Configuring an Orientation Animation


You can configure an element with an orientation animation. You can also:
z Specify a different orientation origin.
z Ignore or accept the design-time orientation of the element on the canvas.
z Preview the orientation at Runtime with a slider.
To configure an element with an orientation animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Orientation. The orientation animation is added to the
animation list and the Orientation configuration panel appears.

d. In the Analog box, type an analog value, attribute reference or expression.


e. In the Value-At CCW End box, type an analog value, attribute reference or expression that
corresponds to the maximum angle in degrees for the counter-clockwise orientation as
specified by the Orientation-CCW value.
f. In the Value-At CW End box, type an analog value, attribute reference or expression that
corresponds to the maximum angle in degrees for the counter-clockwise orientation as
specified by the Orientation-CW value.
g. In the Orientation-CCW box, type an analog value, attribute reference or expression for the
maximum orientation in counter-clockwise direction in degrees.
h. In the Orientation-CW box, type an analog value, attribute reference or expression for the
maximum orientation in clockwise direction in degrees.

InTouch® 10.0 New Features and ArchestrA Graphics


6-50 Module 6 – Custom Properties and Animation

i. In the Orientation Offset area, Select either:


z Replace Current to ignore the design-time orientation of the element as it appears on the
canvas and to use absolute orientation.
z Use Current as Offset Orientation to orientate the element at Runtime in relation to its
design-time orientation on the canvas.

j. If you use current as offset orientation, you can type an offset value in the text box next to Use
Current as Offset Orientation. This affects the orientation of the element on the canvas.
k. In the Current Relative Origin area, type values in the dX and dY boxes to specify the
rotation origin as offset from the element center point. This affects the point of origin of the
element on the canvas.
l. Select either:
z Replace Current Angle to ignore the design-time rotation setting of the element as it
appears on the canvas.
z Apply Current Angle as Offset to rotate the element at Runtime in relation to its design-
time rotation angle on the canvas.
m. You can preview the orientation and how run-time values affect the appearance of the
element, by dragging the slider in the Preview area.

n. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-51

Configuring a Value Display Animation


You can configure an element with a value display animation. You can either display:
z A boolean value.
z An analog value.
z A string value.
z A time value.

Configuring a Boolean Value Display Animation


You can configure an element to show a boolean value.
To configure an element with a boolean value display animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Value Display. The value display animation is added to the
animation list and the Value Display state selection panel appears.
d. Click the Boolean button.
The Boolean Value Display configuration panel appears.

e. In the Boolean box, type a boolean value, attribute reference or expression.


f. In the True Message box, type a value, attribute reference or expression for the text display
when the expression is true.
g. In the False Message box, type a value, attribute reference or expression for the text display
when the expression is false.

Note: Make sure that the input modes of the True Message and False Message are
set correctly. Click the input mode icon to set either a static value or an attribute reference or
expression.

h. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-52 Module 6 – Custom Properties and Animation

Configuring an Analog Value Display Animation


You can configure an element to show an analog value.
To configure an element with an analog value display animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Value Display. The value display animation is added to the
animation list and the Value Display state selection panel appears.
d. Click the Analog button. The Analog Value Display configuration panel appears.

e. In the Analog box, type an analog value, attribute reference or expression.


f. In the Text Format box, type a format for the value output. If you change this value, the
TextFormat property of the element also changes. For example: PV = #,###.##
g. When you are done, click OK.

Configuring a String Value Display Animation


You can configure an element to show a string value.
To configure an element with a string value display animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Value Display. The value display animation is added to the
animation list and the Value Display state selection panel appears.
d. Click the String button. The String Value Display configuration panel appears.

e. In the String box, type a string value, attribute reference or expression.


f. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-53

Configuring a Time Value Display Animation


You can configure an element to show a time value.
To configure an element with a time value display animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
c. Click the Add icon and select Value Display. The value display animation is added to the
animation list and the Value Display state selection panel appears.
d. Click the Time button. The Time Value Display configuration panel appears.

e. In the Time or Elapsed Time box, type a time or elapsed time value, attribute reference or
expression.
z In the Text Format box, type a format for the value output.
If you change this value, the TextFormat property of the element also changes.
Use the following letters to set the time format:
Abbreviation Item to Display
h hours
hh hours in double digit display
m minutes
mm minutes in double digit display
s seconds
ss seconds in double digit display
d day of month
dd day of month in double digit display
ddd day of week in short notation
dddd day of week in long notation
ampm 12 hour display
M numeral month
MM numeral month in double digit display
MMM month in 3 letter notation
MMMM month as full name
yy year in two digit display
yyyy year in four digit display

f. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-54 Module 6 – Custom Properties and Animation

Configuring a Name Display Animation


You can configure an element to show the tag name, hierarchical name or contained name of the
Automation object that is hosting it.
For example if the Automation object hosting the symbol is named Valve_001 and Valve_001 is
contained in Pump_001 and has a contained name of InletValve, then configuring an element with
the value display animation with:
z Tag Name shows Valve_001 at Runtime.
z Hierarchical Name shows Pump_001.InletValve at runtime.
z Contained Name shows InletValve at Runtime.
To configure an element with a name display animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Value Display.
The value display animation is added to the animation list and the Value Display state
selection panel appears.
d. Click the Name button.
The Name Value Display configuration panel appears.

e. Select:
z Tag Name to show the tag name of the hosting Automation object.
z Hierarchical Name to show the hierarchical name of the hosting Automation object.
z Contained Name to show the contained name of the hosting Automation object.
f. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-55

Configuring a Tooltip Animation


You can configure an element with a tooltip animation.

Note: The tooltip animation does not work with Windows Common Controls.

To configure an element with a tooltip animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Tooltip. The tooltip animation is added to the animation list and
the Tooltip configuration panel appears.

d. In the Expression box, type either:


z A static value and make sure the input mode icon is set to static.
z An attribute reference or expression and make sure the input mode icon is set to attribute
or reference.
e. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-56 Module 6 – Custom Properties and Animation

Configuring a Disablement Animation


You can configure an element with a disablement animation. This lets you disable an element
depending on a run-time value or expression.
To configure an element with a disablement animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Disable. The disablement animation is added to the animation
list and the Disable configuration panel appears.

d. In the Boolean box, type either a boolean numeric value, attribute reference or expression.
e. In the Disabled When Expression is area, select either:
z True,1, On in which case the element is disabled at Runtime whenever the expression is
true.
z False, 0, Off in which case the element is disabled at Runtime whenever the expression is
false.
f. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-57

Configuring a User Input Animation


You can configure an element with a user input animation for the following data types:
z Boolean.
z Analog (integer, float, double).
z String.
z Time.
z Elapsed time.

Configuring a User Input Animation for a Discrete Value


You can configure an element with a user input animation for a boolean value.
To configure an element with a user input animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select User Input. The user input animation is added to the animation
list and the User Input state selection panel appears.
d. Click the Boolean button. The Boolean Value User Input configuration panel appears.

e. In the Boolean box, type an attribute reference or browse for one by using the Browse button.
f. In the Message to User box, type a value, attribute reference or expression.
This is the text that appears as prompt on the boolean value input dialog box at Runtime.
g. In the Prompt - True Message box, type a value, attribute reference or expression.
This is the text that appears on the button that causes the attribute to be set to true.
h. In the Prompt - False Message box, type a value, attribute reference or expression.
This is the text that appears on the button that causes the attribute to be set to false.
i. If you want the input dialog box to appear by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
j. If required, select Input Only to suppress that the discrete value display element shows the
True Message and False Message.

InTouch® 10.0 New Features and ArchestrA Graphics


6-58 Module 6 – Custom Properties and Animation

k. In the Display Value - True Message box, type a value, attribute reference or expression.
This is the text that appears on the canvas when the associated attribute is true.
l. In the Display Value - False Message box, type a value, attribute reference or expression.
This is the text that appears on the canvas when the associated attribute is false.

m. Make sure that the input modes of all boxes are set correctly.
Click the input mode icon to set either a static value or an attribute reference or expression.
n. When you are done, click OK.

Configuring a User Input Animation for an Analog Value


You can configure an element with a user input animation for an analog value.
To configure an element with a user input animation for an analog value
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select User Input. The user input animation is added to the animation
list and the User Input state selection panel appears.
d. Click the Analog button.
The Analog Value User Input configuration panel appears.

e. In the Analog box, type an attribute reference or browse for one by using the browse button.
f. In the Message to User box, type a value, attribute reference or expression.
This is the text that appears as prompt on the analog value input dialog box at Runtime.

g. Make sure that the input mode of the Message to User box is set correctly.
Click the input mode icon to set either a static value or an attribute reference or expression.
h. If you want to restrict the range of input values, you can do so in the Value Limits area by:
z First selecting Restrict Values.
z The Typing values, attribute references or expressions for the Minimum and Maximum
boxes.

Wonderware Training
Section 2 – Animating Graphic Elements 6-59

i. If you want the input dialog box to appear by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
j. If required, select Input Only to suppress that the analog value display element shows the
analog input result on the canvas.
k. To use the keypad to type the analog value, select Use Keypad.
l. If you want to format your text during input, type a valid text format in the Text Format box.
For example: PV = #,###.##
m. When you are done, click OK.

Configuring a User Input Animation for a String Value


You can configure an element with a user input animation for a string value.
To configure an element with a user input animation for a string value
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select User Input. The user input animation is added to the animation
list and the User Input state selection panel appears.
d. Click the String button. The String Value User Input configuration panel appears.

e. In the String box, type an attribute reference or browse for one by using the browse button.
f. In the Message to User box, type a value, attribute reference or expression.
This is the text that appears as prompt on the string value input dialog box at Runtime.

g. Make sure that the input mode of the Message to User box is set correctly.
Click the input mode icon to set either a static value or an attribute reference or expression.
h. If you want the input dialog box to appear by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
i. If required, select Input Only to suppress that the string value display element shows the
string input result on the canvas.

InTouch® 10.0 New Features and ArchestrA Graphics


6-60 Module 6 – Custom Properties and Animation

j. If you want to use the keypad to type the string value, select Use Keypad.
k. If you selected Input Only and want to see placeholders during the input at Runtime, select
Echo Characters.
l. If you are configuring a password input:
z Select Password.
z Type in the replacement character in the adjacent box.
z Select Encrypt if you want to encrypt the string that holds the password.
m. When you are done, click OK.

Configuring a User Input Animation for a Time Value


You can configure an element with a user input animation for a time value.
To configure an element with a user input animation for a time value
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select User Input. The user input animation is added to the animation
list and the User Input state selection panel appears.
d. Click the Time button. The Time Value User Input configuration panel appears.

e. In the Time box, type an attribute reference or browse for one by using the browse button.
f. In the Message to User box, type a value, attribute reference or expression.
This is the text that appears as prompt on the time value input dialog box at Runtime.

g. Make sure that the input mode of the Message to User box is set correctly.
Click the input mode icon to set either a static value or an attribute reference or expression.
h. If you want the input dialog box to appear by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
i. If required, select Input Only to suppress that the time value display element shows the time
input result on the canvas.

Wonderware Training
Section 2 – Animating Graphic Elements 6-61

j. To use the current date and time as default, select Use Current Date/Time as Default.
k. Select either:
z Use Input Dialog to use the Time User Input dialog box at Runtime to type date and time
values in individual boxes.
z Use Calendar to use the Time User Input dialog box at Runtime to select a date with the
calendar control.
l. If you selected Use Input Dialog to type the time value, you can either select:
z Date and Time to type date and time.
z Date to only type a date.
z Time to only type a time.
Select Show Seconds if you also want to input seconds.
m. If you want to format your text during input, type a valid text format in the Text Format box.
For example: PV = #,###.##
n. When you are done, click OK.

Configuring a User Input Animation for an Elapsed Time Value


You can configure an element with a user input animation for an elapsed time value.
To configure an element with a user input animation for an elapsed time value
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select User Input. The user input animation is added to the animation
list and the User Input state selection panel appears.
d. Click the Elapsed Time button.
The Elapsed Time Value User Input configuration panel appears.

e. In the Elapsed Time box, type an attribute reference or browse for one by using the Browse
button.
f. In the Message to User box, type a value, attribute reference or expression. This is the text
that appears as prompt on the elapsed time value input dialog box at Runtime.

InTouch® 10.0 New Features and ArchestrA Graphics


6-62 Module 6 – Custom Properties and Animation

g. Make sure that the input mode of the Message to User box is set correctly.
Click the input mode icon to set either a static value or an attribute reference or expression.
h. If you want the input dialog box to appear by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
i. If required, select Input Only to suppress that the elapsed time value display element shows
the time elapsed input result on the canvas.
j. Select Use Dialog to use the Elapsed Time User Input dialog box to type the elapsed time
value at Runtime.
k. If you selected Use Dialog to type the elapsed time value, you can optionally select:
z Show Days if you also want to input days.
z Show Milliseconds if you also want to input milliseconds.
l. When you are done, click OK.

Configuring a Horizontal Slider Animation


You can configure an element with a horizontal slider animation. This lets you drag an element at
Runtime in horizontal direction and write a corresponding value back to an attribute.
To configure an element with a horizontal slider animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Slider Horizontal. The horizontal slider animation is added to
the animation list and the Slider Horizontal configuration panel appears.

d. In the Analog box, type an attribute reference or browse for one by using the Browse button.
e. In the Value - Left Position box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - To Left value.
f. In the Value - Right Position box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - To Right value.

Wonderware Training
Section 2 – Animating Graphic Elements 6-63

g. In the Movement - To Left box, type an analog value, attribute reference or expression for the
maximum offset to the left.
h. In the Movement - To Right box, type an analog value, attribute reference or expression for
the maximum offset to the right.
i. You can select where the cursor is anchored to the element when it is dragged at Runtime. In
the Cursor Anchor area, select either:
z Left to anchor the element at its left side.
z Center to anchor the element at its center point.
z Right to anchor the element at its right side.
z Origin to anchor the element at its point of origin.
j. You can select if position data from the slider is written continuously to the attribute, or only
once when the mouse button is released. In the Write Data area, select either Continuously
or On mouse release.
k. If you want a tooltip to appear on the element showing the current value during dragging,
select Show Tooltip.
l. If you want to preview the movement as it appears in Runtime, drag the slider in the Preview
area.

m. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-64 Module 6 – Custom Properties and Animation

Configuring a Vertical Slider Animation


You can configure an element with a vertical slider animation.
To configure an element with a vertical slider animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Slider Vertical. The vertical slider animation is added to the
animation list and the Slider Vertical configuration panel appears.

d. In the Analog box, type an attribute reference or browse for one by using the Browse button.
e. In the Value - Top Position box, type an analog value, attribute reference or expression that
corresponds to the offset specified by the Movement - Up value.
f. In the Value - Bottom Position box, type an analog value, attribute reference or expression
that corresponds to the offset specified by the Movement - Down value.
g. In the Movement - Up box, type an analog value, attribute reference or expression for the
maximum offset upwards.
h. In the Movement - Down box, type an analog value, attribute reference or expression for the
maximum offset downwards.
i. You can select where the cursor is anchored to the element when it is dragged at Runtime. In
the Cursor Anchor area, select either:
z Top to anchor the element at its top side.
z Middle to anchor the element at its middle point.
z Bottom to anchor the element at its bottom side.
z Origin to anchor the element at its point of origin.
j. You can select if position data from the slider is written continuously to the attribute, or only
once when the mouse button is released. In the Write Data area, select either Continuously
or On mouse release.
k. If you want a tooltip to appear on the element showing the current value during dragging,
select Show Tooltip.

Wonderware Training
Section 2 – Animating Graphic Elements 6-65

l. If you want to preview the movement as it appears in Runtime, drag the slider in the Preview
area.

m. When you are done, click OK.

Configuring a Pushbutton Animation


You can configure an element with a pushbutton animation to change either boolean, analog or
string references.

Configuring a Pushbutton Animation for a Boolean Value


a. You can configure an element with a pushbutton to change a boolean value.
b. To configure an element with a pushbutton animation to change a boolean value
c. Select the element you want to configure.
d. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
e. Click the Add icon and select Pushbutton. The pushbutton animation is added to the
animation list and the Pushbutton state selection panel appears.
f. Click the Boolean button.
The Boolean Pushbutton configuration panel appears.

g. In the Boolean box, type a boolean attribute reference or browse for one by using the Browse
button.

InTouch® 10.0 New Features and ArchestrA Graphics


6-66 Module 6 – Custom Properties and Animation

h. From the Action list, select either:


z Direct so the value becomes true when the element is clicked and the mouse button held.
The value returns to false when the mouse button is released.
z Reverse so the value becomes false when the element is clicked and the mouse button
held. The value returns to true when the mouse button is released.
z Toggle so the value becomes true, if it is false and false if it is true when the element is
clicked.
z Set so the value is set to true when the element is clicked.
z Reset so the value is set to false when the element is clicked.
i. If you selected Toggle as action, you can configure the value to be written, when the mouse
button is released instead. Select On button release.
j. If you selected Direct, Reverse, Reset or Set as action, you can configure the value to be
written:
z Continuously by selecting Continuously while button is pressed. Also specify the
frequency the value is to be sent, by typing a value in the Delay between value send box.
z Once by unselecting Continuously while button is pressed.
k. If you want the pushbutton action to be executed by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
l. You can preview the pushbutton run-time behavior by clicking Button in the Preview area.

m. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-67

Configuring a PushButton Animation for an Analog Value


You can configure an element with a pushbutton to set an analog value.
To configure an element with a pushbutton animation to set an analog value
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Pushbutton. The pushbutton animation is added to the
animation list and the Pushbutton state selection panel appears.
d. Click the Analog button. The Analog Pushbutton configuration panel appears.

e. In the Analog box, type an attribute reference or browse for one by using the Browse button.
f. From the Action list, select either:
z Direct so the value becomes Value1 when the element is clicked and the mouse button
held. The value returns to Value2 when the mouse button is released.
z Toggle so the value becomes Value1, if it is Value2 and Value2 if it is Value1 when the
element is clicked.
z Set so the value is set to Value1 when the element is clicked.
z Increment so the value is increased by Value1.
z Decrement so the value is decreased by Value1.
z Multiply so the value is multiplied with Value1.
z Divide so the value is divided by Value1.
g. In the boxes Value1 and, if applicable, Value2, type analog values, attribute references or
references.
h. You can configure the value to be written when the mouse button is released instead.
Select On button release. This does not apply if you selected Direct as action.
i. You can configure the value to be written:
z Continuously by selecting the Continuously while button is pressed. Also specify the
frequency the value is to be sent, by typing a value in the Delay between value send box.
z Once by unselecting the Continuously while button is pressed.
j. This does not apply if you selected Toggle as action.

InTouch® 10.0 New Features and ArchestrA Graphics


6-68 Module 6 – Custom Properties and Animation

k. If you want the pushbutton action to be executed by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
l. You can preview the pushbutton run-time behavior by clicking Button in the Preview area.
Click the button multiple times to preview the value changes over a period of time.

m. When you are done, click OK.

Configuring a PushButton Animation for a String Value


You can configure an element with a pushbutton to set a string value.
To configure an element with a pushbutton animation to set a string value
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Pushbutton. The pushbutton animation is added to the
animation list and the Pushbutton state selection panel appears.
d. Click the Analog button. The String Pushbutton configuration panel appears.

e. In the String box, type an attribute reference or browse for one by using the Browse button.
f. From the Action list, select either:
z Direct so the value becomes Value1 when the element is clicked and the mouse button
held. The value returns to Value2 when the mouse button is released.
z Toggle so the value becomes Value1, if it is Value2 and Value2 if it is Value1 when the
element is clicked
z Set so the value is set to Value1 when the element is clicked.

Wonderware Training
Section 2 – Animating Graphic Elements 6-69

g. In the boxes Value1 and, if applicable, Value2, type string values, attribute references or
references.
h. Make sure that the input modes of the Value1 and Value2 boxes are set correctly. Click the
input mode icons to set either a static values or an attribute references or expressions.
i. You can configure the value to be written when the mouse button is released instead.
Select On button release. This does not apply if you selected Direct as action.
j. You can configure the value to be written:
z Continuously by selecting the Continuously while button is pressed. Also specify the
frequency the value is to be sent, by typing a value in the Delay between value send box.
z Once by unselecting the Continuously while button is pressed.
k. This does not apply if you selected Toggle as action.
l. If you want the pushbutton action to be executed by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
m. You can preview the pushbutton run-time behavior by clicking Button in the Preview area.

n. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-70 Module 6 – Custom Properties and Animation

Configuring an Action Script Animation


You can configure an element with an action script animation.
You can assign multiple action scripts to one element that are activated in different ways, such as:
z On Primary Click/Key Down to activate the action script when the primary mouse button
or a specific key is pressed.
z While Primary Click/Key Down to activate the action script when the primary mouse
button or a specific key is pressed and held.
z On Primary Click/Key Up to activate the action script when the primary mouse button or
a specific key is released
z On Primary Double Click to activate the action script when the primary mouse button is
double-clicked.
z On Secondary Down to activate the action script when the secondary mouse button is
pressed.
z While Secondary Down to activate the action script when the secondary mouse button is
pressed and held.
z On Secondary Up to activate the action script when the secondary mouse button is
released.
z On Secondary Double Click to activate the action script when the secondary mouse
button is double-clicked.
z On Center Down to activate the action script when the center mouse button is pressed.
z While Center Down to activate the action script when the center mouse button is pressed
and held.
z On Center Up to activate the action script when the center mouse button is released.
z On Center Double Click to activate the action script when the center mouse button is
double-clicked.
z On Mouse Over to activate the action script when the mouse pointer is moved over the
element.
z On Mouse Leave to activate the action script when the mouse pointer is moved out of the
element.
z On Startup to activate the action script when the element is first shown in WindowViewer.
z While Mouse Over to activate the action script while the mouse pointer is over the
element.

Note: To expand the available space for your script you can use the expansion buttons
to hide the script header and/or the animation list.

Wonderware Training
Section 2 – Animating Graphic Elements 6-71

To configure an element with an action script animation


a. Select the element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Add icon and select Action Scripts. The action scripts animation is added to the
animation list and the Action Scripts configuration panel appears.

d. From the Trigger type list, select the trigger that activates the action script at Runtime.
e. If you selected a trigger type that starts with While, type how frequently the action script is
executed at Runtime in the Trigger period box.
f. If you selected the trigger types On Mouse Over or On Mouse Leave, type a value in the
Trigger Period box. This value specifies after what delay the action script is executed at
Runtime.
g. If you selected a trigger type that involves pressing a key, type a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
h. Create your script in the action script window.
i. When you are done, click OK.

Note: For more information about scripts, see Associating Scripts with Symbols on page 299.

InTouch® 10.0 New Features and ArchestrA Graphics


6-72 Module 6 – Custom Properties and Animation

Configuring a Show Symbol Animation


You can configure an element with a show symbol animation. A Show symbol animation shows a
specified symbol in a new window, when the element is clicked on.
You can configure:
z Which symbol appears in the new window.
z If the window has a title bar, and if so, if it has a caption.
z If the window is modal (stays on the screen maintaining focus until closed) or modeless.
z If the window has a close button.
z If the window can be resized.
z The initial window position.
z The size of the window.
To configure an element with a show symbol animation
a. Select the element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
c. Click the Add icon and select Show Symbol.
The show symbol animation is added to the animation list.

d. In the Reference box, type a symbol name or browse for one by using the Browse button.
e. If you want to add a title bar to the symbol, select Has Title Bar.
f. If you want to use the symbol name as window title,
select Use Symbol Name for Window Title.
g. Select the window type, either Modal or Modeless.
h. If you want the symbol to have a close button, select Has Close Button.
i. If you want the symbol to have resize controls, select Resizable.

Wonderware Training
Section 2 – Animating Graphic Elements 6-73

j. Select where you want the window to appear by selecting a position in the Position list.
You can select one of the following:
z Center Screen to position the symbol in the center of the screen.
z Top Left Mouse Position to position the symbol’s top left corner at the position of the
mouse pointer.
z Top Right Mouse Position to position the symbol’s top right corner at the position of the
mouse pointer.
z Bottom Left Mouse Position to position the symbol’s bottom left corner at the position of
the mouse pointer.
z Bottom Right Mouse Position to position the symbol’s bottom right corner at the position
of the mouse pointer.
z Center Mouse Position to position the symbol’s center point on the mouse pointer.
z Top Left X,Y Position to position the symbol’s top left corner at a specified position.
z Center X,Y Position to position the symbol’s center point at a specified position.
z Top of Screen to position the symbol at the top center of the screen.
z Left Side of Screen to position the symbol at the left middle of the screen.
z Right Side of Screen to position the symbol at the right middle of the screen.
z Bottom of Screen to position the symbol at the bottom center of the screen.
z Top Left Corner of Screen to position the symbol at the top left corner of the screen.
z Top Right Corner of Screen to position the symbol at the top right corner of the screen.
z Bottom Left Corner of Screen to position the symbol at the bottom left corner of the
screen.
z Bottom Right Corner of Screen to position the symbol at the bottom right corner of the
screen.
k. If you selected Top Left X,Y Position or Center X,Y Position as position, you can type the
desired coordinates in the X and Y value boxes.
l. Select how large you want the window to be in the Size list. You can select either:
z Symbol Size (1x) to make the window size the same as the size of the symbol.
z Symbol Size plus 25% (1.25x) to make the window size 25% larger than the size of the
symbol.
z Symbol Size plus 50% (1.5x) to make the window size 50% larger than the size of the
symbol.
z Symbol Size plus 75% (1.75x) to make the window size 75% larger than the size of the
symbol.
z Double Symbol Size (2x) to make the window size twice the size of the symbol.
z Triple Symbol Size (3x) to make the window size three times the size of the symbol.
z Quadruple Symbol Size (4x) to make the window size four times the size of the symbol.
z 25% Screen Size to make the window size cover 25% of the screen.
z 50% Screen Size to make the window size cover 50% of the screen.
z 75% Screen Size to make the window size cover 75% of the screen.
z Full Screen Size to make the window size cover the entire screen.
z Custom Width and Height to specify a width and height.

InTouch® 10.0 New Features and ArchestrA Graphics


6-74 Module 6 – Custom Properties and Animation

m. If you selected Custom Width and Height as size, you can type the desired width and height
in the W and H boxes.
n. If you want the symbol to be stretched to fit the window size, select Stretch symbol to fit
window size.
o. If you want the window to be stretched to fit the screen width, select Stretch window to
screen width. If the size is Custom Width and Height, you can type a value for the height in
the H box.
p. If you want the window to be stretched to fit the screen height, select Stretch window to screen
height. If the size is Custom Width and Height, you can type a value for the width in the W box.
q. If you want the symbol window to appear by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
r. When you are done, click OK.

Configuring a Hide Symbol Animation


You can configure an element with a hide symbol animation. The hide symbol animation lets you
either close:
The current symbol.
z A symbol that is shown by a specified element.
z To configure an element with a hide symbol animation
Select the element you want to configure.
a. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
b. Click the Add icon and select Hide Symbol. The hide symbol animation is added to the
animation list and the Symbol Hide configuration panel appears.

c. Select either:
z Current Symbol, if you want to close the currently shown symbol or window.
z Symbol shown by an element, if you want to close a symbol that is shown by that
element. Type the element name in the adjacent box.
d. If you want the symbol window to be hidden by pressing a key or key combination, in the
Shortcut area select a shortcut key in the Key list, and select Ctrl and/or Shift to combine the
shortcut key with the Ctrl key and/or Shift key.
e. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-75

Configuring Element-Specific Animations


Some elements have their own unique animation type that can only be used for that element type.
You cannot remove their unique animation, but depending on the element you can add and
remove other common animations.
The elements with specific animations are:
z Status Graphic.
z Windows Common Controls, such as Radio Button Group, Check Box, Edit Box, Combo
Box, Calendar, DateTime Picker and List Box.

Configuring a Status Graphic Animation


You can configure the Status Graphic element to indicate quality and status from:
z ArchestrA attributes used in elements with animation.
z ArchestrA attributes directly.
The appearance of the Status Graphic element depends on the settings in the Configure Quality
and Status Display dialog box.

Note: The Status Graphic animation is only used by the Status element and cannot be removed
from the Status element.

To configure a Status Graphic animation


a. Select the Status element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears and the Status Graphic configuration panel appears.

c. From the Available Graphic Elements list, select all elements for which you want to monitor
their attribute quality and status.
d. Click the >> button to add them to the Selected Graphic Elements list.

Note: You can click the << button to remove any elements you do not want to select.

InTouch® 10.0 New Features and ArchestrA Graphics


6-76 Module 6 – Custom Properties and Animation

e. Click the Expression tab.


The Expression panel appears.

f. In the Value or Expression list type a value or expression that can either be a literal, or a
reference or element property.

Note: You can also browse for the value or expression by clicking the browse button.

g. To add further values or expression, click the Add button.


An additional row is added for data input.
h. Click OK when finished.

Configuring a Radio Button Group Animation


The Radio Button Group animation is only used by the Radio Button Group element.
You can either create a:
z Static radio button group - uses static captions and values that you define in the
configuration panel.
z Array radio button group - uses captions and values that are contained in an Automation
Object array.
z Enum radio button group - uses captions and values that are contained in an enum data
type of an Automation Object.

Wonderware Training
Section 2 – Animating Graphic Elements 6-77

Configuring a Static Radio Button Group Animation


You can configure a radio button group with static values and captions.
To configure a static radio button group animation.
a. Select the radio button group element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the Static Radio Button Group configuration panel is shown on the right side.

c. In the Reference box, type an attribute reference to store the selected value at Runtime.
d. In the Static Values and Captions list, configure the captions of the radio button group and
also the values that correspond to them to:
z Add an option, click the Add icon.
z Delete an option, select it in the list and click the Remove icon.
z Move an option up the list, select it in the list and click the Arrow up icon.
z Move an option down the list, select it in the list and click the Arrow down icon.
e. If you want to use the values themselves as captions, select Use Values as Captions.
f. You can either orientate the radio button group in vertical or horizontal direction.
Select either Vertical or Horizontal.
g. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-78 Module 6 – Custom Properties and Animation

Configuring an Array Radio Button Group Animation


You can configure a radio button group with values from an array and captions.
To configure an array radio button group animation
a. Select the radio button group element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Array button.
The Array Radio Button Group configuration panel is shown on the right side.

d. In the Reference box, type an attribute reference to store the selected value at Runtime.
e. In the Array Reference box, type or browse for an array attribute.
The Array Values and Captions list is populated with the values from the array reference.
f. To define your own captions, unselect Use Values as Captions and type them in the list.
g. If you want to format the value before it is shown as a caption, type a text format string in the
Format box, for example #.###.
h. Set Items Sorting to either:
z None to show the items in the order they are in the enum attribute.
z Ascending to show the items sorted in ascending order.
z Descending to show the items sorted in descending order.
i. You can either orientate the radio button group in vertical or horizontal direction.
Select either Vertical or Horizontal.

Wonderware Training
Section 2 – Animating Graphic Elements 6-79

j. When you are done, click OK.

Configuring an Enum Radio Button Group Animation


You can configure a radio button group with values from an enum attribute and captions.
To configure an enum radio button group animation
a. Select the radio button group element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears.
c. Click the Enum button.
The Enum Radio Button Group configuration panel is shown on the right side.

d. In the Enum Reference box, type an enum attribute reference. The Enum Values and
Captions list is populated with the values from the enum reference.

InTouch® 10.0 New Features and ArchestrA Graphics


6-80 Module 6 – Custom Properties and Animation

e. To define your own captions, unselect Use Values as Captions and type them in the list.
f. Set Items Sorting to either:
z None to show the items in the order they are in the enum attribute.
z Ascending to show the items sorted in ascending order.
z Descending to show the items sorted in descending order.
g. You can either orientate the radio button group in vertical or horizontal direction.
Select either Vertical or Horizontal.
h. When you are done, click OK.

Configuring a Check Box Animation


The Check Box animation is only used by the Check Box element.
To configure a Check Box animation
a. Select the Check Box element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the Check Box configuration panel is shown on the right side.

c. In the Checked value - Boolean box, type an attribute reference. The attribute reference
contains the selected state of the check box control at Runtime.
d. If you want to set the caption of the check box at run-time, select Override caption at
Runtime with the following expression and type a string value or attribute reference or
expression in the String Expression box.
e. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-81

Configuring an Edit Box Animation


The Edit Box animation is only used by the Edit Box element. You cannot remove this animation
from the Edit Box element, but you can add certain common animations.
You can also use Edit Box-specific methods in scripting to load and save the text at Runtime. You
can browse these methods in the Galaxy Browser with the Edit Box selected.
To configure an Edit Box animation
a. Select the Edit Box element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the Edit Box configuration panel is shown on the right side.

c. In the String Reference box, type an string attribute reference.


The string attribute reference contains the text in the edit box at Runtime.
d. In the Configuration area, select:
z Multiline to wrap the text in the edit box.
z Read-Only to use the edit box to only show text and not allow text input.
z Maximum Length to limit the maximum numbers of characters you can type in the edit
box control. You can specify the maximum number in the Characters box.
You can enter a default text in the Text box.

Configuring a Combo Box Animation


The Combo Box animation is only used by the Combo Box element.
You can either create a:
z Static Combo Box - uses static captions and values that you define in the configuration
panel.
z Array Combo Box - uses captions and values that are contained in an Automation object
array.
z Enum Combo Box - uses captions and values that are contained in an enum data type of
an Automation object.
You can also use Combo Box-specific methods in scripting to perform various functions at
Runtime. You can browse these methods in the Galaxy Browser with the Combo Box selected.

InTouch® 10.0 New Features and ArchestrA Graphics


6-82 Module 6 – Custom Properties and Animation

Configuring a Static Combo Box Animation


You can configure a combo box with static values and captions.
To configure a static combo box animation
a. Select the radio button group element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the Static Combo Box configuration panel is shown on the right side.

c. In the Reference box, type an attribute reference to store the selected value at Runtime.
d. In the Static Values and Captions list, configure the captions of the combo box and also the
values that correspond to them:
z Add an option, click the Add icon.
z Delete an option, select it in the list and click the Remove icon.
z Move an option up the list, select it in the list and click the Arrow up icon.
z Move an option down the list, select it in the list and click the Arrow down icon.
e. If you want to use the values themselves as captions, select Use Values as Captions.
f. If you want to alphabetically sort the captions, select Sorted.
g. If you want to allow duplicate captions, select Allow Duplicates.
h. You can select the type of combo box from the Type list. Select either:
z Simple - at Runtime you can type a value, but not select any.
z DropDown - at Runtime you can either type a value, or select one from the list.
z DropDownList - at Runtime you can only select a value from the list, but not type one.
i. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-83

Configuring an Array Combo Box Animation


You can configure a combo box with values from an array and captions.
To configure an array radio button group animation
a. Select the radio button group element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Array button. The Array Combo Box configuration panel is shown on the right side.

d. In the Reference box, type an attribute reference to store the selected value at Runtime. The
Array Values and Captions list is populated with the values from the array reference.
e. To define your own captions, unselect Use Values as Captions and type them in the list.
f. If you want to format the value before it is shown as a caption, type a text format string in the
Format box, for example #.###.
g. Set Items Sorting to either:
z None to show the items in the order they are in the enum attribute.
z Ascending to show the items sorted in ascending order.
z Descending to show the items sorted in descending order.
h. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-84 Module 6 – Custom Properties and Animation

Configuring an Enum Combo Box Animation


You can configure a combo box with values from an enum attribute and captions.
To configure an enum combo box animation
a. Select the combo box element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Enum button.
The Enum Combo Box configuration panel is shown on the right side.

d. In the Enum Reference box, type an enum attribute reference.


The Enum Values and Captions list is populated with the values from the enum reference.
e. To define your own captions, unselect Use Values as Captions and type them in the list.
f. Set Items Sorting to either:
z None to show the items in the order they are in the enum attribute.
z Ascending to show the items sorted in ascending order.
z Descending to show the items sorted in descending order.
g. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-85

Configuring a Calendar Control Animation


The Calendar Control animation is only used by the Calendar Control element.
To configure a Calendar control animation
a. Select the Calendar control element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the Calendar configuration panel is shown on the right side.

c. In the Date Reference box, type a Time attribute reference to store the selected value at
Runtime.
d. If you want to restrict the date the user can select at Runtime, you can specify limits as follows:
z In the MinDate box, type a lower limit for the date.
z In the MaxDate box, type an upper limit for date.
e. If you want some dates to appear bold, in the Bolded Dates box type a reference that points
to an attribute array with time data type.
f. If you want today’s date shown on the calendar control, select Show Today.

g. If you want to change the colors of the calendar control, click in the Calendar Colors area the
following color boxes:
z Month Background.
z Month Trailing Forecolor.
z Title Background.
z Title Foreground.
The style selection dialog box appears and you can select a solid color.
h. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-86 Module 6 – Custom Properties and Animation

Configuring a DateTime Picker Animation


The DateTime Picker animation is only used by the DateTime Picker element.
To configure a DateTime Picker animation
a. Select the DateTime Picker control element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the DateTime Picker configuration panel appears.

c. In the Time Reference box, type a Time attribute reference to store the selected value at
Runtime.
d. To set the datetime format, select from the Format list one of the following:
z Long to show the date and time in the dddd MMMM dd, yyyy format, for example:
Thursday, August 03 2006.
z Short to show the date and time in the dd/MM/yyyy format, for example: 8/3/2006.
z Time to show just the time in the hh:mm:ss format, for example: 3:46:09 PM.
z Custom to specify your own time format. Use the following letters to set the time format.

Note: The formats are listed on page 6-53.

e. If you want to restrict the date the user can select at Runtime, you can specify limits in the:
z MinDate box - type a lower limit for the date.
z MaxDate box - type an upper limit for date.
z If you want to change the colors of the calendar control that drops down, click in the
Calendar Colors area the following color boxes:
z Month Background.
z Month Trailing Forecolor.
z Title Background.
z Title Foreground.
The style selection dialog box appears and you can select a solid color.

Wonderware Training
Section 2 – Animating Graphic Elements 6-87

Configuring a List Box Animation


The List Box animation is only used by the List Box element.
You can either create a:
z Static List Box - uses static captions and values you define in the configuration panel.
z Array List Box - uses captions and values contained in an Automation object array.
z Enum List Box - uses captions and values contained in an enum data type of an
Automation object.
You can also use List Box-specific methods in scripting to perform various functions at Runtime.
You can browse these methods in the Galaxy Browser with the List Box selected.

Configuring a Static List Box Animation


You can configure a list box with static values and captions.
To configure a static list box animation
a. Select the list box element you want to configure.
b. On the Special menu, click Edit Animations. The Edit Animations dialog box appears and
the Static List Box configuration panel is shown on the right side.

c. In the Reference box, type an attribute reference to store the selected value at Runtime.
d. In the Static Values and Captions list, configure the captions of the list box and also the
values that correspond to them. To:
z Add an option, click the Add icon.
z Delete an option, select it in the list and click the Remove icon.
z Move an option up the list, select it in the list and click the Arrow up icon.
z Move an option down the list, select it in the list and click the Arrow down icon.
e. If you want to use the values themselves as captions, select Use Values as Captions.
f. If you want to alphabetically sort the captions, select Sorted.
g. If you want to allow duplicate captions, select Allow Duplicates.
h. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-88 Module 6 – Custom Properties and Animation

Configuring an Array List Box Animation


You can configure a list box with values from an array and captions.
To configure an array list box animation
a. Select the list box element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Array button.
The Array List Box configuration panel is shown on the right side.

d. In the Reference box, type an attribute reference to store the selected value at Runtime.
e. In the Array Reference box, type or browse for an array attribute. The Array Values and
Captions list is populated with the values from the array reference.
f. To define your own captions, unselect Use Values as Captions and type them in the list.
g. If you want to format the value before it is shown as a caption, type a text format string in the
Format box, for example #.###.
h. Set Items Sorting to either:
z None to show the items in the order they are in the enum attribute.
z Ascending to show the items sorted in ascending order.
z Descending to show the items sorted in descending order.
i. When you are done, click OK.

Wonderware Training
Section 2 – Animating Graphic Elements 6-89

Configuring an Enum List Box Animation


You can configure a list box with values from an enum attribute and captions.
To configure an enum list box animation
a. Select the radio button group element you want to configure.
b. On the Special menu, click Edit Animations.
The Edit Animations dialog box appears.
c. Click the Enum button.
The Enum List Box configuration panel is shown on the right side.

d. In the Enum Reference box, type an enum attribute reference. The Enum Values and
Captions list is populated with the values from the enum reference.
e. To define your own captions, unselect Use Values as Captions and type them in the list.
f. Set Items Sorting to either:
z None to show the items in the order they are in the enum attribute.
z Ascending to show the items sorted in ascending order.
z Descending to show the items sorted in descending order.
g. When you are done, click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


6-90 Module 6 – Custom Properties and Animation

Submitting the Value Changes


You can configure a Windows Common Control to write the data either:
z Immediately when it is selected in the control at Runtime.
z When a specified boolean expression becomes true.

Note: The boolean expression is a trigger that determines when the value is written from the
control to the tag or attribute. If the value changes in the tag or attribute, then the value is
written to the control, regardless of the trigger setting or condition.

To submit value changes immediately


a. Open the Windows common control in the Edit Animations dialog box.
b. In the Submit Value Changes area, select Immediately.
To submit value changes after a boolean expression becomes true
a. Open the Windows common control in the Edit Animations dialog box.
b. In the Submit Value Changes area, select On Trigger Condition.
c. In the Boolean Expression box, type a boolean expression or browse for a boolean attribute.

Cutting, Copying and Pasting Animations


You can cut, copy and paste animations and their configuration between different elements. This
is useful when you want to duplicate the animations of one element, such as a line, to a different
type of element, such as a polyline.

Note: If you try to paste an animation to an element that is already configured with that animation,
an appropriate dialog box appears.

To copy and paste animations between elements


a. Select the element from which you want copy the animations.
b. On the Edit menu, point to Animations, and then click Copy.
c. Select one or more elements to which you want to paste the animations.
d. On the Edit menu, point to Animations, and then click Paste.
The animation links are copied from the source element to the target element(s).

Wonderware Training
Section 2 – Animating Graphic Elements 6-91

To cut and paste animations between elements


a. Select the element from which you want to cut the animations.
b. On the Edit menu, point to Animations, and then click Cut.
c. Select one or more elements to which you want to paste the animations.
d. On the Edit menu, point to Animations, and then click Paste.
The animation links are removed from the source element and copied to the target element(s).

Substituting References in Elements


You can search and replace references that are used by any element on your canvas. You can
either use:
z basic mode by replacing strings in a list.
z advanced functions such as find and replace, ignore or respect case-sensitivity and
wildcards.
To substitute references in a symbol by using the list
a. Select one or more elements.

b. On the Special menu, click Substitute References.


The Substitute References dialog box appears.

c. In the New column, type the reference to be replaced.


d. When you are done, click OK.
All references are substituted accordingly in the elements.
To substitute references in a symbol by using advanced functions
a. Select one or more elements.
b. On the Special menu, click Substitute References.
The Substitute References dialog box appears.

InTouch® 10.0 New Features and ArchestrA Graphics


6-92 Module 6 – Custom Properties and Animation

c. Click on Find & Replace. The dialog box is expanded and shows advanced functions.

d. If you want to find specific references in the list, type a string in the Find What box and click
Find Next to find the next string.
e. If you want to replace a selected found string with another string, type a string in the Replace
with box and click Replace.
f. If you want to replace multiple references, type values in the Find What and Replace with
boxes and click Replace all.
g. If you want the search to be case-sensitive, select Match Case.
h. If you only want whole words that match your search string to be found, select Match Whole
Word Only.
i. If you want to use wildcards, select Use Wildcards.
Valid wildcards are “*” (asterisk) and “?” (question mark).
j. When you are done, click OK.
All text strings are substituted accordingly in the elements.

Wonderware Training
Lab 3 – Adding Custom Properties and Animation 6-93

Lab 3 – Adding Custom Properties and


Animation
Introduction
In the last lab you created a new tank symbol in the ArchestrA Symbol editor. In this lab, you will
add custom properties to the tank symbol and bind these custom properties to attributes of the
tank symbol. Then you will rename and add animations to the elements in the tank symbol.

Objectives
Upon completion of this lab, you will be able to:
z Create custom properties
z Bind custom properties to attributes of an object
z Create and apply animation to an object

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. Open the SimpleTank symbol you created in the previous lab.


b. Add the following Custom Properties:

Property Name Data Type Default Value Visibility


InletValve Boolean InTouch:InletValve Public
OutletValve Boolean InTouch:OutletValve Public
Level Float InTouch:Level Public

c. Rename the SimpleTank elements with more descriptive names.


d. Add the following animations to the SimpleTank elements.

Element Animation Type Expression Other Details as Appropriate


Inlet Pipe Visibility InletValve
Outlet Pipe Visibility OutletValve
Level Indicator % Fill Vertical Level

e. Add a Value Display animation to the Text Box on the tank to show the Level.
f. Save and Close when finished and verify that the object is Checked In.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


6-94 Module 6 – Custom Properties and Animation

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Add Custom Properties to the Tank Object


1. If not already open, launch the ArchestrA IDE and connect to your Galaxy.
2. Click the Graphic Toolbox tab.
3. Double-click the SimpleTank object to edit the object.
4. In the Symbol Editor, deselect all elements by clicking on the blank area of the Canvas.
5. Click CustomProperties in the Custom Properties panel in the right pane.
6. Click the Ellipsis button.

7. Click the Add custom property button.

8. Add the following custom properties:

Property Name Data Type Default Value Visibility


InletValve Boolean InTouch:InletValve Public
OutletValve Boolean InTouch:OutletValve Public
Level Float InTouch:Level Public

Wonderware Training
Lab 3 – Adding Custom Properties and Animation 6-95

9. Verify that the Default Values are the same as those shown below:

10. Click OK.


You will now see this list of Custom Properties in the lower right pane.

InTouch® 10.0 New Features and ArchestrA Graphics


6-96 Module 6 – Custom Properties and Animation

Rename the Elements of the Tank Object


You can select elements either by selecting the shape (pipe, for example) on the canvas or by
selecting the element name from the Elements list in the left pane. By default, elements are
named based on the tool used to draw them, for example, “line01” or “ellipse02” and so on.
Elements can be renamed to better describe what the element represents.
Follow steps 11–13 to rename the following elements in the SimpleTank symbol:

InletPipe_Inside
LevelIndicator

InletPipe_Outside

LevelDisplay OutletPipe_Inside

OutletPipe_Outside
Tank

11. Click the shape on the canvas.


12. Click Name in the Graphic panel in the right pane.

13. Double-click on the default element name and enter the new name.

Note: You can also click the element name in the Elements list and enter a new name.

Note: Your elements may be in a different order than shown above, depending on how you drew
the tank objects in Lab 2.

Wonderware Training
Lab 3 – Adding Custom Properties and Animation 6-97

Animate the Elements of the Tank Object


14. Using the criteria in the following table, animate the elements of the tank object.

Element Animation Type Expression Other Details as Appropriate


Inlet Pipe Visibility InletValve
Outlet Pipe Visibility OutletValve
Level Indicator % Fill Vertical Level At Max Fill: 250
Apply a Fill Color and UnFilled Color

Select the element you want to animate, and then click the Add Animation button (plus sign)
in the Animations panel in the lower right pane.

Note: The Animations panel is only visible after you select an element.

15. Verify that the following three animations are applied to the appropriate Elements.

InTouch® 10.0 New Features and ArchestrA Graphics


6-98 Module 6 – Custom Properties and Animation

Note: You can test your animation configuration using the Preview section in the lower right
corner.

Wonderware Training
Lab 3 – Adding Custom Properties and Animation 6-99

Add a Value Display animation to the Text Box on the Tank object.
16. Select the Text Box on the Tank object.

17. Click the Add Animations + button in the lower right pane.
18. Select Value Display.

19. Click the Analog button.

InTouch® 10.0 New Features and ArchestrA Graphics


6-100 Module 6 – Custom Properties and Animation

20. Enter Level as the Expression and #.# as the Text Format.

21. Click OK when finished.


22. Save and close the SimpleTank symbol and Check In.

Wonderware Training
Lab 4 – Animating ArchestrA Symbols in InTouch 6-101

Lab 4 – Animating ArchestrA Symbols in


InTouch
Introduction
In previous labs you created an InTouch application named $TankApp and then created and
animated an ArchestrA symbol named SimpleTank. In this lab, you will place the SimpleTank
symbol in the InTouch application and test it.

Objectives
Upon completion of this lab, you will be able to:
z Embed an ArchestrA Symbol in an InTouch application

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. Open the $TankApp application and add a new window called TankDisplay.
b. Create the following InTouch tags in the Tagname Dictionary:

Tag Name Tag Type Min Value Max Value


InletValve Memory Discrete
OutletValve Memory Discrete
Level Memory Real 0 250

c. Add the following graphics to the new window:


z Button to open/close InletValve and substitute string to Inlet
z Button to open/close OutletValve and substitute string to Outlet
z Vertical Slider with a range of 0–250 to control the Level
d. Place the SimpleTank symbol created in the previous lab onto the TankDisplay window, and
select the appropriate tags for the buttons and slider.
e. Test in Runtime.
f. Close WindowViewer and WindowMaker when finished.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


6-102 Module 6 – Custom Properties and Animation

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Open and Configure an InTouch Application


1. If it is not already open, launch the ArchestrA IDE.
2. Double-click the $TankApp template to open its InTouch application.
3. In WindowMaker, create a New Window named TankDisplay.
4. From the main menu, select Special / Tagname Dictionary and add the following
Memory Type tags in the Tagname Dictionary for the tank:

Tag Name Tag Type Min Value Max Value


InletValve Memory Discrete
OutletValve Memory Discrete
Level Memory Real 0 250

250

Wonderware Training
Lab 4 – Animating ArchestrA Symbols in InTouch 6-103

5. Close the Tagname Dictionary.


6. Add the following graphics to the new window as shown below.

Expression Substitute
Create Purpose Animation Type
or Tag String to:
Button Open/Close Inlet Valve Pushbutton – InletValve Toggle Inlet
Discrete Value
Button Open/Close Outlet Valve Pushbutton – OutletValve Toggle Outlet
Discrete Value
Vertical Slider Control the Level Level

7. Configure the slider with a range of 0–250.

8. Click the Embed ArchestrA Graphic button on the menu bar.


9. In the Galaxy Browser, select the SimpleTank symbol created in a previous lab.

InTouch® 10.0 New Features and ArchestrA Graphics


6-104 Module 6 – Custom Properties and Animation

10. Place the Tank into your new window and resize as necessary.

11. Go to Runtime.
z Open and close the Inlet Valve.
z Open and close the Outlet Valve.
z Move the slider to verify the level changes.

12. Close WindowViewer and WindowMaker and Check In the object.

Wonderware Training
Module 7

Scripting
Section 1 – Scripting with ArchestrA Symbols 7-3
Lab 5 – Associating Scripts with ArchestrA Symbols 7-15
7-2 Module 7 – Scripting

Module Objectives
z Configure scripting for ArchestrA Symbols using the ArchestrA IDE.
z Associate scripts with symbols using InTouch.

Wonderware Training
Section 1 – Scripting with ArchestrA Symbols 7-3

Section 1 – Scripting with ArchestrA Symbols

Section Objective
z Describe the types of scripts that can be associated with symbols and how to configure
them.
z Explain the use of Methods in scripting.

This section shows you how to associate symbols with one or more scripts. Scripts can run code
that animate the symbol or its elements, and perform many other tasks.

About Symbol Scripts


You can configure your symbol with scripts that can be executed in Runtime. Symbol scripts can
either be:
z Predefined
z Named
Predefined scripts are similar to InTouch window scripts in that they are executed either:
z Once when the symbol is shown or opened
z Periodically while the symbol is showing
z Once when the symbol is hidden or closed
z Any combination of the above
Named scripts let you execute any number of scripts in Runtime that are triggered by values or
expressions:
z Being true: While True
z Being false: While False
z Transitioning from false to true: On True
z Transitioning from true to false: On False
z Changing in value or quality: DataChange

Note: Any named script that is triggered by the DataChange trigger type is executed the first time
the symbol is shown. This behavior is different than the DataChange trigger behavior of Industrial
Application Server scripts.

For more information about Industrial Application Server scripting, see the Industrial Application
Server User’s Guide.
You can:
z Configure the predefined scripts of a symbol
z Add named scripts to a symbol
z Edit existing named or predefined scripts in a symbol
z Rename named scripts in a symbol
z Remove named scripts from a symbol
z Substitute references in named or predefined scripts
z Use Element Methods in named or predefined scripts

InTouch® 10.0 New Features and ArchestrA Graphics


7-4 Module 7 – Scripting

Configuring the Predefined Scripts of a Symbol


You can configure the predefined scripts of a symbol. The predefined scripts can consist of:
z A script that is run once when the symbol opens.
z A script that is run periodically as long as the symbol is open.
z A script that is run once when the symbol closes.

Note: The Predefined Scripts animation cannot be deleted. It can contain scripts for each trigger
type On Show, While Showing and On Hide.

To configure the predefined scripts for a symbol


a. Open the symbol in the ArchestrA Symbol Editor.
b. On the Special menu, click Scripts.
The Edit Scripts dialog box appears.

c. From the Trigger Type list, select either:


z On Show to configure a script that is executed once when the symbol is opened.
z While Showing to configure a script that is executed every so often while the symbol is
open.
z On Hide to configure a script that is executed once when the symbol is closed.
d. If you configured a While Showing script, type a time period in milliseconds in the Period box.
This specifies after how many milliseconds the action script is executed.
e. Type your script in the main edit box.
f. Use the Script Function Browser and Attribute Browser to select external data.
g. When you are done, click OK.
The script editor checks the syntax of the script and may inform you of invalid syntax.
Either click:
z Yes to save changes even if the script contains errors.
z No to not save the changes and close the script dialog box.
z Cancel to not save the changes and keep the script dialog box open.

Wonderware Training
Section 1 – Scripting with ArchestrA Symbols 7-5

Adding Named Scripts to a Symbol


You can add named scripts to a symbol. These can either be run:
z Once when the specified values, data or expressions change.
z Periodically if the values or expressions fulfill a certain criteria, such as being true.

Note: Every named script can contain only one trigger type.

To add a named script to a symbol


a. Open the symbol in the ArchestrA Symbol Editor.
b. On the Special menu, click Scripts.
The Edit Scripts dialog box appears.
c. Click the Add icon.
A new entry is created in the Named Scripts list on the left of the panel.

d. Type a name for the named script.


The name appears on the right panel as header.

e. In the Expression field, either:


z Type an expression, value or reference.
z Browse for a reference.
f. The expression acts as data source for the script trigger.

InTouch® 10.0 New Features and ArchestrA Graphics


7-6 Module 7 – Scripting

g. In the Trigger box, select either:


z WhileTrue to trigger the script periodically when the expression is true.
z WhileFalse to trigger the script periodically when the expression is false.
z OnTrue to trigger the script once when the expression becomes true from false.
z OnFalse to trigger the script once when the expression becomes false from true.
z DataChange to trigger the script once when the expression or its quality changes.
h. If you selected DataChange, select Quality Changes to trigger the script when the quality of
the specified expression changes.
i. If required, in the Trigger Period box, type a time delay in milliseconds.
The time delay specifies how often the script is run when the trigger condition is fulfilled.
j. If required, in the Deadband box, type the deadband value. The deadband specifies by how
much the expression must change before the script is executed.
k. Type your script in the main edit box.
l. Use the Script Function Browser and Attribute Browser to select external data.
m. When you are done, click OK.
The script editor checks the syntax of the script and may inform you of invalid syntax.
Either click:
z Yes to save changes even if the script contains errors.
z No to not save the changes and close the script dialog box.
z Cancel to not save the changes and keep the script dialog box open.
Example:
While the boolean Controls.FillTank is true, the tank level Tank_001.pv is increased by 1 unit
every second.

Wonderware Training
Section 1 – Scripting with ArchestrA Symbols 7-7

Editing Scripts Associated with a Symbol


You can edit predefined and named scripts that are already associated with a symbol.
To edit scripts that are already associated with a symbol
Open the symbol in the ArchestrA Symbol Editor.
a. On the Special menu, click Scripts.
The Edit Scripts dialog box appears.
b. Select the script from the list in the left of the panel.
The right is populated with the script configuration.
c. If you are editing the predefined script, select from the TriggerType list either:
z On Show if the action script you want to edit is executed once when the symbol is
opened.
z While Showing if the action script you want to edit is executed every so often while the
symbol is open.
z On Hide if the action script you want to edit is executed once when the symbol is closed.
d. Edit the action script in the script box.
e. When you are done, click OK.

Renaming Scripts in a Symbol


You can rename named scripts in a symbol. When you rename the named script, the functionality
of the associated script does not change.
To rename a named
a. Open the symbol in the ArchestrA Symbol Editor.
b. On the Special menu, click Scripts.
The Edit Scripts dialog box appears.
c. From the Named Scripts list, click the script you want to rename.
d. Click the script again.
It appears in edit mode.
e. Enter a new name for the script and press Enter.
The script is renamed.

InTouch® 10.0 New Features and ArchestrA Graphics


7-8 Module 7 – Scripting

Removing Scripts from a Symbol


You can remove predefined or named scripts that are already associated with a symbol.
To remove predefined scripts that are already associated with a symbol
a. Open the symbol in the ArchestrA Symbol Editor.
b. On the Special menu, click Scripts.
The Edit Scripts dialog box appears.
c. Select Predefined Scripts from the list.
d. From the Trigger Type list, select either:
z On Show if the action script you want to remove is executed once when the symbol is
opened.
z While Showing if the action script you want to remove is executed every so often while
the symbol is open.
z On Hide if the action script you want to remove is executed once when the symbol is
closed.
e. Delete all the script in the script box.
f. When you are done, click OK.
To remove named scripts that are already associated with a symbol
a. Open the symbol in the ArchestrA Symbol Editor.
b. On the Special menu, click Scripts.
The Edit Scripts dialog box appears.
c. Select the named script from the list.

d. Click the Remove icon.


A confirmation dialog box appears.
e. Click Yes.
The script is removed.

Substituting Attribute References in Scripts


You can substitute attribute references in scripts in the same way as you would with attribute
references in elements. For more information, see Substituting References in Elements page 6-
91.

Example: Changing Element Properties using Scripts


You can change some of the properties of elements using scripting. This lets you configure
additional run-time animation to your elements on top of the design-time animation of those
elements.
When you write your script for the symbol or for one of its elements, you can use the Galaxy
Browser to show and select either a:
z Property of an element.
z Custom property of the symbol.

Wonderware Training
Section 1 – Scripting with ArchestrA Symbols 7-9

To select an element property or a symbol custom property

a. From the script window, click the Galaxy Browser icon.


The Galaxy Browser dialog box appears.
b. Click the Element Browser tab.
The Galaxy Browser is populated with the element names and the properties of the selected
element.

c. Select an element or symbol from the list on the left.


The right side is populated with the properties of the selected element or symbol.
d. Select a property from the right panel and click OK.
The reference is pasted into the script window.

InTouch® 10.0 New Features and ArchestrA Graphics


7-10 Module 7 – Scripting

Using Methods in Scripting


Some elements, such as the Edit Box, Combo Box and List Box controls, support methods in
scripting. These methods can be used to perform various functions on the elements themselves at
Runtime.
You can see the properties and methods that are supported by any given element by opening the
Galaxy Browser and selecting the element.

You can use the methods of the:


z Edit Box control to save and load the text at Runtime to and from a file.
z Combo Box and List Box controls to access and change the contents of their lists at
Runtime.

Configuring Edit Box Methods


You can use the methods of an Edit Box control to:
z Save the contained text at Runtime to a file.
z Load text into the control from a file at Runtime.
To save the contained text in an Edit Box control
In an action script, use the following method:
ControlName.SaveText(FileName);
where ControlName is the name of the Edit Box control and FileName is the name of the file
you want to save the contents of the control to.
The text contained in the control at Runtime is saved to the specified file.
To load text into an Edit Box control from a file
In an action script, use the following method:
ControlName.LoadText(FileName);
where ControlName is the name of the Edit Box control and FileName is the name of the file
you want to load the text from.
The text contained in the file is loaded into the Runtime contents of the Edit Box control.

Wonderware Training
Section 1 – Scripting with ArchestrA Symbols 7-11

Configuring Combo Box and List Box Methods


The Combo Box and List Box controls have methods which you can use to access and change
the items in the list at Runtime. Typically, you would configure an action script to access these
methods.
You can:
z Add and inserting items into the list.
z Delete individual or all items from the list.
z Find an item in the list.
z Get the item caption based on a specified index.
z Associate the items with values.
z Load items from and save items to a file.

Adding and Inserting Items into a List


You can add an individual item:
z To the end of the list.
z Above the currently selected item.
To add an item to a Combo Box or List Box list
In an action script, use the following method:
ControlName.AddItem(“ItemCaption”);
where ControlName is the name of the Combo Box or List Box control and ItemCaption is the
new item you want to add.
The item is added to the end of the list.
To insert an item in a Combo Box or List Box list
In an action script, use the following method:
Controlname.InsertItem(“ItemCaption”);
where ControlName is the name of the Combo Box or List Box control and ItemCaption is the
new item you want to insert.
The item is inserted above the currently selected item in the list.

InTouch® 10.0 New Features and ArchestrA Graphics


7-12 Module 7 – Scripting

Deleting Items from a List


You can delete:
z An individual item from a list.
z The selected item from a list.
z All items from a list.
To delete an individual item from a Combo Box or List Box list
In an action script, use the following method:
ControlName.DeleteItem(Index);
where ControlName is the name of the Combo Box or List Box control and Index is the index
of the item you want to delete.
The item at the specified index is deleted, subsequent items are moved up the list.
To delete the selected item from a Combo Box or List Box list
In an action script, use the following method:
ControlName.DeleteSelection();
where ControlName is the name of the Combo Box or List Box control.
The selected item is deleted, subsequent items are moved up the list.
To delete all items from a Combo Box or List Box list
In an action script, use the following method:
Controlname.Clear();
where ControlName is the name of the Combo Box or List Box control.
All items of the control are deleted.

Finding an Item in a List


You can find a item in a Combo Box or List Box list. You need to specify the item caption and the
method returns the index number if the item is found, otherwise -1.
Finding an item in a Combo Box or List Box list
In an action script, use the following method:
Index = ControlName.Find(“ItemCaption”);
where ControlName is the name of the Combo Box or List Box control and ItemCaption is the
caption of the item you are looking for.
Index is set to -1 if the item is not found, otherwise contains the index of the found item.

Wonderware Training
Section 1 – Scripting with ArchestrA Symbols 7-13

Reading the Caption of a Selected Item in a List


You can read the caption of a selected item in a Combo Box or List Box list.
Reading the caption of a selected item in a Combo Box or List Box list
In an action script, use the following method:
Caption = Controlname.GetItem(Index);
where ControlName is the name of the Combo Box or List Box control and Index is the index
of the item for which you want to read the caption.
Caption contains the item caption of the specified index.

Associating Items with Values in a List


You can associate items with values in a Combo Box or List Box control. This is the same as using
a secondary index system to identify items in the list.
You can either:
z Set Item Data, which associates an item with a value.
z Get Item Data, which returns the value that is associated with an item.
To set item data in a Combo Box or List Box list
In an action script, use the following method:
Controlname.SetItemData(Index,Value);
where ControlName is the name of the Combo Box or List Box control, Index is the index of
the item that you want to set and Value is the value you want to assign to the item.
To get item data in a Combo Box or List Box list
In an action script, use the following method:
Value = Controlname.GetItemData(Index);
where ControlName is the name of the Combo Box or List Box control and Index is the index
of the item for which you want to get the value.
Value contains the value that is assigned to the item.

InTouch® 10.0 New Features and ArchestrA Graphics


7-14 Module 7 – Scripting

Loading and Saving Item Lists


You can load and save all items in a list from and to a file.
To load the item list for a Combo Box or List Box control from a file
In an action script, use the following method:
Controlname.LoadList(FileName);
where ControlName is the name of the Combo Box or List Box control and FileName is the
name of a file on the local hard drive or on the network.
The list contained in the file is loaded and, if valid, the current list is overwritten.
To save the item list for a Combo Box or List Box control to a file
In an action script, use the following method:
Controlname.SaveList(FileName);
where ControlName is the name of the Combo Box or List Box control and FileName is the
name of a file on the local hard drive or on the network.
The list is saved to the specified file.

Wonderware Training
Lab 5 – Associating Scripts with ArchestrA Symbols 7-15

Lab 5 – Associating Scripts with ArchestrA


Symbols
Introduction
In this lab, you will enhance the animation capabilities of ArchestrA Symbols by using scripting.
You will add a script to the SimpleTank symbol, which you created and modified in previous labs,
to display the Level as Gallons. This Level conversion is calculated using a simple script and is
only available within the symbol itself. You will then create a new symbol for the Reactor Demo
application, which you imported in Lab 1, and add scripts to the symbol to Grow and Shrink the
symbol in Runtime.

Objectives
Upon completion of this lab, you will be able to:
z Configure a Data Change script to calculate Gallons based on the Level
z Configure a script to Grow and Shrink an ArchestrA Symbol

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. Open the SimpleTank symbol and add a new private Custom Property called Gals with Data
Type as Double.
b. Add a second Text Box and add a Value Display Animation to display Gals.
c. Add the following Data Change Script named LeveltoGals that is triggered from the Custom
Property Level.
Gals = Level * 0.26472;
d. Save the symbol and test it in Runtime. Check In $TankApp when done.
e. Create and open a new symbol named AnalogMeter_Round.
f. Embed the AnalogMeterRound symbol from the ArchestrA Symbol Library, and then
rename it Meter.
g. Set the Runtime Behavior property TreatAsIcon to True.
h. Add the following private Custom Properties:

Custom Property Name Data Type


GrowMe Boolean
ShrinkMe Boolean
InitialSize Integer
GrowSize Integer

i. Add the following OnShow script:


InitialSize = Meter.Height;
GrowSize = Meter.Height * 3;

InTouch® 10.0 New Features and ArchestrA Graphics


7-16 Module 7 – Scripting

j. Add the following Action Scripts:

Trigger Type Delay Script


On Mouse Over 500 ms GrowMe = True;
ShrinkMe = False;
On Mouse Leave 500 ms GrowMe = False;
ShrinkMe = True;

k. Add the following Named Scripts

Name Expression Trigger Period Script


GrowMeter GrowMe While True 50 ms Meter.Height = Meter.Height * 1.10;
Meter.Width = Meter.Height;
If Meter.Height >= GrowSize then
GrowMe = False;
Endif;
ShrinkMeter ShrinkMe While True 50 ms Meter.Height = Meter.Height / 1.10;
Meter.Width = Meter.Height;
If Meter.Height <= InitialSize then
ShrinkMe = False;
Endif;

l. Save and Close the symbol and launch the $ReactorApp application.
m. Embed an instance of the AnalogMeter_Round symbol next to the reactor, and resize it to
approximately 40x40.
n. Configure the following Custom Properties in the symbol instance:
Meter.Max = 2000
Meter.Value = ReactLevel
o. Test the symbol in Runtime.

See the next page for Detailed Lab Instructions

Wonderware Training
Lab 5 – Associating Scripts with ArchestrA Symbols 7-17

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Add a Value Display Animation on the Tank Object


1. If the IDE is not open, launch the ArchestrA IDE and connect to your Galaxy.
2. In the Graphic Toolbox, double-click SimpleTank to edit the symbol.

Note: You can get to the ArchestrA Symbol Editor through the ArchestrA IDE or by right-
clicking the symbol in WindowMaker.

3. Deselect all objects.


4. Add a new Custom Property called Gals.
Select the Data Type Double and make it Private for this symbol.

Note: For a review of adding Custom Properties, please see steps 2 - 9 in Lab 3.

5. Add an additional Text Box to the Tank Object by copying or duplicating the existing one.

6. Change the Value Display Animation on this new field to show Gals.

InTouch® 10.0 New Features and ArchestrA Graphics


7-18 Module 7 – Scripting

Add a Data Change Script


7. Open the Script Editor by right-clicking on a blank area of the Canvas and select Scripts.
8. Click the Add Script button.

9. Name the script LeveltoGals.


10. Select Data Change as the Trigger.

11. Enter Level as the Expression.

12. Enter the following script in the lower pane:


Gals = Level * 0.26472;

13. Click OK and Save and Close the symbol.


14. Test in Runtime.

Wonderware Training
Lab 5 – Associating Scripts with ArchestrA Symbols 7-19

Alternative for Simple Scripts


Simple configurations can be entered as an Expression or Reference rather than as a Script.
15. Open SimpleTank and select the new Text Box created in this lab.
16. Double-click to display the Value Display animation.
17. In the Expression or Reference / Analog field, enter:
Level * 0.26472
18. Enter your desired Text Format.
19. Click OK.

20. Right-click on the blank area of the Canvas and select Scripts.
21. Remove the Data Change script created previously.
22. Save and Close the symbol.
23. Switch to WindowMaker and update your tank symbol by clicking the Symbol Changed icon

in the status bar .

Note: If you had WindowMaker closed when editing the symbol, you will not need to update
the symbol in WindowMaker.

24. Test in Runtime, and then close WindowMaker when finished.

InTouch® 10.0 New Features and ArchestrA Graphics


7-20 Module 7 – Scripting

Enter a Script to Grow and Shrink an Object


25. In the IDE, click on the Graphic Toolbox.
26. Create a New Symbol named AnalogMeter_Round.
27. Double-click AnalogMeter_Round to open the Symbol Editor.
28. Click the Embed Graphic button.
29. Click on the Analog Meters folder, select the AnalogMeterRound symbol and embed it into
your symbol.

30. Select the AnalogMeter_Round symbol and rename it in the Elements list to Meter.

Wonderware Training
Lab 5 – Associating Scripts with ArchestrA Symbols 7-21

31. Scroll down through the Properties list in the right pane and set the Runtime Behavior
property TreatAsIcon to True.

32. Click on the blank canvas to deselect everything.


33. Add four Custom Properties that are Private for this object.

Custom Property Name Data Type


GrowMe Boolean
ShrinkMe Boolean
InitialSize Integer
GrowSize Integer

34. From the main menu, select Special / Scripts and add the following On Show script:
InitialSize = Meter.Height;
GrowSize = Meter.Height * 3;

InTouch® 10.0 New Features and ArchestrA Graphics


7-22 Module 7 – Scripting

35. Select the Meter, and then select Animations / Action Scripts.

36. Add the following On Mouse Over script and set it to execute after 500 ms:
GrowMe = True;
ShrinkMe = False;

Wonderware Training
Lab 5 – Associating Scripts with ArchestrA Symbols 7-23

37. Add the following On Mouse Leave script and set it to execute after 500 ms:.
GrowMe = False;
ShrinkMe = True;

38. Click on the blank canvas to deselect everything.


39. Right-click and select Scripts.
40. Click the Add Script button and add the following Named Scripts.

Name Expression Trigger Period Script


GrowMeter GrowMe While True 50 ms Meter.Height = Meter.Height * 1.10;
Meter.Width = Meter.Height;
If Meter.Height >= GrowSize then
GrowMe = False;
Endif;
ShrinkMeter ShrinkMe While True 50 ms Meter.Height = Meter.Height / 1.10;
Meter.Width = Meter.Height;
If Meter.Height <= InitialSize then
ShrinkMe = False;
Endif;

InTouch® 10.0 New Features and ArchestrA Graphics


7-24 Module 7 – Scripting

41. Save and Close the symbol.


42. Close both WindowMaker and WindowViewer if they are open.

Wonderware Training
Lab 5 – Associating Scripts with ArchestrA Symbols 7-25

43. From the IDE, launch the $ReactorApp application.


44. Open the Main, Menu, and Reactor display windows.
45. Place the AnalogMeter_Round symbol onto the Reactor display window and size it as
shown below:

46. Double-click on the Meter and assign the following Custom Properties:
Meter.Max = 2000
Meter.Value = ReactLevel

InTouch® 10.0 New Features and ArchestrA Graphics


7-26 Module 7 – Scripting

47. Switch to Runtime and test the scripts by moving the cursor over the Meter symbol and then
moving it off the symbol.

Wonderware Training
Module 8

Other Features
Section 1 – Object Relationships 8-3
Lab 6 – Using ArchestrA Symbols with Application Objects 8-9
Section 2 – Deploying an InTouch Managed Application 8-19
Lab 7 – Deploying an InTouch Application 8-23
Section 3 – Quality and Status 8-27
Lab 8 – Configuring Quality and Status Display 8-33
Section 4 – Multiple Symbols 8-37
Lab 9 – Using Multiple Symbols 8-39
Section 5 – Common Controls 8-43
Section 6 – Advanced Editing 8-49
Lab 10 – Embedding Symbols 8-57
Section 7 – Multi-User Environments 8-61
Section 8 – Using Client Controls 8-63
Lab 11 – Using Client Controls 8-77
8-2 Module 8 – Other Features

Module Objectives
z Apply advanced Wonderware Application Server features for InTouch in the ArchestrA
environment.

Wonderware Training
Section 1 – Object Relationships 8-3

Section 1 – Object Relationships

Section Objectives
z Apply the concept of containment and how it works with Application Objects and
Templates by using nesting and deployment.
z Create flexible instances of objects from Templates.

This section illustrates the concept of containment and how it works with Application Objects and
Templates.

Hosting and Containment Relationships


Graphics can be contained in
z Toolbox
z Object Template
z Object Instance

Graphics contained in objects


z Are as much a part of the object as a script or UDA
z Are inherited by children
z Changes are propagated when made in a template
Host relationships are displayed in Deployment View
Galaxy
Platform (representative of your Plant)
Engine
Area
Application Objects
DI Objects
Containment relationships are displayed in Model View
Areas
Areas
Application Objects
Application Objects

InTouch® 10.0 New Features and ArchestrA Graphics


8-4 Module 8 – Other Features

Creating Symbols in Automation Object Templates


You can create a symbol from the Graphics Tab in an Automation Object template. Creating a
symbol this way automatically associates the new symbol with the Automation Object.
To create a new symbol for an Automation Object template
a. Open the Automation Object template.
Click the Graphics tab.
Any local and inherited symbols are listed.

b. Click the New Symbol icon.


Give the new symbol a name. Names must be unique.
Valid characters for symbol names include alphanumeric characters, $, # and _ (underscore).
Symbol names cannot include spaces and the symbol name cannot begin with the $character.
c. If required, type the description of the symbol in the Description box.

Wonderware Training
Section 1 – Object Relationships 8-5

d. Click the symbol name and click Open.


The ArchestrA Symbol Editor opens.

e. Now you can draw your symbol.


For specific information about using the drawing tools, see Creating and Managing ArchestrA
Graphics User’s Guide Chapter 5 - Working with Graphic Elements.

InTouch® 10.0 New Features and ArchestrA Graphics


8-6 Module 8 – Other Features

Application Object Containment


The concept of placing one or more AutomationObjects within another AutomationObject, resulting
in a collection of AutomationObjects in an organized hierarchy that matches the application model
and allows for better naming and manipulation is known as ApplicationObject Containment.
After placed in another AutomationObject, the contained object takes on a new name in addition to
its unique tagname, known as the HierarchicalName, that includes the container name and its
name within the context of its container.
For example, a level transmitter called TIC101 could be placed within a container object called
Reactor1 and given the name Level within it, resulting in the HierarchicalName Reactor1.Level.
Tagname Hierarchical Name
Reactor1
TIC101 Reactor1.Level

Contained Objects
Containment relationships allow objects to be organized in a hierarchical manner. You can build
objects that represent complex devices consisting of smaller, simpler devices. Higher level objects
can contain lower level objects. This allows you to more closely model complex plant equipment.
ApplicationObjects can only be contained by other ApplicationObjects. Areas can only be
contained by other Areas.
The contained name of a contained object only has to be unique in the context of its container.
The fully-qualified name of a contained object includes the name of the object that contains it. This
is the object's hierarchical name.
For example, an instance of a $Reactor is named Reactor1. An instance of $Valve called Valve1 is
contained within the instance of $Reactor.
Change the contained name of Valve1 to InletValve. Now Valve1 can also be referred to by its
hierarchical name Reactor1.InletValve. The name of the contained object can be changed,
though, within the scope of the hierarchy.
For example, the contained name of the Reactor1.InletValve valve can be changed to Inlet. The
name (tagname) of the InletValve object has not changed. Only its hierarchical name is simplified
within the context of the containment.
Tagname Hierarchical Name
Reactor1
InletValve Reactor1.InletValve
Valve1 Reactor1.Valve1 or InletValve

Wonderware Training
Section 1 – Object Relationships 8-7

InTouch® 10.0 New Features and ArchestrA Graphics


8-8 Module 8 – Other Features

Template Containment
Template containment allows more advanced structures to be modeled as a single object. For
example, you might derive from the UserDefined template a new template called "Tank" and use it
to contain ApplicationObjects that represent aspects of the tank, such as pumps, valves, and
levels. You could derive two DiscreteDevice template instances called "Inlet" and "Outlet" and
configure them as valves, derive an AnalogDevice template instance called "Level," and then
contain them within the Tank template. The containment hierarchy would be as follows:

This relationship appears for templates in the Template Toolbox. For instances, the relationship
appears in both the Model and Deployment Views. The Template Toolbox is divided into toolset
sections. Within each toolset, templates are shown in a tree. If a template is one that contains
other templates, it can be expanded to show the containment under that template. The template
can have many layers of containment (cannot exceed 10 layers).

Note: Base templates cannot be contained by another template, either the container or the
template being contained. Template containment can only be done with derived templates.

The Derivation View does not show containment relationships. It shows templates and instances
with regard to containment in the following ways:
z Non-contained instances show their tagnames.
z Contained instances show their tagnames and hierarchical names.
z Non-contained templates show their object name.
z Contained templates show their hierarchical name.
Containment of instances is limited to Areas containing other Areas and AppObjects containing
other AppObjects.
Renaming can be done on an instance's tagname and contained name. A template only has a
template name.

Wonderware Training
Lab 6 – Using ArchestrA Symbols with Application Objects 8-9

Lab 6 – Using ArchestrA Symbols with


Application Objects
Introduction
In previous labs, you created ArchestrA symbols in the Graphic Toolbox. These symbols were not
directly associated with a particular application object. In this lab you will create an ArchestrA
symbol that is contained in and associated with an application object.
You will create a new ArchestrA symbol in an application object, embed an existing symbol in it,
and modify the embeded symbol to use relative references. You will create a hierarchy of
instances of the WinPlatform, AppEngine, and Area objects to host your application object. Then
you will create multiple instances of your application object and deploy your Galaxy. You will then
embded the symbols from the object instances into an InTouch application and view the
animations in Runtime.

Objectives
Upon completion of this lab, you will be able to:
z Import an ArchestrA package file
z Embed an ArchestrA Symbol into an application object
z Apply relative references
z Deploy objects

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. In the IDE, import $Tank.aaPKG into your Galaxy.


b. Assign the $Tank object to your Template Toolset.
c. Open $Tank and add a new symbol named TankOverview and open it in the Symbol Editor.
d. Embed the SimpleTank symbol from the previous labs.
e. Modify the Custom Property defaults (of the embedded symbol) as follows:

Custom Property Type Default Value


InletValve Boolean Me.InletValve
Level Float Me.Level
OutletValve Boolean Me.OutletValve

f. Save and close the TankOverview symbol.


g. Save and close the $Tank object template.
h. Create instances of $AppEngine and $WinPlatform.
i. Assign $AppEngine to $WinPlatform.

InTouch® 10.0 New Features and ArchestrA Graphics


8-10 Module 8 – Other Features

j. Create an instance of $Area, rename the instance to TankArea, and assign it to


$AppEngine_001.
k. Create three instances of the $Tank template and assign them to TankArea.
l. Deploy your Galaxy.
m. Open the $TankApp managed application and create a new window named ArchestrA
Tanks.
n. Embed the TankOverview symbol from Tank_001 into the InTouch window.
o. Add the TankOverview symbol from Tank_002 and Tank_003.
p. Test in Runtime.
q. Using Object Viewer, open and close the valves on the tank, and observe the animation in
Runtime.
r. Close WindowMaker.

See the next page for Detailed Lab Instructions

Wonderware Training
Lab 6 – Using ArchestrA Symbols with Application Objects 8-11

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Create a New Symbol and Embed an Existing Symbol with Modifications


1. In the IDE, import the $Tank.aaPKG file into the Galaxy.

Note: You instructor will provide the file location.

2. Click the Template Toolbox tab, expand the Application folder, and select $Tank.

InTouch® 10.0 New Features and ArchestrA Graphics


8-12 Module 8 – Other Features

3. Assign $Tank to your Template Toolset you created in a previous lab.

4. Double-click the $Tank template to open its editor.


Select the Graphics tab.

5. Click Add Symbol and create a new symbol named TankOverview.

6. Click the Open button to open the TankOverview symbol editor.

7. Click the Embed Graphic button in the toolbar and embed the SimpleTank symbol.

Wonderware Training
Lab 6 – Using ArchestrA Symbols with Application Objects 8-13

8. Select the embedded symbol.

9. Scroll down in the Properties pane on the right side of the screen and modify the default
values for the following Custom Properties.

Custom Property Type Default Value


InletValve Boolean Me.InletValve
Level Float Me.Level
OutletValve Boolean Me.OutletValve

10. Save and close the TankOverview symbol.


11. Save and close the $Tank object template.

InTouch® 10.0 New Features and ArchestrA Graphics


8-14 Module 8 – Other Features

Create and Deploy Objects in the IDE


12. In the Template Toolbox, create instances of the following system templates by dragging
them from the System folder to the Deployment view:
z $AppEngine
z $WinPlatform

13. Assign the AppEngine instance to the WinPlatform instance by dragging and dropping it on
WinPlatform_001.

14. Create an instance of $Area by dragging it from the System folder in the Template Toolbox to
the Deployment view.

Wonderware Training
Lab 6 – Using ArchestrA Symbols with Application Objects 8-15

15. Rename Area_001 to TankArea and then assign it to AppEngine_001.

16. Create three instances of the $Tank template you imported and assigned to your Template
Toolset.

17. In Deployment view, assign Tank_001, Tank_002, and Tank_003 to TankArea.

18. Deploy your Galaxy.

Note: Your instructor will provide assistance when necessary.

InTouch® 10.0 New Features and ArchestrA Graphics


8-16 Module 8 – Other Features

Wonderware Training
Lab 6 – Using ArchestrA Symbols with Application Objects 8-17

Embed the New ArchestrA Graphic into InTouch


19. Open the $TankApp managed InTouch application.
20. Create a new window named ArchestrA Tanks.
21. Click the Embed ArchestrA Graphic button.
22. In the Galaxy Browser, switch to Instances.

23. Select the TankOverview graphic from Tank_001.

24. Click OK and place the symbol on the InTouch window and resize as necessary.

25. Click Embed ArchestrA Graphic and embed the symbols from Tank_002 and Tank_003.
26. Switch to Runtime.

InTouch® 10.0 New Features and ArchestrA Graphics


8-18 Module 8 – Other Features

Observe the Animation in Runtime


27. In the IDE, right-click on any deployed Tank object and select View in Object Viewer.

28. In the Object Viewer, open and close the valves on the tanks and observe the animation in
WindowViewer.
(To open or close the valves, set the InletValve or OutletValve attributes to true or false.)
29. Select the Attributes you want to observe and drag them into the Watch List in the lower
pane.

Note: When the cursor turns into a “hand,” you can drag the Attribute.

Note: The attribute named AutomaticMode will force the tank to run continuously.

30. Close WindowMaker and check in the application.

Wonderware Training
Section 2 – Deploying an InTouch Managed Application 8-19

Section 2 – Deploying an InTouch Managed Application

Section Objective
z Create system objects necessary for Deployment.
z Deploy a Managed InTouch Application.
z Launch a Managed InTouch Application.

Using Managed InTouch Applications at Runtime


You can run managed InTouch applications on remote nodes by deploying InTouchViewApp
instances to those nodes.
You can also deploy changes of the InTouch application and contained ArchestrA Symbols to
these nodes and select whether to accept or decline the changes for each node.
The following graphic shows how managed InTouch applications are deployed to run-time nodes.

InTouch® 10.0 New Features and ArchestrA Graphics


8-20 Module 8 – Other Features

Deploying a Managed InTouch Application


You can deploy a managed InTouch application from the ArchestrA IDE to the local node or a
remote node. After you deploy the application, you can run it in WindowViewer on the remote
nodes.
The first time you deploy an InTouchViewApp object, the associated InTouch application is copied
to the node of the platform that hosts the object. This is called the operator node.
To deploy a managed InTouch application
a. Open the ArchestrA IDE.
b. Select the instance of the InTouchViewApp for which you want to deploy the managed
InTouch application.

c. On the Object menu, click Deploy.


The Deploy dialog box opens.
d. Click OK.
The complete InTouch application is copied to the operator node.

Deploying Changes to a Managed InTouch Application


You can change a managed InTouch application by:
z Changing the references, content, or size of an ArchestrA Symbol that is used in a
managed InTouch application.
z Changing the managed InTouch application itself by opening WindowMaker from the
InTouchViewApp template.

In both cases, when you save the changes, the changes are propagated from the
updated template to the derived instances. These appear with the Pending Changes icon.
The changes are not immediately reflected in a running WindowViewer session. The operator of
each node can select to accept or decline the changes based on the WindowViewer settings.
To deploy changes to a managed InTouch application
a. Open the ArchestrA IDE.
b. Select the instance of the InTouchViewApp for which you want to deploy the changes of a
managed InTouch application.
c. On the Object menu, click Deploy. The Deploy dialog box appears.
d. Click OK. The changes are copied to the operator node.

Wonderware Training
Section 2 – Deploying an InTouch Managed Application 8-21

Starting a Managed InTouch Application


From the operator node, you can start Application Manager and select the managed InTouch
application you want to run.
You can also set the resolution in Application Manager to run the managed InTouch application in
different resolutions.
To start the managed InTouch application
a. On the node the InTouchViewApp object is deployed to, start the InTouch Application
Manager.
b. From the main menu, select Tools / Find Applications and locate the deployed application.
c. In the application list, select the managed InTouch application you want to run in
WindowViewer.
d. Click the WindowViewer icon. The application starts in WindowViewer after a short while.
To set the dynamic resolution conversion settings
a. Open the InTouch Application Manager.
b. On the Tools menu, click Node Properties. The Node Properties dialog box appears.
c. Click the Resolution tab.
d. Select the Allow WindowViewer to dynamically change resolution check box.
If Allow WindowViewer to dynamically change resolution is unchecked, the managed
application runs with the resolution in which it was developed.
e. Configure how you want to run the application. Do any of the following:
z Click Use application resolution to run the managed application at the same resolution as
it was developed in.
z Click Convert to screen video resolution to convert the managed application so that it can
run with the screen resolution.
z Click Custom resolution to convert the managed application to a specified resolution.
f. Click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


8-22 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training
Lab 7 – Deploying an InTouch Application 8-23

Lab 7 – Deploying an InTouch Application


Introduction
Deploying an InTouch Application keeps it connected to the ArchestrA environment and
communicating with the Galaxy. Each node that you deploy an IDE-Managed InTouch Application
to will need a Platform that communicates through a ViewEngine object.
In this training class, the Platform will be for the same computer you are developing on. In a
production environment, this will likely be on a plant floor workstation/operator node.
Once the Platform and ViewEngine are in place, you can create an instance of and deploy the
InTouch application, and then launch the application in WindowViewer.

Objectives
Upon completion of this lab, you will be able to:
z Create a new instance of the $ViewEngine object
z Create a new instance of your InTouch Application
z Deploy an InTouch Application
z Launch a deployed InTouch Application

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. In the Deployment view of the IDE, create a new instance of the $ViewEngine and the
$TankApp objects.
b. Drag the ViewEngine on the WinPlatform and the TankApp on the ViewEngine.
c. Deploy the ViewEngine.
d. Open the InTouch Application Manager, and launch the deployed managed application in
WindowViewer.
e. Select any window to show.
f. Close WindowViewer.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


8-24 Module 8 – Other Features

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Deploy a Managed InTouch Application


1. In the IDE, click the Deployment tab and expand the System folder in the Template Toolbox.

Note: Make sure WindowMaker is closed and the application is checked in.

2. Create an instance of $ViewEngine and drag it to the WinPlatform instance.

3. Create an instance of your $TankApp application and drag it to the ViewEngine instance.

4. Right-click on the ViewEngine and select Deploy.


5. Accept the defaults and click OK.

Your InTouch application will now be available on the node to which it was deployed.

Wonderware Training
Lab 7 – Deploying an InTouch Application 8-25

6. Open the InTouch Application Manager on the node the application was deployed to.
7. Select $TankApp and open the application in WindowViewer.

Note: WindowMaker is not an active option with a deployed managed application.

8. Select any window to show.


9. Close WindowViewer.

InTouch® 10.0 New Features and ArchestrA Graphics


8-26 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training
Section 3 – Quality and Status 8-27

Section 3 – Quality and Status

Section Objective
z Configure visual clues regarding the status of your data and/or plant operations.
z Observe visual clues in Runtime.

Status Behavior and the Galaxy


The IDE can configure how we manage
z Data Quality visualization
z Status visualization
Enables an indication of status to be shown
z Automatic once configured
z Configured cross-Galaxy
z All applications behave the same
Status feedback configured in IDE
z Extremely flexible options
z Access from IDE main menu

Dealing with Quality


Every attribute has an associated OPC-compliant data quality value that is a 16-bit word. The
high-order byte is vendor-specific and ArchestrA reserves it for future use and sets this byte to
zero. The OPC quality has three possible major quality states: Good, Uncertain and Bad.
ArchestrA also treats one substate of OPC’s Bad, as a specially recognized quality of Initializing.
Initializing quality is Bad quality with the Initializing bit set.
If the quality of an attribute’s value is Good, it means the associated value can be trusted and
used. The exception is if the value is out of range or an invalid number like NaN. Objects need to
do their own checking for such values.

InTouch® 10.0 New Features and ArchestrA Graphics


8-28 Module 8 – Other Features

If the quality of an attribute’s value is Uncertain, it means the associated value can be used but
there is some measure of doubt as to the integrity of the value. A common example of Uncertain
quality is the manual forcing of an attribute that is normally automatic. When using an Uncertain
input, do it with care and mark the resulting (calculated) attribute as Uncertain also.
The quality of an attribute’s value can be Bad for any of a number of reasons. These include:
z The object that contains the attribute set its quality to Bad because insufficient or bad data
was available.
z The infrastructure returns a quality of Bad for an unavailable attribute when the attribute
cannot be accessed within Message Exchange. For example, the target attribute does not
exist or communication is faulty.
z A field device may not be connected or accessible, resulting in Bad inputs that propagate
through the system.
In addition, Initializing quality is a form of Bad quality that requires special attention. Initializing
quality is a temporary one that only occurs when objects first come to life and lasts until they
receive their first input data value. Once they receive that first input, the quality goes to Good, Bad
(non-Initializing) or Uncertain.
Always code an AutomationObject so that it inspects the data quality of values used in calculations
and logic prior to executing those calculations and logic. For example, it does not make any sense
to calculate the average of two values if one or both values have Bad quality, since Bad quality
indicates that the value is not to be used or trusted. Instead, in this case, the object should skip the
calculation of the average and set the resulting “Average” attribute to Bad quality itself.
The infrastructure of the system does not automatically enforce a specific default value (such as
IEEE NaN) when quality is Bad, or a specific quality (such as Bad) when a value is NaN. It is up to
the object’s custom code to always check for bad qualities and values before doing logic or
calculations. For example, a float value read from the field may have a value of NaN but a Good
quality. In that case, an object using that value must be aware that the value may be unusable for
a calculation. In another example, a value read from a UDA attribute may be 4.3 but Bad quality.
Again, it is up to the consuming object’s code to inspect the quality first, realize it is Bad, and take
appropriate resulting action in its calculations and logic.
Best practice rules for dealing with quality include:
z If an attribute’s value is determined in the execution logic, then the attribute’s Calculated
quality checkbox should be set true when the object is designed in ObjectDesigner.
z Such attributes must be set to Bad quality when going OffScan.
z Such attributes must be set to Initializing (a form of Bad) quality when going OnScan.
z Do not use an input value with Bad (including Initializing) quality when doing a calculation
based on it. Instead, set the result quality Bad or Initializing (if input was Initializing) and
leave the value at the last value or consider setting it to NaN if it is a float or double.
z Do not use a NaN (float or double) input when doing a calculation based on it. Instead, set
the result Bad and leave the result value at the last value or set it to NaN if it is a float or
double.
z If an illegal combination of input values exists, set the resulting quality to Bad.
z Optionally, provide the capability of reporting a bad value alarm when a result value has
Bad quality. Do not report a bad value alarm when a value is Initializing quality to avoid
transient startup alarms.

Wonderware Training
Section 3 – Quality and Status 8-29

z Other than a bad value alarm, do not trigger alarms when the quality of some attribute
goes Bad. For example, do not trigger a PV change-of-state alarm when PV goes to some
default state when its quality is bad. Instead, have a separate alarm for bad value
reporting.
z Uncertain quality inputs can be used with care. Set the result to Uncertain quality also to
indicate the questionable status of the resulting attribute.
No System Logger entries should be generated when an attribute of bad quality is calculated.
Control override of most aspects of graphics

z Bad
z Uncertain
z Initializing
z Communication Error
z Configuration Error
z Operational Error
z Software Error
z Security
z Warning
z Pending

Preview of settings

InTouch® 10.0 New Features and ArchestrA Graphics


8-30 Module 8 – Other Features

Status Graphics
You can use a Status Graphic element to indicate the status or quality of:
z One or more specified ArchestrA attributes.
z All ArchestrA attributes that are used in one or more specified elements in the same
hierarchical level.

Status Graphic Element shows


Quality and Status Directly or Indirectly

Attribute Attribute Attribute Attribute Attribute


A B C D E

Deliver values
(and also quality
and status) to
animate the
elements
Deliver quality and
status directly from
ArchestrA attributes
Element 1

Element 2

Element 3

Deliver quality and Status Graphic Element


status indirectly from
ArchestrA attributes
via the elements

Abnormal quality and status may be:


z An error status due to communication, configuration, operational, security or software
error.
z Bad, initializing, pending, uncertain or warning quality.
The Status Graphic element lets you assign:
z One or more ArchestrA attributes, values or expressions.
z One or more elements on the canvas that contain animations.
You can also:
z Configure the appearance of the Status Graphic element for each quality and status state.
z Show quality and status information directly with the elements.

Wonderware Training
Section 3 – Quality and Status 8-31

Showing Quality and Status


You can do either of the following to show a specified status or quality at Runtime:
z Use a Status Graphic element that shows you an icon. It indicates the status or quality of
specified ArchestrA attributes directly or those used indirectly in elements.
The Status Graphic element cannot monitor attributes of elements that are not in the same
hierarchy level in the Element Browser, nor elements that use the attributes in scripts, nor
elements that are invisible at Runtime.
z Change the appearance of animated elements that are using the specified ArchestrA
attributes. This can be done either by:
z Overriding the animation or changing the appearance of the element.
z Drawing an outline around the element.
In all cases, you can configure how quality and status is shown in the Configure Quality and
Status Display dialog box. This is configured outside the ArchestrA Symbol Editor in the IDE.
The setting is applied globally across the Galaxy to all selected animated elements that use the
monitored attribute. This applies also to:
z Elements contained in groups.
z Elements in symbols embedded in other symbols.
This does not apply to:
z Elements that use the monitored attribute in scripts.
z Elements that are invisible at Runtime.

Configuring Element-Specific Animations


Fore a review of configuring unique animation types, see page 6-75.

Restrictions of the Status Graphic Element


The Status Graphic element must be in the same hierarchical level as the animated elements with
the attributes you want to monitor.
If you move elements out of their hierarchical level after you have associated them with a Status
Graphic element, for example, by grouping them, their attributes are no longer monitored.

To avoid this problem, paste a new Status Graphic element in the hierarchical level you want to
monitor, or associate it directly with the attributes you want to monitor.

InTouch® 10.0 New Features and ArchestrA Graphics


8-32 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training
Lab 8 – Configuring Quality and Status Display 8-33

Lab 8 – Configuring Quality and Status


Display
Introduction
ArchestrA Symbols can provide visual clues based on the quality and status of the application
being displayed. There are several options available. In this lab, you will become familiar with the
global quality display configuration capabilities of the ArchestrA IDE. You will expose and
configure Quality and Status indicators and observe them in Runtime.

Objectives
z Expose and configure Quality and Status indicators
z Observe Quality and Status indicators in Runtime

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. From the IDE, modify the Quality and Status display settings. Experiment with several
different settings and override animations.
b. Open the SimpleTank symbol, place a Status icon on the tank symbol, and link it to the
LevelDisplay element.
c. Save and close the symbol.
d. Undeploy and redeploy Tank_001 and observe the status changes in Runtime.
Continue testing the Quality and Status behavior.

See the next page for Detailed Lab Instructions.

InTouch® 10.0 New Features and ArchestrA Graphics


8-34 Module 8 – Other Features

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Detailed Lab Instructions


Following are Detailed Lab Instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Modify Quality and Status Settings


1. On the main menu of the IDE, select Galaxy / Configure / Quality and Status Display.
2. Observe the default settings in the Configure Quality and Status Display dialog box:

3. Modify the following settings:


z Configuration Error
z Bad
z Uncertain
z Initializing

Note: You are free to experiment with overrides. The purpose here is to create a change.

4. Click OK to close the dialog when overrides are configured.

Wonderware Training
Lab 8 – Configuring Quality and Status Display 8-35

Place a Status Object on an ArchestrA Symbol


5. Open the SimpleTank symbol in the Symbol Editor.
6. In the Tools panel, select the Status icon and place it on the tank symbol.

The Edit Animations dialog automatically opens.


The Graphics tab allows you to select Elements in your symbol instead of a specific tagname
or Custom Property. This eliminates maintenance problems later. For instance if you change
the animation for the level indicator, the status will automatically update.
7. Select the LevelDisplay element and click the >> button to link it to the DataStatus animation.

8. Click OK.
9. Save and close the SimpleTank symbol.

InTouch® 10.0 New Features and ArchestrA Graphics


8-36 Module 8 – Other Features

Test in Runtime
10. Open your $TankApp application in WindowMaker, open the ArchestrA Tanks window, and
switch to Runtime to test.
This will update the symbol automatically.

11. Using the ArchestrA IDE, undeploy the Tank_001 object, and then observe the status
changes in Runtime.
12. Redeploy Tank_001 and return to your application and observe the action.
Continue testing the Quality and Status behavior.

Wonderware Training
Section 4 – Multiple Symbols 8-37

Section 4 – Multiple Symbols

Section Objectives
z Create objects by nesting other existing objects.
z Apply animation to nested objects.
z Deploy an object multiple times.

Using the Application Views


When you first create a Galaxy, you only have base templates. Base templates are included with
Industrial Application Server. They are automatically imported into the IDE when the Galaxy is
created.
Base templates appear in the Template Toolbox and in the Derivation view with a $ as the first
character in their name. You cannot directly modify base templates but Wonderware recommends
you use them to create your own objects.
When you move from one view to another, the selected object in the first view is selected in the
second view, if the object exists in that view. For example, templates are not shown in the
Deployment view and Model view.
You can derive Templates from those base templates included in the IDE.
Once you derive instances from these templates, you can create objects. You can include multiple
Symbols in any of these objects. Symbols can be:
z Displayed at runtime
z Displayed using ShowSymbol
Symbols contained within objects can use relative addressing to refer to UDAs (Me.UDA_Name).

Note: If you edit a source template, it impacts EVERY instance of that template in your galaxy! As
a Best Practice, Wonderware recommends that you always create an instance of any template
object specifically for your application. Make all edits to that instance rather than the original
template.

InTouch® 10.0 New Features and ArchestrA Graphics


8-38 Module 8 – Other Features

Containment — Re-using ArchestrA Symbols


You can re-use ArchestrA Symbols that you create in the Graphic Toolbox in Automation
templates, Automation instances or in InTouch windows. This is known as embedding.

When you derive an Automation template, its ArchestrA Symbols are inherited by the new
instance. This can be caused by:
z When you derive an instance of an Automation template that contains symbols, the
created instance contains inherited symbols.
z When a new ArchestrA Symbol is embedded in WindowMaker a new Automation instance
is derived to which the symbol in InTouch WindowMaker then points.

ArchestrA Symbols and Instantiation


When you embed an ArchestrA Symbol into an InTouch window and the symbol is contained in an
Automation template, you can easily create a new instance of the Automation object. The
embedded ArchestrA Symbol automatically references the new object.

Wonderware Training
Lab 9 – Using Multiple Symbols 8-39

Lab 9 – Using Multiple Symbols


Introduction
In this lab, you will add and use multiple symbols on a single object. You will create a new symbol
in the $Tank object that can be used as a Start/Stop control for the Inlet and the Outlet valves.

Objectives
z Add and use multiple symbols on a single object
z Add a faceplate symbol to your application
z Configure animations for the faceplate

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. In the IDE, create a new symbol in the $Tank template named TankFaceplate.
b. Embed the Switches / TwoButtonHorizSwitch symbol from the ArchestrA Symbol Library.
c. Duplicate the switch and place side by side.
d. Insert text Inlet Control above the left switch and Outlet Control above the right switch, and
add a Custom Property to each of them.
z Use Me.InletValve and Me.OutletValve as the Default Values respectively.
e. Save and close the symbol.
f. In the TankOverview symbol, add a button labeled Control with the following Animation to
open the Faceplate:

Animation Name Reference Title Type(s)


Show Symbol Me.TankFaceplate z Has title bar z Modal
z Use Symbol Name z Has close button
for Window Title z Resizable

g. Save and close the symbol, and save and close the editor.
h. Test the changes in the Managed InTouch application.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


8-40 Module 8 – Other Features

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Create and Animate a New Symbol


1. In the IDE, open the $Tank template and click the Graphics tab.
2. Create a new symbol named TankFaceplate.

3. With the symbol highlighted, click Open to open TankFaceplate in the editor.
4. Click the Embed Graphic button.

5. Click the Graphic Toolbox button.


6. Expand ArchestrA Symbol Library.
7. Expand Switches and select TwoButtonHorizSwitch.
8. Click OK and place the Switch on your canvas.
9. Duplicate the switch and place the two switches side by side.
10. Insert text Inlet Control above the left switch and Outlet Control above the right switch.

11. Right-click on the Inlet Control switch and select Custom Properties.
12. Enter Me.InletValve as the Default Value and click OK.
13. Right-click on the Outlet Control switch and select Custom Properties.
14. Enter Me.OutletValve as the Default Value and click OK.

Wonderware Training
Lab 9 – Using Multiple Symbols 8-41

15. Save and close the symbol.


16. On the Graphics tab in the $Tank object, open the TankOverview symbol.
17. Add a Button labeled Control above the Outlet valve.

18. Double-click on the buton and add the following Animation to open the Faceplate:

Animation Name Title Type(s)


Show Symbol z Has title bar z Modal
z Use Symbol Name for Window Title z Has close button
z Resizable

19. Click the ellipsis button next to the Reference field.


20. Click the Relative References button on the toolbar.

21. Select TankFaceplate and click OK.

InTouch® 10.0 New Features and ArchestrA Graphics


8-42 Module 8 – Other Features

You will now see the Me.TankFaceplate reference in the Reference field.

22. Click OK, and save and close the Symbol.


23. Save and close $Tank.
24. Open the Managed InTouch application and verify that the changes are uploaded.
25. Test the animations by clicking on the Control buttons and switches.

Wonderware Training
Section 5 – Common Controls 8-43

Section 5 – Common Controls

Section Objectives
z Insert and deploy Common Controls to allow user interaction at Runtime.
z Create shapes/objects by joining unrelated shapes using the Path tool.
z Embed symbols and propagate changes to them after deployment.

Windows Common Controls


With Windows Common Controls you can add extended user interaction to your symbol using the
following controls:

Radio Button Group


z to select an option from a mutually exclusive group of options.

Check Box
z to add a selectable option.

Edit Box
z to add an entry box for text and values.

InTouch® 10.0 New Features and ArchestrA Graphics


8-44 Module 8 – Other Features

Combo Box
z to select an option from a foldable list.

Calendar
z to use a date selection control.

Date Time Picker


z to select a date and time in a compact format.

List Box
z to select one or more options from a list.

Wonderware Training
Section 5 – Common Controls 8-45

Advanced Tools
The icons for the Windows Common Controls included in the ArchestrA IDE are shown below:

Configuration of the Windows Common Controls is referenced below:

Radio Button Group

Checkbox

InTouch® 10.0 New Features and ArchestrA Graphics


8-46 Module 8 – Other Features

Edit Box

Combo Box

Calendar

Wonderware Training
Section 5 – Common Controls 8-47

Date/Time Picker

List Box

InTouch® 10.0 New Features and ArchestrA Graphics


8-48 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training
Section 6 – Advanced Editing 8-49

Section 6 – Advanced Editing


Section Objectives
z Create complex graphic objects using Path Graphics.
z Embed symbols.
z Propagate changes to “child” symbols.

Embedding and Size Propagation

Embedded Symbols
You can embed symbols from the Graphic Toolsets, Automation Object instances and templates
into other symbols. This lets you rapidly develop more complex symbols with common
components.
For example, you can create a single tank symbol, then embed the tank symbol multiple times in
another symbol to create a symbol representing a collection of tanks.

Appearance of Embedded Symbols


Embedded symbols appear in the Element Browser either with their Graphic Toolbox name and an
index number, or with their instance name, underscore, symbol name and an index number.

Changing Embedded Symbols


After a symbol is embedded, you can:
z Change its size, orientation or transparency.
z Add a limited set of animations to the symbol, such as:
z Visibility.
z Blink.
z Location horizontal and location vertical.
z Width and height.
z Orientation.
z Disablement.
You cannot:
z Change the graphic definition within the embedded symbol.
z Embed a symbol contained in an Automation Object into a symbol that is contained in the
Graphic Toolbox.
z Create circular references. A circular reference occurs when one symbol (Symbol A) has
embedded within it another symbol (Symbol B) that has embedded within it a symbol that
directly or indirect references back to the first symbol (Symbol A).

Note: You can use the Treat as Icon feature to animate a group of elements as a single
object.

InTouch® 10.0 New Features and ArchestrA Graphics


8-50 Module 8 – Other Features

OwningObject Property
OwningObject is the Runtime Property of an Embedded Symbol, not of a symbol in itself. It can be
changed to point to different instances and is used in place of indirect tags in previous versions of
InTouch.

Embedding and Instantiation


A symbol can be contained in:
z The Graphic Toolbox.
z An Automation object template.
z An Automation object instance.
Symbols that are contained in:
z The Graphic Toolbox can be embedded into symbols that are contained in the Graphic
Toolbox, an Automation object template or instance.
z An Automation object template can be embedded into symbols that are contained in
other Automation objects only. When you do so, a new Automation object instance is
created. You can give it a name and the new instance inherits the symbol but does not
contain it.
z An Automation object instance can be embedded into symbols that are contained in
other Automation objects only. The template or instance inherits the symbol but does not
contain it.

PARENT CHILD
GR
X
O

AP
LB

HI
O

C
TO

TO
IC

O
H

LB
AP

OX
GR

CT

AU
E JE

TO T
A T OB

M EM
AT PL
M ON

IO AT
TE ATI

N E
PL

*
O
M

BJ
TO

EC
AU

T
T

AU
EC

TO IN
CE BJ
AN O

M ST
AT A
S T ON

IO NC

*
IN ATI

N E
M

OB
TO

JE
AU

C T

* = generates a new Automation object instance

Note: To exchange symbols or collection of elements including their animations between the
Graphic Toolbox, Automation Object instances and templates, you can use the clipboard.
When you copy and paste symbols, the link to their parent source is broken.

Wonderware Training
Section 6 – Advanced Editing 8-51

Embedding Symbols in Symbols


z Symbols can be nested (and nested …) (and nested ...)
z Embedded symbols appear in Elements
z Shown – 1 Embedded, and 1 copy

Size Propagation and Anchor Points


To control how size changes are propagated to the child symbols, the parent symbol uses an
anchor point. By default, the anchor point of the parent symbol is the center point of all elements
on the canvas.
You can change the anchor point of a parent symbol and specify its position as absolute
coordinates or as coordinates relative to the parent symbol center.

Note: You can also use the properties AbsoluteAnchor and RelativeAnchor in the Properties
Editor to change the position.

When you embed a symbol, the child symbol inherits the anchor point of its parent in relation to its
own center point.

PARENT SYMBOL CHILD SYMBOL (EMBEDDED)

Anchor Point set to: 64,80 Anchor Point embedded at: 110,220

EMBEDDING

InTouch® 10.0 New Features and ArchestrA Graphics


8-52 Module 8 – Other Features

When you make changes to the parent symbol that affect its size, the parent anchor point either:
z Moves to the new center point, if its relative anchor point was 0,0. Its relative anchor point
stays at 0,0 and its absolute anchor point changes.
z Remains at the same absolute position, if its relative anchor point was not 0,0. Its absolute
anchor point is unchanged and its relative anchor point changes.
You can change the position of the anchor point of the parent symbol. This affects the position of
the child symbols on the child canvases. The anchor points of the child symbols however remain
unchanged.

PARENT SYMBOL CHILD SYMBOL (EMBEDDED)

Added Element and moved Anchor Point remains at: 110,220


Anchor Point to: 64,80

PROPAGATION

You can change the anchor point of a child symbol. This moves the child symbol. It does not
change the anchor point position in relation to the symbol.
You can resize or rotate the child symbol. The anchor point moves in relation to the child symbol.

Note: You can also use the property AnchorPoint in the Properties Editor to change the position.

Configuring Size Propagation


Objects are configured to propagate any resize by default, but can be reset on each embedded
instance using the Context (Right-Click) menu.

Wonderware Training
Section 6 – Advanced Editing 8-53

Properties
Properties determine the appearance and behavior of an element or of the symbol. Example: The
property X determines the horizontal position of the selected element.
There are two types of properties:
z Predefined properties.
z Custom properties.
Groups have special properties, some of which they propagate to their contained elements, some
of which they do not.

Note: When you configure an element to reference one of its own properties in a configuration
field or a script, you can just use its property name. For ArchestrA symbols there are no self-
reference keywords, such as “me.” as used for Automation objects.You can however use the “me.”
keyword to reference attributes of the Automation object that is hosting the ArchestrA symbol you
are currently configuring.

Predefined Properties
Properties are specific to the selected element and may vary between elements of different types.
All elements have the following property groups:
z Graphic - the name of the element (or group).
z Appearance - element dimension, location, rotation, transparency and locked status.
You can view specific properties for a specific kind of element or group by clicking a drawing tool
and drawing an element.
These properties can be changed at design-time and more importantly also at Runtime. You can
use the properties of elements in scripting to dynamically manipulate the appearance of any
element of the ArchestrA symbol.

Custom Properties
You can use custom properties to extend the functionality of a symbol. A custom property can
either contain:
z A value, that can be read and written to.
z An expression that can be read.
z An ArchestrA attribute that can be read and written to, if the attributes allows being written
to.
z A property of an element or symbol.
z A custom property of a symbol.
z A reference to an InTouch tag.
For example, for a tank symbol called TankSym you can create a custom property called
TankLevel, that is calculated from an attribute reference to Tank_001.PV. You can then reference
the tank level by TankSym.TankLevel.
When you instantiate the symbol at Runtime, you can assign actual values or references to these
properties in a similar way to an InTouch indirect tag.
Custom Properties appear in the Properties Browser. You can either edit default values of custom
properties here directly or use the Edit Custom Properties dialog box to do so.

InTouch® 10.0 New Features and ArchestrA Graphics


8-54 Module 8 – Other Features

Properties of Groups
Groups have their own properties that you can view and set in the Properties Editor. For most
properties, changing group properties indirectly affects the properties of its contained elements.
You can change the following group properties:
z Name (Name).
z Position (X, Y).
z Size (Width, Height).
z Orientation (Angle).
z Point of Origin (AbsoluteOrigin, RelativeOrigin).
z Transparency (Transparency).
z Locked (Locked).
z Enablement (Enabled).
z Tab Order (TabOrder).
z Tab Stop (TabStop).
z Single Object Treatment (TreatAsIcon).
z Visibility (Visible).
How does Changing the Group Name affect the Contained Elements?
If you change the group name, it has no affect on the contained elements. The contained elements
keep their name.
How does Changing the Position of the Group affect the Contained Elements?
If you change the position of the group, all contained objects are moved with the group. They
maintain the relative position to each other, but their absolute positions change.
How does Changing the Size of the Group affect the Contained Elements?
If you change the size of the group, all contained objects are resized proportionally.

Wonderware Training
Section 6 – Advanced Editing 8-55

How does Changing the Orientation of the Group affect the Contained Elements?
If you change the angle of the group, all contained objects are rotated with the group around the
origin of the group, so that the group remains visually intact.

How does Changing the Transparency of the Group affect the Contained Elements?
If you increase the transparency of the group, all contained objects appear more transparent, but
their own transparency property values do not change. If you change their transparency values it is
in relation to the transparency level of the group.
Example:
If you add an element with 80% transparency to a group, and then apply 50% transparency to the
group, the element appears to have 90% transparency.
The transparency property values however stay unchanged at 80 for the element and 90 for the
group.

How does Locking the Group affect the Contained Elements?


If you lock the group, it has no affect on the contained elements. You can still edit the contained
elements in online mode. You cannot move, resize or rotate the group.
How do Run-Time Properties of the Group affect the Contained Elements?
If you change the run-time properties of a group, the elements do not inherit the property value of
the group, but they do inherit the behavior of the group.
Example:
If you create a group from elements, some of which have their visibility set to true and some to
false, then set the group visibility to false, ALL elements in that group are invisible.
However the Visible property values of the contained elements still maintain their original values
(true and false).

InTouch® 10.0 New Features and ArchestrA Graphics


8-56 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training
Lab 10 – Embedding Symbols 8-57

Lab 10 – Embedding Symbols


Introduction
Prior to InTouch 10.0, Remote Tag Referencing was often used to connect to different object
instances using the same SmartSymbol. InTouch 10.0 uses Relative References with ArchestrA
Symbols for this purpose. This lab is designed to show how to embed an ArchestrA Symbol within
another ArchestrA Symbol, and how to use a Relative Reference to redirect an ArchestrA Symbol
to connect to a different automation object instance.

Objectives
z Embed an ArchestrA Symbol into a new ArchestrA Symbol
z Add a Combo Box control to a Symbol, and configure the Combo Box so it can redirect the
embedded ArchestrA Symbol to connect to a different automation object instance

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. Open the $Tank object and create a new symbol named AllTanks.
b. Embed an Instance of the TankOverview symbol (for example, Tank_001.TankOverview) into
the AllTanks symbol.
c. Rename the embedded TankOverview symbol to TankMaster.
d. Add a Combo Box to the AllTanks symbol.
e. Set the Reference of the Combo Box to the TankMaster symbol's OwningObject property
(switch to the Element Browser when browsing for references).
f. Set the Values of the Combo Box to Tank_001, Tank_002, and Tank_003 and check Use
Values as Captions.
g. Save and close the symbol and the $Tank object.
h. Open $TankApp and create a New InTouch window named TankMaster.
i. Embed your AllTanks symbol from the Tank_001 instance.
j. Switch to Runtime and test the Combo Box. (Use the Control button if necessary.) Observe
the object's behavior.

See the next page for Detailed Lab Instructions

InTouch® 10.0 New Features and ArchestrA Graphics


8-58 Module 8 – Other Features

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Create and Deploy Objects in the IDE


1. In the IDE, open the $Tank object and click the Graphics tab.
2. Add a new symbol named AllTanks.
3. With the symbol highlighted, click Open.
4. Click the Embed Graphic button.
5. In the Galaxy Browser, select Instances, highlight the Tank_001 instance, and select the
TankOverview symbol.

6. Click OK , place the symbol on the canvas, and change its name to TankMaster.
7. Add a Combo Box control to the canvas, above the embedded symbol.
8. Double-click the Combo Box.

Wonderware Training
Lab 10 – Embedding Symbols 8-59

9. Click the ellipsis button next to the Reference field.


10. In the Galaxy Browser, click the Element Browser tab.
11. Set the Reference to the TankMaster symbol's OwningObject property.

12. Click OK.


13. Assign Static Values Tank_001, Tank_002, and Tank_003 to the Combo Box, and check the
Use Values as Captions option.

14. Click OK to accept the configuration of the Combo Box.


15. Select Save and Close in the ArchestrA Symbol Editor.
16. Save and close the $Tank object.

InTouch® 10.0 New Features and ArchestrA Graphics


8-60 Module 8 – Other Features

17. Open the $TankApp application and create a New window named TankMaster.
18. Click the Embed ArchestrA Graphic button.
19. Browse to the Tank_001 instance and select the AllTanks symbol.
20. Place the tank on the TankMaster window.

21. Switch to Runtime and test the Combo Box. (Use the Control button to change the level of
the tank if necessary.) Observe the object's behavior.

Wonderware Training
Section 7 – Multi-User Environments 8-61

Section 7 – Multi-User Environments

Section Objectives
z Edit multiple objects simultaneously with multiple users.

Multi-User Considerations
Setting up and configuring a multi-node / multi-user environment involves a detailed process. This
process is covered extensively in the Wonderware System Platform - Part 1 Training Course.
Deciding which architecture setup to deploy involves a deep understanding of the Wonderware
Application Server and the different configuration options it allows.
Any one object can only be edited by one user at a time. The IDE is configured with a check out
process by default. If your library contains multiple objects, each of those objects can be checked
out and edited by a different user at the same time.
Graphic Symbols are checked In/Out to avoid conflicts with multi-user editing.
z Embedded symbols can be edited
z What happens?

z Notification & Update

If an embedded symbol is changed, the User of the Symbol Editor gets a notification and update.
z If the editing user is the same as the user who has the object checked out,
then working copy of symbol is updated when saved and the symbol remains checked out
z If the editing user is different from the user who has the object checked out,
then only the checked in symbol is updated
z InTouch:
z The notification is shown in WindowMaker

InTouch® 10.0 New Features and ArchestrA Graphics


8-62 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training
Section 8 – Using Client Controls 8-63

Section 8 – Using Client Controls

Section Objective
z Organize and embed .NET client controls.

This section shows you how to:


z Import and embed client controls into a symbol.
z View and edit the properties of the client control.
z Bind the properties of the client control with attributes and element references.
z Configure scripts for client control events.
z Animate client controls.
z Export a client control.
z Configure a client control with security.
z View additional client control information, such as the files the client control uses and what
objects and symbols are using the client control.

InTouch® 10.0 New Features and ArchestrA Graphics


8-64 Module 8 – Other Features

About Client Controls


Client Controls give you functionality contained in third party .NET applications that you can use in
symbols. To use this functionality, you must:
z Import the .DLL file associated with the client control. Any client control contained in the
.DLL file is imported into the Graphic Toolbox.
z Browse and embed one or more of the client controls in a new or existing symbol. The
client controls appear as elements.
z View and edit the exposed client control properties.
z Bind the client control properties to ArchestrA attributes, symbol custom properties or
InTouch tagnames. This can be done with the Data Binding animation.
z Configure scripts for client control events. This can be done with the Events animation.
z Optionally use the symbol containing the embedded client control in an IDE-managed
InTouch application.

.NET DLL Files

IMPORT
Graphic Toolbox Automation Object Template or Instance

Properties

Client Control Methods


Events

EMBED EMBED
Symbol Symbol
Properties Properties
Methods Client Control Client Control Methods
Events Events

.AAPKG
FILE

Examples of software products that contain Client Controls:


z ActiveFactory™
z .NET Client controls developed with Microsoft Visual Studio 2005

Wonderware Training
Section 8 – Using Client Controls 8-65

Importing Client Controls


You can import client controls into the Graphic Toolbox from .NET Dynamic Link Library (.DLL)
files.

Note: After importing client controls, you can organize them in the Graphic Toolbox as you would
with ArchestrA symbols. For more information, see Organizing Client Controls.

You can also import client controls that have previously been exported in an ArchestrA package
(.aaPKG) file.

Importing Client Controls


You can import one or more client controls from .DLL files. The client controls can either be
contained in one single .DLL file, or span multiple files.
To import client controls
a. In the IDE on the File menu, point to Import, and then click Client Control.
The Import Client Control(s) dialog box appears.
b. Select one or more .NET or .DLL files that contain the client controls you want to import and
click Open.
The Import Preferences dialog box appears.
c. Click OK to continue.

Note: If you select .NET or .DLL files that do not contain client controls, the import process
ignores these and continues at the next .DLL file.

InTouch® 10.0 New Features and ArchestrA Graphics


8-66 Module 8 – Other Features

The Import Client Control(s) dialog box appears.

d. When the client controls are imported, click Close.


The imported client controls appear in the Graphic Toolbox.

Note: If the import fails, a message indicates the error in the Import Client Control(s) dialog.

Example for installing ActiveFactory client controls


If you have installed Wonderware ActiveFactory 9.1 (or higher), you can install the client controls
of aaHistClientUI.dll. You can then use these controls to create an ArchestrA symbol that contains
a trend, for example.
To install the ActiveFactory client controls
a. In the IDE on the File menu, point to Import, and then click Client Control.
The Import Client Control(s) dialog box appears.
b. Browse to the C:\Program Files\Common Files\ArchestrA folder, select the
aaHistClientUI.dll file and click Open.
c. On the Import Preferences dialog box, click OK.
d. When the import is complete, click Close.
e. Open the Graphic Toolset and expand the Galaxy node.
The following client controls are listed:
z aaDataGrid.
z aaHistClientActiveDataGrid.
z aaHistClientSingleValueEntry.
z aaPenEditor.
z aaQueryControl.
z aaServerConnectionControl.
z aaServerListConfigurator.
z aaTagPicker.
z aaTimeRangePicker.
z aaTimeZonePicker.
z aaTrend.
z aaTrendControl.
z aaTrendItemEditor.

Wonderware Training
Section 8 – Using Client Controls 8-67

Importing Previously Exported Client Controls


You can import one or more previously exported client controls from an ArchestrA package file
(.aaPKG). Previously the client controls may either:
z Had been exported on their own.
z Been embedded in a symbol and the symbol was exported.
z Been embedded in a symbol and contained in an Automation object instance or template
and the Automation object was exported.
To import a previously exported ArchestrA package containing one or more client controls
z Import the exported client control(s) the same way as you would import an Automation
object (.aaPKG). For more information, see the Industrial Application Server User’s Guide.

Organizing Client Controls


You can organize the client controls within the Graphic Toolbox the same way as you would with
ArchestrA Graphics. You can:
z Rename Client Controls.
z Move Client Controls in and out of Graphic Toolsets.
z Delete Client Controls.

Embedding Client Controls


You can embed an installed Client Control in a symbol as you would embed a symbol within
another symbol.

Note: It is recommended to not overlap client controls with other elements on the canvas.
Otherwise the client controls may not work correctly.

To embed a client control in an ArchestrA symbol


a. On the Edit menu, click Embed Graphic Symbol.
The Galaxy Browser appears.

b. Select the Graphic Toolbox.

InTouch® 10.0 New Features and ArchestrA Graphics


8-68 Module 8 – Other Features

c. Browse to the location that contains the client control.

d. Select a client control from the right panel and click OK.
The mouse pointer changes to paste mode.
e. Click on the canvas where you want to embed the client control.
The client control is pasted onto the canvas.

Example for embedding the ActiveFactory TagPicker client control


If you have installed Wonderware ActiveFactory 9.1 (or higher) follow the steps of the Example for
installing ActiveFactory client controls .
Then do the following:
a. Create a new symbol in the Graphic Toolbox.
b. Open the symbol in the ArchestrA Symbol Editor.
c. On the Edit menu, click Embed Graphic Symbol.
d. Select aaTagPicker and click OK.
e. Click on the canvas near the top left corner.
The ActiveFactory TagPicker control is pasted on the canvas.

Wonderware Training
Section 8 – Using Client Controls 8-69

Viewing and Changing the Properties of Client Controls


When you embed a client control into a symbol, the native properties of the client control are
imported into the Properties Editor in the Misc group.
Also the element container of the client control has properties, such as:
z Name.
z X, Y, Width, Height, AbsoluteOrigin, RelativeOrigin and Locked.
z FillColor.
z TextColor and Font.
z Enabled, TabOrder, TabStop and Visible.
The element container properties override the native properties of the client control.
You can view and change the properties of the control in the Properties Editor.
To view or change the properties of a client control
a. Select the embedded client control on the canvas.
b. In the Properties Editor, locate either a:
z Container property in the property groups Graphic, Appearance, Fill Style, Text Style or
Runtime Behavior.
z Native property in the Misc property group.
c. View or change the located property.
Example for changing a property of the ActiveFactory TagPicker control
Install and embed the ActiveFactory Trend Control in a symbol.
In this example the “Tag Picker” caption of the TagPicker control is hidden.
a. Select the embedded ActiveFactory TagPicker client control.
The Properties Editor is populated with all properties of the client control.

b. In the Misc property group, locate the property HideCaption.

InTouch® 10.0 New Features and ArchestrA Graphics


8-70 Module 8 – Other Features

c. Assign the value True to it and press Enter.


The caption “Tag Picker” of the ActiveFactory TagPicker client control is hidden.

Binding Client Control Properties to Attributes or Element


References
You can bind the properties of an embedded client control to attributes or element references. This
lets you use attributes and element references as source and consumer of data for the client
control properties. This is done with the Data Binding animation.

The Data Binding table contains the following information:


z Name - name of the client control property.
z Type - the .NET data type of the property.
z Value - the default value of the client control property.
z Direction - indicates if the property is read/write or just read-only.

Wonderware Training
Section 8 – Using Client Controls 8-71

read/write property

read-only property

write-only property

d. Reference - the attribute or element reference the property is bound to.

Note: You cannot remove the Data Binding animation.

To bind a client control property with an attribute or element reference


a. Double-click the embedded client control on the canvas.
The Edit Animations dialog box appears and the Data Binding animation is selected by
default.
b. Locate the client control property that you want to bind with an attribute or element reference.
c. Double-click the Reference box.
d. Either:
z Type an attribute or element reference.
z Browse for an attribute or element reference by clicking the Browse button.
e. Repeat above for any other properties you want to bind.
f. When you are done, click OK.

Example for Data Binding in the ActiveFactory TagPicker Control


In this example, the boolean symbol custom property HCV controls the visibility of the
ActiveFactory TagPicker caption.
Do the following:
a. Create a boolean custom property and rename it HCV.
b. In the ArchestrA Symbol Editor, double-click on the embedded ActiveFactory TagPicker
control.
c. From the list of properties in the Data Binding configuration area, locate the HideCaption
property.
d. Double-click the Reference box of the HideCaption property.
e. From the Galaxy Browser, select the HCV custom property and click OK.
The HideCaption property is now associated with the element reference HCV. You can set the
value of custom property HCV to control the visibility of the caption of the embedded client control.

InTouch® 10.0 New Features and ArchestrA Graphics


8-72 Module 8 – Other Features

Configuring Client Control Event Scripts


You can configure an ArchestrA script that is executed when a client control event occurs.
This is done with the Event animation.

To configure an ArchestrA script for a client control event


a. Double-click the embedded client control on the canvas.
The Edit Animations dialog box appears.
b. In the animation list, select Event.
The right panel shows the events configuration.
c. From the Event list, select the event for which you want to execute a script.
The Parameters list shows for the selected event:
z Type: the data type of each parameter.
z Name: the name of each parameter.
d. In the script area you can write the script that is associated with the event.
e. If you want to insert an event parameter in your script, click the Select Event Parameter icon.
Select the parameter.
The parameter name is inserted into the script at the cursor position.

f. If you want to configure scripts for other events, select the event from the Event list.
The script area is cleared and you can write the script for the newly selected event.
g. When you are done, save and close.

Wonderware Training
Section 8 – Using Client Controls 8-73

Example for configuring an event script for the ActiveFactory TagPicker control
Install and embed the ActiveFactory TagPicker Control in a symbol as described in. In this
example, when one of the tags is picked, a message is logged in the Log Viewer.
a. In the ArchestrA Symbol Editor, double-click on the embedded ActiveFactory TagPicker
control.
b. In the animation list, select Event.
c. From the Event list, select the event OnTagsPicked.
d. In the script area, type the following:
LogMessage(“User picked one or more tags.”);
e. Save and close the Edit Animations dialog box.
f. Save and close the ArchestrA Symbol Editor.
g. Embed the symbol in an IDE-managed InTouch application.
h. Switch to Runtime and connect to a valid InSQL source.
i. Select the SysTimeSec variable in the TagPicker control.
j. Check the SMC Log Viewer. The message “User picked one or more tags” appears.

Note: Actually, the above example doesn’t work right now because of validation failure for the
LogMessage script.

Animating Client Controls


Every client control has the animation types:
z Data Binding that determines which attributes and element references can read and write
to the client control.
z Event that assigns scripts to individual client control events.
You can add the following animations that correspond to the supported client control container
properties:
z Visibility.
z Fill Style.
z Text Style.
z Location Horizontal.
z Location Vertical.
z Width.
z Height.
z Tooltip.
z Disable.
If you configure these animations, the resulting behavior and appearance overrides the behavior
and appearance given by the native properties of the client control.
To add animation to embedded client controls
a. Double-click the embedded client control on the canvas.
The Edit Animations dialog box appears.
b. Add animations as you would with any other element.

InTouch® 10.0 New Features and ArchestrA Graphics


8-74 Module 8 – Other Features

Exporting Client Controls


You can export client controls as ArchestrA package files (.aaPKG). You can either export them:
z Directly from the Graphic Toolbox.
z Indirectly when you export automation objects or symbols that reference them.
To export client controls directly as ArchestrA package files
a. From the Graphic Toolbox, select one or more client controls that you want to export.
b. On the Galaxy menu, point to Export, and then click Object(s).
c. Follow the general procedure for exporting Automation objects.
For more information, see the Wonderware Application Server User’s Guide.

Note: You can import the client controls again from the exported .aaPKG files.

Securing Client Controls


The client controls use the same security setting as the symbols. You can set the security for client
controls and symbols in the Security panel of the IDE.
For more information on Security Settings for Symbols, see the Wonderware Application Server
User’s Guide.

Viewing Additional Client Control Information


You can also view:
z Which .DLL files, or assemblies, are used for the client control.
z Class name, vendor, version.
z Which Automation objects and ArchestrA symbols use the client control.
This information is contained in the Client Control Properties panels.

Note: The client control properties are different than the properties of the embedded client control.
The client control properties can be viewed in the IDE directly. The properties of the embedded
client control can be viewed in the Properties Editor of the ArchestrA Symbol Editor.

Wonderware Training
Section 8 – Using Client Controls 8-75

Viewing the Client Control Assemblies


You can view which Client Control .DLL files, or assemblies, are used for the client control.
To view the client control assemblies
a. In the Graphic Toolbox, select the client control.
b. On the Galaxy menu, click Properties.
The Properties dialog box appears.

c. On the General tab, you can view:


z The Primary Assembly, which is the main .DLL file.
z Additional Assemblies, which are linked to the main .DLL file and automatically loaded.

Viewing Class Name, Vendor and Version of a Client Control


You can view the class name, vendor and version of a client control in its Properties panel.
To view the class name, vendor and version of a client control
a. In the Graphic Toolbox, select the client control.
b. On the Galaxy menu, click Properties.
The Properties dialog box appears.
c. On the General tab, you can view the:
z Class Name.
z Vendor.
z Version.

InTouch® 10.0 New Features and ArchestrA Graphics


8-76 Module 8 – Other Features

Viewing Objects and Symbols Referencing Client Controls


You can view which Automation objects and ArchestrA symbols are using a given client control.
This can be viewed in the Properties dialog box of the client control.
Viewing objects and symbols referencing a client control
a. In the Graphic Toolbox, select the client control.
b. On the Galaxy menu, click Properties.
The Properties dialog box appears.
c. Click Referenced By.
The list of objects and symbols that are using the client control is shown.

Wonderware Training
Lab 11 – Using Client Controls 8-77

Lab 11 – Using Client Controls


Introduction
In this lab, you will extend the capabilities of your InTouch managed application environment by
configuring and using a third-party client control.

Objective
z Add and configure a third-party client control in an InTouch managed application

Summary Lab Instructions


Following is a summary of the general steps you will complete for this lab. For detailed
instructions, please refer to the Detailed Lab Instructions on subsequent pages.

a. Import the System.Windows.Forms.dll .NET control into your Galaxy.


By default, the .NET control is located at:
C:\Windows\Microsoft.NET\Framework\v2.0.50727
b. Create a new Graphic Toolset and move all the .NET Controls into it.
c. Create a New Symbol in your Graphic Toolbox named MyWebBrowser and open it.
d. Embed the .NET Control named WebBrowser in your symbol and name it BrowserWindow.
e. Size it to 1000 wide x 800 high and select View / Zoom to / Zoom to Selection.
f. Draw a Text Box and two buttons: Back, Forward underneath the WebBrowser.
g. Create a String Custom Property named URL.
h. Add a User Input / String Animation link to the Text Box with the String URL.
i. Add a Predefined Script with an On Show Trigger and the following script:
BrowserWindow.GoHome();
j. In the same Edit Scripts window, add a Named Script and configure it as follows:

Name Expression Trigger Script


Navigate URL Data Change BrowserWindow.Navigate(URL);

k. Add an Action Script Animation to the Back button as follows:


BrowserWindow.GoBack ();
l. Add an Action Script Animation to the Forward button as follows:
BrowserWindow.GoForward ();
m. Save and Close the Symbol Editor.
n. Embed the MyWebBrowser symbol into an InTouch window and test in Runtime.

InTouch® 10.0 New Features and ArchestrA Graphics


8-78 Module 8 – Other Features

Detailed Lab Instructions


Following are detailed lab instructions for completing this lab. For a summary of instructions,
please refer to the Summary Lab Instructions on the previous page(s).

Import the System.Windows.Forms Client Control Library


1. If it is not already open, launch the IDE and connect to your galaxy.
2. From the main menu, select Galaxy / Import / Client Control to begin the import process.

3. In the Import Client Control(s) dialog, browse to the following location:


C:\Windows\Microsoft.NET\Framework\v2.0.50727

Note: Your instructor will provide the location if it is different than the one above.

4. Open the System.Windows.Forms.dll file.

Wonderware Training
Lab 11 – Using Client Controls 8-79

5. When prompted for Import Preferences, select Skip and click OK.

The client controls begin to import. This may take a few minutes.
6. When the import is complete, click Close.

The new controls are imported into the Graphic Toolbox and are now visible in the root list.

InTouch® 10.0 New Features and ArchestrA Graphics


8-80 Module 8 – Other Features

7. Create a new Graphic Toolset named .NETControls and move the imported controls into this
toolset.

Create the Web Browser Symbol


8. Create a New Symbol and name it MyWebBrowser.
9. Double-click MyWebBrowser to open the Symbol Editor.

10. Click the Embed Graphic button.


11. From the .NETControls toolset, select WebBrowser and click OK.

Wonderware Training
Lab 11 – Using Client Controls 8-81

12. Place the control on the canvas and rename it BrowserWindow.


13. Change the Properties of the object to a Width of 1000 and Height of 800. (You may wish to
change these values based on your own system resolution.)

Note: This object will need to be almost full screen within the InTouch window. In most cases
you would size the object after it has been placed in InTouch. However, there will be additional
objects within this symbol that you will not want resized along with the browser, so you will
draw everything at an appropriate scale in relation to the other objects.

14. From the main menu, select View / Zoom to / Zoom to Selection to adjust your view to see
the entire object.

InTouch® 10.0 New Features and ArchestrA Graphics


8-82 Module 8 – Other Features

15. Below the browser control, draw a Text Box using the drawing tools. Change the font of the
text box to an appropriate size.
16. Draw two buttons below the Text Box and Substitute Strings to label them Back and Forward
respectively. Change the font of the buttons to an appropriate size.

17. Add a Custom Property named URL to the symbol, and set its Data Type to String.

18. Double-click on the text box and add a User Input / String animation for the Custom Property
URL as shown below.

19. Uncheck the Use Keypad option, and click OK.

Wonderware Training
Lab 11 – Using Client Controls 8-83

20. From the Special menu, select Scripts.

21. Ensure the Trigger type is On Show and click the Display Attribute Browser button
(circled below).

22. Click the Element Browser tab and select the BrowserWindow Element.
23. Select the GoHome( ) method and click OK.

24. BrowserWindow.GoHome( ) will now show in the script pane.


Add a semicolon (;) at the end of the script.

InTouch® 10.0 New Features and ArchestrA Graphics


8-84 Module 8 – Other Features

25. In the same Edit Scripts window, click the Add Script + button to add a Named Script and
configure it as shown below.

Name Expression Trigger Script


Navigate URL Data Change BrowserWindow.Navigate(URL);

26. Close the Edit Scripts window.


27. Double-click the Back button and add the following Action Script.:
BrowserWindow.GoBack ();

28. Double-click the Forward button and add the following Action Script:
BrowserWindow.GoForward ();

29. Save and Close the Symbol Editor.

Wonderware Training
Lab 11 – Using Client Controls 8-85

Test the Browser Symbol in Runtime


30. Switch to WindowMaker and create a new window drawn to your approximate resolution for
the Web Browser.
31. Click on the Embed ArchestrA Graphic button and place the MyWebBrowser symbol onto
your window. Size as appropriate.
32. Switch to Runtime and test the functionality.

InTouch® 10.0 New Features and ArchestrA Graphics


8-86 Module 8 – Other Features

– Intentionally left blank –

Wonderware Training

You might also like