LVGL User Guide

In this article, we will provide a detailed explanation of the basic concepts of the Framebuffer (FB) device and the LittlevGL (LVGL) graphics user interface library. By using the Luckfox Pico Pro/Max development board and the Pico-LCD-1.3 display, we will demonstrate how to configure the FB device, create applications using the LVGL library, and finally display the interface on the LCD.

Quick Start

Note: Only Luckfox Pico / Plus / Pro / Max supports FBTFT configuration, and currently only supports ST7789v/ ST7789vm display chips. The FBTFT configuration requires a reboot to take effect.

1. Navigate to Compatible Devices -> FBTFT screen, select enable to enter the FBTFT mode configuration screen.
   

2. If SPI0M0 is enabled, FBTFT cannot be configured.
   

3. If the pins to be configured are multiplexed for other functions and marked, selecting enable will display a prompt message. You need to disable the conflicting configuration to successfully enable FBTFT.

4. Download the LVGL sample program.

   version	Description	Download
   LVGL.zip	LVGL Test Program	LVGL.zip

5. Directory of the compressed package:

   LVGL/
   ├── image ----------------------------------- Image files
   ├── lvgl_demo ------------------------------- Project directory
   ├── demo ------------------------------------- Executable files
   └── rv1106g-luckfox-pico-pro-max.dts -------- Device tree file

6. Upload the sample program to the development board and run it.

   chmod +x demo
   ./demo

7. Expected results:

   • Hardware connections
     

   • Display effects
     

1. Framebuffer (FB) Devices

The two commonly used graphics display device driver frameworks in the Linux kernel are DRM (Direct Rendering Manager) and FBDEV (Framebuffer Device). Under the Framebuffer driver framework, users can directly operate the display device's video memory through the /dev/fbX interface, performing standard file operations (such as read, write, ioctl). User-space programs can control the framebuffer device through these device nodes and ioctl calls. Framebuffer provides basic 2D graphics operations, such as drawing points, lines, and rectangles, and supports various pixel formats and resolutions.

1.1 Kernel Configuration

For detailed usage methods regarding adding to the kernel, refer to the "SDK Environment Deployment" section.

1. Enter the kernel directory.

   cd /SDK Directory/
   ./build.sh kernelconfig

2. Enable FB-related drivers in the kernel sequentially.

   CONFIG_VT_CONSOLE=y
   CONFIG_FRAMEBUFFER_CONSOLE=y
   CONFIG_FONTS=y

1.2 Device Tree Files

To drive the LCD, in addition to enabling FB-related drivers in the kernel, it is essential to ensure that all pins communicating with the LCD function correctly. Before this, we need to determine the connection pins between Pico-LCD-1.3 and Luckfox Pico Pro/Max. The device tree is used to describe hardware resources, so corresponding modifications to the device tree are required.

1.2.1 Related Pins

It is important to note that the internal circuit of Pico-LCD-1.3 performs forced level conversion, converting the input voltage (VSYS) to a stable 3.3V, so VSYS can be used for power supply. More details on the pins can be referenced in the Pico-LCD-1.3 Wiki tutorial.

LCD	Luckfox Pico Pro/Max	Function
VCC	VSYS	Power input
GND	GND	Ground
DIN	SPI0_MOSI_M0	SPI communication MOSI pin, data input from device
CLK	SPI0_CLK_M0	SPI communication SCK pin, clock input from device
CS	SPI0_CS0_M0	SPI chip select pin (active low)
DC	GPIO2_B1_d	Data/Command control pin (high for data, low for command)
RST	GPIO1_C3_d	External reset pin (active low)
BL	GPIO2_B0_d	Backlight control
A	GPIO1_D1_d	User key A
B	GPIO2_A5_d	User key B
X	GPIO2_A1_d	User key X
Y	GPIO2_A3_d	User key Y
UP	GPIO1_C7_d	Joystick up
DOWM	GPIO2_A0_d	Joystick down
LEFT	GPIO2_A4_d	Joystick left
RIGHT	GPIO2_A2_d	Joystick right
CTRL	GPIO1_C6_d	Joystick press

