AWTK 串口屏开发(1) - Hello World

2023-12-13 03:34:20

1. 功能

这个例子很简单,制作一个调节温度的界面。在这里例子中,模型(也就是数据)里只有一个温度变量

变量名数据类型功能说明
温度整数温度。范围 (0-100) 摄氏度

2. 创建项目

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

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

3. 制作界面

用 AWStudio 打开上面 hello_world 目录下的 project.json 文件。里面有一个空的窗口,在上面加入下面的控件:

  • 静态文本
  • 环形进度条
  • 滑动条

并调节位置和大小,做出类似下面的界面。

在这里插入图片描述

3. 添加绑定规则

  • 环形进度条 绑定到 温度 变量。添加自定义的属性 v-data:value,将值设置为 {温度},如下图所示:

v-data:value 表示控件的值,后面会经常用到,建议记住它。

在这里插入图片描述

  • 滑动条 绑定到 温度 变量。添加自定义的属性 v-data:value,将值设置为 {温度},如下图所示:

在这里插入图片描述

  • 指定窗口的模型为 default。如下图所示:

在这里插入图片描述

严格的意义上说,绑定规则也是一种代码,不过相比于 C 语言,它有下面的优势:

  • 无需编译,直接运行
  • 简单,通常只有一行。
  • 易懂,声明式的语法。

4. 初始化数据

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

{
  "温度":25
}

注意:

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

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

5. 编译运行

运行 bin 目录下的 demo 程序,拖动滑动条上的滑块,滑动条的数据也会跟随改变。

在这里插入图片描述

6. 使用 MCU 模拟器与之进行交互

运行 mcu/simulator 目录下的 mcu_sim 程序,连接到 Localhost:2233。

  • 拖动滑动条上的滑块,会看到模拟器上收到了对应的事件:

在这里插入图片描述

  • 在模拟器中设置变量温度的数据,HMI 端的界面也会自动更新。

在这里插入图片描述

7. 注意

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

文章来源:https://blog.csdn.net/absurd/article/details/134883734
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。