Xvisual

Overview

I. Product Concept

Xvisual is an HMI component application developed by SINSEGYE. It is a SCADA product oriented to configuration editing and human-computer interaction, enabling users and FAE to easily, quickly, and efficiently complete visual customization and automatic page control drawing.

Xvisual provides an easy-to-use development environment and rich functions, allowing configuration engineers to quickly establish, test, and deploy HMI visualization applications suitable for the current industry. It can be widely applied in business scenarios such as petrochemical, metallurgical steel, electric power, photovoltaic, 3C manufacturing, biomedicine, etc., providing customized HMI applications for users.

It is an ideal choice for creating large distributed industrial automation systems, running on servers, embedded computers, and the cloud. It enables real-time information exchange between nodes and interaction with external databases, supporting dozens of common industrial communication protocols, and integrating functions like reports, alarms, trend curves, and various scene controls. It also includes common templates for various industries to meet diverse production monitoring needs.

II. Product Features

III. Component Composition

1. Xvisual-Server

Xvisual-Server manages data archiving, performs mathematical calculations, and provides information to client applications. It writes data to the primary archive and makes a backup copy simultaneously.

As a service, it has no user interface and runs continuously in the background regardless of user login/logout. The graphical shell for configuring Xvisual-Server is built into the Xvisual-Administrator application. Additionally, the Xvisual-Server module allows extending server functions based on customer requirements.

2. Xvisual-Communicator

Xvisual-Communicator interacts with controllers and transfers data to Xvisual-Server. Communication with connected systems is performed in parallel through multiple lines, receiving current data, archiving data/events, and sending commands to controllers. This application assists in troubleshooting communication lines and devices.

As a service, it has no user interface, with configuration shells integrated into Xvisual-Administrator. Information about the application, communication lines, and connected devices is logged. Designed for uninterrupted operation, it allows developers to implement custom device drivers for various controllers.

3. Xvisual-Webstation

Xvisual-Webstation is a web application that displays information and sends commands via a browser. Below are the Schedule View and Table View of the Webstation application:

Users can select views (table/schedule) and access archived data by date. To display trends, click item icons in the table or elements in the schedule. Accessible from any network-connected device without installation, access is managed by administrators who define user permissions.

4. Xvisual-Agent

Xvisual-Agent transfers configurations between Xvisual instances and the Administrator application, providing log files for display in Administrator. Running as a service on the server where the controlled instance (including Server/Communicator/Webstation) is installed, it communicates with Administrator via TCP protocol (default port 10002). Firewall rules must allow this port for remote access.

It has no user interface; operation is checked via log files.

5. Xvisual-Administrator

Xvisual-Administrator is an integrated development environment for developing Xvisual projects and viewing automation system status, enabling configuration of major applications and server modules.

Key tools and features:

• Wizards for creating communication lines, devices, and point locations.
• Point location cloning to minimize manual input.
• Projects contain XML-formatted configuration files for easy cross-computer copying.

IV. Software Architecture

Xvisual features a multi-layer architecture where applications (services) interact via TCP protocol. It supports both standalone and distributed deployment in IPC or client PCs.

• Standalone Deployment Architecture within IPC:
  

• Distributed Deployment Architecture Using IPC:
  

Installation and Uninstallation

I. Installation Requirements

1. Server Software Requirements

• Windows:
  • OS: Microsoft Windows Server 2016/2019/2022, Windows 10/11
  • .NET Runtime 8.0
• Linux:
  • OS: Ubuntu (recommended), Alpine, CentOS, Debian, Fedora, OpenSUSE, Red Hat, etc.
  • .NET Runtime 8.0

2. Server Hardware Requirements

Hardware configuration depends on the automation system size, with the minimum defined by OS requirements. Xvisual runs on physical or virtual machines.

3. Workstation/Tablet Requirements

Latest Chrome, Firefox, Safari, or Edge browsers (IE10 or lower kernels are not supported for Web page viewing).

II. Installation Process

1. Install IDE on Windows

1.1 Download and Run the Installer

Download the latest Setup_Xvisual IDE.exe from SINSEGYE's official website, double-click to run, and select "Launch Setup Wizard".

1.2 Administrator Permissions

Confirm permissions if prompted, as the installer may need admin rights to write system files and registry entries.

1.3 Installation Wizard

Click "Next", read and accept the User License Agreement, then click "I Accept" to proceed.

1.4 Retain Existing Configuration

If an older version is installed, choose "Yes" to retain configurations or "No" for a fresh install.

1.5 Install .NET 8 Desktop Runtime

The installer automatically installs/updates .NET 8 Desktop Runtime, a dependency for Xvisual IDE. This step may take time.

