找回密碼
 立即注冊

QQ登錄

只需一步，快速開始

搜索
查看: 6444|回復(fù): 0
打印 上一主題 下一主題
收起左側(cè)

零知開源分享-移植 LittleVGL.GUI庫demo演示

[復(fù)制鏈接]
跳轉(zhuǎn)到指定樓層
樓主
ID:349555 發(fā)表于 2019-5-30 14:48 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
本帖最后由 roc2 于 2019-5-30 15:00 編輯

Little VGL作為一個優(yōu)秀、源碼開源的GUI庫，內(nèi)存占用少但界面炫酷，目前得到越來越多的支持。零知開源平臺已移植了該庫，下面在零知開發(fā)板-增強板上進行實驗演示。

特性：
  • 16, 32 or 64 bit microcontroller or processor
  • 16 MHz clock speed
  • 8 kB RAM for static data and >2 KB RAM for dynamic data (graphical objects)
  • 64 kB program memory (flash)
  • 支持GPU
1、硬件準備
（1）零知開發(fā)板-增強板


（2）TFT液晶顯示屏
（3）開發(fā)工具
零知開發(fā)工具與零知開發(fā)板配合使用，實現(xiàn)程序一鍵下載。


2、硬件連接
使用2.4寸、ILI9341驅(qū)動、帶觸摸屏XPT2046的TFT液晶顯示屏作為顯示工具，與零知增強板配合使用，硬件連接按下表進行連線：



3、編寫代碼
因為使用了TFT液晶顯示屏作為顯示工具，所以需要用到FSMC_TFT庫，同時也用到觸摸屏功能，也需要XPT2046的軟件庫，相關(guān)的庫文件可到零知實驗室官網(wǎng)免費獲取。
（1）顯示設(shè)備
初始化：
  1. /**
  2. * Initialize your display here
  3. */
  4. void tft_init(void)
  5. {
  6.         lv_disp_drv_t disp_drv;
  7.         lv_disp_drv_init(&disp_drv);
  8.          
  9.         disp_drv.disp_fill = tft_fill;
  10.         disp_drv.disp_map = tft_map;
  11.         disp_drv.disp_flush = tft_flush;
  12.          
  13.         lv_disp_drv_register(&disp_drv);
  14. }
復(fù)制代碼
液晶屏與LittleVGL庫相關(guān)聯(lián)，進行顯示的操作：
  1. /**
  2. * Flush a color buffer
  3. * @param x1 left coordinate of the rectangle
  4. * @param x2 right coordinate of the rectangle
  5. * @param y1 top coordinate of the rectangle
  6. * @param y2 bottom coordinate of the rectangle
  7. * @param color_p pointer to an array of colors
  8. */
  9. void tft_flush(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
  10. {
  11.         //        LCD_Color_Fill(x1,y1,x2,y2,color_p);
  12.         u16 height,width;
  13.         u16 i,j;
  14.         width=x2-x1+1;                         //得到填充的寬度
  15.         height=y2-y1+1;                        //高度
  16.         for(i=0;i<height;i++)
  17.         {
  18.                 LCD_SetCursor(x1,y1+i);           //設(shè)置光標位置
  19.                 LCD_WriteRAM_Prepare();     //開始寫入GRAM
  20.                 for(j=0;j<width;j++)
  21.                 {
  22.                         LCD_TYPE->LCD_RAM=color_p->full;//寫入數(shù)據(jù)
  23.                         color_p++;
  24.                 }
  25.         }
  26.         lv_flush_ready();
  27. }


  30. /**
  31. * Put a color map to a rectangular area
  32. * @param x1 left coordinate of the rectangle
  33. * @param x2 right coordinate of the rectangle
  34. * @param y1 top coordinate of the rectangle
  35. * @param y2 bottom coordinate of the rectangle
  36. * @param color_p pointer to an array of colors
  37. */
  38. void tft_map(int32_t x1, int32_t y1, int32_t x2, int32_t y2, const lv_color_t * color_p)
  39. {
  40.         u16 height,width;
  41.         u16 i,j;
  42.         width=x2-x1+1;                         //得到填充的寬度
  43.         height=y2-y1+1;                        //高度
  44.         for(i=0;i<height;i++)
  45.         {
  46.                 LCD_SetCursor(x1,y1+i);           //設(shè)置光標位置
  47.                 LCD_WriteRAM_Prepare();     //開始寫入GRAM
  48.                 for(j=0;j<width;j++)
  49.                 {
  50.                         LCD_TYPE->LCD_RAM=color_p->full;//寫入數(shù)據(jù)
  51.                         color_p++;
  52.                 }
  53.         }
  54. }

  56. /**
  57. * Fill a rectangular area with a color
  58. * @param x1 left coordinate of the rectangle
  59. * @param x2 right coordinate of the rectangle
  60. * @param y1 top coordinate of the rectangle
  61. * @param y2 bottom coordinate of the rectangle
  62. * @param color fill color
  63. */
  64. void tft_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, lv_color_t color)
  65. {
  66.         LCD_Fill(x1,y1,x2,y2,color.full);
  67. }
