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.

Step 1: Create a New View​

  1. Click New in the View List
  2. Enter a view name (e.g., Line1_Monitoring)
  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

📷 [Screenshot: New View dialog with name, size, and background options]

💡 Tip: Use descriptive names like Line1_Oven_Control 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

📷 [Screenshot: Template library showing industrial dashboard layouts]

Common Layout Patterns​

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., "Oven 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 Line1_Oven_Temperature
  3. Configure display format:
    • Decimal places: 1
    • Unit: °C
    • Font size: 24px

Add a Button​

  1. Drag Button to the canvas
  2. Set button text: Start Oven
  3. In the Properties Panel → Events Tab:
    • Event: On Click
    • Action: Write Tag
    • Target Tag: Line1_Oven_Start
    • Value: true

📷 [Screenshot: Properties panel showing tag binding and event configuration]

Step 4: Bind Data to Components​

AI SCADA supports multiple data sources for components:

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.

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., Production_Statistics)
  5. Configure dimensions and metrics:
    • Dimension: Group by (e.g., Shift, Product_Type, Date)
    • Metric: Aggregate by (e.g., SUM(Production_Count), AVG(Cycle_Time))
  6. (Optional) Configure:
    • Field alias
    • Data format
    • Sort order
    • Filters

Example: Production by Shift

ConfigurationValue
Data SourceData Management → Production_Statistics
DimensionShift
MetricSUM(Production_Count)
Chart TypeBar Chart

📷 [Screenshot: 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​

Add Navigation​

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

Add Tag Write​

  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: {Line1_Alarm_Active} == true

💡 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

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