[RVB2601 Creative Application Development] LVGL Horizontal Scrolling Display

lugl4313820

[RVB2601 Creative Application Development] LVGL Horizontal Scrolling Display [Copy link]

 

[Pingtou Ge RVB2601 Creative Application Development] MP3 Player - Pingtou Ge RISC-V RVB2601 Activity Zone - Electronic Engineering World - Forum (eeworld.com.cn)

[Pingtou Ge RVB2601 Creative Application Development] Unboxing + Detailed Picture Sharing - Pingtou Ge RISC-V RVB2601 Activity Zone - Electronic Engineering World - Forum (eeworld.com.cn)

LVGL (Lightweight and Versatile Graphics Library) is a free, open-source graphics library that provides everything you need to create embedded GUIs with easy-to-use graphical elements, beautiful visual effects, and a low memory footprint.

The author of LVGL is Gabor Kiss-Vamosikisvegabor from Hungary. LVGL is written in C language to achieve maximum compatibility (compatible with C++). The simulator can start embedded GUI design on PC without embedded hardware. At the same time, as a graphics library, LVGL comes with nearly thirty kinds of small tools for developers to use. These powerful building block buttons are paired with very smooth animations and advanced graphics that can achieve smooth scrolling. At the same time, it has low configuration requirements and open source attributes. The significant advantages make LVGL popular and become the first choice for developers when choosing GUI.

Key Features

• Powerful building blocks like buttons, charts, lists, sliders, images, and more.
• Advanced graphics animation, anti-aliasing, opacity, smooth scrolling
• Various input devices, such as touchpad, mouse, keyboard, encoder, etc.
• Multi-language support and UTF-8 encoding
• Multi-monitor support, i.e. using more TFT, monochrome displays simultaneously
• Fully customizable graphic elements and CSS class styles
• Hardware independent for use with any microcontroller or display
• Scalable, uses little memory (64kb Flash, 16kb RAM)
• OS, external memory, and GPU are supported but not required
• Single framebuffer operation, even with advanced graphics effects
• Written in C for maximum compatibility (C++ compatible)
• Simulator to start embedded GUI design on a PC without embedded hardware
• Bindings to MicroPython
• Tutorials, examples, topics for rapid GUI design
• Documentation is available online and in PDF format
• Free and open source under the MIT License

The official ch2601_gui has been ported with lvgl. Although I used the native spi to drive the onboard 128*64, after seeing lvgl, I felt that this library is very powerful. But I have never been exposed to it before, so I have watched some tutorials repeatedly in the past few days. The first is to watch videos on Bilibili. The one I gained the most from here is this: LVGL Open Source GUI Zero-Base Introductory Course (Produced by Wei Dongshan) The tutorial is based on the lvgl v8.2 version, and the course is adapted to multiple platforms and multiple boards (Linux MCU GUI, littleVGL tutorial)_bilibili_bilibili . In this tutorial, I understand how the label tags in the demo are initialized and the basic settings are done.

The following is the display of labels:

1. First, you need to introduce the header file:

lvgl.h This is like the manager of lvgl, such as stm32f10x.h.

lv_label.h If you want to use label, you have to include this header file.

2. Initialize lvgl task function:

static void gui_lvgl_task(void *arg)
{
    lv_init(); //初始化
    /*Initialize for LittlevGL*/
    oled_init(); //oled的初始、硬件

    gui_label_create();//显示初始图像 
    while (1) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        aos_msleep(5);
        lv_tick_inc(1);
    }
}

3. Label creation function:

static void gui_label_create(void)
{
    lv_obj_t *label1 = lv_label_create(lv_scr_act(), NULL); //创建lable对象 labe1
    lv_label_set_long_mode(label1, LV_LABEL_LONG_BREAK);     /*显示模式固定*/ 
	lv_label_set_align(label1, LV_LABEL_ALIGN_CENTER);       /*居中显示*/
	lv_obj_set_pos(label1, 0, 0);                            /*显示的起始坐标*/                  
	lv_obj_set_size(label1, 128, 30);                       /*显示框的大小*/
    lv_label_set_text(label1,"RISC-V\nRVB2601");            /*显示标签的内容*/
    lv_obj_set_width(label1, 128);                          /*设置显示的宽度*/
    lv_obj_align(label1, NULL, LV_ALIGN_IN_TOP_MID, 0, 0);  /*靠项端居中显示*/
	
    lv_obj_t * label3 = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_long_mode(label3, LV_LABEL_LONG_SROLL_CIRC);     /*轮动显示*/
    lv_obj_set_width(label3, 150);
    lv_label_set_text(label3, "Hello EEWOLRD，2022-03-11！");
    lv_obj_align(label3, NULL, LV_ALIGN_CENTER, 0, 20);           

}

4. Dynamic display time:

static void get_time_task(void *arg)
{
	csi_rtc_time_t this_time;
	init_my_rtc();  //初始化RTC
	label2 = lv_label_create(lv_scr_act(), NULL); //创建lable对象 labe1
	lv_label_set_long_mode(label2, LV_LABEL_ALIGN_AUTO);     /*显示模式*/ 
	lv_label_set_align(label2, LV_LABEL_ALIGN_CENTER);       /*Center aligned lines*/
	lv_obj_set_pos(label2,0,26);
	lv_obj_set_width(label2, 128);
	//lv_label_set_text_fmt(label2,"time:%d",t);
	lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, 5);
	while(1){
		csi_rtc_get_time(&g_rtc, &this_time);  //获取时间
		aos_msleep(1);
        //动态显示时间
		lv_label_set_text_fmt(label2,"%d-%02d-%02d %02d:%02d:%02d",this_time.tm_year+1900,this_time.tm_mon,this_time.tm_mday,this_time.tm_hour,this_time.tm_min,this_time.tm_sec);
		aos_msleep(5);
		lv_tick_inc(1);
	}
}

5. The main function creates two functions, one for displaying scroll labels and one for displaying real time:

int main(void)
{
    board_yoc_init();
    aos_task_new("gui", gui_lvgl_task, NULL, 10 * 1024); //显示标签，平行移动标签
	aos_task_new("rtc",get_time_task,NULL,10*1024);      //显示实时RTC时间
    return 0;
}

RVB260 is powerful, LVGL is also powerful, and the combination is even more powerful. I have just started to use it, so I can only say that I have touched the surface. I still need to continue to study hard. I also hope to communicate and learn more with forum friends.

littleshrimp

This is good

nmg

Others who want to create works based on lvgl can take a look here

PS: Change your tag to "Experience Sharing" and "Work Submission" is for when you submit your complete work.