USART HMI 资料中心

官方技术交流QQ群:916560014

站点工具


目录索引

5.控件详解:8.进度条控件

进度条控件使用说明



名称操作版本日期
说明编辑
《文本控件使用说明》创建中V1.02019-01-17第一次编辑完成,正式发布。lyh
《文本控件使用说明》修订V1.12020-06-23补充本空间中所有属性详解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、pco属性

      3.3.4、bco属性

      3.3.5、bpic属性

      3.3.6、ppic属性

      3.3.7、sta属性

      3.3.8、time属性

      3.3.9、first属性

      3.3.10、effect属性

      3.3.11、aph属性

      3.3.12、drag属性

      3.3.13、vscope属性

      3.3.14、objname属性

      3.3.15、id属性

      3.3.16、type属性

      3.3.17、dez属性

      3.3.18、val属性

      3.3.19、dis属性

      3.3.20、disup属性

四、进度条控件-使用详解

4.1、在页面上新建进度条控件

4.2、进度条控件外观调整

4.3、进度条控件默认进度值设置

4.4、运行中改变进度条控件进度值

4.5、运行中改变进度条控件背景

4.6、进度条控件加载特效设置

4.7、进度条控件移动特效使用


一、进度条控件-概述

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

1.2、用于在串口屏上显示进度条信息。

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

image.png


二、进度条控件-简单使用

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

图片4.png

▲一个页面新增一个进度条控件。两个按钮控制增减

图片2.png图片1.png


三、 进度条控件-属性详解

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

image.png

3.1、控件属性描述

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

     进度条.png

3.2、控件属性编辑

      3.2.1、编辑属性

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

      注意:type和id属性由开发环境指定,用户不可修改。id可通过软件左上角箭头置顶置底间接修改

      3.2.2、读属性

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

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

      注意:objname属性不可以读取。比如在事件代码中写"j0.val=j0.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、pco属性

            pco属性。控件前景颜色属性,RGB565的颜色值。仅当sta=单色时,才存在该属性。当val值为100控件全部颜色为前景颜色。

      3.3.4、bco属性

            bco属性。控件背景色属性,RGB565的颜色值。仅当sta=单色时,才存在该属性。当val值为0控件全部颜色为背景颜色。

      3.3.5、bpic属性

            bpic属性。控件背景图片属性,选择控件背景图片的ID号。仅当sta=图片时,才存在该属性。当val值为0控件整个图片为背景图片。            

      3.3.6、ppic属性

            ppic属性。控件前景图片属性,选择控件前景图片的ID号。仅当sta=图片时,才存在该属性。当val值为100控件整个图片为前景图片。    

      3.3.7、sta属性

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

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

            2、图片——用户指定图片作为控件的背景。

      3.3.8、time属性

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

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

      3.3.9、first属性

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

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

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

      3.3.10、effect属性

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

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

      3.3.11、aph属性

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

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

      3.3.12、drag属性

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

      3.3.13、vscope属性

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

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

      3.3.14、objname属性

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

      3.3.15、id属性

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

      3.3.16、type属性

            type属性。控件类型属性。由系统分别固定数据,比如进度条控件属性为106。

      3.3.17、dez属性

            dez属性。进度方式:0-横向;1-竖向,进度条显示方向。

      3.3.18、val属性

            val属性。进度条进度值,默认值为50。

      3.3.19、dis属性

            dis属性。外形圆角半径百分比(0-100,0为直角)。当sta=图片时,不存在该属性。仅X系列支持

      3.3.20、disup属性

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


四、进度条控件-使用详解

4.1在页面上新建进度条

参考文本控件

image.png

image.png

1、打开一个新的空白界面▲

2、点击左侧<工具箱>里面的<文本>按钮,当前页面出现一个文本框▲


4.2、进度条外观调整

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

4.2.1调整位置和尺寸

参考文本控件

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

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

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

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

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


 4.2.2背景单色填充

进度条控件背、前景显示指定的“颜色”,(例:背景显示蓝色,前景颜色为红色)。

I.显示预览II.属性设置III.操作说明
进度条1.png进度条2.png

▷鼠标单击选中控件;

▷拉动属性列表滑块 → 找到背景色属性→ 点击背景颜色选择框→ 点击选择更多,软件弹出配色对话框,点击蓝色→ 点击确定。即完成此进度条控件的背景色修改成蓝色。

▷拉动属性列表滑块 → 找到前景色属性→ 点击前景颜色选择框→ 点击选择更多,软件弹出配色对话框,点击红色→ 点击确定。即完成此进度条控件的背景色修改成红色。


注:

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


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



 4.2.3背景图片填充

进度条控件背、前景显示指定的“图片”。

I.显示预览II.属性设置III.操作说明
进度条1.png 图片1.png图片2.png图片3.png图片4.png▷鼠标单击选中控件;

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

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

▷控件设置前景图片步骤是一样的。

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


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




4.3、进度条控件默认进度值设置

上一部分我们讲完了控件外观的编辑和控件大小的调整,现在我们讲讲进度条控件默认进度值的设置。

4.3.1基本的使用

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

在上面进度条为正常显示。


图片2.png

▲①val属性,默认值为50。

在下面进度条在原有的基础,只需修改一点即可。

图片3.png

▲②val属性设置为70。

▷我们要做的只有一步:

① 修改控件“val”属性,设置为“70”;



4.4、运行中改变进度条控件进度值

4.4.1通过“按下或弹起事件”改变当前页面中进度条控件“进度值” 

例(1):按下当前页面中的按钮,让当前页面中的进度条控件j0进度加10。

按钮“弹起事件 或 按下事件”里面代码如下:

j0.val=j0.val+10

