Add Controls to Displays Tutorial

Displays Controls →  Tutorial | Concept | How-to Guide | Reference

1. Basic Input Components

Open display in Draw editor.

Button:

1. Drag Button from toolbox
2. Double Click the button 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.Motor1_Start

Numeric Input:

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

2. Text Components

Text Display:

• Drag TextBlock from toolbox
• Double Click the button and go to Settings
• Text with {Tags}: {Tag.Temperature.ToString("F1")} °C
• On the bottom right menu set Font to 24

ProgressBar:

• Drag ProgressBar from toolbox
• Double Click the button and go to Settings
• Bind LinkedValue to: @Tag.Tank_Level
• Maximum: 100
• Bind LinkedValue to
• On the bottom right menu set Font color to Red

Digital Gauge:

• Control: DigitalGauge
• Double Click the button and go to Settings
• Bind LinkedValue to: @Tag.Pump_Running

3. Gauge Components

Circular Gauge:

1. Add CircularGauge
2. Double Click the button and go to Settings
3. Bind LinkedValue to: @Tag.Pressure
4. Minimum Value: 0
5. Maximum Value: 150
6. Major Ticks Quantity: 11 (means 0 to 100)

Linear Gauge:

• Add LinearGauge
• Double Click the button 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 button and go to Settings
3. Configure pens:
   • Pen1: TankFarm/Tank1/Temp (Blue)
   • Pen2: TankFarm/Tank1/Pressure (Red)
4. Auto: true

Pie Chart:

• Add PieChart
• Double Click the button and go to Settings
• ChartType: Percent
• LinkedValue field:
  • TankFarm/Tank1/Pressure (Blue)
  • TankFarm/Tank2/Pressure (Red)
• Name field:
  • Pressure Tank 1
  • Pressure Tank 2

5. Container Components

Tab Control:

1. Create three more pages with the following names:
   1. TankPage1
   2. TankPage2
   3. TankPage3
2. Go back to your MainPage and add a TabControl
3. Double Click the button and go to Settings
4. Under Items Source Link add three ChildDisplay components, and type the previous created display names in Linked Display 

6. Images

Image Display:

1. Find the Import File control
2. Choose and image from your computer
3. This image will be available to reuse once you import it the first time

Web Browser:

• Add WebBrowser control
• Double Click the button and go to Settings
• URL: https://www.tatsoft.com

7. Advanced Interactions

ComboBox with Database:

• Add ComboBox control
• In ComboBox Properties → Uid, type combo1
• Go to the page Code Behind
• Inside the DisplayOpening function, 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"]);
        }
    }    



• Consider changing the ColumnName to one of the columns of your query return

8. Dynamic Animations

Add dynamics to any control:

1. Double click control
2. Select Dynamics
3. Add:
   • Visibility: Show/hide by condition
   • MoveDrag: Move based on value
   • Scale: Resize dynamically
   • FillColor: Change by state
   • Rotate: Rotate by angle

9. Symbols

Create reusable control sets:

1. Group controls
2. Right-click → Make New Symbol
3. In Name type SymbolExample
4. Reuse across displays

In this section...