# 使用Web Viewer客户端

警告
意外的设备操作 当使用诸如 Web Viewer 的远程监视功能时，在执行任何远程设备操作之前，请先从远程站点获取确认并亲眼确认收据。 如果未能遵守本说明，可能会导致人员死亡、重伤或设备损坏。

隐藏显示

1. 来自客户端的连接
2. 登录页面
3. 分布页面
4. 使用CGI参数指定的模式
5. Web Viewer客户端应用程序中已保存的配置
6. 屏幕显示区域中可用手势
7. 有关使用Web Viewer客户端应用程序的注意事项

## 来自客户端的连接

下面介绍如何从客户端连接到服务器。

### 从客户端连接

要从客户端访问 Web Viewer，请在支持的 Web 浏览器中输入 Web Viewer URL。根据型号的不同，可以使用 HTTP 或 HTTPS。有关支持 HTTPS 的型号的更多信息，请参阅以下内容。
支持的型号/功能列表

http://<显示 IP 地址或域名>:<端口号>/webviewer/index.html

https://<显示 IP 地址>:<端口号>/webviewer/index.html

示例:

- 使用 IP 地址
  http://192.168.1.100:8082/webviewer/index.html
  https://192.168.1.100:8082/webviewer/index.html
- 使用域名
  http://hmi1.**.com:8082/webviewer/index.html

注：

- URL中不能省略端口号。在冒号之后，输入[端口号]属性值。有效端口号介于 1024 和 65535 之间。
- 您可在URL中省略"index.html"。

  示例) | http://192.168.1.100:8082/webviewer/
  | http://hmi1.**.com:8082/webviewer/

- 您可在URL中添加CGI参数。添加CGI参数时，不能在URL中省略"index.html"。有关CGI参数的信息，请参阅以下内容。
  使用CGI参数指定的模式