1.2.2 Writing the Device Tree

1. In the default device tree, GPIO1_C7_d's default function is PWM. In the program, we want to read the pin level to determine the key state, so we need to configure this pin as a general I/O. Open <SDK Directory>/sysdrv/source/kernel/arch/arm/boot/dts/rv1106g-luckfox-pico-pro-max.dts.

   /{
       gpio1pc7:gpio1pc7 {
           compatible = "regulator-fixed";
           pinctrl-names = "default";
           pinctrl-0 = <&gpio1_pc7>;
           regulator-name = "gpio1_pc7";
           regulator-always-on;
       };
   };
   
   &pinctrl {
       gpio1-pc7 {
           gpio1_pc7:gpio1-pc7 {
               rockchip,pins = <1 RK_PC7 RK_FUNC_GPIO &pcfg_pull_up>;
           };
       };
   };
   • For the complete device tree, please download the device tree file from the cloud drive; this is just a partial display.

2. The SPI configuration requires disabling spidev@0; otherwise, fb cannot be initialized.

   &spi0 {
       status = "okay";
       pinctrl-names = "default";
        pinctrl-0 = <&spi0m0_clk &spi0m0_mosi &spi0m0_cs0>;
       spidev@0 {
           status = "disabled";
       };
   
       fbtft@0{
           status = "okay";
           compatible = "sitronix,st7789v";
           reg = <0>;
           spi-max-frequency = <20000000>;
           fps = <30>;
           buswidth = <8>;
           debug = <0x7>;
           led-gpios = <&gpio2 RK_PB0 GPIO_ACTIVE_LOW>;//BL
           dc = <&gpio2 RK_PB1 GPIO_ACTIVE_HIGH>;      //DC
           reset = <&gpio1 RK_PC3 GPIO_ACTIVE_LOW>;    //RES
       };
   };

3. After modifying the device tree, compile the image and test with color noise and clearing the screen.

   cat /dev/urandom > /dev/fb0  # Color noise
   cat /dev/zero > /dev/fb0     # Clear screen

2. Porting LVGL(PC)

2.1 Required Resources

Resource Name	Repository Address	Description
lvgl	https://github.com/lvgl/lvgl.git	Source code of LVGL graphics controls and a few examples
lv_drivers	https://github.com/lvgl/lv_drivers.git	Driver interface source code for driving LVGL graphics interface
lv_demos	https://github.com/lvgl/lv_demos.git	LVGL examples
lv_port_linux_frame_buffer	https://github.com/lvgl/lv_port_linux_frame_buffer.git	Interface for adapting to Linux systems with Framebuffer

2.2 Fetch Resources

Create a folder in the root directory to store the official source code:

luckfox@luckfox:~$ mkdir lvgl
luckfox@luckfox:~$ cd lvgl

Fetch the resources:

git clone -b v8.1.0 https://github.com/lvgl/lvgl.git
git clone -b v8.1.0 https://github.com/lvgl/lv_drivers.git
git clone -b v8.1.0 https://github.com/lvgl/lv_demos.git
git clone --branch release/v8.2 --single-branch https://github.com/lvgl/lv_port_linux_frame_buffer.git

After successful fetching, create a project directory in the root directory and create a project:

luckfox@luckfox:~$ mkdir lvgl_project
luckfox@luckfox:~$ cd lvgl_project/
luckfox@luckfox:~/lvgl_project$ mkdir project_01
luckfox@luckfox:~/lvgl_project$ cd project_01/

2.3 Copy Files

• Copy the lvgl and lv_drivers directories from the root directory
• Copy main.c and Makefile from lv_port_linux_frame_buffer
• Copy lv_conf_template.h from lvgl and rename it to lv_conf.h
• Copy lv_drv_conf_template.h from lv_drivers and rename it to lv_drv_conf.h

