https://github.com/lvgl/lvgl Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Security Find and fix vulnerabilities + Codespaces Instant dev environments + GitHub Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions By size + Enterprise + Teams + Startups By industry + Healthcare + Financial services + Manufacturing By use case + CI/CD & Automation + DevOps + DevSecOps * Resources Topics + AI + DevOps + Security + Software Development + View all Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} lvgl / lvgl Public * * Notifications You must be signed in to change notification settings * Fork 3.2k * Star 16.3k Embedded graphics library to create beautiful UIs for any MCU, MPU and display type. lvgl.io License MIT license 16.3k stars 3.2k forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 78 * Pull requests 50 * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Projects * Security * Insights lvgl/lvgl This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. master BranchesTags Go to file Code Folders and files Last commit Last Name Name message commit date Latest commit History 10,506 Commits .devcontainer .devcontainer .github .github demos demos docs docs env_support env_support examples examples scripts scripts src src tests tests zephyr zephyr .gitignore .gitignore .pre-commit-config.yaml .pre-commit-config.yaml .typos.toml .typos.toml CMakeLists.txt CMakeLists.txt CMakePresets.json CMakePresets.json Kconfig Kconfig LICENCE.txt LICENCE.txt README.md README.md SConscript SConscript component.mk component.mk idf_component.yml idf_component.yml library.json library.json library.properties library.properties lv_conf_template.h lv_conf_template.h lv_version.h lv_version.h lv_version.h.in lv_version.h.in lvgl.h lvgl.h lvgl.mk lvgl.mk lvgl.pc.in lvgl.pc.in View all files Repository files navigation * README * MIT license [6874747073] English | Zhong Wen | Portugues do Brasil | Ri Ben Yu [68747470733a2f2f6c76676c2e696f2f676974687] Light and Versatile Graphics Library [6874747073] [6874747073] Website | Docs | Forum | Demos | Services Overview Mature and Well-known LVGL is the most popular free and open source embedded graphics library to create beautiful UIs for any MCU, MPU and display type. It's supported by industry leading vendors and projects like Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit and many more. Feature Rich It has all the features to create modern and beautiful GUIs: 30+ built-in widgets, a powerful style system, web inspired layout managers, and a typography system supporting many languages. To integrate LVGL into your platform, all you need is at least 32kB RAM and 128 kB Flash, a C compiler, a frame buffer, and at least an 1/10 screen sized buffer for rendering. Services Our team is ready to help you with graphics design, UI implementation and consulting services. Contact us if you need some support during the development of your next GUI project. Features Free and Portable * A fully portable C (C++ compatible) library with no external dependencies. * Can be compiled to any MCU or MPU, with any (RT)OS. * Supports monochrome, ePaper, OLED or TFT displays, or even monitors. Porting Guide * Distributed under the MIT license, so you can easily use it in commercial projects too. * Needs only 32kB RAM and 128 kB Flash, a frame buffer, and at least an 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: Button, Label, Slider, Chart, Keyboard, Meter, Arc, Table and many more. * Flexible Style system with ~100 style properties to customize any part of the widgets in any state. * Flexbox and Grid-like layouts engines to automatically size and position the widgets in a responsive way. * Texts are rendered with UTF-8 encoding supporting CJK, Thai, Hindi, Arabic, Persian writing systems. * Word wrapping, kerning, text scrolling, sub-pixel rendering, Pinyin-IME Chinese input, Emojis in texts. * Rendering engine supporting animations, anti-aliasing, opacity, smooth scrolling, shadows, image transformation, etc * Supports Mouse, Touchpad, Keypad, Keyboard, External buttons, Encoder Input devices. * Multiple display support. Binding and Build Support * MicroPython Binding exposes LVGL API * PikaScript Binding python on MCU lighter and easier. * No custom build system is used. You can build LVGL as you build the other files of your project. * Support for Make and CMake is included out of the box. * Develop on PC and use the same UI code on embedded hardware. * Convert the C UI code to HTML file with our Emscripten port. Docs, Tools, and Services * Detailed Documentation with 100+ simple examples * Services such as User interface design, Implementation and Consulting to make UI development simpler and faster. [?] Sponsor If LVGL saved you a lot of time and money or you just had fun using it, consider Supporting its Development. How do we spend the donations? Our goal is to provide financial compensation for people who do the most for LVGL. It means not only the maintainers but anyone who implements a great feature should get a payment from the accumulated money. We use the donations to cover our operational costs like servers and related services. How to donate? We use GitHub Sponsors where you can easily send one time or recurring donations. You can also see all of our expenses in a transparent way. How to get paid for your contribution? If someone implements or fixes an issue labeled as Sponsored he or she will get a payment for that work. We estimate the required time, complexity and importance of the issue and set a price accordingly. To jump in just comment on a Sponsored issue saying "Hi, I'd like to deal with it. This is how I'm planning to fix/implement it...". A work is considered ready when it's approved and merged by a maintainer. After that you can submit and expense at opencollective.com and you will receive the payment in a few days. Organizations supporting LVGL Sponsors of LVGL Individuals supporting LVGL Backers of LVGL Packages LVGL is available as: * Arduino library * PlatformIO package * Zephyr library * ESP-IDF(ESP32) component * NXP MCUXpresso component * NuttX library * RT-Thread RTOS * CMSIS-Pack * RIOT OS package Examples See some examples of creating widgets, using layouts and applying styles. You will find C and MicroPython code, and links to try out or edit the examples in an online MicroPython editor. For more examples check out the Examples folder. Hello world label Simple Hello world label example in LVGL C code /*Change the active screen's background color*/ lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN); /*Create a white label, set its text and align it to the center*/ lv_obj_t * label = lv_label_create(lv_screen_active()); lv_label_set_text(label, "Hello world"); lv_obj_set_style_text_color(label, lv_color_hex(0xffffff), LV_PART_MAIN); lv_obj_align(label, LV_ALIGN_CENTER, 0, 0); MicroPython code | Online Simulator # 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) Button with Click Event LVGL button with label example C code 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"); } MicroPython code | Online Simulator 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() Checkboxes with Layout Checkboxes with layout in LVGL C code 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); MicroPython code | Online Simulator 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) Styling a Slider Styling a slider with LVGL C code lv_obj_t * slider = lv_slider_create(lv_screen_active()); lv_slider_set_value(slider, 70, LV_ANIM_OFF); lv_obj_set_size(slider, 300, 20); lv_obj_center(slider); /*Add local styles to MAIN part (background rectangle)*/ lv_obj_set_style_bg_color(slider, lv_color_hex(0x0F1215), LV_PART_MAIN); lv_obj_set_style_bg_opa(slider, 255, LV_PART_MAIN); lv_obj_set_style_border_color(slider, lv_color_hex(0x333943), LV_PART_MAIN); lv_obj_set_style_border_width(slider, 5, LV_PART_MAIN); lv_obj_set_style_pad_all(slider, 5, LV_PART_MAIN); /*Create a reusable style sheet for the INDICATOR part*/ static lv_style_t style_indicator; lv_style_init(&style_indicator); lv_style_set_bg_color(&style_indicator, lv_color_hex(0x37B9F5)); lv_style_set_bg_grad_color(&style_indicator, lv_color_hex(0x1464F0)); lv_style_set_bg_grad_dir(&style_indicator, LV_GRAD_DIR_HOR); lv_style_set_shadow_color(&style_indicator, lv_color_hex(0x37B9F5)); lv_style_set_shadow_width(&style_indicator, 15); lv_style_set_shadow_spread(&style_indicator, 5); 4 /*Add the style sheet to the slider's INDICATOR part*/ lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR); /*Add the same style to the KNOB part too and locally overwrite some properties*/ lv_obj_add_style(slider, &style_indicator, LV_PART_KNOB); lv_obj_set_style_outline_color(slider, lv_color_hex(0x0096FF), LV_PART_KNOB); lv_obj_set_style_outline_width(slider, 3, LV_PART_KNOB); lv_obj_set_style_outline_pad(slider, -5, LV_PART_KNOB); lv_obj_set_style_shadow_spread(slider, 2, LV_PART_KNOB); MicroPython code | Online Simulator # 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) English, Hebrew (mixed LTR-RTL) and Chinese texts English, Hebrew and Chinese texts with LVGL C code 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,"m`bd, v bshmv hml ykhydt `ybvd mrkzyt (bnglyt: 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, "Qian Ru Shi Xi Tong (Embedded System),\nShi Yi Chong Qian Ru Ji Jie Huo Dian Qi Xi Tong Nei Bu , Ju You Zhuan Yi Gong Neng He Shi Shi Ji Suan Xing Neng De Ji Suan Ji Xi Tong . "); lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0); lv_obj_set_width(cz_label, 310); lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5); MicroPython code | Online Simulator 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("m`bd, v bshmv hml ykhydt `ybvd mrkzyt (bnglyt: 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("Qian Ru Shi Xi Tong (Embedded System),\nShi Yi Chong Qian Ru Ji Jie Huo Dian Qi Xi Tong Nei Bu , Ju You Zhuan Yi Gong Neng He Shi Shi Ji Suan Xing Neng De Ji Suan Ji Xi Tong . ") cz_label.set_width(310) cz_label.align(lv.ALIGN.BOTTOM_LEFT, 5, -5) >[?] Get started This list will guide you to get started with LVGL step-by-step. Get Familiar with LVGL 1. Check the Online demos to see LVGL in action (3 minutes) 2. Read the Introduction page of the documentation (5 minutes) 3. Get familiar with the basics on the Quick overview page (15 minutes) Start to Use LVGL 4. Set up a Simulator (10 minutes) 5. Try out some Examples 6. Port LVGL to a board. See the Porting guide or check the ready to use Projects Become a Pro 7. Read the Overview page to get a better understanding of the library (2-3 hours) 8. Check the documentation of the Widgets to see their features and usage Get Help and Help Others 9. If you have questions go to the Forum 10. Read the Contributing guide to see how you can help to improve LVGL (15 minutes) Services LVGL LLC was established to provide a solid background for LVGL library and to offer several type of services to help you in UI development. With 15+ years of experience in the user interface and graphics industry we can help you the bring your UI to the next level. * Graphics design Our in-house graphics designers are experts in creating beautiful modern designs which fit to your product and the resources of your hardware. * UI implementation We can also implement your UI based on the design you or we have created. You can be sure that we will make the most out 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 can support you with consulting as well to avoid pricey and time consuming mistakes during the UI development. * Board certification For companies who are offering development boards, or production ready kits we do board certification which shows how board can run LVGL. Check out our Demos as reference. For more information take look at the Services page. Contact us and tell how we can help. Contributing LVGL is an open project and contribution is very welcome. There are many ways to contribute from simply speaking about your project, through 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 section of the documentation. More than 300 people already left their fingerprint in LVGL. Be one them! See you here! [6874747073] ... and many other. About Embedded graphics library to create beautiful UIs for any MCU, MPU and display type. lvgl.io Topics c gui microcontroller embedded graphics tft mcu Resources Readme License MIT license Activity Custom properties Stars 16.3k stars Watchers 303 watching Forks 3.2k forks Report repository Releases 64 Release v9.2.0 Latest Aug 26, 2024 + 63 releases Sponsor this project Sponsor Learn more about GitHub Sponsors Contributors 482 * @kisvegabor * @embeddedt * @github-actions[bot] * @FASTSHIFT * @XuNeo * @W-Mai * @xiaoxiang781216 * @amirgon * @xennex22 * @C47D * @BrianPugh * @GorgonMeducer * @bjsylvia * @guoweilkd + 468 contributors Languages * C 90.1% * C++ 8.4% * Python 1.1% * Assembly 0.2% * CMake 0.1% * Ruby 0.1% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.