# Using Web Viewer Clients

WARNING
UNINTENDED EQUIPMENT OPERATION When using a remote monitoring feature such as Web Viewer, prior to performing any remote equipment operations, get acknowledgment from the remote site and visually confirm receipt. Failure to follow these instructions can result in death, serious injury, or equipment damage.

Hide Show

1. Connection from Client
2. Login Page
3. Distribution Page
4. Modes Specified Using CGI Parameters
5. Saved Configuration in the Web Viewer Client Application
6. Gestures You can Use in the Screen Display Area
7. Notes on Using Web Viewer Client Application

## Connection from Client

The following describes how to connect to the server from a client.

### Connecting from a Client

From a Web browser, enter the Web Viewer URL as shown below.

http://<Display IP address or domain name>:<port number>/webviewer/index.html

IP address example) | http://192.168.1.100:8082/webviewer/index.html
Domain example) | http://hmi1.xxx.com:8082/webviewer/index.html

Note:

- You cannot omit the port number from the URL. After the colon, enter the value of the [Port Number] property. Valid port number is between 1024 and 65535.
- You can omit "index.html" from the URL.

  Example) | http://192.168.1.100:8082/webviewer/
  | http://hmi1.xxx.com:8082/webviewer/

- You can add CGI parameters to the URL. When adding CGI parameters, you cannot omit "index.html" from the URL. For information on CGI parameters, refer to the following.
  Modes Specified Using CGI Parameters
- When the connection between server and client is severed, the client tries to reconnect to the server in the same operation mode (Monitor mode or Operation mode) as prior to being disconnected.
- If the client fails to reconnect to the server, which could happen due to a communication issue, updated project, or a different project altogether, an error message appears. For error messages, refer to the following.
  Error Displayed on Web Viewer Client Application

Important:

- To keep the connection between client and server alive, focus needs to remain on the client application.
  For example, the following will close the client/server connection:

- If connecting from a computer, move the focus to a different application.
- If connecting from a computer, open a different tab in the Web browser.
- If connecting from a computer and using Microsoft Edge, open browser settings such as browser history.
- If connecting from a smart device, move to home screen or go to sleep.

Operations differ depending on the whether the Web Viewer [Security Setting] property is enabled or disabled, as follows.

#### When Security is Disabled

If you open the above URL from a Web browser, the distribution page appears in the Web browser.

Distribution Page

#### When Security is Enabled

If you open the above URL from a Web browser, the login page appears.

Login Page

Log in with the user name and password of a user associated with a user group that has its [Remote Access Right] property set to [Monitor] or [Monitor/Operation].

If an unregistered user name or password is entered, or if you attempt to log in with a user name associated with a user group with its [Remote Access Right] property set to [None], an error message appears and the connection is denied.

Note: Regardless of whether login is successful or unsuccessful, a history of the login is recorded in the operation log.

## Login Page

If [Security Setting] is enabled in the Web Viewer Settings, on connecting to the server from a client the login page is displayed.

1. Change Language
2. User name
3. Password
4. [Login] button

Enter a valid user name and password and click [Login] to view the distribution page (below).

Note:

- For information on configuring the login page, refer to the following.
  Customizing Login Page and Distribution Page
- For setting the number of allowed login attempts and other login parameters, refer to the following.
  Lock Out User

## Distribution Page

The distribution page displays the server screen.

