USART HMI 资料中心

官方技术交流QQ群:916560014

站点工具


目录索引

5.控件详解:4.按钮控件

按钮控件使用说明



名称操作版本日期
说明编辑
《按钮控件使用说明》创建中V1.02019-02-18第一次编辑完成,正式发布。yxj
《按钮控件使用说明》修订v1.12020-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、disup属性

四、按钮控件-使用详解

4.1、在页面上新建按钮控件

4.2、按钮控件外观调整

4.3、按钮控件默认显示内容设置

4.4、在按钮控件的按下或弹起事件里写逻辑

4.5、在按钮控件的按下或弹起事件里发送数据到单片机

4.6、按钮控件加载特效设置

4.7、按钮控件移动特效使用

4.8、按钮控件实例开关键


一、按钮控件-概述

1.1、按钮控件是串口屏诸多功能控件里面的其中一个。

1.2、用于在串口屏上触摸反馈。

1.3、在《USART HMI》软件左侧工具箱里面,从上到下数第5个位置(如下图所示)。

image.png


二、按钮控件-简单使用

用按钮控件,做自己的第一个触摸工程(如下图所示)。

image.png

按下按钮时显示”on,释放按钮时显示”off”,默认颜色如下图

image.png


三、按钮控件-属性详解

串口屏所有控件操作的实质都是对属性的修改。按钮控件具有的属性如下表所示。

image.png

3.1、控件属性描述

      如下图所示,当鼠标选中对应属性时,会在属性窗口的最下方出现该属性的详细描述信息。

image.png

3.2、控件属性编辑

      3.2.1、编辑属性

      用户可以随时调整、编辑列表中的属性参数。

      注意:type和id属性由开发环境指定,用户不可修改。

      3.2.2、读属性

      如控件属性表所示的属性,可以在设备运行中随时读取。

      sys0=b0.id            将按钮控件b0的id号赋值给sys0变量
      b0.x+=10              将按钮在屏幕上的位置向右移动10个像素点。
      prints b0.txt,0       将b0的文本内容从串口发送出去。

      注意:objname属性不可以读取。比如在事件代码中写"b0.txt=b0.objname"编译将报错。

      3.2.3、写属性

      所有绿色控件可以在运行中实时修改。

      注意:因产品系列不同,属性的写权限也不完全相同。比如X系列可以在运行该过程中修改x,y属性。但是T0,K0系列不能在运行过程中修改x,y属性!

3.3 、属性详解

      3.3.1、x,y属性

      x,y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,y=0)。

      T0,K0系列产品,x,y属性只能从:0–最大分辨率。不能超出屏幕显示区域。

      X系列产品,x,y属性可以超出屏幕坐标范围(-6000~+6000),但是超出屏幕将被裁减,不会显示出来。

      技巧:如果想做一个控件,但是不想让用户看到,触摸到。可以把该控件放在屏幕显示区域以外。开发人员使用的时候,使用click指令,

或者绑定用户IO

      3.3.2、w,h属性

       w,h属性描述控件在屏幕上宽度和高度(像素大小为单位)。

      T0,K0系列产品,w,h属性只能从:0–最大分辨率。不能超出屏幕显示区域。

      X系列产品,x+w,y+h的值可以超出屏幕坐标范围,但是超出屏幕将被裁减,不会显示出来。

      3.3.3、spax,spay属性 

      屏幕上显示字符与字符之间的距离。单位:像素点。

      以等宽字体宋体,汉字字库距举例说明。 

       image.png       

注意:USART HMI升级到0.55版本以后,全系列支持非等宽字体。当用户使用非等宽字体以后,字体排版效果与电脑上的效果一致。

          如果字体本身宽度不一致,导致排版效果有差异时,需要用户自行调整页面布局或者使用等宽字体。

      3.3.4、isbr属性

            isbr属性表示在显示文本内容,一行显示不完所有字符时,是否自动换行到下一行继续显示。

            参考文本控件,如下图所示:                                                  



禁止自动换行使能自动换行
image.png
image.png


      3.3.5、txt属性

           txt属性。即字符串属性。用于存放按钮控件的显示内容。

      3.3.6、txt_maxl属性

            txt_maxl属性表示最多可以显示多少个字符。

            注意1:在界面编辑时,如果输入txt属性中的字符数量超过了txt_maxl将提示错误。

            注意2:如果在运行中,给txt写入超过txt_maxl的字符数量,超出的部分将丢失。

            例如:txt_maxl=10。在事件窗口中写:b0.txt="0123456789ABCD”。运行后的实际效果txt的值为“0123456789”,“ABCD”将被丢失。

      3.3.7、style属性      

            style属性。按钮控件的外观显示风格,可以选择如下图几种模式,仅当sta=单色时,才存在该属性。

