홈페이지>프로그래밍 관련>C# 소스 코드
다운로드
lvgl

영어 | 중국어 | 포르투갈어는 브라질 | 일본어


가볍고 다재다능한 그래픽 라이브러리



웹사이트 | 문서 | 포럼 | 데모 | 서비스


? 개요

성숙하고 잘 알려진
LVGL은 모든 MCU, MPU 및 디스플레이 유형에 맞는 아름다운 UI를 생성하는 가장 인기 있는 무료 오픈 소스 임베디드 그래픽 라이브러리입니다. Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit 등과 같은 업계 최고의 공급업체 및 프로젝트에서 지원됩니다.

풍부한 기능
30개 이상의 내장 위젯, 강력한 스타일 시스템, 웹에서 영감을 받은 레이아웃 관리자, 다양한 언어를 지원하는 타이포그래피 시스템 등 현대적이고 아름다운 GUI를 만드는 데 필요한 모든 기능을 갖추고 있습니다. LVGL을 플랫폼에 통합하려면 최소 32kB RAM과 128kB 플래시, C 컴파일러, 프레임 버퍼, 렌더링을 위한 최소 1/10 화면 크기 버퍼만 있으면 됩니다.

서비스
우리 팀은 그래픽 디자인, UI 구현 및 컨설팅 서비스를 도와드릴 준비가 되어 있습니다. 다음 GUI 프로젝트를 개발하는 동안 지원이 필요하면 저희에게 연락하세요.

특징

무료 및 휴대용

  • 외부 종속성이 없는 완전히 이식 가능한 C(C++ 호환) 라이브러리입니다.
  • 모든 (RT)OS를 사용하여 모든 MCU 또는 MPU로 컴파일할 수 있습니다.
  • 흑백, ePaper, OLED 또는 TFT 디스플레이는 물론 모니터까지 지원합니다. 디스플레이
  • MIT 라이선스로 배포되므로 상용 프로젝트에서도 쉽게 사용할 수 있습니다.
  • 렌더링을 위해서는 32kB RAM과 128kB 플래시, 프레임 버퍼, 최소 1/10 화면 크기 버퍼만 필요합니다.
  • OS, 외부 메모리, GPU는 지원되지만 필수는 아닙니다.

위젯, 스타일, 레이아웃 등

  • 30개 이상의 내장 위젯: 버튼, 라벨, 슬라이더, 차트, 키보드, 미터, 원호, 표 등.
  • ~100개의 스타일 속성을 갖춘 유연한 스타일 시스템으로 모든 상태에서 위젯의 일부를 사용자 정의할 수 있습니다.
  • 반응형 방식으로 위젯의 크기와 위치를 자동으로 조정하는 Flexbox 및 Grid와 같은 레이아웃 엔진.
  • 텍스트는 CJK, 태국어, 힌디어, 아랍어, 페르시아어 쓰기 시스템을 지원하는 UTF-8 인코딩으로 렌더링됩니다.
  • 단어 줄 바꿈, 커닝, 텍스트 스크롤, 하위 픽셀 렌더링, Pinyin-IME 중국어 입력, 텍스트의 이모티콘.
  • 애니메이션, 앤티앨리어싱, 불투명도, 부드러운 스크롤링, 그림자, 이미지 변환 등을 지원하는 렌더링 엔진
  • 마우스, 터치패드, 키패드, 키보드, 외부 버튼, 인코더 입력 장치를 지원합니다.
  • 다중 디스플레이 지원.

바인딩 및 빌드 지원

  • MicroPython 바인딩은 LVGL API를 노출합니다.
  • MCU의 PikaScript 바인딩 Python이 더 가볍고 쉬워졌습니다.
  • 사용자 정의 빌드 시스템은 사용되지 않습니다. 프로젝트의 다른 파일을 빌드할 때 LVGL을 빌드할 수 있습니다.
  • Make 및 CMake에 대한 지원은 기본적으로 포함되어 있습니다.
  • PC에서 개발하고 임베디드 하드웨어에서 동일한 UI 코드를 사용합니다.
  • Emscripten 포트를 사용하여 C UI 코드를 HTML 파일로 변환하세요.

