0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

【AWTK开源智能串口屏方案】设计UI界面并上传到串口屏

ZLG致远电子 2024-02-22 08:24 次阅读

本篇文章将介绍如何使用AWStudio设计串口屏端的UI界面和添加绑定规则,以及怎么将资源文件上传到串口屏端。引言:AWTK-HMI是基于AWTK与AWTK-MVVM开发的低代码智能串口屏方案,本系列文章介绍如何从零开发HMI程序,包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。

简介

本篇文章将介绍如何使用AWStudio设计UI界面以及如何将设计好的UI界面上传到串口屏HMI端上。在AWStudio上设计好界面后只需要打包资源文件,将资源文件拷贝到串口屏端(HMI端)对应位置即可,整个过程无需重新编译HMI端代码。

ca70d8c6-d118-11ee-9118-92fbcf53809c.png

图1 AWTK-HMI工作原理

使用AWStudio设计UI界面

在原本的demo_home2示例中,已经实现了“空调”与“咖啡机”的界面,这里就以实现“灯光”界面为例子来介绍如何使用AWStudio设计HMI端UI界面,在该界面将要实现显示灯光亮度和设置灯光亮度两个功能。

1. 导入AWTK-HMI官方示例

首先,从官方的Gitee下载awtk-hmi仓库到本地目录,并使用AWStudio导入awtk-hmi/hmi/demo_home2例程。

ca74d0ac-d118-11ee-9118-92fbcf53809c.png图2在AWStudio中导入demo_home2示例2. 新增界面并设置点击按钮跳转界面点击AWStudio中的“新建窗体”按钮,新建一个Window类型的窗体作为“灯光”功能的界面。然后选中“light_btn”控件,通过修改“v-on:click”属性使用navigate窗口导航器便可以实现点击该按钮跳转到新建好的界面,如下图Args参数就是新建窗体的名称。v-on:click=”{navigate, Args=light_win}”

ca78b9f6-d118-11ee-9118-92fbcf53809c.png

图3使用窗口导航器实现界面跳转3. 界面设计与布局界面布局可以使用AWStudio自行设计喜欢的界面,如下图:

ca7c6eca-d118-11ee-9118-92fbcf53809c.png

图4“灯光”界面整体布局

为界面内的控件添加绑定规则

接下来为界面中的部分控件添加上绑定规则,这里拿最简单的设置变量与显示变量作为例子演示。

1. 为显示数据的控件添加绑定规则

在界面中有一个label控件用于显示当前的灯光亮度,可以添加绑定规则获取从MCU端发送过来的数据。绑定规则如下图,此时若MCU端发送了“真实_亮度”数据到串口屏端时,该label控件会同步更新text属性的值。v-data:text=”{真实_亮度+’%’}”ca80ea7c-d118-11ee-9118-92fbcf53809c.png图5为显示数据的控件添加绑定规则2.为设置数据的控件添加绑定规则除了获取数据之外,还需要为设置数据的滑动条控件添加绑定规则。绑定的规则如下,此时拖拽滑动条控件时MCU端就会收到关于“设定_亮度”的数据。v-data:value=”{设定_亮度}”ca84cbd8-d118-11ee-9118-92fbcf53809c.png

图6为设置数据的控件添加绑定规则

关于“真实_亮度”和“设定_亮度”两个变量的处理逻辑是在MCU端里面实现的,串口屏端无需理会。更多的绑定规则用法可以参考awtk-hmi/docs目录下的文档介绍,也可以直接参考awtk-hmi/hmi目录的demo。

3.初始化数据

完成控件的数据绑定后,可以通过修改资源文件来设置绑定数据的初始值,文件具体路径:

design/default/data/default_model.json

ca88e830-d118-11ee-9118-92fbcf53809c.png图7通过default_model.json设置数据初始值

将资源文件更新到串口屏端

假设您之前已经编译好HMI端的运行时程序,并成功运行在板子上了。现在通过AWStudio设计好界面后AWStudio设计好界面后,点击“项目”--“打包”选项打包资源文件,此时会在项目目录下的res文件夹内生成打包好的资源文件,接着替换板子上对应资源文件即可。

1. 嵌入式Linux

嵌入式Linux平台的资源文件位于release/assets目录中,直接将新的资源文件替换到此目录,最后只需要将HMI端的运行时程序杀掉再重启进程即可。

2.STM32

一般STM32平台的串口屏端是使用加载外部资源方式,所以同样只需更换外部存储设备的assets目录,替换文件之后需要重启STM32设备。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • mcu
    mcu
    +关注

    关注

    146

    文章

    17141

    浏览量

    351101
  • 开源
    +关注

    关注

    3

    文章

    3335

    浏览量

    42483
  • 串口屏
    +关注

    关注

    8

    文章

    532

    浏览量

    37426
