USART HMI 资料中心

http://www.tjc1688.com

站点工具


目录索引

5.控件详解:18.数据记录控件

数据记录控件使用说明



点击查看新版wiki资料


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

      3.3.4、val属性

      3.3.5、path属性

      3.3.6、maxval_x属性

      3.3.7、val_x属性

      3.3.8、xcen属性

      3.3.9、pco属性

      3.3.10、bco属性

      3.3.11、pic属性

      3.3.12、picc属性

      3.3.13、font属性

      3.3.14、lenth属性

      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属性

      3.3.26、maxval属性

      3.3.27、dez属性

      3.3.28、format属性

      3.3.29、dir属性

      3.3.30、mode属性

      3.3.31、dis属性

      3.3.32、order属性

      3.3.33、qty属性

      3.3.34、high属性

      3.3.35、left属性

      3.3.36、gdc属性

      3.3.37、gdw属性

      3.3.38、gdh属性

      3.3.39、bco1属性

      3.3.40、pco1属性

      3.3.41、bco2属性

      3.3.42、pco2属性

      3.3.43、ch属性

      3.3.44、maxval_y属性

      3.3.45、val_y属性

四、数据记录控件-方法说明

       4.1、insert方法

       4.2、delete方法

       4.3、up方法

       4.4、clear方法

       4.5、关于数据记录背景颜色的字体颜色设置

五、数据记录控件-使用详解

5.1、在页面上新建数据记录控件

5.2、数据记录控件外观调整

5.3、数据记录控件显示内容设置

5.4、数据记录控件存储位置说明

5.5、数据记录控件实战使用



一、数据记录控件-概述

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

1.2、用于在串口屏上显示类似于Excel表格。

1.3、在《USART HMI》软件左侧工具箱里面(如下图所示)。

注:仅x系列支持

图片1.png


二、数据记录控件-简单使用

用数据记录控件,做自己的第一个显示工程(如下图所示)。

图片3.png


该工程是用数据记录控件和按钮控件,在按钮控件事件写下相关的方法来实现增删等功能。


按钮下相关代码。

图片1.png

(1)添加数据按钮


图片2.png

(2)删除选中按钮


图片3.png

(3)顺序按钮


图片4.png

(4)清空数据按钮


图片5.png

(5)添加数据按钮


数据记录相关属性设置

图片1.png


三、数据记录控件-属性详解

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

图片2.png

3.1、控件属性描述

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

图片3.png

3.2、控件属性编辑

      3.2.1、编辑属性

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

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

      3.2.2、读属性

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

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

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

           txt属性。即字符串属性。行记录内容(val值代表的行号记录内容,只可读取不可修改)。

      3.3.4、val属性

           val属性。当前选中行记录序号(每变化一次,txt属性将重新加载此ID的行记录内容)。可运行中赋值,即选中行记录。

           例:data.val=3 (选中数据记录序号为3的记录,从下往上数第四个记录)。

      3.3.5、path属性

           path属性。绑定数据文件路径(如:"sd0/1.data")。

       3.3.6、maxval_x属性

             maxval_x属性。最大横向滑动值(运行中根据字符内容自动改变,只可读取不可设置)

       3.3.7、val_x属性

             val_x属性。当前横向滑动值(最小0,最大maxval_x)

             例 : data0.val_x=data0.maxval_x(将数据记录移动到最大横纵位置,即数据记录最右的位置)。

      3.3.8、xcen属性

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

      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、lenth属性

            lenth属性。当前绑定数据记录文件中每条记录最大字节数。

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

       3.3.25、disup属性

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

       3.3.26、maxval属性

               maxval属性。当前绑定数据记录文件可存入的最大行数,超出之后的新增记录将循环覆盖老数据)

       3.3.27、dez属性

               dez属性。当前绑定数据记录文件中设置的字段数量(最小1,最大12)

             如果要设置大于12字段数量解决方法 点击下载

       3.3.28、format属性

             format属性。字段宽度自定义(直接输入字段宽度值,多个字段使用^分隔,如:100^100)

             例:设置为100^100^300^300 (第一个格字段宽度值为100,第二个格字段宽度值为100,第三个格字段宽度值为300,第四个格字段宽度值为300)。

       3.3.29、dir属性

             dir属性。表头名称自定义(多个字段使用^分隔)

             例:设置为序号^名字^性别^成绩(表头第一个格为序号,表头第二个格为名字,表头第三个格为性别,表头第四个格为成绩)。

       3.3.30、mode属性

             mode属性。是否允许自动创建文件(path路径无效时):0-不允许;1-允许

             注:当path无效的时候 (data文件并不存在的时候或者格式不对都会产生黑屏)打开软件左上角文件中虚拟sd卡文件夹 把里面相关data删除 该属性为允许的时候 会自动创建新的data

       3.3.31、dis属性

            dis属性。是否允许触摸选中记录项:0-不允许;1-允许dis设置为不允许,触摸是无法选中记录项。

       3.3.32、order属性

            order属性。显示顺序:0-新数据在前;1-新数据在后

       3.3.33、qty属性

            qty属性。当前数据文件总记录数。(只可获取不可赋值)。

       3.3.34、high属性

            high属性。显示记录的行高度(最小1,最大255)

       3.3.35、left属性

             left属性。是否显进度条:0-不显示;1-操作时显示;2-持续显示

       3.3.36、gdc属性

             gdc属性。表格线颜色,RGB565的颜色值。

       3.3.37、gdw属性

             gdw属性。横向表格线宽度(0为关闭),RGB565的颜色值。

       3.3.38、gdh属性

             gdh属性。纵向表格线宽度(0为关闭),RGB565的颜色值。

       3.3.39、bco1属性

             bco1属性。表头背景色,RGB565的颜色值。

       3.3.40、pco1属性

             pco1属性。表头字体色,RGB565的颜色值。

       3.3.41、bco2属性

             bco2属性。选中项背景色,RGB565的颜色值。

       3.3.42、pco2属性

             pco2属性。选中项字体色,RGB565的颜色值。

       3.3.43、ch属性

             ch属性。滑动惯性力度(0-32,0为无惯性)设置有惯性,滑动结束会适当下滑一部分。

       3.3.44、maxval_y属性

             maxval_y属性。最大纵向滑动值(运行中根据字符内容自动改变,只可读取不可设置)

       3.3.45、val_y属性

             val_y属性。当前纵向滑动值(最小0,最大maxval_y)

             例:data0.val_y=data0.maxval_x(将数据记录移动到最大纵向位置,即数据记录最下面那条记录的位置)。