image.png

      3.3.8、xcen,ycen属性

            xcen,ycen属性用于设置字符在控件区域显示时的对其方式。分别可以选择:靠左/靠上、居中、靠右/靠下。默认为剧中方式。

      3.3.9、pco,pco2属性

            pco属性。控件的字体颜色属性,RGB565的颜色值。      

            pco2属性。控件被按下时的字体颜色属性,RGB565的颜色值。

      3.3.10、bco,bco2属性

            bco属性。控件背景色熟悉,RGB565的颜色值。仅当sta=单色时,才存在该属性。

            bco2属性。控件被按下时的背景色属性,RGB565的颜色值。仅当sta=单色时,才存在该属性

      3.3.11、pic,pic2属性

            pic属性。控件背景图片属性,选择控件背景图片的ID号。仅当sta=图片时,才存在该属性。

            pic2属性。控件被按下时的背景图片属性,选择控件背景图片的ID号。仅当sta=图片时,才存在该属性。

      3.3.12、picc,picc2属性

            picc属性。控件背景切图图片属性,选择控件背景切图图片的ID号。仅当sta=切图时,才存在该属性。

            picc2属性。控件被按下时的背景切图图片属性,选择控件背景切图图片的ID号。仅当sta=切图时,才存在该属性。

            注意:选择的被切图图片尺寸必须等于对应串口屏的分辨率。否则,可能会导致显示花屏!

      3.3.13、font属性

            font属性。控件的字库属性。选择控件字库的ID号。

      3.3.14、borderc,borderw属性

             borderc属性。按钮控件的边框颜色,仅当style=边框时,才存在该属性。

             borderw属性。按钮控件的边框大小,仅当style=边框时,才存在该属性。 

      3.3.15、sta属性

            sta属性。背景填充方式属性。目前支持4种背景方式:

            1、切图——从指定与串口屏分辨率相同的全屏图片上,自动窃取控件窗口区域的图片内容作为控件背景。

            2、单色——用户指定单一的RGB565颜色值作为控件背景。

            3,图片——用户指定一张图片作为控件的背景。

            4,透明——即无背景,以透明的方式直接在控件区域写字符信息。仅X系列支持。

      3.3.16、time属性

            time属性。控件特效执行时间属性。仅X系列支持,且effect设置不为0以后才存在该属性。

            当设置了控件的加载特效以后,控件在time的时间内,以设置的特效方式飞到控件所在屏幕的坐标位置。

      3.3.17、first属性

            first属性。控件加载特效的优先级属性。仅X系列支持,且effect设置不为0以后才存在该属性。

            first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件,将在同时被加载到屏幕上显示。

            不同优先级的优先级中,将根据设置值从大到小依次完成加载。

      3.3.18、effect属性

            effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。

            0-立即加载;1-上边飞入;2-下边飞入;3-左边飞入;4-右边飞入;5-左上角飞入;6-右上角飞入;7-左下角飞入;8-右下角飞入

      3.3.19、aph属性

            aph属性。控件半透明属性。仅X系列支持。

            aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示),为127时全显示(没有半透明效果);

      3.3.20、drag属性

            drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。

      3.3.21、vscope属性

            vscope属性。控件内存占用属性。控件支持私有和全局属性。

            当设置为全局时,控件分配的内存在所有页面都可以访问。离开当前页面后,控件属性数据也不会丢失。缺点是,占用系统总内存。

      3.3.22、objname属性

            objname属性。控件名称属性。该属性在运行中不能获取。

      3.3.23、id属性

            id属性。控件id是每个控件在当前页面的唯一标识号。由系统分配,不可修改。(可通过软件左上角置顶置底间接修改)

      3.3.24、type属性

            type属性。控件类型属性。由系统分别固定数据,比如按钮控件属性为98。

        3.3.25、disup属性

             disup属性。产生拖动后是否禁用弹起事件:0-否;1-是。默认为否,即拖动的时候是会触发弹起事件。仅当drag=是时,才存在该属性


四、按钮控件-使用详解

4.1在页面上新建按钮控件

image.png

4.2、按钮控件外观调整

上一步我们创建了一个按钮控件,现在我们编辑按钮控件的外观(显示效果)。

4.2.1调整位置和尺寸

参考文本控件

将文本控件移显示区中心位置,并调大到能放下。

