# BLUE Web Viewer Overview and Development Workflow

Hide Show

1. About BLUE Web Viewer
2. Web Viewer Operating Environment
3. Development Flow

## About BLUE Web Viewer

“BLUE Web Viewer” (hereafter referred to as “Web Viewer”) is a feature that runs on a display unit for sharing screen information with Web browsers on smart phones and tablets (hereafter referred to as “smart devices”) as well as on computers. Using Web Viewer, the display unit is a server, and the smart devices and computers connecting to the server are clients.

1. Clients
2. Server

Using a client, you can also perform operations on the server from a Web browser. Remote operation of the server from a client is possible when the network is set up so clients can connect to the server.

A single server can allow multiple, simultaneous client connections.

Example applications:

- Remote operation and monitoring of equipment installed with the display unit

- View the display unit screen on a large monitor

Note: For information on models that support Web Viewer, refer to the following.
Supported Model/Feature

There are many applications where Web Viewer might be required, such as interacting with machinery that is located in a hard to reach location (such as in a clean room or at the other end of a large facility), or interacting with a display unit that is configured without a display module.

Even though the Web Viewer system can support multiple clients connecting to the server and viewing the panel interface, only one client can interact with the server (touch operation) at any time.

## Web Viewer Operating Environment

Item | Description
Server | Display unit models | Supported Model/Feature
Number of simultaneous client connections | 1
Client |
Operating system | Web browser
Windows Windows Server | Google Chrome 64 or later Microsoft Edge 80 or later
iOS 13 or later iPadOS 13 or later | Safari 13 or later Google Chrome 78 or later
Android 4.4 or later | Google Chrome 72 or later
Note: Internet Explorer and Firefox are not supported.
Supported protocols | HTTP (version 1.1)
Supported languages (user interface) | English, French, German, Spanish, Italian, Portuguese, Simplified Chinese, Traditional Chinese, Korean, and Japanese

### To build a secure network to prevent unauthorized access

To build a secure network to prevent unauthorized access, see the following.

Cybersecurity

We especially recommend doing the following.

- Build a communication environment using encrypted communication (for example, VPN).
- Install the display unit on a trusted secure network and protect the display unit with a firewall.

#### Pro-face Connect

You can use Pro-face Connect to build an encrypted communication environment.

When using Pro-face Connect with Web Viewer, in the Creating an Agent settings add the port setting.

Adding port setting Adding port setting

1. In the [SiteManager] window, on the right-hand side of [Device Agents] click [Edit].
2. On the target agent, click the icon to display additional parameters.
3. In the [Extra TCP ports] field, type the port number as configured in the screen editing software, and click [Save].

Note:

- For more details on Pro-face Connect Configuration, refer Pro-face Connect Manual.
- You cannot use smart devices as Web Viewer client on an encrypted communication environment built by Pro-face Connect.

## Development Flow

1. Configuring the Server
2. Configuring User Authentication Settings

### Configuring the Server

The following describes the steps to configure the server.

Important: To increase security, we recommend you enable [Security Setting]. By enabling [Security Setting], when a client accesses the server, user authentication is required.

1. In the Project Explorer window, go to [System Architecture] and click [Target01].
2. In the Properties window, click [Advanced] tab and click [Data Access] tab.
3. Go to [Web Function Settings] and select the [Enable Web Viewer] check box.
4. Go to [Web Viewer Settings] and select the [Security Settings] check box.
5. If necessary, change the port number in [Port Number].

Note:

- The [Port Number] is shared between Web Server and Web Viewer. Valid port number is between 1024 and 65535.
- For information about individual Web Viewer settings, refer to the following.

  - Customizing Login Page and Distribution Page

  - Monopolize Operation

  - Lock Out User

  - Log Out Inactive Clients

  - Timeout for Press and Hold Operations

  - Confirming the Number of Clients

### Configuring User Authentication Settings

In the Web Viewer settings, enable [Security Setting] so that user authentication is required when a client accesses the server. Users and user groups set up in the project are used for user authentication.

Note:

- Changes to security information at run time, such as importing users and user groups, will automatically log out clients from the server, except when the [Web Viewer Settings] ➞ [Security Setting] is disabled.
- Changing the password of a single user at run time will automatically log out the associated user from a client.
- The Web Viewer client cannot make any changes to user authentication settings.

To configure user authentication:

1. Configure users and user groups. Refer to the following.
   Steps to Design (Security)
2. In the Project Explorer window, go to [Security] and click the desired user group.
3. In the Properties window, set the [Web Viewer Access Right] property.

   [Web Viewer Access Right]
   Select the access right when logging in as a client. [None]: Login is not possible. [Monitor]: View-only access. [Monitor/Operation]: View and operation access.