目录索引
5.控件详解:11.图片控件
图片控件使用说明
| 名称 | 操作 | 版本 | 日期 | 说明 | 编辑 |
| 《文本控件使用说明》 | 创建中 | V1.0 | 2019-01-17 | 第一次编辑完成，正式发布。 | lyh |
| 《图片控件使用说明》 | 修订 | V1.1 | 2020-06-30 | 补充本空间中所有属性详解 | qjj |
【目录】
一、图片控件-概述
3.1、控件属性描述
3.2、控件属性编辑
3.2.1、编辑属性
3.2.2、读属性
3.2.3、写属性
3.3 、属性详解
3.3.1、x，y属性
3.3.2、w，h属性
3.3.3、pic属性
3.3.4、time属性
3.3.5、first属性
3.3.6、effect属性
3.3.7、aph属性
3.3.8、drag属性
3.3.9、vscope属性
3.3.10、objname属性
3.3.11、id属性
3.3.12、type属性
4.1、在页面上新建图片控件
4.2、图片控件外观调整
4.3、图片控件默认显示图片设置
4.4、运行中改变图片控件显示图片
4.5、图片控件加载特效设置
4.6、图片控件移动特效使用
一、图片控件-概述
1.1、图片控件是串口屏诸多功能控件里面的其中一个。
1.2、用于在串口屏上显示图片、图案信息。
1.3、在《USART HMI》软件左侧工具箱里面，从上到下数第7个位置（如下图所示）。
注：该控件效果其他大多数控件也能现实，只需要把控件属性sta设置为图片就好了
二、图片控件-简单使用
用图片控件，做自己的第一个显示工程（如下图所示）。
三、图片控件-属性详解
串口屏所有控件操作的实质都是对属性的修改。图片控件具有的属性如下表所示。
如下图所示，当鼠标选中对应属性时，会在属性窗口的最下方出现该属性的详细描述信息。
用户可以随时调整、编辑列表中的属性参数。
注意：type和id属性由开发环境指定，用户不可修改。id可通过软件左上角置顶置底间接修改。
如上图所示的控件属性列表，可以在设备运行中随时读取。
sys0=p0.id 将图片控件p0的id号赋值给sys0变量 p0.x+=10 将控件在屏幕上的位置向右移动10个像素点。 prints p0.pic,0 将p0的图片id从串口发送出去。
注意：objname属性不可以读取。比如在事件代码中写"p0.pic=p0.objname"编译将报错。
所有绿色控件可以在运行中实时修改。
注意：因产品系列不同，属性的写权限也不完全相同。比如X系列可以在运行该过程中修改x，y属性。但是T0,K0系列不能在运行过程中修改x，y属性！
x，y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,y=0)。
T0,K0系列产品，x，y属性只能从：0–最大分辨率。不能超出屏幕显示区域。
X系列产品，x，y属性可以超出屏幕坐标范围(-6000~+6000)，但是超出屏幕将被裁减，不会显示出来。
技巧：如果想做一个控件，但是不想让用户看到，触摸到。可以把该控件放在屏幕显示区域以外。开发人员使用的时候，使用click指令，
或者绑定用户IO
w，h属性描述控件在屏幕上宽度和高度（像素大小为单位）。
T0,K0系列产品，w，h属性只能从：0–最大分辨率。不能超出屏幕显示区域。
X系列产品，x+w，y+h的值可以超出屏幕坐标范围，但是超出屏幕将被裁减，不会显示出来。
pic属性。控件背景图片属性，选择控件背景图片的ID号。仅当sta=图片时，才存在该属性。
time属性。控件特效执行时间属性。仅X系列支持，且effect设置不为0以后才存在该属性。
当设置了控件的加载特效以后，控件在time的时间内，以设置的特效方式飞到控件所在屏幕的坐标位置。
first属性。控件加载特效的优先级属性。仅X系列支持，且effect设置不为0以后才存在该属性。
first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件，将在同时被加载到屏幕上显示。
不同优先级的优先级中，将根据设置值从大到小依次完成加载。
effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。
0-立即加载;1-上边飞入;2-下边飞入;3-左边飞入;4-右边飞入;5-左上角飞入;6-右上角飞入;7-左下角飞入;8-右下角飞入
aph属性。控件半透明属性。仅X系列支持。
aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示)，为127时全显示(没有半透明效果);
drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。
vscope属性。控件内存占用属性。控件支持私有和全局属性。
当设置为全局时，控件分配的内存在所有页面都可以访问。离开当前页面后，控件属性数据也不会丢失。缺点是，占用系统总内存。
objname属性。控件名称属性。该属性在运行中不能获取。
id属性。控件id是每个控件在当前页面的唯一标识号。由系统分配，不可修改。可通过软件左上角置顶置底间接修改。
type属性。控件类型属性。由系统分别固定数据，比如图片控件属性为112。
四、图片控件-使用详解
参考文本控件
|  |
1、打开一个新的空白界面▲ | 2、点击左侧<工具箱>里面的<文本>按钮，当前页面出现一个文本框▲ |
参考文本控件
上一步我们创建了一个文本控件，现在我们编辑文本控件的外观（显示效果）。
将文本控件移显示区中心位置，并调大到能放下。
| I.新添加上“文本控件”预览 | II.摆放到指定位置并调整到需要尺寸预览 | III.操作说明 |
 |  | ▷移动位置：鼠标选中控件，拖到需要摆放的位置。 ▷调整大小：鼠标指针选中控件的任意一条边，或任意一个角，拖动即可调整大小。 其他方法：如果不想使用鼠标，也可以通过修改属性列表中的“x、y坐标”来调整位置，修改属性列表中的“宽度和高度”来调整大小。 |
