High Performance Graphics

High Performance is a design approach that turns traditional displays into intuitive information with actionable intelligence. It displays information in a simple color style to help make it easier to understand the project status. 

The High Performance approach achieves this by following several fundamental characteristics, which 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 data analysis.

Humans cannot handle so much information all at once. According to the ISA SP 18.2 Standard, project operators should only face about 10 alarms per hour in order to accurately respond to each of them. However, the alarm rate is usually higher in the real world. 

Human Centric Design allows users to create smart designs with color configurations that help the operator's eyes easily focus on the situations that require more attention. 

Detailed below are several proven operator performance results from the High Performance HMI Handbook

Careful Color Selection

Even though the HMI application is a visual/graphic interface, you should not choose colors or shapes simply to have a stylish display. The focus should be on facilitating project comprehension. 

Below is a set of color conventions that is recommended for HMI projects.

• Alarms: Use bright, intense colors that are not used in any other part of the display.
• Background: Use non-saturated colors (e.g.: Light Gray) that have minimum interference with other colors.
• Static Equipment: Use Dark Gray or Black for process lines. 
• Equipment State: The equipment state's color selection must depend on additional appearance features, such as Fill, Shape, or Text.
• Live Data: Use less intense, cool colors (e.g. dark blue and dark green). These colors should be easily distinguished from static information so they do not distract the operator

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

Layered Graphical Hierarchy

Layered Graphical Hierarchy refers to the way in which data is structured across displays throughout the project. The recommended organization method is a series of levels and sublevels in which each level is more detailed than the previous one.

• Level 1: High-Level information such as an indication of performance or events that require immediate attention.
• Level 2: The display used by operators to perform their tasks.
• Level 3: Displays the controls for individual equipment as well as the information and status of the equipment. 
• Level 4: The most detailed display that provides information on individual components and equipment. 

Symbol Libraries

Symbols are graphical objects that contain a series of built-in dynamics. They can be added to a display as a representation of tags. The software platform organizes graphical symbols into two main libraries: a local library and a native library. Both libraries can be accessed via the Components Panel, which supports various graphical elements for designing displays. The panel provides access to both native and custom symbols for use in process visualizations. Furthermore, it organizes symbols into HMI and HPG sub-groups, with many pre-configured options for representing industrial components.

In Solution

Clicking "In Solution" in the Components Panel opens the Local Library for Custom Symbols. This section stores custom symbols created and modified by users for specific solutions. Users can modify native symbols without altering the original versions. These custom symbols are accessible for reuse and further modification while preserving the integrity of the original symbol set.

Library

Clicking "Library" in the Components Panel opens the Built-in Library for Native Symbols. This section contains base symbols under HMI and HPG, which can be customized as needed.

HMI

The HMI symbols represent visual components used to display and control industrial processes on operator interfaces. They simplify the interaction between operators and machinery by showing system statuses and allowing inputs. Each symbol corresponds to specific functions such as buttons, indicators, or gauges. These symbols standardize operations, providing consistent interfaces across various systems for monitoring and adjustments.

HPG

The HPG symbols prioritizes operational efficiency by using simplified graphics that emphasize key data points, reduce visual noise, and focus on metrics that directly impact decision-making. This design approach enhances situational awareness, enabling operators to respond quickly to abnormalities.

Designing HPG Displays

You can access HPG Symbols through the Draw Editor by going to Displays/Draw. In the Components Panel on the left-side panel, select Symbols, choose the desired symbol directory (In Solution or Library), and select HPG to view all available options.

Mapping Symbols to Runtime Objects

To map an added symbol to a runtime object, double-click the symbol to display its supported properties.

Even though symbols have different runtime properties, they all can have similar appearances (such as color) according to the state they are in. In the example below, every symbol that is On, Open, Running, or Energized appears white to indicate that the item is in a "running" state. Since they are all in a similar state, each of them would be mapped to the Value "1".

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

The values listed above follow the color convention pattern for HMI displays, and the different colors a symbol can display are illustrated in the image below.

Symbol Themes and Colors

A symbol's appearance can be customized by changing the theme for the object. In Displays→ Theme Colors, you will find theme palettes that are predefined and are built into the NewProject Templates.

The ItemName property that is related to the HPG symbols are highlighted in the image below.

The user can use this page to easily create new themes or edit pre-existing ones. The following images show some examples using different themes.

Alarm Indicator

This symbol acts as an indicator for the alarm state of a specific tag. It can display the alarm priority level (low, medium, or high), and it has 3 different possible color configurations depending on the status of the alarm state. See image below. 

The AlarmPriorityEnum property 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

The following images demonstrate the display's appearance when an alarm is in an active state.

In this section: