Click to download this document.

About This Document

www.robustel.com

Copyright © 2021 Guangzhou Robustel Technologies Co., Ltd. All rights reserved.

Trademark Statement

Robustel is a trademark of Guangzhou Robustel Technologies Co., Ltd. Other trademarks and trade names mentioned in this manual belong to their respective owners.

Disclaimer

No part of this document may be reproduced in any form without permission from the copyright holder. Due to ongoing improvements in methods, design, and manufacturing processes, the contents of this document may be updated or revised without prior notice. Robustel assumes no responsibility for any errors or damages resulting from the use of this document.

Version History

Glossary

Before reading this manual, make sure you are familiar with basic E2C software operations. For general software terms, such as device, data collection, and communication protocol, refer to the glossary in the applicable software user manual. This glossary defines only terms directly related to SCADA functions.

Some concepts use different English terms in the SCADA interface and other software modules. A slash separates equivalent terms in the table below.

1. Document Overview and Reading Path

This manual is intended for users of E2C Factory, E2C Field, and E2C Facility. It focuses on how to complete SCADA page design, runtime monitoring, link sharing, publishing and maintenance, and common troubleshooting in SCADA projects, helping users build a complete workflow from design to operation.

1.1. Scope of This Manual

From a usage perspective, SCADA-related work can usually be divided into two categories: SCADA design and maintenance, and runtime monitoring. These two types of work may sometimes be handled by the same person, or by different roles separately.

1.1.1. Design Use

Applicable roles:

• Device administrators
• Implementation or delivery engineers
• Technical staff who need to maintain page content

Main tasks include:

• Creating new SCADA projects or pages
• Using the SCADA Designer for layout design, component drag-and-drop, Variable Binding, and interaction configuration
• Managing and reusing SCADA templates
• Previewing, saving, and publishing pages

1.1.2. Runtime Use

Applicable roles:

• Device administrators
• On-site O&M personnel
• Project owners, presales staff, or technical support personnel
• Managers who only need to view runtime pages

Main tasks include:

• Opening runtime pages to view real-time status, trends, alarms, and key indicators
• Sharing SCADA runtime links with managers, customers, or other collaborators
• Performing viewing or control operations allowed on the runtime side based on permissions

1.2. Recommended Reading Path

Choose the reading order based on your current task:

1.3. Before You Start

The following topics are not the focus of this manual:

• Device protocol access and driver configuration
• Variable modeling and collection point creation
• Basic platform account system and user permission settings

Before using this manual, make sure the following conditions are met:

• You can already log in to the system
• At least one available real-time variable from a Southbound Device data source already exists in the system
• You have the required permissions for SCADA design, management, and runtime use
• You have already determined the page type and content you need to create, such as a large-screen page, PC page, or Mobile Page

If these prerequisites have not been completed, it is recommended to first refer to the related manuals for the corresponding product before continuing with this manual.

• E2C Factory User Manual
• E2C Field User Manual

2. Quick Start: Complete the Configuration Workflow in 5 Minutes

This chapter helps first-time users complete a full workflow from creating a new page to viewing it in runtime mode with the fewest possible steps.

Objective: Build a minimal page to complete page creation, component drag-and-drop, real-time Variable Binding, style adjustment, preview, and runtime verification, so you can quickly go through the entire workflow once.

2.1. Preparation Before You Start

Before you begin, make sure there is at least 1 device and 1 variable under Data Collection, and that the variable is already reporting real data normally. Once this is ready, you can proceed to the next step. If not, you can configure them by referring to the following device and variable parameters.

• Factory entry: Select the Data Collection menu, then add a device and variables

Figure 2-1. Create Device button on the E2C Factory Data Collection page.

• Field entry: Select the Data Collection menu, choose Wired Device, then add a device and variables

Figure 2-2. Add Device button on the E2C Field Wired Devices page.

The parameters for the new device are as follows:

The parameters for the new variable are as follows:

2.2. Complete Steps

Step 1: Create a New SCADA Project and Enter the Designer

• Factory entry: Click the SCADA Management menu under Data Analytics

Figure 2-3. SCADA Management page and Add button in E2C Factory.

• Field entry: Click the SCADA Management menu

Figure 2-4. SCADA Management page and Add button in E2C Field.

1. Click New
2. Enter a page name, for example Demo_Value
3. Click Save
4. Move the mouse over the Demo_Value SCADA card and click Design. The system will automatically open a new browser window showing the SCADA Designer page

Figure 2-5. Run, Share, and Design actions on the Demo_Value SCADA card.

5. After entering the designer, first get familiar with the following areas

Figure 2-6. Designer toolbar, canvas, page manager, component library, and properties panel.

Step 2: Modify Page Settings

1. Select the blank area of the current page
2. On the right side, find Page Properties > Background Color
3. Choose the required background color, for example: rgba(7, 28, 69, 1)

Step 3: Drag in a Component and Configure Parameters

1. In the left Component Library, select Display, find Numeric Display, and drag it to the center of the canvas
2. Bind the variable value
3. Select the Numeric Display component
4. On the right side, find Read/Write Type. The default is read-only, which matches the variable configuration, so no change is needed
5. On the right side, find Variable and click the configuration button
6. Select model Real-time Variable, select device Sensor1, select variable Temperature, and click Confirm to bind
7. Under the bound variable on the right side, configure the variable value style: font size 48, text color rgba(255, 255, 255, 1). It is recommended to use light text on dark backgrounds and dark text on light backgrounds
3. Display the variable name
4. On the right side, find Variable Name and enter Temperature
5. Configure the Variable Name style below it: font size 48, text color rgba(255, 255, 255, 1)
4. Configure the display limits of the variable value
5. On the right side, find Minimum Value, Maximum Value, and Decimal Places, then change Decimal Places to 1
5. Display the variable unit
6. On the right side, check Display Unit
7. Find Unit and change the value to °C
8. Configure the unit style below it: font size 38, text color rgba(255, 255, 255, 1)

Figure 2-7. Real-time variable selection dialog for the numeric display component.

Step 4: Configure the Outer Frame and Group Components

1. In the left Component Library, select Drawing, find Rectangle, drag it near the numeric value, and adjust its size
2. Layer adjustment: at this point, the Rectangle component is on the top layer, which prevents the Numeric Display component from being selected. Select the Rectangle component and click Send to Back on the toolbar
3. Alignment layout: select both components, then click Align Center Horizontally and Align Center Vertically on the toolbar
4. Group: select both components, then click Group so they merge into a single object for easier movement or layer adjustment later

Configuration tips:

• Hold Ctrl and use the mouse to quickly box-select multiple components.
• When using alignment tools, if you select components one by one, the system uses the first selected item as the reference and aligns the others to it. If you box-select multiple components at once, the system uses the average position of all selected components as the alignment reference.
• If you make a mistake in any toolbar operation, you can restore it with Undo and Redo.

Figure 2-8. Toolbar controls for undo, redo, layers, alignment, and grouping.

Figure 2-9. Numeric display component before and after adding and grouping an outer frame.

Step 5: Save the SCADA Project

1. Click the Save button in the upper-right corner, then confirm Save again in the pop-up dialog
2. Wait for the system to indicate that the save was successful

Step 6: Preview the Style

The Preview function in this step is only used to check the page style and does not display real variable data.

1. Click Preview in the upper-right corner, and the system will automatically open a new window displaying the preview page
2. Check whether the background color, component position, font size, and colors are correct. There is no need to check the variable value
3. After confirming the effect, close the SCADA preview window and the SCADA Designer window

Figure 2-10. Preview page showing the layout without a live value.

Step 7: Open the Runtime Monitoring Page

1. On the SCADA Management page, click Run on the Demo_Value SCADA card. The system will automatically open a new window with the runtime monitoring page
2. Check whether the numeric component displays real data
3. Wait a few seconds to confirm whether the data changes
4. Click the full-screen icon in the upper-right corner for full-screen monitoring
5. Press Esc on the keyboard to exit full-screen mode

Figure 2-11. Runtime monitoring page showing the live temperature value.

Frequently Asked Questions

Q: The actual device variable is an integer, but the preview shows one decimal place and ends with .0. Why?A: For Numeric Display, set Decimal Places to 0 according to the actual variable type.

Q: What should I do if the displayed data is abnormal?A: First check whether the variable under Southbound Device data collection has a real-time value, and whether the data type, decimal places, and unit configuration are reasonable.

3. Practical Case: Smart Office Building HVAC Monitoring

This chapter provides a complete, portable, and reusable practical case to help you move from "being able to drag components" to "independently completing a full SCADA project." The case uses an office building HVAC monitoring scenario because its structure is intuitive, the data types are common, the component coverage is comprehensive, and it can easily be extended to other industries.

After completing this chapter, you will learn:

• How to quickly build a SCADA project and complete page planning
• How to improve efficiency by following the rhythm of "build the frame first, then fill in the content"
• How to implement page switching and Popup Page interaction
• How to complete equipment status monitoring, key value display, and simple control
• How to display alarm lists and alarm analysis charts
• Common issues and troubleshooting methods

3.1. Preparation Before Use

Before you start, make sure the following conditions are already met:

• You can open the SCADA Designer
• There are already refreshing real-time variables in the system
• If you do not currently have writable variables, you can first complete the page framework and display section, and add the control section later
• You can view alarm data or alarm analysis data sources in the system

3.1.1. Page List

In this chapter, you need to create 3 pages:

3.1.2. Data Preparation

The device and variable data used in this tutorial are shown below. If your project already has other devices and variables, you can use them directly. The operating principles are the same.

1. Device data:

Add two devices, ZONE_01 and ZONE_02, representing the meeting room thermostat and office area thermostat. At least one device is required.

2. Variable data:

Add the following four variables for each device. You can replace them with other variables of the same type.

Figure 3-1. ZONE_01 and ZONE_02 devices with RoomTemp, SetTemp, Power, and Status variables.

3. Alarm data:

Make sure alarm rules are configured in the Alarm Management module, and real-time alarm data can be generated normally. Sample data as follows:

3.1.3. Style and Material Preparation

This example will use the following style and materials:

• 1 office building 3D image
• Black background and a light blue theme color: rgba(1, 201, 252, 1)

Figure 3-2. 3D office-building asset used in the HVAC monitoring dashboard.

3.1.4. SCADA Planning

The overall SCADA sequence is as follows:

• Complete the Home Overview page
• Complete the Alarm Analysis page
• Complete the Device Remote Controller Popup Page
• Configure page switching and popup interaction
• Enter runtime mode to verify the final effect

The page setup sequence is as follows:

• First determine the basic page layout and static elements
• Then place data-related components such as values, Indicators, lists, and charts into the reserved areas
• Finally complete Variable Binding and detail adjustments one by one

SCADA tips:

• The designer supports three types of pages: Web Page, Mobile Page, and Popup Page. Prioritize setup by page type.
• Use the page copy function to improve efficiency when configuring repeated or similar pages.
• Configure interactions after all pages have been set up.
• For a single page, follow the principle of configuring the whole first and the details later.

3.2. Operation Steps

3.2.1. Create a New Project and Pages

1. In SCADA Management, click New SCADA
2. Enter the project name Smart Office Building HVAC Monitoring
3. Click Save
4. Click Design on the project card to enter the SCADA Designer

3.2.2. Add the Overview Page (Home Page)

Figure 3-3. Static frame layout of the home overview page.

In this step, first build the home page framework. Only complete the layout and static elements for now, and clearly divide the areas: top title area, center-left 3D image area, center-right two device card areas, and bottom alarm list area.

1. Switch the module on the left to Page, then in the configuration area on the right, change the page name to Overview Page and set the background color to black
2. Configure the top title area, time area, and page switching entry
3. Configure page borders and divider lines
4. Add the main 3D image
5. Lock the static components

The required components are as follows:

Lock the static components to avoid accidentally deleting or moving them while configuring other components later:

1. Open the layer list
2. Select static components such as the border, line, title, time, and 3D main image
3. Click the lock icon

Figure 3-4. Locking borders and other static components in the Layers panel.

Frequently Asked Questions

• How can I quickly align borders and components? Drag out the large framework and align it first, then place smaller components, and finally fine-tune spacing and alignment in a unified way.
• Why can't I select a component? Check whether it is locked or covered by a higher-level base layer. If necessary, locate and select it through the layer list.
• Why are page elements easy to move accidentally? Lock the framework and static elements after they are completed, and then only adjust data-related components later.

3.2.3. Fill the Home Overview Page

The purpose of this step is to fill the previously designed layout framework with the required information, such as device information and chart information.

Figure 3-5. Home overview page populated with device cards and an alarm list.

The device card information is as follows:

Complex operation note:

1. Both the remote controller button and the Indicator component require selecting graphics from the built-in system gallery. The detailed procedure is as follows.
2. In the component properties on the right, find Use Graphic Gallery and click the image area
3. Click Import
4. In the pop-up dialog, choose System Gallery
5. For the remote controller button, select switch04 under the switch category; for the Indicator, select indicator01 under the indicator category
6. Click Save, return to Select Graphic, choose the newly imported graphic, and click OK

Figure 3-6. Importing switch and indicator graphics from the system graphics library.

2. The status value configuration diagram is shown below.

Figure 3-7. Yellow fault indicator configured for Status = 2.

Alarm List Information is as follows:

Alarm list title and entry text:

Alarm Level Mapping Configuration is as follows. It is used to map the level KEY returned by the system to user-friendly descriptive text:

Figure 3-8. Real-time alarm table fields and alarm-level mapping configuration.

SCADA tip: For repeated card content, after configuring one device card, hold Ctrl and use the left mouse button to box-select the content of card 1, click the Group icon on the Top Toolbox, then press Ctrl+C and Ctrl+V to copy and paste it. Drag it to the location of card 2, use Align Left to quickly align it, then Ungroup and modify the component setup. This allows you to complete the second card much faster.

Frequently Asked Questions

• Do I need to select a device for the alarm list? If no device is selected, alarms for all devices can be viewed. If a device is selected, only alarms for that device are shown.
• Why are there no graphic options in the Indicator status graphic settings? First confirm that Use Graphic Gallery is checked.
• What happens if the mapped values for alarm levels are not configured? The alarm list will display the KEY values.
• Must the alarm mapped values adopt the values given in the examples? No. You can replace them with other easy-to-understand content, such as High Level or 3.
• Why is the Status field not selected for the alarm list? The real-time alarm list only contains uncleared alarms, whose status is uniformly marked as Uncleared. Thus, this field does not need to be displayed here.

3.2.4. Configure the Alarm Analysis Page

The Alarm Analysis page is used to display statistical information that is not suitable to fully expand on the home page, making it easier to move from "seeing alarms" to "understanding alarm distribution and trends."

1. Under Page > Web Page on the left, add a new page and name it Alarm Analysis

Figure 3-9. Adding an Alarm Analysis web page.

The layout elements of the Alarm Analysis page are as follows:

Figure 3-10. Empty chart layout of the Alarm Analysis page.

The chart configuration on the Alarm Analysis page is as follows:

Figure 3-11. Alarm Analysis page showing alarm-level distribution, device distribution, and the 24-hour trend.

Frequently Asked Questions

• What is the difference between chart data types? When the data type is Select Metrics, the data is an array composed of multiple data items and is commonly used in trend charts, pie charts, and tables that display multiple variables. Select Data means the data type is a single data item and is commonly used for device real-time status and Numeric Display scenarios.
• Why is there no data on the runtime dashboard? Please first check the data source configuration, and verify whether the dimension and metric options are reversed.

3.2.5. Configure the Device Remote Controller Popup Page

The Device Remote Controller is used to demonstrate a complete control loop: enter a specific device from the home page, view the current value, modify the set value, and perform power control.

Figure 3-12. Completed Device Thermostat popup page.

1. Add a new Popup Page: Device Remote Controller 1
2. Set the page size to 1000 x 600
3. Supplement page content according to the configuration below.

Popup Page properties:

Popup Page text:

Popup Page data and control:

Figure 3-13. Red OFF-state graphic configured for Power = false.

4. After configuration, copy this page to quickly create a remote control page for another device.
5. Click Copy Page and rename it to [Device Remote Controller 2]
6. Modify the bound variable information in the three data and control components

Figure 3-14. Copying the device-controller popup and entering a new page name.

Frequently Asked Questions

• After clicking the gear icon next to the status graphic, why is there no graphic setting option? First confirm that a switch graphic style has been selected below the status graphic before clicking the gear icon.
• Why is the stepper component incomplete in preview? The component does not have enough space; you need to increase its width.
• Can the variable configuration of the switch be changed to other values such as 0/1 or on/off? No. The system has converted standard boolean values to true/false, and modification will lead to matching failure.
• Can non-boolean variables be bound as the control variable of the switch? No. The control function of the switch component only supports binding boolean variables; otherwise, the system cannot recognize the switch status value.

3.2.6. Configure Page Interaction

The purpose of this step is to upgrade the project from "pages are built" to "pages are interactive." After the Home Overview page, Alarm Analysis page, and Device Remote Controller Popup Page are all completed, add the interactions in one pass.

All page switching, popup opening, and popup closing are configured through Action settings on the right side of the component.

Figure 3-15. Page-switch action configured for the Home text control.

Jump from the home page to the Alarm Analysis page:

1. On the home page, select the View Alarm Analysis > text component
2. In the properties on the right, find Action and click the gear icon to enter configuration
3. Set Operation Type to Page Jump, set Function to Switch Page, and set Target Page to Alarm Analysis
4. Click OK to save

Return from the Alarm Analysis page to the home page:

1. On the Alarm Analysis page, select the Back to Home text component
2. Open the Action configuration in the properties on the right
3. Set Operation Type to Page Jump, set Function to Switch Page, and set Target Page to Home Overview
4. Click OK to save

Open the Device Remote Controller Popup Page from the home page:

1. On the home page, select the Remote Controller View Button in the device card
2. In the properties on the right, find Open Popup and select Device Remote Controller

Close the remote controller Popup Page:

1. On the Device Remote Controller Popup Page, select the X text component in the upper-right corner
2. Open the Action configuration in the properties on the right
3. Set Operation Type to Page Jump, and set Function to Close Page
4. Click OK to save

Frequently Asked Questions

• Why can't I find the page I want to select? First confirm that Operation Type and Function are set correctly. A Web Page can only switch to another Web Page, and the same rule applies to a Mobile Page. Both Web Page and Mobile Page can open a Popup Page.

3.3. Runtime Verification and Acceptance

After all pages and interactions have been configured, check them in the following order:

1. Click Save first, then click Preview in the upper-right corner of the designer. The system will automatically open a browser window for preview
2. In the preview window, check whether the page style and interactions are correct (the preview page cannot be used to verify device control or live values)
3. Return to the SCADA Management page and click the Run button for the SCADA project. The system will automatically open a browser window
4. In the runtime window, check whether the data and controls are working properly

In runtime mode, focus on the following checks:

• The home page title, time, 3D image, and border styles display correctly
• The two device cards on the home page show the correct Indicators and values

Figure 3-16. Comparison of home-page device-card values with Data Collection variable values.

• The alarm list on the home page displays real-time alarms

Figure 3-17. Comparison of real-time alarms in Alarm Management with the home-page alarm list.

• The home page and the Alarm Analysis page can switch normally
• The three charts on the Alarm Analysis page display correctly and the values are accurate

Figure 3-18. Runtime Alarm Analysis page with distribution charts and the 24-hour alarm trend.

• Clicking the remote controller button in the device card on the home page opens the remote controller popup properly

Figure 3-19. Variable write result after changing the set temperature from the device controller.

• After adjusting the set temperature and switching the device power switch, device control works properly

Figure 3-20. Success message and Power variable feedback after toggling the device switch.

4. Page Configuration and Component Quick Reference

This chapter first explains page configuration, then organizes commonly used components by category, including their purposes, configuration highlights, and common misconfigurations, so that you can quickly look them up and use them directly in real projects.

4.1. Page Configuration

4.1.1. Basic Page Settings

Purpose: Define the page canvas, background, Fit Mode, and overall theme style.

Common usage scenario: After creating any page, complete this part of the page configuration first, then start layout design and component configuration.

Page types: Three page types are supported: Web Page, Mobile Page, and Popup Page. Their core differences are as follows:

• Their default sizes are different.
• Their interaction limits are different. For page switching, a Web Page can only switch to another Web Page, and the same applies to a Mobile Page. For popup effects, both Web Page and Mobile Page can open a Popup Page.

Common misconfigurations and suggestions:

• The page list on the left supports page copy, deletion, reordering, and setting the startup page.
• It is recommended to determine the canvas size and background first, then reduce repeated configuration by using the page copy function.
• The background color of a Popup Page should be visually different from the original page background to avoid blending together after the popup opens.
• Difference between Background Color and App Background Color: as shown in the monitoring page screenshot below, the black area is the range of Background Color, and the red area is the range of App Background Color. In most cases, App Background Color does not need to be configured.

Figure 4-1. Comparison of the page-background and application-background display areas.

4.2. Drawing Components

Drawing Components are mainly used for page base panels, section structures, and process representation. When using them, pay close attention to layer relationships, visual hierarchy, and project standards.

4.2.1. Geometric Shapes

Figure 4-2. Geometric shape components and examples drawn on the canvas.

Purpose: Used to build base panels, section borders, process lines, arrows, and visual guidance structures.

Common usage scenarios: Section background panels, device area frames, process connection lines, decorative borders.

Configuration highlights:

• Fill and stroke: prioritize information zoning instead of competing visually with data components.
• Layer order: static base panels should stay on the bottom layer, while buttons, values, and Indicators should stay on the upper layer.
• Locking status: after the static framework is finalized, it is recommended to lock it promptly in the layer list.

Common misconfigurations and suggestions:

• Borders that are too heavy or colors that are too bright can easily make the page look cluttered.
• If static base panels are not locked, they are very easy to be selected or moved by mistake when dragging other components later.

4.2.2. Pipeline

Figure 4-3. Pipeline component library, pipeline drawing, and flow-effect settings.

Purpose: Used to represent media flow direction, connection relationships, and process routing.

Common usage scenarios: Building HVAC, water treatment, energy flow, and process flow diagrams.

Configuration highlights:

• Media color: keep a consistent meaning within one project, for example assigning fixed colors to refrigerant, water, and steam.
• Direction indication: arrows, flow effects, and corner directions should match the real process.
• Line width consistency: the same type of pipeline should keep the same width to avoid confusing visual priority.
• Supports controlling the start and stop of flow through conditions. Multiple rules can be configured, requiring either all conditions or any condition to be met.

Common misconfigurations and suggestions:

• Why is there only an image at the pipeline start point after enabling the graphic gallery? Currently, the graphic function of Pipeline only applies to the start point. For example, a switch image can be used only to indicate that the flow starts from that switch.

4.3. Controls

Controls are used to perform page jumps, input, and control operations. When configuring them, focus on action logic, Variable Binding, and operation feedback.

4.3.1. View Button

Figure 4-4. View Button component and target-page configuration.

Purpose: Triggers page switching or opens a popup page.

Common usage scenarios: Top navigation, floor switching, detail entry points, and back-to-home navigation.

Key parameters:

4.3.2. Switch and Mimic Button

Figure 4-5. Switch, mimic-button, and indicator-state examples.

Purpose: Performs power switching, mode switching, and confirmation of key actions.

Common usage scenarios: Device start/stop, valve open/close, operating mode switching, and control actions requiring confirmation.

Key parameters:

Common misconfigurations and suggestions:

• Why doesn't the button style change after clicking it? Confirm that Use Indicator is checked. If it is configured, confirm that the graphics for both states are correctly configured in Status Graphic.
• Why are there no selectable options under Graphic inside Status Graphic? Confirm that Use Graphic Gallery is checked under Status Graphic.
• If Confirmation Dialog is not enabled for critical buttons, accidental operations are more likely.

4.3.3. Numeric Input Controls

Figure 4-6. Stepper, text input, numeric input, slider, and knob controls.

Purpose: Inputs or adjusts continuous values, including Number Input, Stepper, Slider, and Knob.

Common usage scenarios: Temperature setting, threshold adjustment, speed setting, and parameter fine-tuning.

Key parameters:

Common misconfigurations and suggestions:

• If range and step size are not limited, operators can easily enter invalid values.
• If the same parameter uses different units or precision in different places on the page, it can easily cause misreading.
• Slider and Knob are better for quick adjustment, while high-precision settings are still better handled with Number Input.

4.3.4. Option Controls

Figure 4-7. Dropdown and radio-button option controls.

Purpose: Selects one value from predefined options, including Dropdown and Radio Button.

Common usage scenarios: Operating mode switching, device gear selection, and area type selection.

Key parameters:

Common misconfigurations and suggestions:

• If the displayed text does not correspond to the actual value sent, troubleshooting later becomes very difficult.
• If there are very few options but Dropdown is used, the interaction becomes less intuitive.

4.3.5. Calendar

Figure 4-8. Calendar component and date-format setting.

Purpose: Used to select a date or time range.

Common usage scenarios: Trend queries, report filtering, and historical record queries.

Key parameters:

Common misconfigurations and suggestions:

• If the page displays one time format while the backend query uses another, it can easily lead to no results.
• If the Calendar exists on the page but is not connected to the query logic, users may assume the component is invalid.

4.3.6. Menu Switching Components

Purpose:

Consists of two components used together — Menu Navigation and View Container — to quickly implement menu-based switching between multiple peer pages within the same HMI project. Users can switch between different business pages by clicking menu items without leaving the current page.

Common usage scenarios:

Switching between home page, alarm analysis page, device control page and other peer pages within one HMI project; industrial dashboards organized by functional modules with top or side menu navigation; large-screen displays with multiple data panels; equipment monitoring systems showing different monitoring views by area or device type.

Key parameters:

Component 1: Menu Navigation

Component 2: View Container

How to use them together:

Both components must be configured together to enable menu switching. Follow these steps:

1. Create multiple pages in the HMI designer: one as the main page (holds the menu and container) and the rest as sub-pages (the content pages to switch between). For example, to switch between 3 pages, you need 4 pages total: 1 main page + 3 sub-pages.

Figure 4-9. Overview, Alarm Analysis, and Device Monitor pages in the page manager.

2. Open the main page, drag the View Container component and the Menu Navigation component from the left component panel, and configure the relevant settings. The figures below show both horizontal and vertical menu effects.

Figure 4-10. View Container with vertical and horizontal page-navigation menus.

3. Click Confirm to save. Preview the page and click the menu items to verify the switching effect.

Common misconfigurations and suggestions:

• Do not nest menus. Do not place Menu Navigation and View Container components inside the sub-pages being switched to. For example, if page 1 has a menu that switches to page 2, page 2 must not contain these two components again — otherwise it will cause a circular nesting and display errors.
• Match the dimensions. The sizes of the main page, menu component, View Container, and sub-pages must be coordinated; otherwise the switched page will appear distorted or show scrollbars. Example: if the main page is 1920 × 1080 and the Menu Navigation is 110 pixels tall, set the View Container height to 1080 − 110 = 970 pixels. All sub-pages should also be 1920 × 970 to ensure no distortion in Fit Ratio mode.
• Do not add too many menu items. Recommended maximum: 6 items for horizontal menus, 10 items for vertical menus. Excessive items degrade usability.

4.4. Display Components

4.4.1. Text Components

Purpose: Used for titles, section names, labels, descriptions, and decorative text, including Text and Gradient Text.

Common usage scenarios: Page titles, area labels, device names, and decorative header text.

Configuration highlights:

• Text hierarchy: page titles, section titles, and labels should have a clear font size hierarchy.
• Contrast: use light text on dark backgrounds to ensure readability from a distance.
• Style consistency: Gradient Text should only be used for a small number of main titles and should not be overused across the whole page.

Common misconfigurations and suggestions:

• If titles, labels, and data units all use the same font size, the page hierarchy becomes very weak.
• Excessive stacking of gradients, outlines, and glow effects can easily reduce readability.

4.4.2. Numeric and Character Display

Purpose: Displays real-time values, strings, and short status text.

Common usage scenarios: Temperature, pressure, flow, device IDs, alarm text, and operator names.

Key parameters:

Common misconfigurations and suggestions:

• Why is there no effect after checking Use Slider? Please widen the component. This feature only takes effect when the Read/Write Type is set to read/write.
• Why is the unit configured but not visible? Check the style of the unit, for example whether its color is the same as the background and therefore invisible.

4.4.3. Indicator

Purpose: Uses colors or graphics to represent binary or multi-state conditions.

Common usage scenarios: Running, stopped, fault, offline, standby, and other status feedback.

Key parameters:

Common misconfigurations and suggestions:

• When the variable value exceeds the mapped range, the Indicator usually shows the default state.
• If the same status uses different colors on different pages, O&M personnel will find it difficult to make quick judgments.

4.4.4. Time Display

Purpose: Displays the current system time or converts a raw duration into a readable format.

Common usage scenarios: Page header time, runtime duration, fault duration, and countdowns.

Key parameters:

Common misconfigurations and suggestions:

• If the unit of the original duration data is unclear, the displayed result is often off by a factor of 2 or 1000.
• If the system time zone settings are inconsistent, the page time may also appear incorrect.

4.4.5. Hyperlink and Image Carousel

Purpose: Adds page navigation and image-based display capabilities.

Common usage scenarios: External help document entry points, plant promotional pages, and device image carousels.

Configuration highlights:

• Hyperlink: focus on confirming the target URL.
• Image Carousel: supports Create Graphic, where multiple images can be uploaded as one graphic. After selecting that graphic, all included images will rotate automatically.

Common misconfigurations and suggestions:

• If the carousel images vary too much in size, the visual effect will jump noticeably.
• If the runtime page needs to stay displayed for a long time, the carousel speed should not be too fast.

4.5. Chart Components

Chart Components are used to display trends, comparisons, proportions, and special-purpose analysis. When configuring them, focus on data structure, range settings, and readability.

4.5.1. Single-Value Indicator Charts

Figure 4-11. Gauge, liquid-level, compass, and thermometer single-value charts.

Purpose: Highlights a single metric or a single directional value in the form of a dial, thermometer, pressure gauge, compass, clock, and similar visuals.

Common usage scenarios: Pressure, temperature, liquid level, speed, direction, and clock display.

Key parameters:

Common misconfigurations and suggestions:

• If the measurement range is set unreasonably, the chart may stay pinned to one side or barely move.
• Putting many single-value charts on one page is often less clear than using numeric cards.

4.5.2. Trend and Statistical Charts

Purpose: Displays trends and comparison results based on time or category dimensions, including line charts, bar charts, stacked bar charts, dual-axis charts, and more.

Common usage scenarios: Temperature trends, energy consumption comparison, production comparison, and itemized statistics.

Key parameters:

Common misconfigurations and suggestions:

• If there are too many line or bar series, the chart becomes hard to read.
• If dimensions and metrics are configured incorrectly, the chart may still display, but its meaning is already wrong.

4.5.3. Proportion Charts

Purpose: Displays composition relationships and proportional results, including pie charts, donut charts, rose charts, and funnel charts.

Common usage scenarios: Alarm severity proportions, energy consumption breakdown, status composition, and conversion funnels.

Key parameters:

Common misconfigurations and suggestions:

• When there are too many categories in a proportion chart, readability drops very quickly.
• If users ultimately care more about comparing absolute values, a bar chart is usually more suitable than a pie chart.

4.5.4. Factory-Specific Chart Components

Figure 4-12. Factory-specific OEE indicators, statistics table, and status charts.

Purpose: Chart Components for Factory-specific OEE analysis scenarios, such as OEE Core Indicator, Equipment Status Duration Distribution, OEE Daily Status by Shift, and Generic Value Component.

Common usage scenarios: Production efficiency analysis, downtime cause analysis, and status duration statistics.

Key parameters:

Common misconfigurations and suggestions:

• Why can data collection see devices but they cannot be selected in configuration? These are OEE business-specific components, and their data sources only support data from the OEE Statistics Configuration module.
• Why does the data never change? The data comes from Data Management > System Built-in Table - Equipment Operation Statistics Table. First check whether the data in that table changes correctly. If not, there is likely a configuration problem in OEE Statistics Configuration. If it does change, check whether the component uses a fixed time range in the past, whether a device was selected, and whether the refresh interval is set too long.

