【AWTK開源智能串口屏方案】設(shè)計(jì)UI界面并上傳到串口屏

本篇文章將介紹如何使用AWStudio設(shè)計(jì)串口屏端的UI界面和添加綁定規(guī)則，以及怎么將資源文件上傳到串口屏端。

引言：AWTK-HMI是基于AWTK與AWTK-MVVM開發(fā)的低代碼智能串口屏方案，本系列文章介紹如何從零開發(fā)HMI程序，包括搭建開發(fā)環(huán)境、創(chuàng)建HMI運(yùn)行時(shí)工程、修改應(yīng)用界面以及開發(fā)MCU程序。

簡介

本篇文章將介紹如何使用AWStudio設(shè)計(jì)UI界面以及如何將設(shè)計(jì)好的UI界面上傳到串口屏HMI端上。在AWStudio上設(shè)計(jì)好界面后只需要打包資源文件，將資源文件拷貝到串口屏端（HMI端）對應(yīng)位置即可，整個(gè)過程無需重新編譯HMI端代碼。

圖1 AWTK-HMI工作原理

使用AWStudio設(shè)計(jì)UI界面

在原本的demo_home2示例中，已經(jīng)實(shí)現(xiàn)了“空調(diào)”與“咖啡機(jī)”的界面，這里就以實(shí)現(xiàn)“燈光”界面為例子來介紹如何使用AWStudio設(shè)計(jì)HMI端UI界面，在該界面將要實(shí)現(xiàn)顯示燈光亮度和設(shè)置燈光亮度兩個(gè)功能。

1. 導(dǎo)入AWTK-HMI官方示例

首先，從官方的Gitee下載awtk-hmi倉庫到本地目錄，并使用AWStudio導(dǎo)入awtk-hmi/hmi/demo_home2例程。下載地址：

https://gitee.com/zlgopen/awtk-hmi

圖2?在AWStudio中導(dǎo)入demo_home2

示例2. 新增界面并設(shè)置點(diǎn)擊按鈕跳轉(zhuǎn)界面點(diǎn)擊AWStudio中的“新建窗體”按鈕，新建一個(gè)Window類型的窗體作為“燈光”功能的界面。然后選中“l(fā)ight_btn”控件，通過修改“v-on:click”屬性使用navigate窗口導(dǎo)航器便可以實(shí)現(xiàn)點(diǎn)擊該按鈕跳轉(zhuǎn)到新建好的界面，如下圖Args參數(shù)就是新建窗體的名稱。v-on:click=”{navigate, Args=light_win}”

圖3?使用窗口導(dǎo)航器實(shí)現(xiàn)界面跳轉(zhuǎn)

3. 界面設(shè)計(jì)與布局界面布局可以使用AWStudio自行設(shè)計(jì)喜歡的界面，如下圖：

圖4?“燈光”界面整體布局

為界面內(nèi)的控件添加綁定規(guī)則

接下來為界面中的部分控件添加上綁定規(guī)則，這里拿最簡單的設(shè)置變量與顯示變量作為例子演示。

1. 為顯示數(shù)據(jù)的控件添加綁定規(guī)則

在界面中有一個(gè)label控件用于顯示當(dāng)前的燈光亮度，可以添加綁定規(guī)則獲取從MCU端發(fā)送過來的數(shù)據(jù)。綁定規(guī)則如下圖，此時(shí)若MCU端發(fā)送了“真實(shí)_亮度”數(shù)據(jù)到串口屏端時(shí)，該label控件會(huì)同步更新text屬性的值。v-data:text=”{真實(shí)_亮度+’%’}”

圖?5?為顯示數(shù)據(jù)的控件添加綁定規(guī)則2.?為設(shè)置數(shù)據(jù)的控件添加綁定規(guī)則除了獲取數(shù)據(jù)之外，還需要為設(shè)置數(shù)據(jù)的滑動(dòng)條控件添加綁定規(guī)則。綁定的規(guī)則如下，此時(shí)拖拽滑動(dòng)條控件時(shí)MCU端就會(huì)收到關(guān)于“設(shè)定_亮度”的數(shù)據(jù)。v-data:value=”{設(shè)定_亮度}”

圖6?為設(shè)置數(shù)據(jù)的控件添加綁定規(guī)則

關(guān)于“真實(shí)_亮度”和“設(shè)定_亮度”兩個(gè)變量的處理邏輯是在MCU端里面實(shí)現(xiàn)的，串口屏端無需理會(huì)。更多的綁定規(guī)則用法可以參考awtk-hmi/docs目錄下的文檔介紹，也可以直接參考awtk-hmi/hmi目錄的demo。

3.?初始化數(shù)據(jù)

完成控件的數(shù)據(jù)綁定后，可以通過修改資源文件來設(shè)置綁定數(shù)據(jù)的初始值，文件具體路徑：

design/default/data/default_model.json

圖7?通過default_model.json設(shè)置數(shù)據(jù)初始值

將資源文件更新到串口屏端

假設(shè)您之前已經(jīng)編譯好HMI端的運(yùn)行時(shí)程序，并成功運(yùn)行在板子上了。現(xiàn)在通過AWStudio設(shè)計(jì)好界面后AWStudio設(shè)計(jì)好界面后，點(diǎn)擊“項(xiàng)目”--“打包”選項(xiàng)打包資源文件，此時(shí)會(huì)在項(xiàng)目目錄下的res文件夾內(nèi)生成打包好的資源文件，接著替換板子上對應(yīng)資源文件即可。

1. 嵌入式Linux

嵌入式Linux平臺(tái)的資源文件位于release/assets目錄中，直接將新的資源文件替換到此目錄，最后只需要將HMI端的運(yùn)行時(shí)程序殺掉再重啟進(jìn)程即可。

2.?STM32

一般STM32平臺(tái)的串口屏端是使用加載外部資源方式，所以同樣只需更換外部存儲(chǔ)設(shè)備的assets目錄，替換文件之后需要重啟STM32設(shè)備。