目录索引
5.控件详解:23.文件浏览器控件
文件浏览器控件使用说明
| 名称 | 操作 | 版本 | 日期 | 说明 | 编辑 |
| 《文本浏览器控件使用说明》 | 创建中 | V1.0 | 2019-01-17 | 第一次编辑完成，正式发布。 | lyh |
| 《文本浏览器控件使用说明》 | 修订 | V1.1 | 2020-08-17 | 补充本控件中所有属性详解 | 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、style属性
3.3.4、txt属性
3.3.5、val属性
3.3.6、pco属性
3.3.7、bco属性
3.3.8、pco2属性
3.3.9、bco2属性
3.3.10、pic属性
3.3.11、picc属性
3.3.12、font属性
3.3.13、left属性
3.3.14、ch属性
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、borderc属性
3.3.27、borderw属性
3.3.28、dir属性
3.3.29、filter属性
3.3.30、qty属性
3.3.31、dis属性
3.3.32、spax,spay属性
3.3.33、maxval_y属性
3.3.34、val_y属性
3.3.35、psta属性
3.3.36、pic1属性
3.3.37、pic2属性
3.3.38、vvs2属性
3.3.39、buffsize属性
3.3.40、fwarning属性
3.3.41、style属性
4.1、up方法
5.1、在页面上新建文件浏览器控件
5.2、文件浏览器控件外观调整
5.4、运行中改变文件浏览器控件背景颜色
5.5、文件浏览器控件加载特效设置
5.6、文件浏览器控件移动特效使用
5.7、文件浏览器控件实战使用
5.8、文件浏览器控件使用过程中常见问题
一、文件浏览器控件-概述
1.1、文件浏览器控件是串口屏诸多功能控件里面的其中一个。
1.2、用于在串口屏上显示SD卡文件信息。
1.3、在《USART HMI》软件左侧工具箱里面（如下图所示）。
注 仅x系列支持
电脑是有虚拟sd卡文件夹 可以在电脑模拟和调试好之后 再下载屏上仿真。（存放路径：菜单栏—文件—虚拟sd卡文件夹）
二、文件浏览器控件-简单使用
用文件浏览器控件，做自己的第一个显示工程（如下图所示）。
▲一个纯色页面使用<文件浏览器控件>显示sd卡文件信息
三、文件浏览器控件-属性详解
串口屏所有控件操作的实质都是对属性的修改。文件浏览器控件具有的属性如下表所示。
如下图所示，当鼠标选中对应属性时，会在属性窗口的最下方出现该属性的详细描述信息。
用户可以随时调整、编辑列表中的属性参数。
注意：type和id属性由开发环境指定，用户不可修改。id可通过软件左上角置顶置底间接修改。
如上图所示的控件属性列表，可以在设备运行中随时读取。
sys0=fbrowser0.id 将文件浏览器控件fbrowser0的id号赋值给sys0变量 fbrowser0.x+=10 将控件在屏幕上的位置向右移动10个像素点。 prints fbrowser0.txt,0 将fbrowser0的文本内容从串口发送出去。
注意：objname属性不可以读取。比如在事件代码中写"fbrowser0.txt=fbrowser0.objname"编译将报错。
所有绿色控件可以在运行中实时修改。
注意：因产品系列不同，属性的写权限也不完全相同。比如X系列可以在运行该过程中修改x，y属性。但是T0,K0系列不能在运行过程中修改x，y属性！
x，y属性描述控件在屏幕上的像素坐标位置。以屏幕左上角为像素坐标原点(x=0,y=0)。
T0,K0系列产品，x，y属性只能从：0–最大分辨率。不能超出屏幕显示区域。
X系列产品，x，y属性可以超出屏幕坐标范围(-6000~+6000)，但是超出屏幕将被裁减，不会显示出来。
技巧：如果想做一个控件，但是不想让用户看到，触摸到。可以把该控件放在屏幕显示区域以外。开发人员使用的时候，使用click指令，
或者绑定用户IO
w，h属性描述控件在屏幕上宽度和高度（像素大小为单位）。
T0,K0系列产品，w，h属性只能从：0–最大分辨率。不能超出屏幕显示区域。
X系列产品，x+w，y+h的值可以超出屏幕坐标范围，但是超出屏幕将被裁减，不会显示出来。
style属性。显示风格:0-平面;1-边框;2-3D_Down;3-3D_Up
1.平面——控件在界面显示上是正常的
2.边框——控件有边框，可以设置边框粗细，颜色
3.3D_Down——控件在界面显示上是凹进去的
4.3D_Up——控件在界面显示上是凸出来的
txt属性。当前val值指向的文件名(自动随val值改变,只可获取不可设置)。
val属性。当前选中项序号(每改变一次,txt值将重新赋值为新的val值指向的文件名)。
例：fbrowser0.val=3 选中文件浏览器第四个文件（先从左往右，再从上到下。起始位为0）
pco属性。控件的字体颜色属性，RGB565的颜色值。
bco属性。控件背景色熟悉，RGB565的颜色值。仅当sta=单色时，才存在该属性。
pco2属性。选中项字体色，RGB565的颜色值。
bco2属性。选中项背景色，RGB565的颜色值。仅当sta=单色时，才存在该属性。
pic属性。控件背景图片属性，选择控件背景图片的ID号。仅当sta=图片时，才存在该属性。
picc属性。控件背景切图图片属性，选择控件背景切图图片的ID号。仅当sta=切图时，才存在该属性。
注意：选择的被切图图片尺寸必须等于对应串口屏的分辨率。否则，可能会导致显示花屏！
font属性。控件的字库属性。选择控件字库的ID号。
注：调用字库非utf-8字符编码，显示文件名、文件夹带中文名将会出现乱码。
注：调用字库如果没有要显示的字，将会不显示。
left属性。是否显进度条:0-不显示;1-操作时显示;2-持续显示。
ch属性。滑动惯性力度(0-32,0为无惯性)。
sta属性。背景填充方式属性。目前支持4种背景方式：
1、切图——从指定与串口屏分辨率相同的全屏图片上，自动切取控件窗口区域的图片内容作为控件背景。
2、单色——用户指定单一的RGB565颜色值作为控件背景。
3，图片——用户指定一张图片作为控件的背景。
4，透明——即无背景，以透明的方式直接在控件区域写字符信息，仅x系列支持。
time属性。控件特效执行时间属性。仅X系列支持，且effect设置不为0以后才存在该属性。
当设置了控件的加载特效以后，控件在time的时间内，以设置的特效方式飞到控件所在屏幕的坐标位置。
first属性。控件加载特效的优先级属性。仅X系列支持，且effect设置不为0以后才存在该属性。
first可设置的值为0-100。支持多个有特效的控件为同一级别优先级。同一优先级的控件，将在同时被加载到屏幕上显示。
不同优先级的优先级中，将根据设置值从大到小依次完成加载。
effect属性。控件加载特效属性。目前一共支持9种效果。仅X系列支持该属性。
0-立即加载;1-上边飞入;2-下边飞入;3-左边飞入;4-右边飞入;5-左上角飞入;6-右上角飞入;7-左下角飞入;8-右下角飞入
aph属性。控件半透明属性。仅X系列支持。
aph可设置的值范围为0-127 。为0时控件将全透明(效果为不显示)，为127时全显示(没有半透明效果);
drag属性。控件运行过程中是否支持拖动属性。仅X系列支持。
vscope属性。控件内存占用属性。控件支持私有和全局属性。
当设置为全局时，控件分配的内存在所有页面都可以访问。离开当前页面后，控件属性数据也不会丢失。缺点是，占用系统总内存。
objname属性。控件名称属性。该属性在运行中不能获取。
id属性。控件id是每个控件在当前页面的唯一标识号。由系统分配，不可修改。可通过软件左上角置顶置底间接修改。
type属性。控件类型属性。由系统分别固定数据，比如文件浏览器控件属性为65。
disup属性。产生拖动后是否禁用弹起事件:0-否;1-是。默认为否，即拖动的时候是会触发弹起事件。仅当drag=是时，才存在该属性。
borderc属性。边框颜色属性。RGB565的颜色值。仅当style=边框时，才存在该属性。
borderw属性。边框粗细属性。最大值:255。仅当style=边框时，才存在该属性。
dir属性。需要遍历的目录路径(每设置一次将重新刷新一次文件列表)。
filter属性。文件名关键字过滤(多个关键字使用|分隔,如:"*.txt|*.data")。设置过后只能显示和读取没被过滤的文件名关键字。
qty属性。遍历结果中的文件总数。
dis属性。文件名显示行数。
spax属性：文件名显示横向间距(最小0,最大255)
spay属性：文件名显示纵向间距
屏幕上显示文件与文件之间的距离。单位：像素点。
dis属性。最大纵向滑动值(运行中根据字符内容自动改变,只可读取不可设置)。
dis属性。当前纵向滑动值(最小0,最大maxval_y)。
psta属性。是否支持子文件夹:0-否;1-是。
pic1属性。文件夹图标。仅当psta=1，存在该属性。
pic2属性。默认文件图标。
vvs2属性。自定义文件图标(类型/图片ID,如:"*.txt/2*.data/3")。
buffsize属性。储存遍历结果所使用的缓冲区大小(用于储存遍历出来的所有文件名,推荐32000)。
fwarning属性。编译时是否提示非utf-8编码警告(此属性仅用于编译配置,运行中不可访问不可读取):0-不提示;1-提示。
style属性。显示风格:0-平面;1-边框;2-3D_Down;3-3D_Up。仅当sta=单色时，才存在该属性。
1.平面——控件在界面显示上是正常的
2.边框——控件有边框，可以设置边框粗细，颜色
3.3D_Down——控件在界面显示上是凹进去的
4.3D_Up——控件在界面显示上是凸出来的
四、文件浏览器控件-方法说明
int up() 此方法不需要参数
例：fbrowser0.up()。跳转到上一级目录(成功返回1,失败返回0)
注：上一级目录是指打开文件夹后。
五、文件浏览器控件-使用详解
|  |
1、打开一个新的空白界面▲ | 2、点击左侧<工具箱>里面的<文件浏览器>按钮，当前页面出现一个文件浏览器▲ |
注：文件浏览器在调试界面显示的文件和文件夹。 存放位置：软件菜单栏→文件→虚拟sd卡文件夹
在屏幕存放位置为：sd卡
参考文本控件
将文本控件移显示区中心位置，并调大到能放下。
| I.新添加上“文本控件”预览 | II.摆放到指定位置并调整到需要尺寸预览 | III.操作说明 |
 |  | ▷移动位置：鼠标选中控件，拖到需要摆放的位置。 ▷调整大小：鼠标指针选中控件的任意一条边，或任意一个角，拖动即可调整大小。 其他方法：如果不想使用鼠标，也可以通过修改属性列表中的“x、y坐标”来调整位置，修改属性列表中的“宽度和高度”来调整大小。 |