# | Description
A | [Tool Bar] The tool bar lists various operations you can perform.
Icon | Description
| Change Distribution page mode. Available when user has Monitor/Operation access rights, this button toggles between Monitor mode and Operation mode.
| Refresh. Refreshes internal communication connections.
| Change Font Size. Display a menu from which you can select the font size (80%, 85%, 90%, 95%, 100%, 105%, 110%, 115%, or 120%). This setting changes the font size of text and text in graphical objects in the screen display area.
| Change Scaling mode. Display a menu from which you can select how to display the screen display area [Aspect Fit] or [Fix].
| Change Language. Display a menu from which you can select the current language of the client user interface: [English], [Japanese], [French], [Portuguese], [German], [Italian], [Korean], [Simplified Chinese], or [Traditional Chinese].
| Show/Hide zoom level. When in [Monitor] mode and [Scaling Mode] is [Fix], toggles between showing or hiding the zoom level, which appears at the bottom of the screen display area. You can change the screen display area's zoom level from 40 to 500%. Note: Other than the tool bar, if you zoom using other methods, the tool bar and status bar may also zoom.
| Use this button to hide the Tool Bar and Status Bar. When the tool bar and status bar are hidden, a plus + icon appears, which cannot be hidden but can be moved to any part of the screen display area so it is out of the way. Touch the plus + icon to show the tool bar and status bar again.
| Logout. Logout the current user.
B | [Status Bar] The status bar displays the server node name, network status, and current Distribution Page mode.
Item | Description
Node Name | Displays the name of the server specified in the [Node Name] property.
| Displays the network connection status. Icon flashes when connection is established with the server. A communication timeout occurs if the icon does not flash for more than the number of seconds specified in the [Communication Timeout] property.
| Displays the current distribution page mode. : Operation mode : Monitor mode
C | [Screen Display Area] This area is reserved for the server screen. The screen is scaled to fit into the Web browser using either [Aspect Fit] or [Fix] scaling.

### Monitor Mode and Operation Mode

When you first connect to the server from a client, you are in Monitor mode. Monitor mode is for viewing the screen as it prevents accidental touches on the screen.

Click the icon to toggle to Operation mode. In Operation mode you can interact with touch objects on the screen.

Touch operations behave differently between Monitor mode and Operation mode. For more information, refer to Gestures You can Use in the Screen Display Area.

Note: Changing to Operation mode is possible only when the user's [Web Viewer Access Right] property is set to [Monitor/Operation]. For information, refer to the following.
Configuring User Authentication Settings

#### Monopolize Operation

When a user is logged in from a client, in Operation mode, and touches or clicks the Screen Display Area on the Distribution Page, the user begins a monopolize operation. The monopolize operation prevents conflicting actions by the server and other clients by restricting their screen operations. For information about monopolize operation, refer to the following.

Monopolize Operation

### Inactivity

There are a limited number of connections to the server. To prevent clients from occupying all available connections, Web Viewer is set up to automatically log out clients that are inactive. For more information, refer to the following.

Log Out Inactive Clients

## Modes Specified Using CGI Parameters

With Web Viewer, you can use Common Gateway Interface (CGI) parameters to specify the display aspect ratio and communication timeout. At the end of the URL, add a question mark “?” followed by the CGI parameters. Use the ampersand “&” to concatenate multiple CGI parameters.

The following CGI parameters are available for Web Viewer client applications.

CGI Parameter | Values | Description
ScalingMode | AspectFit Fix | Specify how to display the screen on the distribution page. 'AspectFit' proportionally adjusts the height and width of the screen to fit the screen display area. In 'AspectFit', the screen appears in the center of the screen display area. Note: After the screen display area is shown in the browser using 'AspectFit', minimizing or maximizing the browser window does not change the size of the screen display area. 'Fix' displays the screen using its dimensions no matter the size of the screen display area. If the screen display area is too small to display the entire screen, the screen is cropped and scroll bars allow you to view the rest of the screen. When scrolling, only the screen display area is shifted left/right or up/down. The status bar and tool bar do not scroll. If the screen display area is larger than the screen, margins (blank areas) appear on the right and bottom parts of the screen display area outside the screen. The screen appears in the top-left part of the screen display area. Note: As setting values are stored locally, if you define a setting using CGI parameters, the next time you connect you can omit the CGI parameter and the distribution page will use the previously specified setting.
CommunicationTimeout | 1 to 60 seconds | Specify the amount of time, in seconds, the Web Viewer client application waits for a response from the server. If the client does not receive a response from the server within the specified timeout, then communication is terminated and the Web Viewer client application attempts to reconnect to the server. Use this setting to ensure quality communication and prevent invalid operations that could result from delayed screen drawing and poor touch response. If 'CommunicationTimeout' is not specified, the default value of 3 is used. Note: While this communication timeout is for the client application, the server also has a timeout for communication with the associated client. The timeout value is 'CommunicationTimeout' x 5. Therefore, if the 'CommunicationTimeout' is 3 seconds, then the server's communication timeout is 15 seconds.

