USART HMI 资料中心

官方技术交流QQ群:916560014

站点工具


目录索引

5.控件详解:1.认识控件

淘晶驰串口屏 - 控件认识



名称操作版本日期说明编辑
《淘晶驰串口屏-控件认识》创建V1.02019-01-15第一次编辑完成,正式发布。lyh
《淘晶驰串口屏-控件认识》修订V1.12019-01-16

1、增加“怎样看懂每一个控件属性”

2、一级目录 "三、" 下面增加子目录

lyh
《淘晶驰串口屏-控件认识》修订V1.22019-01-16修正本文档错别字lyh



【目录】

一、控件,是什么?

二、控件种类,有多少?

三、控件属性,是什么?

3.1、控件属性描述

3.2、控件属性编辑

3.3、控件属性详解

3.4、一个控件完整的属性示例

四、控件事件,是什么?

五、控件怎样使用?

5.1、编辑页面时控件的使用

5.2、界面开发环境《SUART HMI》中控件的使用

5.3、单片机串口通讯时控件的使用

5.4、串口助手通讯时控件的使用





一、 控件是什么?

控件是串口屏想实现相关功能的“功能组件”,需要串口屏显示什么内容就使用相对应的控件。

例如:

       显示文本,用【文本控件】

       显示图片,用【图片控件】

       显示进度,用【进度条控件】

       实现按键功能,用【按钮控件】

       实现滑动功能,用【滑块控件】

       要播放视频,用【视频控件】

       ••• •••

       以此类推,在此不一 一介绍,每个控件的使用情查阅上级目录"控件详解"里面对应的详细说明。





二、 控件种类有多少?

《USART HMI》,目前已有“21种”控件,具体是哪些控件请打开软件查看控件“工具箱”查阅(控件工具箱位置如下图所示),同时我们根据市场需求会持续增加新控件。

控件工具箱位置1.jpg
控件工具箱位置▲




三、 控件属性是什么?

3.1控件属性描述

控件属性是控件自己的一些设置项,上面提到想要什么功能就选择对应的控件,比如想要显示文本,就用文本控件,但是选择文本控件后,显示什么内容?什么字体?字体什么颜色?文本背景什么颜色?字体间距多少等等这些信息怎么设置呢?这就需要属性来定义了,这些信息都属于这个文本控件的属性,每个控件都有很多属性可以设置,用来定义他的显示风格。

通过对属性的简单编辑,便可将控件设置成您需要的效果;

3.2控件属性编辑。

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

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

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

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

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

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

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

属性种类

属性特点

 控件编辑时可设置+运行中可改变  控件编辑时可设置(运行中不可改变) 控件编辑时不可设置+运行中不可改变 
属性项颜色绿色黑色黑色
示例image.pngimage.pngimage.png
备注:

1、通过颜色区分控件属性一幕了然;

2、细心的朋友可能看到有两类“黑色”的属性,别紧张,因为第③种完全不可改变的属性只有一个,且这个属性是系统默认设置好的。

特别说明

▶所有控件的ID号软件自动生成,用户在编辑UI界面时,按放置控件的顺序自动连续分配ID;在属性项中不能手动修改。

▶但是“ID号属于可设置项”,使用快捷栏的“置顶”、“置底”功能便可使控件ID发生变化。

图层的前后关系跟控件ID是关联的,图层最底层的控件ID最小,图层顶层的控件ID最大,每个控件占用一个图层,

所有控件通过ID来区别前后关系。(每页UI最底层的是“页面”所以页面ID永远是0)。


3.3控件属性详解

上面我们说了,每个控件都有自己的属性列表,如何清楚的读懂属性列表中的每一个属性,这点很重要 but 很简单。

首先用鼠标单击页面上,你需要查看属性的控件,然后属性列表就会显示此控件的所有属性项,然后就可以查看和编辑相关属性。

控件属性列表,功能区识别属性项的识别和使用
image.png

1、认识每一项属性:

第一步、点击需要查阅的【属性名称】,左图中②所指的的列。


第二步、眼看【属性名称说明】,左图④所指的文本框。

第三步、理解属性说明


2、修改属性设置:

第一步、点击【属性值】,左图③所指的列。

第二步、按回车键(或鼠标单击其他任意地方“关闭按钮除外”),完成设置。



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。在事件窗口中写:t0.txt="0123456789ABCD”。运行后的实际效果txt的值为“0123456789”,“ABCD”将被丢失。

3.3.7、pw属性。

      当使能pw属性以后,文本控件中的字符串信息将全部显示为“*”。该属性用于实现密码键盘效果。

3.3.8、xcen,ycen属性。

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

