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

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

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

1. 功能

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

内置属性

内置命令

2. 创建项目

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

3. 制作界面

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

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

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

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

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

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

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

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}

同样指定窗口的模型为 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}

同样指定窗口的模型为 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
    }
}

注意：

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

5. 编译运行

运行 bin 目录下的 demo 程序。

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

7. 注意

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

李先静