前言

恩智浦“FRDM-MCXN947”評測活動由安富利和與非網(wǎng)協(xié)同舉辦。本篇內(nèi)容由與非網(wǎng)用戶發(fā)布，已獲轉(zhuǎn)載許可。原文可在與非網(wǎng)(eefocus)工程師社區(qū)查看。

背景

終于來到了最后一個任務(wù)，設(shè)計一個基于LVGL的GUI應(yīng)用，可以在UI上拖動滑動條控制電機轉(zhuǎn)速，點擊按鍵切換點擊旋轉(zhuǎn)方向。

GUI設(shè)計采用NXP出品的Gui Guider工具，我電腦上安裝的版本是v1.8.0版本。

界面設(shè)計

打開Gui Guider工具，當前v1.8.0只支持lvgl v8.3.10版本，然后選擇模擬器，屏幕分辨率為 320x240。

01Gui Guider界面設(shè)計

創(chuàng)建工程時沒有截圖，在打開工程后以在下方狀態(tài)欄找到Project控件點擊展開，工程屬性如下圖所示：

設(shè)計的最終界面如下圖所示，屏幕最上方是標題MCXN947 Motor Control，中間是一個NXP圖片，再往下是3個按鍵，分別控制電機左轉(zhuǎn)、停止、右轉(zhuǎn)，最下方是兩個文字標簽和一個活動條，左右文字標簽分別在電機左轉(zhuǎn)和右轉(zhuǎn)的時候單獨顯示。

我最早接觸Gui Guider是v1.3.1版本，那個時候Gui Guider軟件界面和當前版本有挺大差異的。當前軟件版本的設(shè)計界面如上圖所示：

UI編輯區(qū)，點擊左邊的星星圖標展開或者收縮控件列表；以前的版本是固定在左側(cè)的；

界面差異很大的是Event區(qū)，以前放在上圖（4）的位置，和Attributes各自成一個Tab，如今挪到下方的狀態(tài)欄，一開始還找不到，令人著急；

此外添加Event的方式也大有改善，可以給一個事件添加多個目標，參見下圖。

02設(shè)置 Event

當前版本添加Event的方式很優(yōu)秀，可以給一個對象添加多個事件，每個事件可以作用于多個目標控件，每個目標控件可以修改多個屬性。

下圖演示了Right按鍵添加clicked時間，作用于3個目標控件，并且添加了一個自定義代碼，詳細的描述是：

Right按鍵點擊時，標簽label_speed_left不可見；

Right按鍵點擊時，標簽label_speed_right變成可見狀態(tài)；

Right按鍵點擊時，滑動條slider_speed添加了一個標志，即LV_OBJ_FLAG_CLICKABLE，即可以點擊（我的代碼邏輯是Stop按鍵單擊后不允許滑動條拖動，再點擊Left或者Right按鍵之后才可以拖動）。

雖說Gui Guider方便了LVGL UI設(shè)計，但是也有一些不足之處，我的使用經(jīng)驗如下：

部分控件支持的屬性不夠豐富，例如給目標slider控件設(shè)置value值，居然找不到；

添加custom_code，代碼自動補全功能不夠完整；

添加了目標控件之后不能改變順序，這一點還是有一些必要的，因為custom_code依賴一些控件狀態(tài)，對代碼順序是有要求的；

不能從外部修改generated目錄下的文件，因為每次生成都會被Gui Guider生成的文件覆蓋掉，這個還有一些缺陷，畢竟在編輯器里寫代碼要比在Gui Guider里寫代碼速度快。

03模擬器運行

在UI設(shè)計完畢，現(xiàn)在電腦運行模擬器，如下圖點擊菜單欄上的編譯按鍵，選擇C語言版本，編譯通過之后彈出模擬器界面。

編譯通過，運行模擬器。

代碼編寫

上面說明Event添加方式不夠靈活，還是需要手動修改代碼。

我設(shè)計的GUI有以下邏輯：

界面初始化之后，滑動條數(shù)值為0不允許滑動，且左右兩個速度標簽是隱藏的，只有當電機左轉(zhuǎn)或者右轉(zhuǎn)時才單獨顯示一個對應(yīng)的標簽；

只有點擊Left或者Right才能激活滑條，然后拖動滑條控制電機轉(zhuǎn)動并調(diào)速；

點擊Stop讓滑條歸零，兩個速度標簽隱藏，并且電機停轉(zhuǎn)。

01初始化界面

初始化界面的代碼放在custom.c文件中，代碼如下，添加了兩個變量，分別表示電機轉(zhuǎn)速和電機轉(zhuǎn)動方向：

/**********************
* STATIC VARIABLES
**********************/
uint32_t speed_value =0;
uint32_t direction =DIR_LEFT;


/**
* Create a demo application
*/


void custom_init(lv_ui *ui)
{
/* Add your codes here*/


// 滑條不允許滑動
 lv_obj_clear_flag(ui->pageStatic_slider_speed, LV_OBJ_FLAG_CLICKABLE);


// 兩個速度標簽不顯示
 lv_obj_add_flag(ui->pageStatic_label_speed_left, LV_OBJ_FLAG_HIDDEN);
 lv_obj_add_flag(ui->pageStatic_label_speed_right, LV_OBJ_FLAG_HIDDEN);
}

02按鍵事件

三個按鍵和一個滑條的事件都放在events_init.c文件中。

2.1滑條滑動事件

