LVGL8.1 Hi3536C platform use

Why use LVGL

There are currently quite a few UI libraries to choose from on embedded platforms, including open source, closed source, and paid ones that are completely free! I have used emWIN, MiniGUI, QT, and also implemented a set of UI libraries myself. I learned about LVGL earlier, but I didn’t have an in-depth understanding of it. In the past, it seemed that it still lacked many components of the UI library. There may be a lot of things that need to be dealt with by yourself when used in product development.

The products made in recent years all have human-computer interaction interfaces, all involving UI interface interaction. QT is mainly used, but in the embedded LINUX system, QT takes up more memory, displays on a large screen, and has UI interaction. During operation, the response is very difficult, and the 2D acceleration with the help of hardware is not easy to implement. For high resolution, it still needs a lot of optimization, and the effect is average. I have made an embedded product with VGA output before. When using QT for output, the refresh speed was obviously very slow. Later, I changed the lower layer to DFB and there was some improvement, but the effect was average.

Recently, I have been thinking that when making new products, I should consider using other UI solutions to implement them. I have learned about multiple UI solutions and watched LVGL's DEMO. I feel that the UI effect in embedded systems is even more impressive in a demo. Modern, look at the code inside, the implementation, element attributes, and control methods all have a modern feel. Looking at the code structure, it is very simple. In embedded systems, keeping it simple can directly replace the bottom layer with very few layers. This way means that we can quickly and deeply customize our system in a simple way. In application products, the functionality of the UI also feels just right. At the same time, LVGL is updated very quickly. Unlike other old UI libraries that basically stop updating or rarely update them every few years, the native controls can only be described as ancient, and the operating experience is also very old MFC style experience.

LVGL related websites

Official website

https://lvgl.io/

Github code

https://github.com/lvgl

Use version

The latest version 8.1 is used directly here.

Download the corresponding source code

LVGL

lvgl-8.1.0.tar.gz
LVGL UI library.

LV_DRIVERS

lv_drivers-release-v8.1
involves the underlying drawing method such as Framebuffer method or DRM method, whether to use SDL, input and output such as mouse, keyboard, touch, etc.

LV_PORT

lv_port_linux_frame_buffer-master, the Framebuffer method is used here, so download a configured project directly from git.

lv_demos

Some demos corresponding to lv_demos-release-v8.1.

Compile LVGL

1: Unzip lv_port_linux_frame_buffer-master in a directory. In the directory, empty lv_demos, lv_drivers, lvgl empty directories will be used, and there will be related configuration files;
2: Unzip lvgl-8.1.0.tar.gz, lv_drivers-release-v8.1, and put them in the lv_port in the previous step;
3: In order to facilitate integration with applications, we compile LVGL into a library. Here we modify the Makefile in lv_port and add the following configuration to it:
```
      lib: $(AOBJS) $(COBJS)
        $(AR) rv liblvgl.a $(AOBJS) $(COBJS)
```
4: In this way, our UI can be integrated into the application.

Running LVGL in HiSilicon Hi3536c

If you want to run the lvgl program on the Hi3536c platform, our first step basically requires the following two things:

1: Initialize some modules in the mpp system on Hi3536c such as vo, hifb;
2: Run LVGL code;

This is implemented in the PUPANVR project. A hal_media library is implemented in PUPANVR. In this library, the initialization operation of the hardware-related platform is implemented.
The following code implements the Demo operation of running LVGL:

	#include "lvgl/examples/lv_examples.h"
	#include "lvgl/lvgl.h"
	#include "lvgl/lv_port_indev.h"
	#include "lv_drivers/display/fbdev.h"
	#include "lv_drivers/indev/evdev.h"
	#include "lv_demos/lv_demo.h"
	#include <unistd.h>
	#include <pthread.h>
	#include <time.h>
	#include <sys/time.h>

	int lvgl_test(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    = 1920;
		disp_drv.ver_res    = 1080;
		lv_disp_drv_register(&disp_drv);
		
		//lv_port_indev_init();

		/*Create a Demo*/
		lv_demo_widgets();
		//lv_demo_benchmark();
		//lv_demo_keypad_encoder();
		//lv_demo_music();
		//lv_demo_stress();

		//lv_example_arc_1();
		/*Handle LitlevGL tasks (tickless mode)*/
		while(1) {
			lv_task_handler();
			usleep(5000);
		}

		return 0;
	}

	int main(int argc, char** argv)
	{
		int ret = 0;
		ret = sys_init();
		if(ret != 0)
		{
			LOG(ERROR) << "sys_init failure! ret:" << ret << endl;
			return -1;
		}

		ret = hal_media_init();
		if(ret != 0)
		{
			LOG(ERROR) << "hal_media_init failure!" << endl;
			return -1;
		}

		
		lvgl_test();

		while(1)
		{
			sleep(1);
		}

		return 0;
	}

hal_media_init initializes the operations of HiSilicon, and lvgl_test calls the demo program of lvgl.

Add mouse support

Here we use lv_drivers/indev/evdev.h to introduce mouse support.
First, enable the USE_EVDEV macro in lv_drivers, and add an indev device operation registration support to lvgl_test() in the above code.

	lv_indev_t * indev_mouse;

	int lv_indev_init()
	{
		static lv_indev_drv_t indev_drv;
		evdev_init();

		/*Register a mouse input device*/
		lv_indev_drv_init(&indev_drv);
		indev_drv.type = LV_INDEV_TYPE_POINTER;
		indev_drv.read_cb = evdev_read;
		indev_mouse = lv_indev_drv_register(&indev_drv);

		/*Set cursor. For simplicity set a HOME symbol now.*/
		lv_obj_t * mouse_cursor = lv_img_create(lv_scr_act());
		lv_img_set_src(mouse_cursor, LV_SYMBOL_SETTINGS);
		lv_indev_set_cursor(indev_mouse, mouse_cursor);

		return 0;
	}
	
在lvgl_test里的 lv_disp_drv_register之及调用lv_indev_init即可!

In this way, the running Demo can be interacted with the mouse in the UI!
The UI is very fresh and has a modern feel. Many modern mobile phone and platform interaction methods can be reflected on it! Eliminate the need to implement special effects in the embedded system in the UI.

Judging from the above usage process, LVGL has not even completed a complete compilation project! But this just shows its simplicity! It's not a shortcoming, but it's more like an advantage!

There are few levels of abstraction and it is easy to transplant! There is no other burden!