四、数据记录控件-方法说明

该方法为数据记录控件独有的,对于其他控件不生效。使用方式类似于指令。

数据记录包含相关方法软件存放位置

图片1.png

4.1、insert方法 追加一条记录

    int insert(string newtxt)            (成功返回1,失败返回0)

    newtext 新数据                          (多个字段使用^分割:颜色定义使用< font >标签,如<font b=1024,p=123>)

    例:

    ①data0.insert("1^2^3^4")    (将添加记录第一格设置为1,第二格设置为2,第三格为3,第四格为4)

    ②t0.txt="1^2^3^4"

       data0.insert(t0.txt)

     注:字段使用^分割,控件识别到一个^就会自动写入^后面字符串;如果识别连续两个^,则该格为空


      4.2、 delete方法 删除数据

          int delete(int starid,int qty) 删除数据(成功返回1,失败返回0)

          starid 待删除数据起始id

          qty 需要删除的条数

          例:data0.delete(data0.val,1) (删除选中的数据记录数据)


4.3、up方法 修改一条记录

           int up(string newtxt,int index) (成功返回1,失败返回)

           newtxt 新数据(多个字段使用^分割:颜色定义使用< font >标签,如<font b=1024,p=123>)

           index 需要修改的记录序号

           例:

           ①data0.up("1^2^3^4",5) (将序号为5(从下往上数第六个)修改为"1^2^3^4")

           ②t8.txt="1^2^3^4"

              data0.up(t8.txt,data.val) (将t8.txt的字符内容写入当前选中的数据记录)


       4.4、clear方法 清空所有数据记录

           int clear() 此方法无需参数

           例:data0.clear() 清空数据记录所有数据(只留下表头)


       4.5、关于数据记录背景颜色的字体颜色设置

        实例1:covx n1.val,va0.txt,0,0 (将n1设置的颜色改变选中表格)  

                       va2.txt="< font b="+va0.txt+" >"+t8.txt            

                      data0.up(va2.txt,n0.val)  (将原来的内容添加上背景颜色为n1.val)

        实例2:data0.insert("<font b=1024,p=63488>1^2^3^44")  

                       (将背景颜色设置为1024(绿色),将字体颜色设置为63488(红色),添加内容为1 2 3 44)



五、数据记录控件-使用详解

5.1在页面上新建数据记录控件

image.png

图片3.png

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

2、点击左侧<工具箱>里面的<数据记录>按钮,当前页面出现一个数据记录▲


关于数据记录出现黑屏

(1)控件列表布局和之前设置不一致(即修改length maxval dez属性) 导致黑屏。

解决方法:方法一:修改数据记录控件属性path 。方法二:打开软件中菜单栏文件的“虚拟sd卡文件夹”,删除报错的文件就可以了。方法三:修改dez属性。

(2)工程下载到屏出现黑屏。这是屏无法读取到sd卡问题。

解决方法:方法一:卡的格式不对(非fat32格式)。方法二:尝试换一张卡。

(3)将数据记录保存到ram中。路径设置后黑屏。

解决方法:在工具栏设备按钮,在工程选项,内存文件存储区大小设置(至少大于65kb=65560Byte 注:如果不行的话要适当加大大小。)后,工程进入调试界面就好了。

      (4)多个数据记录打开同一个路径下文件导致黑屏,这是因为文件已经被上一个数据记录打开导致新的数据记录无法打开文件。

       解决办法:多个页面数据记录需要打开同一个路径文件,切换页面的时候将数据记录原文件切换为新一个中转文件。


