Add Controls to Displays and edit properties, mapping to tags.

Home → Tutorials → User Interactions Tutorial → Displays Module Tutorial → Add Controls to Displays Tutorials

Related: Concept | How-to Guide | Reference

This Tutorial Teaches you to:

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

Prerequisites:

1. Basic Input Components

Open the display in the Draw editor.

Button:

  1. Drag Button from the toolbox.
  2. Double-click the control and go to Settings.
  3. Properties:
    • Label Text: "Start Motor"
    • Width: Auto
  4. Click Dynamics and check Actions.
  5. In Actions, choose ToggleValue.
  6. In Object, type @Tag.Equipment/MotorRunning.

Numeric Input:

  • Drag NumericTextBox from the toolbox.
  • Double-click the control and go to Settings.
  • Bind LinkedValue to @Tag.Setpoint.
  • MinValue: 0, MaxValue: 100.

2. Text Components

Text Display:

  • Drag TextBlock from the toolbox.
  • Double-click the control and go to Settings.
  • Text with composite tag template: Temperature: {@Tag.TankFarm/Tank1/Temperature} °C — curly-brace tag references must start with @.
  • On the bottom-right menu set Font to 24.

ProgressBar:

  • Drag ProgressBar from the toolbox.
  • Double-click the control and go to Settings.
  • Bind LinkedValue to @Tag.Tank_Level.
  • Maximum: 100.
  • Leave the bar and foreground colors as theme defaults. To override, set Foreground explicitly (themed by default — omit to inherit).

DigitalGauge:

  • Drag DigitalGauge from the toolbox.
  • Double-click the control and go to Settings.
  • Bind LinkedValue to a numeric tag, e.g. @Tag.Pressure. DigitalGauge displays a numeric readout; use an indicator-style control for boolean run/stop states.

3. Gauge Components

Radial Gauge:

  1. Add RadialGauge.
  2. Double-click the control and go to Settings.
  3. Bind LinkedValue to @Tag.Pressure.
  4. Minimum Value: 0.
  5. Maximum Value: 150.
  6. Major Ticks Quantity: 16 (one tick every 10 units across 0..150).

RadialGauge is the unified gauge control introduced in 10.1.5. Choose a Preset (Full, SemiCircle, CenterValue, or BandedRange) to pick the visual style. It replaces the legacy CircularGauge, CenterValueGauge, and RangeCircularGauge for new displays — existing displays keep rendering with the legacy controls unchanged.

Linear Gauge:

  • Add LinearGauge.
  • Double-click the control and go to Settings.
  • Gauge Orientation: Vertical.
  • Bind LinkedValue to @Tag.Tank_Level.

4. Chart Components

Trend Chart:

  1. Add TrendChart.
  2. Double-click the control and go to Settings.
  3. Configure pens (slash-separated UNS tag paths):
    • Pen1: @Tag.TankFarm/Tank1/Temp — series color Blue.
    • Pen2: @Tag.TankFarm/Tank1/Pressure — series color Red.
  4. Auto: true.

Pie Chart:

  • Add PieChart.
  • Double-click the control and go to Settings.
  • ChartType: Percent.
  • LinkedValue entries (tag path; series color set separately):
    • @Tag.TankFarm/Tank1/Pressure — series color Blue.
    • @Tag.TankFarm/Tank2/Pressure — series color Red.
  • Name entries:
    • Pressure Tank 1
    • Pressure Tank 2

5. Container Components

Tab Control:

  1. Create three additional displays named:
    1. TankPage1
    2. TankPage2
    3. TankPage3
  2. Go back to your MainPage and add a TabControl.
  3. Double-click the control and go to Settings.
  4. Under Items Source Link, set Designer and add three ChildDisplay entries; type the display names you just created into Linked Display.

6. Images

Image Display:

  1. Find the Import File control.
  2. Choose an image from your computer.
  3. The image is registered in the solution and can be reused after the first import.

Web Browser:

7. Advanced Interactions

ComboBox with Database:

Prerequisite: this example reads from a Dataset Query named ActiveOrders. Define the query under Datasets → Queries before running — see the Datasets Module Tutorial for end-to-end query setup.

  • Add a ComboBox control.
  • In ComboBox Properties → Uid, type combo1.
  • Go to the page Code Behind.
  • Inside the DisplayOpening method, add:
TComboBox ComboBox1 = this.CurrentDisplay.GetControl("combo1") as TComboBox;

DataTable dt = await @Dataset.Query.ActiveOrders.SelectCommandAsync();

if (dt != null && dt.Rows.Count > 0)
{
    foreach (DataRow row in dt.Rows)
    {
        ComboBox1.Items.Add(row["ColumnName"].ToString());
    }
}
  • Replace ColumnName with the actual column name returned by your query.

8. Dynamic Animations

Add dynamics to any control:

  1. Double-click the control.
  2. Select Dynamics.
  3. Add:
    • Visibility: show/hide by condition.
    • MoveDrag: move based on a value.
    • Scale: resize dynamically.
    • FillColor: change fill by state.
    • Rotate: rotate by angle.

9. Symbols

Create reusable control sets:

  1. Select controls to group:
    1. Choose any of the controls created in previous steps, or create two new controls.
    2. Use Ctrl+click to select multiple controls.
  2. Group the controls:
    1. Click the Group button in the top horizontal toolbar, or
    2. Right-click → Group.
  3. Create the symbol:
    1. Right-click on the grouped controls → Make New Symbol.
    2. In the Name field, type SymbolExample.
    3. Click Yes to create the symbol.
  4. Reuse across displays:
    1. The symbol now appears in the Symbol Library.
    2. Drag and drop from the library to any display.

10. Shapes

In addition to standard controls and symbols, Canvas displays support drawing shape primitives — Rectangle, Ellipse, Line, Polygon, Path, and related drawing primitives — useful for process diagrams and schematic backgrounds. Shapes accept dynamics (FillColor, Visibility, Rotate, MoveDrag, Scale) the same way controls do.

For the full shape catalog and per-shape properties, see the Display Controls Reference.

In this section...