mirror of
https://github.com/lvgl/lvgl.git
synced 2026-08-17 01:31:53 +08:00
docs(readme): update the README (#10378)
Arduino Lint / lint (push) Canceled after 0s
Build Examples with C++ Compiler / build-examples (push) Canceled after 0s
MicroPython CI / Build esp32 port (push) Canceled after 0s
MicroPython CI / Build rp2 port (push) Canceled after 0s
MicroPython CI / Build stm32 port (push) Canceled after 0s
MicroPython CI / Build unix port (push) Canceled after 0s
C/C++ CI / Build OPTIONS_16BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_24BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_FULL_32BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_NORMAL_8BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_SDL - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_16BIT - cl - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_16BIT - gcc - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_24BIT - cl - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_24BIT - gcc - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_FULL_32BIT - cl - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_FULL_32BIT - gcc - Windows (push) Canceled after 0s
C/C++ CI / Build ESP IDF ESP32S3 (push) Canceled after 0s
C/C++ CI / Run tests with 32bit build (push) Canceled after 0s
C/C++ CI / Run tests with 64bit build (push) Canceled after 0s
BOM Check / bom-check (push) Canceled after 0s
Verify GDB constants are up-to-date / verify-gdb-consts (push) Canceled after 0s
Verify the widget property name / verify-property-name (push) Canceled after 0s
Verify code formatting / verify-formatting (push) Canceled after 0s
Compare file templates with file names / template-check (push) Canceled after 0s
Code Generation / Code Generation (push) Canceled after 0s
Build Docs / build-and-deploy (push) Canceled after 0s
Build .deb packages / build (push) Canceled after 0s
Validate pkg-config and CMake config / cmake (linux) (push) Canceled after 0s
Validate pkg-config and CMake config / pkgconfig (linux) (push) Canceled after 0s
Validate pkg-config and CMake config / cmake (linux-3d) (push) Canceled after 0s
Validate pkg-config and CMake config / pkgconfig (linux-3d) (push) Canceled after 0s
Test API JSON generator / Test API JSON (push) Canceled after 0s
Install LVGL using CMake / build-examples (private) (push) Canceled after 0s
Install LVGL using CMake / build-examples (public) (push) Canceled after 0s
Check Makefile / Build using Makefile (push) Canceled after 0s
Check Makefile for UEFI / Build using Makefile for UEFI (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Script Check (scripts/perf/tests/benchmark_results_comment/test.sh) (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Script Check (scripts/perf/tests/filter_docker_logs/test.sh) (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Script Check (scripts/perf/tests/serialize_results/test.sh) (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark 32b - lv_conf_perf32b (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark 64b - lv_conf_perf64b (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Save PR Number (push) Canceled after 0s
Performance Tests CI / Perf Tests OPTIONS_TEST_PERF_32B - Ubuntu (push) Canceled after 0s
Performance Tests CI / Perf Tests OPTIONS_TEST_PERF_64B - Ubuntu (push) Canceled after 0s
Port repo release update / run-release-branch-updater (push) Canceled after 0s
Static Checks / Static Checks (push) Canceled after 0s
Verify Font License / verify-font-license (push) Canceled after 0s
Verify Kconfig / verify-kconfig (push) Canceled after 0s
Hardware Performance Test / Hardware Performance Benchmark (push) Canceled after 0s
Hardware Performance Test / HW Benchmark - Save PR Number (push) Canceled after 0s
Arduino Lint / lint (push) Canceled after 0s
Build Examples with C++ Compiler / build-examples (push) Canceled after 0s
MicroPython CI / Build esp32 port (push) Canceled after 0s
MicroPython CI / Build rp2 port (push) Canceled after 0s
MicroPython CI / Build stm32 port (push) Canceled after 0s
MicroPython CI / Build unix port (push) Canceled after 0s
C/C++ CI / Build OPTIONS_16BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_24BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_FULL_32BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_NORMAL_8BIT - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_SDL - Ubuntu (push) Canceled after 0s
C/C++ CI / Build OPTIONS_16BIT - cl - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_16BIT - gcc - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_24BIT - cl - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_24BIT - gcc - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_FULL_32BIT - cl - Windows (push) Canceled after 0s
C/C++ CI / Build OPTIONS_FULL_32BIT - gcc - Windows (push) Canceled after 0s
C/C++ CI / Build ESP IDF ESP32S3 (push) Canceled after 0s
C/C++ CI / Run tests with 32bit build (push) Canceled after 0s
C/C++ CI / Run tests with 64bit build (push) Canceled after 0s
BOM Check / bom-check (push) Canceled after 0s
Verify GDB constants are up-to-date / verify-gdb-consts (push) Canceled after 0s
Verify the widget property name / verify-property-name (push) Canceled after 0s
Verify code formatting / verify-formatting (push) Canceled after 0s
Compare file templates with file names / template-check (push) Canceled after 0s
Code Generation / Code Generation (push) Canceled after 0s
Build Docs / build-and-deploy (push) Canceled after 0s
Build .deb packages / build (push) Canceled after 0s
Validate pkg-config and CMake config / cmake (linux) (push) Canceled after 0s
Validate pkg-config and CMake config / pkgconfig (linux) (push) Canceled after 0s
Validate pkg-config and CMake config / cmake (linux-3d) (push) Canceled after 0s
Validate pkg-config and CMake config / pkgconfig (linux-3d) (push) Canceled after 0s
Test API JSON generator / Test API JSON (push) Canceled after 0s
Install LVGL using CMake / build-examples (private) (push) Canceled after 0s
Install LVGL using CMake / build-examples (public) (push) Canceled after 0s
Check Makefile / Build using Makefile (push) Canceled after 0s
Check Makefile for UEFI / Build using Makefile for UEFI (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Script Check (scripts/perf/tests/benchmark_results_comment/test.sh) (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Script Check (scripts/perf/tests/filter_docker_logs/test.sh) (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Script Check (scripts/perf/tests/serialize_results/test.sh) (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark 32b - lv_conf_perf32b (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark 64b - lv_conf_perf64b (push) Canceled after 0s
Emulated Performance Test / ARM Emulated Benchmark - Save PR Number (push) Canceled after 0s
Performance Tests CI / Perf Tests OPTIONS_TEST_PERF_32B - Ubuntu (push) Canceled after 0s
Performance Tests CI / Perf Tests OPTIONS_TEST_PERF_64B - Ubuntu (push) Canceled after 0s
Port repo release update / run-release-branch-updater (push) Canceled after 0s
Static Checks / Static Checks (push) Canceled after 0s
Verify Font License / verify-font-license (push) Canceled after 0s
Verify Kconfig / verify-kconfig (push) Canceled after 0s
Hardware Performance Test / Hardware Performance Benchmark (push) Canceled after 0s
Hardware Performance Test / HW Benchmark - Save PR Number (push) Canceled after 0s
This commit is contained in:
@@ -1,131 +1,198 @@
|
||||
<p align="right">
|
||||
<b>English</b> | <a href="./docs/README_zh.md">中文</a> | <a href="./docs/README_pt_BR.md">Português do Brasil</a> | <a href="./docs/README_jp.md">日本語</a> | <a href="./docs/README_he.md">עברית</a>
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io/docs" title="Documentation">Docs</a> •
|
||||
<a href="https://forum.lvgl.io" title="Community forum">Forum</a> •
|
||||
<a href="https://blog.lvgl.io" title="News and articles">Blog</a> •
|
||||
<a href="https://lvgl.io/services" title="Professional services">Services</a>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" alt="spacer" width="250px" height="1px">
|
||||
<b>EN</b> •
|
||||
<a href="./docs/README_zh.md">中文</a> •
|
||||
<a href="./docs/README_ja.md">日本語</a> •
|
||||
<a href="./docs/README_ko.md">한국어</a> •
|
||||
<a href="./docs/README_pt_BR.md">PT</a> •
|
||||
<a href="./docs/README_he.md">עברית</a>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://lvgl.io/github-assets/logo-colored.png" width=300px>
|
||||
<a href="https://lvgl.io"><img src="https://lvgl.io/github-assets/logo-colored.png" height=50px/></a>
|
||||
<h1 align="center">Light and Versatile Graphics Library</h1>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Light and Versatile Graphics Library</h1>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div align="center">
|
||||
<img src="https://lvgl.io/github-assets/smartwatch-demo.gif">
|
||||
<img src="https://github.com/user-attachments/assets/965e8b8b-d240-45ed-9744-bdd81785967d" height="220" alt="Ebike demo with vector graphics">
|
||||
|
||||
<img border="1px" src="https://lvgl.io/github-assets/widgets-demo.gif">
|
||||
<img src="https://github.com/user-attachments/assets/d83820ed-5448-494e-94c8-3ca1b4ddceb0" height="220" alt="ECG demo with animated 3D model">
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io" title="Homepage of LVGL">Website</a> |
|
||||
<a href="https://pro.lvgl.io" title="LVGL Pro XML based UI Editor">LVGL Pro Editor</a> |
|
||||
<a href="https://docs.lvgl.io/" title="Detailed documentation with 100+ examples">Docs</a> |
|
||||
<a href="https://forum.lvgl.io" title="Get help and help others">Forum</a> |
|
||||
<a href="https://lvgl.io/demos" title="Demos running in your browser">Demos</a> |
|
||||
<a href="https://lvgl.io/services" title="Graphics design, UI implementation and consulting">Services</a>
|
||||
<a href="#overview" title="What LVGL is">Overview</a> •
|
||||
<a href="#features" title="What LVGL can do">Features</a> •
|
||||
<a href="#lvgl-pro" title="The professional toolchain">LVGL Pro</a> •
|
||||
<a href="#examples" title="C and XML examples">Examples</a> •
|
||||
<a href="#integration" title="How to add LVGL to your project">Integration</a> •
|
||||
<a href="#contributing" title="How to get involved">Contributing</a> •
|
||||
<a href="#license" title="Licensing terms">License</a>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
### Table of Contents
|
||||
<p>
|
||||
<a href="#ledger-overview">Overview</a> <br/>
|
||||
<a href="#-features">Features</a> <br/>
|
||||
<a href="#%EF%B8%8F-platform-support">Platform Support</a> <br/>
|
||||
<a href="#-lvgl-pro-editor">LVGL Pro Editor</a> <br/>
|
||||
<a href="#-commercial-services">Commercial Services</a> <br/>
|
||||
<a href="#%E2%80%8D-integrating-lvgl">Integrating LVGL</a> <br/>
|
||||
<a href="#-examples">Examples</a> <br/>
|
||||
<a href="#-contributing">Contributing</a>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
## 📒 Overview
|
||||
## Overview
|
||||
|
||||
**LVGL** is a free and open-source UI library that enables you to create graphical user interfaces
|
||||
for any MCUs and MPUs from any vendor on any platform.
|
||||
|
||||
**Requirements**: LVGL has no external dependencies, which makes it easy to compile for any modern target,
|
||||
from small MCUs to multi-core Linux-based MPUs with 3D support. For a simple UI, you need only ~100kB RAM,
|
||||
from small MCUs to multi-core Linux-based MPUs with 3D support. For a *typical* UI, you need only ~100kB RAM,
|
||||
~200–300kB flash, and a buffer size of 1/10 of the screen for rendering.
|
||||
|
||||
**To get started**, pick a ready-to-use VSCode, Eclipse, or any other project and try out LVGL
|
||||
on your PC. The LVGL UI code is fully platform-independent, so you can use the same UI code
|
||||
on embedded targets too.
|
||||
**Wide adoption**: Chip vendors (like NXP, Espressif, Renesas, and so on), RTOS projects (Zephyr, NuttX, etc.),
|
||||
and board manufacturers (Riverdi, Seeed Studio, VIEWE, Elecrow, etc.) have all integrated LVGL already. If a development board has a display, it's very likely
|
||||
the vendor offers LVGL support too.
|
||||
|
||||
**LVGL Pro** is a complete toolkit to help you build, test, share, and ship UIs faster.
|
||||
It comes with an XML Editor where you can quickly create and test reusable components,
|
||||
export C code, or load the XMLs at runtime. Learn more here.
|
||||
**Professional tools**: Instead of writing C code, you can hugely speed up and simplify UI development by using [LVGL Pro](#lvgl-pro), a complete toolkit with Editor, Figma integration, Online Viewer, and CLI. It exports pure LVGL C code from XML, with no extra runtime or hidden magic. It's free for non-commercial use and evaluation.
|
||||
|
||||
## 💡 Features
|
||||
**To get started**, browse the [Examples](#examples), spin up a [Simulator project](https://lvgl.io/docs/open/integration/pc), explore the [Online Viewer](https://viewer.lvgl.io/) of LVGL Pro, compile and run a UI in a window in [LVGL Pro](https://lvgl.io/docs/pro/integration/simulator) with one click, or dive into our AI-ready [Docs](https://lvgl.io/docs/open). Just click [**Ask AI**](https://lvgl.io/docs/open)
|
||||
and ask anything!
|
||||
|
||||
**Free and Portable**
|
||||
## Features
|
||||
|
||||
**Free, Portable, and Scalable**
|
||||
- A fully portable C (C++ compatible) library with no external dependencies.
|
||||
- Can be compiled for any MCU or MPU, with any (RT)OS. Make, CMake, and simple globbing are all supported.
|
||||
- Supports monochrome, ePaper, OLED, or TFT displays, or even monitors. [Displays](https://docs.lvgl.io/master/main-modules/display/index.html)
|
||||
- Supports monochrome, ePaper, OLED, or TFT displays, or even monitors. [Displays](https://lvgl.io/docs/open/main-modules/display)
|
||||
- Distributed under the MIT license, so you can easily use it in commercial projects too.
|
||||
- Needs only 32kB RAM and 128kB Flash, a frame buffer, and at least a 1/10 screen-sized buffer for rendering.
|
||||
- At a bare minimum needs only 32kB RAM and 128kB Flash, a frame buffer, and at least a 1/10 screen-sized buffer for rendering.
|
||||
- OS, external memory, and GPU are supported but not required.
|
||||
|
||||
**Widgets, Styles, Layouts, and More**
|
||||
- 30+ built-in [Widgets](https://docs.lvgl.io/master/widgets/index.html): Button, Label, Slider, Chart, Keyboard, Meter, Arc, Table, and many more.
|
||||
- Flexible [Style system](https://docs.lvgl.io/master/common-widget-features/styles/index.html) with ~100 style properties to customize any part of the widgets in any state.
|
||||
- [Flexbox](https://docs.lvgl.io/master/common-widget-features/layouts/flex.html) and [Grid](https://docs.lvgl.io/master/common-widget-features/layouts/grid.html)-like layout engines to automatically size and position the widgets responsively.
|
||||
- 30+ built-in [Widgets](https://lvgl.io/docs/open/widgets): Button, Label, Slider, Chart, Keyboard, Meter, Arc, Table, and many more.
|
||||
- Flexible [Style system](https://lvgl.io/docs/open/common-widget-features/styles) with 100+ style properties to customize any part of the widgets in any state.
|
||||
- [Flexbox](https://lvgl.io/docs/open/common-widget-features/layouts/flex) and [Grid](https://lvgl.io/docs/open/common-widget-features/layouts/grid)-like layout engines to automatically size and position the widgets responsively.
|
||||
- [Data bindings](https://lvgl.io/docs/open/main-modules/observer) to easily connect the UI with the application.
|
||||
- Supports Mouse, Touchpad, Keypad, Keyboard, External buttons, Encoder [Input devices](https://lvgl.io/docs/open/main-modules/indev).
|
||||
- [Multiple display](https://lvgl.io/docs/open/main-modules/display/overview#how-many-displays-can-lvgl-use) support.
|
||||
|
||||
**Rendering**
|
||||
- Built-in 2D rendering engine supporting basic shapes, gradients, anti-aliasing, opacity, smooth scrolling, box and drop shadows, image transformation, etc.
|
||||
- [Powerful 3D rendering engine](https://lvgl.io/docs/open/libs/gltf) to show [glTF models](https://sketchfab.com/) with OpenGL.
|
||||
- Vector graphics, SVG, and Lottie support.
|
||||
- Text is rendered with UTF-8 encoding, supporting CJK, Thai, Hindi, Arabic, and Persian writing systems.
|
||||
- [Data bindings](https://docs.lvgl.io/master/main-modules/observer/index.html) to easily connect the UI with the application.
|
||||
- Rendering engine supports animations, anti-aliasing, opacity, smooth scrolling, shadows, image transformation, etc.
|
||||
- [Powerful 3D rendering engine](https://docs.lvgl.io/master/libs/gltf.html) to show [glTF models](https://sketchfab.com/) with OpenGL.
|
||||
- Supports Mouse, Touchpad, Keypad, Keyboard, External buttons, Encoder [Input devices](https://docs.lvgl.io/master/main-modules/indev.html).
|
||||
- [Multiple display](https://docs.lvgl.io/master/main-modules/display/overview.html#how-many-displays-can-lvgl-use) support.
|
||||
- Built-in support for GPUs like VG-Lite, Dave2D, NeoChrome, OpenGL, etc.
|
||||
|
||||
## 📦️ Platform Support
|
||||
## LVGL Pro
|
||||
|
||||
LVGL has no external dependencies, so it can be easily compiled for any devices and it's also available in many package managers and RTOSes:
|
||||
Building UIs in C works well, but it gets slow to iterate on and harder to keep consistent as a project grows.
|
||||
[LVGL Pro](https://lvgl.io/pro) lets you build reusable components and screens visually, preview changes
|
||||
instantly, and manage data bindings, translations, animations, and tests in one place.
|
||||
|
||||
- [Arduino library](https://docs.lvgl.io/master/integration/framework/arduino.html)
|
||||
- [PlatformIO package](https://registry.platformio.org/libraries/lvgl/lvgl)
|
||||
- [Zephyr library](https://docs.lvgl.io/master/integration/os/zephyr.html)
|
||||
- [ESP-IDF(ESP32) component](https://components.espressif.com/components/lvgl/lvgl)
|
||||
- [NXP MCUXpresso component](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY)
|
||||
- [NuttX library](https://docs.lvgl.io/master/integration/os/nuttx.html)
|
||||
- [RT-Thread RTOS](https://docs.lvgl.io/master/integration/os/rt-thread.html)
|
||||
- CMSIS-Pack
|
||||
- [RIOT OS package](https://doc.riot-os.org/group__pkg__lvgl.html#details)
|
||||
Pro exports plain LVGL C code: the same LVGL you already use, with no extra runtime or dependency. It drops
|
||||
into an existing project without changing how you build or ship.
|
||||
|
||||
## 🚀 LVGL Pro Editor
|
||||
<p align="center">
|
||||
<img height="500" alt="Building a UI in the LVGL Pro editor with live preview" src="https://github.com/user-attachments/assets/8cef0f05-0ff1-4766-8dfd-1d15e47f181a" />
|
||||
</p>
|
||||
|
||||
LVGL Pro is a complete toolkit to build, test, share, and ship embedded UIs efficiently.
|
||||
You can try it in the browser at [viewer.lvgl.io](https://viewer.lvgl.io) without installing anything, or
|
||||
[download the Editor](https://lvgl.io/pro#download) and use it under the free Community license.
|
||||
|
||||
It consists of four tightly related tools:
|
||||
LVGL Pro consists of four tightly related tools:
|
||||
|
||||
1. **XML Editor**: The heart of LVGL Pro. A desktop app to build components and screens in XML, manage data bindings, translations, animations, tests, and more. Learn more about the [XML Format](https://docs.lvgl.io/master/xml/xml/index.html) and the [Editor](https://docs.lvgl.io/master/xml/editor/index.html).
|
||||
1. **Editor**: The heart of LVGL Pro. A desktop app to build components and screens in XML, manage data bindings, translations, animations, tests, and more. Learn more about the [XML Format](https://lvgl.io/docs/pro/syntax) and the [Widgets](https://lvgl.io/docs/pro/built_in_widgets).
|
||||
2. **Online Viewer**: Run the Editor in your browser, open GitHub projects, and share easily without setting up a developer environment. Visit [https://viewer.lvgl.io](https://viewer.lvgl.io).
|
||||
3. **CLI Tool**: Generate C code and run tests in CI/CD. See the details [here](https://docs.lvgl.io/master/xml/tools/cli.html).
|
||||
4. **Figma Plugin**: Sync and extract styles directly from Figma. See how it works [here](https://docs.lvgl.io/master/xml/tools/figma.html).
|
||||
3. **Figma Plugin**: Move a Figma design to LVGL Pro with one click. See how it works [here](https://lvgl.io/docs/pro/figma).
|
||||
4. **CLI Tool**: Generate C code and run tests in CI/CD. See the details [here](https://lvgl.io/docs/pro/cli).
|
||||
|
||||
Together, these tools let developers build UIs efficiently, test them reliably, and collaborate with team members and customers.
|
||||
The Community and Evaluation tiers are free to use; see [licensing](#license) for commercial use.
|
||||
|
||||
Learn more at https://pro.lvgl.io
|
||||
## Examples
|
||||
|
||||
## 🤝 Commercial Services
|
||||
You can check out more than 100 C and XML examples at https://lvgl.io/docs/open/examples
|
||||
|
||||
LVGL LLC provides several types of commercial services to help you with UI development. With 15+ years of experience in the user interface and graphics industry, we can help bring your UI to the next level.
|
||||
The [Online Viewer](https://viewer.lvgl.io/) of LVGL Pro also contains many tutorials and the same examples that you can play with interactively.
|
||||
|
||||
- **Graphics design**: Our in-house graphic designers are experts in creating beautiful modern designs that fit your product and the capabilities of your hardware.
|
||||
- **UI implementation**: We can implement your UI based on the design you or we have created. You can be sure that we will make the most of your hardware and LVGL. If a feature or widget is missing from LVGL, don't worry, we will implement it for you.
|
||||
- **Consulting and Support**: We also offer consulting to help you avoid costly and time-consuming mistakes during UI development.
|
||||
- **Board certification**: For companies offering development boards or production-ready kits, we provide board certification to show how the board can run LVGL.
|
||||
As a teaser, here is the same simple UI written in C and in XML:
|
||||
|
||||
Check out our [Demos](https://lvgl.io/demos) as references. For more information, take a look at the [Services page](https://lvgl.io/services).
|
||||
<p align="center">
|
||||
<img width="311" height="232" alt="A centered button that prints when clicked" src="https://github.com/user-attachments/assets/5948b485-e3f7-4a63-bb21-984381417c4a" />
|
||||
</p>
|
||||
|
||||
[Contact us](https://lvgl.io/#contact) and tell us how we can help.
|
||||
<!-- GitHub renders fenced code blocks inside table cells, so this shows C and XML side by side. -->
|
||||
<table>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
|
||||
## 🧑💻 Integrating LVGL
|
||||
```c
|
||||
static void button_clicked_cb(lv_event_t * e)
|
||||
{
|
||||
printf("Clicked\n");
|
||||
}
|
||||
|
||||
/* ... */
|
||||
|
||||
lv_obj_t * button = lv_button_create(lv_screen_active());
|
||||
lv_obj_center(button);
|
||||
lv_obj_add_event_cb(button, button_clicked_cb,
|
||||
LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t * label = lv_label_create(button);
|
||||
lv_label_set_text(label, "Hello from LVGL!");
|
||||
```
|
||||
|
||||
</td>
|
||||
<td width="50%">
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<view>
|
||||
<lv_button align="center">
|
||||
<event_cb callback="button_clicked_cb" />
|
||||
<lv_label text="Hello from LVGL!" />
|
||||
</lv_button>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
The XML above is what [LVGL Pro](#lvgl-pro) works with: you build the screen visually and it generates the C for you.
|
||||
|
||||
## Integration
|
||||
|
||||
LVGL has no external dependencies, so it can be easily compiled for any device. It comes with built-in drivers, is available in
|
||||
many package managers and RTOSes, and is also easy to port to any new device.
|
||||
|
||||
### Pre-integrated
|
||||
|
||||
- **Chip vendors**: [ESP32](https://components.espressif.com/components/lvgl/lvgl), [NXP MCUXpresso component](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY), [Renesas FSP](https://lvgl.io/docs/open/integration/chip/renesas), [STM32](https://lvgl.io/docs/open/integration/chip/stm32)
|
||||
|
||||
- **RTOSes**: [Zephyr](https://lvgl.io/docs/open/integration/os/zephyr), [NuttX](https://lvgl.io/docs/open/integration/os/nuttx), [RT-Thread](https://lvgl.io/docs/open/integration/os/rt-thread)
|
||||
|
||||
- **Frameworks**: [Arduino](https://lvgl.io/docs/open/integration/framework/arduino), [PlatformIO](https://registry.platformio.org/libraries/lvgl/lvgl), [CMSIS-Pack](https://lvgl.io/docs/open/integration/framework/cmsis-pack)
|
||||
|
||||
- **Board manufacturers**: [Seeed Studio](https://www.seeedstudio.com), [Elecrow](https://www.elecrow.com/display/esp-hmi-display.html), [Riverdi](https://lvgl.io/docs/open/integration/boards/manufacturers/riverdi), [VIEWE](https://lvgl.io/docs/open/integration/boards/manufacturers/viewe), and [many more](https://lvgl.io/boards)
|
||||
|
||||
### Built-in drivers
|
||||
LVGL ships with ready-to-use drivers, so on common platforms you don't have to write display and input handling yourself:
|
||||
|
||||
- **Simulator / desktop**: [SDL](https://lvgl.io/docs/open/integration/pc/sdl), X11, and [Wayland](https://lvgl.io/docs/open/integration/embedded_linux/drivers/wayland) windows to develop and preview your UI on a PC.
|
||||
- **Display controllers**: Generic MIPI-DBI/SPI LCDs ([ILI9341](https://lvgl.io/docs/open/integration/external_display_controllers/ili9341), ST7789, and similar), plus vendor controllers like ST's [LTDC](https://lvgl.io/docs/open/integration/chip_vendors/stm32/ltdc) and NXP's [eLCDIF](https://lvgl.io/docs/open/integration/chip_vendors/nxp/elcdif).
|
||||
- **Embedded Linux**: framebuffer (fbdev), DRM/KMS, Wayland, and `libinput`/`evdev` for touch and pointer input. Learn more [here](https://lvgl.io/docs/open/integration/embedded_linux).
|
||||
- **GPU / accelerators**: VG-Lite, NXP PXP, ThinkSilicon NemaGFX, Arm-2D and [OpenGL ES](https://lvgl.io/docs/open/integration/embedded_linux/drivers/opengl_driver)
|
||||
|
||||
See the full list and setup guides in the [Integration docs](https://lvgl.io/docs/open/integration).
|
||||
|
||||
### In LVGL Pro
|
||||
|
||||
In LVGL Pro you can create ready-to-use UI-only, VSCode, Zephyr, and Linux projects with a single click.
|
||||
<img width="600" alt="image" src="https://github.com/user-attachments/assets/5aadb850-6b40-49d1-ba96-2296041c7e27" />
|
||||
|
||||
### Porting manually
|
||||
|
||||
Integrating LVGL is very simple. Just drop it into any project and compile it as you would compile other files.
|
||||
To configure LVGL, copy `lv_conf_template.h` as `lv_conf.h`, enable the first `#if 0`, and adjust the configs as needed.
|
||||
@@ -203,184 +270,27 @@ void main(void)
|
||||
}
|
||||
```
|
||||
|
||||
## 🤖 Examples
|
||||
|
||||
You can check out more than 100 examples at https://docs.lvgl.io/master/examples.html
|
||||
|
||||
The Online Viewer also contains tutorials to easily learn XML: https://viewer.lvgl.io/
|
||||
|
||||
|
||||
### Hello World Button with an Event
|
||||
|
||||
<img width="311" height="232" alt="image" src="https://github.com/user-attachments/assets/5948b485-e3f7-4a63-bb21-984381417c4a" />
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
```c
|
||||
static void button_clicked_cb(lv_event_t * e)
|
||||
{
|
||||
printf("Clicked\n");
|
||||
}
|
||||
|
||||
[...]
|
||||
|
||||
lv_obj_t * button = lv_button_create(lv_screen_active());
|
||||
lv_obj_center(button);
|
||||
lv_obj_add_event_cb(button, button_clicked_cb, LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t * label = lv_label_create(button);
|
||||
lv_label_set_text(label, "Hello from LVGL!");
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>In XML with LVGL Pro</summary>
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<view>
|
||||
<lv_button align="center">
|
||||
<event_cb callback="button_clicked_cb" />
|
||||
<lv_label text="Hello from LVGL!" />
|
||||
</lv_button>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
### Styled Slider with Data-binding
|
||||
|
||||
<img width="314" height="233" alt="image" src="https://github.com/user-attachments/assets/268db1a0-946c-42e2-aee4-9550bdf5f4f9" />
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
```c
|
||||
static void my_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
|
||||
{
|
||||
printf("Slider value: %d\n", lv_subject_get_int(subject));
|
||||
}
|
||||
|
||||
[...]
|
||||
|
||||
static lv_subject_t subject_value;
|
||||
lv_subject_init_int(&subject_value, 35);
|
||||
lv_subject_add_observer(&subject_value, my_observer_cb, NULL);
|
||||
|
||||
lv_style_t style_base;
|
||||
lv_style_init(&style_base);
|
||||
lv_style_set_bg_color(&style_base, lv_color_hex(0xff8800));
|
||||
lv_style_set_bg_opa(&style_base, 255);
|
||||
lv_style_set_radius(&style_base, 4);
|
||||
|
||||
lv_obj_t * slider = lv_slider_create(lv_screen_active());
|
||||
lv_obj_center(slider);
|
||||
lv_obj_set_size(slider, lv_pct(80), 16);
|
||||
lv_obj_add_style(slider, &style_base, LV_PART_INDICATOR);
|
||||
lv_obj_add_style(slider, &style_base, LV_PART_KNOB);
|
||||
lv_obj_add_style(slider, &style_base, 0);
|
||||
lv_obj_set_style_bg_opa(slider, LV_OPA_50, 0);
|
||||
lv_obj_set_style_border_width(slider, 3, LV_PART_KNOB);
|
||||
lv_obj_set_style_border_color(slider, lv_color_hex3(0xfff), LV_PART_KNOB);
|
||||
lv_slider_bind_value(slider, &subject_value);
|
||||
|
||||
lv_obj_t * label = lv_label_create(lv_screen_active());
|
||||
lv_obj_align(label, LV_ALIGN_CENTER, 0, -30);
|
||||
lv_label_bind_text(label, &subject_value, "Temperature: %d °C");
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>In XML with LVGL Pro</summary>
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<styles>
|
||||
<style name="style_base" bg_opa="100%" bg_color="0xff8800" radius="4" />
|
||||
<style name="style_border" border_color="0xfff" border_width="3" />
|
||||
</styles>
|
||||
|
||||
<view>
|
||||
<lv_label bind_text="value" bind_text-fmt="Temperature: %d °C" align="center" y="-30" />
|
||||
<lv_slider align="center" bind_value="value" style_bg_opa="30%">
|
||||
<style name="style_base" />
|
||||
<style name="style_base" selector="knob" />
|
||||
<style name="style_base" selector="indicator" />
|
||||
<style name="style_border" selector="knob" />
|
||||
</lv_slider>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
### Checkboxes in a Layout
|
||||
|
||||
<img width="311" height="231" alt="image" src="https://github.com/user-attachments/assets/ba9af647-2ea1-4bc8-b53d-c7b43ce24b6e" />
|
||||
|
||||
<details>
|
||||
<summary>C code</summary>
|
||||
|
||||
```c
|
||||
/*Create a new screen and load it*/
|
||||
lv_obj_t * scr = lv_obj_create(NULL);
|
||||
lv_screen_load(scr);
|
||||
|
||||
/*Set a column layout*/
|
||||
lv_obj_set_flex_flow(scr, LV_FLEX_FLOW_COLUMN);
|
||||
lv_obj_set_flex_align(scr, LV_FLEX_ALIGN_SPACE_EVENLY, /*Vertical alignment*/
|
||||
LV_FLEX_ALIGN_START, /*Horizontal alignment in the track*/
|
||||
LV_FLEX_ALIGN_CENTER); /*Horizontal alignment of the track*/
|
||||
|
||||
/*Create 5 checkboxes*/
|
||||
const char * texts[5] = {"Input 1", "Input 2", "Input 3", "Output 1", "Output 2"};
|
||||
for(int i = 0; i < 5; i++) {
|
||||
lv_obj_t * cb = lv_checkbox_create(scr);
|
||||
lv_checkbox_set_text(cb, texts[i]);
|
||||
}
|
||||
|
||||
/*Change some states*/
|
||||
lv_obj_add_state(lv_obj_get_child(scr, 1), LV_STATE_CHECKED);
|
||||
lv_obj_add_state(lv_obj_get_child(scr, 3), LV_STATE_DISABLED);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>In XML with LVGL Pro</summary>
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<view
|
||||
flex_flow="column"
|
||||
style_flex_main_place="space_evenly"
|
||||
style_flex_cross_place="start"
|
||||
style_flex_track_place="center"
|
||||
>
|
||||
<lv_checkbox text="Input 1"/>
|
||||
<lv_checkbox text="Input 2"/>
|
||||
<lv_checkbox text="Input 3" checked="true"/>
|
||||
<lv_checkbox text="Output 1"/>
|
||||
<lv_checkbox text="Output 2" disabled="true"/>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
## 🌟 Contributing
|
||||
## Contributing
|
||||
|
||||
LVGL is an open project, and contributions are very welcome. There are many ways to contribute, from simply speaking about your project, writing examples, improving the documentation, fixing bugs, or even hosting your own project under the LVGL organization.
|
||||
|
||||
For a detailed description of contribution opportunities, visit the [Contributing](https://docs.lvgl.io/master/contributing/index.html)
|
||||
For a detailed description of contribution opportunities, visit the [Contributing](https://lvgl.io/docs/open/contributing)
|
||||
section of the documentation.
|
||||
|
||||
More than 600 people have already left their fingerprint on LVGL. Be one of them! See you here! 🙂
|
||||
Hundreds of people have already left their fingerprint on LVGL. Be one of them! See you here! 🙂
|
||||
|
||||
<a href="https://github.com/lvgl/lvgl/graphs/contributors"> <img src="https://contrib.rocks/image?repo=lvgl/lvgl&max=48" /> </a>
|
||||
|
||||
... and many more.
|
||||
## License
|
||||
|
||||
The LVGL library is distributed under the **MIT license**, so you can use it freely in both
|
||||
open-source and commercial products with no royalties. See [`LICENCE.txt`](LICENCE.txt).
|
||||
|
||||
All third-party libraries bundled with LVGL are released under MIT-compatible licenses too,
|
||||
so you can use LVGL and its dependencies with confidence.
|
||||
|
||||
**[LVGL Pro](https://lvgl.io/pro)** has separate licensing:
|
||||
- The **Community** and **Evaluation** tiers are **free for non-commercial use**, perfect for
|
||||
learning, hobby projects, and evaluating the tools.
|
||||
- Commercial use of LVGL Pro requires a paid license. See the [Pricing and Details](https://lvgl.io/pro#pricing).
|
||||
|
||||
|
||||
+216
-264
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,285 @@
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io/docs" title="Documentation">ドキュメント</a> •
|
||||
<a href="https://forum.lvgl.io" title="Community forum">フォーラム</a> •
|
||||
<a href="https://blog.lvgl.io" title="News and articles">ブログ</a> •
|
||||
<a href="https://lvgl.io/services" title="Professional services">サービス</a>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" alt="spacer" width="250px" height="1px">
|
||||
<a href="../README.md">EN</a> •
|
||||
<a href="./README_zh.md">中文</a> •
|
||||
<b>日本語</b> •
|
||||
<a href="./README_ko.md">한국어</a> •
|
||||
<a href="./README_pt_BR.md">PT</a> •
|
||||
<a href="./README_he.md">עברית</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io"><img src="https://lvgl.io/github-assets/logo-colored.png" height=50px/></a>
|
||||
<h1 align="center">軽量で汎用性の高いグラフィックスライブラリ</h1>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div align="center">
|
||||
<img src="https://github.com/user-attachments/assets/965e8b8b-d240-45ed-9744-bdd81785967d" height="220" alt="ベクターグラフィックスを使ったEbikeデモ">
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/d83820ed-5448-494e-94c8-3ca1b4ddceb0" height="220" alt="アニメーション3Dモデルを使ったECGデモ">
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<p align="center">
|
||||
<a href="#overview" title="What LVGL is">概要</a> •
|
||||
<a href="#features" title="What LVGL can do">機能</a> •
|
||||
<a href="#lvgl-pro" title="The professional toolchain">LVGL Pro</a> •
|
||||
<a href="#examples" title="C and XML examples">サンプル</a> •
|
||||
<a href="#integration" title="How to add LVGL to your project">統合</a> •
|
||||
<a href="#contributing" title="How to get involved">コントリビュート</a> •
|
||||
<a href="#license" title="Licensing terms">ライセンス</a>
|
||||
</p>
|
||||
|
||||
<a id="overview"></a>
|
||||
## 概要
|
||||
|
||||
**LVGL** は、無料でオープンソースのUIライブラリであり、あらゆるベンダーのあらゆるMCUやMPU向けに、あらゆるプラットフォーム上でグラフィカルユーザーインターフェースを作成できます。
|
||||
|
||||
**要件**: LVGLには外部依存関係がないため、小規模なMCUから3D対応のマルチコアLinuxベースMPUまで、あらゆる最新のターゲット向けに簡単にコンパイルできます。*一般的な* UIであれば、必要なのはRAMが約100kB、フラッシュが約200〜300kB、そしてレンダリング用に画面の1/10のバッファサイズだけです。
|
||||
|
||||
**幅広い採用**: チップベンダー(NXP、Espressif、Renesasなど)、RTOSプロジェクト(Zephyr、NuttXなど)、ボードメーカー(Riverdi、Seeed Studio、VIEWE、Elecrowなど)はすべて、すでにLVGLを統合しています。開発ボードにディスプレイが搭載されているなら、そのベンダーがLVGLサポートも提供している可能性が非常に高いです。
|
||||
|
||||
**プロフェッショナルツール**: C言語のコードを書く代わりに、[LVGL Pro](#lvgl-pro) を使うことでUI開発を大幅に高速化・簡素化できます。これはEditor、Figma統合、Online Viewer、CLIを備えた完全なツールキットです。追加のランタイムや隠れた仕掛けなしに、XMLから純粋なLVGLのCコードをエクスポートします。非商用利用および評価目的では無料です。
|
||||
|
||||
**始めるには**、[サンプル](#examples) を見たり、[Simulatorプロジェクト](https://lvgl.io/docs/open/integration/pc) を立ち上げたり、LVGL Proの [Online Viewer](https://viewer.lvgl.io/) を試したり、[LVGL Pro](https://lvgl.io/docs/pro/integration/simulator) でワンクリックでUIをウィンドウ内でコンパイル・実行したり、AI対応の [ドキュメント](https://lvgl.io/docs/open) に飛び込んだりしてみてください。[**Ask AI**](https://lvgl.io/docs/open) をクリックして、何でも質問してみましょう!
|
||||
|
||||
<a id="features"></a>
|
||||
## 機能
|
||||
|
||||
**無料、ポータブル、スケーラブル**
|
||||
- 外部依存関係のない、完全にポータブルなC(C++互換)ライブラリ。
|
||||
- 任意の(RT)OSで、任意のMCUまたはMPU向けにコンパイル可能。Make、CMake、シンプルなグロビングのすべてに対応。
|
||||
- モノクロ、ePaper、OLED、TFTディスプレイ、さらにはモニターにも対応。[ディスプレイ](https://lvgl.io/docs/open/main-modules/display)
|
||||
- MITライセンスの下で配布されているため、商用プロジェクトでも簡単に利用できます。
|
||||
- 最小構成では、RAM 32kBとフラッシュ128kB、フレームバッファ、そしてレンダリング用に少なくとも画面の1/10サイズのバッファだけで動作します。
|
||||
- OS、外部メモリ、GPUに対応していますが、必須ではありません。
|
||||
|
||||
**ウィジェット、スタイル、レイアウト、その他**
|
||||
- 30種類以上の組み込み [ウィジェット](https://lvgl.io/docs/open/widgets): Button、Label、Slider、Chart、Keyboard、Meter、Arc、Tableなど多数。
|
||||
- 100以上のスタイルプロパティを備えた柔軟な [スタイルシステム](https://lvgl.io/docs/open/common-widget-features/styles) で、あらゆる状態のウィジェットのあらゆる部分をカスタマイズできます。
|
||||
- [Flexbox](https://lvgl.io/docs/open/common-widget-features/layouts/flex) と [Grid](https://lvgl.io/docs/open/common-widget-features/layouts/grid) 風のレイアウトエンジンで、ウィジェットのサイズと位置をレスポンシブに自動調整します。
|
||||
- UIとアプリケーションを簡単に接続する [データバインディング](https://lvgl.io/docs/open/main-modules/observer)。
|
||||
- Mouse、Touchpad、Keypad、Keyboard、外部ボタン、Encoderの [入力デバイス](https://lvgl.io/docs/open/main-modules/indev) に対応。
|
||||
- [マルチディスプレイ](https://lvgl.io/docs/open/main-modules/display/overview#how-many-displays-can-lvgl-use) 対応。
|
||||
|
||||
**レンダリング**
|
||||
- 基本図形、グラデーション、アンチエイリアス、不透明度、スムーススクロール、ボックスシャドウやドロップシャドウ、画像変換などに対応した組み込み2Dレンダリングエンジン。
|
||||
- OpenGLで [glTFモデル](https://sketchfab.com/) を表示する [強力な3Dレンダリングエンジン](https://lvgl.io/docs/open/libs/gltf)。
|
||||
- ベクターグラフィックス、SVG、Lottie対応。
|
||||
- テキストはUTF-8エンコーディングでレンダリングされ、CJK、タイ語、ヒンディー語、アラビア語、ペルシャ語の書記体系に対応します。
|
||||
- VG-Lite、Dave2D、NeoChrome、OpenGLなどのGPUを組み込みでサポート。
|
||||
|
||||
<a id="lvgl-pro"></a>
|
||||
## LVGL Pro
|
||||
|
||||
C言語でのUI構築はうまく機能しますが、プロジェクトが成長するにつれて反復作業が遅くなり、一貫性を保つのが難しくなります。[LVGL Pro](https://lvgl.io/pro) を使えば、再利用可能なコンポーネントや画面をビジュアルに構築し、変更を即座にプレビューし、データバインディング、翻訳、アニメーション、テストを一箇所で管理できます。
|
||||
|
||||
Proは、追加のランタイムや依存関係のない、あなたがすでに使っているのと同じLVGLの、プレーンなLVGLのCコードをエクスポートします。ビルドや出荷の方法を変えることなく、既存のプロジェクトに組み込めます。
|
||||
|
||||
<p align="center">
|
||||
<img height="500" alt="ライブプレビュー付きのLVGL Pro editorでUIを構築する様子" src="https://github.com/user-attachments/assets/8cef0f05-0ff1-4766-8dfd-1d15e47f181a" />
|
||||
</p>
|
||||
|
||||
何もインストールせずに [viewer.lvgl.io](https://viewer.lvgl.io) でブラウザ上で試すことも、[Editorをダウンロード](https://lvgl.io/pro#download) して無料のCommunityライセンスの下で使うこともできます。
|
||||
|
||||
LVGL Proは、密接に関連する4つのツールで構成されています。
|
||||
|
||||
1. **Editor**: LVGL Proの中核。XMLでコンポーネントや画面を構築し、データバインディング、翻訳、アニメーション、テストなどを管理するデスクトップアプリです。[XMLフォーマット](https://lvgl.io/docs/pro/syntax) と [ウィジェット](https://lvgl.io/docs/pro/built_in_widgets) について詳しく学べます。
|
||||
2. **Online Viewer**: Editorをブラウザ上で実行し、GitHubプロジェクトを開き、開発環境をセットアップすることなく簡単に共有できます。[https://viewer.lvgl.io](https://viewer.lvgl.io) にアクセスしてください。
|
||||
3. **Figma Plugin**: FigmaのデザインをワンクリックでLVGL Proに移行します。仕組みは [こちら](https://lvgl.io/docs/pro/figma) をご覧ください。
|
||||
4. **CLI Tool**: Cコードを生成し、CI/CDでテストを実行します。詳細は [こちら](https://lvgl.io/docs/pro/cli) をご覧ください。
|
||||
|
||||
CommunityとEvaluationのティアは無料で使えます。商用利用については [ライセンス](#license) を参照してください。
|
||||
|
||||
<a id="examples"></a>
|
||||
## サンプル
|
||||
|
||||
https://lvgl.io/docs/open/examples で100を超えるCおよびXMLのサンプルを確認できます。
|
||||
|
||||
LVGL Proの [Online Viewer](https://viewer.lvgl.io/) にも、多数のチュートリアルや、インタラクティブに操作できる同じサンプルが含まれています。
|
||||
|
||||
ちょっとした紹介として、同じシンプルなUIをCとXMLで書いたものを示します。
|
||||
|
||||
<p align="center">
|
||||
<img width="311" height="232" alt="クリックすると出力する中央揃えのボタン" src="https://github.com/user-attachments/assets/5948b485-e3f7-4a63-bb21-984381417c4a" />
|
||||
</p>
|
||||
|
||||
<!-- GitHub renders fenced code blocks inside table cells, so this shows C and XML side by side. -->
|
||||
<table>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
|
||||
```c
|
||||
static void button_clicked_cb(lv_event_t * e)
|
||||
{
|
||||
printf("Clicked\n");
|
||||
}
|
||||
|
||||
/* ... */
|
||||
|
||||
lv_obj_t * button = lv_button_create(lv_screen_active());
|
||||
lv_obj_center(button);
|
||||
lv_obj_add_event_cb(button, button_clicked_cb,
|
||||
LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t * label = lv_label_create(button);
|
||||
lv_label_set_text(label, "Hello from LVGL!");
|
||||
```
|
||||
|
||||
</td>
|
||||
<td width="50%">
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<view>
|
||||
<lv_button align="center">
|
||||
<event_cb callback="button_clicked_cb" />
|
||||
<lv_label text="Hello from LVGL!" />
|
||||
</lv_button>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
上記のXMLは、[LVGL Pro](#lvgl-pro) が扱うものです。画面をビジュアルに構築すると、Proがそれに対応するCコードを生成してくれます。
|
||||
|
||||
<a id="integration"></a>
|
||||
## 統合
|
||||
|
||||
LVGLには外部依存関係がないため、あらゆるデバイス向けに簡単にコンパイルできます。組み込みドライバーが付属しており、多くのパッケージマネージャーやRTOSで利用でき、新しいデバイスへの移植も容易です。
|
||||
|
||||
### 事前統合済み
|
||||
|
||||
- **チップベンダー**: [ESP32](https://components.espressif.com/components/lvgl/lvgl)、[NXP MCUXpressoコンポーネント](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY)、[Renesas FSP](https://lvgl.io/docs/open/integration/chip/renesas)、[STM32](https://lvgl.io/docs/open/integration/chip/stm32)
|
||||
|
||||
- **RTOS**: [Zephyr](https://lvgl.io/docs/open/integration/os/zephyr)、[NuttX](https://lvgl.io/docs/open/integration/os/nuttx)、[RT-Thread](https://lvgl.io/docs/open/integration/os/rt-thread)
|
||||
|
||||
- **フレームワーク**: [Arduino](https://lvgl.io/docs/open/integration/framework/arduino)、[PlatformIO](https://registry.platformio.org/libraries/lvgl/lvgl)、[CMSIS-Pack](https://lvgl.io/docs/open/integration/framework/cmsis-pack)
|
||||
|
||||
- **ボードメーカー**: [Seeed Studio](https://www.seeedstudio.com)、[Elecrow](https://www.elecrow.com/display/esp-hmi-display.html)、[Riverdi](https://lvgl.io/docs/open/integration/boards/manufacturers/riverdi)、[VIEWE](https://lvgl.io/docs/open/integration/boards/manufacturers/viewe)、[その他多数](https://lvgl.io/boards)
|
||||
|
||||
### 組み込みドライバー
|
||||
LVGLにはすぐに使えるドライバーが付属しているため、一般的なプラットフォームではディスプレイや入力処理を自分で書く必要はありません。
|
||||
|
||||
- **Simulator / デスクトップ**: [SDL](https://lvgl.io/docs/open/integration/pc/sdl)、X11、[Wayland](https://lvgl.io/docs/open/integration/embedded_linux/drivers/wayland) のウィンドウで、PC上でUIを開発・プレビューできます。
|
||||
- **ディスプレイコントローラー**: 汎用MIPI-DBI/SPI LCD([ILI9341](https://lvgl.io/docs/open/integration/external_display_controllers/ili9341)、ST7789など)に加え、STの [LTDC](https://lvgl.io/docs/open/integration/chip_vendors/stm32/ltdc) やNXPの [eLCDIF](https://lvgl.io/docs/open/integration/chip_vendors/nxp/elcdif) といったベンダーコントローラー。
|
||||
- **組み込みLinux**: framebuffer(fbdev)、DRM/KMS、Wayland、そしてタッチとポインタ入力用の `libinput`/`evdev`。詳細は [こちら](https://lvgl.io/docs/open/integration/embedded_linux) をご覧ください。
|
||||
- **GPU / アクセラレーター**: VG-Lite、NXP PXP、ThinkSilicon NemaGFX、Arm-2D、[OpenGL ES](https://lvgl.io/docs/open/integration/embedded_linux/drivers/opengl_driver)
|
||||
|
||||
完全な一覧とセットアップガイドは [統合ドキュメント](https://lvgl.io/docs/open/integration) をご覧ください。
|
||||
|
||||
### LVGL Proでの統合
|
||||
|
||||
LVGL Proでは、UIのみ、VSCode、Zephyr、Linuxのすぐに使えるプロジェクトをワンクリックで作成できます。
|
||||
<img width="600" alt="image" src="https://github.com/user-attachments/assets/5aadb850-6b40-49d1-ba96-2296041c7e27" />
|
||||
|
||||
### 手動での移植
|
||||
|
||||
LVGLの統合はとても簡単です。任意のプロジェクトに配置し、他のファイルと同じようにコンパイルするだけです。LVGLを設定するには、`lv_conf_template.h` を `lv_conf.h` としてコピーし、最初の `#if 0` を有効にして、必要に応じて設定を調整します。(デフォルトの設定で通常は問題ありません。)利用可能であれば、LVGLはKconfigと併用することもできます。
|
||||
|
||||
プロジェクトに組み込んだら、次のようにLVGLを初期化し、ディスプレイと入力デバイスを作成できます。
|
||||
|
||||
```c
|
||||
#include "lvgl/lvgl.h" /*Define LV_LVGL_H_INCLUDE_SIMPLE to include as "lvgl.h"*/
|
||||
|
||||
#define TFT_HOR_RES 320
|
||||
#define TFT_VER_RES 240
|
||||
|
||||
static uint32_t my_tick_cb(void)
|
||||
{
|
||||
return my_get_millisec();
|
||||
}
|
||||
|
||||
static void my_flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
|
||||
{
|
||||
/*Write px_map to the area->x1, area->x2, area->y1, area->y2 area of the
|
||||
*frame buffer or external display controller. */
|
||||
|
||||
/* signal LVGL that we're done */
|
||||
lv_display_flush_ready(disp);
|
||||
}
|
||||
|
||||
static void my_touch_read_cb(lv_indev_t * indev, lv_indev_data_t * data)
|
||||
{
|
||||
if(my_touch_is_pressed()) {
|
||||
data->point.x = touchpad_x;
|
||||
data->point.y = touchpad_y;
|
||||
data->state = LV_INDEV_STATE_PRESSED;
|
||||
} else {
|
||||
data->state = LV_INDEV_STATE_RELEASED;
|
||||
}
|
||||
}
|
||||
|
||||
void main(void)
|
||||
{
|
||||
my_hardware_init();
|
||||
|
||||
/*Initialize LVGL*/
|
||||
lv_init();
|
||||
|
||||
/*Set millisecond-based tick source for LVGL so that it can track time.*/
|
||||
lv_tick_set_cb(my_tick_cb);
|
||||
|
||||
/*Create a display where screens and widgets can be added*/
|
||||
lv_display_t * display = lv_display_create(TFT_HOR_RES, TFT_VER_RES);
|
||||
|
||||
/*Add rendering buffers to the screen.
|
||||
*Here adding a smaller partial buffer assuming 16-bit (RGB565 color format)*/
|
||||
static uint8_t buf[TFT_HOR_RES * TFT_VER_RES / 10 * 2]; /* x2 because of 16-bit color depth */
|
||||
lv_display_set_buffers(display, buf, NULL, sizeof(buf), LV_DISPLAY_RENDER_MODE_PARTIAL);
|
||||
|
||||
/*Add a callback that can flush the content from `buf` when it has been rendered*/
|
||||
lv_display_set_flush_cb(display, my_flush_cb);
|
||||
|
||||
/*Create an input device for touch handling*/
|
||||
lv_indev_t * indev = lv_indev_create();
|
||||
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
|
||||
lv_indev_set_read_cb(indev, my_touch_read_cb);
|
||||
|
||||
/*The drivers are in place; now we can create the UI*/
|
||||
lv_obj_t * label = lv_label_create(lv_screen_active());
|
||||
lv_label_set_text(label, "Hello world");
|
||||
lv_obj_center(label);
|
||||
|
||||
/*Execute the LVGL-related tasks in a loop*/
|
||||
while(1) {
|
||||
lv_timer_handler();
|
||||
my_sleep_ms(5); /*Wait a little to let the system breathe*/
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<a id="contributing"></a>
|
||||
## コントリビュート
|
||||
|
||||
LVGLはオープンなプロジェクトであり、コントリビュートを大いに歓迎しています。あなたのプロジェクトについて話すこと、サンプルを書くこと、ドキュメントを改善すること、バグを修正すること、さらには自分のプロジェクトをLVGL組織の下でホストすることまで、貢献する方法はたくさんあります。
|
||||
|
||||
コントリビュートの機会についての詳しい説明は、ドキュメントの [コントリビュート](https://lvgl.io/docs/open/contributing) セクションをご覧ください。
|
||||
|
||||
すでに何百人もの人々がLVGLに足跡を残しています。あなたもその一人になりましょう!ここでお会いしましょう! 🙂
|
||||
|
||||
|
||||
<a id="license"></a>
|
||||
## ライセンス
|
||||
|
||||
LVGLライブラリは **MITライセンス** の下で配布されているため、オープンソース製品でも商用製品でもロイヤリティなしで自由に使用できます。[`LICENCE.txt`](../LICENCE.txt) を参照してください。
|
||||
|
||||
LVGLにバンドルされているすべてのサードパーティライブラリもMIT互換ライセンスの下でリリースされているため、LVGLとその依存関係を安心して使用できます。
|
||||
|
||||
**[LVGL Pro](https://lvgl.io/pro)** には別途ライセンスがあります。
|
||||
- **Community** と **Evaluation** のティアは **非商用利用では無料** であり、学習、趣味のプロジェクト、ツールの評価に最適です。
|
||||
- LVGL Proの商用利用には有料ライセンスが必要です。[料金と詳細](https://lvgl.io/pro#pricing) を参照してください。
|
||||
@@ -1,332 +0,0 @@
|
||||
<a href="https://github.com/sponsors/lvgl" target="_blank"><img align="left" src="https://lvgl.io/github-assets/sponsor.png" height="32px"></a>
|
||||
|
||||
|
||||
|
||||
<p align="right"><a href="../README.md">English</a> | <a href="./README_zh.md">中文</a> | <a href="./README_pt_BR.md">Português do Brasil</a> | <b>日本語</b> | <a href="./README_he.md">עברית</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://lvgl.io/github-assets/logo-colored.png" width=300px>
|
||||
</p>
|
||||
|
||||
|
||||
<h1 align="center">Light and Versatile Graphics Library</h1>
|
||||
<br>
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/kisvegabor/test/master/smartwatch_demo.gif">
|
||||
|
||||
<img border="1px" src="https://lvgl.io/github-assets/widgets-demo.gif">
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io" title="LVGL ホームページ">ウェブサイト</a> |
|
||||
<a href="https://pro.lvgl.io" title="LVGL Pro XML ベースの UI エディター">LVGL Pro エディター</a> |
|
||||
<a href="https://docs.lvgl.io/" title="100 以上のサンプル付き詳細ドキュメント">ドキュメント</a> |
|
||||
<a href="https://forum.lvgl.io" title="質問・回答コミュニティ">フォーラム</a> |
|
||||
<a href="https://lvgl.io/demos" title="ブラウザで実行できるデモ">デモ</a> |
|
||||
<a href="https://lvgl.io/services" title="グラフィックデザイン、UI 実装、コンサルティング">サービス</a>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
## 📒 概要
|
||||
|
||||
**LVGL** は、あらゆるメーカーやプラットフォームの MCU および MPU に対応した、無料でオープンソースの UI ライブラリです。
|
||||
|
||||
**要件**:LVGL は外部依存がないため、最新のあらゆるターゲットに簡単にコンパイルできます。小型 MCU から 3D 対応のマルチコア Linux MPU まで対応。シンプルな UI の場合、約 100kB の RAM、200~300kB のフラッシュ、および画面の 1/10 サイズのバッファで十分です。
|
||||
|
||||
**はじめに**:VSCode、Eclipse などのプロジェクトを選び、PC 上で LVGL を試してみましょう。LVGL の UI コードは完全にプラットフォーム非依存なので、そのまま組込みターゲットでも使用できます。
|
||||
|
||||
**LVGL Pro** は、UI をより迅速に構築・テスト・共有・出荷できる完全なツールキットです。XML エディターを備え、再利用可能なコンポーネントの作成・テスト、C コードのエクスポート、XML の実行時読み込みが可能です。詳細は公式サイトをご覧ください。
|
||||
|
||||
## 💡 機能
|
||||
|
||||
**無料でポータブル**
|
||||
- 外部依存のない完全な C(C++ 互換)ライブラリ。
|
||||
- あらゆる MCU / MPU、任意の (RT)OS に対応。Make、CMake、glob 構文をサポート。
|
||||
- モノクロ、電子ペーパー、OLED、TFT、さらにはモニターにも対応。[ディスプレイ](https://docs.lvgl.io/master/main-modules/display/index.html)
|
||||
- MIT ライセンスで商用利用も簡単。
|
||||
- 必要リソースはわずか 32kB RAM、128kB フラッシュ、フレームバッファ、および画面の 1/10 の描画バッファ。
|
||||
- OS、外部メモリ、GPU の使用は任意。
|
||||
|
||||
**ウィジェット・スタイル・レイアウトなど**
|
||||
- 30 以上の [ウィジェット](https://docs.lvgl.io/master/widgets/index.html):ボタン、ラベル、スライダー、チャート、キーボード、メーター、アーク、テーブルなど。
|
||||
- 約 100 のプロパティを持つ柔軟な [スタイルシステム](https://docs.lvgl.io/master/common-widget-features/styles/index.html)。
|
||||
- [Flexbox](https://docs.lvgl.io/master/common-widget-features/layouts/flex.html)、[Grid](https://docs.lvgl.io/master/common-widget-features/layouts/grid.html) レイアウトエンジンによる自動配置。
|
||||
- UTF-8 文字レンダリング。CJK、タイ語、ヒンディー語、アラビア語、ペルシャ語などをサポート。
|
||||
- [データバインディング](https://docs.lvgl.io/master/main-modules/observer/index.html) により、UI とアプリケーションを簡単に接続。
|
||||
- レンダリングエンジンはアニメーション、アンチエイリアス、不透明度、スムーズスクロール、影、画像変換をサポート。
|
||||
- [3D レンダリングエンジン](https://docs.lvgl.io/master/libs/gltf.html) により [glTF モデル](https://sketchfab.com/) を OpenGL で表示可能。
|
||||
- マウス、タッチパッド、キー入力、外部ボタン、エンコーダなどに対応。[入力デバイス](https://docs.lvgl.io/master/main-modules/indev.html)
|
||||
- [マルチディスプレイ](https://docs.lvgl.io/master/main-modules/display/overview.html#how-many-displays-can-lvgl-use) をサポート。
|
||||
|
||||
## 📦️ 対応プラットフォーム
|
||||
|
||||
LVGL は外部依存がなく、さまざまなデバイスで簡単にビルドでき、主要なパッケージマネージャや RTOS にも統合されています:
|
||||
|
||||
- [Arduino ライブラリ](https://docs.lvgl.io/master/integration/framework/arduino.html)
|
||||
- [PlatformIO パッケージ](https://registry.platformio.org/libraries/lvgl/lvgl)
|
||||
- [Zephyr ライブラリ](https://docs.lvgl.io/master/integration/os/zephyr.html)
|
||||
- [ESP-IDF (ESP32) コンポーネント](https://components.espressif.com/components/lvgl/lvgl)
|
||||
- [NXP MCUXpresso コンポーネント](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY)
|
||||
- [NuttX ライブラリ](https://docs.lvgl.io/master/integration/os/nuttx.html)
|
||||
- [RT-Thread RTOS](https://docs.lvgl.io/master/integration/os/rt-thread.html)
|
||||
- CMSIS-Pack
|
||||
- [RIOT OS パッケージ](https://doc.riot-os.org/group__pkg__lvgl.html#details)
|
||||
|
||||
## 🚀 LVGL Pro エディター
|
||||
|
||||
LVGL Pro は、組込み UI を効率的に構築・テスト・共有・出荷するための完全なツール群です。
|
||||
|
||||
以下の 4 つのツールで構成されています:
|
||||
|
||||
1. **XML エディター**:LVGL Pro の中心。XML でコンポーネントや画面を作成し、データバインディング、翻訳、アニメーション、テストなどを管理。詳細は [XML フォーマット](https://docs.lvgl.io/master/xml/xml/index.html) および [エディター](https://docs.lvgl.io/master/xml/editor/index.html)。
|
||||
2. **オンラインビューア**:ブラウザでエディターを実行し、GitHub プロジェクトを開いて簡単に共有。環境構築は不要。アクセス:[https://viewer.lvgl.io](https://viewer.lvgl.io)
|
||||
3. **CLI ツール**:C コードの生成や CI/CD テストを自動化。詳細は [こちら](https://docs.lvgl.io/master/xml/tools/cli.html)。
|
||||
4. **Figma プラグイン**:Figma から直接スタイルを同期・抽出。[詳細はこちら](https://docs.lvgl.io/master/xml/tools/figma.html)。
|
||||
|
||||
これらのツールを組み合わせることで、開発者は効率的に UI を構築し、信頼性の高いテストとチームコラボレーションを実現できます。
|
||||
|
||||
詳細は https://pro.lvgl.io へ。
|
||||
|
||||
## 🤝 商用サービス
|
||||
|
||||
LVGL LLC は、UI 開発を支援するさまざまな商用サービスを提供しています。ユーザーインターフェースとグラフィック分野で 15 年以上の経験を活かし、あなたの製品 UI を次のレベルへ導きます。
|
||||
|
||||
- **グラフィックデザイン**:社内デザイナーが、製品とハードウェア性能に最適化された美しくモダンなデザインを提供。
|
||||
- **UI 実装**:お客様または当社が作成したデザインに基づき、最適な UI を実装。必要なウィジェットがない場合も新たに開発します。
|
||||
- **コンサルティング・サポート**:UI 開発での時間やコストの無駄を避けるための専門支援。
|
||||
- **ボード認証**:開発ボードや製品キットを提供する企業向けに、LVGL の動作実績を示す認証を提供。
|
||||
|
||||
参考として [デモ](https://lvgl.io/demos) をご覧ください。詳細は [サービスページ](https://lvgl.io/services) を参照ください。
|
||||
|
||||
[お問い合わせ](https://lvgl.io/#contact) からご連絡ください。
|
||||
|
||||
## 🧑💻 LVGL の統合
|
||||
|
||||
LVGL の統合は非常に簡単です。プロジェクトに追加して他のファイルと同様にコンパイルするだけです。
|
||||
設定するには、`lv_conf_template.h` を `lv_conf.h` としてコピーし、最初の `#if 0` を有効化して必要に応じて設定を調整します。
|
||||
(通常はデフォルト設定で十分です。)Kconfig にも対応しています。
|
||||
|
||||
プロジェクト内で LVGL を初期化し、ディスプレイと入力デバイスを作成する例:
|
||||
|
||||
```c
|
||||
#include "lvgl/lvgl.h" /*LV_LVGL_H_INCLUDE_SIMPLE を定義すると "lvgl.h" としてインクルード可能*/
|
||||
|
||||
#define TFT_HOR_RES 320
|
||||
#define TFT_VER_RES 240
|
||||
|
||||
static uint32_t my_tick_cb(void)
|
||||
{
|
||||
return my_get_millisec();
|
||||
}
|
||||
|
||||
static void my_flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
|
||||
{
|
||||
/*px_map をフレームバッファまたは外部ディスプレイコントローラに書き込む*/
|
||||
}
|
||||
|
||||
static void my_touch_read_cb(lv_indev_t * indev, lv_indev_data_t * data)
|
||||
{
|
||||
if(my_touch_is_pressed()) {
|
||||
data->point.x = touchpad_x;
|
||||
data->point.y = touchpad_y;
|
||||
data->state = LV_INDEV_STATE_PRESSED;
|
||||
} else {
|
||||
data->state = LV_INDEV_STATE_RELEASED;
|
||||
}
|
||||
}
|
||||
|
||||
void main(void)
|
||||
{
|
||||
my_hardware_init();
|
||||
|
||||
/*LVGL を初期化*/
|
||||
lv_init();
|
||||
|
||||
/*ミリ秒単位のタイマーコールバックを設定*/
|
||||
lv_tick_set_cb(my_tick_cb);
|
||||
|
||||
/*ディスプレイを作成*/
|
||||
lv_display_t * display = lv_display_create(TFT_HOR_RES, TFT_VER_RES);
|
||||
|
||||
/*描画バッファを追加(16bit RGB565 の場合)*/
|
||||
static uint8_t buf[TFT_HOR_RES * TFT_VER_RES / 10 * 2];
|
||||
lv_display_set_buffers(display, buf, NULL, sizeof(buf), LV_DISPLAY_RENDER_MODE_PARTIAL);
|
||||
|
||||
/*描画内容をフラッシュするコールバックを設定*/
|
||||
lv_display_set_flush_cb(display, my_flush_cb);
|
||||
|
||||
/*入力デバイスを作成(タッチ用)*/
|
||||
lv_indev_t * indev = lv_indev_create();
|
||||
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
|
||||
lv_indev_set_read_cb(indev, my_touch_read_cb);
|
||||
|
||||
/*UI を作成*/
|
||||
lv_obj_t * label = lv_label_create(lv_screen_active());
|
||||
lv_label_set_text(label, "Hello world");
|
||||
lv_obj_center(label);
|
||||
|
||||
/*メインループで LVGL を実行*/
|
||||
while(1) {
|
||||
lv_timer_handler();
|
||||
my_sleep_ms(5);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🤖 サンプル
|
||||
|
||||
100 以上のサンプルが https://docs.lvgl.io/master/examples.html にあります。
|
||||
|
||||
オンラインビューア https://viewer.lvgl.io/ でも XML のチュートリアルを学べます。
|
||||
|
||||
|
||||
### Hello World ボタンイベント
|
||||
|
||||
<img width="311" height="232" alt="image" src="https://github.com/user-attachments/assets/5948b485-e3f7-4a63-bb21-984381417c4a" />
|
||||
|
||||
<details>
|
||||
<summary>C コード</summary>
|
||||
|
||||
```c
|
||||
static void button_clicked_cb(lv_event_t * e)
|
||||
{
|
||||
printf("Clicked\n");
|
||||
}
|
||||
|
||||
[...]
|
||||
|
||||
lv_obj_t * button = lv_button_create(lv_screen_active());
|
||||
lv_obj_center(button);
|
||||
lv_obj_add_event_cb(button, button_clicked_cb, LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t * label = lv_label_create(button);
|
||||
lv_label_set_text(label, "Hello from LVGL!");
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>LVGL Pro の XML</summary>
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<view>
|
||||
<lv_button align="center">
|
||||
<event_cb callback="button_clicked_cb" />
|
||||
<lv_label text="Hello from LVGL!" />
|
||||
</lv_button>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
### データバインド付きスライダー
|
||||
|
||||
<img width="314" height="233" alt="image" src="https://github.com/user-attachments/assets/268db1a0-946c-42e2-aee4-9550bdf5f4f9" />
|
||||
|
||||
<details>
|
||||
<summary>C コード</summary>
|
||||
|
||||
```c
|
||||
static void my_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
|
||||
{
|
||||
printf("Slider value: %d\n", lv_subject_get_int(subject));
|
||||
}
|
||||
|
||||
[...]
|
||||
|
||||
static lv_subject_t subject_value;
|
||||
lv_subject_init_int(&subject_value, 35);
|
||||
lv_subject_add_observer(&subject_value, my_observer_cb, NULL);
|
||||
|
||||
lv_style_t style_base;
|
||||
lv_style_init(&style_base);
|
||||
lv_style_set_bg_color(&style_base, lv_color_hex(0xff8800));
|
||||
lv_style_set_bg_opa(&style_base, 255);
|
||||
lv_style_set_radius(&style_base, 4);
|
||||
|
||||
lv_obj_t * slider = lv_slider_create(lv_screen_active());
|
||||
lv_obj_center(slider);
|
||||
lv_obj_set_size(slider, lv_pct(80), 16);
|
||||
lv_obj_add_style(slider, &style_base, LV_PART_INDICATOR);
|
||||
lv_obj_add_style(slider, &style_base, LV_PART_KNOB);
|
||||
lv_obj_add_style(slider, &style_base, 0);
|
||||
lv_obj_set_style_bg_opa(slider, LV_OPA_50, 0);
|
||||
lv_obj_set_style_border_width(slider, 3, LV_PART_KNOB);
|
||||
lv_obj_set_style_border_color(slider, lv_color_hex3(0xfff), LV_PART_KNOB);
|
||||
lv_slider_bind_value(slider, &subject_value);
|
||||
|
||||
lv_obj_t * label = lv_label_create(lv_screen_active());
|
||||
lv_obj_align(label, LV_ALIGN_CENTER, 0, -30);
|
||||
lv_label_bind_text(label, &subject_value, "Temperature: %d °C");
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>LVGL Pro の XML</summary>
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<styles>
|
||||
<style name="style_base" bg_opa="100%" bg_color="0xff8800" radius="4" />
|
||||
<style name="style_border" border_color="0xfff" border_width="3" />
|
||||
</styles>
|
||||
|
||||
<view>
|
||||
<lv_label bind_text="value" bind_text-fmt="Temperature: %d °C" align="center" y="-30" />
|
||||
<lv_slider align="center" bind_value="value" style_bg_opa="30%">
|
||||
<style name="style_base" />
|
||||
<style name="style_base" selector="knob" />
|
||||
<style name="style_base" selector="indicator" />
|
||||
<style name="style_border" selector="knob" />
|
||||
</lv_slider>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
### レイアウト内のチェックボックス
|
||||
|
||||
<img width="311" height="231" alt="image" src="https://github.com/user-attachments/assets/ba9af647-2ea1-4bc8-b53d-c7b43ce24b6e" />
|
||||
|
||||
<details>
|
||||
<summary>C コード</summary>
|
||||
|
||||
```c
|
||||
/* 新しい画面を作成してロード */
|
||||
lv_obj_t * scr = lv_obj_create(NULL);
|
||||
lv_screen_load(scr);
|
||||
|
||||
/* 縦方向のレイアウトを設定 */
|
||||
lv_obj_set_flex_flow(scr, LV_FLEX_FLOW_COLUMN);
|
||||
lv_obj_set_flex_align(scr, LV_FLEX_ALIGN_SPACE_EVENLY,
|
||||
LV_FLEX_ALIGN_START,
|
||||
LV_FLEX_ALIGN_CENTER);
|
||||
|
||||
/* チェックボックスを 5 個作成 */
|
||||
const char * texts[5] = {"Input 1", "Input 2", "Input 3", "Output 1", "Output 2"};
|
||||
for(int i = 0; i < 5; i++) {
|
||||
lv_obj_t * cb = lv_checkbox_create(scr);
|
||||
lv_checkbox_set_text(cb, texts[i]);
|
||||
}
|
||||
|
||||
/* 状態変更 */
|
||||
lv_obj_add_state(lv_obj_get_child(scr, 1), LV_STATE_CHECKED);
|
||||
lv_obj_add_state(lv_obj_get_child(scr, 3), LV_STATE_DISABLED);
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>LVGL Pro の XML</summary>
|
||||
|
||||
```xml
|
||||
<screen
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io/docs" title="문서">문서</a> •
|
||||
<a href="https://forum.lvgl.io" title="커뮤니티 포럼">포럼</a> •
|
||||
<a href="https://blog.lvgl.io" title="뉴스 및 기사">블로그</a> •
|
||||
<a href="https://lvgl.io/services" title="전문 서비스">서비스</a>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" alt="spacer" width="250px" height="1px">
|
||||
<a href="../README.md">EN</a> •
|
||||
<a href="./README_zh.md">中文</a> •
|
||||
<a href="./README_ja.md">日本語</a> •
|
||||
<b>한국어</b> •
|
||||
<a href="./README_pt_BR.md">PT</a> •
|
||||
<a href="./README_he.md">עברית</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://lvgl.io"><img src="https://lvgl.io/github-assets/logo-colored.png" height=50px/></a>
|
||||
<h1 align="center">가볍고 다재다능한 그래픽 라이브러리</h1>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div align="center">
|
||||
<img src="https://github.com/user-attachments/assets/965e8b8b-d240-45ed-9744-bdd81785967d" height="220" alt="벡터 그래픽을 사용한 전기 자전거 데모">
|
||||
|
||||
<img src="https://github.com/user-attachments/assets/d83820ed-5448-494e-94c8-3ca1b4ddceb0" height="220" alt="애니메이션 3D 모델을 사용한 ECG 데모">
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<p align="center">
|
||||
<a href="#overview" title="LVGL이란">개요</a> •
|
||||
<a href="#features" title="LVGL로 할 수 있는 것">기능</a> •
|
||||
<a href="#lvgl-pro" title="전문 툴체인">LVGL Pro</a> •
|
||||
<a href="#examples" title="C 및 XML 예제">예제</a> •
|
||||
<a href="#integration" title="LVGL을 프로젝트에 추가하는 방법">통합</a> •
|
||||
<a href="#contributing" title="참여하는 방법">기여</a> •
|
||||
<a href="#license" title="라이선스 조건">라이선스</a>
|
||||
</p>
|
||||
|
||||
<a id="overview"></a>
|
||||
## 개요
|
||||
|
||||
**LVGL**은 어떤 벤더의 어떤 MCU 및 MPU에서든, 어떤 플랫폼에서든 그래픽 사용자 인터페이스를
|
||||
만들 수 있게 해주는 무료 오픈소스 UI 라이브러리입니다.
|
||||
|
||||
**요구 사항**: LVGL은 외부 의존성이 없어서 소형 MCU부터 3D를 지원하는 멀티코어 리눅스 기반 MPU까지
|
||||
어떤 최신 타깃이든 손쉽게 컴파일할 수 있습니다. *일반적인* UI의 경우 약 100kB RAM,
|
||||
약 200~300kB 플래시, 그리고 렌더링을 위한 화면의 1/10 크기 버퍼만 있으면 됩니다.
|
||||
|
||||
**광범위한 채택**: 칩 벤더(NXP, Espressif, Renesas 등), RTOS 프로젝트(Zephyr, NuttX 등),
|
||||
그리고 보드 제조사(Riverdi, Seeed Studio, VIEWE, Elecrow 등)가 모두 이미 LVGL을 통합했습니다. 개발 보드에 디스플레이가 있다면
|
||||
그 벤더가 LVGL 지원도 제공할 가능성이 매우 높습니다.
|
||||
|
||||
**전문 도구**: C 코드를 작성하는 대신, Editor, Figma 통합, Online Viewer, CLI를 갖춘 완전한 툴킷인 [LVGL Pro](#lvgl-pro)를 사용하면 UI 개발을 크게 가속하고 단순화할 수 있습니다. 추가 런타임이나 숨겨진 마법 없이 XML에서 순수 LVGL C 코드를 내보냅니다. 비상업적 용도와 평가용으로는 무료입니다.
|
||||
|
||||
**시작하려면** [예제](#examples)를 둘러보고, [시뮬레이터 프로젝트](https://lvgl.io/docs/open/integration/pc)를 실행해 보고, LVGL Pro의 [Online Viewer](https://viewer.lvgl.io/)를 탐색하고, [LVGL Pro](https://lvgl.io/docs/pro/integration/simulator)에서 클릭 한 번으로 UI를 창에서 컴파일하고 실행해 보거나, AI 지원 [문서](https://lvgl.io/docs/open)를 살펴보세요. [**Ask AI**](https://lvgl.io/docs/open)를 클릭해서
|
||||
무엇이든 물어보세요!
|
||||
|
||||
<a id="features"></a>
|
||||
## 기능
|
||||
|
||||
**무료, 이식 가능, 확장 가능**
|
||||
- 외부 의존성이 없는 완전히 이식 가능한 C(C++ 호환) 라이브러리입니다.
|
||||
- 어떤 (RT)OS든 사용하여 어떤 MCU 또는 MPU에서든 컴파일할 수 있습니다. Make, CMake, 그리고 간단한 globbing이 모두 지원됩니다.
|
||||
- 흑백, ePaper, OLED, TFT 디스플레이, 심지어 모니터까지 지원합니다. [디스플레이](https://lvgl.io/docs/open/main-modules/display)
|
||||
- MIT 라이선스로 배포되므로 상업 프로젝트에서도 손쉽게 사용할 수 있습니다.
|
||||
- 최소한으로는 32kB RAM과 128kB 플래시, 프레임 버퍼, 그리고 렌더링을 위한 최소 1/10 화면 크기 버퍼만 필요합니다.
|
||||
- OS, 외부 메모리, GPU는 지원되지만 필수는 아닙니다.
|
||||
|
||||
**위젯, 스타일, 레이아웃 등**
|
||||
- 30개 이상의 내장 [위젯](https://lvgl.io/docs/open/widgets): Button, Label, Slider, Chart, Keyboard, Meter, Arc, Table 등 다수.
|
||||
- 어떤 상태에서든 위젯의 모든 부분을 커스터마이징할 수 있는 100개 이상의 스타일 속성을 갖춘 유연한 [스타일 시스템](https://lvgl.io/docs/open/common-widget-features/styles).
|
||||
- 위젯의 크기와 위치를 반응형으로 자동 조정하는 [Flexbox](https://lvgl.io/docs/open/common-widget-features/layouts/flex) 및 [Grid](https://lvgl.io/docs/open/common-widget-features/layouts/grid) 유사 레이아웃 엔진.
|
||||
- UI를 애플리케이션과 손쉽게 연결하는 [데이터 바인딩](https://lvgl.io/docs/open/main-modules/observer).
|
||||
- Mouse, Touchpad, Keypad, Keyboard, 외부 버튼, Encoder [입력 장치](https://lvgl.io/docs/open/main-modules/indev)를 지원합니다.
|
||||
- [다중 디스플레이](https://lvgl.io/docs/open/main-modules/display/overview#how-many-displays-can-lvgl-use) 지원.
|
||||
|
||||
**렌더링**
|
||||
- 기본 도형, 그라디언트, 안티앨리어싱, 불투명도, 부드러운 스크롤, 박스 및 드롭 섀도, 이미지 변환 등을 지원하는 내장 2D 렌더링 엔진.
|
||||
- OpenGL로 [glTF 모델](https://sketchfab.com/)을 표시하는 [강력한 3D 렌더링 엔진](https://lvgl.io/docs/open/libs/gltf).
|
||||
- 벡터 그래픽, SVG, Lottie 지원.
|
||||
- 텍스트는 UTF-8 인코딩으로 렌더링되며, CJK, 태국어, 힌디어, 아랍어, 페르시아어 문자 체계를 지원합니다.
|
||||
- VG-Lite, Dave2D, NeoChrome, OpenGL 등 GPU에 대한 내장 지원.
|
||||
|
||||
<a id="lvgl-pro"></a>
|
||||
## LVGL Pro
|
||||
|
||||
C로 UI를 만드는 것도 잘 작동하지만, 프로젝트가 커질수록 반복 작업이 느려지고 일관성을 유지하기가 어려워집니다.
|
||||
[LVGL Pro](https://lvgl.io/pro)를 사용하면 재사용 가능한 컴포넌트와 화면을 시각적으로 만들고, 변경 사항을
|
||||
즉시 미리 보고, 데이터 바인딩, 번역, 애니메이션, 테스트를 한곳에서 관리할 수 있습니다.
|
||||
|
||||
Pro는 평범한 LVGL C 코드를 내보냅니다. 이미 사용 중인 바로 그 LVGL이며, 추가 런타임이나 의존성이 없습니다. 빌드하거나
|
||||
배포하는 방식을 바꾸지 않고도 기존 프로젝트에 그대로 들어갑니다.
|
||||
|
||||
<p align="center">
|
||||
<img height="500" alt="실시간 미리 보기와 함께 LVGL Pro 에디터에서 UI 구축하기" src="https://github.com/user-attachments/assets/8cef0f05-0ff1-4766-8dfd-1d15e47f181a" />
|
||||
</p>
|
||||
|
||||
아무것도 설치하지 않고 브라우저에서 [viewer.lvgl.io](https://viewer.lvgl.io)로 사용해 보거나,
|
||||
[Editor를 다운로드](https://lvgl.io/pro#download)하여 무료 Community 라이선스로 사용할 수 있습니다.
|
||||
|
||||
LVGL Pro는 긴밀하게 연관된 네 가지 도구로 구성됩니다:
|
||||
|
||||
1. **Editor**: LVGL Pro의 핵심. XML로 컴포넌트와 화면을 만들고 데이터 바인딩, 번역, 애니메이션, 테스트 등을 관리하는 데스크톱 앱입니다. [XML 형식](https://lvgl.io/docs/pro/syntax)과 [위젯](https://lvgl.io/docs/pro/built_in_widgets)에 대해 자세히 알아보세요.
|
||||
2. **Online Viewer**: 브라우저에서 Editor를 실행하고, GitHub 프로젝트를 열고, 개발 환경을 설정하지 않고도 손쉽게 공유하세요. [https://viewer.lvgl.io](https://viewer.lvgl.io)를 방문하세요.
|
||||
3. **Figma 플러그인**: 클릭 한 번으로 Figma 디자인을 LVGL Pro로 옮기세요. 작동 방식은 [여기](https://lvgl.io/docs/pro/figma)에서 확인하세요.
|
||||
4. **CLI 도구**: C 코드를 생성하고 CI/CD에서 테스트를 실행하세요. 자세한 내용은 [여기](https://lvgl.io/docs/pro/cli)를 참조하세요.
|
||||
|
||||
Community 및 Evaluation 등급은 무료로 사용할 수 있으며, 상업적 사용에 대해서는 [라이선스](#license)를 참조하세요.
|
||||
|
||||
<a id="examples"></a>
|
||||
## 예제
|
||||
|
||||
https://lvgl.io/docs/open/examples 에서 100개가 넘는 C 및 XML 예제를 확인할 수 있습니다.
|
||||
|
||||
LVGL Pro의 [Online Viewer](https://viewer.lvgl.io/)에도 많은 튜토리얼과 함께 인터랙티브하게 다뤄볼 수 있는 동일한 예제들이 포함되어 있습니다.
|
||||
|
||||
맛보기로, 동일한 간단한 UI를 C와 XML로 작성한 예를 보여드립니다:
|
||||
|
||||
<p align="center">
|
||||
<img width="311" height="232" alt="클릭하면 출력하는 가운데 정렬된 버튼" src="https://github.com/user-attachments/assets/5948b485-e3f7-4a63-bb21-984381417c4a" />
|
||||
</p>
|
||||
|
||||
<!-- GitHub renders fenced code blocks inside table cells, so this shows C and XML side by side. -->
|
||||
<table>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
|
||||
```c
|
||||
static void button_clicked_cb(lv_event_t * e)
|
||||
{
|
||||
printf("Clicked\n");
|
||||
}
|
||||
|
||||
/* ... */
|
||||
|
||||
lv_obj_t * button = lv_button_create(lv_screen_active());
|
||||
lv_obj_center(button);
|
||||
lv_obj_add_event_cb(button, button_clicked_cb,
|
||||
LV_EVENT_CLICKED, NULL);
|
||||
|
||||
lv_obj_t * label = lv_label_create(button);
|
||||
lv_label_set_text(label, "Hello from LVGL!");
|
||||
```
|
||||
|
||||
</td>
|
||||
<td width="50%">
|
||||
|
||||
```xml
|
||||
<screen>
|
||||
<view>
|
||||
<lv_button align="center">
|
||||
<event_cb callback="button_clicked_cb" />
|
||||
<lv_label text="Hello from LVGL!" />
|
||||
</lv_button>
|
||||
</view>
|
||||
</screen>
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
위의 XML은 [LVGL Pro](#lvgl-pro)가 다루는 것입니다: 화면을 시각적으로 만들면 Pro가 C 코드를 생성해 줍니다.
|
||||
|
||||
<a id="integration"></a>
|
||||
## 통합
|
||||
|
||||
LVGL은 외부 의존성이 없어서 어떤 장치에서든 손쉽게 컴파일할 수 있습니다. 내장 드라이버가 함께 제공되고,
|
||||
많은 패키지 관리자와 RTOS에서 이용할 수 있으며, 새로운 장치에 포팅하기도 쉽습니다.
|
||||
|
||||
### 사전 통합됨
|
||||
|
||||
- **칩 벤더**: [ESP32](https://components.espressif.com/components/lvgl/lvgl), [NXP MCUXpresso 컴포넌트](https://www.nxp.com/design/software/embedded-software/lvgl-open-source-graphics-library:LITTLEVGL-OPEN-SOURCE-GRAPHICS-LIBRARY), [Renesas FSP](https://lvgl.io/docs/open/integration/chip/renesas), [STM32](https://lvgl.io/docs/open/integration/chip/stm32)
|
||||
|
||||
- **RTOS**: [Zephyr](https://lvgl.io/docs/open/integration/os/zephyr), [NuttX](https://lvgl.io/docs/open/integration/os/nuttx), [RT-Thread](https://lvgl.io/docs/open/integration/os/rt-thread)
|
||||
|
||||
- **프레임워크**: [Arduino](https://lvgl.io/docs/open/integration/framework/arduino), [PlatformIO](https://registry.platformio.org/libraries/lvgl/lvgl), [CMSIS-Pack](https://lvgl.io/docs/open/integration/framework/cmsis-pack)
|
||||
|
||||
- **보드 제조사**: [Seeed Studio](https://www.seeedstudio.com), [Elecrow](https://www.elecrow.com/display/esp-hmi-display.html), [Riverdi](https://lvgl.io/docs/open/integration/boards/manufacturers/riverdi), [VIEWE](https://lvgl.io/docs/open/integration/boards/manufacturers/viewe), 그리고 [그 외 다수](https://lvgl.io/boards)
|
||||
|
||||
### 내장 드라이버
|
||||
LVGL은 바로 사용할 수 있는 드라이버와 함께 제공되므로, 일반적인 플랫폼에서는 디스플레이와 입력 처리를 직접 작성할 필요가 없습니다:
|
||||
|
||||
- **시뮬레이터 / 데스크톱**: PC에서 UI를 개발하고 미리 볼 수 있는 [SDL](https://lvgl.io/docs/open/integration/pc/sdl), X11, [Wayland](https://lvgl.io/docs/open/integration/embedded_linux/drivers/wayland) 창.
|
||||
- **디스플레이 컨트롤러**: 범용 MIPI-DBI/SPI LCD([ILI9341](https://lvgl.io/docs/open/integration/external_display_controllers/ili9341), ST7789 및 유사 제품)와 ST의 [LTDC](https://lvgl.io/docs/open/integration/chip_vendors/stm32/ltdc), NXP의 [eLCDIF](https://lvgl.io/docs/open/integration/chip_vendors/nxp/elcdif) 같은 벤더 컨트롤러.
|
||||
- **임베디드 리눅스**: 프레임버퍼(fbdev), DRM/KMS, Wayland, 그리고 터치 및 포인터 입력을 위한 `libinput`/`evdev`. 자세한 내용은 [여기](https://lvgl.io/docs/open/integration/embedded_linux)에서 확인하세요.
|
||||
- **GPU / 가속기**: VG-Lite, NXP PXP, ThinkSilicon NemaGFX, Arm-2D, 그리고 [OpenGL ES](https://lvgl.io/docs/open/integration/embedded_linux/drivers/opengl_driver)
|
||||
|
||||
전체 목록과 설정 가이드는 [통합 문서](https://lvgl.io/docs/open/integration)에서 확인하세요.
|
||||
|
||||
### LVGL Pro에서
|
||||
|
||||
LVGL Pro에서는 클릭 한 번으로 바로 사용할 수 있는 UI 전용, VSCode, Zephyr, Linux 프로젝트를 만들 수 있습니다.
|
||||
<img width="600" alt="image" src="https://github.com/user-attachments/assets/5aadb850-6b40-49d1-ba96-2296041c7e27" />
|
||||
|
||||
### 수동으로 포팅하기
|
||||
|
||||
LVGL 통합은 매우 간단합니다. 어떤 프로젝트에든 넣고 다른 파일을 컴파일하듯이 컴파일하기만 하면 됩니다.
|
||||
LVGL을 구성하려면 `lv_conf_template.h`를 `lv_conf.h`로 복사하고, 첫 번째 `#if 0`을 활성화한 뒤, 필요에 따라 구성을 조정하세요.
|
||||
(기본 구성으로도 대개 충분합니다.) 가능한 경우 LVGL은 Kconfig와 함께 사용할 수도 있습니다.
|
||||
|
||||
프로젝트에 넣은 후에는 다음과 같이 LVGL을 초기화하고 디스플레이 및 입력 장치를 생성할 수 있습니다:
|
||||
|
||||
```c
|
||||
#include "lvgl/lvgl.h" /*Define LV_LVGL_H_INCLUDE_SIMPLE to include as "lvgl.h"*/
|
||||
|
||||
#define TFT_HOR_RES 320
|
||||
#define TFT_VER_RES 240
|
||||
|
||||
static uint32_t my_tick_cb(void)
|
||||
{
|
||||
return my_get_millisec();
|
||||
}
|
||||
|
||||
static void my_flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
|
||||
{
|
||||
/*Write px_map to the area->x1, area->x2, area->y1, area->y2 area of the
|
||||
*frame buffer or external display controller. */
|
||||
|
||||
/* signal LVGL that we're done */
|
||||
lv_display_flush_ready(disp);
|
||||
}
|
||||
|
||||
static void my_touch_read_cb(lv_indev_t * indev, lv_indev_data_t * data)
|
||||
{
|
||||
if(my_touch_is_pressed()) {
|
||||
data->point.x = touchpad_x;
|
||||
data->point.y = touchpad_y;
|
||||
data->state = LV_INDEV_STATE_PRESSED;
|
||||
} else {
|
||||
data->state = LV_INDEV_STATE_RELEASED;
|
||||
}
|
||||
}
|
||||
|
||||
void main(void)
|
||||
{
|
||||
my_hardware_init();
|
||||
|
||||
/*Initialize LVGL*/
|
||||
lv_init();
|
||||
|
||||
/*Set millisecond-based tick source for LVGL so that it can track time.*/
|
||||
lv_tick_set_cb(my_tick_cb);
|
||||
|
||||
/*Create a display where screens and widgets can be added*/
|
||||
lv_display_t * display = lv_display_create(TFT_HOR_RES, TFT_VER_RES);
|
||||
|
||||
/*Add rendering buffers to the screen.
|
||||
*Here adding a smaller partial buffer assuming 16-bit (RGB565 color format)*/
|
||||
static uint8_t buf[TFT_HOR_RES * TFT_VER_RES / 10 * 2]; /* x2 because of 16-bit color depth */
|
||||
lv_display_set_buffers(display, buf, NULL, sizeof(buf), LV_DISPLAY_RENDER_MODE_PARTIAL);
|
||||
|
||||
/*Add a callback that can flush the content from `buf` when it has been rendered*/
|
||||
lv_display_set_flush_cb(display, my_flush_cb);
|
||||
|
||||
/*Create an input device for touch handling*/
|
||||
lv_indev_t * indev = lv_indev_create();
|
||||
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
|
||||
lv_indev_set_read_cb(indev, my_touch_read_cb);
|
||||
|
||||
/*The drivers are in place; now we can create the UI*/
|
||||
lv_obj_t * label = lv_label_create(lv_screen_active());
|
||||
lv_label_set_text(label, "Hello world");
|
||||
lv_obj_center(label);
|
||||
|
||||
/*Execute the LVGL-related tasks in a loop*/
|
||||
while(1) {
|
||||
lv_timer_handler();
|
||||
my_sleep_ms(5); /*Wait a little to let the system breathe*/
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<a id="contributing"></a>
|
||||
## 기여
|
||||
|
||||
LVGL은 열린 프로젝트이며, 기여를 매우 환영합니다. 단순히 여러분의 프로젝트에 대해 이야기하는 것부터, 예제를 작성하고, 문서를 개선하고, 버그를 수정하거나, 심지어 LVGL 조직 아래에 여러분의 프로젝트를 호스팅하는 것까지, 기여할 수 있는 방법은 많습니다.
|
||||
|
||||
기여 기회에 대한 자세한 설명은 문서의 [기여](https://lvgl.io/docs/open/contributing)
|
||||
섹션을 방문하세요.
|
||||
|
||||
이미 수백 명의 사람들이 LVGL에 자취를 남겼습니다. 여러분도 그중 한 명이 되세요! 여기서 만나요! 🙂
|
||||
|
||||
|
||||
<a id="license"></a>
|
||||
## 라이선스
|
||||
|
||||
LVGL 라이브러리는 **MIT 라이선스**로 배포되므로, 로열티 없이 오픈소스 및 상업 제품 모두에서
|
||||
자유롭게 사용할 수 있습니다. [`LICENCE.txt`](../LICENCE.txt)를 참조하세요.
|
||||
|
||||
LVGL과 함께 번들로 제공되는 모든 서드파티 라이브러리도 MIT 호환 라이선스로 배포되므로,
|
||||
LVGL과 그 의존성을 안심하고 사용할 수 있습니다.
|
||||
|
||||
**[LVGL Pro](https://lvgl.io/pro)**는 별도의 라이선스를 적용합니다:
|
||||
- **Community** 및 **Evaluation** 등급은 **비상업적 용도로 무료**이며, 학습, 취미 프로젝트,
|
||||
도구 평가에 완벽합니다.
|
||||
- LVGL Pro의 상업적 사용에는 유료 라이선스가 필요합니다. [가격 및 상세 정보](https://lvgl.io/pro#pricing)를 참조하세요.
|
||||
+201
-275
File diff suppressed because it is too large
Load Diff
+192
-273
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Reference in New Issue
Block a user