1.6 Installation Completion

Click "Finish" to launch Xvisual IDE automatically. By default, it installs to C:\Xvisual\Xvisual IDE, with desktop and start menu shortcuts.

2. Install RTE on Windows

2.1 Download and Run the Installer

Download the latest Setup_Xvisual RTE.exe from SINSEGYE's official website, double-click to run, and select "Launch Setup Wizard".

2.2 Administrator Permissions

Confirm permissions if prompted, as the installer may need admin rights to write system files and registry entries.

2.3 Installation Wizard

Click "Next", read and accept the User License Agreement, then click "I Accept" to proceed.

2.4 Retain Existing Configuration

If an older version is installed, choose whether to retain configurations. Select "No" to prompt for website port configuration (if no old interface exists, this step is skipped).

2.5 Install and Configure Dependencies

Xvisual RTE depends on .NET 8 Runtime and ASP.NET Core Hosting. The installer automatically installs/updates the latest dependencies, which may take time.

2.6 Installation Completion and Reboot

By default, it installs to C:\Xvisual\Xvisual RTE.

2.7 Access Xvisual

After rebooting, the Xvisual RTE service starts automatically. Access via browser using the server's IP/hostname (default HTTP port 80):

http://<your-server-ip>/

The default login uses admin as the username and scada as the password.

3. Install RTE on Ubuntu

3.1 Download and Copy the Installer

Download the latest Xvisual RTE deployment package and install script from SINSEGYE's official website, then copy to any directory on the target server.

3.2 Run the Installation Script

Open a terminal, switch to the installer directory, and execute:

sudo bash ./install.sh

3.3 Administrator Permissions

The script requires root permissions for system file modifications and dependency installation. Enter the root password when prompted.

3.4 Install and Configure Dependencies

The installer automatically downloads/configures .NET 8 Runtime, a core dependency for Xvisual RTE. Installation time depends on system performance.

3.5 Installation Completion and Reboot

By default, it installs to /opt/scada.

3.6 Access Xvisual

After rebooting, access via browser as with Windows:

http://<your-server-ip>/

Default login: username admin, password scada.

III. Update Installation

1. Update IDE on Windows

1.1 Download the Latest Installer

Get the latest IDE installer from SINSEGYE's website to overwrite the old version.

1.2 Run the New Installer

Double-click to run; the process is the same as initial installation, automatically detecting and updating without uninstalling the old version.

2. Update RTE on Windows

2.1 Download the Latest Installer

Get the latest RTE installer from the official website.

2.2 Run the New Installer

Double-click to run, updating automatically like the initial installation.

3. Update RTE on Ubuntu

3.1 Download the Latest Package and Script

Get the latest Xvisual RTE package and install.sh script.

3.2 Run the Update Script

Switch to the download directory and execute:

sudo bash ./install.sh

The installer updates existing environments/RTE without uninstalling the old version.

IV. Uninstallation Process

1. Uninstall IDE on Windows

Use Windows "Settings" or "Control Panel":

• On Windows 10/11: Go to Settings > Applications > Apps & Features, find Xvisual IDE, and click "Uninstall".
• On older Windows: Use Control Panel > Programs and Features to uninstall.
  

2. Uninstall RTE on Windows

Similar to IDE uninstallation, use Settings/Control Panel to find and uninstall Xvisual RTE.

3. Uninstall RTE on Ubuntu

Use the provided uninstall.sh script:

sudo bash ./uninstall.sh

This deletes /opt/scada, related services, and configuration files. Back up project/database files if needed. To remove .NET 8 Runtime (if used only for Xvisual RTE):

sudo apt remove dotnet

Quick Operation Guide

I. Preliminary Preparation

1. System and Permission Check

   • Ensure the operating system meets requirements (Windows Server 2016/2019/2022, Windows 10/11, or Linux-Ubuntu).
   • .NET 8 Runtime is installed (IDE/RTE dependency).

2. Download Software Packages

   • Go to SINSEGYE's OnlineHelp official website: 中科时代Onlinehelp to download the latest Xvisual IDE and RTE installation packages.

II. Creating and Configuring Projects

1. Launch the Xvisual-Administrator application and click New Project on the start page.
   
2. Enter the project name, select the storage location, and choose a template (optional).
   
3. The project is created and displayed in the Project Explorer.
   

III. Core Configuration Process

1. Create a Communication Node

1. Click Communication Node in the toolbar or use the wizard.
   
2. In the setup interface, configure the node name, protocol (e.g., OPC UA/Modbus), and connection parameters.
   

2. Create a Device

1. After establishing the communication node, click Device in the toolbar or use the wizard.
   
