目录索引
5.控件详解:5.双态按钮控件
双态按钮控件使用说明
| 名称 | 操作 | 版本 | 日期 | 说明 | 编辑 |
| 《双态按钮控件使用说明》 | 创建中 | V1.0 | 2019-02-18 | 第一次编辑完成，正式发布。 | yxj |
| 《双态按钮控件使用说明》 | 修订 | v1.1 | 2020-06-22 | 补充本控件中所有属性详解 | 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、spax，spay属性
3.3.4、isbr属性
3.3.5、txt属性
3.3.6、txt_maxl属性
3.3.7、style属性
3.3.8、xcen，ycen属性
3.3.9、pco,pco2属性
3.3.10、bco,bco2属性
3.3.11、pic,pic2属性
3.3.12、picc,picc2属性
3.3.13、font属性
3.3.14、borderc,borderw属性
3.3.15、sta属性
3.3.16、time属性
3.3.17、first属性
3.3.18、effect属性
3.3.19、aph属性
3.3.20、drag属性
3.3.21、vscope属性
3.3.22、objname属性
3.3.23、id属性
3.3.24、type属性
3.3.25、val属性
3.3.26、disup属性
4.1、在页面上新建双态按钮控件
4.2、双态按钮控件外观调整
4.3、双态按钮控件默认显示内容设置
4.6、双态按钮控件加载特效设置
4.7、双态按钮控件移动特效使用
一、双态按钮控件-概述
1.1、双态按钮控件是串口屏诸多功能控件里面的其中一个。
1.2、用于在串口屏上触摸反馈。
1.3、在《USART HMI》软件左侧工具箱里面，如下图所示。
二、双态按钮控件-简单使用
用双态按钮控件，做自己的第一个触摸工程（如下图所示）。
控件为按下状态时显示”on”,控件为弹起状态时显示”off”，bt0.val为控件状态值，系统自动记录的，默认颜色如下图
三、双态按钮控件-属性详解
串口屏所有控件操作的实质都是对属性的修改。双态按钮控件具有的属性如下表所示。
如下图所示，当鼠标选中对应属性时，会在属性窗口的最下方出现该属性的详细描述信息。
用户可以随时调整、编辑列表中的属性参数。
注意：type和id属性由开发环境指定，用户不可修改。id可通过软件左上角置顶置底间接修改。
如控件属性表所示的属性，可以在设备运行中随时读取。
sys0=bt0.id 将双态按钮控件bt0的id号赋值给sys0变量 bt0.x+=10 将双态按钮在屏幕上的位置向右移动10个像素点。 prints bt0.txt,0 将bt0的文本内容从串口发送出去。
注意：objname属性不可以读取。比如在事件代码中写"bt0.txt=bt0.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的值可以超出屏幕坐标范围，但是超出屏幕将被裁减，不会显示出来。
屏幕上显示字符与字符之间的距离。单位：像素点。
以等宽字体宋体，汉字字库距举例说明。
注意：USART HMI升级到0.55版本以后，全系列支持非等宽字体。当用户使用非等宽字体以后，字体排版效果与电脑上的效果一致。
如果字体本身宽度不一致，导致排版效果有差异时，需要用户自行调整页面布局或者使用等宽字体。
isbr属性表示在显示文本内容，一行显示不完所有字符时，是否自动换行到下一行继续显示。
参考文本控件，如下图所示：
| 禁止自动换行 | 使能自动换行 |
 |  |
