如果您嘗試過在沒有圖形庫的情況下開發 UI，那麼您一定知道這有多困難。幸運的是，由樂鑫晶片驅動的螢幕，可支援使用者使用多種圖形庫來開發 UI， LVGL 就是其中之一。通常情況下，在使用 LVGL 或類似的圖形庫前，使用者必須先了解清楚它們的 API，以及如何使用這些 API 來開發 UI。然而現在我們可以省略這些複雜的步驟了。
SquareLine Studio 不僅可以幫助使用者開發出更精美的 UI，并且無需了解額外的 LVGL API 資訊。
SquareLine Studio
SquareLine Studio 是一個可視化工具，可使用 LVGL 圖形庫開發 UI，且支援多個平台，如 MacOS、Windows 和 Linux。在該工具中，我們通過拖放就可以在螢幕上添加和移動小控件，圖像和字型的處理也變得十分簡單。
啟動 SquareLine Studio 并建立一個新項目（或打開一個示例項目）後，會出現主編輯器視圖。如圖 1 所示，中間部分是一個或多個與輸出 LCD 顯示屏大小相同的螢幕，左側的兩個标簽欄中，Hierarchy 表示已經添加到螢幕上的控件清單，這些控件按層級排列。在其下方的 Widgets 代表了可用的控件。這裡包含了 LVGL 中大部分控件。右側的三個标簽欄中，Inspector 是最重要的，Font manager 也非常有用。根據選擇的控件不同，Inspector 會産生相應的變化，包括改變控件的外觀。Event 可為選中的控件添加事件，有多種事件可供選擇，包括點選、滑動等。Font manager 可以使用任意 TTF 字型檔案制作 LVGL 字型，并可以隻選擇一部分字元以節省記憶體。下方的兩個标簽欄中，Assets 包含項目中所有的多媒體檔案，Console 則包含全部的曆史資訊、警告和錯誤資訊。
圖 1 - 主編輯器 – SquareLine Studio 示例項目
按下螢幕右上角的播放按鈕可以啟動模拟器，以模拟所有控件的動作和動畫效果。您可以按下播放按鈕，然後點選螢幕中的控件，看看 UI 會有什麼變化。
在最上面的菜單欄裡，可以看到 Export 菜單，用于建立代碼檔案及導出 UI 檔案。
SquareLine Studio v1.1 引入了新的功能——開發闆模版，裡面包含一些公司預先開發好的開發闆模闆，是以您可以為相應的開發闆生成包含 UI 代碼的完整項目。可通過 Export -> Create Template Project 來建立項目，然後通過 Export -> Export UI Files 來導出 UI 檔案（改動 UI 檔案後，必須重新進行導出）。
SquareLine Studio 支援的 ESP 開發闆
在 SquareLine Studio 中，樂鑫建立了兩款開發闆模闆，即 ESP-BOX 與 ESP-WROVER-KIT。使用 Create 建立應用程式之後，就可以在 Espressif 菜單中選擇相應的開發闆（圖 2）。每個開發闆都包含預設的尺⼨、旋轉⻆度及⾊彩深度等資訊，這些和用于生成代碼的 ESP-BSP 工程相對應。
圖 2 - SquareLine Studio 中支援的樂鑫開發闆
選擇開發闆之後，您可以在應用程式的主編輯器中看到一個空白螢幕。這個空白螢幕與開發闆螢幕大小相同。然後，如圖 3 所示，您就可以在螢幕上拖放一些小控件、放置文本，以及設定事件。
圖 3 - 螢幕上的控件示例
建立開發闆工程 (Export->Create Template Project) 并導出 UI 檔案 (Export->Export UI Files) 之後，就和在其他 ESP 示例項目中一樣（如果您之前使用過 ESP-IDF），可以通過以下步驟編譯并燒錄項目。
圖 4 - 在 ESP-BOX 上生成代碼
SquareLine Studio 是否免費？
SquareLine Studio 對個人使用者是免費的，但是有一些限制，每個項目最多可使用 5 個螢幕和 50 個控件。其他價格資訊可參考 SquareLine 網站。
結論
我們認為，SquareLine Studio 對于幫助使用者開發 UI 非常有用，在增加了開發闆模版後，SquareLine Studio 的使用變得更為簡單。它能使您更加便捷地編輯一些 UI 或調整控件位置。
但這個工具還缺少一些控件，例如 tabview 控件。此外，在控件之間複制格式的功能，以及樂鑫開發闆的編譯和燒錄，都存在改進的空間。
SquareLine Studio 是一個全新的工具，之後還會持續添加新的功能，敬請期待。