使用SquareLine Studio進行GUI設(shè)計

工程師筆記 | 使用SquareLine Studio進行GUI設(shè)計

圖形用戶界面，Graphical User Interface，簡稱 GUI。圖形化界面能大幅降低用戶使用門檻。

LVGL 是一個免費的開源圖形庫，可用于創(chuàng)建GUI。LVGL具有：資源占用小、功能強大、文檔資料豐富等優(yōu)點。

RT-Thread是一款國產(chǎn)的嵌入式實時操作系統(tǒng)，支持多線程任務(wù)切換、中斷管理，支持豐富的功能和軟件包。RT-Thread已制作成了LVGL軟件包。在RT-Thread bsp的配置中選中該軟件包，就能將LVGL移植到工程。

SquareLine Studio 是LVGL官方推出的PC端GUI設(shè)計軟件。它采用所見即所得的開發(fā)方式，降低了GUI設(shè)計難度。

本文將要介紹在 ES32 平臺上，基于 RT-Thread bsp 和 SquareLine Studio 進行GUI設(shè)計的方法。

開啟本實驗前，讀者需要首先了解：

?本實驗基于RT-Thread 4.0.4版本，用戶可以從GitHub或Gitee獲取：

☆從GitHub下載RT-Thread 4.0.4： https://github.com/RT-Thread/rt-thread/tree/v4.0.4 ☆從Gitee下載RT-Thread 4.0.4： https://gitee.com/rtthread/rt-thread/tree/v4.0.4

? 基礎(chǔ)的軟硬件環(huán)境配置和ES-CodeMaker使用方法。詳細(xì)請查看（點擊直接打開）：工程師筆記 | ES-CodeMaker for RT-Thread （一）快速上手

? ES-CodeMaker for RT-Thread軟件最新版本的獲取方法，在文本的最后給出。

1.SquareLine Studio

需求：SquareLine Studio，推薦版本：1.1.0

軟件獲取鏈接為：https://squareline.io/downloads

作用：輔助GUI開發(fā)。

軟件安裝后快捷方式如下圖：

打開軟件后，如圖所示：

1.1 新建SquareLine Studio工程

點擊中間的Create按鈕（藍(lán)色框內(nèi)）后，如下圖所示：

在右下方設(shè)置工程屬性（紅色框內(nèi)）。設(shè)置完成后，點擊綠色按鈕CREATE后，可得新工程。

1.2 導(dǎo)入SquareLine Studio工程

在GUI用例中附帶了1個SquareLineStudio工程。SquareLineStudio工程使用方法如下：

1 . 前置條件：完成驅(qū)動配置（見第3節(jié)）。

2 . 點擊右下角的IMPORT PROJECT按鈕后，選擇 SquareLine_Studio工程路徑：bspessemisp工程driverspkg_support_exampleguiSquareLine_prj 。如下圖所示：

點擊按鈕打開后，如下圖所示：

4 . 雙擊已導(dǎo)入的工程后，如下圖所示：

1.3 修改SquareLine Studio工程

在SquareLine Studio中，各區(qū)域的功能如下：

詳細(xì)內(nèi)容請參考官方文檔：

https://docs.squareline.io/docs/introduction/overview/

1.4 導(dǎo)出SquareLine Studio工程

修改了SquareLine_Studio工程后，將最新的UI文件導(dǎo)入keil工程的方法如下：

1 . 前置條件：完成驅(qū)動配置（見第3節(jié)）和RT-Thread配置（見第4節(jié)）。

2 . 首先設(shè)置選項：SquareLine_Studio的輸出文件路徑。

點擊 File -> Project Settings 后，如下圖所示：

輸入路徑bspessemisp工程driverspkg_support_exampleguiSquareLine_prjexport_files 。如下圖所示：

點擊按鈕APPLY CHANGES后，保存設(shè)置。

3 . 如下圖所示：點擊 Export -> Export UI Files 后，可導(dǎo)出UI文件到指定路徑。

4 . 然后參考RT-Thread配置章節(jié)，使用scons --target=mdk5構(gòu)建工程。（將GUI設(shè)計軟件的更改同步到工程）

5 . 然后參考IDE工程配置章節(jié)，修改工程配置。

2.硬件配置

