零.前置篇章

本篇前置文章為【LVGL快速入門(一)】LVGL開源框架入門教程之框架移植

一.UI設(shè)計

????????介紹使用之前，我們要學(xué)習一款LVGL官方的UI設(shè)計工具SquareLine Studio，使用圖形化設(shè)計方式設(shè)計出我們想要的界面，然后生成對應(yīng)源文件導(dǎo)入工程使用。

詳情參考這篇文章：【學(xué)習筆記】SquareLine Studio安裝教程（LVGL官方工具）-CSDN博客

? ? ? ? ?另一種非官方工具Gui Guider(恩智浦開發(fā))也可以進行UI設(shè)計：

Gui Guider官方下載地址：GUI Guider | NXP 半導(dǎo)體

?個人比較喜歡恩智浦這個工具，界面看著更簡潔，而且免費。

二.簡單測試

? ? ? ? 在while前添加以下代碼來簡單測試是否移植成功：

    // 按鈕lv_obj_t *myBtn = lv_btn_create(lv_scr_act());                               // 創(chuàng)建按鈕; 父對象：當前活動屏幕lv_obj_set_pos(myBtn, 10, 10);                                               // 設(shè)置坐標lv_obj_set_size(myBtn, 120, 50);                                             // 設(shè)置大小// 按鈕上的文本lv_obj_t *label_btn = lv_label_create(myBtn);                                // 創(chuàng)建文本標簽，父對象：上面的btn按鈕lv_obj_align(label_btn, LV_ALIGN_CENTER, 0, 0);                              // 對齊于：父對象lv_label_set_text(label_btn, "Test");                                        // 設(shè)置標簽的文本// 獨立的標簽lv_obj_t *myLabel = lv_label_create(lv_scr_act());                           // 創(chuàng)建文本標簽; 父對象：當前活動屏幕lv_label_set_text(myLabel, "Hello world!");                                  // 設(shè)置標簽的文本lv_obj_align(myLabel, LV_ALIGN_CENTER, 0, 0);                                // 對齊于：父對象lv_obj_align_to(myBtn, myLabel, LV_ALIGN_OUT_TOP_MID, 0, -20);               // 對齊于：某對象

?可以看到一個Test按鈕以及Hello world!

遇到錯誤或者奇怪的現(xiàn)象可以參考：LCD典型問題及解決方案_hx8399c-CSDN博客?

三.正式開發(fā)

? ? ? ? 這里筆者使用GUI Guider來做演示。

1.創(chuàng)建工程

? ? ? ? Create a new project來創(chuàng)建新工程：

貌似只適配8.3的?框架，next下一步：

選擇設(shè)備模擬器為模板：?

選擇空工程：

根據(jù)自己的屏幕選擇尺寸，以及自命名工程和保存路徑：

單擊Create即可創(chuàng)建成功：

2.設(shè)計界面

依次單擊以下圖標可以呼出組件界面：

先添加一個容器覆蓋我們的界面：

組件中選擇圖片，然后導(dǎo)入幾張圖片：

修繕一下：?

選擇標簽，加點文字：

3.運行測試

點擊右上角的三角運行無誤后，即可開始移植

4.移植代碼

將代碼導(dǎo)出至指定路徑：

打開我們移植好LVGL的STM32的工程以及工程文件夾，在LVGL文件夾中創(chuàng)建一個guider文件夾，將guider生成的源碼src文件夾全部放入（刪除生成的main.c）：

?

工程管理中創(chuàng)建組并添加文件：

魔術(shù)棒中添加頭文件路徑：

打開GUI Guider導(dǎo)出的main.c文件，將main.c中的頭文件加入到我們自己工程的頭文件中：

//Guider
#include "../generated/gui_guider.h"
#include "../generated/events_init.h"

在main.c主函數(shù)上方添加全局變量：

lv_ui guider_ui;

在主函數(shù)中調(diào)用（LVGL框架初始化之后）：

setup_ui(&guider_ui);
events_init(&guider_ui);

編譯成功即可。

5.錯誤解決方案

以下是筆者移植時遇到的錯誤總結(jié)：

1.error:#8：missing closing quote

這個錯誤主要由編碼錯誤引起，在魔術(shù)棒->C/C++->Misc Controls中添加：--locale=english

后即可解決

2.畫面倒置

燒入成功后發(fā)現(xiàn)畫面是旋轉(zhuǎn)的或者倒置的話，可以使用LVGL自帶的屬性進行修改旋轉(zhuǎn)

打開lv_port_disp.c這個文件，找到void lv_port_disp_init(void)這個函數(shù)

在lv_disp_drv_register(&disp_drv);前添加堆屬性的修改即可

disp_drv.sw_rotate = 1;
disp_drv.rotated = LV_DISP_ROT_90;

這兩句是開啟旋轉(zhuǎn)并旋轉(zhuǎn)90度，其他宏如：

LV_DISP_ROT_NONE,?LV_DISP_ROT_90,?LV_DISP_ROT_180,??LV_DISP_ROT_270?

分別可旋轉(zhuǎn)不同的角度

四.移植成功

????????哈哈很浪漫的啊！