LittlevGL測試Demo

前言

上一篇文章LittlevGL初體驗寫了如何在Ubuntu中運行lvgl，這篇文章主要說明如何使用lvgl 6.0.2和lvgl 5.3編寫簡單測試用例

LVGL 6.0.2

話不多說，先看效果圖

下面是主要代碼函數，lvgl初始化完成之後，調用該函數即可

#define CANVAS_WIDTH  320
#define CANVAS_HEIGHT  480

void lv_show_color(void) {
	/*Create a style*/
    static lv_style_t style;
    lv_style_copy(&style, &lv_style_plain);		/*Copy a built-in style to initialize the new style*/
    style.body.main_color = LV_COLOR_RED;		/*Main color (top color)*/
    style.body.grad_color = LV_COLOR_MAROON;	/*Gradient color (bottom color)*/
    style.body.radius = 4;						/*Corner radius. (set to LV_RADIUS_CIRCLE to draw circle)*/
    style.body.border.width = 2;				/*Border width*/
    style.body.border.color = LV_COLOR_WHITE;	/*Border color*/
    style.body.shadow.color = LV_COLOR_WHITE;	/*Shadow color*/
    style.body.shadow.width = 4;				/*Shadow width*/
    style.line.width = 2;						/*Line width*/
    style.line.color = LV_COLOR_BLACK;			/*Line color*/
    style.text.color = LV_COLOR_WHITE;			/*Text color*/

    static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];

	/*Create a simple canvas*/
    lv_obj_t * canvas = lv_canvas_create(lv_scr_act(), NULL);
    lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);
    lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_canvas_fill_bg(canvas, LV_COLOR_SILVER);

    lv_canvas_draw_rect(canvas, 0, 0, 320, 160, &style);
    lv_canvas_draw_text(canvas, 100, 20, 120, &style, "Red text canvas", LV_LABEL_ALIGN_LEFT);


    static lv_style_t style1;
    lv_style_copy(&style1, &lv_style_plain);
    style1.body.main_color = LV_COLOR_LIME;
    style1.body.grad_color = LV_COLOR_GREEN;
    style1.body.radius = 4;
    style1.body.border.width = 2;
    style1.body.border.color = LV_COLOR_WHITE;
    style1.body.shadow.color = LV_COLOR_WHITE;
    style1.body.shadow.width = 4;
    style1.line.width = 2;
    style1.line.color = LV_COLOR_BLACK;
    style1.text.color = LV_COLOR_WHITE;

    lv_canvas_draw_rect(canvas, 0, 160, 320, 160, &style1);
    lv_canvas_draw_text(canvas, 100, 180, 130, &style1, "Green text canvas", LV_LABEL_ALIGN_LEFT);


    static lv_style_t style2;
    lv_style_copy(&style2, &lv_style_plain);
    style2.body.main_color = LV_COLOR_BLUE;
    style2.body.grad_color = LV_COLOR_NAVY;
    style2.body.radius = 4;
    style2.body.border.width = 2;
    style2.body.border.color = LV_COLOR_WHITE;
    style2.body.shadow.color = LV_COLOR_WHITE;
    style2.body.shadow.width = 4;
    style2.line.width = 2;
    style2.line.color = LV_COLOR_BLACK;
    style2.text.color = LV_COLOR_WHITE;

    lv_canvas_draw_rect(canvas, 0, 320, 320, 160, &style2);
    lv_canvas_draw_text(canvas, 100, 340, 120, &style2, "Blue text canvas", LV_LABEL_ALIGN_LEFT);
}

lvgl有官方幫助文檔，可以訪問LittlevGL’s documentation查看

LVGL 5.3

話不多說，先看效果圖

下面是主要代碼函數，lvgl初始化完成之後，調用該函數即可

void lv_show_color(void) {
	/*Create a style*/
	static lv_style_t style1;
	lv_style_copy(&style1, &lv_style_plain);    /*Copy a built-in style to initialize the new style*/
	style1.body.main_color = LV_COLOR_RED;		/*Main color (top color)*/
	style1.body.grad_color = LV_COLOR_MAROON;	/*Gradient color (bottom color)*/
	style1.body.radius = 4;						/*Corner radius. (set to LV_RADIUS_CIRCLE to draw circle)*/
	style1.body.border.color = LV_COLOR_GRAY;	/*Border color*/
	style1.body.border.width = 2;				/*Border width*/
	style1.body.border.opa = LV_OPA_50;		/*Border opacity*/
	style1.body.padding.hor = 5;            /*Horizontal padding, used by the bar indicator below*/
	style1.body.padding.ver = 5;            /*Vertical padding, used by the bar indicator below*/
	style1.text.color = LV_COLOR_WHITE;		/*Text color*/

	/*Create a simple object*/
	lv_obj_t *obj1 = lv_obj_create(lv_scr_act(), NULL);
	lv_obj_set_style(obj1, &style1);		/*Apply the created style*/
	lv_obj_set_pos(obj1, 0, 0);				/*Set the position*/
	lv_obj_set_size(obj1, 320, 160);		/*Set the width and height*/		

	/*Create a label on the object. The label's style is NULL by default*/
	lv_obj_t *label1 = lv_label_create(obj1, NULL);
	lv_label_set_text(label1, "Red text canvas");			/*Set text content*/
	lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);      /*Align the label to the middle*/


	static lv_style_t style2;
	lv_style_copy(&style2, &lv_style_plain);
	style2.body.main_color = LV_COLOR_LIME;
	style2.body.grad_color = LV_COLOR_GREEN;
	style2.body.radius = 4;
	style2.body.border.color = LV_COLOR_GRAY;
	style2.body.border.width = 2;
	style2.body.border.opa = LV_OPA_50;
	style2.body.padding.hor = 5;
	style2.body.padding.ver = 5;
	style2.text.color = LV_COLOR_WHITE;

	lv_obj_t *obj2 = lv_obj_create(lv_scr_act(), NULL);
	lv_obj_set_style(obj2, &style2);
	lv_obj_set_pos(obj2, 0, 160);
	lv_obj_set_size(obj2, 320, 160);

	lv_obj_t *label2 = lv_label_create(obj2, NULL);
	lv_label_set_text(label2, "Green text canvas");
	lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, 0);

	static lv_style_t style3;
	lv_style_copy(&style3, &lv_style_plain);
	style3.body.main_color = LV_COLOR_BLUE;
	style3.body.grad_color = LV_COLOR_NAVY;
	style3.body.radius = 4;
	style3.body.border.color = LV_COLOR_GRAY;
	style3.body.border.width = 2;
	style3.body.border.opa = LV_OPA_50;
	style3.body.padding.hor = 5;
	style3.body.padding.ver = 5;
	style3.text.color = LV_COLOR_WHITE;

	lv_obj_t *obj3 = lv_obj_create(lv_scr_act(), NULL);
	lv_obj_set_style(obj3, &style3);
	lv_obj_set_pos(obj3, 0, 320);
	lv_obj_set_size(obj3, 320, 160);

	lv_obj_t *label3 = lv_label_create(obj3, NULL);
	lv_label_set_text(label3, "Blue text canvas");
	lv_obj_align(label3, NULL, LV_ALIGN_CENTER, 0, 0);
}

lvgl 5.3有官方幫助文檔，可以訪問Docs-v5-3.zip下載

可以看到lvgl 5.3和lvgl 6.0.2還是有一些區別的，lv_style_t結構體類似，但是lvgl 6.0.2多了一個lv_canvas_create結構體，而lvgl 5.3只能用lv_obj_create