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

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

3天内不再提示

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

ZLG致远电子 2023-12-30 08:24 次阅读

数据采用是一个常用的功能。在 AWTK 开源串口屏中,内置数据采样模型,只需设计用户界面即可实现采样数据的显示和管理。

1. 功能

数据采集是一个常用的功能,MCU 定时采集数据(如环保设备定时采样空气中的污染物),并发送采样数据到串口屏,串口屏可以显示采样数据,也可以对采样数据进行管理(保存或清除)。

d9b7b316-a6a9-11ee-9ee2-92fbcf53809c.png

基本工作原理

  • MCU 端设置属性名为history_data,数据类型为字符串,数据格式为用|分隔的多个字段的数据。
  • 串口屏收到数据后,会把采样数据放到一个名为history_data的模型(数据)中。
  • 界面通过绑定规则将history_data模型中的数据关联到控件上。

d9ca85a4-a6a9-11ee-9ee2-92fbcf53809c.png

时间为 epoch 时间,方便内部存储和查询。

下面演示一下具体的实现方法。


2. 创建项目

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

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

3. 制作界面

用 AWStudio 打开上面 history_data 目录下的 project.json 文件。里面有一个空的窗口,在上面设计类似下面的界面:d9d712a6-a6a9-11ee-9ee2-92fbcf53809c.png

中间是一个列表视图,列表视图中放一个列表项,列表项中放 6 个文本控件,分别用来显示序数、时间、一氧化碳、二氧化氮、悬浮颗粒物、二氧化硫。

4. 添加绑定规则

第一次用到列表视图,有几点需要特别说明一下:

列表视图中的滚动视图需要指定v-for-items属性:

属性

说明

v-for-items

true

它保证其下的列表项,会根据数据自动生成

4.0.1 几个特殊的变量

index 特指序数。

item 特指当前的数据。比如在这里 ‘item.time’ 表示时间,‘item.一氧化碳’ 表示一氧化碳,‘item.二氧化氮’ 表示二氧化氮,‘item.悬浮颗粒物’ 表示悬浮颗粒物。

selected_index 表示当前选中的序数(可在列表视图之外绑定)。

items 表示当前列表视图中的数据个数(可在列表视图之外绑定)。

4.0.2 几个特殊的命令

set_selected 设置当前选中的序数(在列表项中使用)。

save 保存数据到文件(在列表视图之外的按钮上绑定)。

reload 重新加载数据(在列表视图之外的按钮上绑定)。

clear 清除所有数据(在列表视图之外的按钮上绑定)。

remove 删除指定序数的数据(在列表视图之外的按钮上绑定)。

4.1 序数

绑定属性

绑定规则

说明

v-data:value

{index}

index 特指序数。

4.2 时间

时间是整数(秒数),可以通过 item.time 来获取。

绑定属性

绑定规则

说明

v-data:value

{date_time_format(item.time, ‘Y-M-D h : m : s’)}

需要用date_time_format将 epoch 时间转换成人类可读的时间。

4.3 一氧化碳

可以通过 item.一氧化碳 来获取。

绑定属性

绑定规则

说明

v-data:value

{item.一氧化碳}

4.4 二氧化氮

可以通过 item.二氧化氮 来获取。

绑定属性

绑定规则

说明

v-data:value

{item.二氧化氮}

4.5 悬浮颗粒物

可以通过 item.悬浮颗粒物 来获取。

绑定属性

绑定规则

说明

v-data:value

{item.悬浮颗粒物}

4.6 二氧化硫

可以通过 item.二氧化硫 来获取。

绑定属性

绑定规则

说明

v-data:value

{item.二氧化硫}

4.7 列表项为了配合删除选中的采样数据,需要在列表项加两个绑定规则。

绑定属性

绑定规则

说明

v-on:click

{set_selected}

点击时将当前项目设置为选中

v-data:focused

{index==selected_index}

当前项目选中时高亮

4.8 删除当前选择的采样数据

绑定属性

绑定规则

说明

v-on:click

{remove, Args=selected_index}

selected_index 表示当前选中的项目

4.9 清除所有采样数据

绑定属性

绑定规则

说明

v-on:click

{clear}

4.10 保存采样数据

绑定属性

绑定规则

说明

v-on:click

{save}

4.11 重新加载采样数据

绑定属性

绑定规则

说明

v-on:click

{reload}

4.12 退出应用程序

绑定属性

绑定规则

说明

v-on:click

{nothing, QuitApp=true}

4.13 指定窗口的模型

指定窗口的模型为history_data。

d9e4e516-a6a9-11ee-9ee2-92fbcf53809c.png

5. 启用数据采样

修改 design/default/data/settings.json 文件,启用数据采样:

