본문 바로가기
Tips, Infomation/UI UX

LVGL for Arduino

by 소나무기운 2023. 2. 24.
반응형

LVGL은 LittlevGL(Little Video Graphics Library)의 준말로, 오픈소스 그래픽 라이브러리 중 하나입니다. LVGL은 마이크로컨트롤러와 임베디드 시스템에서 사용할 수 있는 그래픽 라이브러리로, UI(User Interface) 및 GUI(Graphical User Interface) 개발에 사용됩니다.

 

LVGL은 C언어로 작성되어 있으며, 매우 가볍고 빠르며 메모리 효율성이 뛰어나다는 특징을 가지고 있습니다. 또한, LVGL은 다양한 플랫폼과 마이크로컨트롤러에서 지원되고 있어, 많은 임베디드 시스템에서 사용할 수 있습니다.

 

LVGL은 다양한 UI 요소와 기능을 제공합니다. 예를 들어, 버튼, 라벨, 슬라이더, 프로그레스 바, 그리드 등 다양한 위젯을 제공하며, 다양한 테마와 스타일을 지원하여 UI 디자인을 자유롭게 구성할 수 있습니다. 또한, LVGL은 다양한 이벤트와 애니메이션 처리를 지원하여, 인터랙션을 더욱 부드럽게 처리할 수 있습니다.

 

LVGL은 자유롭게 사용할 수 있는 BSD 라이선스로 배포되어 있으며, 오픈소스 커뮤니티에서 활발하게 개발되고 있습니다. 따라서, LVGL을 사용하여 임베디드 시스템에서 UI 및 GUI 개발을 할 경우, 높은 품질과 안정성을 보장받을 수 있습니다.

 

LVGL is an abbreviation for LittlevGL (Little Video Graphics Library) and is one of the open source graphics libraries. LVGL is a graphical library that can be used in microcontrollers and embedded systems for user interface (UI) and graphical user interface (GUI) development.

LVGL is written in C language and is very light, fast, and memory-efficient. In addition, LVGL is supported on a variety of platforms and microcontrollers, making it available in many embedded systems.

LVGL provides a variety of UI elements and functions. For example, it offers a variety of widgets, including buttons, labels, sliders, progress bars, and grids, and supports a variety of themes and styles to freely organize UI designs. In addition, LVGL supports various events and animation processing, making interactions smoother.

LVGL is distributed under a freely available BSD license and is actively developed in the open-source community. Therefore, high quality and stability can be guaranteed when developing UI and GUI in an embedded system using LVGL.

 

 

아래는 ESP32 아두이노 보드에서 LVGL을 사용한 간단한 예제입니다.

 

Below is a simple example of using LVGL on an ESP32 Arduino board.

 

#include <TFT_eSPI.h>
#include <lvgl.h>

TFT_eSPI tft;
lv_disp_buf_t disp_buf;
lv_color_t buf[LV_HOR_RES_MAX * 10];

void setup()
{
  tft.init();
  tft.setRotation(1);
  lv_init();
  lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);

  lv_disp_drv_t disp_drv;
  lv_disp_drv_init(&disp_drv);
  disp_drv.hor_res = 320;
  disp_drv.ver_res = 240;
  disp_drv.flush_cb = my_disp_flush;
  disp_drv.buffer = &disp_buf;
  lv_disp_drv_register(&disp_drv);
}

void loop()
{
  lv_obj_t * scr = lv_disp_get_scr_act(NULL); 
  lv_obj_t * label = lv_label_create(scr, NULL); 
  lv_label_set_text(label, "Hello World!"); 
  lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0); 
  lv_task_handler(); 
  delay(5);
}

void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
  uint16_t c;

  tft.startWrite(); /* Start new TFT transaction */
  tft.setAddrWindow(area->x1, area->y1, area->x2, area->y2); /* Set the address window */
  for(int y = area->y1; y <= area->y2; y++) {
    for(int x = area->x1; x <= area->x2; x++) {
      c = color_p->full; /* Get the color */
      tft.writeColor(c, 1); /* Write the color to the TFT */
      color_p++;
    }
  }
  tft.endWrite(); /* End the TFT transaction */
  lv_disp_flush_ready(disp); /* Tell LVGL that flushing is done */
}

 

이 예제는 LVGL을 초기화하고, TFT_eSPI 라이브러리를 사용하여 TFT 디스플레이에 LVGL을 출력합니다. 먼저, setup() 함수에서 TFT_eSPI 라이브러리를 초기화하고 LVGL을 초기화합니다. 그리고 lv_disp_buf_t 구조체를 사용하여 LVGL 디스플레이 버퍼를 초기화하고, lv_disp_drv_t 구조체를 사용하여 LVGL 디스플레이 드라이버를 등록합니다.

그리고 loop() 함수에서 LVGL을 사용하여 "Hello World!" 라벨을 생성하고 디스플레이에 출력합니다. 마지막으로 my_disp_flush() 함수에서 TFT 디스플레이에 LVGL 디스플레이 버퍼를 출력합니다.

이 예제는 LVGL의 간단한 사용 방법을 보여주고 있습니다. 추가적인 위젯 및 기능을 사용하려면 LVGL 문서를 참고하시면 됩니다.

 

This example initializes the LVGL and outputs the LVGL to the TFT display using the TFT_eSPI library. First, initialize the TFT_eSPI library in the setup() function and initialize the LVGL. Then initialize the LVGL display buffer using the lv_disp_buf_t structure and register the LVGL display driver using the lv_disp_drv_t structure.

The loop() function uses LVGL to generate a "Hello World!" label and outputs it to the display. Finally, the my_disp_flush() function outputs the LVGL display buffer to the TFT display.

This example shows a simple way to use LVGL. See the LVGL documentation for additional widgets and features.

 

반응형

'Tips, Infomation > UI UX' 카테고리의 다른 글

UI UX ??  (0) 2023.02.20

댓글