lvgl

英語| 中文 |巴西葡萄牙語 | 日本語

輕巧且多功能的圖形庫

網站 |文檔 |論壇 |演示 |服務

？概述

成熟且知名
LVGL 是最受歡迎的免費開源嵌入式圖形庫，可為任何 MCU、MPU 和顯示器類型建立漂亮的 UI。它得到了 Arm、STM32、NXP、Espressif、Nuvoton、Arduino、RT-Thread、Zephyr、NuttX、Adafruit 等行業領先供應商和專案的支持。

功能豐富
它具有創建現代且美觀的 GUI 的所有功能：30 多個內建小部件、強大的樣式系統、受 Web 啟發的佈局管理器以及支援多種語言的版式系統。要將 LVGL 整合到您的平台中，您需要的只是至少 32kB RAM 和 128 kB 快閃記憶體、C 編譯器、幀緩衝區以及至少 1/10 螢幕大小的渲染緩衝區。

服務
我們的團隊隨時準備為您提供圖形設計、UI 實施和諮詢服務。如果您在開發下一個 GUI 專案期間需要一些支持，請與我們聯絡。

特徵

免費且便攜

• 完全可移植的 C（C++ 相容）函式庫，沒有外部相依性。
• 可以編譯為任何 MCU 或 MPU，使用任何 (RT) 作業系統。
• 支援單色、電子紙、OLED 或 TFT 顯示器，甚至顯示器。顯示器
• 在 MIT 許可證下分發，因此您也可以輕鬆地在商業專案中使用它。
• 僅需要 32kB RAM 和 128 kB 快閃記憶體、幀緩衝區以及至少 1/10 螢幕大小的渲染緩衝區。
• 支援作業系統、外部記憶體和 GPU，但不是必需的。

小部件、樣式、版面等

• 30 多個內建小工具：按鈕、標籤、滑桿、圖表、鍵盤、儀表、弧形、表格等等。
• 靈活的樣式系統，具有約 100 個樣式屬性，可在任何狀態下自訂小工具的任何部分。
• Flexbox 和類似網格的佈局引擎能夠以回應方式自動調整小工具的大小和位置。
• 文本採用 UTF-8 編碼呈現，支援 CJK、泰語、印地語、阿拉伯語、波斯語書寫系統。
• 自動換行、字距調整、文字捲動、次像素渲染、拼音輸入法、文字中的表情符號。
• 渲染引擎支援動畫、抗鋸齒、不透明度、平滑捲動、陰影、影像變換等
• 支援滑鼠、觸控板、小鍵盤、鍵盤、外部按鈕、編碼器輸入裝置。
• 多顯示支援。

綁定和構建支持

• MicroPython Binding 公開 LVGL API
• PikaScript 在 MCU 上綁定 python 更輕、更容易。
• 不使用自訂建置系統。您可以像建置專案的其他檔案一樣建置 LVGL。
• 對 Make 和 CMake 的支援是開箱即用的。
• 在 PC 上開發並在嵌入式硬體上使用相同的 UI 程式碼。
• 使用我們的 Emscripten 連接埠將 C UI 程式碼轉換為 HTML 檔案。

文件、工具和服務

• 包含 100 多個簡單範例的詳細文檔
• 使用者介面設計、實施和諮詢等服務使 UI 開發更簡單、更快捷。

❤️贊助商

如果 LVGL 為您節省了大量時間和金錢，或者您只是享受使用它的樂趣，請考慮支持其開發。

我們如何使用捐款？
我們的目標是為為 LVGL 做出最大貢獻的人提供經濟補償。這意味著不僅是維護者，任何實現出色功能的人都應該從累積的資金中獲得報酬。我們使用捐款來支付伺服器和相關服務等營運成本。

如何捐款？
我們使用 GitHub 贊助商，您可以輕鬆地發送一次性或定期捐款。您還可以以透明的方式看到我們所有的費用。

您的貢獻如何獲得報酬？
如果有人實施或修復了標記為「贊助」的問題，他或她將獲得該工作的報酬。我們估算所需的時間、問題的複雜性和重要性，並相應地設定價格。要加入，只需對贊助問題發表評論，說“嗨，我想處理它。這就是我計劃修復/實施它的方式...”。當一個工作被維護者批准並合併時，它就被認為準備好了。之後，您可以在 opencollective.com 上提交費用，您將在幾天內收到付款。

支持 LVGL 的組織