The example below uses a Web Viewer server with IP address 192.168.1.100.

Example: http://192.168.1.100:8082/webviewer/index.html?ScalingMode=AspectFit&CommunicationTimeout=3

When the above URL and CGI parameters are entered into a browser, a connection is made so that:

- the screen fits into the screen display area
- communication between server and client must be completed within 3 seconds or a communication timeout error will occur.

Note:

- CGI parameters are case sensitive.

- If you enter invalid CGI parameters, the parameters are ignored and the default settings are used.

## Saved Configuration in the Web Viewer Client Application

When you use a Web Viewer client application, the configuration settings listed below are saved between sessions on your computer or smart device.

- Distribution Page mode (Monitor or Operation) that was selected when you logged out
- Scaling Mode: [Aspect Fit] or [Fix] (this can be overridden by CGI parameters used when connecting to the server)
- Font size: Last specified font scaling size.
- User name: The last used user name is inserted in the login screen.
- Language: Displays the Web Viewer client application with the last specified language.

## Gestures You can Use in the Screen Display Area

There are operations that are disabled and operations that are enabled in the screen display area, depending on whether you are in Monitor mode or Operation mode.

Types of Client Operations | Monitor Mode | Operation Mode
Multi-touch | - | Disabled Note: If three or more touches are simultaneously detected on a smart device, the client displays a warning message. Touch anywhere on the Distribution Page to close the message.
Touch (Tap) Left-click | Operation associated with touching or left-clicking the browser. | Server is notified of touch event and associated touch operation occurs.
Pinch | Not supported Note: If you zoom using pinch gesture, the tool bar and status bar may also zoom. | Disabled
Swipe | If the entire screen does not display in the screen display area, use swipe to scroll the screen to left, right, up, or down. | Disabled
Right-click | Right-click the screen display area to display the Web browser's shortcut menu. | Disabled
Mouse wheel | If the entire screen does not display in the screen display area, use the mouse wheel to scroll the screen up and down. Hold the [Shift] key and use the mouse wheel to scroll left and right. Available when [Scaling Mode] is [Fix], hold the [CTRL] key and use the mouse wheel to zoom in or out of the screen. Note: iOS and Android do not support mouse wheel operations. | Disabled
Mouse over | Disabled | Disabled Note: Even though mouse over is not supported by Web Viewer, you can execute a 'Mouse Enter' trigger from Web Viewer in the following cases: Mouse click or touch outside the object then click or touch the object. Drag the mouse cursor from outside the object then drop overtop the object. Press and hold outside the object, then slide your finger and release overtop the object.
Mouse leave | Disabled | Disabled Note: Even though mouse leave is not supported by Web Viewer, you can execute a 'Mouse Leave' trigger in the following cases: Mouse click or touch the object then click or touch outside the object. Drag the mouse cursor from the object then drop outside the object. Press and hold the object, then slide your finger and release outside the object.
Keyboard [F5] key (computer) [Command]+[R] (iOS) | Refresh the browser Login Page or Distribution Page.
Keyboard Number key, alphabetic character key, special character key | Send keyboard input to the browser. | Disabled Note: To enter values in a Numeric Display, String Display, or other part/shape, use the screen keypad, not a keyboard.

Note:

- The above operations work as described on the client when the operation is applied to the screen display area. Screen operations do not take place if touch, click, or other operations are applied outside the screen display area.
  If, however, you first touch or click inside the screen display area then drag your finger or mouse outside the screen display area, the touch 'Release' trigger occurs when your finger leaves the screen display area or when the mouse button is released. The exception is when using Microsoft Edge, as the 'Release' trigger occurs only when the mouse button is released.
- Please be aware that communication interruptions can interfere with touch operations. For example, if your client application uses a press and hold operation, the press could continue indefinitely if there are communication problems. To set a time limit for press and hold operations, see the following.
  Timeout for Press and Hold Operations