文本控件背景显示指定的“单一颜色”，（例：显示蓝色）。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |    | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景色属性“左图①所示”→ 点击颜色选择框“左图②所示”→ 点击选择更多“左图③所示”，软件弹出配色对话框，点击蓝色“左图④所示”→ 点击确定“左图⑤所示”。即完成此文本控件的背景色修改成蓝色。 其他：控件单色背景填充时还能设置边框效果，根据属性列表里面，相应的属性项进行设置。 注： 当颜色被使用过后，下次点击选择颜色的时候，使用过的颜色会直接出现在“选择颜色”的下拉选项中。 控件属性如果不清楚怎么使用，请查阅“认识控件中的【控件属性讲解】” |
文本控件背景显示指定的“一张图片”。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |     | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择图片“左图③所示”。 ▷拉动属性列表滑块 → 找到背景图片选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”，软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置图片填充背景。 其他：如何省掉第⑤、⑥、⑦步？在第④步的地方直接输入图片在资源文件中的ID，图片资源文件怎么用，请查阅【资源文件使用说明】。 注：我们的串口屏支持PNG图片，并完美抗锯齿，图片内容如果不是矩形，请使用PNG格式图片。 |
文本控件背景显示指定的“一张图片中的某一部分”。
| I.显示预览 | II.属性设置 | III.操作说明 |
▲文本控件切图填充效果
▲用于文本控件切图填充的全屏图片 |    | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择切图“左图③所示”。 ▷拉动属性列表滑块 → 找到背景图片切图选择属性“左图④所示”并点击箭头处 → 点击选择更多“左图⑤所示”，软件弹出图片选择对话框 → 点击我们要添加的图片“左图⑥所示”→ 点击确定“左图⑦所示”。即完成了为控件设置切图填充背景。 其他：如何省掉第⑤、⑥、⑦步？在第④步的地方直接输入图片在资源文件中的ID，图片资源文件怎么用，请查阅【资源文件使用说明】。 注：控件背景选择切图填充时，用于切图填充的图片必须是全屏图片（即图片分辨率和屏分辨率相同、显示方向相同）。 |
仅X系列支持
文本控件背景为透明背景。
| I.显示预览 | II.属性设置 | III.操作说明 |
 |  | ▷鼠标单击选中控件； ▷拉动属性列表滑块 → 找到背景填充方式属性“左图①所示”→ 点击单色出现下拉框“左图②所示”→ 点击选择透明“左图③所示”。即完成了控件背景透明。 注：控件背景填充方式使用透明填充时，控件只有内容会显示，自己没有背景，控件背后是什么就能看到什么，如左侧显示预览效果。 |