支持 LVGL 的個人

？套餐

LVGL 可用作：

• Arduino庫
• 平台IO包
• 和風圖書館
• ESP-IDF(ESP32)元件
• NXP MCUXpresso 元件
• NuttX 庫
• RT-Thread RTOS
• CMSIS 套件
• RIOT作業系統包

？範例

查看創建小部件、使用佈局和應用樣式的一些範例。您將找到 C 和 MicroPython 程式碼，以及用於在線上 MicroPython 編輯器中試用或編輯範例的連結。

有關更多範例，請查看範例資料夾。

你好世界標籤

C程式碼

 /*Change the active screen's background color*/
lv_obj_set_style_bg_color ( lv_screen_active (), lv_color_hex ( 0x003a57 ), LV_PART_MAIN );

/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( label , "Hello world" );
lv_obj_set_style_text_color ( label , lv_color_hex ( 0xffffff ), LV_PART_MAIN );
lv_obj_align ( label , LV_ALIGN_CENTER , 0 , 0 );

MicroPython 程式碼 |線上模擬器

 # Change the active screen's background color
scr = lv . screen_active ()
scr . set_style_bg_color ( lv . color_hex ( 0x003a57 ), lv . PART . MAIN )

# Create a white label, set its text and align it to the center
label = lv . label ( lv . screen_active ())
label . set_text ( "Hello world" )
label . set_style_text_color ( lv . color_hex ( 0xffffff ), lv . PART . MAIN )
label . align ( lv . ALIGN . CENTER , 0 , 0 )

帶有點擊事件的按鈕

C程式碼

 lv_obj_t * button = lv_button_create ( lv_screen_active ());                   /*Add a button to the current screen*/
lv_obj_center ( button );                                             /*Set its position*/
lv_obj_set_size ( button , 100 , 50 );                                  /*Set its size*/
lv_obj_add_event_cb ( button , button_event_cb , LV_EVENT_CLICKED , NULL ); /*Assign a callback to the button*/

lv_obj_t * label = lv_label_create ( button );                        /*Add a label to the button*/
lv_label_set_text ( label , "Button" );                             /*Set the labels text*/
lv_obj_center ( label );                                           /*Align the label to the center*/
...

void button_event_cb ( lv_event_t * e )
{
  printf ( "Clickedn" );
}

MicroPython 程式碼 |線上模擬器

 def button_event_cb ( e ):
  print ( "Clicked" )

# Create a Button and a Label
button = lv . button ( lv . screen_active ())
button . center ()
button . set_size ( 100 , 50 )
button . add_event_cb ( button_event_cb , lv . EVENT . CLICKED , None )

label = lv . label ( button )
label . set_text ( "Button" )
label . center ()

帶有佈局的複選框

C程式碼

 lv_obj_set_flex_flow ( lv_screen_active (), LV_FLEX_FLOW_COLUMN );
lv_obj_set_flex_align ( lv_screen_active (), LV_FLEX_ALIGN_CENTER , LV_FLEX_ALIGN_START , LV_FLEX_ALIGN_CENTER );