## Notes on Using Web Viewer Client Application

### Same user logged in from multiple clients

Even if a user is logged in on one client, that same user can also log in from other clients.

If that same user fails to log in on another client and gets locked out, the client with the already logged in user can continue with its operations until the connection is refreshed. If that happens, an error message will appear.

### Inputs from USB Barcode Reader on the server when a client is using Monopolize Operation

When a client is using a monopolize operation, USB barcode reader inputs to the server operate as follows:

- Inputs to a barcode reader with its data input destination set to a variable are input successfully.
- Inputs to a barcode reader with its data input destination set to an object are ignored.

For information about USB barcode readers, refer to the following.

Connecting a USB Barcode Reader

### Performing Touch with Pointing Device

If your client device, such as a smart device, supports touch do not use a pointing device such as a mouse or trackpad at the same time as touching the touch panel. Using both touch and pointing devices together could cause unexpected behavior. You can still use touch and a pointing device, just not at the same time.

### Displaying shortcut menu when a client is using Monopolize Operation

#### When Using SP5000 Series Open Box (Windows 10 IoT Enterprise Model), IPC Series, or PC/AT

When a client is using Monopolize Operation, on server you can still display the screen shortcut menu with [CTRL]+right-click.

### Deleting Users

When an user is deleted on the server, any information associated with that user—such as lockout information—is also deleted. If the user is logged in as a client, the user is logged out automatically.

### Web Browser parts

The client cannot display a Web browser part and its content. Instead of the Web browser part, a rectangle appears in the area where the Web browser part would occupy. Be aware that touch operations in this area are disabled on the client. If there is a part or shape behind the Web browser part, you cannot touch the part or shape.

### Front End Processor (FEP)

When using FEP to enter Japanese text from a Web Viewer client, the drop-down list with conversion options is not displayed.

#### When Using SP5000 Series Open Box (Windows 10 IoT Enterprise Model), IPC Series, or PC/AT

FEP is not supported. Use only IME keys instead.

### Font is different between server and client

Client screens use the Web browser font, which is not the same as the font used on the server screen.

The left-hand side shows examples of parts on the server, and the right-hand side shows those same parts on the client.

On the server, all three parts (Numeric Display part, Date/Time Display part, and String Display part) use the same font. However, the font used on the client is different.

On the client, the Numeric Display part and Date/Time Display part use the same font as each other, whereas the String Display part uses a different font.

### Italic text on the client

When displaying italicized text with vertical orientation on a client, the italics style is applied incorrectly.

For example, if the font used on the browser supports italics, the text skew will be opposite of that used by the run time.

If the font used on the browser does not support italics, italics is not applied.

### Safari Web browser

- When displaying parts that support multiple states, such as Lamp part, N-State Lamp part and Radio Button part in Safari, and blink colors are configured in multiple states, some of the states will use incorrect font colors.
- On iOS and iPadOS, the re-sizing option in Safari is not supported by Web Viewer clients.
  Keep this setting as 100%, as re-sizing will not show the screen display area correctly.

### Rotating Smart Device

When you rotate your smart device, the Distribution Page is also rotated and touch operations are released. Monopolize operation continues until the timeout elapses.

### Maximize/Restore Down browser window when [Scaling Mode] = [Aspect Fit]

When viewing the distribution page in the Web browser when [Scaling Mode] is [Aspect Fit], maximizing or restoring the size of the Web browser window will not change the size of the distribution screen. To resize the distribution screen, first change [Scaling Mode] to [Fix], maximize or restore down the Web browser window, then change [Scaling Mode] back to [Aspect Fit].

### Parts set with an image

If you set very large image files, that could reduce drawing performance on Web Viewer clients. Parts that are loading slowly flash until they are completely loaded.

You can set images on the following parts:

- Check Box part
- Date/Time Display part
- Lamp part
- N-State Lamp part
- Numeric Display part
- Picture Display part
- Radio Button part
- String Display part
- Switch part
- Time Display part
- Toggle Switch part