3036
數(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?屬性:
| 屬性 | 值 | 說明 |
| v-for-items | true | 它保證其下的列表項，會根據(jù)數(shù)據(jù)自動生成 |
4.0.1 幾個特殊的變量
index 特指序數(shù)。
item 特指當前的數(shù)據(jù)。比如在這里 ‘item.time’ 表示時間，‘item.一氧化碳’ 表示一氧化碳，‘item.二氧化氮’ 表示二氧化氮，‘item.懸浮顆粒物’ 表示懸浮顆粒物。
selected_index 表示當前選中的序數(shù)（可在列表視圖之外綁定）。
items 表示當前列表視圖中的數(shù)據(jù)個數(shù)（可在列表視圖之外綁定）。
4.0.2 幾個特殊的命令
set_selected 設(shè)置當前選中的序數(shù)（在列表項中使用）。
save 保存數(shù)據(jù)到文件（在列表視圖之外的按鈕上綁定）。
reload 重新加載數(shù)據(jù)（在列表視圖之外的按鈕上綁定）。
clear 清除所有數(shù)據(jù)（在列表視圖之外的按鈕上綁定）。
remove 刪除指定序數(shù)的數(shù)據(jù)（在列表視圖之外的按鈕上綁定）。
4.1 序數(shù)
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-data:value | {index} | index 特指序數(shù)。 |
4.2 時間
時間是整數(shù)(秒數(shù))，可以通過 item.time 來獲取。
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-data:value | {date_time_format(item.time, ‘Y-M-D h : m : s’)} | 需要用date_time_format將 epoch 時間轉(zhuǎn)換成人類可讀的時間。 |
4.3 一氧化碳
可以通過 item.一氧化碳 來獲取。
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-data:value | {item.一氧化碳} | 無 |
4.4 二氧化氮
可以通過 item.二氧化氮 來獲取。
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-data:value | {item.二氧化氮} | 無 |
4.5 懸浮顆粒物
可以通過 item.懸浮顆粒物 來獲取。
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-data:value | {item.懸浮顆粒物} | 無 |
4.6 二氧化硫
可以通過 item.二氧化硫 來獲取。
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-data:value | {item.二氧化硫} | 無 |
4.7 列表項
為了配合刪除選中的采樣數(shù)據(jù)，需要在列表項加兩個綁定規(guī)則。
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-on:click | {set_selected} | 點擊時將當前項目設(shè)置為選中 |
| v-data:focused | {index==selected_index} | 當前項目選中時高亮 |
4.8 刪除當前選擇的采樣數(shù)據(jù)
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-on:click | {remove, Args=selected_index} | selected_index 表示當前選中的項目 |
4.9 清除所有采樣數(shù)據(jù)
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-on:click | {clear} | 無 |
4.10 保存采樣數(shù)據(jù)
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-on:click | {save} | 無 |
4.11 重新加載采樣數(shù)據(jù)
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-on:click | {reload} | 無 |
4.12 退出應用程序
| 綁定屬性 | 綁定規(guī)則 | 說明 |
| v-on:click | {nothing, QuitApp=true} | 無 |
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)整即可，無需重復上面的過程，但是最好了解其中的原理。
下載ECAD模型
