K230 GUI in Action - LVGL Porting Tutorial

Copyright 2023 Canaan Inc. ©

Disclaimer

The products, services or features you purchase should be subject to Canaan Inc. ("Company", hereinafter referred to as "Company") and its affiliates are bound by the commercial contracts and terms and conditions of all or part of the products, services or features described in this document may not be covered by your purchase or use. Unless otherwise agreed in the contract, the Company does not provide any express or implied representations or warranties as to the correctness, reliability, completeness, merchantability, fitness for a particular purpose and non-infringement of any statements, information, or content in this document. Unless otherwise agreed, this document is intended as a guide for use only.

Due to product version upgrades or other reasons, the content of this document may be updated or modified from time to time without any notice.

Trademark Notice

, "Canaan" and other Canaan trademarks are trademarks of Canaan Inc. and its affiliates. All other trademarks or registered trademarks that may be mentioned in this document are owned by their respective owners.

**Copyright 2023 Canaan Inc.. © All Rights Reserved. Without the written permission of the company, no unit or individual may extract or copy part or all of the content of this document without authorization, and shall not disseminate it in any form.

Directory

[TOC]

preface

Reader object

This document is intended primarily for:

• Technical Support Engineer
• Software Development Engineer

Definition of acronyms

Revision history

K230 GUI in action

LVGL is a popular free and open source embedded graphics library that can be used for graphical user interface (GUI) development of embedded systems.

Hardware environment

• K230-USIP-LP3-EVB-V1.1
• LCD screen

Overview

The k230 uses DRM as a display driver, DRM (Direct Rendering Manager) is a subsystem in the Linux kernel that can support complex GPU operations such as hardware-accelerated graphics rendering compared to the outdated Framebuffer. lvgl can draw GUIs based on the interface provided by libdrm.

The lvgl component has been ported to the SDK, and a runnable demo has been compiled by default, which is /usr/bin/lvgl_demo_widgets.

LVGL source location

The SDK already contains the ported LVGL at the path src/little/buildroot-ext/package/lvgl. during the buildroot compilation of the SDK, the source code will be placed in a directory output/k230_evb_defconfig/little/buildroot-ext/build/lvgl-v8.3.7 that contains the lvgl source code package pulled from GitHub and the ported files under the src path mentioned above. The directory structure is as follows:

.
├── lv_conf.h
├── lv_drivers
│   ├── display
│   │   ├── drm.c
│   │   └── drm.h
│   ├── indev
│   │   ├── AD_touch.c
│   │   ├── AD_touch.h
│   │   ├── evdev.c
│   │   ├── evdev.h
│   │   ├── keyboard.h
│   │   ├── libinput.c
│   │   ├── libinput_drv.h
│   │   ├── mouse.h
│   │   └── mousewheel.h
│   └── lv_drivers.mk
├── lv_drv_conf.h
├── main.c
├── Makefile
└── mouse_cursor_icon.c

lvgl DRM driver

After the DRM driver in the Linux kernel is successfully loaded, the following device nodes will appear /dev/dri/card0.

DRM configuration related

in the header file src/little/buildroot-ext/package/lvgl/port_src/lv_drv_conf.h

• Configure macro definitions to enable DRM display drivers

  define USE_DRM 1

• The configuration macro definition specifies the DRM driver node

  define DRM_CARD "/dev/dri/card0"

Specific introduction to DRM driver source code

LVGL's DRM driver is located src/little/buildroot-ext/package/lvgl/port_src/lv_drivers/display/drm.c to operate on DRM, you need to open the file node first. The following functions are mainly used in the use of LVGL:

• drm_init() DRM initialization.
• drm_get_sizes() to get monitor resolution information.
• drm_flush() displays the drawing callback interface.

DRM resources will be automatically obtained during the drm initialization process, including connect id, plane id, crtc id, etc., and will automatically match the corresponding supported plane according to the color format selected in the configuration file.

The DRM driver has double buffer enabled by default, but in the absence of hardware acceleration, the double buffer refresh rate is low, you can comment out the following code to refresh in single buffering, the display effect will be better:

void drm_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p)
{
    ...
 if (!drm_dev.cur_bufs[0])
  drm_dev.cur_bufs[1] = &drm_dev.drm_bufs[1];
 else
  drm_dev.cur_bufs[1] = drm_dev.cur_bufs[0];
  drm_dev.cur_bufs[0] = fbuf;
    ...
}

Use of LVGL

LVGL's main program file is located at: src/little/buildroot-ext/package/lvgl/port_src/main.c

LVGL configuration related

The LVGL configuration file is located at: src/little/buildroot-ext/package/lvgl/port_src/lv_conf.h

The following are a few commonly used configuration items:

The main steps used by LVGL

1. LVGL initialization:

   lv_init();

2. Display driver initialization:

   drm_init();
   drm_get_sizes(&lcd_w, &lcd_h, &lcd_dpi);
   printf("lcd w,h,dpi:%d,%d,%d \n", lcd_w, lcd_h, lcd_dpi);
   
   uint32_t draw_buf_size = lcd_w * lcd_h * sizeof(lv_color_t) / 4; /*1/4 screen sized buffer has the same performance */
   static lv_disp_draw_buf_t disp_buf;
   lv_color_t *buf_2_1 = malloc(draw_buf_size);
   lv_color_t *buf_2_2 = malloc(draw_buf_size);
   lv_disp_draw_buf_init(&disp_buf, buf_2_1, buf_2_2, draw_buf_size);
   
   /*Initialize and register a display driver*/
   static lv_disp_drv_t disp_drv;
   lv_disp_drv_init(&disp_drv);
   disp_drv.draw_buf   = &disp_buf;
   disp_drv.flush_cb   = drm_flush;
   disp_drv.hor_res    = lcd_w;
   disp_drv.ver_res    = lcd_h;
   disp_drv.screen_transp = 1;
   lv_disp_drv_register(&disp_drv);

3. Touch Drive:

   evdev_init();
   static lv_indev_drv_t indev_drv_1;
   lv_indev_drv_init(&indev_drv_1); /*Basic initialization*/
   indev_drv_1.type = LV_INDEV_TYPE_POINTER;
   
   /*This function will be called periodically (by the library) to get the mouse position and state*/
   indev_drv_1.read_cb = evdev_read;
   lv_indev_t *mouse_indev = lv_indev_drv_register(&indev_drv_1);

4. Demo routine:

   lv_demo_widgets();

For more detailed usage of lvgl, please refer to the lvgl website https://lvgl.io, API documentation and examples: https://docs.lvgl.io/8.3/index.html

It is also possible to use LVGL's drag-and-drop UI editor, SquareLine Studio, to simplify development: https://squareline.io

compile

Perform default compilation all in the root directory of the SDK make.

Run lv_demo_widgets

lvgl_demo_widgets

After executing the above command, the configuration interface will be displayed on the LCD screen, and the relevant configuration can be made through the touch screen, as follows:

Of course, lvgl application development can also be compiled as a standalone project instead of in the SDK, you can refer to the https://github.com/lvgl/lv_port_linux_frame_buffer project to replace the port files in the SDK, and then configure the K230 cross-compilation toolchain and the corresponding libdrm reference.