diff --git a/README.md b/README.md index 97afb41b75..49b1e0b029 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@

- English | 中文 | Português do Brasil | 日本語 + English | 中文 | Português do Brasil | 日本語


diff --git a/docs/README_zh.rst b/docs/README_zh.rst new file mode 100644 index 0000000000..5f49079e0a --- /dev/null +++ b/docs/README_zh.rst @@ -0,0 +1,612 @@ +.. raw:: html + +

+ English| 中文| Português do Brasil | 日本語 +

+ +.. raw:: html + +
+ +.. raw:: html + +

+   +

+ +.. raw:: html + +

+ 轻量级通用型图形库 + +.. raw:: html + +

+ +.. raw:: html + +
+ +   +   +
+
+

+ 官网 | + 文档 | + 论坛 | + 示例 | + 服务 | + SquareLine Studio +

+
+ +.. _ledger-概况与总览: + +📒 概况与总览 +------------- + +**成熟且知名**\ + +LVGL 是最流行的免费开源嵌入式图形库，可以为任何 MCU、MPU 和显示类型创建漂亮的 UI。它得到了行业领先供应商和项目的支持，如 Arm、STM32、NXP、Espressif、Nuvoton、Arduino、RT-Thread、Zephyr、NuttX、Adafruit 等。 + +**功能丰富**\ + +它拥有创建现代美观 GUI 的所有功能：30 多个内置控件、强大的样式系统、Web 启发的布局管理器和支持多种语言的排版系统。要将 LVGL 集成到您的平台中，您只需要至少 32 KB +RAM 和 128 KB Flash、C 编译器、帧缓冲区和至少 1/10 屏幕大小的渲染缓冲区。 + +**UI编辑器**\ + +SquareLine Studio 是一款专业但价格合理的 LVGL 拖放 UI 编辑器。它也在 Windows 、Linux 和 MacOS 上运行，无需注册，免费试用。 + +**服务**\ + +我们的团队随时准备为您提供图形设计、UI 实现和咨询服务。如果您在开发下一个 GUI 项目时需要一些支持，请与我们联系。 + +.. _rocket-特性: + +🚀 特性 +------- + +**免费和可移植性** + +- 一个完全可移植的 C（C++ 兼容）库，没有外部依赖关系。 +- 可以编译到任何 MCU 或 MPU，使用任何 RTOS 或者操作系统。 +- 支持单色、ePaper、OLED、TFT 显示器或者模拟器。 + `移植指南 `__ +- 该项目使用 MIT 许可证，因此您可以在商业项目中轻松使用它。 +- 仅需 32 KB RAM 和 128 KB Flash，一个帧缓冲区，以及至少 1/10 屏幕大小的渲染缓冲区。 +- 支持使用可选的操作系统、外部存储器和 GPU。 + +**控件、样式、布局等** + +- 30+ 内置\ `控件 `__: +  按钮、标签、滑块、图表、键盘、仪表、弧形、表格等等。 +- 灵活的\ `样式系统 `__ + 支持约 100 个样式属性，可在任何状态下自定义小控件的任何部分。 +- `Flex 布局 `__ 和 + `Grid 布局 `__ + 可以响应式自动调整小控件的大小和位置。 +- 文本支持 UTF-8 编码，支持 CJK、泰语、印地语、阿拉伯语和波斯语书写系统。 +- 支持自动换行、字距调整、文本滚动、亚像素渲染、拼音输入法、文本表情符号。 +- 渲染引擎支持动画、抗锯齿、不透明度、平滑滚动、阴影、图形变换等。 +- 支持鼠标、触摸板、小键盘、键盘、外部按钮、编码器\ `输入设备 `__\ 。 +- 支持\ `多显示器 `__\ 。 + +**绑定和构建支持** + +- `Microython 绑定 `__ + 公开 LVGL的API +- `PikaScript 绑定 `__ + 在 MCU 上的更轻更简单的 Python 版本 +- 未使用自定义生成系统。您可以在构建项目的其他文件时构建 LVGL。 +- 支持开箱即用的 Make 和 \ `CMake `__\ 编译系统。 +- 支持在 \ `PC 上开发 `__\ ，并可以在嵌入式硬件上使用相同的 UI 代码。 +- 支持使用我们的 \ `Emscripten 移植 `__\ 从而将 C 写的 UI 代码转换为 HTML 文件。 + +**文档、工具和服务** + +- 包含 \ `100 多个简单示例 `__\ 的详细\ `文档 `__ +- `SquareLine Studio `__ - + 一款专业且易于使用的UI编辑器软件，可加快和简化 UI 开发。 +- `服务 `__ + 如用户界面设计、实施和咨询，使 UI 开发更简单、更快。 + +.. _heart-赞助: + +❤️ 赞助 +------- + +如果 LVGL 为您节省了大量时间和金钱，或者您只是在使用它时玩得很开心，请考虑\ `支持它的开发 `__\ 。 + +**我们如何使用捐赠？**\ + +我们的目标是为 LVGL 做得最多的人提供经济补偿。这意味着不仅维护人员，而且任何实现伟大功能的人都应该从累积的资金中获得报酬。我们用捐款来支付服务器和相关服务等运营成本。 + +**如何捐赠？**\ + +我们使用 \ `GitHub Sponsors `__\ ，您可以轻松发送一次性或定期捐款。您还可以以透明的方式查看我们的所有费用。 + +**如何从您的贡献中获取报酬？**\ + +如果有人实施或修复了一个标记为\ `赞助 `__\ 的问题，他或她将获得该工作的报酬。我们估计问题所需的时间、复杂性和重要性，并据此设定价格。直接评论一个赞助的问题，说“嗨，我想处理它。这就是我计划修复/实施它的方式…”。当维护人员批准并合并工作时，就认为它已经准备好了。之后，您可以在 \ `opencollective.com `__\ 上提交并支付费用，几天后您将收到付款。 + +**支持 LVGL 的组织**\ + +|Sponsors of LVGL| + +**支持 LVGL 的个人**\ + +|Backers of LVGL| + +.. _package-支持包: + +📦 支持包 +--------- + +LVGL 可用于以下几种： + +- `Arduino + library `__ +- `PlatformIO + package `__ +- `Zephyr + library `__ +- `ESP-IDF(ESP32) + component `__ +- `NXP MCUXpresso + component `__ +- `NuttX + library `__ +- `RT-Thread + RTOS `__ +- CMSIS-Pack +- `RIOT OS + package `__ + +.. _robot-示例: + +🤖 示例 +------- + +请参阅创建小部件、使用布局和应用样式的一些示例。您将找到 C 和 MicroPython 代码，以及在在线 MicroPython 编辑器中尝试或编辑示例的链接。 + +如果要查看更多示例，可查看 \ `Examples `__ 文件夹。 + +Hello world 标签 +~~~~~~~~~~~~~~~~ + +.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_1.png + :alt: Simple Hello world label example in LVGL + +.. raw:: html + +
+ C code + +.. code:: 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(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN); + lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); + +.. raw:: html + +
+ +.. raw:: html + +
+ MicroPython code | 在线模拟器 + +.. code:: python + + # 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) + +.. raw:: html + +
+
+ +按钮与点击事件 +~~~~~~~~~~~~~~ + +.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_2.gif + :alt: LVGL button with label example + +.. raw:: html + +
+ C code + +.. code:: 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("Clicked\n"); + } + +.. raw:: html + +
+ +.. raw:: html + +
+ MicroPython code | 在线模拟器 + +.. code:: python + + 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() + +.. raw:: html + +
+
+ +带布局的复选框 +~~~~~~~~~~~~~~ + +.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_3.gif + :alt: Checkboxes with layout in LVGL + +.. raw:: html + +
+ C code + +.. code:: 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, "Melon\nand a new line"); + lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL); + +.. raw:: html + +
+ +.. raw:: html + +
+ MicroPython code | 在线模拟器 + +.. code:: python + + 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) + +.. raw:: html + +
+
+ +设置滑块的样式 +~~~~~~~~~~~~~~ + +.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_4.gif + :alt: Styling a slider with LVGL + +.. raw:: html + +
+ C code + +.. code:: 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); + +.. raw:: html + +
+ +.. raw:: html + +
+ MicroPython code | + 在线模拟器 + + +.. code:: python + + # 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) + +.. raw:: html + +
+
+ +英语、希伯来语（ 双向文本排版 ）和中文 +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +.. image:: https://github.com/kisvegabor/test/raw/master/readme_example_5.png + :alt: English, Hebrew and Chinese texts with LVGL + +.. raw:: html + +
+ C code + +.. code:: 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); + +.. raw:: html + +
+ +.. raw:: html + +
+ MicroPython code | 在线模拟器 + +.. code:: python + + 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) + +.. raw:: html + +
+ +.. _arrow_forward-使用 lvgl 过程: + +▶️ 使用 LVGL 过程 +--------------- + +此列表将指导您逐步开始使用 LVGL。 + +**熟悉 LVGL** + +1. 查看\ `在线演示 `__\ ，了解 LVGL 的实际操作（3 分钟） +2. 阅读\ `文档 `__\ 的简介页（5 分钟） +3. 熟悉\ `快速概览 `__ + 页面上的基本知识（15 分钟） + +**开始使用 LVGL** + +4. 设置\ `模拟器 `__ （10 分钟） +5. 尝试一些\ `示例 `__ +6. 将LVGL端口连接到线路板。请参阅\ `移植 `__\ 指南，或查看现成的\ `项目 `__ + +**成为专业人士** + +7. 阅读\ `概述 `__\ 页面以更好地了解图书馆（2-3 小时） +8. 查看\ `控件 `__\ 的文档以查看其功能和用法 + +**获得帮助并帮助他人** + +9. 如果您有问题，请访问\ `论坛 `__ +10. 阅读\ `贡献 `__\ 指南，了解如何帮助提高 LVGL（15 分钟） + +**获取更多** + +11. 下载并试用 \ `SquareLine Studio `__. +12. 联系我们获取\ `服务 `__. + +.. _handshake-服务: + +🤝 服务 +------- + +LVGL LLC 的成立旨在为 LVGL 库提供坚实的背景，并提供多种类型的服务来帮助您进行 UI 开发。凭借在用户界面和图形行业超过15年的经验，我们可以帮助您将 UI 提升到一个新的水平。 + +- **平面设计** + 我们的内部图形设计师是创造美丽现代设计的专家，适合您的产品和硬件资源。 +- ** UI 实现** + 我们还可以根据您或我们创建的设计来实现您的 UI。您可以确信，我们将充分利用您的硬件和 LVGL。如果 LVGL 中缺少某个功能或小部件，请不要担心，我们会为您实现它。 +- **咨询和支持** + 我们也可以通过咨询来支持您，以避免在 UI 开发过程中出现昂贵和耗时的错误。 +- **板子认证** + 对于提供开发板或生产套件的公司，我们会进行板子认证，展示板如何运行 LVGL。 + +查看我们的 \ `Demos `__\ 作为参考。有关更多信息，请查看\ `服务页面 `__\ 。 + +`联系我们 `__\ ，告诉我们如何提供帮助。 + +.. _star2-贡献: + +🌟 贡献 +------- + +LVGL 是一个开放的项目，我们非常欢迎您的贡献。有很多方法可以帮助您，从简单地谈论您的项目，到编写示例、改进文档、修复错误，甚至在 LVGL 组织下托管您自己的项目。 + +有关贡献的详细说明，请访问文件的\ `贡献 `__\ 部分。 + +已经有 300 多人在 LVGL 留下了痕迹。期待你成为他们中的一员！并在下列贡献者中看到你！ 🙂 + +.. raw:: html + + + + + +... 等等其他人. + +.. |Sponsors of LVGL| image:: https://opencollective.com/lvgl/organizations.svg?width=600 + :target: https://opencollective.com/lvgl +.. |Backers of LVGL| image:: https://opencollective.com/lvgl/individuals.svg?width=600 + :target: https://opencollective.com/lvgl diff --git a/docs/README_zh.rst.back b/docs/README_zh.rst.back deleted file mode 100644 index 577e5bb229..0000000000 --- a/docs/README_zh.rst.back +++ /dev/null @@ -1,493 +0,0 @@ -.. raw:: html - -

