USART HMI 资料中心

官方技术交流QQ群:916560014

站点工具


目录索引

5.控件详解:0.页面控件

页面控件使用说明



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

      3.3.4、first属性

      3.3.5、effect属性

      3.3.6、up,down,left,right属性

      3.3.7、sta属性

      3.3.8、vscope属性

      3.3.9、objname属性

      3.3.10、id属性

      3.3.11、type属性

四、页面控件-使用详解

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

4.2、运行中改变页面控件显示颜色

4.3、页面控件加载特效设置

4.4、页面控件特有事件说明

4.5、页面控件实战使用



一、页面控件-概述

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

1.2、用于在串口屏上设置页面背景,滑动翻页(仅x系列支持)等效果。

1.3、在《USART HMI》软件每新建一个页面将会默认自带页面控件控件名称和页面名称是一样的



二、页面控件-简单使用

用页面控件,做自己的第一个显示工程(如下图所示)。

图片3.png

控件属性设置:

图片4.png



三、页面控件-属性详解

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

图片1.png


3.1、控件属性描述

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

图片2.png


3.2、控件属性编辑

      3.2.1、编辑属性

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

      注意:type和id属性由开发环境指定,用户不可修改。页面控件页面id固定为0,无法修改。

      3.2.2、读属性

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

      sys0=page0.id        将页面控件page0的id号赋值给sys0变量
      prints page0.bco,0       将page0的背景色数值从串口发送出去。

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

      注意:该属性无法修改,只能为0。 

      3.3.2、w,h属性

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

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

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

    注意:该属性无法修改,只能为屏幕最大分辨率

      3.3.3、time属性

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

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

      3.3.4、first属性

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

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

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

      3.3.5、effect属性

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

            0-立即加载;1-上边飞入;2-下边飞入;3-左边飞入;4-右边飞入;5-左上角飞入;6-右上角飞入;7-左下角飞入;8-右下角飞入;9-淡入渐变;10-中间放大。

      3.3.6、up,down,left,right属性

            up,down,left,right属性。上,下,左,右滑翻页页面ID(255为无滑动翻页)。仅X系列支持该属性

      3.3.7、sta属性

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

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

            2,图片——用户指定一张图片作为控件的背景。即页面背景图。

            3,无背景——当切换到该页面会保留上个页面控件,用于用户实现弹窗效果。

      3.3.8、vscope属性

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

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

      3.3.9、objname属性

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

      3.3.10、id属性

            id属性。控件id是每个控件在当前页面的唯一标识号。由系统分配,不可修改。

      3.3.11、type属性

            type属性。控件类型属性。由系统分别固定数据,比如页面控件属性为121。



四、页面控件-使用详解

4.1在页面上新建页面控件

图片1.png

每次新建一个页面,将会默认有页面控件

点屏幕没有放置控件的地方能够选中页面控件

注:每个页面只能有一个页面控件


4.2、运行中改变页面控件显示颜色

4.2.1通过“按下或弹起事件”改变当前页面中外部图片控件显示红色 

例(1):按下当前页面中的按钮,让当前页面中的页面控件page0显示红色。

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

page0.bco=63488

代码解释:

 page0  :当前页面中,控件名称为 page0 的页面控件。

 .bco :页面控件 page0 属性列表中的其中一个属性,显示背景颜色。

 = :C语言赋值符号。

 63488 :颜色数值。


4.2.2通过“按下或弹起事件”改变其他页面中页面控件显示红色 

例(2):按下当前页面中的按钮,让其他页面(页面名称叫 page0)中的页面控件page0显示红色。

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

page0.page0.bco=63488

代码解释:

 page0 :页面名称

 .page0  :当前页面中,控件名称为 page0 的页面控件。

 .bco :页面控件 page0 属性列表中的其中一个属性,显示背景颜色。

 = :C语言赋值符号。

 63488 :颜色数值。


 4.2.3通过单片机串口改变当前页面中页面控件显示红色 

示例(1):串口发送数据让当前页面中的页面控件page0显示红色

串口发送数据代码:

Serial.print("page0.bco=63488");
Serial.write(hexEND,3);

代码解释:

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

 page0.bco=63488"  需要发给屏的C语言字符串命令

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

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


 4.2.4通过单片机串口改变其他页面中页面控件显示红色 

示例(2):串口发送数据让其他页面(页面名称叫 page0)中的页面控件page0显示红色

串口发送数据代码:

Serial.print("page0.page0.bco=63488");
Serial.write(hexEND,3);

代码解释:

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

 "page0.page0.bco=63488"  需要发给屏的C语言字符串命令,其中 page0是页面名称。

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

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


4.2.5通过串口助手改变当前页面中页面控件显示红色 

示例(1):串口发送数据让当前页面中的页面控件page0显示红色。

串口助手发送数据代码:

page0.bco=63488
ff ff ff


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

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

② 设置波特率

图片1.png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


4.2.6通过串口助手改变其他页面中页面控件显示红色 

示例(2):串口发送数据让其他页面(页面名称叫 page0)中的页面控件page0显示红色。

串口发送数据代码:

page0.page0.bco=63488
ff ff ff


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

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

② 设置波特率

图片2.png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


4.3、页面控件加载特效设置

参考文本控件

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

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

image.png

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


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


image.png

▷属性设置方法:

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

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


▷其他:

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


4.4、页面控件特有事件说明

前初始化事件

前初始化事件在所有控件刷新显示之前执行

当工程运行时,进入到该页面将先执行前初始化事件的代码(只执行一次


后初始化事件

后初始化事件在所有控件刷新显示之后执行

当工程运行时,进入到该页面将先执行前初始化事件的代码(只执行一次),再执行后初始化事件的代码


页面离开事件

       当工程离开该页面时,将执行该事件下的代码。


4.5、页面控件实战使用

1.弹窗效果                点击下载


素材说明

效果实现方法:①.页面控件属性设置无背景

                         ②.控件移动(仅x系列支持


2.滑动翻页效果

仅x系列支持

设置页面控件left,right,up,down属性

END


5.控件详解/0.页面控件.txt · 最后更改: 2020/10/27 10:15 由 tjcqiu        浏览次数:4542/3475431(本页/全站)