4.6. List Components

4.6.1. Table

Purpose: Displays structured detailed records and is suitable for viewing historical alarms, logs, and reports, including Scrolling Table and Table.

Common usage scenarios: Alarm records, operation logs, statistical reports, and historical data query results.

Key parameters:

Common misconfigurations and suggestions:

• How do I choose different table types? If there is a lot of data, it is recommended to use a Scrolling Table first because it scrolls automatically without requiring operations. You can also use a standard Table and switch pages at the bottom-right corner.
• The scrolling speed should be configured based on the number of fields. If there is a lot of field content, a speed that is too fast makes it hard to read.

4.6.2. Table Frame

Purpose: A style container for tables that contains no data by itself.

Common usage scenarios: Standardized base appearance for alarm tables, log tables, and statistical tables.

Configuration highlights:

• Table header style, row height, and border style should be standardized within the project.
• Define the frame first, then fill in the fields and data inside it.

Common misconfigurations and suggestions:

• It is recommended to determine the table content and position first, then place the Table Frame and adjust its size as needed.
• If you start configuring fields before the frame is decided, later modifications usually become more costly.

4.7. Widgets and Material Components

4.7.1. Widget

Purpose: Saves multiple components as a reusable standard block.

Common usage scenarios: Standard device cards, unified navigation areas, and monitoring sections with the same style.

Configuration highlights:

• Before creating a Widget, first define the static layout, variable placeholders, and style standards.
• Widgets are best suited for page blocks with the same structure but different variables.

Common misconfigurations and suggestions:

• If a Widget is too large, it becomes inconvenient when you later want to reuse only part of it.
• After a Widget is modified, all pages that reference it are updated as well, so pay attention to the impact scope.

4.7.2. Icons and Images

Figure 4-13. Icon, warning-sign, border, and background-image components.

Purpose: Provides built-in style components such as backgrounds, decorations, icons, borders, and alarm graphics.

Common usage scenarios: Floor plans, device icons, brand marks, and scene illustrations.

Common misconfigurations and suggestions:

• Why can't the background image continue to enlarge when I drag it near the edge to cover the full background? Drag-to-scale stops once the mouse leaves the canvas.
• Images that are too large or too numerous can significantly slow page loading.
• In the early stage, you can use borders, backgrounds, and decorative components together with the alignment functions on the Top Toolbox to quickly build the basic page layout.
• To reduce interference with other component configuration, use Send to Back on the Top Toolbox and the layer lock function to avoid accidental movement.
• Borders with the same color and style usually look more coordinated.

4.8. General Configuration and Usage Notes

This section summarizes general configuration items used by multiple components so they can be handled consistently during page design.

4.8.1. Position and Size

Applicable content:X, Y, width, height, and rotation angle.

Suggestions:

• First determine the page grid and alignment baseline, then make local fine adjustments.
• When precise alignment is required, prefer alignment tools instead of manual dragging.

4.8.2. Layer and Locking

Applicable content: Layer up/down, Bring to Front / Send to Back, and component locking.

Suggestions:

• After the static base panel of the page is completed, lock it immediately.
• Background images, section borders, and process lines should stay on the bottom layer; buttons, Indicators, and Numeric Display components should stay on the upper layer.

4.8.3. Show/Hide and Conditional Display

Applicable content: Component visibility, conditional expressions, and runtime display logic.

Suggestions:

• Conditional display is suitable for layered page display and status switching, but not for stacking overly complex expressions.
• When a page contains multiple visibility conditions, standardize variable naming and state value definitions first.

4.8.4. Border, Background, and Filters

Applicable content: Borders, background colors, background images, opacity, shadows, blur, and filters.

Suggestions:

• These configurations mainly serve hierarchy and readability and should not be over-decorated.
• For dark monitoring pages, prioritize contrast first, then visual effects.

4.9. Top Toolbox

4.9.1. Undo and Redo

UndoThe Undo tool allows users to revert to the previous step when making mistakes. It only supports rolling back four types of operations as follows:

1. Add & Delete Operations: Drag to add new components, cut/delete components, paste copied components;
2. Layout Operations: Move components, stretch/scale, rotate components; adjust parameters via the right-side [Position & Size] panel; layout adjustments such as equal size and alignment in the top operation bar;
3. Stack Operations: Bring to front, send to back, move up one layer, move down one layer for components;
4. Group Operations: Group and ungroup components.

Executing Undo will remove the last above-mentioned operation and restore the canvas state before the operation.

RedoThe Redo tool restores operations that have been undone. Use this function to recover canvas changes you previously reverted via Undo.

Figure 4-14. Undo and Redo buttons on the toolbar.

4.9.2. Multilayer Operation

Bring to FrontThe Bring to Front tool moves a selected item all the way to the top layer. Use this to make sure a component, like an Indicator Light, stays visible on top of a Background or Border.

Send to BackThe Send to Back tool moves a selected item to the very bottom layer. This is perfect for placing a Background image behind all the user's other charts and text.

Bring ForwardThe Bring Forward tool moves an item up by just one layer. Use this for fine-tuning how two items overlap without moving the item to the very top.

Send BackwardThe Send Backward tool moves an item down by just one layer. This helps the user tuck a component behind another specific item while keeping it above the background.

Figure 4-15. Bring-to-front, send-to-back, move-forward, and move-backward layer effects.

Layer Distribution

Click the layer button to view the layer distribution of all components. Each component occupies an independent layer, and multiple components cannot share a single layer.

Click the lock button to lock or unlock components and prevent accidental position shifts of key components.

Hover your mouse over a component icon, then drag up or down to quickly adjust its layer order.

Figure 4-16. Component order and lock states in the Layers panel.

4.9.3. Alignment and Distribution

The alignment and distribution functions on the top bar are available only when multiple components are selected.

Notice: The reference component is the first selected one.

Align LeftThis tool moves all selected components so that their left edges line up with the component furthest to the left.

Align Center VerticallyThis tool aligns the vertical centers of all selected components. It is useful for making sure a row of different-sized icons or text boxes stay level with each other.

Align RightThis tool moves all selected components so that their right edges line up with the component furthest to the right.

Align TopThis tool moves all selected components so that their top edges line up with the highest component on the canvas.

Align Center HorizontallyThis tool aligns the horizontal centers of all selected components. Use this to perfectly stack items like a Title and a Device Image in a straight column.

Align BottomThis tool moves all selected components so that their bottom edges line up with the lowest component on the canvas.