2. Set the device name, select the communication node, and configure device-specific parameters (e.g., OPC UA server URL for OPC devices).
   

3. Create a Point Location (Tag)

1. Click Point Location in the toolbar or use the wizard.
   
2. In Step 1, select the communication node and device for the new point location.
   
3. In Step 2, select the device object (e.g., registers in Modbus) from the instance management.
   
4. In Step 3, assign a point location number and configure attributes (data type, archive settings).
   
5. Complete the creation and verify in the point location list.
   

IV. Creating a View

1. Right-click the Views folder in the Project Explorer and select New File.
   
2. Enter the view name (e.g., "MainDashboard") and click Save.
   
3. The view opens in the Web Editor, where you can drag components onto the canvas.

V. Read-Write Channel Binding

1. Bind channels to interact with PLC point locations:
   • Open the free container's property panel and click Bind Channel.
     
2. In the channel selection interface, check the channels to bind (e.g., read/write channels for PLC registers).
   
3. Enter the publishing device's IP:port (e.g., 192.168.110.158:80).
   
4. Complete binding and verify data synchronization.
   

VI. Data Display and Conversion

1. Convert data read from PLCs to other formats:
   • Select a component (e.g., text box) and click Data Conversion in the property panel.
     
2. In the function editor, select a conversion function (e.g., toFixed(2) for two decimal places).
   
3. Apply the conversion and test with real-time data.
   

VII. Data Interception

1. Intercept data from PLCs (e.g., retain two decimal places):
   • Select the data component and open the Data Interception settings.
     
2. Configure the interception rule (e.g., parseFloat(value).toFixed(2)).
   
3. Verify the intercepted data in the view.
   

VIII. Setting Events

1. Configure events (e.g., background color change based on data):
   • Select a component and go to the Events tab in the property panel.
     
2. Click Add Event, select a trigger condition (e.g., "Value Change").
   
3. In the action configuration, set "Background Adjustment" and define the color logic (e.g., value > 50 ? 'red' : 'green').
   
4. Save and test the event trigger.
   

IX. Presentation Document

Download link for demonstration files:
Xvisual演示案例Demo

Function Introduction

1. Project Basics

1.1 Project Creation

Xvisual configurations are project-based. A project is a set of files in various formats stored in the project directory. To create or edit a project, use the Administrator application. When Administrator starts, the Start Page displays buttons to create a new project or open an existing one.

In the new project pop-up window, enter the project name, select the creation location, and choose a template (an existing project can be used as a template to define initial configurations for the new project).

1.2 Project Structure

The project structure is displayed in the Project Explorer on the left side of the main Administrator window, including:

• System Configuration: Manages users, roles, communication nodes, devices, and point locations.
• Application Instance: Manages actually connected device instances.
• View Management: Manages all component views.
• Resource Management: Includes image management.
  
  

1.3 General Project Configuration Sequence

When starting with Xvisual, follow the recommended sequence below. Adjust the order for efficiency after understanding application dependencies.

1.3.1 Creating a Project

Create a new project or open an existing one in the Administrator application.

1.3.2 Creating a Communication Node

After creating/reopening a project, add a communication node via the toolbar or wizard:

1. Toolbar Method: Click the communication node icon.
   
2. Wizard Method: Use the configuration wizard.
   
3. Settings Interface: Configure the node name, protocol, and connection parameters.
   

1.3.3 Creating a Device

After establishing the communication node, add a device via the toolbar or wizard:

1. Toolbar Method: Click the device icon.
   
2. Wizard Method: Use the device creation wizard.
   
3. Settings Interface: Set the device name, select the device type and communication node.
   

2. Communication Node

2.1 Creating a Communication Node

• Toolbar/Wizard Method: As shown in 1.3.2.
• Settings Interface: As shown in 1.3.2.

2.2 Communication Node Management

Click Communication Node Management in System Settings to view all existing nodes.

3. Device

3.1 Creating a Communication Device

After establishing the communication node, add a device via the toolbar or wizard (steps as in 1.3.3).

4. Point Location

A point location is an entity with an ID and name, associated with current/historical data and events (synonyms: variable, tag in other systems).

4.1 Creating a Point Location

After establishing the device, add a point location via the toolbar or wizard:

1. Toolbar Method: Click the point location icon.
   
2. Wizard Method: Use the point location creation wizard.
   
3. Step 1: Select Device: Choose the communication node and device for the new point location.
   

5. View

A view is a data representation in the Webstation application.

5.1 Creating a View

1. Create view files/folders in the Views section of the project:
   • Right-click the Explorer node in Views and select New File or New Folder.
     