5.3.1通过“按下或弹起事件”改变当前页面中文件浏览器控件选中的文件
例(1)：按下当前页面中的按钮，让当前页面中的文件浏览器fbrowser0选中第四个文件。（先从左往右，再从上到下。起始位为0）
按钮“弹起事件 或 按下事件”里面代码如下：
fbrowser0.val=3
代码解释：
fbrowser0 ：当前页面中，控件名称为 fbrowser0 的文件浏览器控件
.val ：文件浏览器控件 fbrowser0 属性列表中的其中一个属性，当前选中序号项。
= ：C语言赋值符号
3 ：3 为数值
5.3.2通过单片机串口改变当前页面中文件浏览器控件选中的文件
示例(1)：串口发送数据让当前页面中的文件浏览器控件fbrowser0选中第四个文件。（先从左往右，再从上到下。起始位为0）
串口发送数据代码：
Serial.print("fbrowser0.val=3");
Serial.write(hexEND,3);
代码解释：
Serial.print(); 单片机串口发送字符串函数
"fbrowser0.val=3" 需要发给屏的C语言字符串命令
Serial.write(); 单片机串口发送16进制函数
hexEND,3 提前定义好的元素为3个16进制 0xff 的数组
5.3.3通过串口助手改变当前页面中文件浏览器控件选中的文件
示例(1)：串口发送数据让当前页面中的文件浏览器控件fbrowser0选中第四个文件。（先从左往右，再从上到下。起始位为0）
串口助手发送数据代码：
fbrowser0.val=3
ff ff ff
| 串口助手截图 | 操作说明 |
 | ① 选择串口号（选择你电脑连接屏使用的串口号） ② 设置波特率 |
  | ③ 输入字符串指令 ④ 输入16进制结束符 |