3.3.9、pco属性。

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

3.3.10、bco属性。

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

3.3.11、pic属性。

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

3.3.12、picc属性。

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

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

3.3.13、font属性。

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

3.3.14、key属性。

      key属性。控件绑定系统内置键盘页面属性。仅当vscope=全局时可以选择键盘。支持的键盘类型如下图所示:

      image.png

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属性。控件类型属性。由系统分别固定数据,比如文本控件属性为116。

 3.3.25、disup属性

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

 3.3.26、borderc属性

       borderc属性。边框颜色属性。RGB565的颜色值。仅当style=边框时,才存在该属性。

 3.3.27、borderw属性

       borderw属性。边框粗细属性。最大值:255。仅当style=边框时,才存在该属性。      

 3.3.28、style属性

      style属性。显示风格:0-平面;1-边框;2-3D_Down;3-3D_Up

             1.平面——控件在界面显示上是正常的

             2.边框——控件有边框,可以设置边框粗细,颜色                

             3.3D_Down——控件在界面显示上是凹进去的

             4.3D_Up——控件在界面显示上是凸出来的 

3.4一个控件完整的属性示例:(以文本控件为例)

image.png
控件属性位置.jpg
属性栏完整内容▲软件中“控件属性栏”位置




四、 控件事件是什么?

控件事件,指的是这个控件被操作时要执行的功能。

目前各种控件综合起来被操作的方式有以下几种类型:

1、触摸被按下:对应名称叫做【按下事件】

2、触摸被按下后弹起:对应名称叫做【弹起事件】

3、滑块控件被滑动:对应的名称叫做【滑动事件】

4、定时器定时运行:对应的名称叫做【定时事件】

5、动画播放完成:对应的名称叫做【播放完成事件】

6、视频播放完成:对应的名称叫做【播放完成事件】

所有的控件事件区可以写“C语言”代码实现您想要的效果。


image.png

上图第一行代码是:屏的串口发送数据;

上图第二行代码是:屏自己完成页面刷新显示页面名称为 main 的页面。

控件属性位置1.jpg
控件事件 代码区软件中“控件事件”的位置





五、 控件怎样使用?


5.1编辑页面时控件的使用

 把需要的控件放到当前页面上 

①软件右侧【页面】工具箱,用鼠标点选您要编辑的页面,这时软件的界面编辑区显示的就是您选中的页面。

②软件左侧【工具箱】控件工具箱,用鼠标单击一次您需要使用的“控件”,这时软件界面标编辑区显示1个您选择使用的控件。

如下图所示:(注:鼠标点击几次,界面编辑区就会出现相同数量“控件”。)

选择页面选择控件控件出现在页面上整个软件页面

被选中的页面以“蓝色”高亮显示

image.png

被选中的控件以“橙色”高亮显示

image.png

控件出现在页面上

image.png

image.png

 字库使用设置 

有些控件带有文字显示功能(如:文本控件、数字控件、按钮控件等),有些控件是没有文字显示功能(如:滑块、曲线、等)。有文字显示功能的控件在使用的时候要注意以下两点:

○ 有文字显示功能的控件,同时您也需要它在默认情况下显示文字,那么首先要在属性里面 指定 它使用的 字库ID (新建控件默认使用ID为0的字库),然后在对应的属性项里面输入您要显示的文字。

○ 有文字显示功能的控件,您不需要它显示文字,那么请在对应的属性项里面 清空“属性栏中的 txt 或 val 属性”中的内容 

有文字显示功能的控件,需要显示文字和不需要显示文字,按钮控件举例(如下表)

控件名称按钮控件字库状态文字显示属性项
控件工具箱中 图标image.png


放到页面上的默认状态image.pngimage.pngimage.png
让它显示 你好 两个字image.pngimage.pngimage.png
不让他显示任何 文字image.pngimage.pngimage.png
显示其他字号的 你好image.png
image.png
image.png

 编辑控件显示效果 

最常用的4种背景设置方式:①单色填充;②切图填充;③图片填充;④透明背景,根据对显示效果的不同需求,设置不同的背景。

效果展示(以“按钮控件”为例):

序号名称效果说明
单色填充image.png单色填充方式,不需要任何素材,再属性里面选择颜色就行了。
切图填充image.png切图填充,图标和背景是一张图,控件只显示控件形状内的图片内容。用于切图的图片必须是全屏图片
图片填充29.png图片填充,图标是单个的小图片,支持带透明度的图片(PNG),图标可以做成任何形状的内容显示效果好。
透明image.png透明填充,控件为透明背景,直接透到它下一层的显示内容。只有文字信息显示出来。

