移植littleVGL庫到OpenHarmony過程分享（一）

作者：一口氣吃不成胖子 2022-06-21 11:30:22

系統 OpenHarmony

本篇帶給大家移植輕量級通用型圖形庫到OpenHarmony的相關內容，希望能夠幫助到你！

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

一、項目簡介

1、littleVGL 主要特性如下

具有非常豐富的內置控件,像 buttons, charts, lists, sliders, images 等。
高級圖形效果：動畫，反鋸齒，透明度，平滑滾動。
支持多種輸入設備,像 touchpad, mouse, keyboard, encoder 等。
支持多語言的 UTF-8 編碼 ? 支持多個和多種顯示設備，例如同步顯示在多個彩色屏或單色屏上。
完全自定制的圖形元素。
硬件獨立于任何微控制器或顯示器。
可以縮小到最小內存 (64 kB Flash, 16 kB RAM)。
支持操作系統、外部儲存和 GPU（非必須）。
僅僅單個幀緩沖設備就可以呈現高級視覺特效。
使用 C 編寫以獲得最大兼容性(兼容 C++)。
支持 PC 模擬器。
為加速 GUI 設計,提供教程,案例和主題,支持響應式布局。
提供了在線和離線文檔。
基于自由和開源的 MIT 協議。

2、littleVGL 的要求如下:

16、32 或 64 位的單片機（微控制器）或處理器。
微處理器的主頻最好高于 16MHZ。
Flash/ROM:如果只用 littleVGL 核心組件的話,則至少需要 64kB 的容量,如果想完整使用的話,最好保證 180kB 以上的容量。
RAM:
靜態 RAM: 大約 8 到 16 kB,這取決于你所用的組件功能和 objects 控件對象類型。
棧: 至少為 2Kb,一般推薦值為 4kBo 動態數據(堆): 至少 4kB,如果你用到了多個或多種控件的話,那么最好設置為 16kB 以上,這個是可以通過 lv_conf.h 配置文件中的 LV_MEM_SIZE 宏來定義的。
顯示緩沖區: 至少要比”水平分辨率像素”要大,一般推介值為 10 倍的”水平分辨率像素”,取個例子,假如我們屏幕的水平分辨率為480個像素,采用16位的顏色深度進行顯示,即一個像素占 2 個字節,那么推介的顯示緩沖區大小為 104802=9600 個字節。
C99 或更新的編譯器,如果是用 keil 開發的話,一定得勾選”c99”模式,否則編譯會報錯的。
基本的 c(或者 c++)語言知識,如:指針,結構體,回調函數。

3、開源項目鏈接

littleVGL 的官方網址為:??https://littlevgl.com??
littleVGL 的 github 網址為:??https://github.com/littlevgl/lvgl??
littleVGL 的在線文檔網址為:??https://docs.littlevgl.com/zh-CN/html/index.html??

二、 littleVGL 移植

1、開發前準備

本次分享硬件采用的是HI3861開發板和SPI驅動的TFT顯示屏。
搭建環境請參考上一篇文章。
軟件包已上傳附件，感興趣可下載體驗移植的樂趣。

2、項目創建

（1）在applications/sample/wifi-iot/app目錄下創建一個GUI文件夾

#夏日挑戰賽#移植littleVGL庫到OpenHarmony過程分享（一）-開源基礎軟件社區

GUI 目錄是用來存放跟 littleVGL 庫相關的所有文件的。

（2）解壓lv_pc_simulator.zip包

接著把 lv_pc_simulator.zip 壓縮包里面的 lv_examples.zip 和 lvgl.zip 倆個子壓縮包直接拷貝到GUI 目錄下,拷貝完成之后,接著分別對lv_examples.zip 和 lvgl.zip 倆個子壓縮包在當前目錄下進行解壓縮操作,解壓縮完成后,可以把 lv_examples.zip 和 lvgl.zip 都刪除了。

（3）拷貝配置模板文件

接著把 GUI/lvgl/lv_conf_template.h 和 GUI/lv_examples/lv_ex_conf_templ.h 倆個配置模板文件統統拷貝到 GUI 目錄下,然后對這個 2 文件分別重命名為 lv_conf.h和 lv_ex_conf.h。

（4）新建lvgl_driver子目錄

接著還要在 GUI 目錄下新建一個 lvgl_driver子目錄,這個目錄是用來放底層顯示驅動和觸摸驅動文件的,最后 GUI 的目錄結構如下圖所示：

#夏日挑戰賽#移植littleVGL庫到OpenHarmony過程分享（一）-開源基礎軟件社區

注:在實際項目中,可以刪除掉 lv_examples 目錄來減少項目所占的磁盤空間,因為此目錄就是專門用來存放官方的演示 demo,對我們的實際項目沒有任何作用。

3、編寫BUILD.gn文件

在GUI目錄下添加BUILD.gn文件

group("GUI") {
    deps = [
        "lvgl:lvgl",
        "lvgl_driver:lvgl_port",
    ]
}

在GUI/lvgl_driver目錄下添加BUILD.gn文件：

static_library("lvgl_port") {
    sources = [
        "lv_port_disp.c",
    ]  
    include_dirs = [
        "http://base/iot_hardware/peripheral/interfaces/kits",
        "../../",
        "../lvgl_driver",    
    ]
}

在GUI/lv_examples目錄下添加BUILD.gn文件：

