Skip to main content
Version: Next

Creating Monitoring Views

This guide shows you how to create real-time process monitoring views with data binding and interactivity.

When to Use This Page​

Use this page when:

  • the project is already open
  • at least one tag path is verified in Start Debug
  • you want a first runtime screen, not a reporting dashboard

Before You Start​

Make sure:

  • you have at least Temperature, Pressure, and MotorRunning
  • you know whether the page is for a real device, internal tags, or Static Simulation
  • you are willing to start with one simple view instead of a complete plant layout

What You Will Build​

By the end of this page, you should have:

  • one monitoring view
  • live values for Temperature and Pressure
  • one status indicator for MotorRunning
  • one run-ready screen that you can preview and test

Day-1 Quick Path​

If you want the shortest successful path, do only this first:

  1. create one view named Overview
  2. add one title
  3. add two numeric displays for Temperature and Pressure
  4. add one status indicator for MotorRunning
  5. preview the view
  6. run the project and confirm the screen updates

The sections on historian, data-table charts, bridge data, navigation, and optional input writing can wait until later.

Step 1: Create a New View​

  1. Click New in the View List
  2. Enter a view name (e.g., Overview)
  3. Configure canvas settings:
    • Size: Default 1920x1080 (or select preset: 1280x720, 1024x768, etc.)
    • Background Color: Choose a color or use a template background
  4. Click Confirm

📷 [UG-VIEWS-MON-01] New View dialog with name, size, and background options

💡 Tip: Use descriptive names like Overview, Utilities_Main, or Station_A_Status instead of generic names like Page1.

Step 2: Design the Layout​

Option 1: Start from Scratch​

Drag components from the library to build your layout.

Option 2: Use a Template​

  1. Open the Design Assets section in the Component Library
  2. Browse Official Templates
  3. Drag a layout template to the canvas
  4. Customize colors and labels

📷 [UG-VIEWS-MON-02] Template library showing industrial dashboard layouts

Common Layout Patterns​

Day-1 Minimal Layout​

For a first project, the minimum useful layout is:

  • one page title
  • one numeric display for Temperature
  • one numeric display for Pressure
  • one status indicator for MotorRunning
  • one empty area reserved for trend, alarm summary, or navigation

Add more only after this basic layout already works.

Step 3: Add Components​

Add a Text Label​

  1. Drag Text from Standard Components to the canvas
  2. Double-click to edit the text (e.g., "Temperature")
  3. In the Properties Panel:
    • Set font size: 18px
    • Set color: #FFFFFF (white)
    • Set alignment: Left

Add a Numeric Display​

  1. Drag Numeric Display to the canvas
  2. In the Properties Panel → Data Binding:
    • Click Select Tag
    • Choose Temperature
  3. Configure display format:
    • Decimal places: 1
    • Unit: °C
    • Font size: 24px

Repeat the same pattern for Pressure.

Add a Status Indicator​

  1. Drag a status or indicator component to the canvas
  2. In the Properties Panel → Data Binding:
    • Click Select Tag
    • Choose MotorRunning
  3. Configure the display:
    • Normal state: Running
    • Inactive state: Stopped
    • Use clear colors such as green and gray

Add a Button​

  1. Drag Button to the canvas
  2. Set button text: Test Write
  3. In the Properties Panel → Events Tab:
    • Event: On Click
    • Action: Write Tag
    • Target Tag: MotorRunning for internal-tag or simulation testing, or a real command tag such as MotorStartCommand
    • Value: true

📷 [UG-VIEWS-MON-03] Properties panel showing tag binding and event configuration

Note: For a production project, prefer a dedicated command tag instead of writing directly to a status tag. Writing to MotorRunning is only appropriate for a quick internal-tag or simulation demo.

Step 4: Bind Data to Components​

AI SCADA supports multiple data sources for components:

Note: For a first monitoring page, Tag Current Value is usually enough. Add Tag Historian and Data Management only after the basic page already runs.

Data Source 1: Tag Current Value​

Display real-time tag values:

  1. Select a component (e.g., gauge, numeric display)
  2. In Properties Panel → Data section
  3. Select Tag Current Value
  4. Click Add Tag and choose one or more tags
  5. (Optional) Configure:
    • Field alias (display name)
    • Data format (integer, 2 decimals, percentage)

💡 Tip: Use Column to Row to display multiple tags as a time series.

Advanced Data Sources for Later​

Data Source 2: Tag Historian​

Display historical tag data:

  1. Select a chart component (e.g., line chart, bar chart)
  2. In Properties Panel → Data section
  3. Select Tag Historian
  4. Configure query:
    • Dimension: Record Time (for trends) or Tag Name (for statistics)
    • Time Range: Last 1 hour, Last 24 hours, Custom range
    • Tags: Select tags to query
    • Aggregation: Sum, Average, Min, Max, Count
  5. Configure display:
    • Time Window Aggregation: Group data by 1s, 10s, 1m, etc. (improves performance)
    • Max Data Points: Limit data to prevent slow loading

