Skip to main content
Version: Next

Understanding Views

What are Views?​

Views are the visual interfaces in AI SCADA where operators monitor processes, control equipment, and analyze data. They combine components like gauges, charts, buttons, and indicators to create intuitive HMI displays.

When to Use Views?​

Views are essential for:

  • Process Monitoring: Display real-time equipment status and sensor values
  • Equipment Control: Provide buttons and inputs for operator commands
  • Data Visualization: Show trends, charts, and production statistics
  • Alarm Management: Alert operators to abnormal conditions
  • Production Dashboards: Summarize KPIs and performance metrics

Understanding the View Editor Interface​

📷 [Screenshot: View Editor showing all 7 main areas]

The View Editor consists of seven main areas:

1. Menu Bar (Top)​

Quick access to project-level operations:

  • Return to Project Manager: Exit the editor
  • Search Variables: Find where tags are used across views
  • Run: Launch the runtime to test the project
  • Version Info: Check software version
  • Help Center: Access documentation

2. View List (Top-Left)​

Displays all views in the project:

  • Create View: Click New to add a view
  • Organize Views: Create folders and drag views to organize
  • View Operations: Right-click for rename, duplicate, delete, set as home page
  • Import/Export: Share views between projects

3. Component Tree (Bottom-Left)​

Shows all components on the current view in a hierarchical list:

  • Layer Order: Components at the top are rendered on top
  • Select Components: Click to select (multi-select with Ctrl)
  • Show/Hide: Toggle component visibility
  • Lock/Unlock: Prevent accidental edits

4. Canvas Area (Center)​

The main editing workspace:

  • WYSIWYG: What you see is what you get - real-time preview
  • Drag & Drop: Add components from the library
  • Resize & Position: Click and drag to adjust
  • Zoom: Ctrl + Mouse Wheel to zoom in/out

5. Component Library (Right)​

Pre-built components organized by category:

Standard Components:

  • Basic shapes (rectangle, circle, line)
  • Text labels and inputs
  • Buttons and switches
  • Images and videos
  • Containers (groups, tabs, panels)

Chart Components:

  • Bar charts, line charts, pie charts
  • Gauges and indicators
  • Tables and data grids
  • Trend charts (real-time and historical)

Control Components:

  • Time range pickers
  • Dropdown filters
  • Search inputs
  • Export buttons

Application Components:

  • User management
  • Alarm viewer
  • Recipe manager
  • Trend configurator

Design Assets:

  • Official UI templates
  • Custom image library

6. Toolbar (Above Canvas)​

Quick access to editing tools:

ToolShortcutFunction
SaveCtrl+SSave view changes
UndoCtrl+ZUndo last action
RedoCtrl+YRedo last undone action
CopyCtrl+CCopy selected components
PasteCtrl+VPaste copied components
DeleteDeleteRemove selected components
GroupCtrl+GGroup multiple components
UngroupCtrl+Shift+GUngroup components
AlignCtrl+Alt+L/R/T/BAlign components (left/right/top/bottom)
DistributeCtrl+Shift+H/VDistribute evenly (horizontal/vertical)
Bring to FrontCtrl+Shift+[Move to top layer
Send to BackCtrl+Shift+]Move to bottom layer
LockCtrl+LLock component position
PreviewAlt+PPreview current view
RunCtrl+PRun entire project

7. Properties Panel (Right)​

Configure selected components:

Style Tab:

  • Position (X, Y)
  • Size (Width, Height)
  • Appearance (color, font, border)
  • Data binding (link to tags)
  • Component-specific settings

Events Tab:

  • Click events
  • Value change events
  • Mouse hover events
  • Custom scripts

View Management​

Organize Views with Folders​

  1. Click New Folder in the View List
  2. Enter folder name (e.g., Line1_Views, Dashboards)
  3. Drag views into folders

Recommended Structure:

📁 Monitoring
  └─ Line1_Monitoring
  └─ Line2_Monitoring
📁 Dashboards
  └─ Production_Dashboard
  └─ Quality_Dashboard
📁 Control
  └─ Recipe_Manager
  └─ Alarm_Viewer

Set the Home Page​

The home page is the first view displayed when the project runs:

  1. Right-click a view in the View List
  2. Select Set as Home Page
  3. A home icon appears next to the view name

Duplicate Views​

Quickly create similar views:

  1. Right-click a view
  2. Select Create Copy
  3. Enter a new name
  4. Modify the copy as needed

Import/Export Views​

Export a View:

  1. Select one or more views
  2. Click Export
  3. Choose a save location
  4. A .cmsview file (or .zip for multiple views) is created

Import a View:

  1. Click Import
  2. Select a .cmsview or .zip file
  3. The view(s) are added to the project

💡 Tip: Use import/export to share views between projects or create a library of reusable templates.

Next Steps​

Now that you understand the View Editor interface, learn how to create views:

Last updated on