在上一篇文章中，我們介紹了 SquareLine Studio 可視化 UI 開發(fā)工具，以及如何使用它來開發(fā) UI。目前，它只適用于樂鑫官方推出自研的開發(fā)板。如果您想使用 SquareLine Studio 在基于樂鑫芯片且?guī)в?LCD 顯示屏的定制開發(fā)板上開發(fā) UI，可以通過以下方法實現(xiàn)。

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

如何將用戶的定制開發(fā)板模板添加到 SquareLine Studio 上呢？首先，請查看 GitHub 上 esp-bsp 倉庫中的示例：custom_waveshare_7inch。該示例與 SquareLine Studio 上的其他樂鑫開發(fā)板模板都基于相同的代碼。其中，最大的區(qū)別是，用戶定制的開發(fā)板模板中必須帶有與樂鑫 BSP 類似的組件，才可以驅(qū)動 LCD 顯示屏，并對 LVGL 圖形庫進(jìn)行初始化。

• custom_waveshare_7inch:?https://github.com/espressif/esp-bsp/tree/master/SquareLine/boards/custom_waveshare_7inch

在本文示例中，我們選用的 LCD 顯示屏是 7 英寸、分辨率為 800 x 480 的 WaveShare，它帶有 RA8875 圖像控制器和 GT911 觸摸屏控制器。

• WaveShare:?https://www.waveshare.com/7inch-capacitive-touch-lcd-c.htm

1. 為您的開發(fā)板定制 BSP

在 SquareLine Studio 上開發(fā)軟件包，首先需要制作一個類似于 BSP 的組件。您可以參考我們在 GitHub 上基于 7inch WaveShare LCD 開發(fā)的示例。需要注意的是 ws_7inch.c 文件中只實現(xiàn)了最重要的函數(shù)。如果要適配其他型號的屏幕，需要對下列函數(shù)進(jìn)行修改：

/* LCD display initialization */
static lv_disp_t *lvgl_port_display_init(void)
{
? ? ...
}

/* Touch initialization */
static esp_err_t lvgl_port_indev_init(void)
{
? ? ...
}

• 7inch WaveShare LCD:?https://www.waveshare.com/7inch-capacitive-touch-lcd-c.htm

• 基于 7inch WaveShare LCD 開發(fā)的示例：https://github.com/espressif/esp-bsp/tree/master/SquareLine/boards/custom_waveshare_7inch
  

• ws_7inch.c:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/components/ws_7inch/ws_7inch.c

如果與觸摸屏的通信不是基于 I2C 的，那么您應(yīng)初始化 SPI 或其他通信接口，而非使用如下所示的 I2C 接口：

esp_err_t bsp_i2c_init(void)
{
? ? ...
}

定制 BSP 的第二步是編輯頭文件 ws_7inch.h。這個頭文件定義了所有的管腳配置、通信速率以及開發(fā)板的屏幕尺寸。

• ws_7inch.h:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/components/ws_7inch/include/bsp/ws_7inch.h

最后，如果您想修改文件名稱，或者為 LCD 顯示屏和觸摸屏添加新的依賴組件，您需要對 CMakeLists.txt 與 idf_component.yml 進(jìn)行更新。在修改組件名稱之后，還需要在主程序中更新 idf_component.yml。

• CMakeLists.txt:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/components/ws_7inch/CMakeLists.txt

• idf_component.yml: https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/components/ws_7inch/idf_component.yml

• 主程序中更新?idf_component.yml:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/main/idf_component.yml

2.?開發(fā)板描述文件與圖像

定制 BSP 完成之后，您可以更新開發(fā)板描述文件 manifest.json:

{
? ? "name":"Custom WaveShare 7inch",
? ? "version":"1.0.0",
? ? "mcu":"ESP32",??

?? ?"screen_width":"800",
? ? "screen_height":"480",
? ? "screen_color_swap":true,?

?? ?"short_description":"WaveShare 7inch Display",
? ? "long_description":"Example of the custom BSP and custom LCD",?

? ??"placeholders":

? ? {
? ? ? ? "__ESP_BOARD_INCLUDE__": "bsp/ws_7inch.h",
? ? ? ? "__ESP_BOARD_I2C_INIT__": "/* Initialize I2C (for touch) */\n? ? bsp_i2c_init();"
? ? }
}

• manifest.json:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/manifest.json

其中，name、version、mcu、short_description 和 long_description 僅用于在 SquareLine Studio 中顯示用戶自己的開發(fā)板，設(shè)置為任意值均可。而 screen_width、screen_height 和 screen_color_swap 這些值比較重要，它們定義了 LCD 顯示屏的實際參數(shù)。placeholders 需要您根據(jù)第一步中定制的 BSP 進(jìn)行更新，修改 __ESP_BOARD_INCLUDE__ 為頭文件路徑，修改 __ESP_BOARD_I2C_INIT__ 為觸摸屏的初始化函數(shù)。

此外，開發(fā)板圖像文件 image.png 也要進(jìn)行更新，開發(fā)板圖像的尺寸應(yīng)為 380px x 300px。

• image.png:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/image.png

3. ESP-IDF 及 LVGL 默認(rèn)設(shè)置

如果您對 ESP-IDF 及 LVGL 有一些特殊設(shè)置，可以將其放在 sdkconfig.defaults 文件中。并且，配置選項 CONFIG_LV_COLOR_16_SWAP ?必須與 manifest.json 文件中 screen_color_swap 的值相同。

• sdkconfig.defaults:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/sdkconfig.defaults
  

• manifest.json:?https://github.com/espressif/esp-bsp/blob/master/SquareLine/boards/custom_waveshare_7inch/manifest.json

4. 生成軟件包并復(fù)制到 SqaureLine Studio

更新完所有的文件后，就可以運(yùn)行 SquareLine 文件夾中的 generator 來生成軟件包：

python gen.py -b custom_waveshare_7inch -o output_folder

• SquareLine:?https://github.com/espressif/esp-bsp/tree/master/SquareLine

軟件包生成后，會被放在 output_folder 中的 espressif 文件夾中。最后，將生成的軟件包 espressif/custom_waveshare_7inch 復(fù)制到 SquareLine Studio 安裝目錄下的 boards 文件夾中。

5. 運(yùn)行 SquareLine Studio

啟動 SquareLine Studio 后，您可以在 Create 選項卡和 Espressif 選項卡上看到自定義的開發(fā)板，里面包含了開發(fā)板的名稱、描述和圖像等相關(guān)信息。

總結(jié)

現(xiàn)在，您可以使用 LVGL 的控件為自定義的開發(fā)板創(chuàng)建項目了。在非必要的情況下，我們建議不要使用圖像的縮放功能（縮放功能可能會導(dǎo)致運(yùn)行變慢，而且較大的圖像會占用很大的芯片 flash 空間）。您可以在其他圖像編輯器中調(diào)整圖像大小，然后使用全尺寸的圖像。

項目完成后，您可以通過主菜單中的 Export -> Create Template Project 導(dǎo)出模板，以及通過主菜單中的 Export -> Export UI Files 導(dǎo)出 UI 文件。

最后，使用以下命令對文件進(jìn)行編譯和燒錄：

idf.py -p COM34?flash monitor

另外，使用尺寸較大的圖像時，請不要忘記修改 partitions.csv 文件中的 factory 分區(qū)大小，并在 menuconfig 中修改選用模組的 flash 大小。否則，您會發(fā)現(xiàn)應(yīng)用程序的編譯時間過長，且沒有足夠的下載空間。

如果您對相關(guān)內(nèi)容感興趣，敬請期待后續(xù)的更多分享。