Display Controls: customizable symbols vs configurable graphical components.

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

FrameworX organizes all visual elements as Display Controls, divided into two primary categories: Symbols (open vector graphics you customize) and Graphical Components (closed functional controls you configure). This distinction determines how you create, modify, and deploy visual elements in your HMI.



Display Control Taxonomy

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

Control Type

Definition

Customization

Examples

Symbols

Open vector graphics

Draw, dynamics, parameters

Pumps, valves, motors, tanks

Components

Closed functional controls

Configure properties, add dynamics

Charts, gauges, data grids

Basic Shapes

Basic geometries

Add dynamics, combine.

Rectangle, ellipse, polygon

Shape Paths

Combined geometries 

Same as shape, plus geometry

SVG images, combined 

Images

Bitmap graphics

Add dynamics, edit if SVG

Logos, photos, backgrounds

Industrial Icons

Pre-designed Icon

Add dynamic behavior

Settings gear, home, alarms bell

Industrial Icons

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

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

For more information, see IndustrialIcons Control Reference.

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

Library Type

Scope

Content

Management

Product Library

Global (all solutions)

2000+ pre-built symbols

Library.dbsln file

Solution Library

Project-specific

Custom and modified symbols

Within solution file

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

Category

Purpose

Key Components

Charts

Data visualization

TrendChart, BarChart, PieChart, XYChart

Gauges

Analog display

CircularGauge, LinearGauge, Compass

Editors

User input

TextBox, ComboBox, DatePicker, Slider

Viewers

Content display

DataGrid, AlarmViewer, WebBrowser

Interaction

Navigation

Button, Menu, PageSelector

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

Use Symbols When

Use Components When

Representing physical equipment

Displaying data in standard formats

Creating P&ID diagrams

Need built-in functionality (trending, alarming)

Requiring custom animations

Want consistent behavior across solutions

Building reusable equipment templates

Implementing complex UI controls



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


In this section...