문서, 도구 및 서비스

  • 100개 이상의 간단한 예제가 포함된 자세한 문서
  • UI 개발을 더욱 간편하고 빠르게 만들어주는 사용자 인터페이스 디자인, 구현, 컨설팅 등의 서비스입니다.

❤️ 후원자

LVGL을 통해 많은 시간과 비용을 절약했거나 재미있게 사용했다면 개발 지원을 고려해 보세요.

기부금은 어떻게 사용하나요?
우리의 목표는 LVGL을 위해 최선을 다하는 사람들에게 재정적 보상을 제공하는 것입니다. 이는 관리자뿐만 아니라 훌륭한 기능을 구현하는 사람이라면 누구나 축적된 돈에서 보상을 받아야 한다는 의미입니다. 우리는 기부금을 서버 및 관련 서비스와 같은 운영 비용을 충당하는 데 사용합니다.

기부하는 방법?
우리는 일회성 또는 반복 기부를 쉽게 보낼 수 있는 GitHub 후원자를 사용합니다. 또한 모든 비용을 투명하게 확인할 수 있습니다.

기여금은 어떻게 지급받나요?
누군가가 후원으로 표시된 문제를 구현하거나 수정하면 해당 작업에 대한 대가를 받게 됩니다. 우리는 문제의 소요 시간, 복잡성 및 중요성을 추정하고 이에 따라 가격을 책정합니다. 스폰서 문제에 대해 "안녕하세요, 처리하고 싶습니다. 이것이 제가 이 문제를 수정/구현할 계획인 방법입니다..."라고 댓글을 달면 됩니다. 작업은 관리자에 의해 승인되고 병합되면 준비된 것으로 간주됩니다. 그 후 opencollective.com에 제출하고 비용을 지불하면 며칠 내에 지불금을 받게 됩니다.

LVGL을 지원하는 조직

LVGL을 지지하는 개인

? 패키지

LVGL은 다음과 같이 사용할 수 있습니다.

  • 아두이노 라이브러리
  • PlatformIO 패키지
  • 제퍼 도서관
  • ESP-IDF(ESP32) 구성요소
  • NXP MCUXpresso 구성 요소
  • NuttX 라이브러리
  • RT-스레드 RTOS
  • CMSIS-팩
  • 라이엇 OS 패키지

? 예

위젯 생성, 레이아웃 사용 및 스타일 적용에 대한 몇 가지 예를 확인하세요. C 및 MicroPython 코드와 온라인 MicroPython 편집기에서 예제를 시험해 보거나 편집할 수 있는 링크를 찾을 수 있습니다.

더 많은 예제를 보려면 예제 폴더를 확인하세요.

안녕하세요 월드 라벨

LVGL의 간단한 Hello World 라벨 예

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

/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( label , "Hello world" );
lv_obj_set_style_text_color ( label , lv_color_hex ( 0xffffff ), LV_PART_MAIN );
lv_obj_align ( label , LV_ALIGN_CENTER , 0 , 0 );
MicroPython 코드 | 온라인 시뮬레이터 
 # Change the active screen's background color
scr = lv . screen_active ()
scr . set_style_bg_color ( lv . color_hex ( 0x003a57 ), lv . PART . MAIN )

# Create a white label, set its text and align it to the center
label = lv . label ( lv . screen_active ())
label . set_text ( "Hello world" )
label . set_style_text_color ( lv . color_hex ( 0xffffff ), lv . PART . MAIN )
label . align ( lv . ALIGN . CENTER , 0 , 0 )

클릭 이벤트가 있는 버튼

라벨이 있는 LVGL 버튼 예시

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

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

void button_event_cb ( lv_event_t * e )
{
  printf ( "Clickedn" );
}
MicroPython 코드 | 온라인 시뮬레이터 
 def button_event_cb ( e ):
  print ( "Clicked" )

