AWTK 串口屏开发(2) - 数据绑定高级用法

AWTK 串口屏 智能家居示例

1. 功能

这个例子稍微复杂一点,界面这里直接使用了 立功科技 ZDP1440 HMI 显示驱动芯片 例子中的 UI 文件和资源,重点关注数据绑定。在这里例子中,模型(也就是数据)里包括一台空调和一台咖啡机:

变量名数据类型功能说明
空调_开关布尔空调开关
空调_模式整数空调模式 (0: 制冷;1: 制热;2: 送风;2: 除湿;4: 自动)
空调_风速整数0-4 共五档
空调_垂直风向整数垂直风向 (0: 自动;1:上;2:中;3:下)
空调_水平风向整数水平风向(0:自动;1:左;2:中;3:右)
空调_温度整数温度(0-40)
咖啡_开关布尔咖啡开关
咖啡_类型整数类型 (0: 卡布奇诺;1: 拿铁;2: 美式;3: 意式)
咖啡_温度整数温度(0-100)
咖啡_口味整数口味 (0: 浓郁;1: 丝滑;2: 清淡;3: 平衡;4: 温和)
咖啡_热奶整数热奶 (0: 少量;1: 较少;2: 较多;3: 大量)
咖啡_奶泡整数奶泡 (0: 少量;1: 较少;2: 较多;3: 大量)
咖啡_水量整数水量 (50-350ml)
咖啡_剩余时间整数制作时间(格式:分钟:秒)
咖啡_开始制作布尔开始制作

2. 创建项目

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

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

3. 制作界面

界面和资源就直接用 立功科技 ZDP1440 HMI 显示驱动芯片 例子了:

  • 主界面

在这里插入图片描述

  • 空调界面

在这里插入图片描述

  • 咖啡机界面

在这里插入图片描述

3. 添加绑定规则

里面的控件太多,为了不至于太累赘,不同类型的绑定只举一个例子:

完整示例可以参考 hmi/demo_home2

3.1 温度设置

这种两个按钮带一个静态文本的组合很常见。

在这里插入图片描述

  • 中间的静态文本
绑定属性绑定规则说明
v-data:value{空调_温度+‘℃’}
  • 右边的按钮(增加)
绑定属性绑定规则说明
v-on:click{fscript, Args=set(空调_温度,min(空调_温度+1, 40))}这里用函数 set 将变量空调_温度增加 1 度。min 函数保证变量的值不会超出 40。
  • 左边的按钮(减少)
绑定属性绑定规则说明
v-on:click{fscript, Args=set(空调_温度,max(空调_温度-1, 40))}这里用函数 set 将变量空调_温度减少 1 度。max 函数保证变量的值不会小于 0。

v-on:click 是一个常见的事件,最好记住,可以提高效率。

3.2 模式选择

这个用一组单选按钮实现,将多个单选按钮放到 group_box 里(将多个单选按钮放到 view 里也可以,只是需要为每个单选按钮编写绑定规则)。

在这里插入图片描述

  • 如果绑定规则写到 group_box 上。这样写即可:
绑定属性绑定规则说明
v-data:value{空调_模式}
  • 如果使用 view 作为容器,则麻烦一点。需要为每个单选按钮编写两条绑定规则:
绑定属性绑定规则说明
v-data:value{空调_模式 == 0}这里的 0 是单选按钮的序数,根据实际情况调整
v-on:click{fscript, Args=set(空调_模式,0)}这里的 0 是单选按钮的序数,根据实际情况调整

这种方式虽然麻烦,但是可以处理变量的值不是从 0 开始或者不连续的情况。

3.3 模式显示

模式用一个静态文本显示。问题在于,模式在内部用一个正整数表示,而显示的是一个用户可以理解的字符串。所以需要一个转换函数 one_of:

在这里插入图片描述

绑定属性绑定规则说明
v-data:valuev-data:value="{one_of(‘制冷;制热;送风;除湿;自动’, 空调_模式)}这里的 one_of 的功能是从指定的字符串数组中取出对应的子串。

3.4 剩余时间

剩余时间用一个静态文本显示。问题在于,剩余时间在内部用一个正整数表示(秒数),而显示的是“分钟:秒”。所以需要一个转换表达式:

在这里插入图片描述

绑定属性绑定规则说明
v-data:valueint(咖啡_剩余时间/60) + ‘:’ + 咖啡_剩余时间%60}表达是按浮点数计算的,这里的 int 将结果转换为正数。