lv_obj_t * cb ;
cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Apple" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Banana" );
lv_obj_add_state ( cb , LV_STATE_CHECKED );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Lemon" );
lv_obj_add_state ( cb , LV_STATE_DISABLED );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_obj_add_state ( cb , LV_STATE_CHECKED | LV_STATE_DISABLED );
lv_checkbox_set_text ( cb , "Melonnand a new line" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

MicroPython 程式碼 |線上模擬器

 def event_handler ( e ):
    code = e . get_code ()
    obj = e . get_target_obj ()
    if code == lv . EVENT . VALUE_CHANGED :
        txt = obj . get_text ()
        if obj . get_state () & lv . STATE . CHECKED :
            state = "Checked"
        else :
            state = "Unchecked"
        print ( txt + ":" + state )


lv . screen_active (). set_flex_flow ( lv . FLEX_FLOW . COLUMN )
lv . screen_active (). set_flex_align ( lv . FLEX_ALIGN . CENTER , lv . FLEX_ALIGN . START , lv . FLEX_ALIGN . CENTER )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Apple" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Banana" )
cb . add_state ( lv . STATE . CHECKED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Lemon" )
cb . add_state ( lv . STATE . DISABLED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . add_state ( lv . STATE . CHECKED | lv . STATE . DISABLED )
cb . set_text ( "Melon" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

設定滑桿樣式

C程式碼

 lv_obj_t * slider = lv_slider_create ( lv_screen_active ());
lv_slider_set_value ( slider , 70 , LV_ANIM_OFF );
lv_obj_set_size ( slider , 300 , 20 );
lv_obj_center ( slider );

/*Add local styles to MAIN part (background rectangle)*/
lv_obj_set_style_bg_color ( slider , lv_color_hex ( 0x0F1215 ), LV_PART_MAIN );
lv_obj_set_style_bg_opa ( slider , 255 , LV_PART_MAIN );
lv_obj_set_style_border_color ( slider , lv_color_hex ( 0x333943 ), LV_PART_MAIN );
lv_obj_set_style_border_width ( slider , 5 , LV_PART_MAIN );
lv_obj_set_style_pad_all ( slider , 5 , LV_PART_MAIN );

/*Create a reusable style sheet for the INDICATOR part*/
static lv_style_t style_indicator ;
lv_style_init ( & style_indicator );
lv_style_set_bg_color ( & style_indicator , lv_color_hex ( 0x37B9F5 ));
lv_style_set_bg_grad_color ( & style_indicator , lv_color_hex ( 0x1464F0 ));
lv_style_set_bg_grad_dir ( & style_indicator , LV_GRAD_DIR_HOR );
lv_style_set_shadow_color ( & style_indicator , lv_color_hex ( 0x37B9F5 ));
lv_style_set_shadow_width ( & style_indicator , 15 );
lv_style_set_shadow_spread ( & style_indicator , 5 );
4
/*Add the style sheet to the slider's INDICATOR part*/
lv_obj_add_style ( slider , & style_indicator , LV_PART_INDICATOR );

/*Add the same style to the KNOB part too and locally overwrite some properties*/
lv_obj_add_style ( slider , & style_indicator , LV_PART_KNOB );

lv_obj_set_style_outline_color ( slider , lv_color_hex ( 0x0096FF ), LV_PART_KNOB );
lv_obj_set_style_outline_width ( slider , 3 , LV_PART_KNOB );
lv_obj_set_style_outline_pad ( slider , -5 , LV_PART_KNOB );
lv_obj_set_style_shadow_spread ( slider , 2 , LV_PART_KNOB );

MicroPython 程式碼 |線上模擬器

 # Create a slider and add the style
slider = lv . slider ( lv . screen_active ())
slider . set_value ( 70 , lv . ANIM . OFF )
slider . set_size ( 300 , 20 )
slider . center ()

# Add local styles to MAIN part (background rectangle)
slider . set_style_bg_color ( lv . color_hex ( 0x0F1215 ), lv . PART . MAIN )
slider . set_style_bg_opa ( 255 , lv . PART . MAIN )
slider . set_style_border_color ( lv . color_hex ( 0x333943 ), lv . PART . MAIN )
slider . set_style_border_width ( 5 , lv . PART . MAIN )
slider . set_style_pad_all ( 5 , lv . PART . MAIN )

# Create a reusable style sheet for the INDICATOR part
style_indicator = lv . style_t ()
style_indicator . init ()
style_indicator . set_bg_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_bg_grad_color ( lv . color_hex ( 0x1464F0 ))
style_indicator . set_bg_grad_dir ( lv . GRAD_DIR . HOR )
style_indicator . set_shadow_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_shadow_width ( 15 )
style_indicator . set_shadow_spread ( 5 )

# Add the style sheet to the slider's INDICATOR part
slider . add_style ( style_indicator , lv . PART . INDICATOR )
slider . add_style ( style_indicator , lv . PART . KNOB )

# Add the same style to the KNOB part too and locally overwrite some properties
slider . set_style_outline_color ( lv . color_hex ( 0x0096FF ), lv . PART . KNOB )
slider . set_style_outline_width ( 3 , lv . PART . KNOB )
slider . set_style_outline_pad ( - 5 , lv . PART . KNOB )
slider . set_style_shadow_spread ( 2 , lv . PART . KNOB )

英文、希伯來文（混合 LTR-RTL）和中文文本

C程式碼

 lv_obj_t * ltr_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( ltr_label , "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." );
lv_obj_set_style_text_font ( ltr_label , & lv_font_montserrat_16 , 0 );
lv_obj_set_width ( ltr_label , 310 );
lv_obj_align ( ltr_label , LV_ALIGN_TOP_LEFT , 5 , 5 );

lv_obj_t * rtl_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( rtl_label , "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)." );
lv_obj_set_style_base_dir ( rtl_label , LV_BASE_DIR_RTL , 0 );
lv_obj_set_style_text_font ( rtl_label , & lv_font_dejavu_16_persian_hebrew , 0 );
lv_obj_set_width ( rtl_label , 310 );
lv_obj_align ( rtl_label , LV_ALIGN_LEFT_MID , 5 , 0 );

lv_obj_t * cz_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( cz_label ,
                  "嵌入式系统（Embedded System），n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" );
lv_obj_set_style_text_font ( cz_label , & lv_font_simsun_16_cjk , 0 );
lv_obj_set_width ( cz_label , 310 );
lv_obj_align ( cz_label , LV_ALIGN_BOTTOM_LEFT , 5 , -5 );

MicroPython 程式碼 |線上模擬器

 ltr_label = lv . label ( lv . screen_active ())
ltr_label . set_text ( "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." )
ltr_label . set_style_text_font ( lv . font_montserrat_16 , 0 );

ltr_label . set_width ( 310 )
ltr_label . align ( lv . ALIGN . TOP_LEFT , 5 , 5 )

rtl_label = lv . label ( lv . screen_active ())
rtl_label . set_text ( "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)." )
rtl_label . set_style_base_dir ( lv . BASE_DIR . RTL , 0 )
rtl_label . set_style_text_font ( lv . font_dejavu_16_persian_hebrew , 0 )
rtl_label . set_width ( 310 )
rtl_label . align ( lv . ALIGN . LEFT_MID , 5 , 0 )

font_simsun_16_cjk = lv . font_load ( "S:../../assets/font/lv_font_simsun_16_cjk.fnt" )

cz_label = lv . label ( lv . screen_active ())
cz_label . set_style_text_font ( font_simsun_16_cjk , 0 )
cz_label . set_text ( "嵌入式系统（Embedded System）， n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" )
cz_label . set_width ( 310 )
cz_label . align ( lv . ALIGN . BOTTOM_LEFT , 5 , - 5 )

▶️開始使用

此清單將引導您逐步開始使用 LVGL。

熟悉 LVGL

1. 查看線上演示，了解 LVGL 的實際應用（3 分鐘）。
2. 閱讀文件的簡介頁面（5 分鐘）。
3. 熟悉快速概述頁面上的基礎知識（15 分鐘）。

開始使用LVGL

4. 設定模擬器（10 分鐘）。
5. 嘗試一些範例。
6. 將 LVGL 移植到板上。請參閱移植指南或查看即用型項目。

成為專業人士

7. 閱讀主要組件頁面以更好地了解該庫（2-3 小時）
8. 檢查小部件的文檔以了解其功能和用法

獲得幫助並幫助他人

9. 如果有疑問請前往論壇
10. 閱讀貢獻指南，了解如何幫助提高 LVGL（15 分鐘）

？服務

LVGL LLC 的成立是為了為 LVGL 庫提供堅實的背景，並提供多種類型的服務來幫助您進行 UI 開發。憑藉在使用者介面和圖形行業超過 15 年的經驗，我們可以幫助您將您的 UI 提升到一個新的水平。

• 圖形設計我們的內部圖形設計師是創造適合您的產品和硬體資源的精美現代設計的專家。
• UI 實作我們還可以根據您或我們創建的設計來實現您的 UI。您可以確信我們將充分利用您的硬體和 LVGL。如果 LVGL 中缺少某個功能或小部件，請不要擔心，我們將為您實現它。
• 諮詢和支持我們還可以為您提供諮詢支持，以避免在 UI 開發過程中出現代價高昂且耗時的錯誤。
• 電路板認證對於提供開發板或生產就緒套件的公司，我們會進行電路板認證，展示電路板如何運作 LVGL。

查看我們的演示作為參考。欲了解更多信息，請查看服務頁面。

聯絡我們並告訴我們如何提供協助。

？貢獻

LVGL 是一個開放項目，非常歡迎貢獻。有很多方法可以做出貢獻，從簡單地談論您的專案、編寫範例、改進文件、修復錯誤，甚至在 LVGL 組織下託管您自己的專案。

有關貢獻機會的詳細說明，請造訪文件的貢獻部分。

已有300多人在LVGL留下了指紋。成為他們中的一員！在這裡見！ ？

……以及許多其他。