# Create a Button and a Label
button = lv . button ( lv . screen_active ())
button . center ()
button . set_size ( 100 , 50 )
button . add_event_cb ( button_event_cb , lv . EVENT . CLICKED , None )

label = lv . label ( button )
label . set_text ( "Button" )
label . center ()

레이아웃이 있는 체크박스

LVGL의 레이아웃이 있는 체크박스

C 코드 
 lv_obj_set_flex_flow ( lv_screen_active (), LV_FLEX_FLOW_COLUMN );
lv_obj_set_flex_align ( lv_screen_active (), LV_FLEX_ALIGN_CENTER , LV_FLEX_ALIGN_START , LV_FLEX_ALIGN_CENTER );

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

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

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

cb = lv_checkbox_create ( lv_screen_active ());
lv_obj_add_state ( cb , LV_STATE_CHECKED | LV_STATE_DISABLED );
lv_checkbox_set_text ( cb , "Melonnand a new line" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );
MicroPython 코드 | 온라인 시뮬레이터 
 def event_handler ( e ):
    code = e . get_code ()
    obj = e . get_target_obj ()
    if code == lv . EVENT . VALUE_CHANGED :
        txt = obj . get_text ()
        if obj . get_state () & lv . STATE . CHECKED :
            state = "Checked"
        else :
            state = "Unchecked"
        print ( txt + ":" + state )


