1. 控件概念

控件由属性和事件组成,上位机中编辑窗口如下图:

控件组成窗口

1.1. 属性

  1. 属性是配置控件显示的效果。如按钮控件的背景颜色、按钮的名字、是否圆角等,这些都可以通过属性来配置。

  2. 属性分为读写和只读两种,具体可以在上位机选中属性后,在下方查看详细描述。

控件属性只读读写

只读 :表示脚本对该属性只能读,不能赋值。如: b0.name="btn0"; 脚本会报错! ( 注意 :只读指的是串口屏运行了,脚本不能修改,上位机是正常编辑的!

读写:表示脚本对该属性可读可写,即可以赋值。 b0.x=100; 是正确的!

提示

不同控件,同一属性,是否可写是不一样的。如:页面控件的坐标属性 x y 就是不可写的。以上位机属性窗口下方的属性描述为准!


1.2. 事件

  1. 控件按下后触发按下事件、松开触发弹起事件。还有其他事件,如滑动事件、定时事件等。

  2. 事件窗口中我们可以编写脚本实现各种功能。

事件窗口

  1. 不同的控件拥有的事件不同。

控件事件汇总

事件名称

说明

支持的控件

弹起事件

控件按下且弹起后执行

所有可触摸控件

(定时器、音频、

变量、键盘按钮等除外)

按下事件

控件按下后执行

所有可触摸控件

(定时器、音频、

变量、键盘按钮等除外)

长按事件

按钮一直按下,达到设定时间后执行一次

按钮

页面离开

切换页面时,执行当前页面的离开事件

页面

页面初始化前

当前页面开始加载,在刷新UI之前执行

页面

页面初始化后

当前页面开始加载,并且已经刷新UI之后执行

页面

键盘输入结束

文本类控件使用键盘输入在关闭时执行

文本、滚动文本

数值文本、图片数值

定时器事件

定时器控件计时到了

定时器

滑动事件

滑块控件拖动后

注意:按住不拖动不触发,持续拖动30ms执行一次

滑块

播放完事件

音频或视频播放完成后执行

音频、视频

RTC计时结束

RTC控件设为计时模式时,计时结束执行

RTC控件

待机事件

工程添加了屏保页面,屏幕进入了待机状态执行

屏保控件

唤醒事件

屏幕进入了待机状态,串口接收到数据

数据或被触摸后屏幕唤醒并执行

屏保控件


1.3. 通用属性详解

1.3.1. 基础属性

基础属性

  • 控件名字(name) :

    • 属性描述:控件的名字(只读)

    • 上位机可编辑

  • 控件类型(type)

    • 控件类型(只读)

    • 控件类型的枚举值,脚本访问意义不大。

  • 控件序号(id)

    • 属性描述:控件序号(只读)

    • 一个页面中每个控件的id都是唯一的,页面控件固定为0

    • 添加控件时id自动确定,上位机无法编辑,脚本也无法修改

    • id用途:脚本使用名称组操作控件,参考: 控件组写法使用

  • 全局(pub)

    • 属性描述:私有:仅当前页面可访问,全局:可跨页面访问,0-私有 1-全局(只读)

    • 全局:表示该控件所有属性加载到运行内存中,脚本修改了属性,切换页面也不会丢失。

    • 注意1:定时器设为全局,并不会实时计时!页面加载了,定时器才开始计时!

    • 注意2:设为全局会占用运行内存,非必要不建议设为全局!

  • 透明度(opa)

    • 属性描述:透明度,范围0-255,255为不透明(读写)

  • 可触摸(touch)

    • 控件是否可触摸:0-否 1-是,设为否,底层可触摸的控件将得到触摸(读写)

    • 举例:文本类控件、RTC控件设为否,叠加在按钮控件之上,触摸后执行的是按钮的脚本。



1.3.2. 坐标属性

坐标属性

  • 横坐标(x):

    • 属性描述:横坐标(读写)

  • 纵坐标(y):

    • 属性描述:纵坐标(读写)

  • 宽度(w):

    • 属性描述:宽度(只读)

  • 高度(h):

    • 属性描述:高度(只读)

提示

页面、系统键盘、屏保等页面类型的控件,xywh都是只读,并且上位机不可编辑!



1.3.3. 背景属性

背景属性

  • 类型(type):

    • 属性描述:背景类型:0-颜色,1-图片,2-透明,3-切图(只读)

    • 设为图片,控件的宽和高会自适应图片的尺寸。

    • 设为透明,只显示文本

    • 设为切图,图片是全屏的,然后显示控件大小的区域。(注意:非全屏图,控件要放到左上角,否则可能没显示!)

  • 默认颜色(color):

    • 属性描述:默认颜色(读写)

    • 背景类型设为颜色才有此属性

  • 按下颜色(color2):

    • 属性描述:按下颜色(读写)

    • 背景类型设为颜色才有此属性

  • 默认图片(pic):

    • 属性描述:默认图片id,范围0-65535,65535表示无(读写)

    • 背景类型设为图片、切图才有此属性

  • 按下图片(pic2):

    • 属性描述:按下图片id,范围0-65535,65535表示无(读写)

    • 背景类型设为图片、切图才有此属性

提示

这里举例的是按钮的背景属性,不同控件背景属性不一样,具体以控件为准!



1.3.4. 加载属性

默认情况下,页面加载时控件立即显示。但配置了加载属性,可实现控件从任一方位(如左上角)慢慢的移动到做标属性的(x,y)处。

加载属性

  • 加载类型(type):

    • 属性描述:加载特效:0-立即加载 1-从上飞入 2-从下飞入 3-从左飞入 4-从右飞入 5-左上飞入 6-右上飞入 7-左下飞入 8-右下飞入

  • 加载时间(time):

    • 属性描述:加载时间(毫秒),范围:0-65535(读写)

  • 加载效果(mode):

    • 属性描述:特效模式:0-线性 1-缓入 2-缓出 3-缓入缓出 4-过冲 5-反弹(读写)

线性演示gif

线性

缓入演示gif

缓入

缓出演示gif

缓出

缓入缓出演示gif

缓入缓出

过冲演示gif

过冲

反弹演示gif

反弹

1.3.5. 文本属性

拥有文本属性的控件:按钮、自锁按钮、文本、滚动文本、数值文本。但不同控件的文本属性有点小区别,具体看相应的控件。这里说的是按钮的文本。

按钮文本属性

  • 文本值(str):

    • 属性描述:文本值,即字符串(读写)

    警告

    确保字体(font)选择的字库中含有输入的字符,否则显示不出来!

  • 最大长度(size):

    • 最大长度(size):文本最大长度(字节),范围0-4096,UTF8编码下中文字符占用3个字节,其他编码中文字符占用2个字节, 注意: 键盘输入受限于此值(只读)

    警告

    1. 键盘输入确定后,文本值显示不全,请检查size大小是否足够!

    2. 上位机输入文本值(str),size会自动增大,但不会自动减小,可以手动改小。

  • 字体(font):

    • 属性描述:字库id,范围0-65535,65535表示无(读写)

  • 水平对齐方式(alx):

    • 属性描述:水平对齐,0-靠左 1-居中 2-靠右(读写)

  • 垂直对齐方式(aly):

    • 属性描述:垂直对齐,0-靠上 1-居中 2-靠下(读写)

  • 文本颜色(color):

    • 属性描述:文本默认颜色(读写)

  • 按下颜色(color2):

    • 属性描述:文本按下颜色(读写)

  • 自动换行(wrap):

    • 属性描述:自动换行,0-否 1-是(读写)

  • 水平间距(row):

    • 属性描述:字符水平间距,单位像素,范围0-65535(读写)

  • 垂直间距(col):

    • 属性描述:字符垂直间距,单位像素,范围0-65535(读写)