- -English \| 中文 \| Português do Brasil \| 日本語 - -.. raw:: html - -

- -.. raw:: html - -

- - - -.. raw:: html - -

- - - -.. raw:: html - -

- -Light and Versatile Graphics Library - -.. raw:: html - -

- -.. raw:: html - -

- -轻量级通用型图形库 - -.. raw:: html - -

- - - -.. raw:: html - -

- -官网 \| 文档 \| 论坛 \| 示例 \| 服务 \| SquareLine Studio - -.. raw:: html - -

- -`中文宣传单 <./flyers/LVGL-Chinese-Flyer.pdf>`__ - -目录 -^^^^ - -- `概况与总览 <#概况与总览>`__ - - - `特性 <#特性>`__ - - `硬件要求 <#硬件要求>`__ - - `已经支持的平台 <#已经支持的平台>`__ - -- `如何入门 <#如何入门>`__ -- `例程 <#例程>`__ - - - `C <#c>`__ - - `Micropython <#micropython>`__ - -- `服务 <#服务>`__ -- `如何向社区贡献 <#如何向社区贡献>`__ - -概况与总览 ----------- - -特性 -~~~~ - -- 丰富且强大的模块化\ `图形组件 `__\ ：按钮 - (buttons)、图表 (charts)、列表 (lists)、滑动条 (sliders)、图片 - (images) 等 -- 高级的图形引擎：动画、抗锯齿、透明度、平滑滚动、图层混合等效果 -- 支持多种\ `输入设备 `__\ ：触摸屏、 - 键盘、编码器、按键等 -- 支持\ `多显示设备 `__ -- 不依赖特定的硬件平台，可以在任何显示屏上运行 -- 配置可裁剪（最低资源占用：64 kB Flash，16 kB RAM） -- 基于UTF-8的多语种支持，例如中文、日文、韩文、阿拉伯文等 -- 可以通过\ `类CSS `__\ 的方式来设计、布局图形界面（例如：\ `Flexbox `__\ 、\ `Grid `__\ ） -- 支持操作系统、外置内存、以及硬件加速（LVGL已内建支持STM32 - DMA2D、SWM341 DMA2D、NXP PXP和VGLite） -- 即便仅有\ `单缓冲区(frame - buffer) `__\ 的情况下，也可保证渲染如丝般顺滑 -- 全部由C编写完成，并支持C++调用 -- 支持Micropython编程，参见：\ `LVGL API in - Micropython `__ -- 支持\ `模拟器 `__\ 仿真，可以无硬件依托进行开发 -- 丰富详实的\ `例程 `__ -- 详尽的\ `文档 `__\ 以及API参考手册，可线上查阅或可下载为PDF格式 - -硬件要求 -~~~~~~~~ - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - - - -.. raw:: html - -
- -要求 - -.. raw:: html - - - -最低要求 - -.. raw:: html - - - -建议要求 - -.. raw:: html - -
- -架构 - -.. raw:: html - - - -16、32、64位微控制器或微处理器 - -.. raw:: html - -
- -时钟 - -.. raw:: html - - - -> 16 MHz - -.. raw:: html - - - -> 48 MHz - -.. raw:: html - -
- -Flash/ROM - -.. raw:: html - - - -> 64 kB - -.. raw:: html - - - -> 180 kB - -.. raw:: html - -
- -Static RAM - -.. raw:: html - - - -> 16 kB - -.. raw:: html - - - -> 48 kB - -.. raw:: html - -
- -Draw buffer - -.. raw:: html - - - -> 1 × hor. res. pixels - -.. raw:: html - - - -> 1/10屏幕大小 - -.. raw:: html - -
- -编译器 - -.. raw:: html - - - -C99或更新 - -.. raw:: html - -
- -*注意：资源占用情况与具体硬件平台、编译器等因素有关，上表中仅给出参考值* - -已经支持的平台 -~~~~~~~~~~~~~~ - -LVGL本身并不依赖特定的硬件平台，任何满足LVGL硬件配置要求的微控制器均可运行LVGL。 -如下仅列举其中一部分: - -- NXP: Kinetis, LPC, iMX, iMX RT -- STM32F1, STM32F3, STM32F4, STM32F7, STM32L4, STM32L5, STM32H7 -- Microchip dsPIC33, PIC24, PIC32MX, PIC32MZ -- `Linux frame buffer `__ - (/dev/fb) -- `Raspberry - Pi `__ -- `Espressif ESP32 `__ -- `Infineon Aurix `__ -- Nordic NRF52 Bluetooth modules -- Quectel modems -- `SYNWIT SWM341 `__ - -LVGL也支持： - `Arduino -library `__ -- `PlatformIO -package `__ - -`Zephyr -library `__ -- `ESP32 -component `__ -- `NXP MCUXpresso -component `__ -- `NuttX -library `__ - -`RT-Thread -RTOS `__ - -如何入门 --------- - -请按照如下顺序来学习LVGL： 1. -使用\ `网页在线例程 `__\ 来体验LVGL（3分钟） 2. -阅读文档\ `简介 `__\ 章节来初步了解LVGL（5分钟） -3. -再来阅读一下文档快速\ `快速概览 `__\ 章节来了解LVGL的基本知识（15分钟） -4. -学习如何使用\ `模拟器 `__\ 来在电脑上仿真LVGL（10分钟） -5. -试着动手实践一些\ `例程 `__ -6. -参考\ `移植指南 `__\ 尝试将LVGL移植到一块开发板上，LVGL也已经提供了一些移植好的\ `工程 `__ -7. -仔细阅读文档\ `总览 `__\ 章节来更加深入的了解和熟悉LVGL（2-3小时） -8. -浏览文档\ `组件(Widgets) `__\ 章节来了解如何使用它们 -9. 如果你有问题可以到LVGL\ `论坛 `__\ 提问 10. -阅读文档\ `如何向社区贡献 `__\ 章节来看看你能帮LVGL社区做些什么，以促进LVGL软件质量的不断提高（15分钟） - -例程 ----- - -更多例程请参见 -`examples `__ -文件夹。 - -.. figure:: https://github.com/lvgl/lvgl/raw/master/docs/misc/btn_example.png - :alt: LVGL button with label example - - LVGL button with label example - -C -~ - -.. code:: c - - lv_obj_t * btn = lv_btn_create(lv_scr_act()); /*Add a button to the current screen*/ - lv_obj_set_pos(btn, 10, 10); /*Set its position*/ - lv_obj_set_size(btn, 100, 50); /*Set its size*/ - lv_obj_add_event(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/ - - lv_obj_t * label = lv_label_create(btn); /*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 btn_event_cb(lv_event_t * e) - { - printf("Clicked\n"); - } - -Micropython -~~~~~~~~~~~ - -更多信息请到 -`Micropython官网 `__ -查询. - -.. code:: python - - def btn_event_cb(e): - print("Clicked") - - # Create a Button and a Label - btn = lv.btn(lv.scr_act()) - btn.set_pos(10, 10) - btn.set_size(100, 50) - btn.add_event(btn_event_cb, lv.EVENT.CLICKED, None) - - label = lv.label(btn) - label.set_text("Button") - label.center() - -服务 ----- - -LVGL -责任有限公司成立的目的是为了给用户使用LVGL图形库提供额外的技术支持，我们致力于提供以下服务： - -- 图形设计 -- UI设计 -- 技术咨询以及技术支持 - -更多信息请参见 https://lvgl.io/services ，如果有任何问题请随时联系我们。 - -如何向社区贡献 --------------- - -LVGL是一个开源项目，非常欢迎您参与到社区贡献当中。您有很多种方式来为提高LVGL贡献您的一份力量，包括但不限于： - -- 介绍你基于LVGL设计的作品或项目 -- 写一些例程 -- 修改以及完善文档 -- 修复bug - -请参见文档\ `如何向社区贡献 `__\ 章节来获取更多信息。