cp -r ~/lvgl/lvgl ./
cp -r ~/lvgl/lv_drivers ./
cp ~/lvgl/lvgl/lv_conf_template.h ./lv_conf.h
cp ~/lvgl/lv_drivers/lv_drv_conf_template.h  ./lv_drv_conf.h
cp ~/lvgl/lv_port_linux_frame_buffer/main.c ./
cp ~/lvgl/lv_port_linux_frame_buffer/Makefile ./

Check the project_01 project directory:

luckfox@luckfox:~/lvgl_project/project_01$ ls -l
total 64
-rw-rw-r--  1 luckfox luckfox 29023 12月 27 19:14 lv_conf.h
drwxrwxr-x 12 luckfox luckfox  4096 12月 27 19:14 lv_drivers
-rw-rw-r--  1 luckfox luckfox 15184 12月 27 19:14 lv_drv_conf.h
drwxrwxr-x 12 luckfox luckfox  4096 12月 27 19:14 lvgl
-rw-rw-r--  1 luckfox luckfox  2350 12月 27 19:14 main.c
-rw-rw-r--  1 luckfox luckfox  2321 12月 27 19:14 Makefile

2.4 Modify Files

lv_conf.h

1. Enable

   Change #if 0 to #if 1 at the beginning

   /* clang-format off */
   #if 1 /*Set it to "1" to enable content*/

2. Allocate VRAM

   Enable LV_MEM_CUSTOM and choose to allocate VRAM manually

   /*1: use custom malloc/free, 0: use the built-in `lv_mem_alloc()` and `lv_mem_free()`*/
   #define LV_MEM_CUSTOM 1

3. Refresh time

   Change the original 30ms to 10ms

   /*Default display refresh period. LVG will redraw changed areas with this period time*/
   #define LV_DISP_DEF_REFR_PERIOD 10      /*[ms]*/
   
   /*Input device read period in milliseconds*/
   #define LV_INDEV_DEF_READ_PERIOD 10     /*[ms]*/

4. TICK Configuration

   Enable LV_TICK_CUSTOM and choose to customize the Tick timer configuration function in the application

   Original content:

   #define LV_TICK_CUSTOM 0
   #if LV_TICK_CUSTOM
   #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
   #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
   #endif   /*LV_TICK_CUSTOM*/

   Change to:

   #define LV_TICK_CUSTOM 1
   #if LV_TICK_CUSTOM
       #define LV_TICK_CUSTOM_INCLUDE <stdint.h>         /*Header for the system time function*/
       #define LV_TICK_CUSTOM_SYS_TIME_EXPR (custom_tick_get())    /*Expression evaluating to current system time in ms*/
   #endif   /*LV_TICK_CUSTOM*/

lv_drv_conf.h

1. Enable

   Change #if 0 to #if 1 at the beginning

   /* clang-format off */
   #if 1 /*Set it to "1" to enable the content*/

2. Support devices

   Enable USE_FBDEV to support Framebuffer devices

   /*-----------------------------------------
    *  Linux frame buffer device (/dev/fbx)
    *-----------------------------------------*/
   #ifndef USE_FBDEV
   #  define USE_FBDEV           1
   #endif
   
   #if USE_FBDEV
   #  define FBDEV_PATH          "/dev/fb0"
   #endif

Makefile

Replace the original content of the Makefile, and modify <SDK Directory\> in the Makefile to your SDK path, e.g., /home/luckfox/luckfox-pico/

#
# Makefile
#
CC = <SDK Directory>/tools/linux/toolchain/arm-rockchip830-linux-uclibcgnueabihf/bin/arm-rockchip830-linux-uclibcgnueabihf-gcc
LVGL_DIR_NAME   ?= lvgl
LVGL_DIR        ?= .

