lvgl

Bahasa Inggris | 中文 | Portugis dan Brasil | 日本語

Perpustakaan Grafis Ringan dan Serbaguna

Situs web | Dokumen | Forum | Demo | Layanan

? Ringkasan

Dewasa dan Terkenal
LVGL adalah pustaka grafis tertanam sumber terbuka dan gratis paling populer untuk membuat UI cantik untuk semua MCU, MPU, dan jenis tampilan. Ini didukung oleh vendor dan proyek industri terkemuka seperti Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit dan banyak lagi.

Kaya Fitur
Ia memiliki semua fitur untuk membuat GUI yang modern dan indah: 30+ widget bawaan, sistem gaya yang kuat, pengelola tata letak yang terinspirasi web, dan sistem tipografi yang mendukung banyak bahasa. Untuk mengintegrasikan LVGL ke dalam platform Anda, yang Anda butuhkan hanyalah RAM 32kB dan Flash 128 kB, kompiler C, buffer bingkai, dan setidaknya buffer berukuran 1/10 layar untuk rendering.

Layanan
Tim kami siap membantu Anda dengan desain grafis, implementasi UI, dan layanan konsultasi. Hubungi kami jika Anda memerlukan dukungan selama pengembangan proyek GUI Anda berikutnya.

Fitur

Gratis dan Portabel

• Pustaka C (kompatibel dengan C++) yang sepenuhnya portabel tanpa ketergantungan eksternal.
• Dapat dikompilasi ke MCU atau MPU apa pun, dengan OS (RT) apa pun.
• Mendukung tampilan monokrom, ePaper, OLED atau TFT, atau bahkan monitor. Menampilkan
• Didistribusikan di bawah lisensi MIT, sehingga Anda juga dapat dengan mudah menggunakannya dalam proyek komersial.
• Hanya memerlukan RAM 32kB dan Flash 128 kB, buffer bingkai, dan setidaknya buffer berukuran 1/10 layar untuk rendering.
• OS, Memori eksternal, dan GPU didukung tetapi tidak diperlukan.

Widget, Gaya, Tata Letak, dan lainnya

• 30+ Widget bawaan: Tombol, Label, Slider, Bagan, Keyboard, Meteran, Busur, Tabel, dan banyak lagi.
• Sistem Gaya Fleksibel dengan ~100 properti gaya untuk menyesuaikan bagian mana pun dari widget di negara bagian mana pun.
• Mesin tata letak Flexbox dan Grid-like untuk secara otomatis mengukur dan memposisikan widget dengan cara yang responsif.
• Teks diterjemahkan dengan pengkodean UTF-8 yang mendukung sistem penulisan CJK, Thailand, Hindi, Arab, Persia.
• Pembungkusan kata, kerning, pengguliran teks, rendering subpiksel, masukan Pinyin-IME berbahasa Mandarin, Emoji dalam teks.
• Mesin rendering yang mendukung animasi, anti-aliasing, opacity, scrolling halus, bayangan, transformasi gambar, dll
• Mendukung Mouse, Touchpad, Keypad, Keyboard, tombol Eksternal, perangkat Input Encoder.
• Dukungan beberapa tampilan.

Mengikat dan Membangun Dukungan

• Pengikatan MicroPython memperlihatkan API LVGL
• PikaScript Binding python di MCU lebih ringan dan mudah.
• Tidak ada sistem build khusus yang digunakan. Anda dapat membangun LVGL saat Anda membuat file lain dari proyek Anda.
• Dukungan untuk Make dan CMake sudah disertakan.
• Kembangkan di PC dan gunakan kode UI yang sama pada perangkat keras tertanam.
• Konversikan kode C UI ke file HTML dengan port Emscripten kami.

Dokumen, Alat, dan Layanan

• Dokumentasi Terperinci dengan 100+ contoh sederhana
• Layanan seperti desain antarmuka pengguna, Implementasi dan Konsultasi untuk membuat pengembangan UI lebih sederhana dan cepat.

❤️ Sponsor

Jika LVGL menghemat banyak waktu dan uang atau Anda hanya bersenang-senang menggunakannya, pertimbangkan untuk Mendukung Pengembangannya.

Bagaimana kita membelanjakan donasinya?
Tujuan kami adalah memberikan kompensasi finansial bagi orang-orang yang melakukan yang terbaik untuk LVGL. Artinya, tidak hanya pengelolanya saja, namun siapa pun yang mengimplementasikan fitur hebat harus mendapatkan pembayaran dari akumulasi uang. Kami menggunakan donasi untuk menutupi biaya operasional kami seperti server dan layanan terkait.

Bagaimana cara berdonasi?
Kami menggunakan Sponsor GitHub di mana Anda dapat dengan mudah mengirimkan donasi satu kali atau berulang. Anda juga dapat melihat semua pengeluaran kami secara transparan.