{ "name": "hmi_histroy_data1", "history_data": { "enable": true, /*是否启用数据采集*/ "fields": { "time": {}, /*时间必须用 'time',放在第一位*/ "一氧化碳" : { "min": 0, "max": 100, "unit": "mg/m³" }, "二氧化氮" : { "min": 0, "max": 110, "unit": "mg/m³" }, "悬浮颗粒物" : { "min": 0, "max": 120, "unit": "mg/m³" }, "二氧化硫": { "min": 0, "max": 130, "unit": "mg/m³" } }, "fields_seperator": "|", /*字段之间的分隔符*/ "max_rows": 1000 /*数据采集最大行数*/, "auto_save_interval": 60000 }}

6. 编译运行

运行 bin 目录下的 demo 程序。

d9b7b316-a6a9-11ee-9ee2-92fbcf53809c.png

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

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

通过模拟器发送数据,可以看到串口屏界面,自动添加采样数据。

d9f8d6f2-a6a9-11ee-9ee2-92fbcf53809c.gif

测试数据:

1702032398|3.1|3.2|3.3|3.4

8. 注意

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

  • 实际使用时,在 demo_history_data1/design/default/ui/home_page.xml 基础上进行调整即可,无需重复上面的过程,但是最好了解其中的原理。

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

    关注

    38

    文章

    5952

    浏览量

    113559
  • 串口屏
    +关注

    关注

    8

    文章

    532

    浏览量

    37356
  • awtk
    +关注

    关注

    0

    文章

    43

    浏览量

    216
收藏 人收藏

    评论

    相关推荐

    matlab串口数据采集

    本文主要介绍了matlab串口数据采集,matlab功能强大,串口操作也很简单,通过以下几个实例你就能掌握串口数据采集是怎么
    发表于 01-15 10:23 2.5w次阅读
    matlab<b class='flag-5'>串口</b><b class='flag-5'>数据采集</b>

    AWTK 开源智能串口方案

    AWTK开源智能串口方案发布,旨在解决传统串口诸多痛点,为用户提供更开放、更易用、更强大的开源串口
    的头像 发表于 12-02 08:24 903次阅读
    <b class='flag-5'>AWTK</b> 开源智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案

    AWTK 串口开发(1) - Hello World

    本文以一个简单的温度设置程序为例,介绍AWTK串口开发流程和MVVM数据绑定的基本方法。功能这个例子很简单,制作一个调节温度的界面。在这
    的头像 发表于 12-08 15:52 487次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(1) - Hello World

    AWTK 串口开发(2) - 家居控制

    本文以一个家居控制应用程序为例,介绍AWTK串口开发流程和MVVM数据绑定的高级用法。1.功能这个例子稍微复杂一点,重点关注
    的头像 发表于 12-16 08:24 599次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(2) - 家居控制

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

    本篇文章介绍一下AWTK开源智能串口方案的基本原理和实际使用效果,包括主要特点、应用场景、工作原理以及简单的Demo演示。引言:AWTK-HMI是基于
    的头像 发表于 12-21 08:24 960次阅读
    ​【<b class='flag-5'>AWTK</b>开源智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】方案介绍和工作原理

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

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

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

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

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

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

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

    -HMI是基于AWTKAWTK-MVVM开发的低代码智能串口方案,本系列文章介绍如何从零开发
    的头像 发表于 01-18 08:24 875次阅读
    【<b class='flag-5'>AWTK</b>开源智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】HMI端程序移植编译及运行

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

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

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

    本篇文章将介绍如何使用AWStudio设计串口端的UI界面和添加绑定规则,以及怎么将资源文件上传到串口端。引言:AWTK-HMI是基于
    的头像 发表于 02-22 08:24 680次阅读
    【<b class='flag-5'>AWTK</b>开源智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】设计UI界面并上传到<b class='flag-5'>串口</b><b class='flag-5'>屏</b>

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

    AWTK串口内置了XML/JSON/INI等各种数据文件的模型,并支持用HTTP/HTTPS从网络获取数据。不用编写一行代码,即可实现天气
    的头像 发表于 03-05 08:24 373次阅读
    <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 330次阅读
    <b class='flag-5'>AWTK</b> 开源<b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(12) - 记事本应用

    AWTK 开源串口开发(15) - 通过 MODBUS 访问远程数据

    AWTK串口内置MODBUSClient模型,支持用MODBUS协议从远程设备获取数据。不用编写代码即可实现对远程设备数据的显示和修改。在
    的头像 发表于 03-30 08:23 385次阅读
    <b class='flag-5'>AWTK</b> 开源<b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(15) - 通过 MODBUS 访问远程<b class='flag-5'>数据</b>

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

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