2. For a new file, enter the name in the pop-up and click Save (prompted if the name already exists).
   
3. The new view opens in the web-editor canvas, where you can select container components and configure properties/events on the right panel.
   

5.2 View File Management

5.2.1 Adding a Folder

Select New Folder, enter the name, set display properties, and click Save.

5.2.2 Folder Editing

1. To rename a view file or folder in the Views section, right-click its Explorer node and select Edit from the context menu.
   
2. In the pop-up Rename window, modify the file name/status and click Save.
   • Note: A view being edited cannot be renamed; close it first.
     

5.3 Configuration Editor

5.3.1 Overall Layout

The XVisual page view – Configuration Editor consists of three parts:

• Component Tree (left), Content Area (middle), Property Bar (right).
  

5.3.2 Component Tree

Located on the left (default to expanded view), containing:

• Component List, View Structure, Source Code.
  

5.3.2.1 Components

Basic units for drawing, provided as an official function library.

• General Operations:
  1. Drag Component to Canvas:
     • Switch to the Components tab in the left panel, find the component, and drag it to the canvas.
  2. Configure Component:
     • Properties: Select the component and enter details in the right panel.
     • Data Binding: In the Data tab, select channels and set conversion rules.
     • Appearance: Set styles in the Appearance tab or via custom CSS.
     • Events: Define triggers/actions in the Events tab.
  • Fuzzy search supports locating components by keyword.
    

5.3.2.2 View Structure

The hierarchy of all components in the editor:

1. Switch to the Components tab and click View Tree.
   
2. Use keyword search to locate components.
   

5.3.2.3 Source Code

The JSON-formatted source code of components:

1. Switch to the Components tab and click Source Code.
2. Click a component to view its source code, editable for properties (e.g., name, font size).
   

5.3.3 Canvas

The central drawing area, with scrollbars if oversized. To clear it:

1. Select the outermost component (Free Container) and click Delete/Empty.
   

5.3.4 Property Bar

Located on the right (default to expanded view), containing:

• Properties, Appearance, Events.

5.3.4.1 Properties

Basic and data information (varies by component).

5.3.4.2 Appearance

Style settings (background, position, custom CSS).

5.3.4.3 Events

User-defined triggers (e.g., value change, focus):

• Operations:
  1. Add an event by selecting a trigger condition (e.g., "Value Change").
  2. Configure actions (pop-up, JS, command issuance).
• Event Types:
  • Pop-up Messages: Open/close pop-up, message reminder.
  • Component Messages: Visibility, availability, state, variable assignment, background adjustment.
  • Others: Custom JS, command issuance.

5.4 Component List

5.4.1 Text Input Box

A form component for text input/viewing, supporting types: text, email, password, URL (email type auto-verifies format).

• Operation Examples:

  5.4.1.1 Read Channel Binding

  1. Complete free container channel binding first.
  2. Click the Text Input Box, then click Edit for Read Channel in the Properties > Data section.
     
  3. Select the channel in the binding interface.
     

  5.4.1.2 Data Conversion

  1. Click fx for Data Conversion in Properties > Data to open the function editor.
     
  2. Select a function type and variables.
     

  5.4.1.3 Max/Min Length

  1. Click the Max/Min Length button in Properties > Data to set character limits and error prompts.
     

  5.4.1.4 Required Field

  1. Click the Required button in Properties > Data.
     

5.4.2 Multiline Text Box

A text component supporting line breaks, with extended properties (counter, max words, etc.).

5.4.3 Digital Input Box

A numeric input component with min/max values, step, and precision settings.

5.4.4 Check Box

A component for multiple selections or drop-down options via source.

5.4.5 Radio Button

A component for single selection from options.

5.4.6 Switch

A toggle control with on/off states.

5.4.7 Slider

A component for selecting a value/range, supporting single/double sliders.

5.4.8 Button

A component with configurable click behaviors.

5.4.9 Text

A component for displaying text/paragraphs, supporting dynamic data via template syntax.

• Operation Examples:

  5.4.9.1 Read Channel Binding

  • Refer to 5.4.1.1 for Text Input Box.

  5.4.9.2 Data Conversion

  • Refer to 5.4.1.2 for Text Input Box.

  5.4.9.3 Max Length

  1. Set the maximum character length in the Properties panel, similar to the Text Input Box.

5.4.9.3 Max Length

1. Set the maximum character length in the property panel, similar to the Text Input Box.

5.4.10 Drop-down Box

A component for single/multiple selections with input suggestions, supporting options from sources.

