View HMI Screen

Overview

The View HMI Screen widget is used to display the operational interface of HMI devices in real-time. This widget allows users to monitor and observe the current status of HMI devices directly from the dashboard without switching to other platforms or applications.

• Real-time Screen Display: Display the HMI device's operational interface in real-time
• Connection Mode Selection: Supports both WebView and WebVNC connection methods
• Connection Status Monitoring: Provides step-by-step connection progress display and error diagnosis
• Traffic Monitoring: Displays a warning when traffic exceeds the limit

Style Settings

Basic

Background Color

Set the background color of the widget. Click the color picker to open the color panel, which provides:

• Preset color options
• Custom colors
• Transparency adjustment

Title

• Enable: Check the checkbox to display the title
• Title Text: Enter the title content (up to 100 characters)
• Related settings will be disabled when the title is not enabled

Font

Select the font for the title text from the dropdown menu, which provides multiple font options including:

• Default
• System fonts
• Chinese fonts

Note: This option is only available when the title is enabled.

Case & Size

• Case: Select the case style for the title text
  • Default
  • Uppercase
  • Lowercase
  • Capitalize
• Size: Adjust the title font size (Range: 10-128)

Note: This option is only available when the title is enabled.

Font Color

Set the color of the title text. Click the color picker to open the color panel. Default is #333333.

Text alignment options are provided on the right:

• Align Left
• Align Center
• Align Right

Note: This option is only available when the title is enabled.

Divider

• Enable: Check the checkbox to display a divider between the title and content (enabled by default)
• Color: Set the color of the divider (default is semi-transparent gray rgba(171, 171, 171, 0.36))
• Thickness: Adjust the thickness of the divider (Range: 1-10)

Note: This option is only available when the title is enabled.

HMI Interface

Configure the HMI device screen source to display.

Important: This widget currently only supports a single HMI device.

Add HMI

Click the "+" icon button in the upper right corner to add an HMI device screen. After selection, the system will set the HMI device as the display source for this widget.

HMI List

Added HMI devices are displayed in list form:

• Number: Displays the HMI number (e.g., #1)
• Device Name: Displays the HMI device name or hardware key
• Delete: Click the delete icon to remove the HMI device, and the system will pop up a confirmation dialog

Connect Mode

Set the connection mode to connect to the HMI device.

Select the connection mode from the dropdown menu:

• WebView: Connect using WebView mode, providing full HMI web interface functionality

  • Supports mode:
    • View Mode: Can only view the screen, cannot operate
  • Requires username and password for login

• WebVNC: Connect using WebVNC mode, providing remote desktop access functionality

  • Only requires a password for login
  • Provides full remote operation capability

Note: The choice of connection mode depends on the WebConnect service type supported by the HMI device.

Appearance

Compact Mode

Check to enable compact display mode, displaying the HMI screen with a tighter layout (enabled by default).

X

Set the horizontal position (X coordinate) of the widget on the dashboard.

• Minimum: Defined by the system
• Maximum: Dynamically calculated based on workspace size and widget width

Y

Set the vertical position (Y coordinate) of the widget on the dashboard.

• Minimum: Defined by the system
• Maximum: Dynamically calculated based on workspace size and widget height

Width

Set the width of the widget.

• Minimum: 200
• Maximum: 8192
• Default: 318

Height

Set the height of the widget.

• Minimum: 200
• Maximum: 8192
• Default: 210

User Restrictions

Object Class

Set the security access class for this widget. Only users with the appropriate permissions can view or operate this widget.

Available options:

• None (default, no restrictions)
• Class: A
• Class: B
• Class: C
• Class: D
• Class: E
• Class: F
• Class: G
• Class: H
• Class: I
• Class: J
• Class: K
• Class: L

Hide When Protected

Check to completely hide this widget when the user does not have access permissions, rather than just disabling it.

Note: This option is only available after setting the object class.

Disabled

Check to disable all interactive functions of this widget.

Note: This option is only available after setting the object class.

Usage Instructions

Initial Setup

1. Add HMI Device: Click the "+" button in the upper right corner of the HMI Interface section to select the HMI device to display
2. Select Connection Mode: Select the appropriate connection method (WebView or WebVNC) from the Connect Mode dropdown menu
3. Configure Display Settings: Adjust the title, background color, and other basic styles according to your needs
4. Adjust Size and Position: Adjust the position and size of the widget through the Appearance settings to fit the dashboard layout
5. Set Permission Control: If needed, control the widget's access permissions through the User Restrictions feature

View Mode Operation

In dashboard view mode:

1. Connection Initialization: The widget will automatically perform connection initialization and display progress for 6 steps:

   • Steps 1-2: Check HMI device connection status
   • Step 3: Wait for WebConnect service
   • Step 4: Initialize connection interface
   • Step 5: Attempt auto-login
   • Step 6: Complete connection

2. Login Operation:

   • WebView Mode: Clicking the screen will pop up a login form, select user mode and enter password
   • WebVNC Mode: Clicking the screen will pop up a login form, enter VNC password
   • After successful login, the password will be remembered in the current browser session for automatic login next time

3. Logout Operation:

   • Click the screen again to open the login dialog
   • Click the "Logout" button to log out
   • After logout, the saved password will be cleared and the connection will be reinitialized

4. Reconnect:

   • If the connection fails, a refresh button will appear in the upper right corner
   • Click the refresh button to retry the connection

5. Traffic Warning:

   • When the HMI device traffic exceeds the limit, a warning icon will appear in the upper right corner
   • At this time, the connection may become slow or unstable

Error Diagnosis

When an error occurs during the connection process:

• The step progress will stop at the error step and be marked in red
• The lower right corner will display a "Need help? Click here" link
• Click to view detailed troubleshooting suggestions