【技術分享】AWTK串口屏開發(3)-告警信息

原創 ZLG致遠電子 2023-12-22 11:37

30+硬核演講，洞見EDA與CAE前沿｜KDES上海 一站式破解芯片研發全流程痛點，西門子 EDA Forum 2026等你來

告警信息是一個常用的功能。在 AWTK 開源串口屏中，內置告警信息模型，只需設計用戶界面即可實現告警信息的顯示和管理。

1. 功能

告警信息是一個常用的功能，MCU 在設備異常時，會發送告警信息到串口屏，串口屏可以顯示告警信息，也可以對告警信息進行管理（保存或清除）。

基本工作原理：

MCU 端設置屬性名為 log_message，數據類型為字符串，數據格式為?"告警級別|時間|設備|告警信息"數據。
串口屏收到數據后，會把告警信息放到一個名為** log_message **的模型（數據）中。
界面通過綁定規則將 log_message 模型中的數據關聯到控件上。

告警級別可以是：調試?(0);?信息?(1);?警告?(2);?錯誤?(3)。

告警信息中如果出現?“|”?字符，則整個告警信息需用用英文雙引號引起來。

下面演示一下具體的實現方法。

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/log_message 即可。

第一個項目最好不要放到其它目錄，因為放到其它目錄需要修改配置文件中的路徑，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

用 AWStudio 打開上面 log_message 目錄下的 project.json 文件。里面有一個空的窗口，在上面設計類似下面的界面：

中間是一個列表視圖，列表視圖中放一個列表項，列表項中放 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。

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 程序。

7. 使用 MCU 模擬器與之進行交互

運行 mcu/simulator 目錄下的 mcu_sim 程序，連接到 Localhost:2233。

通過模擬器發送數據，可以看到串口屏界面，自動添加告警信息。

測試數據：

3|2030-11-23:15:55:01|大門|長時間關閉

8. 注意

本項目并沒有編寫界面相關的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。
實際使用時，在 demo_app4/design/default/ui/home_page.xml 基礎上進行調整即可，無需重復上面的過程，但是最好了解其中的原理。

??推薦產品