5.5 隐藏视图

在点击开关按钮时,会自动显示或隐藏右边的设置视图。这是通过将视图的可见性(visible)绑定到开关的状态实现的:

绑定属性绑定规则说明
v-data:visible{空调_开关}

5.6 指定窗口的模型为 default

这是最简单也是最关键的一步:

绑定属性绑定规则说明
v-modeldefault

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

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

4. 初始化数据

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

{"空调_开关" : false,"空调_模式" : 3,"空调_风速" : 3,"空调_垂直风向" : 1,"空调_水平风向" : 1,"空调_温度": 25,"咖啡_开关" : false,"咖啡_类型" : 1,"咖啡_温度" : 60,"咖啡_口味" : 1,"咖啡_热奶" : 1,"咖啡_奶泡" : 1,"咖啡_水量" : 150,"咖啡_剩余时间" : 200,"咖啡_开始制作" : false
}

注意:

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

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

5. 编译运行

运行 bin 目录下的 demo 程序。

在这里插入图片描述

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

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

  • 在界面上修改参数,会看到模拟器上收到了对应的事件:

在这里插入图片描述

  • 在模拟器中设置变量 咖啡_类型 的数据,HMI 端的界面也会自动更新。

在这里插入图片描述

7. 注意

  • 完整示例可以参考 hmi/demo_home2

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

  • 本项目中的界面和资源来自 立功科技 ZDP1440 HMI 显示驱动芯片 例子,仅用于演示,不可用于商业用途。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/224337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

申请香港高才通计划有什么好处和优势?

申请香港高才通计划有什么好处和优势? 据香港特区政府最新消息,截至今年11月底,各项输入人才计划共收到超过20万宗申请,是2022年申请数目的接近四倍。 在香港特区政府积极引进人才的推动下,今年首11个月,超…

FreeModbus--学习函数指针

目录 函数指针 最简单的例子 稍作修改例子 引入协议栈的函数指针 引入协议栈第二处函数指针 函数指针 该协议栈中使用到函数指针,现开展一篇专门存放函数指针的文章。 C语言的函数指针是指向函数的指针变量,可以用来存储和调用函数的地址。在C语言中…

Vue 组件传参 emit

emit 属性:用于创建自定义事件,接收子组件传递过来的数据。 注意:如果自定义事件的名称,和原生事件的名称一样,那么只会触发自定义事件。 setup 语法糖写法请见:《Vue3 子传父 组件传参 defineEmits》 语…

Qt容器QMdiArea 小部件提供一个显示 MDI 窗口的区域

## QMdiArea ## 控件简介 QMdiArea 继承 QAbstractScrollArea。QMdiArea 小部件提供一个显示 MDI 窗口的区域。QMdiArea的功能本质上类似于MDI窗口的窗口管理器。大多数复杂的程序,都使用MDI框架,在 Qt designer 中可以直接将控件 MDI Area 拖入使用。 ## 用法示例 例 qm…

Arduino驱动BMP280气压温度传感器(压力传感器)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 BMP280气压传感器具有温度检测和大气压检测双重功能,它是基于博世经过验证的压阻式压力传感器技术,具

C++学习-2023/12/13-C++函数上的改变

内联思想:提高效率 短小精悍 用inline修饰的函数 在结构体或者类型实现的函数,默认为内联函数 重载思想 C允许同名不同参的函数存在 参数个数不同 参数类型不同 参数顺序不同(建立在存在不同类型) const不构成重载 缺省思想&…

luceda ipkiss教程 49:以pcell的方式定义线路

在ipkiss中,通常以i3.Circuit来设计线路(见教程2),以i3.Pcell的框架也可以来设计线路: 以SplitterTree为例: 线路仿真结果: 所有代码如下: from si_fab import all as pdk import…

【Python】按升序排列 Excel 工作表

发现按名称对 Excel 工作表进行排序很麻烦,因此创建了一个代码来使用 Python 的 openpyxl 对它们进行排序。 1. 本次创建的代码概述 在GUI中指定一个Excel文件(使用Tkinter。这是一个标准模块,因此不需要安装)加载Excel文件&…

带你手把手解读firejail沙盒源码(0.9.72版本)(四)fnet()

文章目录 功能概述main.cveth.cnet_create_vethnet_create_macvlannet_create_ipvlannet_move_interface fnet.h代码解释 arp.carp_scanwhile 循环 interface.cnet_bridge_add_interfacenet_if_upnet_get_mtunet_set_mtunet_ifprintnet_get_macnet_if_ipnet_if_macnet_if_ip6 ├…