I.新添加上“文本控件”预览II.摆放到指定位置并调整到需要尺寸预览III.操作说明
image.pngimage.png

▷移动位置:鼠标选中控件,拖到需要摆放的位置。

▷调整大小:鼠标指针选中控件的任意一条边,或任意一个角,拖动即可调整大小。

其他方法:如果不想使用鼠标,也可以通过修改属性列表中的“x、y坐标”来调整位置,修改属性列表中的“宽度和高度”来调整大小。


 4.2.2背景单色填充

参考文本控件

文本控件背景显示指定的“单一颜色”,(例:显示蓝色)。

I.显示预览II.属性设置III.操作说明
image.pngimage.png image.png image.png

▷鼠标单击选中控件;

▷拉动属性列表滑块 → 找到背景色属性“左图①所示”→ 点击颜色选择框“左图②所示”→ 点击选择更多“左图③所示”,软件弹出配色对话框,点击蓝色“左图④所示”→ 点击确定“左图⑤所示”。即完成此文本控件的背景色修改成蓝色。

其他:控件单色背景填充时还能设置边框效果,根据属性列表里面,相应的属性项进行设置。


注:

       当颜色被使用过后,下次点击选择颜色的时候,使用过的颜色会直接出现在“选择颜色”的下拉选项中。


       控件属性如果不清楚怎么使用,请查阅“认识控件中的【控件属性讲解】”


按钮被按下时的背景色设置

与上面的方法一样,只是改变的不是bco属性,是bco2属性。image.png

 4.2.3背景图片填充

按钮控件背景显示指定的“一张图片”,

参考文本控件的背景图片填充,如下图


I.显示预览II.属性设置III.操作说明
image.pngimage.pngimage.png image.pngimage.png

▷鼠标单击选中控件;

▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择图片“左图③所示”。

▷拉动属性列表滑块 → 找到背景图片选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”,软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置图片填充背景。


其他:如何省掉第⑤、⑥、⑦步?在第④步的地方直接输入图片在资源文件中的ID,图片资源文件怎么用,请查阅【资源文件使用说明】。


注:我们的串口屏支持PNG图片,并完美抗锯齿,图片内容如果不是矩形,请使用PNG格式图片。

按钮被按下时的背景图片设置

与上面方法一样,只是改变的不是pic属性,是pic2的属性,image.png

4.2.4背景切图填充

参考文本控件背景填充,显示指定的“一张图片中的某一部分”。

I.显示预览II.属性设置III.操作说明

image.png

▲文本控件切图填充效果


2.jpg

▲用于文本控件切图填充的全屏图片

image.pngimage.png image.pngimage.png

▷鼠标单击选中控件;

▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择切图“左图③所示”。

▷拉动属性列表滑块 → 找到背景图片切图选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”,软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置切图填充背景。


其他:如何省掉第⑤、⑥、⑦步?在第④步的地方直接输入图片在资源文件中的ID,图片资源文件怎么用,请查阅【资源文件使用说明】。


注:控件背景选择切图填充时,用于切图填充的图片必须是全屏图片(即图片分辨率和屏分辨率相同、显示方向相同)。

按钮被按下时的背景切图设置

与上面方法一样,只是改变的不是picc属性,是picc2的属性,image.png

4.2.5背景透明填充

参考文本控件

文本控件背景为透明背景。

I.显示预览II.属性设置III.操作说明
image.pngimage.pngimage.png

▷鼠标单击选中控件;

▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择透明“左图③所示”。即完成了控件背景透明。


注:控件背景填充方式使用透明填充时,控件只有内容会显示,自己没有背景,控件背后是什么就能看到什么,如左侧显示预览效果。


4.3、按钮控件默认显示内容设置

上一部分我们讲完了控件外观的编辑和控件大小的调整,现在我们讲控件默认显示内容的设置。

4.3.1基本的使用

参考文本控件

在页面的中间显示【hello word!拥抱世界!】。

I.显示预览II.属性设置III.操作说明
image.png

image.png

▲①背景选择“蓝色”填充

image.png

▲②字体颜色选择“白色”

image.png

▲③设置字符长度

image.png

▲④输入要显示的字符

▷点几下鼠标就完成了给"文本控件"设置显示初始状态。


▷注意:

字符长度属性,这里设置的是文本控件"txt属性"能显示的字符的最大长度。

意思就是,输入字符的长度只能 ≤ 这个值,或者说需要显示多少个字符,这个长度值必须≥你要显示的字符长度。

一个英文字母是1个字符,包括英文标点符号;一个中文汉字是2个字符,包括中文标点符号。


