VisualHMI - 图片轮选控件

什是图片轮选控件？

图片轮选控件是一种基于手势滑动操作的交互组件，允许用户通过左右滑动屏幕，在有限的空间内循环展示一组预设好的图片。该控件非常适合用于在紧凑界面中高效展示多条视觉内容，并支持直观选择特定项目。在 VisualHMI 的图片轮选控件中，“选取图标”功能的启用与否，本质是两种完全不同的数据映射架构，适用于截然不同的工业交互场景。

🔷 模式一：基础轮播模式（未勾选“选取图标”）

📌 核心机制 : 假设监视地址为LW1000，如下所示

图库帧 = 选项总数：图库含 10 帧 → 系统自动识别为 10 个轮选项（索引 0～9）
单地址驱动：LW1000 直接存储当前选中项索引（0～9），值变化即切换对应帧
静态映射：选项 i 永久绑定图库帧 i，无运行时动态调整能力

🔷 模式二：动态图标映射模式（勾选“选取图标”）

📌 核心机制 : 假设监视地址为LW1001，如下所示

假设监视地址为LW1001，如下所示：

双层解耦架构：假设图标
- 选项层：LW1002 定义总选项数（如 3）
- 图标层：LW1003～LW1005 分别指定各选项的当前图标帧索引
动态帧池：图库 36 帧（0～35）被划分为 3 个逻辑组（每组 12 帧）
- 选项 0：帧 0～11（由 LW1003 动态指向）
- 选项 1：帧 12～23（由 LW1004 动态指向）
- 选项 2：帧 24～35（由 LW1005 动态指向）
双维度控制：
- 滑动切换选项 → 修改 LW1001（选中项索引）
- 更新选项状态 → 修改 LW1003+N（该选项的图标帧）

维度	基础轮播模式	动态图标映射模式
数据架构	单层：帧=选项	双层：选项 + 动态图标帧
寄存器占用	1 个（当前索引）	1 + 1 + N 个（索引+总数+各选项帧）
运行时灵活性	❌ 仅能切换选项	✅ 可独立更新任一选项的视觉状态
图库设计	帧数=总选项数	帧数 ≥ 选项数 × 每选项状态数
控制范围	全局切换	精细化到每个选项的子状态
典型应用	静态内容展示	多状态设备监控、工艺阶段指示

适用范围：VisualHMI - HMI&M系列&Dx系列

例程下载链接：VisualHMI - 图片轮选(点击下载)

1.属性介绍

本章节重点介绍图片轮选控件的属性，分为功能设置和外观设置

1.1.功能设置

图片轮选控件的功能设置，属性如下所示

监视地址：控件绑定的变量地址；
选取图标：设置控件通过地址控制不同选项的图标状态。
候选项：设置默认显示的项数，可设置3项或5项；
触摸滑动：设置控件图片是否可通过滑动切换图标状态，可设置启用或禁用；
- 滑行惯性：开启后，滑动松开后控件会有惯性滚动效果；
- 对齐：设置图片轮选滚动时，图片内容是否对齐；
点击切换：设置控件选项是否可以通过直接点击选中；
自动跟踪：设置控件图片动态跟踪数值变化；
- 跟踪时间：图片动态跟踪滚动的时间，单位秒；

1.2.外观设置

图片轮选控件的外观属性，属性如下所示

图库：设置图片轮选内容的图片；
方向：设置图片轮选控件图片滚动的方向；
宽度比例：图片轮选选项图片长宽的比例，范围20~80；
缩放比例：图片轮选两端选项图片大小的缩放比例，范围20~100；
偏移比例：两端图片高度的偏移，范围-100~100。

2.应用案例

2.1.基础轮播模式（未勾选“选取图标”）

基础轮播模式是“所见即所得”的轻量方案，适用于内容固定、交互简单的展示型场景；实现说明如下所示：

2.1.1.工程配置

画面中添加图片轮选控件，属性配置如下所示：

监视地址：LW1000;
候选项：3；
触摸滑动：启用；
滑行惯性：√；
对齐：√；
点击切换：启用；
自动跟踪：√；
跟踪时间：静态；
图库：
方向：左右；
宽度比例：40；
缩放比例：50；
偏移比例：0；

2.1.2.运行预览

运行虚拟屏，图片轮选控件，索引值对应变化，如下所示：

2.2.动态图标映射模式（勾选“选取图标”）

动态图标映射模式是面向工业自动化的高阶交互架构，通过“选项索引 + 图标帧指针”的双寄存器设计，实现说明如下所示：

2.2.1.工程配置

画面中添加图片轮选控件，属性配置如下所示：

监视地址：LW1001;
选取图标：√；
候选项：3；
触摸滑动：启用；
滑行惯性：√；
对齐：√；
点击切换：启用；
自动跟踪：√；
跟踪时间：静态；
图库：
方向：左右；
宽度比例：40；
缩放比例：50；
偏移比例：0；

2.2.2.选取图标地址设置

启用选取图标，监控地址+1：总选项数目；监控地址+1+N：选项N对应图标序号；启用选取图标，需要对地址进行初始化：

function on_init()
    set_uint16(VT_LW, 0x1002, 3)     --设置总选项数目为3
    set_uint16(VT_LW, 0x1003, 0*12)  --设置选项1的图标起始帧对应图标帧的序号
    set_uint16(VT_LW, 0x1004, 1*12)  --设置选项2的图标起始帧对应图标帧的序号
    set_uint16(VT_LW, 0x1005, 2*12)  --设置选项3的图标起始帧对应图标帧的序号
end

地址0x1002写入3，设置选取图标数为3，控件滑动图标数为3，切换选项1的图标状态，通过对地址0x1003写入0~11进行切换。切换选项2的图标状态，通过对地址0x1004写入12~23进行切换。切换选项3的图标状态，通过对地址0x1005写入24~35进行切换。

2.2.3.运行预览

运行虚拟屏，滑动选择控件，图标对应变化，如下所示：

12 VisualHMI-图片轮选控件