找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 5466|回复: 0
收起左侧

零知开源分享-移植 LittleVGL.GUI库demo演示

[复制链接]
ID:349555 发表于 2019-5-30 14:48 | 显示全部楼层 |阅读模式
本帖最后由 roc2 于 2019-5-30 15:00 编辑

Little VGL作为一个优秀、源码开源的GUI库,内存占用少但界面炫酷,目前得到越来越多的支持。零知开源平台已移植了该库,下面在零知开发板-增强板上进行实验演示。

特性:
  • 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)零知开发板-增强板
好看增强板.png

(2)TFT液晶显示屏
(3)开发工具
零知开发工具与零知开发板配合使用,实现程序一键下载。
零知界面.png

2、硬件连接
使用2.4寸、ILI9341驱动、带触摸屏XPT2046的TFT液晶显示屏作为显示工具,与零知增强板配合使用,硬件连接按下表进行连线:

硬件连接.jpg

3、编写代码
因为使用了TFT液晶显示屏作为显示工具,所以需要用到FSMC_TFT库,同时也用到触摸屏功能,也需要XPT2046的软件库,相关的库文件可到零知实验室官网免费获取。
(1)显示设备
初始化:
  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. }
复制代码
液晶屏与LittleVGL库相关联,进行显示的操作:
  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);           //设置光标位置
  19.                 LCD_WriteRAM_Prepare();     //开始写入GRAM
  20.                 for(j=0;j<width;j++)
  21.                 {
  22.                         LCD_TYPE->LCD_RAM=color_p->full;//写入数据
  23.                         color_p++;
  24.                 }
  25.         }
  26.         lv_flush_ready();
  27. }


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

  53. /**
  54. * Fill a rectangular area with a color
  55. * @param x1 left coordinate of the rectangle
  56. * @param x2 right coordinate of the rectangle
  57. * @param y1 top coordinate of the rectangle
  58. * @param y2 bottom coordinate of the rectangle
  59. * @param color fill color
  60. */
  61. void tft_fill(int32_t x1, int32_t y1, int32_t x2, int32_t y2, lv_color_t color)
  62. {
  63.         LCD_Fill(x1,y1,x2,y2,color.full);
  64. }
复制代码
(2)输入设备,即用触摸屏作为输入设备
初始化:
  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. }
复制代码
触摸位置的读取:
  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. }
复制代码
注:触摸屏最好先进行校准,这样读取位置就比较精确,这里简单的进行了一下转换,对于尺寸较大的控件影响不大,如果是尺寸很小的控件不做校准,读取位置就会有很大的偏差。
(3)LVGL system tick
使用一个1ms定时器中断进行提供:

  1. void timer_handler(stimer_t *timer)
  2. {        
  3.         lv_tick_inc(1);
  4. }

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

(4)创建lvgl的一个demo
这里直接调用了官方示例的demo进行演示。

4、运行效果:
1.jpg



2.jpg



3.jpg


4.jpg

还可以使用PC端模拟器辅助开发调试UI,以下是windows上Qt运行效果:
windows.jpg

相关的库文件和完整工程代码可到零知实验室官网免费获取。






回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|51黑电子论坛 |51黑电子论坛6群 QQ 管理员QQ:125739409;技术交流QQ群281945664

Powered by 单片机教程网

快速回复 返回顶部 返回列表