Displays - Add Elements (Tutorial)

Overview

Master the display controls toolbox. Add buttons, gauges, charts, and other interactive elements to create rich operator interfaces.

What You'll Learn

• Use basic controls
• Configure control properties
• Bind controls to tags
• Create control interactions

Prerequisites

• Display created
• Tags configured

Step 1: Basic Input Controls

Open display in Draw editor.

Button:

1. Drag Button from toolbox
2. Properties:
   • Text: "Start Motor"
   • Width: 120
   • Height: 40
3. Click event:

csharp

   @Tag.Motor1_Start = true;

Toggle Switch:

• Bind to: @Tag.Motor1_Enable
• On Text: "Enabled"
• Off Text: "Disabled"

Numeric Input:

• Control: NumericTextBox
• Bind to: @Tag.Setpoint
• Min: 0, Max: 100
• Format: "0.0"

Step 2: Display Controls

Text Display:

• Control: TextBlock
• Text: @Tag.Temperature.ToString("F1") + " °C"
• Font Size: 24
• Update: On tag change

Progress Bar:

• Bind Value: @Tag.Tank_Level
• Maximum: 100
• Color: Blue → Yellow → Red (by ranges)

Digital Indicator:

• Control: CheckBox (read-only)
• Bind: @Tag.Pump_Running
• Custom text: "Running" / "Stopped"

Step 3: Gauge Controls

Circular Gauge:

1. Add CircularGauge
2. Configure:
   • Value: @Tag.Pressure
   • Min: 0, Max: 150
   • Major Ticks: 10
   • Ranges:
     • Green: 0-100
     • Yellow: 100-120
     • Red: 120-150

Linear Gauge:

• Orientation: Vertical
• Height: 300
• Bind: @Tag.Tank_Level
• Show scale and value

Step 4: Chart Controls

Trend Chart:

1. Add TrendChart
2. Configure pens:
   • Pen1: Temperature (Blue)
   • Pen2: Pressure (Red)
3. Time span: 1 hour
4. Enable zoom/pan

Bar Chart:

• Data: Production by shift
• Categories: Shift 1, 2, 3
• Values: Bind to tags
• Update: Every minute

Pie Chart:

• Data source: Query result
• Value field: "Quantity"
• Label field: "Product"

Step 5: Data Grid

1. Add DataGrid
2. Configure columns:

   | Batch ID | Product | Quantity | Status |

1. Data source options:
   • Tag array
   • Query result
   • Script data table

Step 6: Container Controls

Tab Control:

1. Add TabControl
2. Create tabs:
   • Overview
   • Details
   • Trends
   • Alarms
3. Add content to each tab

Group Box:

• Title: "Motor Controls"
• Border: Solid
• Add related controls inside

Step 7: Media Controls

Image Display:

1. Add Image control
2. Dynamic source:

csharp

   @Tag.AlarmActive ? "alarm.png" : "normal.png"

Web Browser:

• URL: Company dashboard
• Or display PDF reports

Step 8: Advanced Interactions

ComboBox with Database:

csharp

// Populate from query
ComboBox1.ItemsSource = @Dataset.Query.Products.ResultData;
ComboBox1.DisplayMember = "ProductName";
ComboBox1.ValueMember = "ProductID";

Conditional Visibility:

csharp

// Show/hide based on user level
Panel1.Visibility = @Client.UserGroup == "Supervisor" 
    ? Visibility.Visible 
    : Visibility.Collapsed;

Step 9: Custom Properties

Add dynamics to any control:

1. Right-click control
2. Select Dynamics
3. Add:
   • Visibility: Show/hide by condition
   • Position: Move based on value
   • Size: Resize dynamically
   • Color: Change by state
   • Rotation: Rotate by angle

Step 10: Control Templates

Create reusable control sets:

1. Group controls
2. Right-click → Create Symbol
3. Add parameters
4. Save to library
5. Reuse across displays

Performance Optimization

• Limit controls per display
• Use visibility to hide unused elements
• Optimize binding expressions
• Use appropriate update rates

Best Practices

• Consistent control styling
• Clear labeling
• Appropriate control for data type
• Group related controls
• Test all interactions
• Consider touch screen if applicable

Next Steps

• [Create Canvas Animations] - Advanced animations
• [Working with Symbols] - Reusable components
• [Create Dashboards] - Executive displays