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

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

3天内不再提示

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

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

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

1. 功能

告警信息是一个常用的功能,MCU 在设备异常时,会发送告警信息到串口屏,串口屏可以显示告警信息,也可以对告警信息进行管理(保存或清除)。b0056d90-a129-11ee-9788-92fbcf53809c.png基本工作原理:

MCU 端设置属性名为 log_message,数据类型为字符串,数据格式为"告警级别|时间|设备|告警信息"数据。

串口屏收到数据后,会把告警信息放到一个名为** log_message **的模型(数据)中。

  1. 界面通过绑定规则将 log_message 模型中的数据关联到控件上。

告警级别可以是:调试(0);信息(1);警告(2);错误(3)。

告警信息中如果出现“|”字符,则整个告警信息需用用英文双引号引起来。

b00f2876-a129-11ee-9788-92fbcf53809c.png

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


2. 创建项目

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

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

3. 制作界面

用 AWStudio 打开上面 log_message 目录下的 project.json 文件。里面有一个空的窗口,在上面设计类似下面的界面:

b01819c2-a129-11ee-9788-92fbcf53809c.png

中间是一个列表视图,列表视图中放一个列表项,列表项中放 5 个文本控件,分别用来显示序数、告警级别、时间、设备、告警信息。

4. 添加绑定规则

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

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

属性

说明

v-for-items

true

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

4.0.1 几个特殊的变量

index 特指序数。

item 特指当前的数据。[0]表示第一个数据,[1]表示第二个数据,以此类推。比如在这里 item.[0]表示告警级别,item.[1]表示时间,item.[2]表示设备,item.[3]表示告警信息。

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

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

4.0.2 几个特殊的命令

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

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

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

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

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

4.1序数

绑定属性

绑定规则

说明

v-data:value

{index}

index 特指序数。

4.2告警级别

前面提到告警级别是正数,可以通过 item.[0]来获取它。它的意义对应为:debug(0)、info(1)、warning(2)、error(3),我们需要用 one_of 函数将它转换为对应的字符串。

绑定属性

绑定规则

说明

v-data:value

{one_of(‘调试;信息;警告;错误’, item.[0])}

这里的 one_of 的功能是从指定的字符串数组中取出对应的子串。

4.3 时间

时间是一个字符串,可以通过 item.[1]来获取。

绑定属性

绑定规则

说明

v-data:value

{item.[3]}

4.4 设备

设备是一个字符串,可以通过 item.[2] 来获取。

绑定属性

绑定规则

说明

v-data:value

{item.[2]}

4.5告警信息

告警信息是一个字符串,可以通过 item.[3]来获取。

绑定属性

绑定规则

说明

v-data:value

{item.[3]}

4.6 列表项为了配合删除选中的告警信息,需要在列表项加两个绑定规则。

绑定属性

绑定规则

说明

v-on:click

{set_selected}

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

v-data:focused

{index==selected_index}

当前项目选中时高亮

4.7删除当前选择的告警信息

绑定属性

绑定规则

说明

v-on:click

{remove, Args=selected_index}

selected_index 表示当前选中的项目

4.8清除所有告警信息

绑定属性

绑定规则

说明

v-on:click

{clear}

4.9 保存告警信息

绑定属性

绑定规则

说明

v-on:click

{save}

4.10重新加载告警信息

绑定属性

绑定规则

说明

v-on:click

{reload}

4.11退出应用程序

绑定属性

绑定规则

说明

v-on:click

{nothing, QuitApp=true}

4.12指定窗口的模型

指定窗口的模型为 log_message。

b0209f02-a129-11ee-9788-92fbcf53809c.png


5. 添加告警信息

修改 design/default/data/settings.json 文件,启用告警信息:

{ "name": "hmi_log_message1", "log_message": { "enable": true, /*是否启用告警信息*/ "fields": [ "level" /*告警级别*/, "time" /*日期时间*/, "device" /*设备*/, "message" /*信息*/ ], "fields_seperator": "|", /*字段之间的分隔符*/ "max_rows": 1000 /*告警信息最大行数*/ }}


6. 编译运行

运行 bin 目录下的 demo 程序。b0056d90-a129-11ee-9788-92fbcf53809c.png

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

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

  • 通过模拟器发送数据,可以看到串口屏界面,自动添加告警信息。

b037121e-a129-11ee-9788-92fbcf53809c.gif测试数据:

3|2030-11-23:15:55:01|大门|长时间关闭


8. 注意

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

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

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

    关注

    3

    文章

    3231

    浏览量

    42346
  • 串口屏
    +关注

    关注

    8

    文章

    525

    浏览量

    37268
  • awtk
    +关注

    关注

    0

    文章

    41

    浏览量

    215
收藏 人收藏

    评论

    相关推荐

    AWTK 开源智能串口方案

    AWTK开源智能串口方案发布,旨在解决传统串口诸多痛点,为用户提供更开放、更易用、更强大的开源串口
    的头像 发表于 12-02 08:24 869次阅读
    <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 465次阅读
    <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 574次阅读
    <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 925次阅读
    ​【<b class='flag-5'>AWTK</b>开源智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】方案介绍和工作原理

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

    AWTK开源智能串口,不但开放了串口端全部源码,还提供了MCU端SDK,大大加快MCU软件的开发
    的头像 发表于 01-06 08:24 384次阅读
    <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 522次阅读
    <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 838次阅读
    【<b class='flag-5'>AWTK</b>开源智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】HMI端程序移植编译及运行

    AWTK 开源串口开发(9) - 用户和权限管理

    AWTK串口中,内置用户管理和权限控制的模型,无需编码即可实现登录、登出、修改密码、权限控制、创建用户、删除用户等功能,本文介绍一下用户管理和权限控制的基本用法。用户管理和权限控制是一个常用
    的头像 发表于 02-19 12:10 465次阅读
    <b class='flag-5'>AWTK</b> 开源<b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(9) - 用户和权限管理

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

    代码智能串口方案,本系列文章介绍如何从零开发HMI程序,包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。MCU端简
    的头像 发表于 02-19 12:11 1101次阅读
    【<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 639次阅读
    【<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 开源串口开发(10) - 告警信息的高级用法

    告警信息串口常用的功能,之前我们介绍了告警信息的基本用法,实现了
    的头像 发表于 02-24 08:23 284次阅读
    <b class='flag-5'>AWTK</b> 开源<b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(10) - <b class='flag-5'>告警</b><b class='flag-5'>信息</b>的高级用法

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

    AWTK串口内置了XML/JSON/INI等各种数据文件的模型,并支持用HTTP/HTTPS从网络获取数据。不用编写一行代码,即可实现天气预报、股票行情、航班查询和快递查询等功能。天气预报是一个很
    的头像 发表于 03-05 08:24 360次阅读
    <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 312次阅读
    <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协议从远程设备获取数据。不用编写代码即可实现对远程设备数据的显示和修改。在AWTK
    的头像 发表于 03-30 08:23 367次阅读
    <b class='flag-5'>AWTK</b> 开源<b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(15) - 通过 MODBUS 访问远程数据

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

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