WARNINGS        := -Wall -Wshadow -Wundef -Wmissing-prototypes -Wno-discarded-qualifiers -Wall -Wextra -Wno-unused-function -Wno-error=strict-prototypes -Wpointer-arith \
                    -fno-strict-aliasing -Wno-error=cpp -Wuninitialized -Wmaybe-uninitialized -Wno-unused-parameter -Wno-missing-field-initializers -Wtype-limits -Wsizeof-pointer-memaccess \
                    -Wno-format-nonliteral -Wno-cast-qual -Wunreachable-code -Wno-switch-default -Wreturn-type -Wmultichar -Wformat-security -Wno-ignored-qualifiers -Wno-error=pedantic \
                    -Wno-sign-compare -Wno-error=missing-prototypes -Wdouble-promotion -Wclobbered -Wdeprecated -Wempty-body -Wtype-limits -Wshift-negative-value -Wstack-usage=2048 \
                    -Wno-unused-value -Wno-unused-parameter -Wno-missing-field-initializers -Wuninitialized -Wmaybe-uninitialized -Wall -Wextra -Wno-unused-parameter \
                    -Wno-missing-field-initializers -Wtype-limits -Wsizeof-pointer-memaccess -Wno-format-nonliteral -Wpointer-arith -Wno-cast-qual -Wmissing-prototypes \
                    -Wunreachable-code -Wno-switch-default -Wreturn-type -Wmultichar -Wno-discarded-qualifiers -Wformat-security -Wno-ignored-qualifiers -Wno-sign-compare -std=c99
CFLAGS          ?= -O3 -g0 -I$(LVGL_DIR)/ $(WARNINGS)
LDFLAGS         ?= -lm
BIN             = demo
BUILD_DIR       = ./build
BUILD_OBJ_DIR   = $(BUILD_DIR)/obj
BUILD_BIN_DIR   = $(BUILD_DIR)/bin

prefix          ?= /usr
bindir          ?= $(prefix)/bin

