如果您嘗試過在沒有圖形庫的情況下開發(fā)?UI，那么您一定知道這有多困難。幸運(yùn)的是，由樂鑫芯片驅(qū)動的屏幕，可支持用戶使用多種圖形庫來開發(fā) UI， LVGL 就是其中之一。通常情況下，在使用 LVGL 或類似的圖形庫前，用戶必須先了解清楚它們的 API，以及如何使用這些 API 來開發(fā) UI。然而現(xiàn)在我們可以省略這些復(fù)雜的步驟了。

• LVGL:?lvgl.io/
  

SquareLine Studio 不僅可以幫助用戶開發(fā)出更精美的 UI，并且無需了解額外的?LVGL API 信息。

• SquareLine Studio:?https://squareline.io/

• LVGL API:?https://docs.lvgl.io/master/index.html
  

SquareLine Studio

SquareLine Studio 是一個可視化工具，可使用 LVGL 圖形庫開發(fā) UI，且支持多個平臺，如 MacOS、Windows 和 Linux。在該工具中，我們通過拖放就可以在屏幕上添加和移動小控件，圖像和字體的處理也變得十分簡單。

• SquareLine Studio:?https://squareline.io/

啟動 SquareLine Studio 并創(chuàng)建一個新項(xiàng)目（或打開一個示例項(xiàng)目）后，會出現(xiàn)主編輯器視圖。如圖 1 所示，中間部分是一個或多個與輸出 LCD 顯示屏大小相同的屏幕，左側(cè)的兩個標(biāo)簽欄中，Hierarchy 表示已經(jīng)添加到屏幕上的控件列表，這些控件按層級排列。在其下方的 Widgets 代表了可用的控件。這里包含了 LVGL 中大部分控件。右側(cè)的三個標(biāo)簽欄中，Inspector 是最重要的，Font manager 也非常有用。根據(jù)選擇的控件不同，Inspector 會產(chǎn)生相應(yīng)的變化，包括改變控件的外觀。Event 可為選中的控件添加事件，有多種事件可供選擇，包括點(diǎn)擊、滑動等。Font manager 可以使用任意 TTF 字體文件制作 LVGL 字體，并可以只選擇一部分字符以節(jié)省內(nèi)存。下方的兩個標(biāo)簽欄中，Assets 包含項(xiàng)目中所有的多媒體文件，Console 則包含全部的歷史信息、警告和錯誤信息。

按下屏幕右上角的播放按鈕可以啟動模擬器，以模擬所有控件的動作和動畫效果。您可以按下播放按鈕，然后點(diǎn)擊屏幕中的控件，看看 UI 會有什么變化。

在最上面的菜單欄里，可以看到 Export 菜單，用于創(chuàng)建代碼文件及導(dǎo)出 UI 文件。

SquareLine Studio v1.1 引入了新的功能——開發(fā)板模版，里面包含一些公司預(yù)先開發(fā)好的開發(fā)板模板，所以您可以為相應(yīng)的開發(fā)板生成包含 UI 代碼的完整項(xiàng)目。可通過 Export -> Create Template Project 來創(chuàng)建項(xiàng)目，然后通過 ?Export -> Export UI Files 來導(dǎo)出 UI 文件（改動 UI 文件后，必須重新進(jìn)行導(dǎo)出）。

SquareLine Studio 支持的 ESP 開發(fā)板

在 SquareLine Studio 中，樂鑫創(chuàng)建了兩款開發(fā)板模板，即 ESP-BOX 與 ESP-WROVER-KIT。使用 Create 創(chuàng)建應(yīng)用程序之后，就可以在 Espressif 菜單中選擇相應(yīng)的開發(fā)板（圖 2）。每個開發(fā)板都包含預(yù)設(shè)的尺?、旋轉(zhuǎn)?度及?彩深度等信息，這些和用于生成代碼的 ESP-BSP 工程相對應(yīng)。

• ESP-BOX:?https://github.com/espressif/esp-bsp/tree/master/esp-box

• ESP-WROVER-KIT:?https://github.com/espressif/esp-bsp/tree/master/esp_wrover_kit

選擇開發(fā)板之后，您可以在應(yīng)用程序的主編輯器中看到一個空白屏幕。這個空白屏幕與開發(fā)板屏幕大小相同。然后，如圖 3 所示，您就可以在屏幕上拖放一些小控件、放置文本，以及設(shè)置事件。

創(chuàng)建開發(fā)板工程 (Export->Create Template Project) 并導(dǎo)出 UI 文件 (Export->Export UI Files) 之后，就和在其他 ESP 示例項(xiàng)目中一樣（如果您之前使用過 ESP-IDF），可以通過以下步驟編譯并燒錄項(xiàng)目。

SquareLine Studio 是否免費(fèi)？

SquareLine Studio 對個人用戶是免費(fèi)的，但是有一些限制，每個項(xiàng)目最多可使用 5 個屏幕和 50 個控件。其他價格信息可參考 SquareLine 網(wǎng)站。

結(jié)論

我們認(rèn)為，SquareLine Studio 對?戶開發(fā)精美的 UI ?常有幫助，在增加了開發(fā)板模版后，SquareLine Studio 的使用變得更為簡單。它能使您更加便捷地編輯一些 UI 或調(diào)整控件位置。

但這個工具還缺少一些控件，例如 tabview 控件。此外，在控件之間復(fù)制格式的功能，以及樂鑫開發(fā)板的編譯和燒錄，都存在改進(jìn)的空間。

SquareLine Studio 是一個全新的工具，之后還會持續(xù)添加新的功能，敬請期待。