Display Controls: customizable symbols vs configurable graphical components

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

Display Controls Architecture

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 TypeDefinitionCustomizationExamples
SymbolsOpen vector graphicsDraw, edit paths, add dynamicsPumps, valves, motors, tanks
ComponentsClosed functional controlsConfigure properties onlyCharts, gauges, data grids
ShapesBasic geometriesSize, color, positionRectangle, ellipse, polygon
ImagesBitmap graphicsPosition and scalingLogos, photos, backgrounds

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

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 TypeScopeContentManagement
Product LibraryGlobal (all solutions)2000+ pre-built symbolsLibrary.dbsln file
Solution LibraryProject-specificCustom and modified symbolsWithin 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

CategoryPurposeKey Components
ChartsData visualizationTrendChart, BarChart, PieChart, XYChart
GaugesAnalog displayCircularGauge, LinearGauge, Compass
EditorsUser inputTextBox, ComboBox, DatePicker, Slider
ViewersContent displayDataGrid, AlarmViewer, WebBrowser
InteractionNavigationButton, 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 WhenUse Components When
Representing physical equipmentDisplaying data in standard formats
Creating P&ID diagramsNeed built-in functionality (trending, alarming)
Requiring custom animationsWant consistent behavior across solutions
Building reusable equipment templatesImplementing 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

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

</ac:layout-cell></ac:layout-section> </ac:layout>

In this section...