4.3.2自动换行功能的使用

参考文本控件

调整文本控件大小让【hello word! 拥抱世界!】分两行显示,。

I.显示预览II.属性设置III.操作说明
image.png

在上一个显示的基础上只改一点即可。


image.png

▲①自动换行属性,选择"是"。

和上一小点,重复的地方就不讲了;

▷我们要做的只有2步:

① 修改控件“自动换行”属性,选择“是”;

② 是调整控件尺寸,用鼠标拖动控件边沿即可。


4.4、在按钮控件的按下或弹起事件里写逻辑

4.4.1通过“按下或弹起事件”改变其他控件的值

例(1):按下当前页面中的按钮b0时进度条值+10。

image.png

 4.4.2通过单片机串口指令实现按下操作 

示例(1):单片机发送数据让当前页面中的按钮控件执行按下状态。

单片机发送代码:

Serial.print("click b0,1");

image.png

4.4.3通过串口助手改变当前页面按钮控件的状态 

示例(1):串口助手发送数据让当前页面中的按钮控件执行按下状态。

串口助手发送数据代码:

click b0,1
ff ff ff


串口助手截图操作说明
图片1.png

① 选择串口号(选择你电脑连接屏使用的串口号)

② 设置波特率

图片3.png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


4.5在按钮控件的按下或弹起事件里发送数据到单片机

4.5.1通过“按下或弹起事件”下发串口数据

例(1):按下当前页面中的按钮b0,发送16进制数据 :贞头 "AA" 数据 "11"贞尾 "DD"。

image.png

也可以用prints发送控件变量数据,如下图

image.png


4.6、按钮控件加载特效设置

参考文本控件

注:此功能目前只有【X3系列 和 X5系列】产品支持。

加载特效示意图属性设置操作说明

image.png

控件设置加载特效后,当控件所在页面刷新时,控件会按照设置的加载方式呈现出来。


注:由于本页面不支持视频,无法展示动态效果。只能用图文简要说明。不便之处敬请谅解。


image.png

▷属性设置方法:

控件加载特效默认是“立即加载”即无特效。

鼠标单击选中控件 → 在属性列表中找到“加载特效”选项(如左图①所示)并点击箭头处,会弹出下来列表(如图②所示),选择一个你想要的的加载方式,即完成控件加载特效设置。


▷其他:

你可能已经注意到了,“加载特效”这个属性是绿色,也就是说屏在运行时加载特效是允许改变的。加载特效的改变方法和改变文本控件背景色的操作一致,唯一不同的是“属性名称不一样”参数不一样。


4.7、控件移动特效使用

参考文本控件

按钮控件移动示例:

注:此功能目前只有【X3系列 和 X5系列】产品支持。

加载特效示意图移动指令操作说明

38C7D803-AE73-4842-9AE4-B2D8C5E89652.png

① 可视化移动指令格式:


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坐标



▷ 可视化移动操作说明

① 将 b1控件从当前位置可视化移动到(200,200)位置(假设页面上有一个控件叫做 b1),指令如下:

move b1,0,0,200,200,0,300

代码注释:控件b1可视化移动方式,移动到(200,200)的位置,无优先级,移动时间300ms



!!!注意: 可视化移动模式,最小移动时间限制到150ms,因为时间太短就看不出来移动效果了。



特别说明:

控件移动只是移动位置,控件的所有功能不会因为移动而改变,非常方便有运行中移动空加需求的场景使用(例如:密码键盘、操作菜单等等)

控件移出显示区,根据自己需要使用。

另外,如果您只是想不让控件显示出来,可以用隐藏指令,不需要用移动指令。点击查阅【隐藏指令】的使用



4.8、按钮控件使用开关键

通过点击屏幕按钮(按下或弹起事件)实现类似开关键

I.显示预览II.按下或弹起事件III.操作说明
图片2.png

图片1.png

▷属性txt:字符内容

   属性pco:字体颜色

   属性bco:背景颜色

▷代码说明:

if(b1.txt=="开始")

代码注释:判断b1字符内容是否为"开始",是的话

执行{}的括号语句。点击查看逻辑判断语句说明


b1.txt="暂停"
b1.pco=RED
b1.bcp=YELLOW

代码注释:赋值b1字符内容为"暂停",控件字体颜色设置为红色,控件背景颜色设置为黄色。






END



5.控件详解/4.按钮控件.txt · 最后更改: 2020/07/28 08:40 由 tjcqiu        浏览次数:1953/2568360(本页/全站)