文本控件背景显示指定的“一张图片”。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |     | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择图片“左图③所示”。 ▷拉动属性列表滑块 → 找到背景图片选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”，软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置图片填充背景。 其他：如何省掉第⑤、⑥、⑦步？在第④步的地方直接输入图片在资源文件中的ID，图片资源文件怎么用，请查阅【资源文件使用说明】。 注：我们的串口屏支持PNG图片，并完美抗锯齿，图片内容如果不是矩形，请使用PNG格式图片。 |
注：图片控件会根据图片id分辨率自动调整控件大小。
如果图片控件已经调用图片id再修改控件大小，会把相应图片分辨率大小一起修改。
上一部分我们讲完了控件外观的编辑和控件大小的调整，现在我们讲图片控件默认显示图片的设置。
在页面显示一张图片。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |
▲①图片选择
▲②选择ID为0的图片 | ▷点几下鼠标就完成了给"图片控件"设置显示图片。 ▷注意： 运行中是无法改变图片的大小的。即w.h属性无法赋值。如果进行赋值操作，屏幕则会返回赋值操作失败。 设计过程中如果修改控件大小，原图片的分辨率也会跟着修改。 |
4.4.1通过“按下或弹起事件”改变当前页面中图片控件“显示图片”
例(1)：按下当前页面中的按钮，让当前页面中的图片控件p0显示一张图。
按钮“弹起事件 或 按下事件”里面代码如下：
p0.pic=1
代码解释：
p0 ：当前页面中，控件名称为 p0 的图片控件
.pic ：图片控件 p0 属性列表中的其中一个属性，用于显示图片。
= ：C语言赋值符号
1 ：1 为图片id
4.4.2通过“按下或弹起事件”改变其他页面中图片控件“显示图片”
例(2)：按下当前页面中的按钮，让其他页面（页面名称叫 set）中的图片控件显示一张图。
注：p0控件属性sta必须设置为全局，否则会报错。
按钮“弹起事件/或按下事件”里面代码如下：
set.p0.pic=1
代码解释：
set ：页面名称
.p0 ：set页面中名字为 p0 的图片控件
.pic ：图片控件 p0 属性列表中的其中一个属性，用于显示图片。
= ：C语言赋值符号
1 ：1为图片id
示例(1)：串口发送数据让当前页面中的图片控件p0显示一张图。
串口发送数据代码：
Serial.print("p0.pic=1");
Serial.write(hexEND,3);
代码解释：
Serial.print(); 单片机串口发送字符串函数
"p0.pic=1" 需要发给屏的C语言字符串命令
Serial.write(); 单片机串口发送16进制函数
hexEND,3 提前定义好的元素为3个16进制 0xff 的数组
示例(2)：串口发送数据让其他页面（页面名称叫 set）中的图片控件显示一张图。
注：p0控件属性sta必须设置为全局，否则会报错。
串口发送数据代码：
Serial.print("set.p0.pic=1");
Serial.write(hexEND,3);
代码解释：
Serial.print(); 单片机串口发送字符串函数
"set.p0.pic=1" 需要发给屏的C语言字符串命令，其中 set 是页面名称。
Serial.write(); 单片机串口发送16进制函数
hexEND,3 提前定义好的元素为3个16进制 0xff 的数组
示例(1)：串口发送数据让当前页面中的图片控件p0显示一张图。
串口助手发送数据代码：
p0.pic=1
ff ff ff
| 串口助手截图 | 操作说明 |
 | ① 选择串口号（选择你电脑连接屏使用的串口号） ② 设置波特率 |
  | ③ 输入字符串指令 ④ 输入16进制结束符 |