注:具体使用方法请查阅控件详解中对应的单个控件说明


5.2界面开发环境《SUART HMI》中控件的使用

●我们的串口屏使用的是“面向对象”的操作方式(千万不要思考寄存器的事),对象的识别方式有两个,一是“控件名称”,二是“控件ID”。常规操作时都是使用“控件名称”只有在使用控件名称组的时候才需要用到“控件ID”。【点击此处查看控件名称组的使用

操作控件时是直接操作控件对应的属性项。

根据实际应用,操作控件有三种情况,一是给控件设置默认值,二是操作当前页面的控件,三是操作其他页面的控件。

操作控件举例:

 给控件设置默认值 

例:让文本控件默认显示 hello

单击页面上的控件,蓝色高亮显示即为被选中状态

在控件属性列表中的 txt 属性栏中输入

 hello

属性中输入hello后控件的显示运行时文本控件显示
image.pngimage.pngimage.pngimage.png


 操作当前页面中的控件 

例(1):按下当前页面中的按钮,让当前页面中的文本控件t0显示 你好。

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

t0.txt="你好"

代码解释:

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

 .txt :文本控件 t0 属性列表中的其中一个属性,用于显示文本。

 = :C语言赋值符号

 "你好" :你好 为字符串

显示效果:

image.png


 操作其他页面中的控件 

例(2):按下当前页面中的按钮,让其他页面(页面名称叫 set)中的文本控件显示OK。

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

set.t0.txt="OK"

代码解释:

 set :页面名称

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

 .txt :文本控件 t0 属性列表中的其中一个属性,用于显示文本。

 = :C语言赋值符号

 "OK" :OK 为字符串


5.3单片机串口通讯时控件的使用

●串口波特率和屏的波特率一致(屏出厂默认波特率9600,可以自行更改,更改方法见指令集说明)。

●串口发送字符串指令给屏。

●串口每发完一条字符串指令给屏后,还需要发送结束符给屏指令才会被执行。结束符是16进制的 0xff 0xff 0xff 。


  单片机串口操作当前页面中的控件 

示例(1):串口发送数据让当前页面中的文本控件t0显示 你好。

串口发送数据代码:

Serial.print("t0.txt=\"你好\"");
Serial.write(hexEND,3);

代码解释:

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

 "t0.txt=\"你好\""  需要发给屏的C语言字符串命令

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

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


  单片机串口操作当其他页面中的控件 

示例(2):串口发送数据让其他页面(页面名称叫 set)中的文本控件显示OK

串口发送数据代码:

Serial.print("set.t0.txt=\"你好\"");
Serial.write(hexEND,3);

代码解释:

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

 "set.t0.txt=\"你好\""  需要发给屏的C语言字符串命令,其中 set 是页面名称。

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

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


5.4串口助手通讯时控件的使用

●串口波特率和屏的波特率一致(屏出厂默认波特率9600,可以自行更改,更改方法见指令集说明)。

●串口发送字符串指令给屏。

●串口每发完一条字符串指令给屏后,还需要发送结束符给屏指令才会被执行。结束符是16进制的 0xff 0xff 0xff 。


  串口助手操作当前页面中的控件 

示例(1):串口发送数据让当前页面中的文本控件t0显示 你好。

串口助手发送数据代码:

t0.txt="你好"
ff ff ff


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

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

② 设置波特率

1.2.3 (1).png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


 串口助手操作当其他页面中的控件 

示例(2):串口发送数据让其他页面(页面名称叫 set)中的文本控件显示OK。

串口发送数据代码:

set.t0.txt="你好"
ff ff ff


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

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

② 设置波特率

1.2.3 (2).png图片2.png

③ 输入字符串指令

④ 输入16进制结束符




控件使用总结:

1、无论是在《USART HMI》软件上开发界面时操作控件,还是串口发数据操作控件,我们可以看出,当被操作的 控件在本页面时 ,可以 直接操作 控件当被操作的 控件不在当前页面 时  控件 名称 前面要加上页面名称 

2、 控件 属性列表中的 属性项 只要 是绿色 的都可以在页面开发时通过代码进行操作,也可以通过串口发送指令进行操作

!注意:如果要让 控件支持不在当前页面时被操作 ,那么在 控件属性中 ,“ 内存占用 ”栏必须设置为“ 全局 ”如下图所示:

image.png

(所有控件默认的内存占用为“私有”,“全局”需要手动修改)


END

5.控件详解/1.认识控件.txt · 最后更改: 2020/09/05 08:55 由 tjcqiu        浏览次数:71426/2847958(本页/全站)