代码解释:

 j0  :当前页面中,控件名称为 j0 的进度条控件

 .val :进度条控件 j0 属性列表中的其中一个属性,用于模拟进度值。

 = :C语言赋值符号

 + :C语言赋值符号

 j0.val+10 :将进度值加10 (具体赋值语法格式

显示效果:

图片4.png


4.4.2通过“定时事件”改变当前页面中进度条控件“进度值” 

例(2):定时器的定时事件设置,让当前页面中的进度条控件进度值定时增加。

定时器“定时事件”里面代码如下:

j0.val++

代码解释:

 j0 :当前页面中名字为 j0 的进度条控件。

 .val :进度条控件 j0 属性列表中的其中一个属性,用于模拟进度值。

 ++ :C语言赋值符号,先加1后赋值。


 4.4.3通过单片机串口改变当前页面中进度条控件“进度值” 

示例(1):串口发送数据让当前页面中的进度条控件j0进度值加10。

注:j0控件属性sta必须设置为全局,否则会赋值失败

串口发送数据代码:

Serial.print("j0.val=j0.val+10");
Serial.write(hexEND,3);

代码解释:

 Serial.print();  单片机串口发送字符串函数

 "j0.val=j0.val+10"  需要发给屏的C语言字符串命令

 Serial.write();  单片机串口发送16进制函数

 hexEND,3  提前定义好的元素为3个16进制 0xff 的数组


 4.4.4通过单片机串口改变其他页面中进度条控件“进度值” 

示例(2):串口发送数据让其他页面(页面名称叫 set)中的进度条控件进度值增加10

注:j0控件属性sta必须设置为全局,否则会赋值失败

串口发送数据代码:

Serial.print("set.j0.val=set.j0.val+10");
Serial.write(hexEND,3);

代码解释:

 Serial.print();  单片机串口发送字符串函数

 "set.j0.val=set.j0.val+10"  需要发给屏的C语言字符串命令,其中 set 是页面名称。

 Serial.write();  单片机串口发送16进制函数

 hexEND,3  提前定义好的元素为3个16进制 0xff 的数组



4.4.5通过串口助手改变当前页面中进度条控件“进度值增加” 

示例(1):串口发送数据让当前页面中的进度条控件j0进度值增加。

串口助手发送数据代码:

j0.val=j0.val+10
ff ff ff


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

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

② 设置波特率

图片3.png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


4.4.6通过串口助手改变其他页面中控件“进度值” 

示例(2):串口发送数据让其他页面(页面名称叫 set)中的进度值控件进度值增加。

注:j0控件属性sta必须设置为全局,否则会赋值失败

串口发送数据代码:

set.j0.val=set.j0.val+10
ff ff ff


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

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

② 设置波特率

图片3.png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


4.5、运行中改变进度条控件背景

4.5.1通过“按下或弹起事件”改变当前页面中进度值控件的“背景颜色” 

参考文本控件

例(1):按下当前页面中的按钮,把当前页面中的文本控件t0的背景色改成绿色。

按钮“弹起事件/或按下事件”里面代码如下:

t0.bco=1024

代码解释:

 t0  :当前页面中,控件名称为 t0 的文本控件

 .bco :文本控件 t0 属性列表中的其中一个属性,叫控件【背景色】。

 = :C语言赋值符号

 1024 :绿色的色码,通过控件属性的背景颜色对应的色码,知道1024是绿色image.png。(如果你想设置的颜色,不清楚色码是多少,可以通过控件属性列表中控件,背景填充查找颜色来获取颜色色码。)


4.5.2通过“按下或弹起事件”改变其他页面中进度值控件的“背景颜色”

参考文本控件   

例(2):按下当前页面中的按钮,把其他页面(页面名称叫 set)中的文本控件背景改成绿色。

注:t0控件属性sta必须设置为全局,否则会报错。

按钮“弹起事件/或按下事件”里面代码如下:

set.t0.bco=1024

代码解释:

 set :页面名称

 .t0 :set页面中名字为 t0 的文本控件

 .bco :文本控件 t0 属性列表中的其中一个属性,叫控件【背景色】。

 = :C语言赋值符号

 1024 :绿色的色码,通过控件属性的背景颜色对应的色码,知道1024是绿色image.png。(如果你想设置的颜色,不清楚色码是多少,可以通过控件属性列表中控件,背景填充查找颜色来获取颜色色码。)


4.5.3通过“按下或弹起事件”改变当前页面中进度值控件的“背景图片”、“前景图片” 

方法和改变【通过“按下或弹起事件”改变当前页面中文本控件的背景颜色 】的方法相同,不同的只是对应的属性项不同,在此不重复讲解。


4.5.4通过“按下或弹起事件”改变其他页面中进度值控件的“背景图片”、“前景图片”  

方法和改变【通过“按下或弹起事件”改变其他页面中文本控件的背景颜色】的方法相同,不同的只是对应的属性项不同,在此不重复讲解。


4.5.5通片机串口改变当前页面中进度值控件的“背景图片”、“前景图片” 

方法和【通过单片机串口改变当前页面中文本控件显示内容】的方法相同,不同的只是对应的属性项不同,在此不重复讲解。


4.5.6单片机串口改变其他页面中进度值控件的“背景图片”、“前景图片” 

方法和【通过单片机串口改变其他页面中文本控件显示内容】的方法相同,不同的只是对应的属性项不同,在此不重复讲解。


4.6、进度值控件加载特效设置

参考文本控件

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

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

image.png

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


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


image.png

▷属性设置方法:

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

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


▷其他:

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


4.7、进度条控件移动特效使用

参考文本控件

文本控件移动示例:

注:此功能目前只有【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.控件详解/8.进度条控件.txt · 最后更改: 2020/09/21 08:37 由 tjcqiu        浏览次数:1745/2910999(本页/全站)