Page History

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

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

1. Basic Input Components

• Display created
• Tags configured

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: 120Auto
   • Height: 40
4. Click event:

csharp

   @Tag.Motor1_Start = true;

Toggle Switch:

1. Click Dynamics and check Actions:
2. In Actions, choose ToggleValue
3. In Object, type @Tag.Equipment/MotorRunning

Bind to: @Tag.Motor1_Enable

On Text: "Enabled"

Off Text: "Disabled"

Numeric Input:

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

Step 2: Display Controls

2. Text Components

Text Display:

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

Progress Bar:

• with {Tags}: {Tag.TankFarm.Tank1/Temperature} °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 toBind Value: @Tag.Tank_Level
• Maximum: 100
• Color: Blue → Yellow → Red (by ranges)

Digital Indicator:

• On the bottom right menu set Font color to Red

Digital Gauge:

• Drag DigitalGauge from toolbox
• Double Click the button and go to Settings
• Bind LinkedValue to
• Control: CheckBox (read-only)
• Bind: @Tag.Pump_RunningCustom text: "Running" / "Stopped"

3

. 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_Level
• Show scale and value

4. 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"

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;

• 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 set Designer and 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"].ToString());
        }
    }    



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

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

Step 10: Control Templates

---

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
   2. Alternatively, Right-click  → Group
3. Create the symbol:
   1. Right-click

1. 1. on the grouped controls → Make New Symbol
   2. In the Name field, type: SymbolExample
   3. Click Yes to create the symbol
2. 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

1. :
   1. The symbol now appears in the Symbol Library
   2.  Drag and drop from the library to any display

In this section...