High Performance Graphics

Overview

High Performance is a design approach that turns traditional displays into intuitive information visualization with actionable intelligence. It facilitates the understanding of the project status by displaying information using a simple color style.

The High Performance approach has some fundamentals characteristics that are followed in order to achieve its goal. Said pillars are listed below.

• Human Centric Design
• Careful Color Selection
• Layered Graphical Hierarchy

Human Centric Design

The main objective of this design is to increase the effectiveness of data handling and analysis.

It is a known fact that the human can handle only so much of information at the same time. According to the

ISA SP 18.2 Standard the operator should face about 10 alarms per hour, but this rate is usually higher.

By using a smart design and the right color configuration, the operator’s eye can be focused to the situation that most requires its attention. From High Performance HMI Handbook there are proven results in operator performance, as detailed below.

Careful Color Selection

Despite being a Visual/Graphic interface, the colors and shapes in a HMI application should not have its focus on being stylish and good looking, but on facilitating the project comprehension.

There is a set of color convention that is recommended for HMI projects. . .

• Alarms: Use bright, intense colors that are not used in any other parte of the
• Background: Non-saturated colors (e.g.: Light Gray) that have minimum interference with other colors.
• Static Equipment: Same color as Dark Gray or Black should be used for process lines.
• Equipment State: The state should not depend on color only, but on additional appearance features as well (such as Fill, Shape and Text)
• Live Data: Less intense and cool colors (e.g. dark blue and dark green). These colors should be easy distinguished from static information, without distracting the operator

The table below illustrate the recommended color palette for a High Performance HMI Project.

Layered Graphical Hierarchy

Its refereed to the way in which the data is structured across the Displays throughout the Project. The organization method recommended is using a series of levels and sublevels, where each one of them is more detailed than the previous one.

Hierarchical Levels.

• Level 1: High-Level information, indication of performance and events that require immediate attention.
• Level 2: Display used by operators to perform their
• Level 3: Contain individual equipment information and
• Level 4: Most detailed display, provide information on individual components and

Symbol Library

Symbols are graphical objects that contains a series of built-in Dynamics applied to them. They can be added to a Display as a representation of Tags.

The HPG are accessed through the Draw Editor at the Symbol Library button (located at the toolbar).

Insert Symbol.

List of Symbols

The Symbols are separated 3 big Categories (Default, HighPerformance and Standard). As we are focusing on the HighPerformance ones, each subcategory has its components detailed below.

Mapping Symbols to Runtime Objects

To map the added symbol to a runtime object (Tag or some other property) double-click on it to display its supported properties.

Symbol Runtime Properties.

Each symbol has different runtime properties, but they all have a similar behavior on their appearance.

Value = 0 // Off/De-energized/Idle/Stopped/Closed
Value = 1 // On/Energized/Running/Open
Value = 2 // Disabled/Out of Service

These values follow a Color Convention pattern for HMI Displays.

The images below illustrate the different colors a symbol can display.

Symbol Themes and Colors

The symbol appearance can be customized by changing the Themes for this object. On Run-Dictionaries- Themes you will find some predefined Theme palettes that are built-in the NewProject Templates.

The ItemName properties related to HPG Symbols are highlighted in the image below.

Symbol Themes.

The user can easily create new themes (or edit pre-existing ones) at this page. Some examples using different themes can be found at the following images.

Alarm Indicator

This Symbol acts as an indicator for the Alarm State of an specific Tag. It can display the alarm priority level (low, medium and high) and it have 3 different color configurations according to the Alarm State:

Alarm Indicator Symbol.

There is a Tag property called AlarmPriorityEnum that is used for animating the Alarm Indicator Symbol. The Enum property has the following settings:

Low Priority (Alarm Priority = 0 - value in the Alarm Items table)
1	- Acknowledged
2	- Normalized
3	- Active

Medium Priority (Alarm Priority = 1 - value in the Alarm Items table)
4	- Acknowledged 5- Normalized
6	- Active

High Priority (Alarm Priority = 2 - value in the Alarm Items table)
7	- Acknowledged
8	- Normalized
9	- Active

In Runtime, the Alarm Indicator can display the following behaviors:

Number in Symbol:
-	1: Priority High (2)
-	2: Priority Medium (1)
-	3: Priority Low (0)

Outer Border and inner element:
-	Border static and Element blinking: Alarm is active
-	Border static and Element static: Alarm is acked
-	No Border and Element blinking: Alarm is normalized
-	No Border and No Element: Alarm not active

To illustrate the behaviors described above, the following images demonstrates the appearance when an alarm is in active state.