示例(2)：串口发送数据让其他页面（页面名称叫 set）中的图片控件p0显示一张图。
注：p0控件属性sta必须设置为全局，否则会报错。
串口发送数据代码：
set.p0.pic=1
ff ff ff
| 串口助手截图 | 操作说明 |
 | ① 选择串口号（选择你电脑连接屏使用的串口号） ② 设置波特率 |
  | ③ 输入字符串指令 ④ 输入16进制结束符 |
参考文本控件
注：此功能目前只有【X3系列 和 X5系列】产品支持。
| 加载特效示意图 | 属性设置 | 操作说明 |
控件设置加载特效后，当控件所在页面刷新时，控件会按照设置的加载方式呈现出来。 注：由于本页面不支持视频，无法展示动态效果。只能用图文简要说明。不便之处敬请谅解。 |  | ▷属性设置方法： 控件加载特效默认是“立即加载”即无特效。 鼠标单击选中控件 → 在属性列表中找到“加载特效”选项（如左图①所示）并点击箭头处，会弹出下来列表（如图②所示），选择一个你想要的的加载方式，即完成控件加载特效设置。 ▷其他： 你可能已经注意到了，“加载特效”这个属性是绿色，也就是说屏在运行时加载特效是允许改变的。加载特效的改变方法和改变文本控件背景色的操作一致，唯一不同的是“属性名称不一样”参数不一样。 |
参考文件控件
文件控件移动示例：
注：此功能目前只有【X3系列 和 X5系列】产品支持。
| 加载特效示意图 | 移动指令 | 操作说明 |
过 程 太 炫 酷 无 法 展示 （请自行测试） | ① 可视化移动指令格式： move obj,starx,stary,endx,endy,first,time obj：控件名称或控件ID starx：起始坐标X stary：起始坐标Y endx：结束坐标X endy：结束坐标Y first：优先级(0-100,数字越大优先级越大) time：移动时间(单位ms) , ：分隔符 ② 无过程移动指令格式： obj.x=x obj：控件名称 .x：控件X坐标属性 =：赋值符号 x：终点x坐标 obj.y=y obj：控件名称 .y：控件X坐标属性 =：赋值符号 y：终点y坐标 | ▷ 可视化移动操作说明 ① 将 t0 控件从当前位置可视化移动到t1位置（假设页面上有一个控件叫做 t1），指令如下： move t0,t0.x,t0.y,t1.x,t1.y,0,300 代码注释：控件t0可视化移动方式，移动到t1的位置，无优先级，移动时间300ms ② 将 t0 控件从当前位置可视化移动到指定位置（位置：x坐标 200，y坐标 100），指令如下： move t0,t0.x,t0.y,200,100,0,300 代码注释：控件t0可视化移动方式，移动到x坐标为200，y坐标为100的位置，无优先级，移动时间300ms ③ 将t0移动到显示区外面去（假如水平移到最右侧外面，以4.3寸屏为例）指令如下： move t0,t0.x,t0.y,481,t0.y,0,300 代码注释：控件t0可视化移动方式，x坐标位481，y坐标保持现有坐标不变，移动事件300ms。（备注：4.3寸屏的分辨率480X272，当X坐标设置为481时，就会看到控件从当前位置向右移动到屏幕外面去，这个过程耗时300ms） ！！！注意： 可视化移动模式，最小移动时间限制到150ms，因为时间太短就看不出来移动效果了。 ▷ 无过程移动操作说明 ① 将 t0 控件从当前位置无过程移动到t1位置（假设页面上有一个控件叫做 t1），指令如下： t0.x=t1.x t0.y=t1.y 代码注释：把t1的x坐标和y坐标赋值给，t0的x坐标和y坐标。 ② 将 t0 控件从当前位置无过程移动指定位置（位置：x坐标 200，y坐标 100），指令如下： t0.x=200 t0.y=100 代码注释：给t0的x坐标和y坐标直接赋值。 ③ 将t0无过程移动到显示区外面去（水平右侧外面，以4.3寸屏为例）指令如下： t0.x=801 代码注释：给t0的x坐标直接赋值，由于y坐标不变，y坐标不用赋值。 特别说明： 控件移动只是移动位置，控件的所有功能不会因为移动而改变，非常方便有运行中移动空加需求的场景使用（例如：密码键盘、操作菜单等等） 控件移出显示区，根据自己需要使用。 另外，如果您只是想不让控件显示出来，可以用隐藏指令，不需要用移动指令。点击查阅【隐藏指令】的使用。 |
END
5.控件详解/11.图片控件.txt · 最后更改: 2020/09/17 08:56 由 tjcqiu 浏览次数:2127/2911166(本页/全站)