Figure 4-17. Left, center, right, top, middle, and bottom alignment results.

Distribute HorizontallyThis tool takes three or more selected components and spaces them out evenly from left to right. It ensures the gaps between each item are exactly the same size.

Distribute VerticallyThis tool takes three or more selected components and spaces them out evenly from top to bottom.

Figure 4-18. Horizontal and vertical distribution results.

4.9.4. Equalization

Equal WidthThe Equal Width tool resizes all selected components so they have the exact same width as the first component the user selected. Use this to make a column of different Number Displays or Charts look consistent and professional.

Equal HeightThe Equal Height tool adjusts all selected components to match the height of the first selected item. This is particularly useful for ensuring a row of Indicator Lights or Tanks has a uniform vertical appearance.

Equal Size

The Equal Size tool is a shortcut that applies both Equal Width and Equal Height at the same time. It ensures that every selected component becomes the exact same shape and size, which is perfect for creating identical buttons or status boxes.

Figure 4-19. Equal-width, equal-height, and equal-size results.

4.9.5. Grouping

Group

The Group tool locks multiple selected components together so they act as one single object.

Once grouped, the user can move, resize, or copy the entire set (like a machine graphic with its status labels) without losing their relative positions.

This helps keep complex parts of the user's design organized and prevents accidental movement of individual items.

UngroupThe Ungroup tool breaks a group back into individual components. Use it when you need to edit or move a specific part of a group.

Figure 4-20. Group and Ungroup buttons.

4.9.6. Zoom In & Zoom Out

These controls allow users to adjust the zoom scale of the workspace for both fine-detail editing and full overview of the entire operation interface.

Zoom In (+):Increases the size of the canvas on the user's screen for precise placement of small components like Indicator Lights or Icons.

Zoom Out (-):Decreases the canvas size so the user can see the overall balance and grouping of the user's Borders and Charts.

Percentage View:Shows the user's current zoom level (e.g., 60%) so the user can quickly return to a standard view.

4.9.7. Clear Canvas and Draw

These tools are used to reset the user's workspace or add custom hand-drawn elements.

Clear Canvas (Trash Icon):Instantly deletes all components currently on the page. Use this with caution when the user wants to start a design from scratch.

Draw (Pen Icon):Switches the cursor to drawing mode, allowing you to create custom lines or shapes that are not available in the standard component library. Click once to set the start point. Each subsequent click creates a node and connects it to the preceding node.

Figure 4-21. Custom polyline created with the drawing tool.

4.9.7.1. Global Configuration

Click the option in the red box and select Global Configuration to configure global data used in SCADA design.

Figure 4-22. Global Configuration dialog.

4.9.7.2. Export to Template

Figure 4-23. Save as Template dialog.

Click the option in the red box and select Export to Template to export the current SCADA design as a reusable template.

5. Runtime Access and Sharing

This chapter describes runtime viewing, link sharing, and permission recommendations after the page goes live.

5.1. Runtime Access and Sharing

This section is intended for operators who do not need to participate in SCADA page design but only need to use the SCADA runtime page, including equipment operation and maintenance personnel, project managers, and monitoring personnel. SCADA runtime and SCADA sharing functions are controlled by system user role permissions. For specific permission rules, refer to Permission Functions and Role Configuration Mapping Table.

5.1.1. Runtime Page Access

Figure 5-1. Run action on the SCADA project card.

Runtime pages are used to view real-time device status, trends, alarms, and key indicators. They support long-term online operation and do not use a login credential expiration mechanism, so periodic re-login is not required.

Device control permissions on runtime pages are determined by the permission settings of the SCADA project. The permission rules are as follows:

• Users with Editable permission can send device control commands. Among them, the creator of the SCADA project, who is the default SCADA administrator, has Editable permission by default.
• Users with View Only permission can only browse monitoring pages and cannot perform any device operations.

5.1.2. Runtime Link Sharing

Figure 5-2. Share Configuration dialog with permission, validity-period, QR-code, and link-copy options.

1. The system limits the types of runtime link permissions a user can share based on that user's own permissions. The rules are as follows:
2. Users with Editable permission can share both View Only links and Editable links.
3. Users with View Only permission can only share View Only links and cannot share Editable links.
2. The validity period of a shared link supports either a custom number of days or permanent validity.
3. Links can be shared either by copying the link or by saving the QR code.

5.2. Permission Functions and Role Configuration Mapping Table

Runtime and access functions are both affected by the system's role permission configuration. The configuration management function includes four core permission dimensions: sharing and share record management, template management, configuration design, and configuration runtime. Different permissions correspond to different operation capabilities and can be assigned based on job responsibilities. The functional descriptions and role recommendations are as follows:

Overall recommendation: SCADA administrators should be granted all permissions to cover project design, template maintenance, link sharing, and page runtime operations. Device O&M personnel and ordinary monitoring users generally only need SCADA Runtime Permission to meet daily monitoring and basic device operation needs.

6. General Troubleshooting Methods

This chapter presents a general troubleshooting methodology for SCADA projects. Unlike the component-specific FAQs and dedicated fault solutions described earlier, this chapter focuses on fault classification across the whole project, standardized troubleshooting logic, and priority-based troubleshooting order. It helps identify, analyze, and solve SCADA issues from the perspective of the entire project and applies to all scenarios such as project debugging, production operation, and issue review.

Abnormal behavior in SCADA project runtime can generally be divided into seven major categories: style display issues, data interaction issues, control and write issues, permission configuration issues, performance and runtime environment issues, template import, export, and reuse issues, and environment compatibility issues. For each category below, the fault definition, typical symptoms, standardized troubleshooting logic, and priority troubleshooting sequence are explained.

6.1. Overall Troubleshooting Priority Principles

To improve troubleshooting efficiency in operations and maintenance, all SCADA faults should follow the priority order below instead of using random trial and error:

1. Check the whole project before the details: First troubleshoot overall issues such as project runtime, communication, and environment, then troubleshoot local issues such as pages, components, and scripts.
2. Check the lower layer before the upper layer: First verify the fundamentals at the hardware device, communication link, and system environment level, then troubleshoot upper-layer variables, configuration, and interface display.
3. Check configuration before logic: First troubleshoot incorrect basic parameter settings, then troubleshoot custom scripts and linkage logic.
4. Check general methods before dedicated ones: First troubleshoot according to the general ideas in this chapter. If the issue remains unresolved, then refer to the dedicated troubleshooting solutions for specific components in earlier chapters.
5. Check static configuration before dynamic behavior: First inspect offline configuration and parameter settings, then test dynamic runtime behavior and triggered interaction effects.