txt属性。即字符串属性。用于存放双态按钮控件的显示内容。
txt_maxl属性表示最多可以显示多少个字符。
注意1：在界面编辑时，如果输入txt属性中的字符数量超过了txt_maxl将提示错误。
注意2：如果在运行中，给txt写入超过txt_maxl的字符数量，超出的部分将丢失。
例如：txt_maxl=10。在事件窗口中写：b0.txt="0123456789ABCD”。运行后的实际效果txt的值为“0123456789”，“ABCD”将被丢失。
style属性。双态按钮控件的外观显示风格，可以选择如下图几种模式,仅当sta=单色时，才存在该属性。
xcen，ycen属性用于设置字符在控件区域显示时的对齐方式。分别可以选择：靠左/靠上、居中、靠右/靠下。默认为居中方式。
pco属性。控件的字体颜色属性，RGB565的颜色值。
pco2属性。控件被按下时的字体颜色属性，RGB565的颜色值。
bco属性。控件背景色属性，RGB565的颜色值。仅当sta=单色时，才存在该属性。
bco2属性。控件被按下时的背景色属性，RGB565的颜色值。仅当sta=单色时，才存在该属性
pic属性。控件背景图片属性，选择控件背景图片的ID号。仅当sta=图片时，才存在该属性。
pic2属性。控件被按下时的背景图片属性，选择控件背景图片的ID号。仅当sta=图片时，才存在该属性。
picc属性。控件背景切图图片属性，选择控件背景切图图片的ID号。仅当sta=切图时，才存在该属性。
picc2属性。控件被按下时的背景切图图片属性，选择控件背景切图图片的ID号。仅当sta=切图时，才存在该属性。
注意：选择的被切图图片尺寸必须等于对应串口屏的分辨率。否则，可能会导致显示花屏！
font属性。控件的字库属性。选择控件字库的ID号。
borderc属性。双态按钮控件的边框颜色,仅当style=边框时，才存在该属性。
borderw属性。双态按钮控件的边框大小,仅当style=边框时，才存在该属性。
sta属性。背景填充方式属性。目前支持4种背景方式：
1、切图——从指定与串口屏分辨率相同的全屏图片上，自动窃取控件窗口区域的图片内容作为控件背景。
2、单色——用户指定单一的RGB565颜色值作为控件背景。
3，图片——用户指定一张图片作为控件的背景。
4，透明——即无背景，以透明的方式直接在控件区域写字符信息。仅X系列支持。
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属性。控件类型属性。由系统分别固定数据，比如双态按钮控件属性为53。
val属性。当前双态按钮状态属性，比如按下弹起一次，val自动=1，控件锁定在被按下状态，再按下弹起一次，val自动=0，控件锁定在弹起状态。
disup属性。产生拖动后是否禁用弹起事件:0-否;1-是。默认为否，即拖动的时候是会触发弹起事件。仅当drag=是时，才存在该属性
四、双态按钮控件-使用详解
上一步我们创建了一个双态按钮控件，现在我们编辑该控件的外观（显示效果）。
参考文本控件
将文本控件移显示区中心位置，并调大到能放下。
| I.新添加上“文本控件”预览 | II.摆放到指定位置并调整到需要尺寸预览 | III.操作说明 |
 |  | ▷移动位置：鼠标选中控件，拖到需要摆放的位置。 ▷调整大小：鼠标指针选中控件的任意一条边，或任意一个角，拖动即可调整大小。 其他方法：如果不想使用鼠标，也可以通过修改属性列表中的“x、y坐标”来调整位置，修改属性列表中的“宽度和高度”来调整大小。 |
参考文本控件
文本控件背景显示指定的“单一颜色”，（例：显示蓝色）。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |    | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景色属性“左图①所示”→ 点击颜色选择框“左图②所示”→ 点击选择更多“左图③所示”，软件弹出配色对话框，点击蓝色“左图④所示”→ 点击确定“左图⑤所示”。即完成此文本控件的背景色修改成蓝色。 其他：控件单色背景填充时还能设置边框效果，根据属性列表里面，相应的属性项进行设置。 注： 当颜色被使用过后，下次点击选择颜色的时候，使用过的颜色会直接出现在“选择颜色”的下拉选项中。 控件属性如果不清楚怎么使用，请查阅“认识控件中的【控件属性讲解】” |
双态按钮被按下时的背景色设置
与上面的方法一样，只是改变的不是bco属性，是bco2属性。
双态按钮控件背景显示指定的“一张图片”，
参考文本控件的背景图片填充，如下图
| I.显示预览 | II.属性设置 | III.操作说明 |
 |     | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择图片“左图③所示”。 ▷拉动属性列表滑块 → 找到背景图片选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”，软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置图片填充背景。 其他：如何省掉第⑤、⑥、⑦步？在第④步的地方直接输入图片在资源文件中的ID，图片资源文件怎么用，请查阅【资源文件使用说明】。 注：我们的串口屏支持PNG图片，并完美抗锯齿，图片内容如果不是矩形，请使用PNG格式图片。 |