Bagaimana cara mendapatkan bayaran atas kontribusi Anda?
Jika seseorang menerapkan atau memperbaiki masalah yang berlabel Disponsori, dia akan mendapatkan pembayaran untuk pekerjaan tersebut. Kami memperkirakan waktu yang dibutuhkan, kompleksitas dan pentingnya masalah tersebut dan menetapkan harga yang sesuai. Untuk ikut serta, cukup komentari masalah Bersponsor dengan mengatakan "Hai, saya ingin menanganinya. Beginilah rencana saya untuk memperbaiki/menerapkannya...". Sebuah karya dianggap siap jika disetujui dan digabungkan oleh pengelola. Setelah itu Anda dapat mengirimkan dan mengeluarkan biaya di opencollective.com dan Anda akan menerima pembayaran dalam beberapa hari.

Organisasi yang mendukung LVGL

Individu yang mendukung LVGL

? Paket

LVGL tersedia sebagai:

• perpustakaan Arduino
• Paket PlatformIO
• Perpustakaan Zephyr
• Komponen ESP-IDF(ESP32).
• Komponen NXP MCUXpresso
• Perpustakaan NuttX
• RT-Benang RTOS
• Paket CMSIS
• Paket RIOTOS

? Contoh

Lihat beberapa contoh pembuatan widget, penggunaan tata letak, dan penerapan gaya. Anda akan menemukan kode C dan MicroPython, serta tautan untuk mencoba atau mengedit contoh di editor MicroPython online.

Untuk contoh lebih lanjut, lihat folder Contoh.

Halo label dunia

kode C

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

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

Kode MicroPython | Simulator Daring

 # 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 )

Tombol dengan Acara Klik

kode C

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

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

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

Kode MicroPython | Simulator Daring

 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 ()

Kotak centang dengan Tata Letak

kode C

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

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

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

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

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

Kode MicroPython | Simulator Daring

 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 )

Menata Slider

kode C

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

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

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

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

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

Kode MicroPython | Simulator Daring

 # 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 )

Teks Inggris, Ibrani (campuran LTR-RTL) dan Cina

kode C

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

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

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

Kode MicroPython | Simulator Daring

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

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

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

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

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

▶️ Mulailah

Daftar ini akan memandu Anda untuk memulai LVGL langkah demi langkah.

Kenali LVGL

1. Periksa demo Online untuk melihat LVGL beraksi (3 menit).
2. Baca halaman Pendahuluan dokumentasi (5 menit).
3. Pahami dasar-dasarnya di halaman Ikhtisar singkat (15 menit).

Mulai Gunakan LVGL

4. Siapkan Simulator (10 menit).
5. Cobalah beberapa Contoh.
6. Port LVGL ke papan. Lihat panduan Porting atau lihat Proyek yang siap digunakan.

Menjadi seorang profesional

7. Baca halaman Komponen Utama untuk lebih memahami perpustakaan (2-3 jam)
8. Periksa dokumentasi Widget untuk melihat fitur dan penggunaannya

Dapatkan Bantuan dan Bantu Orang Lain

9. Jika Anda memiliki pertanyaan, kunjungi Forum
10. Baca panduan Berkontribusi untuk melihat bagaimana Anda dapat membantu meningkatkan LVGL (15 menit)

? Layanan

LVGL LLC didirikan untuk memberikan latar belakang yang kuat untuk perpustakaan LVGL dan menawarkan beberapa jenis layanan untuk membantu Anda dalam pengembangan UI. Dengan pengalaman lebih dari 15 tahun di antarmuka pengguna dan industri grafis, kami dapat membantu Anda membawa UI Anda ke level berikutnya.

• Desain grafis Desainer grafis internal kami ahli dalam menciptakan desain modern yang indah dan sesuai dengan produk Anda dan sumber daya perangkat keras Anda.
• Implementasi UI Kami juga dapat mengimplementasikan UI Anda berdasarkan desain yang Anda atau kami buat. Anda dapat yakin bahwa kami akan memaksimalkan perangkat keras dan LVGL Anda. Jika ada fitur atau widget yang hilang dari LVGL, jangan khawatir, kami akan mengimplementasikannya untuk Anda.
• Konsultasi dan Dukungan Kami juga dapat mendukung Anda dengan konsultasi untuk menghindari kesalahan yang mahal dan memakan waktu selama pengembangan UI.
• Sertifikasi dewan Untuk perusahaan yang menawarkan papan pengembangan, atau kit siap produksi, kami melakukan sertifikasi dewan yang menunjukkan bagaimana dewan dapat menjalankan LVGL.

Lihat Demo kami sebagai referensi. Untuk informasi lebih lanjut, lihat halaman Layanan.

Hubungi kami dan beritahu bagaimana kami dapat membantu.

? Berkontribusi

LVGL adalah proyek terbuka dan kontribusinya sangat kami harapkan. Ada banyak cara untuk berkontribusi mulai dari sekadar berbicara tentang proyek Anda, melalui penulisan contoh, menyempurnakan dokumentasi, memperbaiki bug, atau bahkan menghosting proyek Anda sendiri di bawah organisasi LVGL.

Untuk penjelasan rinci tentang peluang kontribusi, kunjungi bagian Berkontribusi dalam dokumentasi.

Lebih dari 300 orang telah meninggalkan sidik jarinya di LVGL. Jadilah salah satu dari mereka! Sampai jumpa di sini! ?

... dan banyak lainnya.