復(fù)制代碼
（2）輸入設(shè)備，即用觸摸屏作為輸入設(shè)備
初始化：
  1. /**
  2. * init touchpad here
  3. */
  4. /*************************
  5. * Input device interface
  6. *************************/
  7. void touchpad_init(void)
  8. {
  9.          
  10.         lv_indev_drv_t indev_drv;                       /*Descriptor of an input device driver*/
  11.         lv_indev_drv_init(&indev_drv);                  /*Basic initialization*/
  12.         indev_drv.type = LV_INDEV_TYPE_POINTER;         /*The touchpad is pointer type device*/
  13.         indev_drv.read = ex_tp_read;                 /*Library ready your touchpad via this function*/
  14.         lv_indev_drv_register(&indev_drv);              /*Finally register the driver*/
  15. }
復(fù)制代碼
觸摸位置的讀�。�
  1. /*
  2. * touch read position
  3. */
  4. bool ex_tp_read(lv_indev_data_t *data)
  5. {
  6.         bool tp_is_pressed = ts.touched(); /*TODO read here the state of toush pad*/
  7.         int16_t last_x = 0;
  8.         int16_t last_y = 0;
  9.          
  10.         if(tp_is_pressed) {
  11.                 /*Touch pad is being pressed now*/
  12.                 TS_Point p = ts.getPoint();
  13.                  
  14.                 //convert to lcd position
  15.                 last_y = 320-(p.x *320)/4095;       /*TODO save the current X coordinate*/
  16.                 last_x = 240-(p.y *240)/4095;       /*TODO save the current Y coordinate*/
  17.                  
  18.                 Serial.print("touched:");
  19.                 Serial.print(last_x);Serial.print(",");Serial.println(last_y);
  20.         }
  21.          
  22.         data->point.x = last_x;
  23.         data->point.y = last_y;
  24.         data->state = tp_is_pressed ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
  25.          
  26.         return false;       /*Return false because no moare to be read*/
  27. }
復(fù)制代碼
注：觸摸屏最好先進行校準，這樣讀取位置就比較精確，這里簡單的進行了一下轉(zhuǎn)換，對于尺寸較大的控件影響不大，如果是尺寸很小的控件不做校準，讀取位置就會有很大的偏差。
（3）LVGL system tick
使用一個1ms定時器中斷進行提供：
  1. void timer_handler(stimer_t *timer)
  2. {        
  3.         lv_tick_inc(1);
  4. }

  6. void lvgl_timer_init()
  7. {
  8.         static stimer_t m_timer;
  9.         m_timer.timer = TIM3;
  10.         TimerHandleInit(&m_timer, 10-1, 8400-1);//1ms timer
  11.         attachIntHandle(&m_timer, timer_handler);
  12. }
復(fù)制代碼

（4）創(chuàng)建lvgl的一個demo
這里直接調(diào)用了官方示例的demo進行演示。

4、運行效果：













還可以使用PC端模擬器輔助開發(fā)調(diào)試UI，以下是windows上Qt運行效果：


相關(guān)的庫文件和完整工程代碼可到零知實驗室官網(wǎng)免費獲取。






分享到:  QQ好友和群QQ好友和群 QQ空間QQ空間 騰訊微博騰訊微博 騰訊朋友騰訊朋友
收藏收藏 分享淘帖 頂頂 踩踩
回復(fù)

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規(guī)則

手機版|小黑屋|51黑電子論壇 |51黑電子論壇6群 QQ 管理員QQ:125739409;技術(shù)交流QQ群281945664

Powered by 單片機教程網(wǎng)

快速回復(fù) 返回頂部 返回列表