双态按钮被按下时的背景图片设置
与上面方法一样，只是改变的不是pic属性，是pic2的属性，
参考文本控件背景填充，显示指定的“一张图片中的某一部分”。
| I.显示预览 | II.属性设置 | III.操作说明 |
▲文本控件切图填充效果
▲用于文本控件切图填充的全屏图片 |    | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择切图“左图③所示”。 ▷拉动属性列表滑块 → 找到背景图片切图选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”，软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置切图填充背景。 其他：如何省掉第⑤、⑥、⑦步？在第④步的地方直接输入图片在资源文件中的ID，图片资源文件怎么用，请查阅【资源文件使用说明】。 注：控件背景选择切图填充时，用于切图填充的图片必须是全屏图片（即图片分辨率和屏分辨率相同、显示方向相同）。 |
双态按钮被按下时的背景切图设置
与上面方法一样，只是改变的不是picc属性，是picc2的属性，
参考文本控件
文本控件背景为透明背景。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |  | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择透明“左图③所示”。即完成了控件背景透明。 注：控件背景填充方式使用透明填充时，控件只有内容会显示，自己没有背景，控件背后是什么就能看到什么，如左侧显示预览效果。 |
上一部分我们讲完了控件外观的编辑和控件大小的调整，现在我们讲控件默认显示内容的设置。
参考文本控件
在页面的中间显示【hello word！拥抱世界！】。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |
▲①背景选择“蓝色”填充
▲②字体颜色选择“白色”
▲③设置字符长度
▲④输入要显示的字符 | ▷点几下鼠标就完成了给"文本控件"设置显示初始状态。 ▷注意： 字符长度属性，这里设置的是文本控件"txt属性"能显示的字符的最大长度。 意思就是，输入字符的长度只能 ≤ 这个值，或者说需要显示多少个字符，这个长度值必须≥你要显示的字符长度。 一个英文字母是1个字符，包括英文标点符号；一个中文汉字是2个字符，包括中文标点符号。 |
参考文本控件
调整文本控件大小让【hello word! 拥抱世界！】分两行显示，。
| I.显示预览 | II.属性设置 | III.操作说明 |
 | 在上一个显示的基础上只改一点即可。
▲①自动换行属性，选择"是"。 | 和上一小点，重复的地方就不讲了； ▷我们要做的只有2步： ① 修改控件“自动换行”属性，选择“是”； ② 是调整控件尺寸，用鼠标拖动控件边沿即可。 |
例(1)：按下弹起一次当前页面中的按钮bt0时,灯亮，再按下弹起一次，灯灭
上面效果是通过2张图片实现的，如下图
可以通过判断bt0.val的值，得到bt0的状态
示例(1)：单片机发送数据让当前页面中的双态按钮显示按下状态，但不执行按下和弹起事件里的代码。
单片机发送代码：
Serial.print("bt0.val=1");此时控件为被按下状态，仅显示
示例(1)：串口助手发送数据让当前页面中的按钮控件执行按下状态。
串口助手发送数据代码：
bt0.val=1
ff ff ff
| 串口助手截图 | 操作说明 |
 | ① 选择串口号（选择你电脑连接屏使用的串口号） ② 设置波特率 |
  | ③ 输入字符串指令 ④ 输入16进制结束符 |
例(1)：按下当前页面中的按钮bt0，发送16进制数据 ：贞头 "AA" 数据 "11"贞尾 "DD"。
也可以用prints发送控件变量数据，如下图
参考文本控件
注：此功能目前只有【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.控件详解/5.双态按钮控件.txt · 最后更改: 2020/09/17 08:53 由 tjcqiu 浏览次数:2870/3147292(本页/全站)