物聯網裝置開發過程中，嵌入式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、拷貝程式碼

3、模擬執行

編譯執行命令：aos make [email protected]
編譯通過之後會自動執行生成的可執行檔案，介面如下

使用者可以自行新增應用程式碼，開發完成後將程式碼新增到相應的工程並完成顯示和輸入裝置驅動的對接，程式即可在相應的硬體上執行。
example/littlevgl_simulate/lv_examples目錄下包含demo程式以及各個控制元件使用的示例程式，可參考進行介面開發。

AliOS Things開發版開發步驟：

在starterkit的開發版上已經移植littlevgl，使用者直接執行命令即可編譯GUI工程。
編譯命令：aos make [email protected]

其他CPU開發步驟：

1、顯示驅動實現

a、使用內部緩衝區（lv_conf.h的LV_VDB_SIZE > 0）
必須實現如下函式，其功能為對一片矩形區域填充顏色，注意該函式的最後必須呼叫lv_flush_ready()函式。

/*Write the internal buffer (VDB) to the display. 'lv_flush_ready()' has to be called when finished*/
void my_disp_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
{
    /*TODO Copy 'color_p' to the specified area*/
    
    /*Call 'lv_fluh_ready()' when ready*/
    lv_flush_ready();
}

b、使用硬體加速（USE_LV_GPU = 1 且使用內部緩衝區）
必須實現如下函式：

/*Blend two memories using opacity (GPU only)*/
void my_mem_blend(lv_color_t * dest, const lv_color_t * src, uint32_t length, lv_opa_t opa)
{
    /*TODO Copy 'src' to 'dest' but blend it with 'opa' alpha */
}

/*Fill a memory with a color (GPU only)*/
void my_mem_fill(lv_color_t * dest, uint32_t length, lv_color_t color)
{
    /*TODO Fill 'length' pixels in 'dest' with 'color'*/
}

c、不使用緩衝區
必須實現如下函式：

/*Fill an area with a color on the display*/
void my_disp_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
{
    /*TODO Copy 'color_p' to the specified area*/
}

*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)
{
    /*TODO Fill the specified area with '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;              /*No buffering so no more data read*/
} 

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;   /*No buffering so no more data read*/
} 

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++)                          /*Pick the next row*/
    {
        for (x = x1; x <= x2; x++)                     /*Pick the a pixel in the row*/
        {
           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;              /*No buffering so no more data read*/
}