首先獲取滑條位置轉(zhuǎn)換為電機速度，保存在變量speed_value中；然后根據(jù)電機方向變量direction的值，分別控制電機左轉(zhuǎn)或右轉(zhuǎn)，并分別顯示左右標簽頁顯示電機速度。

staticvoidpageStatic_slider_speed_event_handler(lv_event_t* e)
{
lv_event_code_tcode =lv_event_get_code(e);
switch(code) {
  caseLV_EVENT_VALUE_CHANGED:
  {
   speed_value =lv_slider_get_value(guider_ui.pageStatic_slider_speed);


  switch(direction) {
    caseDIR_LEFT:
   lv_label_set_text_fmt(guider_ui.pageStatic_label_speed_left,"%d%%", speed_value);
   motor_left(speed_value);
   break;


    caseDIR_RIGHT:
   lv_label_set_text_fmt(guider_ui.pageStatic_label_speed_right,"%d%%", speed_value);
   motor_right(speed_value);
   break;


   default:
   break;
   }
  break;
  }
 default:
 break;
 }
}

2.2left按鍵事件

單擊Left按鍵，首先取消左側(cè)的速度標簽隱藏屬性，即讓其可見；

讓右側(cè)的速度標簽頁隱藏；

讓滑條可以單擊；

改變速度方向變量為DIR_LEFT方向；

設(shè)置滑條數(shù)值為speed_value數(shù)值；

讓左側(cè)速度標簽頁顯示速度；

調(diào)用motor_left(speed_value)函數(shù)讓電機向左轉(zhuǎn)動并設(shè)置速度。

staticvoidpageStatic_btn_left_event_handler(lv_event_t* e)
{
lv_event_code_tcode =lv_event_get_code(e);
switch(code) {
  caseLV_EVENT_CLICKED:
  {
  lv_obj_clear_flag(guider_ui.pageStatic_label_speed_left, LV_OBJ_FLAG_HIDDEN);
  lv_obj_add_flag(guider_ui.pageStatic_label_speed_right, LV_OBJ_FLAG_HIDDEN);
  lv_obj_add_flag(guider_ui.pageStatic_slider_speed, LV_OBJ_FLAG_CLICKABLE);


   direction =DIR_LEFT;
  lv_slider_set_value(guider_ui.pageStatic_slider_speed, speed_value, LV_ANIM_ON);
  lv_label_set_text_fmt(guider_ui.pageStatic_label_speed_left,"%d%%", speed_value);


  motor_left(speed_value);
  break;
  }
 default:
 break;
 }
}

2.3right按鍵事件

同Left按鍵事件，邏輯是反的，最后調(diào)用motor_right()函數(shù)讓電機向右轉(zhuǎn)動并設(shè)置轉(zhuǎn)速。

staticvoidpageStatic_btn_right_event_handler(lv_event_t* e)
{
lv_event_code_tcode =lv_event_get_code(e);
switch(code) {
  caseLV_EVENT_CLICKED:
  {
  lv_obj_add_flag(guider_ui.pageStatic_label_speed_left, LV_OBJ_FLAG_HIDDEN);
  lv_obj_clear_flag(guider_ui.pageStatic_label_speed_right, LV_OBJ_FLAG_HIDDEN);
  lv_obj_add_flag(guider_ui.pageStatic_slider_speed, LV_OBJ_FLAG_CLICKABLE);
   direction =DIR_RIGHT;
  lv_slider_set_value(guider_ui.pageStatic_slider_speed, speed_value, LV_ANIM_ON);
  lv_label_set_text_fmt(guider_ui.pageStatic_label_speed_right,"%d%%", speed_value);


  motor_right(speed_value);
  break;
  }
 default:
 break;
 }
}

2.4stop按鍵

讓兩個速度標簽都隱藏，設(shè)置速度變量為0，并設(shè)置滑條數(shù)值為0，且不允許拖動滑條，最后調(diào)用motor_stop()讓電機停止轉(zhuǎn)動。

staticvoidpageStatic_btn_stop_event_handler(lv_event_t* e)
{
lv_event_code_tcode =lv_event_get_code(e);
switch(code) {
  caseLV_EVENT_CLICKED:
  {
  lv_obj_add_flag(guider_ui.pageStatic_label_speed_left, LV_OBJ_FLAG_HIDDEN);
  lv_obj_add_flag(guider_ui.pageStatic_label_speed_right, LV_OBJ_FLAG_HIDDEN);


   speed_value =0;
  lv_slider_set_value(guider_ui.pageStatic_slider_speed, speed_value, LV_ANIM_ON);


  lv_obj_clear_flag(guider_ui.pageStatic_slider_speed, LV_OBJ_FLAG_CLICKABLE);


  motor_stop();
  break;
  }
 default:
 break;
 }
}

關(guān)于安富利

安富利是全球領(lǐng)先的技術(shù)分銷商和解決方案提供商，在過去一個多世紀里一直秉持初心，致力于滿足客戶不斷變化的需求。通過遍布全球的專業(yè)化和區(qū)域化業(yè)務(wù)覆蓋，安富利可在產(chǎn)品生命周期的每個階段為客戶和供應(yīng)商提供支持。安富利能夠幫助各種類型的公司適應(yīng)不斷變化的市場環(huán)境，在產(chǎn)品開發(fā)過程中加快設(shè)計和供應(yīng)速度。安富利在整個技術(shù)價值鏈中處于中心位置，這種獨特的地位和視角讓其成為了值得信賴的合作伙伴，能夠幫助客戶解決復(fù)雜的設(shè)計和供應(yīng)鏈難題，從而更快地實現(xiàn)營收。