5.2、数据记录控件外观调整

参考文本控件

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

5.2.1调整位置和尺寸

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

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

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

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

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


 5.2.2背景单色填充

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

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

▷鼠标单击选中控件;

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

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


注:

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


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



 5.2.3背景图片填充

文本控件背景显示指定的“一张图片”。

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

▷鼠标单击选中控件;

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

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


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


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


5.2.4背景切图填充

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

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

image.png

▲文本控件切图填充效果


2.jpg

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

image.pngimage.png image.pngimage.png

▷鼠标单击选中控件;

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

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


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


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


5.2.5背景透明填充

仅x系列支持

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

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

▷鼠标单击选中控件;

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


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


5.3、数据记录控件显示内容设置

数据记录的数据是通过方法来进行添加数据,修改数据,删除数据,清空数据。

数据记录属性只是对数据记录控件外观,表头,字库等属性设置。不能对数据记录中的显示内容直接设置,需要使用相关的方法进行数据增删。


5.3.1通过单片机串口改变当前页面中数据记录控件“显示内容” 

示例(1):串口发送数据让当前页面中的数据记录控件data0添加数据 "1^2^3^4"。

串口发送数据代码:

Serial.print("data0.insert(\"1^2^3^4\")");
Serial.write(hexEND,3);

代码解释:

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

 "data0.insert(\"1^2^3^4\")"  需要发给屏的C语言字符串命令

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

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


5.3.2通过串口助手改变当前页面中数据记录控件“显示内容” 

示例(1):串口发送数据让当前页面中的数据记录控件data0添加数据 "1^2^3^4"

串口助手发送数据代码:

data0.insert("1^2^3^4")
ff ff ff


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

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

② 设置波特率

图片3.png图片2.png

③ 输入字符串指令

④ 输入16进制结束符


5.4、数据记录控件数据存储位置说明

保存到sd卡需注意:

路径设置 例:属性path:   sd0/1.data

        1.sd卡最大支持32g容量,一定要格式化为FAT32格式,不能有隐藏分区,不能用做过U盘启动的卡(因为做了U盘启动的卡一定有隐藏分区),尽量使用原装卡,以免出现兼容性问 题导致无法识别到sd卡。

        2.T0,K0系列只支持Class 4类型的Micro SD卡。X3,X5支持Class 4和Class10的Micro SD卡。

        3.屏无法读取到sd卡,数据记录会黑屏。

       4.数据是存放sd卡的文件中,如果屏关机也不会删除sd卡的文件(除非手动指令删除)。即掉电保存。

5.data文件可以通过官方工具转换成csv文件,csv文件可以由excel软件直接打开点击下载


保存到ram需注意:

路径设置 例:属性path:  ram/1.data

1.软件工具框- 设备-工程-内存文件存储区大小设置为100000Byte(至少大于65kB=65560Byte) 设置后软件调试就好了。

20200322013617565.png

如果没设置的情况下,使用ram会导致黑屏。

2.ram是掉电不保存的,如果量不大的情况下是可以考虑保存到eeprom里,eeprom存储空间为1k。如果数据量大还是建议保存到sd卡中。

如何将数据记录中数据储存到eeprom中:

①先选中相应数据记录中的数据(data0.val=2),再提取出来(t0.txt=data0.txt),注:t0控件属性txt_maxl如果设置过少,有可能无法全部读取整条数据

②通过wepo指令写入eeprom,再通过repo指令从eeprom读取出来。


5.5、数据记录控件实战使用

该例程通过按钮事件下写相关方法来实现数据记录数据添加  点击下载

1.数据记录是通过相关方法来添加,修改数据。而不是通过属性的txt,val赋值。

2.获取数据记录某一行(点击相应数据记录中的记录或者对属性val赋值)中某一个格使用到的是 spstr指令获取。

3.添加数据是可以同时增加字体颜色以及背景颜色。具体操作

4.数据记录出现黑屏。解决方法

5.数据记录滑块实现。实现方法

6.数据记录字段数量大于12。解决方法

7.数据记录每个字格宽度设置。实现办法

8.数据记录翻页功能实现。data0.val_y=data0.hig*sys0。   

注:sys0是系统变量是在program.s里定义。这里只需要对sys0赋值代表翻页的数据记录数量。

9.单片机对数据记录添加数据。参考程序

10.如何让新加数据记录显示在最前面(后面),通过对order属性设置。

11.如何修改数据记录控件表头,先修改好dez属性,再相应修改formatdir属性。

修改后出现黑屏。解决办法

12.数据记录控件最大只能支持打开8个,其他多了会出现黑屏,目前没有办法支持更多的数据记录控件。

注:跨页面超过8个数据控件解决方法,点击下载。同一个页面则无办法。

END



5.控件详解/18.数据记录控件.txt · 最后更改: 2022/12/19 16:42 由 wwd        浏览次数:901811/323314186(本页/全站)