背景介紹

近幾年，由于半導體行業的大力發展，配備圖形界面的嵌入式設備已經越來越多的出現在我們的生活中。傳統家電，比如洗衣機、微波爐，原始的機械按鍵都逐漸被顯示觸控按鍵替代；穿戴設備，配備顯示屏的電子款手表手環，開始占據越來越大的市場份額；汽車領域，開始使用觸控屏按鍵取代傳統機械按鍵，LCD儀表盤也幾乎將指針儀表盤淘汰。因此，能夠進行界面顯示、交互的微控制器也越來越受市場的青睞。

恩智浦i.MX RT系列MCU性能強大、主頻高，并且其中部分MCU配備了圖形處理外設，是繪制圖形界面非常好的選擇。

本文通過一個基于恩智浦推出的LVGL圖形設計工具GUI Guider，和運行在i.MX RT1170上的圖形界面工程，來介紹在i.MX RT系列MCU上進行圖形界面的設計。

工程演示視頻如下所示：

界面設計軟件GUI Guider

GUI Guider是恩智浦為LVGL推出的一個GUI軟件設計工具，旨在讓客戶在使用恩智浦芯片開發LVGL圖形界面工程時，能夠更方便的設計出精美的界面。

打開工具，選擇新建項目，接著可以選擇你所用的LVGL版本以及你所用的MCU、顯示屏、項目模板等。需要注意的是，本項目選用1280*720的顯示屏（即landscape模式），在設備選擇時注意不要選成720*1280。

圖1. GUI Guider工程創建&屏幕選擇

在界面基本創建好之后，GUI Guider工程如下圖所示：

圖2. 界面創建完成

本文只用GUI Guider做界面布局，界面的圖標都用了貼圖控件，并未選擇工具中的其他功能控件。

如果想了解GUI Guider的用法以及各種控件的知識，可以翻閱本站前期的文章和NXP官方網站，在此不對GUI Guider做過多的介紹。

功能任務

在GUI Guider工程創建完成后，可以在對應的文件夾下找到創建好的工程文件（GUI-Guider-Projectsxxxxgenerated），其中包含了在工具中繪制的界面文件、添加的事件文件及圖片字體的存儲文件等。

值得注意的是，當我們創建好界面工程，開始添加自己的邏輯功能代碼時，需要放在’custom’文件夾中，如果放在了你工程的源文件中（GUI-Guider-ProjectsxxxxsdkCoresource），那么當你不小心進行了工程的更新之后，你所寫的邏輯功能代碼將會被覆蓋，別問我是怎么知道的。。。

介紹完了在GUI Guider中創建工程的注意事項之后，開始介紹本文的功能任務。

1、LVGL任務 利用GUI Guider創建的LVGL工程，可以參考SDK中的“SDK_2_12_0_MIMXRT1170-EVKoardsevkmimxrt1170lvgl_exampleslvgl_guider”，兩者具有相同的結構。 在前面的演示視頻中，可以看到，本工程模擬一個汽車儀表盤，在開機以及行駛過程中的顯示情景。本工程用于展示其顯示功能并未展示GUI的交互功能，絕大部分都是用了貼圖來進行界面的填充，想要達到動畫的效果，可以通過創建、刪除圖像控件或者對圖像控件進行透明度設定來實現。 在LVGL中參考如下兩種方法:

lv_obj_create(lv_obj_t * obj) //創建對象

lv_obj_del(lv_obj_t * obj) //刪除對象，結合創建對象功能以實現動畫效果；

lv_style_set_img_opa(lv_style_t * style, lv_opa_t value) //設置某個樣式的透明度值

lv_obj_add_style(lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector) //給所選的圖像添加透明度為0或者1的樣式，以實現動畫效果；

本工程所選用的方式為設置圖像透明度。先利用GUI Guider工具將所需要的全部圖像按照上下層順序貼好，注意，一定要確定好放置的次序，否則在后續添加邏輯代碼實現動畫效果時會與預期效果不同。

比如界面中的右轉向燈，在設置相應的位置后，在工具右側‘Attributes’欄下面，可以通過‘Opacity’選項設置其初始透明度。