6.1.1. Style Display Issues

Fault definition: The visual effect of components is abnormal. There are no data errors and no control failures, only display issues.

Typical symptoms: The page is not fully displayed, components are covered, or components are invisible.

Standard troubleshooting order:

1. Distinguish edit mode from runtime mode: Confirm that the issue appears only in runtime mode while edit mode is normal, so basic design errors can be ruled out and runtime rendering issues can be targeted.
2. Verify basic style configuration: Check basic parameters such as page/component size, position, color, font, border, and show/hide conditions to confirm there are no misconfigured or unsaved parameters.
3. Check dynamic style logic: Inspect dynamic configurations such as variable-driven styles, conditional display, animation triggers, and page transition animations to confirm that trigger conditions and threshold settings are reasonable.
4. Verify page layout rules: Check page adaptation, zoom settings, layout rules, and component layer relationships to rule out component overlap, layer blocking, and adaptation rule conflicts.
5. Inspect the rendering environment: Switch the runtime terminal (PC, touch screen, browser), clear the cache, and restart the runtime client to rule out terminal compatibility or cache residue issues.

6.1.2. Data Interaction Issues

Fault definition: SCADA component data does not refresh, is incorrect, fluctuates abnormally, or is missing, and the data shown on the interface does not match the actual device data.

Typical symptoms: Data always remains 0 or empty, data does not update in real time, data jumps abnormally, historical data is missing, reports or curves have no data, or data refresh is delayed.

Standard troubleshooting order:

1. Verify the data source: Confirm whether the data in sources such as Data Collection (real-time data), Alarm Management (alarm data), and Data Management (Factory only) is normal.
2. Verify component data binding: Confirm that the component is bound to the correct variable, that no empty variable is bound, and that no wrong variable is bound. Remove unnecessary binding conflicts.
3. Inspect data filtering or script intervention: Check whether there are data filtering scripts, threshold limits, or data-clearing logic that may cause abnormal data because of script modification or overly strict filter rules.
4. Verify data storage and refresh: Check project refresh mechanisms and historical data storage settings, and restart the data service to rule out stalled services or storage exceptions that prevent data updates.

6.1.3. Control and Write Issues

Fault definition: Manual or automatic control operations on the interface do not respond, control commands fail, or control results are abnormal, making it impossible to start/stop, adjust, or switch lower-level devices.

Typical symptoms: Buttons do not respond when clicked, switching does not take effect, parameter delivery fails, automatic control logic does not run, or device status feedback is abnormal after control.

Standard troubleshooting order:

1. Verify operation permissions and status: Confirm that the current logged-in account has control permission.
2. Verify command delivery status: In the Data Collection function, check whether command delivery works normally and whether the status variable updates correctly.
3. Check control component configuration: Verify that the control commands and bound variables for buttons, Switch components, and adjustment components are configured correctly. Also check for cases where the control variable is bound correctly but the status variable is bound incorrectly, causing actual control to succeed while the interface displays the wrong result.
4. Inspect pre-control logic: Check whether there are script restrictions, conditional control rules, or interlock logic, and confirm that control trigger conditions are met and not blocked by logic.

6.1.4. Permission Configuration Issues (Account / Operation Restriction Exceptions)

Fault definition: After different accounts log in, functions, pages, or operation permissions become abnormal, resulting in permission overflow, missing permissions, login failure, or abnormal page hiding.

Typical symptoms: Administrators cannot share links, cannot enter the design page, or cannot see a particular SCADA project.

Standard troubleshooting order:

1. Check role permission settings: Review the permission list bound to the account and confirm whether permissions such as page design, runtime, and sharing are configured.
2. Check single project permissions: Review the permission list of the problematic SCADA project and confirm whether the user has Editable or View Only permission.
3. Refresh the permission cache: Log out and log back in to rule out exceptions caused by unrefreshed permissions or cached data after permission changes.

6.1.5. Performance and Runtime Environment Issues

Fault definition: The SCADA project works normally during design, but the entire project becomes slow, crashes, shows a black screen, fails to start, or cannot load pages at runtime. This is an overall project-level issue rather than a single-component issue.

Typical symptoms: Project startup errors, runtime lag or delay, blank page loading, or page 404.

Standard troubleshooting order:

1. Verify project file integrity: Confirm that project files have not been deleted and rule out file abnormalities.
2. Verify project runtime configuration: Check project refresh rates, data ranges, and image quantities to confirm there are no unreasonable parameter settings or excessive resource usage.
3. Clean the runtime environment: Close unnecessary terminal processes, clear software caches, and restart the SCADA runtime software to resolve issues caused by excessive resource consumption.

6.1.6. Template Import, Export, and Reuse Issues

Fault definition: After a SCADA project is exported and imported into another gateway or product, issues such as abnormal data or missing components occur.

Typical symptoms: Missing components, missing data, or import errors.

Standard troubleshooting order:

1. Check product consistency: SCADA projects cannot be reused across different products. For example, a SCADA project created in E2C Factory does not support import into E2C Field.
2. Check version consistency: Review version update logs to rule out component incompatibility between old and new versions.
3. Verify data consistency: SCADA bindings identify data by variable name. If variable names differ on the gateway, identification fails and rebinding is required.

6.1.7. Environment Compatibility Issues (Terminal / System Adaptation Exceptions)

Fault definition: The same SCADA project behaves differently on different terminals, operating systems, or software versions, and issues appear only in specific environments while the project setup itself is correct.

Typical symptoms: Works normally on PC but is abnormal on touch screen, browser, TV, or tablet; different gateways show different runtime results.

Standard troubleshooting order:

1. Compare environments and reproduce the issue: Try different browsers and devices to confirm whether the issue is specific to one environment, thereby ruling out problems in the project itself.
2. Verify software version consistency: Confirm that software versions are the same and investigate compatibility bugs or feature differences between higher and lower versions.
3. Inspect special environment settings: Check whether special functions such as automatic translation are enabled.
4. Disable environment blocking policies: Turn off firewall, antivirus software, and browser compatibility mode on the terminal to rule out function anomalies caused by environment blocking.

6.2. General Troubleshooting Recommendations

1. Before troubleshooting, back up the project files first to avoid secondary failures caused by configuration changes.
2. During troubleshooting, record the fault symptoms, troubleshooting steps, and solutions so similar problems can be handled more quickly later.
3. Prefer software logs and debugging tools to locate issues, reducing blind configuration changes.

After project debugging is completed, standardize the core configuration of communication, permissions, scripts, and adaptation to avoid abnormalities caused by runtime environment changes.