背景介紹

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

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

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

工程演示視頻如下所示：

界面設(shè)計軟件GUI Guider

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

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

圖1. GUI Guider工程創(chuàng)建&屏幕選擇

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

圖2. 界面創(chuàng)建完成

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

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

功能任務(wù)

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

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

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

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

lv_obj_create(lv_obj_t * obj) //創(chuàng)建對象

lv_obj_del(lv_obj_t * obj) //刪除對象，結(jié)合創(chuàng)建對象功能以實現(xiàn)動畫效果；

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

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

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

比如界面中的右轉(zhuǎn)向燈，在設(shè)置相應(yīng)的位置后，在工具右側(cè)‘Attributes’欄下面，可以通過‘Opacity’選項設(shè)置其初始透明度。

圖3.設(shè)置對象透明度

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

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

圖4. 進(jìn)行LVGL控件裁剪

2.RTC任務(wù)

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

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

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

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

3. SHELL命令任務(wù)

SHELL命令任務(wù)可以幫助在程序運行時候進(jìn)行負(fù)載分析等功能。本工程中添加了通過SHELL命令設(shè)置時間的功能，現(xiàn)在就來以此功能為例，講講SHELL命令任務(wù)的添加。

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

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

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

    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();        
      }
    }

總結(jié)

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

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

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

審核編輯：湯梓紅