Page History

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

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: 120Height: 40Auto
4. Click event Dynamics and check Actions:

csharp

1. In Actions, choose ToggleValue
2. In Object, type

1. @Tag.Motor1_Start

Toggle Switch:

Numeric Input:

• Drag NumericTextBox from toolbox
• Double Click the button and go to Settings
Control: NumericTextBox
• Bind LinkedValue to: @Tag.Setpoint
• MinMinValue: 0, MaxMaxValue: 100Format: "0.0"

Text Components

Text Display:

Control:
• Drag TextBlock from toolbox
• Double Click the button and go to Settings
• Text : @Tagwith {Tags}: {Tag.Temperature.ToString("F1") + " } °C"
• Font Size: On the bottom right menu set Font to 24
• Update: On tag change

Progress Bar:

ProgressBar:

• Drag ProgressBar from toolbox
• Double Click the button and go to Settings
• Bind LinkedValue toBind Value: @Tag.Tank_Level
• Maximum: 100
• Color: Blue → Yellow → Red (by ranges)

Digital Indicator:

• 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
• Control: CheckBox (read-only)
• Bind: @Tag.Pump_RunningCustom text: "Running" / "Stopped"

Gauge Components

Circular Gauge:

1. Add CircularGauge
2. Double Click the button and go to Settings
3. Bind LinkedValue toConfigure:Value: @Tag.Pressure
4. MinMinimum Value: 0, Max
5. Maximum Value: 150
6. Major Ticks : 10
7. Ranges:
   • Green: 0-100
   • Yellow: 100-120
   • Red: 120-150

Linear Gauge:

1. Quantity: 11 (means 0 to 100)

Linear Gauge:

• Add LinearGauge
• Double Click the button and go to Settings
• Gauge Orientation: Vertical
• Height: 300
• Bind LinkedValue to: @Tag.Tank_LevelShow scale and value

Chart Components

Trend Chart:

1. Add TrendChart
2. Double Click the button and go to Settings
3. Configure pens:
   • Pen1: Temperature TankFarm/Tank1/Temp (Blue)
   • Pen2: TankFarm/Tank1/Pressure (Red)
4. Time spanAuto: 1 hour
5. Enable zoom/pan
6. true

Pie 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"

DataGrid Component

1. Add DataGrid
2. Configure columns:

   | Batch ID | Product | Quantity | Status |

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

• 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

Container Components

Tab Control:

1. Add TabControl
2. Create tabsCreate three more pages with the following names:
   Overview
   1. TankPage1
   Details
   1. TankPage2
   1. Trends
   2. Alarms
   3. Add content to each tab

   Group Box:

   • Title: "Motor Controls"
   • Border: Solid
   • Add related controls inside
   1. 1. 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 

   
   

   ---

   Images

   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
   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

   
   

   ---

   Advanced Interactions

   ComboBox with Database:

   csharp

   // Populate from query

   
   

   • 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

   ComboBox1.ItemsSource =

   @Dataset.Query.

   Products

   ActiveOrders.

   ResultData; ComboBox1.DisplayMember = "ProductName"; ComboBox1.ValueMember = "ProductID";

   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

   
   

   ---

   Conditional Visibility:

   csharp

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

   Dynamic Animations

   Add dynamics to any control:

   1. Right-Double click control
   2. Select Dynamics
   3. Add:
      • Visibility: Show/hide by condition
      • PositionMoveDrag: Move based on value
      • SizeScale: Resize dynamically
      • ColorFillColor: Change by state
      • RotationRotate: Rotate by angle

   ---

   Symbols

   Create reusable control sets:

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

   Performance Optimization

   • Limit controls per display
   • Use Symbols

   Next Steps

3. [Create Canvas Animations] - Advanced animations
4. [Working with Symbols] - Reusable components
1. In Name type SymbolExample
2. Reuse across
[Create Dashboards] - Executive
1. displays

In this section...