static_library("lv_examples") {
    sources = [
        # "src/lv_demo_benchmark/lv_demo_benchmark.c",
        # "src/lv_demo_keypad_encoder/lv_demo_keypad_encoder.c",
        # "src/lv_demo_music/lv_demo_music.c",
        # "src/lv_demo_printer/lv_demo_printer.c",
        # "src/lv_demo_stress/lv_demo_stress.c",
        "src/lv_demo_widgets/lv_demo_widgets.c",
        # "src/lv_ex_get_started/lv_ex_get_started.c",
        # "src/lv_demo_widgets/lv_demo_widgets.c",
    ]   
    cflags = [ "-Wno-unused-variable" ]
    cflags += [ "-Wno-unused-but-set-variable" ]
    cflags += [ "-Wno-unused-parameter" ]

    include_dirs = [
        "src/lv_demo_widgets",
    ]
}

在GUI/lvgl/BUILD.gn目錄下添加BUILD.gn文件：

static_library("lvgl") {
    sources = [
        "src/lv_core/lv_disp.c",
        "src/lv_core/lv_group.c",
        "src/lv_core/lv_indev.c",
        "src/lv_core/lv_obj.c",
        "src/lv_core/lv_refr.c",
        "src/lv_core/lv_style.c",
        "src/lv_draw/lv_draw_basic.c",
        "src/lv_draw/lv_draw.c",
        "src/lv_draw/lv_draw_rect.c",
        "src/lv_draw/lv_draw_label.c",
        "src/lv_draw/lv_draw_line.c",
        "src/lv_draw/lv_draw_img.c",
        "src/lv_draw/lv_draw_arc.c",
        "src/lv_draw/lv_draw_triangle.c",
        "src/lv_draw/lv_img_decoder.c",
        "src/lv_draw/lv_img_cache.c",
        "src/lv_font/lv_font.c",
        "src/lv_font/lv_font_fmt_txt.c",
        "src/lv_font/lv_font_roboto_12.c",
        "src/lv_font/lv_font_roboto_16.c",
        "src/lv_font/lv_font_roboto_22.c",
        "src/lv_font/lv_font_roboto_28.c",
        "src/lv_font/lv_font_unscii_8.c",
        "src/lv_hal/lv_hal_disp.c",
        "src/lv_hal/lv_hal_indev.c",
        "src/lv_hal/lv_hal_tick.c",
        "src/lv_misc/lv_circ.c",
        "src/lv_misc/lv_area.c",
        "src/lv_misc/lv_task.c",
        "src/lv_misc/lv_fs.c",
        "src/lv_misc/lv_anim.c",
        "src/lv_misc/lv_mem.c",
        "src/lv_misc/lv_ll.c",
        "src/lv_misc/lv_color.c",
        "src/lv_misc/lv_txt.c",
        "src/lv_misc/lv_math.c",
        "src/lv_misc/lv_log.c",
        "src/lv_misc/lv_gc.c",
        "src/lv_misc/lv_utils.c",
        "src/lv_misc/lv_async.c",
        "src/lv_themes/lv_theme_alien.c",
        "src/lv_themes/lv_theme.c",
        "src/lv_themes/lv_theme_default.c",
        "src/lv_themes/lv_theme_night.c",
        "src/lv_themes/lv_theme_templ.c",
        "src/lv_themes/lv_theme_zen.c",
        "src/lv_themes/lv_theme_material.c",
        "src/lv_themes/lv_theme_nemo.c",
        "src/lv_themes/lv_theme_mono.c",
        "src/lv_objx/lv_arc.c",
        "src/lv_objx/lv_bar.c",
        "src/lv_objx/lv_cb.c",
        "src/lv_objx/lv_ddlist.c",
        "src/lv_objx/lv_kb.c",
        "src/lv_objx/lv_line.c",
        "src/lv_objx/lv_mbox.c",
        "src/lv_objx/lv_preload.c",
        "src/lv_objx/lv_roller.c",
        "src/lv_objx/lv_table.c",
        "src/lv_objx/lv_tabview.c",
        "src/lv_objx/lv_tileview.c",
        "src/lv_objx/lv_btn.c",
        "src/lv_objx/lv_calendar.c",
        "src/lv_objx/lv_chart.c",
        "src/lv_objx/lv_canvas.c",
        "src/lv_objx/lv_gauge.c",
        "src/lv_objx/lv_label.c",
        "src/lv_objx/lv_list.c",
        "src/lv_objx/lv_slider.c",
        "src/lv_objx/lv_ta.c",
        "src/lv_objx/lv_spinbox.c",
        "src/lv_objx/lv_btnm.c",
        "src/lv_objx/lv_cont.c",
        "src/lv_objx/lv_img.c",
        "src/lv_objx/lv_imgbtn.c",
        "src/lv_objx/lv_led.c",
        "src/lv_objx/lv_lmeter.c",
        "src/lv_objx/lv_page.c",
        "src/lv_objx/lv_sw.c",
        "src/lv_objx/lv_win.c",
    ]  
    cflags = [ "-Wno-unused-variable" ]
    cflags += [ "-Wno-unused-but-set-variable" ]
    cflags += [ "-Wno-unused-parameter" ]
    include_dirs = [
        "lvgl",
    ]
}

先分享到這里，接下來將會帶大家一起深入了解它的一些細節要修改的地方！

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??。

責任編輯：jianghua 來源：鴻蒙社區

littleVGL 鴻蒙