AWTK 串口屏開發(fā)(4) - 數(shù)據(jù)采集

數(shù)據(jù)采用是一個常用的功能。在 AWTK 開源串口屏中，內(nèi)置數(shù)據(jù)采樣模型，只需設(shè)計用戶界面即可實現(xiàn)采樣數(shù)據(jù)的顯示和管理。

1. 功能

數(shù)據(jù)采集是一個常用的功能，MCU 定時采集數(shù)據(jù)（如環(huán)保設(shè)備定時采樣空氣中的污染物），并發(fā)送采樣數(shù)據(jù)到串口屏，串口屏可以顯示采樣數(shù)據(jù)，也可以對采樣數(shù)據(jù)進行管理（保存或清除）。

基本工作原理：

• MCU 端設(shè)置屬性名為history_data，數(shù)據(jù)類型為字符串，數(shù)據(jù)格式為用|分隔的多個字段的數(shù)據(jù)。
• 串口屏收到數(shù)據(jù)后，會把采樣數(shù)據(jù)放到一個名為history_data的模型（數(shù)據(jù)）中。
• 界面通過綁定規(guī)則將history_data模型中的數(shù)據(jù)關(guān)聯(lián)到控件上。

時間為 epoch 時間，方便內(nèi)部存儲和查詢。

下面演示一下具體的實現(xiàn)方法。

2. 創(chuàng)建項目

從模板創(chuàng)建項目，將 hmi/template_app 拷貝 hmi/history_data 即可。

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

3. 制作界面

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

中間是一個列表視圖，列表視圖中放一個列表項，列表項中放 6 個文本控件，分別用來顯示序數(shù)、時間、一氧化碳、二氧化氮、懸浮顆粒物、二氧化硫。

4. 添加綁定規(guī)則

第一次用到列表視圖，有幾點需要特別說明一下：

列表視圖中的滾動視圖需要指定v-for-items屬性:

4.0.1 幾個特殊的變量

index 特指序數(shù)。

item 特指當(dāng)前的數(shù)據(jù)。比如在這里 ‘item.time’ 表示時間，‘item.一氧化碳’ 表示一氧化碳，‘item.二氧化氮’ 表示二氧化氮，‘item.懸浮顆粒物’ 表示懸浮顆粒物。

selected_index 表示當(dāng)前選中的序數(shù)（可在列表視圖之外綁定）。

items 表示當(dāng)前列表視圖中的數(shù)據(jù)個數(shù)（可在列表視圖之外綁定）。

4.0.2 幾個特殊的命令

set_selected 設(shè)置當(dāng)前選中的序數(shù)（在列表項中使用）。

save 保存數(shù)據(jù)到文件（在列表視圖之外的按鈕上綁定）。

reload 重新加載數(shù)據(jù)（在列表視圖之外的按鈕上綁定）。

clear 清除所有數(shù)據(jù)（在列表視圖之外的按鈕上綁定）。

remove 刪除指定序數(shù)的數(shù)據(jù)（在列表視圖之外的按鈕上綁定）。

4.1 序數(shù)

4.2 時間

時間是整數(shù)(秒數(shù))，可以通過 item.time 來獲取。

4.3 一氧化碳

可以通過 item.一氧化碳 來獲取。

4.4 二氧化氮

可以通過 item.二氧化氮 來獲取。

4.5 懸浮顆粒物

可以通過 item.懸浮顆粒物 來獲取。

4.6 二氧化硫

可以通過 item.二氧化硫 來獲取。

4.7 列表項為了配合刪除選中的采樣數(shù)據(jù)，需要在列表項加兩個綁定規(guī)則。

4.8 刪除當(dāng)前選擇的采樣數(shù)據(jù)

4.9 清除所有采樣數(shù)據(jù)

4.10 保存采樣數(shù)據(jù)

4.11 重新加載采樣數(shù)據(jù)

4.12 退出應(yīng)用程序

4.13 指定窗口的模型

指定窗口的模型為history_data。

5. 啟用數(shù)據(jù)采樣

修改 design/default/data/settings.json 文件，啟用數(shù)據(jù)采樣：

{ "name": "hmi_histroy_data1", "history_data": { "enable": true, /*是否啟用數(shù)據(jù)采集*/ "fields": { "time": {}, /*時間必須用 'time'，放在第一位*/ "一氧化碳" : { "min": 0, "max": 100, "unit": "mg/m3" }, "二氧化氮" : { "min": 0, "max": 110, "unit": "mg/m3" }, "懸浮顆粒物" : { "min": 0, "max": 120, "unit": "mg/m3" }, "二氧化硫": { "min": 0, "max": 130, "unit": "mg/m3" } }, "fields_seperator": "|", /*字段之間的分隔符*/ "max_rows": 1000 /*數(shù)據(jù)采集最大行數(shù)*/, "auto_save_interval": 60000 }}

6. 編譯運行

運行 bin 目錄下的 demo 程序。

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

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

通過模擬器發(fā)送數(shù)據(jù)，可以看到串口屏界面，自動添加采樣數(shù)據(jù)。

測試數(shù)據(jù)：

1702032398|3.1|3.2|3.3|3.4

8. 注意

本項目并沒有編寫界面相關(guān)的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。

• 實際使用時，在 demo_history_data1/design/default/ui/home_page.xml 基礎(chǔ)上進行調(diào)整即可，無需重復(fù)上面的過程，但是最好了解其中的原理。