簡介
物聯網裝置開發過程中，嵌入式GUI（使用者圖形界面）的開發是一個重要的組成部分。許多智能裝置如智能家電、智能手表、智能儀表上都會涉及到GUI開發。AliOS Things內建開源圖形庫littlevGL，可以在linux上進行圖形界面開發。開發完成後将代碼添加到相應的工程并完成顯示和輸入裝置驅動的對接，程式即可在相應的硬體上運作，友善使用者進行嵌入式GUI開發。 littlevGL是一個開源的嵌入式圖形庫，采用C語言開發，使用MIT協定，并在持續更新中。該圖形庫支援常用的控件，如按鈕、清單、滑塊、選擇框、儀表盤、鍵盤、波形等。并支援觸摸、滑鼠、鍵盤等多種輸入方式。其官方網站為： https://littlevgl.com 。
linux模拟開發步驟
1、環境安裝
a、按照 AliOS Things Linux Environment Setup 安裝基本環境。 b、按照如下指令安裝SDL2圖形庫。 sudo apt-get install libsdl2-2.0:i386 sudo apt-get install libxkbcommon-dev:i386 sudo apt-get install libmircommon-dev:i386 sudo apt-get install libmirclient-dev:i386 sudo apt-get install libegl1-mesa-dev:i386 sudo apt-get install libglib2.0-dev:i386 sudo apt-get install libpulse-dev:i386 sudo apt-get install libsdl2-dev:i386
2、拷貝代碼 git clone https://github.com/alibaba/AliOS-Things.git
3、模拟運作 編譯運作指令：aos make [email protected] 編譯通過之後會自動運作生成的可執行檔案，界面如下
使用者可以自行添加應用代碼，開發完成後将代碼添加到相應的工程并完成顯示和輸入裝置驅動的對接，程式即可在相應的硬體上運作。
example/littlevgl_simulate/lv_examples目錄下包含demo程式以及各個控件使用的示例程式，可參考進行界面開發。
AliOS Things開發版開發步驟：
在starterkit的開發版上已經移植littlevgl，使用者直接運作指令即可編譯GUI工程。 編譯指令：aos make [email protected] 編譯完成後下載下傳到starterkit即可。
其他CPU開發步驟：
1、顯示驅動實作
a、使用内部緩沖區（lv_conf.h的LV_VDB_SIZE > 0） 必須實作如下函數，其功能為對一片矩形區域填充顔色，注意該函數的最後必須調用lv_flush_ready()函數。
void my_disp_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p){ lv_flush_ready();}
b、使用硬體加速（USE_LV_GPU = 1 且使用内部緩沖區） 必須實作如下函數： void my_mem_blend(lv_color_t * dest, const lv_color_t * src, uint32_t length, lv_opa_t opa){ }void my_mem_fill(lv_color_t * dest, uint32_t length, lv_color_t color){ }
c、不使用緩沖區 必須實作如下函數： void my_disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p){ }*Write pixel map (e.g. image) to the display*/void my_disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, lv_color_t color){ }
2、輸入驅動實作 a、觸摸或者滑鼠等點輸入裝置 必須使用如下函數，擷取點坐标
bool my_input_read(lv_indev_data_t *data) { data->point.x = touchpad_x; data->point.y = touchpad_y; data->state = LV_INDEV_EVENT_PR or LV_INDEV_EVENT_REL; return false; }
b、鍵盤裝置 必須使用如下函數： bool keyboard_read(lv_indev_data_t *data) { data->key = last_key(); if(key_pressed()) { data->state = LV_INDEV_EVENT_PR; } else { data->state = LV_INDEV_EVENT_REL; } return false; }
3、初始化
a、将framework/GUI/littlevGL目錄下的檔案添加到工程。 b、根據需要配置lv_conf.h中相應的宏定義。 c、調用lv_init()初始化littlevGL。 d、初始化顯示和輸入（鍵盤、滑鼠、觸摸等）裝置。 e、調用lv_disp_drv_init初始化顯示驅動，調用lv_disp_drv_register注冊顯示驅動。調用lv_indev_drv_init初始化輸入驅動，調用lv_indev_drv_register注冊輸入驅動，示例代碼見附錄。 f、在時鐘中斷中調用lv_tick_inc(1)，為littlevGL提供心跳。 g、建立一個低優先級任務，在其中重複調用lv_task_handler函數，進行圖像的重新整理和輸入事件的響應。
4、APP編寫
使用者可以自行添加相應的應用代碼。
其他
AliOS Things也支援STemwin，在starterkit的開發版上已經移植STemwin，使用者直接運作指令即可編譯GUI工程。 編譯指令：aos make [email protected]
附錄
驅動初始化和注冊示例代碼如下： lv_disp_drv_t dis_drv;lv_indev_drv_t indev_drv;void lvgl_drv_register(void){ lv_disp_drv_init(&dis_drv); dis_drv.disp_flush = my_disp_flush; dis_drv.disp_fill = my_disp_fill; dis_drv.disp_map = my_disp_map; lv_disp_drv_register(&dis_drv); lv_indev_drv_init(&indev_drv); indev_drv.type = LV_INDEV_TYPE_POINTER; indev_drv.read = my_input_read; lv_indev_drv_register(&indev_drv); }void my_disp_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p){ int32_t x = 0; int32_t y = 0; for (y = y1; y <= y2; y++) { for (x = x1; x <= x2; x++) { BSP_LCD_DrawPixel(x,y, color_p); color_p++; } } lv_flush_ready();}void my_disp_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, lv_color_t color){ int32_t i =0; int32_t j =0; for (i = x1; i <= x2; i++) { for (j = y1; j <= y2; j++) { BSP_LCD_DrawPixel(i,j, color.full); } }}void my_disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p){ int32_t i =0; int32_t j =0; for (i = x1; i <= x2; i++) { for (j = y1; j <= y2; j++) { BSP_LCD_DrawPixel(i,j, color_p->full); color_p++; } }}bool my_input_read(lv_indev_data_t *data) { __IO TS_StateTypeDef ts; BSP_TS_GetState((TS_StateTypeDef *)&ts); ts.touchX[0] = TouchScreen_Get_Calibrated_X(ts.touchX[0]); ts.touchY[0] = TouchScreen_Get_Calibrated_Y(ts.touchY[0]); if((ts.touchX[0] >= 240) ||(ts.touchY[0] >= 240) ) { ts.touchX[0] = 0; ts.touchY[0] = 0; } if((TS_State_cur.Pressed != ts.touchDetected )|| (TS_State_cur.x != ts.touchX[0]) || (TS_State_cur.y != ts.touchY[0])) { TS_State_cur.Pressed = ts.touchDetected; if(ts.touchDetected) { TS_State_cur.x = ts.touchX[0]; TS_State_cur.y = ts.touchY[0]; data->point.x = TS_State_cur.x; data->point.y = 240 - TS_State_cur.y; if(TS_State_cur.Pressed == ts.touchDetected) { data->state = 1; } else { data->state = 0; } } else { TS_State_cur.x = 0; TS_State_cur.y = 0; } } return false; }
原文連結 閱讀更多幹貨好文，請關注掃描以下二維碼：