Overview
This page presents information about high performance graphics.
On this page:
Table of Contents | ||||
---|---|---|---|---|
|
Expand | ||
---|---|---|
| ||
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 SelectionHuman 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
Operator performance according to the High Performance HMI Handbook | |||
---|---|---|---|
Traditional HMI | High Performance HMI | Results | |
Detecting abnormal situations before alarms occur | 1 in 10 occurrences | 5 in 10 occurrences | 5x improvement |
Success rate handling abnormal situations | 70% | 96% | 37% improvement |
Time to complete abnormal situation tasks | 18.1 minutes | 10.6 minutes | 41% improvement |
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 ProjectSolution.
Display Color Use | Theme Color Name | RGB | HEX |
Mouse Over Or Selected | ObjectMouseIsOverOrSelectedFill | (79, 111, 147) | #4F6F93 |
ObjectMouseIsOverOrSelectedStroke | (47, 70, 106) | #2E466A | |
Mouse Not Over | ObjectMouseIsNotOverFill | (62, 87, 117) | #3E5775 |
ObjectMouseIsNotOverStroke | (46, 70, 106) | #2E466A | |
Static/Text Color Use | |||
Foreground | TextForeground | (0, 0, 0) | #000000 |
DashboardTitleForeground | (228, 233, 239) | #E4E9EF | |
Background | DisplayBackground | (255, 255, 255) | #FFFFFF |
HeaderBackground | (48, 86, 128) | #305680 | |
DashboardItemBackground | (245, 245, 245) | #F5F5F5 | |
DashboardTitleBackground | (79, 111, 179) | #4F6F93 | |
Border | DashboardItemBorder | (62, 87, 117) | #3E5775 |
Notification Color Use | |||
Low Priority Alarm | Not from theme configuration | (255, 140, 0) | #FF8C00 |
Medium Priority Alarm | Not from theme configuration | (245, 25, 0) | #FE5100 |
High Priority Alarm | Not from theme configuration | (255, 0, 0) | #FF0000 |
Element State Color | |||
Off/De-energized/Idle/Stopped/Closed | HPOffFill | (158, 158, 158) | #9E9E9E |
HPOffStroke | (145, 145, 145) | #919191 | |
On/Energized/Running/Open | HPOnFill | (252, 252, 252) | #FCFCFC |
HPOnStroke | (238, 238, 238) | #EEEEEE | |
Disabled/Out of Service | HPDisableFill | (210, 210, 210) | #D2D2D2 |
HPDisableStroke | (197, 197, 197) | #C5C5C5 | |
Navigation Button | |||
Fill | ObjectsHeaderFill | (228, 233, 239) | #E4E9EF |
Layered Graphical Hierarchy
Layered Graphical Hierarchy refers to the way in which data is structured across displays throughout the projectSolution. 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
LibraryLibraries
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: The a local library and a native library. Both libraries can be accessed via the Components Panel, which supports various graphical elements for designing displays. It The panel provides access to both native and custom symbols for use in process visualizations. Users organize Furthermore, it organizes symbols into categories such as HMI and HPG sub-groups, using with many pre-configured options to represent different for representing industrial components.
In Solution
Clicking "In Solution"
onin the Components Panel opens the Local Library for Custom Symbols. This section stores custom symbols
that users create and modifycreated and modified by users for specific solutions. Users can modify native symbols without altering the original versions.
They can access theseThese custom symbols are accessible for reuse and further modification while preserving the integrity of the original symbol set.
Library
Clicking "Library"
onin the Components Panel opens the Built-in Library for Native Symbols. This section contains base symbols under HMI and HPG, which
userscan
customizebe customized as needed.
Users apply these symbols as templates to create process visualizations that meet project requirements.The Native Symbols Library provides pre-defined graphic components for industrial process visualization. Users apply these symbols, such as blowers, conveyors, and cooling systems, to model processes, configure components, and monitor real-time data. The library helps users create standardized interfaces across HMI and SCADA system applications.
HPG are accessed through the Draw Editor under the Symbol Library button (located in the toolbar).
The Native Symbols Library provides pre-defined graphic components organized into categories like HMI and HPG. It allows users to create and configure industrial process visualizations. The library includes symbols for blowers, compressors, conveyors, cooling, crushers, and more. Users can apply these symbols to model processes, configure components, and visualize real-time data in HMI and SCADA systems. It enables the creation of standardized interfaces across various industrial applications.
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.
Component | Subcomponent | Description |
---|---|---|
Blowers | Increases airflow for cooling or ventilating processes. | |
Bucket Elevators | Lifts bulk materials vertically through a series of buckets attached to a rotating belt or chain. | |
Body | Supports the main structure of the bucket elevator and maintains alignment. | |
Large | Handles heavy materials or higher volume transport in larger bucket elevators. | |
Small | Handles lighter materials or lower volume transport in smaller bucket elevators. | |
Tail | Houses the pulley or sprocket for turning the chain or belt in the bucket elevator. | |
Buttons | Controls industrial equipment or executes user commands. | |
Custom | Allows user-defined or specially designed functionality for specific industrial operations. | |
Circular Gauge | Displays pressure, temperature, or other operational data in an analog format. | |
Compressors | Increases the pressure of gases by reducing their volume. | |
Conveyors | Moves materials along a path using belts, rollers, or chains. | |
Bases | Supports conveyor systems. | |
Columns | Ensures stability and alignment of conveyor systems. | |
Large | Transports heavy or high-volume materials in larger conveyor systems. | |
Pulleys | Transfers motion and guides or drives belts in conveyor systems. | |
Small | Transports lighter loads in smaller conveyor systems. | |
Cooling | Reduces the temperature of machinery, processes, or materials. | |
Coolers | Cools fluids, gases, or air in industrial processes. | |
Towers | Houses heat exchange processes to dissipate heat into the environment. | |
Crushers | Breaks down large materials into smaller pieces. | |
Cyclones | Separates particles from a gas or liquid stream using centrifugal forces. | |
Chain | Transmits mechanical movement or conveys materials within cyclones. | |
Large | Handles high-capacity operations in large cyclones. | |
Pipes | Transports fluids or gases within cyclone systems. | |
Small | Handles finer particle separation in small cyclones. | |
Furnaces | Heats, melts, or treats materials at high temperatures. | |
Buckets | Transports materials in processes like loading or unloading. | |
Rotaty_Kilns | Processes materials continuously in cylindrical furnaces that rotate on their axes. | |
Heating | Increases the temperature of materials or processes. | |
Indicators | Displays operational data such as temperature, pressure, or process status. | |
Labels | Identifies components, areas, or provides operational instructions in industrial settings. | |
Color | Identifies components or categories using color coding. | |
Linear Gauge | Displays operational data in a straight-line analog format. | |
Mills | Grinds or crushes materials in mining or manufacturing operations. | |
Miscellaneous | Covers various unclassified components in industrial processes. | |
Motors | Converts electrical energy into mechanical motion to drive equipment. | |
Piles | Stores bulk materials in heaps or mounds. | |
Pipes | Transports fluids, gases, or fine materials between different parts of industrial processes. | |
Large | Transports high volumes of fluids or gases in large-diameter pipes. | |
Medium | Handles moderate flow rates in medium-sized pipes. | |
Small | Transports low-flow or specialized operations in small-diameter pipes. | |
Tiny | Handles precise or compact operations in very small pipes. | |
Pumps | Moves liquids or gases by mechanical action in fluid handling systems. | |
Reclaimers | Recovers bulk materials from stockpiles in industries like mining or bulk material handling. | |
Silos | Stores bulk materials such as grain, coal, or cement in large vertical containers. | |
Stackers | Stacks bulk materials into piles, often used alongside reclaimers. | |
Tanks | Holds liquids or gases in industrial processes. | |
Valves | Controls the flow of fluids or gases in piping systems. | |
Vehicles | Transports materials or equipment within a plant or industrial site. | |
Large | Transports heavy loads or operates over long distances. | |
Small | Transports lighter loads or operates over shorter distances. |
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.
Categories | Description |
---|---|
Alarms | Alerts operators to system faults or anomalies by triggering visual or audible signals. |
Blowers | Moves air or gas through systems to maintain airflow or assist with processes. |
Compressors | Compresses gases to increase pressure for transport or storage in various systems. |
Conveyors | Transports materials between locations in industrial processes using belts or rollers. |
Cooling | Removes heat from processes to maintain operational temperatures. |
Crushers | Reduces the size of solid materials for further processing or transport. |
Cyclones | Separates particles from air or gas using centrifugal force. |
Furnaces | Heats materials for industrial processes such as melting or treatment. |
Heating | Provides heat to materials or systems to achieve desired temperatures. |
Mills | Grinds or pulverizes materials to achieve smaller particle sizes. |
Motors | Converts electrical energy into mechanical motion to drive equipment. |
Pumps | Moves liquids through piping systems to different process stages. |
Tanks | Stores liquids or gases for use or processing in industrial systems. |
Valves | Controls the flow of liquids or gases by opening, closing, or regulating passage. |
HPG Design
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.
Symbol Libraries
The first is the Built-in and Native Library, which includes over 500 pre-defined symbols used to represent industrial components and processes. The second is the Local Library, where users can store custom symbols created for specific needs. Each library has two categories: HMI and HPG, with subcategories organizing symbols by equipment type, such as blowers, compressors, and valves. These libraries support the configuration and visualization of industrial processes.
Solutions developed by using the software platform organize symbols into two main Libraries a Built-in and Native Library with more than 500 graphical symbols and a Ad-hock and Local Library, where is stored the custom symbols. Each one has two main categories: HMI and HPG. Into this categories, there are many sub-categories.
Symbols are separated into 3 main categories (Default, HighPerformance and Standard). Each HighPerformance subcategory component is detailed below.
HighPerformance subcategory components
Alarms
Blowers
Compressors
Conveyors
Cooling
Crushers
Cyclones
Furnaces
Heating
Mills
Motors
Pumps
Tanks
ValvesMapping 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.
Expand | ||
---|---|---|
| ||
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 NewSolution 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.
Expand | ||
---|---|---|
| ||
Expand | ||
---|---|---|
| ||
Expand | ||
---|---|---|
| ||
Expand | ||
---|---|---|
| ||
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:
Code Block |
---|
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:
Code Block |
---|
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 appearance when an alarm is in an active state.
Expand | ||
---|---|---|
| ||
In this section:
Page Tree | ||||
---|---|---|---|---|
|