• Operation Examples:

  5.4.10.1 Custom Options

  • Refer to 5.4.4.1 for Check Box custom options.

  5.4.10.2 Channel Data

  • Refer to 5.4.4.2 for Check Box channel binding.

  5.4.10.3 Option Settings

  1. Click the Drop-down Box, configure option values and height in the Advanced section of the property bar.
     

5.4.11 Progress Bar

A component for displaying percentage/progress (no events).

• Operation Examples:

  5.4.11.1 Read Channel Binding

  • Refer to 5.4.1.1 for Text Input Box.

  5.4.11.2 Data Conversion

  • Refer to 5.4.1.2 for Text Input Box.

  5.4.11.3 Default Progress

  1. Click the Progress Bar, set default progress in Properties > Data (enter values/functions).
     

5.4.12 Image

A component for displaying images, supporting static URLs or variable binding.

• Operation Examples:

  5.4.12.1 Read Channel Binding

  • Refer to 5.4.1.1 for Text Input Box.

  5.4.12.2 Data Conversion

  • Refer to 5.4.1.2 for Text Input Box.

  5.4.12.3 Image Management

  1. Access Image Management in Resource Management.
     
  2. Click Add Image Resource for single/batch uploads.
     
  3. Uploaded images appear in Icon Management.
     

  5.4.12.4 Use an Image

  1. Click the Image component, click Edit for Image File in the property bar.
     
  2. Select an image and click Save.
     

5.4.13 Container

A component for grouping multiple sub-components.

• Operation Examples:

  5.4.13.1 Margin and Border Settings

  1. Click the Container, set Margin/Border in Properties/Appearance.
     

5.4.14 Free Container

A container supporting direct sub-elements and drag-and-drop positioning.

• Operation Examples:

  5.4.14.1 Margin and Border Settings

  1. Click the Free Container, set Margin/Border in Properties/Appearance.
     

5.4.15 Status Container

A container for conditional rendering based on status.

• Operation Examples:

  5.4.15.1 Status Setting

  1. Click the Status Container, modify/add statuses in Properties.
     

5.4.16 Collapsible Panel

A panel for organizing information into collapsible sections.

• Operation Examples:

  5.4.16.1 Content Modification

  1. Click a panel section to modify content and adjust position in the property bar.
     

5.4.17 Tab

A component for content grouping via tabs.

• Operation Examples:

  5.4.17.1 Tab Editing

  1. Click the Tab, edit tab content in Properties.
     

5.4.18 Cascade Selector

A component for multi-level selection with sub-items, supporting multiple selections.

• Operation Examples:

  5.4.18.1 Custom Options

  1. Click the Cascade Selector, configure custom options in Properties > Data.
     

5.4.19 Tick Box

A simple selection component with tick/cross states.

5.4.20 Field Set

A component for embedding other components without appearance settings.

5.4.21 Tooltip

A text prompt component displayed on hover/click.

5.4.22 Iframe

A component for embedding existing web pages.

5.4.23 Card

A component for presenting information in a card layout.

5.4.24 Status Display

An icon component showing status (e.g., √ for 1, × for 0).

• Operation Examples:

  5.4.24.1 Status Change

  1. Click the Status Display, modify Default Value in Properties (1 displays √, 0 displays ×).
     

5.4.25 Step Bar

A component for displaying process steps with statuses.

• Operation Examples:

  5.4.25.1 Modify Step List

  1. Click the Step Bar, edit step subtitles/descriptions in Properties.
     

6. Instance Management

Instance management allows viewing (not modifying) running Xvisual instances.

7. Role Management

A role is a named set of permissions (permissions are assigned only to custom roles; built-in roles have hardcoded permissions).

7.1 Built-in Roles

System-defined roles with unmodifiable names/permissions:

7.2 Custom Roles

Created by project developers in the Administrator application's user table:

1. Click a blank row in the user table to create a custom role (recommended ID starting from 101).
   

8. User Management

8.1 Create a User

Create users in the Administrator application's user table by clicking blank rows:

• Default users (IDs 1–12) are created from the project template.
• XvisualWeb/XvisualComm users connect clients to the Server.
• admin/guest (built-in roles) are for system login.
  

8.2 Edit a User

Modify user name, password, or role in the user table (ID is auto-generated); click Submit to save changes.

8.3 Delete a User

Select a user in the table and click the Delete button (x) above the table.

9. Resource Management - Image Management

9.1 Add an Image

1. Access Image Management in Resource Management.
   
2. Click Add Image Resource for single or batch uploads.
   
3. Uploaded images appear in Icon Management.
   

9.2 Use an Image

1. Select an Image component, click Edit for the image file in the property bar.
   
2. Select an image in the pop-up and click Save.
   

10. Presentation Document

Download link for demonstration files:
Xvisual演示案例Demo