lv . screen_active (). set_flex_flow ( lv . FLEX_FLOW . COLUMN )
lv . screen_active (). set_flex_align ( lv . FLEX_ALIGN . CENTER , lv . FLEX_ALIGN . START , lv . FLEX_ALIGN . CENTER )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Apple" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Banana" )
cb . add_state ( lv . STATE . CHECKED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Lemon" )
cb . add_state ( lv . STATE . DISABLED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . add_state ( lv . STATE . CHECKED | lv . STATE . DISABLED )
cb . set_text ( "Melon" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

슬라이더 스타일링

LVGL을 사용하여 슬라이더 스타일 지정

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

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

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

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

lv_obj_set_style_outline_color ( slider , lv_color_hex ( 0x0096FF ), LV_PART_KNOB );
lv_obj_set_style_outline_width ( slider , 3 , LV_PART_KNOB );
lv_obj_set_style_outline_pad ( slider , -5 , LV_PART_KNOB );
lv_obj_set_style_shadow_spread ( slider , 2 , LV_PART_KNOB );
MicroPython 코드 | 온라인 시뮬레이터 
 # Create a slider and add the style
slider = lv . slider ( lv . screen_active ())
slider . set_value ( 70 , lv . ANIM . OFF )
slider . set_size ( 300 , 20 )
slider . center ()

# Add local styles to MAIN part (background rectangle)
slider . set_style_bg_color ( lv . color_hex ( 0x0F1215 ), lv . PART . MAIN )
slider . set_style_bg_opa ( 255 , lv . PART . MAIN )
slider . set_style_border_color ( lv . color_hex ( 0x333943 ), lv . PART . MAIN )
slider . set_style_border_width ( 5 , lv . PART . MAIN )
slider . set_style_pad_all ( 5 , lv . PART . MAIN )

# Create a reusable style sheet for the INDICATOR part
style_indicator = lv . style_t ()
style_indicator . init ()
style_indicator . set_bg_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_bg_grad_color ( lv . color_hex ( 0x1464F0 ))
style_indicator . set_bg_grad_dir ( lv . GRAD_DIR . HOR )
style_indicator . set_shadow_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_shadow_width ( 15 )
style_indicator . set_shadow_spread ( 5 )

# Add the style sheet to the slider's INDICATOR part
slider . add_style ( style_indicator , lv . PART . INDICATOR )
slider . add_style ( style_indicator , lv . PART . KNOB )

# Add the same style to the KNOB part too and locally overwrite some properties
slider . set_style_outline_color ( lv . color_hex ( 0x0096FF ), lv . PART . KNOB )
slider . set_style_outline_width ( 3 , lv . PART . KNOB )
slider . set_style_outline_pad ( - 5 , lv . PART . KNOB )
slider . set_style_shadow_spread ( 2 , lv . PART . KNOB )

영어, 히브리어(LTR-RTL 혼합) 및 중국어 텍스트

LVGL을 사용한 영어, 히브리어 및 중국어 텍스트

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 );
MicroPython 코드 | 온라인 시뮬레이터 
 ltr_label = lv . label ( lv . screen_active ())
ltr_label . set_text ( "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." )
ltr_label . set_style_text_font ( lv . font_montserrat_16 , 0 );

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

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

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

▶️ 시작하기

이 목록은 LVGL을 시작하는 방법을 단계별로 안내합니다.

LVGL에 익숙해지기

  1. LVGL이 작동하는 모습을 보려면 온라인 데모를 확인하세요(3분).
  2. 설명서의 소개 페이지를 읽어보세요(5분).
  3. 빠른 개요 페이지(15분)에서 기본 사항을 숙지하세요.

LVGL 사용 시작

  1. 시뮬레이터 설정(10분)
  2. 몇 가지 예를 시도해 보세요.
  3. LVGL을 보드에 포팅합니다. 포팅 가이드를 참조하거나 즉시 사용 가능한 프로젝트를 확인하세요.

프로가 되세요

  1. 라이브러리에 대해 더 잘 이해하려면 기본 구성 요소 페이지를 읽어보세요. (2~3시간)
  2. 기능과 사용법을 보려면 위젯 문서를 확인하세요.

도움을 받고 다른 사람을 도우세요

  1. 질문이 있는 경우 포럼으로 이동하세요.
  2. LVGL 개선에 어떻게 도움을 줄 수 있는지 알아보려면 기여 가이드를 읽어보세요. (15분)

? 서비스

LVGL LLC는 LVGL 라이브러리에 대한 탄탄한 배경을 제공하고 UI 개발에 도움이 되는 다양한 유형의 서비스를 제공하기 위해 설립되었습니다. 사용자 인터페이스 및 그래픽 업계에서 15년 이상의 경험을 바탕으로 귀하의 UI를 다음 단계로 끌어올리는 데 도움을 드릴 수 있습니다.

  • 그래픽 디자인 당사의 내부 그래픽 디자이너는 귀하의 제품과 하드웨어 리소스에 맞는 아름답고 현대적인 디자인을 만드는 전문가입니다.
  • UI 구현 귀하 또는 우리가 만든 디자인을 기반으로 UI를 구현할 수도 있습니다. 귀하의 하드웨어와 LVGL을 최대한 활용해 드릴 것을 확신하실 수 있습니다. LVGL에 기능이나 위젯이 없어도 걱정하지 마세요. 저희가 대신 구현해 드리겠습니다.
  • 컨설팅 및 지원 UI 개발 중 많은 비용과 시간이 소요되는 실수를 방지하기 위해 컨설팅도 지원해 드립니다.
  • 보드 인증 개발 보드 또는 생산 준비 키트를 제공하는 회사를 위해 우리는 보드가 LVGL을 실행할 수 있는 방법을 보여주는 보드 인증을 수행합니다.

참고용으로 데모를 확인해 보세요. 자세한 내용은 서비스 페이지를 참조하세요.

저희에게 연락하셔서 저희가 어떻게 도움을 드릴 수 있는지 알려주세요.

? 기여

LVGL은 공개 프로젝트이며 기여를 매우 환영합니다. 단순히 프로젝트에 대해 이야기하는 것부터, 예제 작성, 문서 개선, 버그 수정, LVGL 조직에서 자신의 프로젝트 호스팅까지 기여할 수 있는 방법은 많습니다.

기여 기회에 대한 자세한 설명을 보려면 설명서의 기여 섹션을 참조하세요.

이미 300명이 넘는 사람들이 LVGL에 지문을 남겼습니다. 그들 중 하나가 되어보세요! 여기서 만나요! ?

...그리고 다른 많은 것들.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체