【技术分享】AWTK开源串口屏开发(8)-系统设置

系统设置是一个必需的功能，AWTK 串口屏的默认模型提供一些系统设置相关的属性和命令，实现系统设置非常简单。本文介绍一下音量、背光、时间和触屏音等常见系统设置的实现方法。

1. 功能

• 内置属性

• 内置命令

2. 创建项目

从模板创建项目，将 hmi/template_app 拷贝 hmi/settings 即可。

3. 制作界面

里面有一个空的窗口，在上面加入下面的控件，并调节位置和大小，做出类似下面的界面。

3. 添加绑定规则

3.1 主界面 (home_page)

• 将 基本设置 按钮的 点击 事件绑定到 navigate 命令。添加自定义的属性 v-on:click，将值设置为 {navigate, Args=basic}。

• 将 时间设置 按钮的 点击 事件绑定到 navigate 命令。添加自定义的属性 v-on:click，将值设置为 {navigate, Args=rtc}。

• 将 背光滑动条 绑定到 backlight 变量。添加自定义的属性 v-data:value，将值设置为 {backlight}。

• 将音量滑动条 绑定到 audio_volume 变量。添加自定义的属性 v-data:value，将值设置为 {audio_volume}。

• 将 开启屏幕音 绑定到 ui_feedback 变量。添加自定义的属性 v-data:value，将值设置为 {ui_feedback}。

• 让 确定 按钮的 点击 事件执行命令 “{save}”。添加自定义的属性 v-on:click，将值设置为：

{save, CloseWindow=true}

• 同样指定窗口的模型为 default。

• 将 年 编辑器 绑定到 rtc_year 变量。添加自定义的属性 v-data:value，将值设置为 {rtc_year}。

• 将 月 编辑器 绑定到 rtc_month 变量。添加自定义的属性 v-data:value，将值设置为 {rtc_month}。

• 将 日 编辑器 绑定到 rtc_day 变量。添加自定义的属性 v-data:value，将值设置为 {rtc_day}。

• 将 时 编辑器 绑定到 rtc_hour 变量。添加自定义的属性 v-data:value，将值设置为 {rtc_hour}。

• 将 分 编辑器 绑定到 rtc_minute 变量。添加自定义的属性 v-data:value，将值设置为 {rtc_minute}。

• 将 秒 编辑器 绑定到 rtc_second 变量。添加自定义的属性 v-data:value，将值设置为 {rtc_second}。

• 让 获取时间 按钮的 点击 事件执行命令 “{get_rtc}”。添加自定义的属性 v-on:click，将值设置为：

{get_rtc}

• 让 设置时间 按钮的 点击 事件执行命令 “{set_rtc}”。添加自定义的属性 v-on:click，将值设置为：

{set_rtc}

• 让 返回 按钮的 点击 事件执行命令 “{nothing}”。添加自定义的属性 v-on:click，将值设置为：

{nothing, CloseWindow=true}

• 同样指定窗口的模型为 default。

4. 初始化数据

{  "ui_feedback":true,  "audio_volume":60,  "backlight":60}

• 如果文件内容有中文（非 ASCII 字符），一定要保存为 UTF-8 格式。
• 重新打包资源才能生效。

5. 描述需要持久化的数据

{    "name": "hmi_settings",    "persistent": {        "ui_feedback": true,        "audio_volume": true,        "backlight": true    }}

• 如果文件内容有中文（非 ASCII 字符），一定要保存为 UTF-8 格式。
• 重新打包资源才能生效。

6. 编译运行

7. 注意

  产品推荐

  技术交流群