#mybatis #mapper.xml 分步查询 与 级联查询 一对多案例

分步查询 <!-- 部门 Mapper XML 文件 --><!-- 查询某个部门及其下的所有员工&#xff0c;使用 resultMap 定义嵌套查询 --> <select id"selectDepartmentWithEmployees" resultMap"DepartmentWithEmployeesResultMap">SELECT * FROM de…

HarmonyOS应用开发者高级认证

系列专题 HarmonyOS应用开发者基础认证【闯关习题 满分答案】 HarmonyOS应用开发者基础认证【满分答案】 HarmonyOS云开发基础认证【最新题库 满分答案】 HarmonyOS应用开发者高级认证【最新题库 包过答案】 如有新题目可以私信我添加进来 HarmonyOS应用开发者高级认证 系列专…

ShellCode注入程序

程序功能是利用NtQueueApcThreadEx注入ShellCode到一个进程中&#xff0c;程序运行后会让你选择模式&#xff0c;按1为普通模式&#xff0c;所需的常规API接口都是使用Windows原本正常的API&#xff1b;在有游戏保护的进程中Windows原本正常的API无法使用&#xff0c;这时候需要…

【Stable Diffusion】在windows环境下部署并使用Stable Diffusion Web UI---通过 Conda

本专栏主要记录人工智能的应用方面的内容&#xff0c;包括chatGPT、AI绘图等等&#xff1b; 在当今AI的热潮下&#xff0c;不学习AI&#xff0c;就要被AI淘汰&#xff1b;所以欢迎小伙伴加入本专栏和我一起探索AI的应用&#xff0c;通过AI来帮助自己提升生产力&#xff1b; 订阅…

[SSD 测试 1.2] SerialTek PCIe/NVMe协议分析仪

依公知及经验整理,原创保护,禁止转载。 专栏 《深入理解SSD》 <<<< 返回总目录 <<<< 全文 3800 字 前言 NVMe SSD权威组织UNH IOL官方网站指定的三个测试/分析工具给大家做一个测试技术普及,这些产品和工具出现在UNH IOL组织的Plugfest就会碰到这…

Oracle创建定时任务——-job

授权 说明&#xff1a; grant create job to xxx; grant manage scheduler to xxx; 必须授这两个用户权限 SQL> grant create job to zxin_jzfp;授权成功。SQL> grant manage scheduler to zxin_jzfp;授权成功。SQL> grant update any table to zxin_jzfp;授权成功。…

计算机网络:物理层(三种数据交换方式)

今天又学到一个知识&#xff0c;加油&#xff01; 目录 前言 一、电路交换 二、报文交换 三、分组交换 1、数据报方式 2、虚电路方式 3、比较 总结 前言 为什么要进行数据交换&#xff1f; 一、电路交换 电路交换原理&#xff1a;在数据传输期间&#xff0c;源结点与…

无机物及分析化学3d虚拟实验室软件提高教学效果

VR化学虚拟仿真实验室软件可以解决以下难题&#xff1a; 实验场地限制&#xff1a;传统的化学实验室需要占用大量的物理空间&#xff0c;并且需要严格的安全措施。而VR技术可以提供一个虚拟的实验室环境&#xff0c;不受空间限制&#xff0c;可以同时容纳更多的学生参与实验。 …

分类信息网商业运营版源码系统:适合各类行业分类站点建站 带安装部署教程

随着互联网的快速发展&#xff0c;信息分类网站在各个行业中得到了广泛应用。为了满足不同行业的需求&#xff0c;罗峰给大家分享一款适合各类行业分类站点建站的商业运营版源码系统。该系统旨在提供一套完整的解决方案&#xff0c;帮助用户快速搭建自己的分类信息网站&#xf…

深入分析ClassLocader工作机制

文章目录 一、ClassLoader简介1. 概念2. ClassLoader类结构分析 二、ClassLoader的双亲委派机制三、Class文件的加载流程1. 简介2. 加载字节码到内存3. 验证与解析4. 初始化Class对象 四、常见加载类错误分析1. ClassNotFoundException2. NoClassDefFoundError3. UnsatisfiledL…

jmeter,动态参数之随机数、随机日期

通过函数助手&#xff0c;执行以下配置&#xff1a; 执行后的结果树&#xff1a; 数据库中也成功添加了数据&#xff0c;对应字段是随机值&#xff1a;