需求：ES32開發(fā)板，ES32 GUI 開發(fā)套件（ES-PDS-ES32F3696LX-V1.0開發(fā)板，ES-PDS-EBI 轉(zhuǎn)接板，3.5寸TFT電容屏模塊）。硬件連接如下：

1 . 將 ES-PDS-EBI 轉(zhuǎn)接板插到ES-PDS-ES32F3696LX-V1.0開發(fā)板上。

2 . 將3.5寸TFT電容屏模塊插到 ES-PDS-EBI轉(zhuǎn)接板上。

3 . 閉合 ES-PDSES32F3696LX開發(fā)板上的 JP2、 JP3 和 JP4。

3.驅(qū)動配置

通過CodeMaker可實現(xiàn)可視化的管腳功能配置

新建工程

選擇芯片：ES32F3696LX，填寫工程名稱和路徑，選擇模板 pkg-example-gui-es-pds：

開啟 UART2 功能和對應(yīng)的管腳作為RT-Thread的控制臺功能。

開啟 LCD 的管腳: PB0 等26個管腳 （包含：EBI 等接口）。

硬件部分的配置到這里就完成了，接下來進行系統(tǒng)和驅(qū)動相關(guān)的配置。

4.RT-Thread配置

接下來配置RT-Thread的內(nèi)核、組件、軟件包和驅(qū)動，以下以Keil+ENV配置為例說明如何進行配置。

1 . 在bsp的根目錄打開ENV工具

2 . 輸入menuconfig配置工程

rt-thread 內(nèi)核配置

RT-Thread Kernel設(shè)置系統(tǒng)的 tick。將tick頻率調(diào)整到1000。如果tick < 1000，LVGL的任務(wù)處理頻率可能會降低。

RT-Thread Kernel -> Kernel Device Object 進行內(nèi)核設(shè)備對象設(shè)置。將控制臺的設(shè)備名改為“uart2”。

rt-thread 組件配置

RT-Thread Components -> Device Drivers進行設(shè)備驅(qū)動設(shè)置。勾選選項Using Touch device drivers開啟rt-thread touch框架。勾選選項touch irq use pin irq開啟功能：用管腳中斷觸發(fā)Touch設(shè)備中斷。

rt-thread 軟件包 LVGL配置

RT-Thread online packages → multimedia packages → LVGL: powerful and easy-to-use embedded GUI library開啟LVGL 軟件包。LVGL具有易于使用的圖形元素、優(yōu)美的視覺效果和較低的內(nèi)存占用。

RT-Thread online packages → multimedia packages → LVGL: powerful and easy-to-use embedded GUI library → LVGL (official): powerful and easy-to-use embedded GUI library打開LVGL的配置選項。配置LVGL線程的棧大小和優(yōu)先級等。

UART 配置

Hardware Drivers Config -> On-chip Peripheral Drivers -> UART Drivers 開啟uart2。（與控制臺通信）

開啟GUI樣例程序

Hardware Drivers Config -> Pkgs Support Example -> GUI -> GUI_BOARD_ES_PDS開啟GUI用例程序。

3 . 輸入pkgs --update命令更新軟件包。

4 . 輸入scons --target=mdk5命令生成keil5工程。（使用IAR等其他平臺指定--target=xxx即可）

5 . 使用Keil5打開工程，編譯并下載。

5.IDE工程配置

因為GUI中會顯示中文字體。

以Keil5為例，增加工程控制: --no-multibyte-chars

6.實驗說明

1 . SquareLine Studio 輸出的文件說明如下：

2 . LVGL配置文件

在RT-Thread的LVGL軟件包中，不包含LVGL配置文件 lv_conf.h 。只包含LVGL配置模板 lv_conf_template.h 。LVGL配置模板路徑為：bspessemisp工程packagesLVGL軟件包lv_conf_template.h 。

在GUI用例中，LVGL配置文件的路徑為：

bspessemisp工程driverspkg_support_exampleguioard_es-pdses_port_for_lvgl_v8lv_conf.h

3 . 程序流程

初始化系統(tǒng)和驅(qū)動。

初始化LVGL。

調(diào)用GUI設(shè)計軟件生成的代碼。

7.實驗現(xiàn)象

編譯程序并下載后，控制臺的具體現(xiàn)象如下圖所示：

與GUI設(shè)計軟件（SquareLine Studio）的效果一致。LCD屏顯示效果如下圖:

審核編輯 ：李倩