5.4.1通过“按下或弹起事件”改变当前页面中文件浏览器控件的“背景颜色”
例(1)：按下当前页面中的按钮，把当前页面中的文件浏览器控件fbrowser0的背景色改成绿色。
按钮“弹起事件/或按下事件”里面代码如下：
fbrowser0.bco=1024
代码解释：
fbrowser0 ：当前页面中，控件名称为 fbrowser0 的文件浏览器控件
.bco ：文件浏览器控件 fbrowser0 属性列表中的其中一个属性，叫控件【背景色】。
= ：C语言赋值符号
1024 ：绿色的色码，通过控件属性的背景颜色对应的色码，知道1024是绿色
。（如果你想设置的颜色，不清楚色码是多少，可以通过控件属性列表中控件，背景填充查找颜色来获取颜色色码。）
5.4.2通过“按下或弹起事件”改变其他页面中文件浏览器控件的“背景颜色”
例(2)：按下当前页面中的按钮，把其他页面（页面名称叫 set）中的文件浏览器控件背景色改成绿色。
注：fbrowser0控件属性vscope必须设置为全局，否则会报错。
按钮“弹起事件/或按下事件”里面代码如下：
set.fbrowser0.bco=1024
代码解释：
set ：页面名称
.fbrowser0 ：set页面中名字为 fbrowser0 的文件浏览器控件
.bco ：文件浏览器控件 fbrowser0 属性列表中的其中一个属性，叫控件【背景色】。
= ：C语言赋值符号
1024 ：绿色的色码，通过控件属性的背景颜色对应的色码，知道1024是绿色。（如果你想设置的颜色，不清楚色码是多少，可以通过控件属性列表中控件，背景填充查找颜色来获取颜色色码。）
参考文本控件
注：此功能目前只有【X3系列 和 X5系列】产品支持。
| 加载特效示意图 | 属性设置 | 操作说明 |
控件设置加载特效后，当控件所在页面刷新时，控件会按照设置的加载方式呈现出来。 注：由于本页面不支持视频，无法展示动态效果。只能用图文简要说明。不便之处敬请谅解。 |  | ▷属性设置方法： 控件加载特效默认是“立即加载”即无特效。 鼠标单击选中控件 → 在属性列表中找到“加载特效”选项（如左图①所示）并点击箭头处，会弹出下来列表（如图②所示），选择一个你想要的的加载方式，即完成控件加载特效设置。 ▷其他： 你可能已经注意到了，“加载特效”这个属性是绿色，也就是说屏在运行时加载特效是允许改变的。加载特效的改变方法和改变文本控件背景色的操作一致，唯一不同的是“属性名称不一样”参数不一样。 |
参考文本控件
文本控件移动示例：
注：此功能目前只有【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坐标不用赋值。 特别说明： 控件移动只是移动位置，控件的所有功能不会因为移动而改变，非常方便有运行中移动空加需求的场景使用（例如：密码键盘、操作菜单等等） 控件移出显示区，根据自己需要使用。 另外，如果您只是想不让控件显示出来，可以用隐藏指令，不需要用移动指令。点击查阅【隐藏指令】的使用。 |
通过文件浏览器以及相关指令，控件实现文件系统操作 点击下载
素材说明：
文件浏览器显示文件，文件夹。
文件流打开，读取文件显示在相应控件上。
相关方法 up方法
相关指令 newfile指令 newdir指令 deldir指令 redir指令 findflie指令 finddir指令 refile指令 redir指令 这些指令实现文件系统对文件的基本操作。
相关控件 外部图片控件 视频控件
注:视频视频属性from设置外部文件
电脑是有虚拟sd卡文件夹 可以在电脑模拟和调试好之后 再下载屏上仿真。（存放路径：菜单栏—文件—虚拟sd卡文件夹）
①文件浏览器没办法显示文件，虚拟sd卡文件夹有文件，模拟器调试显示空白
可能原因：有另外一个模拟器调试窗口已经打开文件浏览器。
解决办法：关闭另外一个模拟器调试窗口。
②文件浏览器如何过滤显示文件
通过设置属性filter。
例:*.data； 文件浏览器只显示和读取文件名为data和文件夹。
例:*.data|*.txt； 文件浏览器只显示和读取文件名为data和txt、文件夹。
③文件浏览器是否可替换显示的文件和文件夹图片
可以，通过设置属性pic1 pic2 vvs2。
④文件浏览器显示文件名、文件夹乱码
可能原因：文件浏览器控件font属性调用字库非utf-8字符编码。
解决办法：做一个字库编码格式是utf-8字符编码，文件浏览器控件font属性再调用该字库。
END
5.控件详解/23.文件浏览器控件.txt · 最后更改: 2022/12/19 16:44 由 wwd 浏览次数:890443/323313410(本页/全站)