控件概念 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 控件由属性和事件组成，上位机中编辑窗口如下图： .. image:: image/控件概念/wid_base_btn.png :align: center :alt: 控件组成窗口 --------------------------------- 属性 --------------------------------- 1. 属性是配置控件显示的效果。如按钮控件的背景颜色、按钮的名字、是否圆角等，这些都可以通过属性来配置。 2. 属性分为读写和只读两种，具体可以在上位机选中属性后，在下方查看详细描述。 .. image:: image/控件概念/控件属性-只读读写.png :align: center :alt: 控件属性只读读写 | **只读** ：表示脚本对该属性只能读，不能赋值。如： ``b0.name="btn0";`` 脚本会报错！ **（ 注意** ：只读指的是串口屏运行了，脚本不能修改，上位机是正常编辑的！ **）** **读写**：表示脚本对该属性可读可写，即可以赋值。 ``b0.x=100;`` 是正确的！ .. hint:: 不同控件，同一属性，是否可写是不一样的。如：页面控件的坐标属性 ``x y`` 就是不可写的。以上位机属性窗口下方的属性描述为准！ --------------------------------- 事件 --------------------------------- 1. 控件按下后触发按下事件、松开触发弹起事件。还有其他事件，如滑动事件、定时事件等。 2. 事件窗口中我们可以编写脚本实现各种功能。 .. image:: image/控件概念/事件窗口.png :align: center :alt: 事件窗口 | 3. 不同的控件拥有的事件不同。 .. centered:: 控件事件汇总 +--------------+------------------------------------------------------+----------------------------------------+ | 事件名称 | 说明 | 支持的控件 | +==============+======================================================+========================================+ | 弹起事件 | 控件按下且弹起后执行 | 所有可触摸控件 | | | | | | | | （定时器、音频、 | | | | | | | | 变量、键盘按钮等除外） | +--------------+------------------------------------------------------+----------------------------------------+ | 按下事件 | 控件按下后执行 | 所有可触摸控件 | | | | | | | | （定时器、音频、 | | | | | | | | 变量、键盘按钮等除外） | +--------------+------------------------------------------------------+----------------------------------------+ | 长按事件 | 按钮一直按下，达到设定时间后执行一次 | 按钮 | +--------------+------------------------------------------------------+----------------------------------------+ | 页面离开 | 切换页面时，执行当前页面的离开事件 | 页面 | +--------------+------------------------------------------------------+----------------------------------------+ | 页面初始化前 | 当前页面开始加载，在刷新UI之前执行 | 页面 | +--------------+------------------------------------------------------+----------------------------------------+ | 页面初始化后 | 当前页面开始加载，并且已经刷新UI之后执行 | 页面 | +--------------+------------------------------------------------------+----------------------------------------+ | 键盘输入结束 | 文本类控件使用键盘输入在关闭时执行 | 文本、滚动文本 | | | | | | | | 数值文本、图片数值 | +--------------+------------------------------------------------------+----------------------------------------+ | 定时器事件 | 定时器控件计时到了 | 定时器 | +--------------+------------------------------------------------------+----------------------------------------+ | 滑动事件 | 滑块控件拖动后 | 滑块 | | | | | | | **注意**：按住不拖动不触发，持续拖动30ms执行一次 | | +--------------+------------------------------------------------------+----------------------------------------+ | 播放完事件 | 音频或视频播放完成后执行 | 音频、视频 | +--------------+------------------------------------------------------+----------------------------------------+ | RTC计时结束 | RTC控件设为计时模式时，计时结束执行 | RTC控件 | +--------------+------------------------------------------------------+----------------------------------------+ | 待机事件 | 工程添加了屏保页面，屏幕进入了待机状态执行 | 屏保控件 | +--------------+------------------------------------------------------+----------------------------------------+ | 唤醒事件 | 屏幕进入了待机状态，串口接收到数据 | 屏保控件 | | | | | | | 数据或被触摸后屏幕唤醒并执行 | | +--------------+------------------------------------------------------+----------------------------------------+ --------------------------------- 通用属性详解 --------------------------------- .. _基础属性: 基础属性 ^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/控件概念/基础属性.png :align: center :alt: 基础属性 | - **控件名字(name) :** + 属性描述：控件的名字（只读） + 上位机可编辑 - **控件类型(type)** + 控件类型（只读） + 控件类型的枚举值，脚本访问意义不大。 - **控件序号(id)** + 属性描述：控件序号(只读) + 一个页面中每个控件的id都是唯一的，页面控件固定为0 + 添加控件时id自动确定，上位机无法编辑,脚本也无法修改 + id用途：脚本使用名称组操作控件，参考： :ref:`控件组写法使用` - **全局(pub)** + 属性描述：私有:仅当前页面可访问,全局:可跨页面访问,0-私有 1-全局(只读) + 全局：表示该控件所有属性加载到运行内存中，脚本修改了属性，切换页面也不会丢失。 + 注意1：定时器设为全局，并不会实时计时！页面加载了，定时器才开始计时！ + 注意2：设为全局会占用运行内存，非必要不建议设为全局！ - **透明度(opa)** + 属性描述：透明度,范围0-255,255为不透明(读写) - **可触摸(touch)** + 控件是否可触摸：0-否 1-是,设为否,底层可触摸的控件将得到触摸(读写) + 举例：文本类控件、RTC控件设为否，叠加在按钮控件之上，触摸后执行的是按钮的脚本。 | | .. _坐标属性: 坐标属性 ^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/控件概念/坐标属性.png :align: center :alt: 坐标属性 | - **横坐标(x):** + 属性描述：横坐标(读写) - **纵坐标(y):** + 属性描述：纵坐标(读写) - **宽度(w):** + 属性描述：宽度(只读) - **高度(h):** + 属性描述：高度(只读) .. hint:: 页面、系统键盘、屏保等页面类型的控件，x\y\w\h都是只读，并且上位机不可编辑！ | | .. _背景属性: 背景属性 ^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/控件概念/背景属性.png :align: center :alt: 背景属性 | - **类型(type):** + 属性描述：背景类型:0-颜色,1-图片,2-透明,3-切图(只读) + 设为图片，控件的宽和高会自适应图片的尺寸。 + 设为透明，只显示文本 + 设为切图，图片是全屏的，然后显示控件大小的区域。（注意：非全屏图，控件要放到左上角，否则可能没显示！） - **默认颜色(color):** + 属性描述：默认颜色(读写) + 背景类型设为颜色才有此属性 - **按下颜色(color2):** + 属性描述：按下颜色(读写) + 背景类型设为颜色才有此属性 - **默认图片(pic):** + 属性描述：默认图片id,范围0-65535,65535表示无(读写) + 背景类型设为图片、切图才有此属性 - **按下图片(pic2):** + 属性描述：按下图片id,范围0-65535,65535表示无(读写) + 背景类型设为图片、切图才有此属性 .. hint:: 这里举例的是按钮的背景属性，不同控件背景属性不一样，具体以控件为准！ | | .. _加载属性: 加载属性 ^^^^^^^^^^^^^^^^^^^^^^^^^ 默认情况下，页面加载时控件立即显示。但配置了加载属性，可实现控件从任一方位（如左上角）慢慢的移动到做标属性的（x,y）处。 .. image:: image/控件概念/加载属性.png :align: center :alt: 加载属性 | - **加载类型(type):** + 属性描述：加载特效:0-立即加载 1-从上飞入 2-从下飞入 3-从左飞入 4-从右飞入 5-左上飞入 6-右上飞入 7-左下飞入 8-右下飞入 - **加载时间(time):** + 属性描述：加载时间(毫秒）,范围:0-65535(读写) - **加载效果(mode):** + 属性描述：特效模式:0-线性 1-缓入 2-缓出 3-缓入缓出 4-过冲 5-反弹(读写) .. image:: image/控件概念/线性.gif :align: center :alt: 线性演示gif .. centered:: 线性 .. image:: image/控件概念/缓入.gif :align: center :alt: 缓入演示gif .. centered:: 缓入 .. image:: image/控件概念/缓出.gif :align: center :alt: 缓出演示gif .. centered:: 缓出 .. image:: image/控件概念/缓入缓出.gif :align: center :alt: 缓入缓出演示gif .. centered:: 缓入缓出 .. image:: image/控件概念/过冲.gif :align: center :alt: 过冲演示gif .. centered:: 过冲 .. image:: image/控件概念/反弹.gif :align: center :alt: 反弹演示gif .. centered:: 反弹 .. _文本属性: 文本属性 ^^^^^^^^^^^^^^^^^^^^^^^^^ 拥有文本属性的控件：按钮、自锁按钮、文本、滚动文本、数值文本。但不同控件的文本属性有点小区别，具体看相应的控件。这里说的是按钮的文本。 .. image:: image/控件概念/按钮文本属性.png :align: center :alt: 按钮文本属性 | - **文本值(str):** + 属性描述：文本值,即字符串(读写) .. warning:: 确保字体（font）选择的字库中含有输入的字符，否则显示不出来！ - **最大长度(size):** + 最大长度(size)：文本最大长度(字节),范围0-4096,UTF8编码下中文字符占用3个字节,其他编码中文字符占用2个字节, **注意：** 键盘输入受限于此值(只读) .. warning:: 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(读写) | | | | | |