英语| 中文| Português做巴西| 日本语| עברעבר
轻巧的图形库
网站|文档|论坛|演示|服务
?概述
成熟而众所周知
lvgl是最受欢迎的免费和开源嵌入式图形库，可为任何MCU，MPU和显示类型创建漂亮的UI。它得到了行业领先的供应商和ARM，STM32，NXP，Espressif，Nuvoton，Arduino，Rt-thread，Zephyr，Zephyr，Nuttx，Adafruit等项目的支持。
功能丰富
它具有创建现代和美丽的GUIS的所有功能：30多个内置小部件，功能强大的样式系统，受网络启发的布局管理器以及支持多种语言的版式系统。要将lvgl集成到您的平台中，您所需要的是至少32KB RAM和128 kb闪存，一个C编译器，框架缓冲区以及至少一个1/10的屏幕大小的缓冲区以进行渲染。
服务
我们的团队已准备好帮助您进行图形设计，UI实施和咨询服务。如果您在开发下一个GUI项目期间需要一些支持，请与我们联系。
特征
免费和便携式
- 一个完全便携式C（C ++兼容）库，没有外部依赖性。
- 可以使用任何（RT）OS汇编为任何MCU或MPU。
- 支持单色，epaper，OLED或TFT显示器，甚至显示监视器。显示
- 根据MIT许可证分发，因此您也可以在商业项目中轻松使用它。
- 仅需32kB RAM和128 KB闪存，一个框架缓冲区和至少一个1/10的屏幕大小的缓冲区才能进行渲染。
- 支持OS，外部内存和GPU，但不需要。
小部件，样式，布局等
- 30多个内置小部件：按钮，标签，滑块，图表，键盘，仪表，弧，桌子等。
- 具有〜100样式属性的灵活样式系统，可以自定义任何状态下的小部件的任何部分。
- Flexbox和类似网格的布局发动机可以自动尺寸尺寸并以响应方式定位小部件。
- 文本使用UTF-8编码支持CJK，泰语，印地语，阿拉伯语，波斯语写作系统。
- 单词包装，kerning，文本滚动，子像素渲染，拼音诗中文的输入，表情符号。
- 渲染引擎支持动画，反叠缩，不透明度，光滑滚动，阴影，图像转换等
- 支持鼠标，触摸板，键盘，键盘，外部按钮，编码器输入设备。
- 多个显示支持。
绑定和建立支持
- Micropython结合暴露了lvgl API
- MCU上的Pikascript Binding Python更轻，更容易。
- 不使用自定义构建系统。您可以在构建项目的其他文件时构建lvgl 。
- 开箱即用。
- 在PC上开发，并在嵌入式硬件上使用相同的UI代码。
- 使用我们的Emscripten端口将C UI代码转换为HTML文件。
文档，工具和服务
- 带有100多个简单示例的详细文档
- 诸如用户界面设计，实现和咨询之类的服务，以使UI开发更简单，更快。
赞助商
如果lvgl节省了很多时间和金钱，或者您只是在使用它的乐趣，请考虑支持其开发。
我们如何花费捐款？
我们的目标是为对lvgl贡献最大的人提供经济补偿。这不仅意味着维护者，而且实施出色功能的任何人都应该从累积的钱中付款。我们使用捐款来支付我们的运营成本，例如服务器和相关服务。
如何捐赠？
我们使用GitHub赞助商，您可以轻松发送一次或重复捐款。您还可以以透明的方式查看我们的所有费用。
如何为您的贡献获得报酬？
如果有人实施或修复标有赞助的问题，他或她将获得该工作的付款。我们估计问题的所需时间，复杂性和重要性，并相应地设定价格。要对一个赞助的问题发表评论，说“嗨，我想处理它。这就是我打算解决/实施它的方式……”。当工作被维护者批准和合并时，这项工作被认为是准备就绪的。之后，您可以在opencollatection.com上提交和费用，几天后您将收到付款。
支持lvgl组织
支持lvgl个人
?软件包
lvgl可用于：
- Arduino库
- Platformio软件包
- Zephyr库
- ESP-IDF（ESP32）组件
- NXP McUxPresso组件
- nuttx库
- RT线程RTO
- CMSIS-PACK
- Riot OS软件包
?例子
请参阅一些使用布局和应用样式创建小部件的示例。您将找到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_source_han_sans_sc_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_hans_sans_16_cjk = lv . font_load ( "S:../../assets/font/lv_font_source_han_sans_sc_16_cjk.fnt" )
cz_label = lv . label ( lv . screen_active ())
cz_label . set_style_text_font ( font_hans_sans_16_cjk , 0 )
cz_label . set_text ( "嵌入式系统（Embedded System）， n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" )
cz_label . set_width ( 310 )
cz_label . align ( lv . ALIGN . BOTTOM_LEFT , 5 , - 5 )▶q 开始
此列表将指导您逐步开始使用lvgl 。
熟悉lvgl
- 检查在线演示，以查看lvgl的作用（3分钟）。
- 阅读文档的介绍页面（5分钟）。
- 熟悉快速概述页面（15分钟）上的基础知识。
开始使用lvgl
- 设置一个模拟器（10分钟）。
- 尝试一些例子。
- lvgl端口到董事会。请参阅“移植指南”或查看即可使用的项目。
成为专业人士
- 阅读主模型页面以更好地了解库（2-3小时）
- 检查小部件的文档以查看其功能和用法
得到帮助并帮助他人
- 如果您有疑问，请访问论坛
- 阅读贡献指南，以了解如何帮助改善lvgl （15分钟）
?服务
建立了lvgl LLC，为lvgl库提供可靠的背景，并提供多种类型的服务来帮助您进行UI开发。凭借在用户界面和图形行业的15年以上的经验，我们可以帮助您将UI提升到一个新的水平。
- 图形设计我们的内部图形设计师是创建适合您产品和硬件资源的精美现代设计的专家。
- UI实现我们还可以根据您或我们创建的设计实现您的UI。您可以确定我们将充分利用您的硬件和lvgl 。如果lvgl缺少功能或小部件，请放心，我们将为您实施。
- 咨询和支持我们也可以为您提供咨询服务，以避免在UI开发过程中昂贵和耗时的错误。
- 为提供开发委员会或生产准备套件的公司提供董事会认证，我们进行了董事会认证，该认证显示了董事会如何运行lvgl 。
查看我们的演示作为参考。有关更多信息，请查看服务页面。
与我们联系，并告诉我们如何提供帮助。
?贡献
lvgl是一个开放项目，非常欢迎贡献。通过简单地谈论您的项目，编写示例，改进文档，修复错误甚至在lvgl组织下托管自己的项目，有很多方法可以做出贡献。
有关贡献机会的详细说明，请访问文档的贡献部分。
已经有300多人在lvgl中留下了指纹。成为他们！在这里见！ ?
...还有许多其他。
下载源码
通过命令行克隆项目:
git clone https://github.com/lvgl/lvgl.git