AWTK 开源串口屏开发(8) - 系统设置

AWTK 开源串口屏开发 - 系统设置

系统设置只是一个普通应用程序，不过它会用 默认模型 中一些内置的属性和命令，所以这里专门来介绍一下。

1. 功能

在这个例子会用到 默认模型 中一些下列内置的属性和命令：

• 内置属性

• 内置命令

2. 创建项目

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

最好不要放到其它目录，因为放到其它目录需要修改配置文件中的路径，等熟悉之后再考虑放到其它目录。路径中也不要中文和空格，避免不必要的麻烦。

3. 制作界面

用 AWStudio 打开上面 settings 目录下的 project.json 文件。

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

再创建一个新窗口，命名为 basic，并加入下面的控件，并调节位置和大小，做出类似下面的界面。

再创建一个新窗口，命名为 rtc，并加入下面的控件，并调节位置和大小，做出类似下面的界面。

需要给编辑器设置输入类型、最大值和最小值。实际项目可能会用文本选择控件代替编辑器，不过绑定方法是一样的。

3. 添加绑定规则

3.1 主界面 (home_page)

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

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

命令和参数要用英文大括号括起来。

3.2 基本设置 (basic)

• 将 背光 滑动条 绑定到 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}

CloseWindow=true，表示执行命令并关闭当前窗口。

命令和参数要用英文大括号括起来。

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

3.3 时间设置 (rtc)

• 将 年 编辑器 绑定到 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}

nothing 是一个特殊命令，表示什么也不做。

CloseWindow=true，表示执行命令并关闭当前窗口。

命令和参数要用英文大括号括起来。

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

4. 初始化数据

修改资源文件 design/default/data/default_model.json, 将其内容改为：

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

注意：

• 如果文件内容有中文（非 ASCII 字符），一定要保存为 UTF-8 格式。

• 重新打包资源才能生效。

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

修改资源文件 design/default/data/settings.json, 将其内容改为：

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

如果有多个数据需要持久化，将它们加入到 settings 对象中即可。为了避免不同串口屏应用程序之间，持久化数据覆盖，这里的 name 需要取一个唯一的名字。

注意：

• 如果文件内容有中文（非 ASCII 字符），一定要保存为 UTF-8 格式。

• 重新打包资源才能生效。

5. 编译运行

运行 bin 目录下的 demo 程序。

程序退出时会自动保存需要保存的数据。

7. 注意

本项目并没有编写界面相关的代码，AWStudio 在 src/pages 目录下生成了一些代码框架，这些代码并没有用到，可以删除也可以不用管它，但是不能加入编译。