- 自从添加了对 HTTPS 的支持后，URL 协议重定向的行为取决于多种因素，包括浏览器设置、缓存数据和地址类型。
  为避免意外重定向或连接问题，请在收藏或输入 URL 时始终指定完整的 URL，包括协议 (http:// 或 https://)。
  例如，使用:
  https://192.168.1.100:8082/webviewer/index.html
- 请确认浏览器与自动 HTTPS 重定向相关的安全设置，以确保行为一致。
- 当客户端使用 HTTPS 访问 Web Viewer 时，客户端设备上需要安装 SSL 证书。有关如何安装 SSL 证书的信息，请参阅以下内容。
  如何在客户端安装 SSL 证书
- 当服务器与客户端之间的连接断开时，客户端将尝试以与断开连接之前相同的操作模式(监控模式或操作模式)重新连接到服务器。
- 如果由于通信问题，工程更新或是完全不同的工程而导致客户端无法重新连接到服务器，将会显示错误消息。有关错误消息，请参阅以下内容。
  Web Viewer客户端应用程序所显示错误

重要事项:

- 为保持客户端和服务器之间连接的活动状态，焦点需放在客户端应用程序上。
  例如，以下将关闭客户端/服务器连接：
  - 如果从计算机连接，将焦点移到其他应用程序。
  - 如果从计算机连接，在Web浏览器中打开其他选项卡。
  - 如果从计算机连接，使用Microsoft Edge打开浏览器设置，例如浏览器历史记录。
  - 如果通过智能设备连接，移至主屏幕或进入休眠状态。

根据启用或禁用 Web Viewer [Security Setting] 属性的不同，操作有所不同，如下所示。

#### 禁用安全性时

如果从Web浏览器打开上述URL，分布页面将显示在Web浏览器中。

分布页面

#### 启用安全性时

如果从Web浏览器打开上述URL，则会显示登录页面。

登录页面

使用与将[远程访问权限]属性设置为[监控]或[监控/操作]的用户组关联的用户的用户名和密码登录。

如果输入了未注册的用户名或密码，或者您尝试使用与某个用户组关联的用户名登录，且该用户组的[远程访问权限]属性设置为[无]，则会出现错误消息，连接被拒绝。

注： 无论登录成功与否，都会在操作日志中生成登录历史记录。

## 登录页面

如果在Web Viewer设置中启用了[安全设置]，从客户端连接到服务器时，将显示登录页面。

1. 更改语言
2. 用户名
3. 密码
4. [登录]按钮

输入有效的用户名和密码，然后单击[登录]以查看分布页面（如下）。

注：

- 有关配置登录页面的信息，请参阅以下内容。
  自定义登录页面和分发页面
- 有关设置允许的登录尝试次数以及其他登录参数的信息，请参阅以下内容。
  锁定用户

## 分布页面

分布页面显示服务器屏幕。

# | 描述
A | [工具栏] 工具栏列出了可执行的各种操作。
图标 | 描述
| 更改分布页面模式。当用户具有监视/操作访问权限时可用，此按钮在监视模式和操作模式之间切换。
| 刷新。刷新内部通讯连接。
| 更改字体大小。显示菜单，可从中选择字体大小（80％，85％，90％，95％，100％，105％，110％，115％或120％）。此设置更改屏幕显示区域中文本及图形对象中文本的字体大小。
| 更改缩放模式。显示菜单，可从中选择如何显示屏幕显示区域[保持长宽比缩放]或[固定]。
| 切换语言。显示菜单，可从中选择客户端用户界面的当前语言：[英语]，[日语]，[法语]，[葡萄牙语]，[德语]，[意大利语]，[韩语]，[简体中文]，或[繁体中文]。
| 显示/隐藏缩放级别。在[监控]模式下且[缩放模式]为[固定]时，在显示或隐藏缩放级别之间切换，该缩放级别出现在屏幕显示区域的底部。 您可将屏幕显示区域的缩放级别从40%更改到500%。 注： 除工具栏以外，如果使用其他方法进行缩放，工具栏和状态栏也可能会缩放。
| 使用此按钮隐藏工具栏和状态栏。隐藏工具栏和状态栏时，将显示加号+图标，该图标无法隐藏，但可以移动到屏幕显示区域的任何位置，因此不会干扰。触摸加号+图标再次显示工具栏和状态栏。
| 退出注销当前用户。
B | [状态栏] 状态栏显示服务器节点名称、网络状态和当前的分布页面模式。
项目 | 描述
节点名称 | 显示在[节点名称]属性中指定的服务器名称。
| 显示网络连接状态。与服务器建立连接后，图标闪烁。如果图标闪烁的时间不超过[Communication Timeout]属性中指定的秒数，则会发生通信超时。
| 显示当前分布页面模式。 :操作模式 :监控模式
C | [画面显示区域] 该区域为服务器屏幕保留。使用[保持长宽比缩放]或[固定]缩放比例缩放屏幕，以适合Web浏览器。

### 监控模式和操作模式

首次从客户端连接到服务器时，您处于监控模式。因为可以防止意外触摸屏幕，监控模式用于查看屏幕。

单击 图标切换到操作模式。在操作模式下，可与屏幕上的触摸对象进行交互。

监控模式和操作模式之间的触摸操作行为不同。有关更多信息，请参阅屏幕显示区域中可用手势。

注： 仅当用户的[Web Viewer访问权限]属性设置为[监控/操作]时，才可以更改为操作模式。有关信息，请参阅以下内容。
配置用户身份验证设置

#### 独占操作

当用户从客户端登录时，在操作模式下，触摸或单击分布页面上的屏幕显示区域，用户将开始独占操作。独占操作通过限制其屏幕操作来防止服务器和其他客户端的冲突操作。有关独占操作的信息，请参阅以下内容。

独占操作

### 不活动

与服务器的连接数量有限。为了防止客户端占用所有可用连接，Web Viewer设置为自动注销不活动的客户端。有关更多信息，请参阅以下内容。

注销非活动客户端

## 使用CGI参数指定的模式

Web Viewer中，可使用 Common Gateway Interface（CGI）参数来指定显示纵横比和通信超时。在URL末尾添加问号"？"然后是CGI参数。使用"＆"号连接多个CGI参数。

以下CGI参数可用于Web Viewer客户端应用程序。

CGI参数 | 值 | 描述
ScalingMode | AspectFit Fix | 指定如何在分布页面上显示屏幕。 'AspectFit'按比例调整屏幕的高度和宽度以适合屏幕显示区域。在'AspectFit'中, 屏幕出现在屏幕显示区域的中央。 注： 使用'AspectFit’在浏览器中显示屏幕显示区域后，最小化或最大化浏览器窗口不会更改屏幕显示区域的大小。 无论屏幕显示区域的大小如何，'Fix’均使用其尺寸显示屏幕。如果屏幕显示区域太小而无法显示整个屏幕，屏幕将被裁剪，可通过滚动条查看屏幕的其余部分。滚动时，仅屏幕显示区域向左/右或上/下移动。状态栏和工具栏不滚动。 如果屏幕显示区域大于屏幕，在屏幕外部的屏幕显示区域的右侧和底部将出现边距（空白区域）。 屏幕出现在屏幕显示区域的左上方。 注： 由于设置值存储在本地，因此如果使用CGI参数定义设置，在下次连接时，可以忽略CGI参数，分布页面将使用先前指定的设置。
CommunicationTimeout | 1至60秒 | 指定Web Viewer客户端应用程序等待服务器响应的时间（以秒为单位）。如果客户端在指定的超时时间内未收到来自服务器的响应，通信将终止，Web Viewer客户端应用程序将尝试重新连接到服务器。使用此设置可确保高质量的通信并防止由于屏幕绘制延迟和触摸响应不良而导致的无效操作。 如果未指定"CommunicationTimeout"，则使用默认值3。 注： 此通信超时用于客户端应用程序，服务器同时也具有与关联客户端的通信超时。超时值为"CommunicationTimeout"x5。 因此，如果"CommunicationTimeout"为3秒，服务器的通信超时则为15秒。

下面的示例使用IP地址为192.168.1.100的Web Viewer服务器。

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

将上述URL和CGI参数输入浏览器后，将建立连接，以便：

- 屏幕适合屏幕显示区域
- 服务器和客户端之间的通信必须在3秒钟内完成，否则将发生通信超时错误。

注：

- CGI参数区分大小写。

- 如果输入无效的CGI参数，该参数将被忽略并使用默认设置。

## Web Viewer客户端应用程序中已保存的配置

使用Web Viewer客户端应用程序时，下面列出的配置设置将在计算机或智能设备的会话之间保存。

- 注销时选择的分布页面模式（监控或操作）
- 缩放模式：[保持长宽比缩放]或[固定]（可被连接到服务器时使用的CGI参数覆盖）
- 字体大小：最后指定的字体缩放大小。
- 用户名：最后使用的用户名将插入登录屏幕。
- 语言：使用最后指定的语言显示Web Viewer客户端应用程序。

## 屏幕显示区域中可用手势

屏幕显示区域中有已禁用的操作以及已启用的操作，具体取决于您是处于监控模式还是操作模式。

客户端操作类型 | 监控模式 | 操作模式
多点触摸 | - | 禁用 注： 如果在智能设备上同时检测到三个或更多触摸，客户端将显示警告消息。触摸分布页面上的任意位置以关闭消息。
触摸（触碰） 左键单击 | 与触摸或左键单击浏览器相关的操作。 | 通知服务器触摸事件，并发生关联的触摸操作。
捏 | 不支持 注： 如果使用捏合手势进行缩放，工具栏和状态栏也可能会缩放。 | 禁用
滑动 | 如果整个屏幕未显示在屏幕显示区域中，请使用滑动向左，向右，向上或向下滚动屏幕。 | 禁用
右键单击 | 右键单击屏幕显示区域以显示Web浏览器的快捷菜单。 | 禁用
鼠标滚轮 | 如果整个屏幕未显示在屏幕显示区域中，请使用鼠标滚轮上下滚动屏幕。 按住[Shift]键，然后使用鼠标滚轮左右滚动。 当[缩放模式]为[固定]时可用，按住[CTRL]键并使用鼠标滚轮放大或缩小屏幕。 注： iOS和Android不支持鼠标滚轮操作。 | 禁用
鼠标悬上 | 禁用 | 禁用 注： 即使 Web Viewer 不支持鼠标悬停，您也可以在以下情况下从 Web Viewer 执行 'Mouse Enter' 触发: 鼠标单击或触摸对象外部，然后单击或触摸对象。 从对象外部拖动鼠标光标，然后将其放在对象上。 在对象外部按住，然后滑动手指并在对象上释放。
鼠标离开 | 禁用 | 禁用 注： 即使 Web Viewer 不支持鼠标离开，您也可以在以下情况下执行 'Mouse Leave' 触发: 鼠标单击或触摸对象，然后单击或触摸对象外部。 从对象上拖动鼠标光标，然后将其放到对象之外。 按住对象，然后滑动手指并在对象外部释放。
键盘 [F5]键（计算机） [Command]+[R] (iOS) | 刷新浏览器的登录页面或分布页面。
键盘 数字键，字母字符键，特殊字符键 | 将键盘输入发送到浏览器。 | 禁用 注： 要在数值显示、字符串显示或其他部件/形状中输入值，请使用屏幕键盘，而非常规键盘。

注：

- 当操作应用到屏幕显示区域时，上述操作将在客户端上如述工作。如果在屏幕显示区域之外进行触摸，单击或其他操作，屏幕操作不会发生。
  但是，如果您首先触摸或单击屏幕显示区域内部，然后将手指或鼠标拖到屏幕显示区域之外，当手指离开屏幕显示区域或释放鼠标按钮时，就会发生触摸'Release’触发。使用Microsoft Edge时会有例外情况，因为释放触发仅在释放鼠标按键时发生。
- 请注意，通信中断会干扰触摸操作。例如，如果您的客户端应用程序使用了按住操作，在出现通信问题时，此按住可能会无限期地继续下去。要设置按住操作的时间限制，请参阅以下内容。
  按住操作超时

## 有关使用Web Viewer客户端应用程序的注意事项

### 同一用户从多个客户端登录

即使用户已在一个客户端上登录，该用户也可以从其他客户端登录。

如果同一用户无法登录另一个客户端并被锁定，该用户已登录的客户端可以继续操作，直到连接刷新。如果发生这种情况，将出现错误消息。

### 客户端使用独占操作时，来自服务器上USB条码读取器的输入

当客户端使用独占操作时，服务器的USB条码读取器输入操作如下：

- 将数据输入目标设置为变量的条码读取器输入将成功输入。
- 将数据输入目标设置为对象的条码读取器输入将被忽略。

有关USB条码读取器的信息，请参阅以下内容。

连接USB条码读取器

### 用定点设备进行触摸

如果您的客户端设备(例如智能设备)支持触摸，请不要在触摸触摸面板的同时使用定点设备(例如鼠标或触控板)。同时使用触摸和定点设备可能会导致意外行为。你仍可使用触摸和定点设备，只是不能同时使用。

### 客户端使用独占操作时显示快捷菜单

#### 当使用 SP5000 系列 Open Box (Windows 10 IoT Enterprise 型)、IPC 系列或 PC/AT 时

当客户端使用独占操作时，在服务器上，仍可使用[CTRL] +右键单击来显示屏幕快捷菜单。

### 删除用户

在服务器上删除用户后，与该用户关联的所有信息 -如锁定信息-也会被删除。如果用户以客户端身份登录，该用户将被自动注销。

### Web浏览器部件

客户端无法显示Web浏览器部件及其内容。在Web浏览器部件将要占据的区域中会出现一个矩形，而非Web浏览器部件。请注意，此区域上的触摸操作在客户端上被禁用。如果Web浏览器部件后面有部件或形状，则无法触摸该部件或形状。

### 前端处理器（FEP）

当使用 FEP 从 Web Viewer 客户端输入日文文本时，不显示带有转换选项的下拉列表。

#### 当使用 SP5000 系列 Open Box (Windows 10 IoT Enterprise 型)、IPC 系列或 PC/AT 时

不支持FEP。仅能使用IME密钥。

### 服务器和客户端之间的字体不同

客户端屏幕使用Web浏览器字体，该字体与服务器屏幕上使用的字体不同。

左侧显示服务器上部件的示例，右侧显示客户端上的相同部件。

在服务器上，所有三个部件（数值显示部件，日期/时间显示部件和字符串显示部件）使用相同的字体。但客户端上使用的字体不同。

在客户端上，数值显示部件和日期/时间显示部件使用相同的字体，而字符串显示部件使用不同的字体。

### 客户端上的斜体文本

在客户端上垂直方向显示斜体文本时，斜体样式应用不正确。

例如，如果浏览器上使用的字体支持斜体，文本倾斜将与运行时所使用的倾斜相反。

如果浏览器上使用的字体不支持斜体，斜体则不被应用。

### Safari Web浏览器

- 在Safari中显示支持多状态的部件，例如指示灯部件，N-状态指示灯部件和单选按钮部件，且配置了多种状态闪烁颜色时，某些状态将使用错误的字体颜色。
- 在iOS和iPadOS上，Web Viewer客户端不支持Safari中的调整大小选项。
  请将此设置保持为100%，因为调整大小将无法正确显示屏幕显示区域。

### 旋转智能设备

旋转智能设备时，分布页面也会旋转，触摸操作会被释放。独占操作将持续到超时时间过去为止。

### [缩放模式]=[保持长宽比缩放]时最大化/向下还原浏览器窗口

当[缩放模式]为[保持长宽比缩放]，在Web浏览器中查看分布页面时，最大化或还原Web浏览器窗口的大小将不会更改分布屏幕的大小。要调整分布屏幕的大小，首先将[缩放模式]更改为[固定]，最大化或向下还原Web浏览器窗口，然后将[缩放模式]重新更改为[保持长宽比缩放]。

### 设有图像的部件

如果设置非常大的图像文件，可能会降低Web Viewer客户端上的绘图性能。缓慢加载的部件将会闪烁，直到完全加载为止。

您可在以下部件上设置图像：

- 复选框部件
- 日期/时间显示部件
- 指示灯部件
- N 状态指示灯部件
- 数值显示部件
- 图片显示部件
- 单选按钮部件
- 字符串显示部件
- 开关部件
- 时间显示部件
- 切换开关部件