#Collect the files to compile
MAINSRC = $(wildcard ./*.c)

include $(LVGL_DIR)/lvgl/lvgl.mk
include $(LVGL_DIR)/lv_drivers/lv_drivers.mk

# CSRCS             +=$(LVGL_DIR)/mouse_cursor_icon.c 

OBJEXT          ?= .o

AOBJS           = $(ASRCS:.S=$(OBJEXT))
COBJS           = $(CSRCS:.c=$(OBJEXT))

MAINOBJ         = $(MAINSRC:.c=$(OBJEXT))

SRCS            = $(ASRCS) $(CSRCS) $(MAINSRC)
OBJS            = $(AOBJS) $(COBJS) $(MAINOBJ)
TARGET          = $(addprefix $(BUILD_OBJ_DIR)/, $(patsubst ./%, %, $(OBJS)))

## MAINOBJ -> OBJFILES

all: default

$(BUILD_OBJ_DIR)/%.o: %.c
    @mkdir -p $(dir $@)
    @$(CC)  $(CFLAGS) -c $< -o $@
    @echo "CC $<"
    
default: $(TARGET)
    @mkdir -p $(dir $(BUILD_BIN_DIR)/)
    $(CC) -o $(BUILD_BIN_DIR)/$(BIN) $(TARGET) $(LDFLAGS)

clean: 
    rm -rf $(BUILD_DIR)

install:
    install -d $(DESTDIR)$(bindir)
    install $(BUILD_BIN_DIR)/$(BIN) $(DESTDIR)$(bindir)

uninstall:
    $(RM) -r $(addprefix $(DESTDIR)$(bindir)/,$(BIN))

main.c

1. Comment out header files

   // #include "lvgl/demos/lv_demos.h"
   // #include "lv_drivers/indev/evdev.h"

2. Modify screen resolution

   #define DISP_BUF_SIZE (240 * 240)
   ...
   disp_drv.hor_res    = 240;
   disp_drv.ver_res    = 240;

3. Comment out the following code

   No external input device, comment out the following code:

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

   Mouse style not ported, comment out the following code:

   /*Set a cursor for the mouse*/
   LV_IMG_DECLARE(mouse_cursor_icon)
   lv_obj_t * cursor_obj = lv_img_create(lv_scr_act()); /*Create an image object for the cursor */
   lv_img_set_src(cursor_obj, &mouse_cursor_icon);           /*Set the image source*/
   lv_indev_set_cursor(mouse_indev, cursor_obj);             /*Connect the image  object to the driver*/

   Not using official demo, comment out the following code:

   /*Create a Demo*/
   lv_demo_widgets();

2.5 Compile and Run

After modifying the above files, enter the make command in the command line to compile the project. After compiling, an executable file demo will be generated in the /build/bin directory. The compiled directory structure is as follows:

project_01/
├── build
│   ├── bin
│   │   └── demo
│   └── obj
│       ├── lv_drivers
│       ├── lvgl
│       └── ...
├── lv_conf.h
├── lv_drivers
├── lv_drv_conf.h
├── lvgl
├── main.c
└── Makefile

You only need to copy demo to the development board to run the program. You can later modify the main.c file and add files according to your requirements to achieve the desired display effect.

2.6 Official Demo

If you need to use the examples provided by the official, follow these steps:

1. Copy files

   • Copy the lv_demos directory from the root directory

   • Copy lv_demo_conf_template.h from lv_demos and rename it to lv_demo_conf.h

     cp -r ~/lvgl/lv_demos ./
     cp ~/lvgl/lv_demos/lv_demo_conf_template.h ./lv_demo_conf.h

2. Modify lv_demo_conf.h

   • Enable

     /* clang-format off */
     #if 1 /*Set it to "1" to enable the content*/

   • Enable widget demo

     /*Show some widget*/
     #define LV_USE_DEMO_WIDGETS        1

3. Modify lv_conf.h

   Enable LV_FONT_MONTSERRAT_12 and LV_FONT_MONTSERRAT_16

   #define LV_FONT_MONTSERRAT_12 1
   #define LV_FONT_MONTSERRAT_16 1

4. Makefile

   include $(LVGL_DIR)/lvgl/lvgl.mk
   include $(LVGL_DIR)/lv_drivers/lv_drivers.mk
   #Add lv_demo.mk：
   include $(LVGL_DIR)/lv_demos/lv_demo.mk

5. Modify main.c

   • Add header files

     #include "lv_demos/lv_demo.h"

   • Call interface functions

     lv_demo_widgets();
     
     while(1) {
         lv_timer_handler();
         usleep(5000);
     }

3. Example Program

3.1 Project Directory

After burning the image and creating the project files, you can start modifying the program yourself. Here, we use the Luckfox Pico Pro/Max development board and Pico-LCD-1.3 display screen to implement interface display. The modified project directory is as follows:

lvgl_demo/
├── cat.c -------------------- File obtained after converting the image
├── galaxy.c ----------------- File obtained after converting the image
├── Luckfox.c ---------------- File obtained after converting the image
├── saint.c ------------------ File obtained after converting the image
├── main.c ------------------- Main program file
├── Debug.h ------------------ Debug information header file
├── DEV_Config.c ------------- GPIO control interface file
├── DEV_Config.h ------------- GPIO control interface header file
├── sysfs_gpio.c ------------- sysfs GPIO control implementation file
├── sysfs_gpio.h ------------- sysfs GPIO control header file
└── ...

3.2 Display Custom Images

1. Convert online

   Online Image Converter

2. Convert images

   Note that for PNG images, choose the CF_TRUE_COLOR_ALPHA color format, and for JPG images, choose CF_TRUE_COLOR. After conversion, copy the C file to the project directory
   

3. Modify main.c

   Add declarations

   LV_IMG_DECLARE(Luckfox);  

   Display images

   lv_obj_t *scr = lv_disp_get_scr_act(NULL);
   lv_obj_t *img = lv_img_create(scr);
   lv_show_img(img,Luckfox);
   lv_obj_center(img);

3.3 Main Program

main.c

#include "lvgl/lvgl.h"
#include "DEV_Config.h"
#include "lv_drivers/display/fbdev.h"
#include <unistd.h>
#include <pthread.h>
#include <time.h>
#include <sys/time.h>

#define DISP_BUF_SIZE (240 * 240)

/*Image declare*/
LV_IMG_DECLARE(Luckfox);  
LV_IMG_DECLARE(cat);  
LV_IMG_DECLARE(galaxy);  
LV_IMG_DECLARE(saint);  

void fbdev_flush(lv_disp_drv_t * drv, const lv_area_t * area, lv_color_t * color_p);

/**
 * A meter with multiple arcs
 */

void lv_show_img(lv_obj_t * img,const lv_img_dsc_t img_dat){
    lv_obj_clean(img);
    lv_img_set_src(img, &img_dat);
    lv_obj_center(img);
}

int main(void)
{
    /*LittlevGL init*/
    lv_init();

    /*Linux frame buffer device init*/
    fbdev_init();

    /*A small buffer for LittlevGL to draw the screen's content*/
    static lv_color_t buf[DISP_BUF_SIZE];

    /*Initialize a descriptor for the buffer*/
    static lv_disp_draw_buf_t disp_buf;
    lv_disp_draw_buf_init(&disp_buf, buf, NULL, DISP_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   = fbdev_flush;
    disp_drv.hor_res    = 240;
    disp_drv.ver_res    = 240;
    lv_disp_drv_register(&disp_drv);

    /*Initialize pin*/
    DEV_ModuleInit();

    /*Show an image*/
    lv_obj_t *scr = lv_disp_get_scr_act(NULL);
    lv_obj_t *img = lv_img_create(scr);
    lv_show_img(img,Luckfox);
    lv_obj_center(img);

    /*Create a cursor*/
    lv_obj_t *cursor = lv_img_create(scr);
    lv_img_set_src(cursor, LV_SYMBOL_GPS);
    lv_obj_set_pos(cursor, 70, 120);
    int x=70,y=120,move=0;

    /*Handle LitlevGL tasks (tickless mode)*/
    while(1) {
        lv_timer_handler();
        usleep(5000);

        /*Key*/
        if(GET_KEYA == 0){
            lv_show_img(img,Luckfox);
        }
        else if(GET_KEYB == 0){
            lv_show_img(img,cat);
        }
       else if(GET_KEYX == 0){
            lv_show_img(img,galaxy);
        }            
        else if(GET_KEYY == 0){
            lv_show_img(img,saint);
        }

        /*Joystick*/
        if(GET_KEY_UP == 0){
            x += 1;
            if(x > 226)x = 226;
            move =1;
        }
        else if(GET_KEY_DOWN == 0){
            x -= 1;
            if(x < 0)x = 0;
            move =1;
        }
       else if(GET_KEY_LEFT == 0){
            y -= 1;
            if(y < 0)y = 0;
            move =1;
        }            
        else if(GET_KEY_RIGHT == 0){
            y += 1;
            if(y > 224)y = 224;
            move =1;
        }
       else if(GET_KEY_PRESS == 0){
            x = 70;
            y = 120;
            move =1;
        }
        if(move == 1){
            lv_obj_set_pos(cursor, x, y);
            move = 0;
        }
    }

    return 0;
}

/*Set in lv_conf.h as `LV_TICK_CUSTOM_SYS_TIME_EXPR`*/
uint32_t custom_tick_get(void)
{
    static uint64_t start_ms = 0;
    if(start_ms == 0) {
        struct timeval tv_start;
        gettimeofday(&tv_start, NULL);
        start_ms = (tv_start.tv_sec * 1000000 + tv_start.tv_usec) / 1000;
    }

    struct timeval tv_now;
    gettimeofday(&tv_now, NULL);
    uint64_t now_ms;
    now_ms = (tv_now.tv_sec * 1000000 + tv_now.tv_usec) / 1000;

    uint32_t time_ms = now_ms - start_ms;
    return time_ms;
}

Code analysis:

Image Declarations

Sequentially declare the images that will be used in the program

/*Image declare*/
LV_IMG_DECLARE(Luckfox);  
LV_IMG_DECLARE(cat);  
LV_IMG_DECLARE(galaxy);  
LV_IMG_DECLARE(saint);  

Pin Initialization

Call the interface to initialize the control pins of the LCD

/*Initialize pin*/
DEV_ModuleInit();

Display Images

This code segment is used to display an image in the LVGL graphics interface and center the image on the currently active screen.

/*Show an image*/
lv_obj_t *scr = lv_disp_get_scr_act(NULL);
lv_obj_t *img = lv_img_create(scr);
lv_show_img(img,Luckfox);
lv_obj_center(img);

• lv_disp_get_scr_act(NULL): Get the currently active screen object. lv_obj_t *scr points to this screen object.
• lv_img_create(scr): Create an image object on the screen object. lv_obj_t *img points to the created image object.
• lv_show_img(img, Luckfox): Display the image named Luckfox on the created image object.
• lv_obj_center(img): Center the image object on the screen.

When the user presses buttons A, B, X, and Y separately, control the LCD to display different images.

/*Key*/
if(GET_KEYA == 0){
    lv_show_img(img,Luckfox);
}
else if(GET_KEYB == 0){
    lv_show_img(img,cat);
}
else if(GET_KEYX == 0){
    lv_show_img(img,galaxy);
}            
else if(GET_KEYY == 0){
    lv_show_img(img,saint);
}

Display Cursor

The purpose of this code is to create a cursor object, set the position and image source of the cursor.

/*Create a cursor*/
lv_obj_t *cursor = lv_img_create(scr);
lv_img_set_src(cursor, LV_SYMBOL_GPS);
lv_obj_set_pos(cursor, 70, 120);
int x=70,y=120,move=0;

• lv_img_create(scr): Creates an image object on the screen. lv_obj_t *cursor points to the created image object, which will be used as a cursor.
• lv_img_set_src(cursor, LV_SYMBOL_GPS): Sets the image source of the cursor to the GPS symbol. LV_SYMBOL_GPS is a GPS symbol defined in the LVGL library.
• lv_obj_set_pos(cursor, 70, 120): Sets the position of the cursor to (70, 120).
• int x = 70, y = 120, move = 0;: Defines three variables representing the initial horizontal coordinate x, vertical coordinate y, and the movement flag move of the cursor.

This code segment enables the control of the cursor position on the screen using a joystick. When the user operates the joystick, the x and y values change based on the direction. The move flag is then set to 1. Subsequently, when the move flag is 1, the cursor position is updated, achieving the effect of moving the cursor.

/*Joystick*/
if(GET_KEY_UP == 0){
    x += 1;
    if(x > 226)x = 226;
    move =1;
}
else if(GET_KEY_DOWN == 0){
    x -= 1;
    if(x < 0)x = 0;
    move =1;
}
else if(GET_KEY_LEFT == 0){
    y -= 1;
    if(y < 0)y = 0;
    move =1;
}            
else if(GET_KEY_RIGHT == 0){
    y += 1;
    if(y > 224)y = 224;
    move =1;
}
else if(GET_KEY_PRESS == 0){
    x = 70;
    y = 120;
    move =1;
}
if(move == 1){
    lv_obj_set_pos(cursor, x, y);
    move = 0;
}

3.4 Implementation Results

1. Hardware Connection
   
2. Display Effect