Aggregation Options:

AggregationUse Case
AverageTemperature trends, pressure monitoring
SumProduction counts, energy consumption
Min/MaxPeak detection, range analysis
CountEvent frequency, alarm counts

⚠️ Caution: For high-frequency data (100ms polling), use Time Window Aggregation to reduce data points. Otherwise, loading 1 hour of data = 36,000 points!

Data Source 3: Data Management​

Display business data from custom data tables:

  1. Select a chart component
  2. In Properties Panel → Data section
  3. Select Data Management
  4. Choose a data table (e.g., Monitoring_Snapshots)
  5. Configure dimensions and metrics:
    • Dimension: Group by (e.g., Record Time, Shift, Date)
    • Metric: Aggregate by (e.g., AVG(Temperature), AVG(Pressure))
  6. (Optional) Configure:
    • Field alias
    • Data format
    • Sort order
    • Filters

Example: Temperature Snapshot Trend

ConfigurationValue
Data SourceData Management → Monitoring_Snapshots
DimensionRecord Time
MetricAVG(Temperature)
Chart TypeLine Chart

📷 [UG-VIEWS-MON-04] Data configuration panel showing dimension and metric setup

Data Source 4: Bridge (Database)​

Display data from external databases:

  1. Select a chart component
  2. In Properties Panel → Data section
  3. Select Bridge
  4. Choose a database connection (configured in Bridge module)
  5. Configure dimensions and metrics (same as Data Management)

Step 5: Add Interactivity​

These items are optional for the first monitoring screen. Skip any subsection that does not match your current setup.

Add Navigation​

Use this only if you already created a second view.

  1. Drag a Button to the canvas
  2. Set button text: Open Details
  3. In Events Tab:
    • Event: On Click
    • Action: Navigate to View
    • Target View: Details

Add Tag Write​

Use this only if Setpoint_Temperature already exists in your project. If not, create it first or skip this subsection for now.

  1. Drag a Numeric Input to the canvas
  2. Bind to tag: Setpoint_Temperature
  3. In Events Tab:
    • Event: On Value Change
    • Action: Write Tag
    • Target Tag: Setpoint_Temperature
    • Value: {component.value} (use component's input value)

Add Conditional Visibility​

  1. Select a component (e.g., alarm indicator)
  2. In Properties Panel → Visibility section
  3. Set condition: {Temperature} > 80

💡 Tip: Use expressions like {Temperature} > 80 to show/hide components based on tag values.

Step 6: Style the View​

Apply Colors​

  • Use consistent color schemes (e.g., dark background with bright text)
  • Follow industrial standards:
    • Green: Normal operation
    • Yellow: Warning
    • Red: Alarm/fault
    • Blue: Information

Align Components​

  1. Select multiple components (Ctrl+Click)
  2. Use toolbar alignment buttons:
    • Align Left: Ctrl+Alt+L
    • Align Top: Ctrl+Alt+T
    • Distribute Horizontally: Ctrl+Shift+H

Group Components​

  1. Select related components (e.g., label + value + unit)
  2. Press Ctrl+G to group
  3. Move/resize the group as one unit

Step 7: Test the View​

Preview Mode​

  1. Click Preview (Alt+P) to test the current view
  2. Interact with buttons and inputs
  3. Verify data displays correctly
  4. Close preview to return to editing

Run Mode​

  1. Click Run (Ctrl+P) to launch the full project
  2. Navigate between views
  3. Test all interactions
  4. Check performance with real data

If the page opens in runtime and the three starter tags respond correctly, continue to First Success Checkpoint.

Best Practices​

Design Principles​

Clarity:

  • Use large, readable fonts (minimum 14px for labels, 18px for values)
  • High contrast (light text on dark background or vice versa)
  • Avoid clutter - show only essential information

Consistency:

  • Use the same color scheme across all views
  • Standardize component sizes and positions
  • Reuse templates for similar views

Responsiveness:

  • Design for the target screen resolution
  • Test on actual hardware (HMI panels, industrial monitors)
  • Avoid tiny buttons (minimum 40x40px for touch screens)

Performance Optimization​

Reduce Data Load:

  • Use Time Window Aggregation for historical data
  • Set Max Data Points limits on charts
  • Use Page Usage poll mode for tags (only poll when view is open)

Optimize Component Count:

  • Avoid hundreds of components on a single view
  • Use tabs or navigation to split complex views
  • Group related components to reduce rendering overhead

Lazy Loading:

  • Don't load all data on view open
  • Use filter controls to let users request specific data
  • Cache frequently accessed data

Next Steps​

Last updated on