Symbols and Graphical Components

Display Controls: customizable symbols vs configurable graphical components

Platform → Technology → UI → Clients | WebAssembly | Symbols | Drawing | Responsive | Layouts

Display Control Taxonomy

All visual elements in displays are Display Controls, organized by customization level:

Industrial Icons

Industrial Icons sit within the broader Display Controls taxonomy as a specialized subset. They were created using a custom Font Family, so its usage in very light in resources, and it can accept dynamic behavior and it is "theme-friendly". Font-based - Character codes render as icons (#IndustrialIcons font family).

Industrial icons are specifically purposed for UI navigation rather than process visualization.

The selection is visual, see ->

Symbols

Open Customization

Symbols are vector-based Display Controls that expose their internal structure for complete customization. You can:

• Edit vector paths directly
• Add dynamic properties and animations
• Create parameters for instance customization
• Combine multiple elements into reusable templates
• they can include images and industrial icons
• They can include graphical components and other symbols

Symbol Architecture

Symbols use a parameter-based architecture enabling instance customization without breaking library links:

Symbol Definition: Motor
??? Vector Graphics (SVG paths)
??? Dynamic Properties
?   ??? Fill Color: #STATE:Tag.PlaceHolder.Digital
??? Parameters Exposed
    ??? STATE → Maps to any digital tag

When placing symbol instances, you map parameters to specific tags while the symbol structure remains unchanged.

Symbol Libraries

Symbol Collections

• HMI Collection - Traditional SCADA symbols with multiple visual states
• HPG Collection - High Performance Graphics per ISA-101 standard
• Symbol Wizards - Configurable templates for motors, pumps, valves, tanks

Graphical Components: Closed Configuration

Graphical Components are pre-built Display Controls providing specific functionality. Internal implementation is closed, but extensive configuration options enable customization:

Component Categories

Component Configuration

While you cannot edit internal code, components expose rich property sets:

• Data Binding - Connect to tags and datasets
• Appearance - Colors, fonts, themes
• Behavior - Update rates, interaction modes
• Events - Click, change, validation handlers

Selection Guidelines

Dynamic Properties

Both Symbols and Components support dynamic properties, but implementation differs:

Symbol Dynamics

Embedded within symbol definition using parameter syntax:

#TagValue:Tag.Temperature
#MinValue:0
#MaxValue:100

Component Dynamics

Configured through property bindings:

TrendChart.DataSource = @Dataset.ProductionData
TrendChart.TimeRange = @Tag.TimeWindow

Performance Considerations

Symbol Performance

• Vector rendering overhead increases with complexity
• Limit nested groups to 3-4 levels
• Minimize gradient usage
• Cache static elements

Component Performance

• Optimized native code execution
• Built-in data virtualization
• Hardware acceleration for charts
• Automatic update throttling

Creating vs Configuring

Creating Custom Symbols

1. Draw vector graphics using shapes and paths
2. Add dynamic animations
3. Define parameters with # syntax
4. Save to Solution Library
5. Reuse across displays

Configuring Components

1. Drag component from panel
2. Set properties in sidebar
3. Bind to data sources
4. Configure events
5. Test in preview

Industrial Standards

FrameworX symbols follow industry standards:

• ISA-101 - High Performance HMI graphics
• ISA-5.1 - P&ID symbology
• ISO 14617 - Graphical symbols for diagrams

Related Concepts

• - Where controls are placed
• - Animation details
• - Quick customization
• - Complete control catalog

In this section...