前言

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

背景

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

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

界面設(shè)計(jì)

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

01Gui Guider界面設(shè)計(jì)

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

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

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

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

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

此外添加Event的方式也大有改善，可以給一個(gè)事件添加多個(gè)目標(biāo)，參見(jiàn)下圖。

02設(shè)置 Event

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

下圖演示了Right按鍵添加clicked時(shí)間，作用于3個(gè)目標(biāo)控件，并且添加了一個(gè)自定義代碼，詳細(xì)的描述是：

Right按鍵點(diǎn)擊時(shí)，標(biāo)簽label_speed_left不可見(jiàn)；

Right按鍵點(diǎn)擊時(shí)，標(biāo)簽label_speed_right變成可見(jiàn)狀態(tài)；

Right按鍵點(diǎn)擊時(shí)，滑動(dòng)條slider_speed添加了一個(gè)標(biāo)志，即LV_OBJ_FLAG_CLICKABLE，即可以點(diǎn)擊（我的代碼邏輯是Stop按鍵單擊后不允許滑動(dòng)條拖動(dòng)，再點(diǎn)擊Left或者Right按鍵之后才可以拖動(dòng)）。

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

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

添加custom_code，代碼自動(dòng)補(bǔ)全功能不夠完整；

添加了目標(biāo)控件之后不能改變順序，這一點(diǎn)還是有一些必要的，因?yàn)閏ustom_code依賴(lài)一些控件狀態(tài)，對(duì)代碼順序是有要求的；

不能從外部修改generated目錄下的文件，因?yàn)槊看紊啥紩?huì)被Gui Guider生成的文件覆蓋掉，這個(gè)還有一些缺陷，畢竟在編輯器里寫(xiě)代碼要比在Gui Guider里寫(xiě)代碼速度快。

03模擬器運(yùn)行

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

編譯通過(guò)，運(yùn)行模擬器。

代碼編寫(xiě)

上面說(shuō)明Event添加方式不夠靈活，還是需要手動(dòng)修改代碼。

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

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

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

點(diǎn)擊Stop讓滑條歸零，兩個(gè)速度標(biāo)簽隱藏，并且電機(jī)停轉(zhuǎn)。

01初始化界面

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

/**********************
* 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*/


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


// 兩個(gè)速度標(biāo)簽不顯示
 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按鍵事件

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

2.1滑條滑動(dòng)事件

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

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è)的速度標(biāo)簽隱藏屬性，即讓其可見(jiàn)；

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

讓滑條可以單擊；

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

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

讓左側(cè)速度標(biāo)簽頁(yè)顯示速度；

調(diào)用motor_left(speed_value)函數(shù)讓電機(jī)向左轉(zhuǎn)動(dòng)并設(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ù)讓電機(jī)向右轉(zhuǎn)動(dòng)并設(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按鍵

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

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