收藏 人收藏

    评论

    相关推荐

    串口如何下工程

    串口 工业串口 组态串口 串口
    发表于 08-29 10:07 6次下载

    基于AWTK推出的ZMP110x串口应用方案

    串口广泛应用于工业自动化、智能家电、医疗设备、共享设备等各个显示领域。立功科技基于AWTK推出的ZMP110x串口
    发表于 07-25 17:16 1229次阅读

    大彩串口医用级首款圆形UI界面2.1寸串口新品正式发布!

    大彩串口医用级首款圆形UI界面2.1寸串口新品正式发布!该产品是一款2.1寸分辨率为 480
    的头像 发表于 09-01 14:25 2421次阅读
    大彩<b class='flag-5'>串口</b><b class='flag-5'>屏</b>医用级首款圆形<b class='flag-5'>UI</b><b class='flag-5'>界面</b>2.1寸<b class='flag-5'>串口</b><b class='flag-5'>屏</b>新品正式发布!

    AWTK 开源智能串口方案

    AWTK开源智能串口方案发布,旨在解决传统串口
    的头像 发表于 12-02 08:24 953次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b><b class='flag-5'>智能</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>方案</b>

    ​【AWTK开源智能串口方案方案介绍和工作原理

    串口方案,本系列文章介绍如何从零开发HMI程序,包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。AWTK
    的头像 发表于 12-21 08:24 992次阅读
    ​【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b><b class='flag-5'>智能</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>方案</b>】<b class='flag-5'>方案</b>介绍和工作原理

    AWTK 串口开发(3) - 告警信息

    告警信息是一个常用的功能。在AWTK开源串口中,内置告警信息模型,只需设计用户界面即可实现告警信息的显示和管理。1.功能告警信息是一个常用
    的头像 发表于 12-23 08:24 449次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(3) - 告警信息

    AWTK 串口开发(4) - 数据采集

    数据采用是一个常用的功能。在AWTK开源串口中,内置数据采样模型,只需设计用户界面即可实现采样数据的显示和管理。1.功能数据采集是一个常用
    的头像 发表于 12-30 08:24 399次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(4) - 数据采集

    AWTK 串口开发(5) - MCU端 SDK 用法

    AWTK开源智能串口,不但开放了串口端全部源码,
    的头像 发表于 01-06 08:24 429次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(5) - MCU端 SDK 用法

    AWTK 开源串口开发(6) - 定时器的用法

    定时器是个常用的功能,AWTK串口提供了丰富的定时器函数,用于定时器的启动、停止、暂停、恢复、修改和重置等功能,本文以计时器的例子来介绍定时器的基本用法。定时器也是一个常用的功能,在AWTK
    的头像 发表于 01-13 08:24 573次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(6) - 定时器的用法

    AWTK开源智能串口方案】HMI端程序移植编译及运行

    本篇文章介绍一下AWTK开源智能串口方案串口
    的头像 发表于 01-18 08:24 921次阅读
    【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b><b class='flag-5'>智能</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>方案</b>】HMI端程序移植编译及运行

    AWTK开源智能串口方案】MCU SDK使用与编译运行

    代码智能串口方案,本系列文章介绍如何从零开发HMI程序,包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。MCU端简
    的头像 发表于 02-19 12:11 1209次阅读
    【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b><b class='flag-5'>智能</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>方案</b>】MCU SDK使用与编译运行

    AWTK 开源串口开发(11) - 天气预报

    常用的功能,在很多设备上都有这个功能。实现天气预报的功能,不能说很难但是也绝不简单,首先需要从网上获取数据,再解析数据,最后更新到界面上。在AWTK串口中,内置
    的头像 发表于 03-05 08:24 401次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(11) - 天气预报

    AWTK 开源串口开发(12) - 记事本应用

    记事本是一个常用的应用程序,在AWTK串口中,内置文件模型和文件选择对话框,无需编写一行传统的代码,即可实现一个简单的记事本应用程序。记事本是一个很常用的应用,用来编辑和查看文本文件非常方便。在
    的头像 发表于 03-09 08:23 352次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(12) - 记事本应用

    AWTK 开源串口开发(14) - 界面重用

    AWTK串口支持同一个界面绑定不同的数据,本文以家居控制为例,介绍一下界面重用的方法。在家居控制应用中,我们演示了空调和咖啡机
    的头像 发表于 03-23 08:23 357次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(14) - <b class='flag-5'>界面</b>重用

    AWTK 开源串口开发(16) - 提供 MODBUS 服务

    AWTK串口内置MODBUS从站模型,不用编写一行代码即可让串口提供MODBUS服务,让远程设备通过MODBUS协议访问
    的头像 发表于 04-13 08:24 452次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b>开发(16) - 提供 MODBUS 服务