圖3.設置對象透明度

在后續程序運行中，再通過邏輯函數修改各圖像控件的透明度來達到動畫的效果。

為了充分利用有限的存儲空間，我們往往需要將代碼進行最大化的“瘦身”。而在LVGL工程中，很重要的一點，就是將我們沒有用到的模塊裁剪掉。打開’ sdkCoresource’文件夾下的lv_conf.h文件，我們可以看到有許多開關宏，LVGL中的控件都通過這些開關宏來確定是否加入編譯。這里我們將沒有用到的控件，比如Arc, Bar, Checkbox等都關閉其宏定義，這樣可以減少編譯的文件，從而給代碼“瘦身”。

圖4. 進行LVGL控件裁剪

2.RTC任務

在常見的汽車儀表盤中，都會有日期時間的顯示。本工程中在界面繪制時也添加上了此模塊。在上面視頻演示中可以看到，在初始開機界面沒有添加此部分，而后在表盤界面就添加上。我們需要做的是在GUI Guider布局界面時，在對應位置添加上對應格式的文本控件。

圖5. 添加日期、時間對象

在界面布局完成后，添加我們的邏輯代碼。首先進行RTC模塊的初始化，通過宏設定初始的日期以及時間，添加時鐘任務，并設定好每一秒鐘進行計時的更新。再添加時間文本轉換函數以及文本更新函數，就可以開始進行日期、時鐘的顯示。

但是，我總不能每次都通過修改宏來設定時間吧？別急，本工程還添加了運行中修改時間的功能。接著往下看。

3. SHELL命令任務

SHELL命令任務可以幫助在程序運行時候進行負載分析等功能。本工程中添加了通過SHELL命令設置時間的功能，現在就來以此功能為例，講講SHELL命令任務的添加。

首先添加一個SHELL_TASK線程，在此線程中，進行虛擬串口的配置，SHELL命令的添加等操作。在’settime’命令中，以“settime y/m/d/h/m/s”的格式進行日期及時間的設置，之后你所設置的文本將被傳到RTC任務中設置時間的函數中，這樣就達成了利用SHELL命令，通過USB口設置當前時間的功能。

圖6. SHELL命令修改界面時間

為了配合SHELL命令任務，在時鐘任務中，需要將更新時間函數分為手動更新和自動更新。手動更新時，SHELL任務中配置一個值，當時鐘任務判定這個值為手動配置信號時，將SHELL任務中更新的日期時間值傳到時鐘任務中，完成時間修改操作；自動更新則是當時鐘任務判定到非手動更新信號，則進行時間的自動更新，不過需要注意的是，當我們進行自動更新，調用更新函數時，需要在界面配置函數完成日期時間文本控件的創建之后，否則函數運行會出錯，這里也通過一個來自LVGL任務中創建日期時間文本控件之后的值，來進行時間自動更新的操作。

    if (g_timeupdated) {
      /* Set RTC time to default time and date and start the RTC*/
      SNVS_HP_RTC_StopTimer(SNVS);
      SNVS_HP_RTC_SetDatetime(SNVS, &g_rtcdate);
      SNVS_HP_RTC_StartTimer(SNVS);
      rtcDate = g_rtcdate;
      g_timeupdated = 0;
    }
    else {
      /* Get date time */
      SNVS_HP_RTC_GetDatetime(SNVS, &rtcDate);
      if (s_time_initialized){        
        draw_date_Time_update();        
      }
    }

總結

在創建圖形界面工程的時候，我們可以先利用GUI Guider工具將所需要的界面布局設計好，對于各控件，可以在工具中修改其各項參數，但值得注意的是，工具中并未包含所有的參數，有些時候我們可以通過自己修改代碼來進行界面的設置。之后將沒有用到的模塊裁剪掉，以減少代碼的大小。

在界面創建完成之后，我們可以添加自己的邏輯代碼，實現自己想要的效果。

本文以一個汽車儀表盤圖形界面的工程為例，給出了其開發的過程以供參考。

審核編輯：湯梓紅