【技術(shù)分享】AWTK 串口屏開(kāi)發(fā)(4) - 數(shù)據(jù)采集

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

1. 功能

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

基本工作原理：

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

時(shí)間為 epoch 時(shí)間，方便內(nèi)部存儲(chǔ)和查詢(xún)。

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

2. 創(chuàng)建項(xiàng)目

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

第一個(gè)項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

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

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

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

第一次用到列表視圖，有幾點(diǎn)需要特別說(shuō)明一下：

列表視圖中的滾動(dòng)視圖需要指定?v-for-items?屬性:

4.0.1 幾個(gè)特殊的變量

index 特指序數(shù)。

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

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

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

4.0.2 幾個(gè)特殊的命令

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

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

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

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

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

4.1 序數(shù)

4.2 時(shí)間

時(shí)間是整數(shù)(秒數(shù))，可以通過(guò) item.time 來(lái)獲取。

4.3 一氧化碳

可以通過(guò) item.一氧化碳 來(lái)獲取。

4.4 二氧化氮

可以通過(guò) item.二氧化氮 來(lái)獲取。

4.5 懸浮顆粒物

可以通過(guò) item.懸浮顆粒物 來(lái)獲取。

4.6 二氧化硫

可以通過(guò) item.二氧化硫 來(lái)獲取。

4.7 列表項(xiàng)

為了配合刪除選中的采樣數(shù)據(jù)，需要在列表項(xiàng)加兩個(gè)綁定規(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": {}, /*時(shí)間必須用 '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. 編譯運(yùn)行

運(yùn)行 bin 目錄下的 demo 程序。

7. 使用 MCU 模擬器與之進(jìn)行交互

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

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

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

1702032398|3.1|3.2|3.3|3.4

8. 注意

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

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