Littlevgl GUI相关总结(基于v6.0)-（包含模拟器及oled移植）

yanchao7788

Littlevgl GUI相关总结(v6.0)

The whole graphics library project consists of a few repostories:

• lvgl the graphics library itself
• lv_examples tutorials and example GUI applications
• lv_boards ready to use project on various development boards and microcontrollers
• lv_drivers drivers for common touch pad and display controllers
• lv_utils image and font converter utilities
• pc_simulator a cross platform simulator project to run LittlevGL on PC
  

一、PC端模拟器开发环境搭建
官方教程：https://littlevgl.com/pc-simulator
软件下载地址：
1.Eclipse CDT
eclipse-cpp-oxygen-R-win32-x86_64.zip
http://www.eclipse.org/cdt/downloads.php
2.SDL2
SDL2-devel-2.0.7-mingw.tar.gz
https://www.libsdl.org/download-2.0.php
3.MinGW-w64
x86_64-7.2.0-release-win32-sjlj-rt_v5-rev0.7z
https://sourceforge.net/projects/mingw-w64/files/?source=navbar

1、Install Eclipse CDT
Eclipse CDT is C/C++ IDE. You can use other IDEs as well but in this tutorial the configuration for Eclipse CDT is shown.
Eclipse is a Java based software therefore be sure Jave Runtime Environment is installed on your system.
On linux: sudo apt-get install default-jre
You can download Eclipse's CDT from: https://eclipse.org/cdt/. Start the nstaller and choose *Eclipse CDT* from the list
因不写java，不需要jdk，只要装jre就可以了

2、Install MinGW
官方MinGW很难下载，选择MinGW-w64替代。解压到某个目录，并且添加环境变量D:\mingw64\bin，打开CMD，输入gcc -v测试是否添加成功。重命名mingw64\bin下的mingw32-make.exe为make.exe

3、Install SDL 2
1）Download the development libraries of SDL.
Go to https://www.libsdl.org/download-2.0.php and download Development Libraries: SDL2-devel-2.0.5-mingw.tar.gz
2）Uncompress the file and go to x86_64-w64-mingw32 directory (for 64 bit MinGW) or to i686-w64-mingw32 (for 32 bit MinGW)

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/8fce9ef6e7584eb79861b33ce4301e27/clipboard.png

3）Copy x86_64-w64-mingw32/include/SDL2 folder to D:\mingw64\x86_64-w64-mingw32/include

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/425cd067ecb84a15a06c944d71261d77/clipboard.png

4）Copy x86_64-w64-mingw32/lib/ content to D:\mingw64\x86_64-w64-mingw32\lib

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/f7f11c4b965b4b33a505e1a769efbf66/clipboard.png

5）Copy x86_64-w64-mingw32/bin/SDL2.dll to {eclipse_worksapce}/pc_simulator/Debug/. Do it later when Eclipse is installed.

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/1c8203a33b69491091eea4821fb6510b/clipboard.png

      

4、Download example eclipse project
项目地址：https://github.com/littlevgl/pc_simulator_sdl_eclipse
clone到需要的地方，然后执行submodule update，将引用的仓库同步过来。
这是我修改好的工程：
https://gitee.com/yc_911/littevgl_eclipse_prj


5、Import pre-configed project to Eclipse
File->Import and choose General->Existing project into Workspace.
      

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/bd2a117a2f6549e09d24aaf4f1eba80e/clipboard.png

注：这里导入后，需要对工程的properties做一些修改，否则会出现
undefined reference to `WinMain@16'错误

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/2f923ab207ac4ba59c4fb666d4e843ba/clipboard.png

      
      

C:/Users/Administrator/AppData/Local/YNote/data/yanchao7788_neo@163.com/5d10c9b592c441af8faf5536328841cd/clipboard.png

6、Compile and Run
1）工程默认是单线程编译，不能忍，开启多线程编译
Properties->C/C++ Build->Behavior->Enable parallel build

2）编译时可能会报错：
..\lv_drivers\display\fbdev.c:17:10: fatal error: linux/fb.h: No such file or directory
这时需要修改文件：
lv_drv_conf.h

1. #ifndef USE_FBDEV
   
2. #  define USE_FBDEV           1
   
3. #endif

复制代码

为

1. #ifndef USE_FBDEV
   
2. #  define USE_FBDEV           0
   
3. #endif

复制代码

原因是当前使用的是windows环境


二、基于stm32f103及单色OLED12864移植littlevgl
1、项目地址：
https://gitee.com/yc_911/f103_sh1106_sd
工程也做好了emWin的移植……

2、移植关键点：
1）1bit表示一个像素的处理，更新像素时如何去修改中的一个bit位

1. #define BIT_SET(a,b) ((a) |= (1U<<(b)))
   
2. #define BIT_CLEAR(a,b) ((a) &= ~(1U<<(b)))
   
3. static void set_px_cb(struct _disp_drv_t *disp_drv, uint8_t *buf, lv_coord_t buf_w, lv_coord_t x, lv_coord_t y,
   
4.                       lv_color_t color, lv_opa_t opa)
   
5. {
   
6.     uint16_t byte_index = x + (( y >> 3 ) * buf_w);
   
7.     uint8_t  bit_index  = y & 0x7;
   
8.     // == 0 inverts, so we get blue on black
   
9.     if ( color.full == 0 )
   
10.     {
    
11.         BIT_SET( buf[ byte_index ] , bit_index );
    
12.     }
    
13.     else
    
14.     {
    
15.         BIT_CLEAR( buf[ byte_index ] , bit_index );
    
16.     }
    
17. }

复制代码

2）oled只能一次更新一个byte，即一次更新8个像素点，因此在更新FB时就只能扩大更新范围，只要更新某个bit，则需要更新整个byte

1. <div yne-bulb-block="code" id="9399-1565577938779" data-theme="default" data-language="javascript">static void rounder_cb(struct _disp_drv_t *disp_drv, lv_area_t *area)
   
2. {
   
3.     area->y1 = (area->y1 & (~0x7));
   
4.     area->y2 = (area->y2 & (~0x7)) + 7;
   
5. }
   
6. </div><div yne-bulb-block="paragraph" style="line-height: 1.75;"></div>

复制代码

eric2013

非常感谢楼主这么详细的总结

yanchao7788

eric2013 发表于 2019-8-12 11:00
非常感谢楼主这么详细的总结

搬了一部分官方的教程，然后添加了一些自己遇到的问题及解决方法

missfox

Mark，好贴

hpxzw_foxmai

我记得官方有vs2017的工程移植吧。。

cheng_5230

大力支持，正好在用

leiyitan

单色OLED 屏幕我都用ugui之类的小库，杀鸡用牛刀啊

阿白

sync

这个好支持下

小溪733

好帖，支持一下

szchen2006

顶！顶！顶！

murphy

能不能把最新的移植一下

qq11400

你们好，我移植到我的1.3寸oled（SH1106），屏幕最右侧有两列像素的不受控呢？有人遇到相同问题吗？

qq11400

qq11400 发表于 2022-5-9 09:58
你们好，我移植到我的1.3寸oled（SH1106），屏幕最右侧有两列像素的不受控呢？有人遇到相同问题吗？

我也遇到了相同问题