EEPW论坛

简介：

我们在之前的LVGL 试验已经完成了LCD 显示及TOUCH 响应，之前跑的是LVGL 自带的demo程序，我们在此基础上继续使用GuiGuider 完成一个简单的界面显示。首先使用GuiGuider 创建一个800*480 的空白工程。

创建好工程后我继续添加背景图片，及switch 组件及LED 组件

我们计划使用switch 空间控制板子的LED 点亮熄灭，使用 GuiGuider  设置switch  的点击事件，对应配置如下：

至此我们的配置工作就完成了，使用GuiGuider   生成配置如下配置代码我们只要在代码中添加LED 的点亮熄灭及led 组件的颜色亮度配置，对应代码如下。

/*
* Copyright 2024 NXP
* NXP Confidential and Proprietary. This software is owned or controlled by NXP and may only be used strictly in
* accordance with the applicable license terms. By expressly accepting such terms or by downloading, installing,
* activating and/or otherwise using the software, you are agreeing that you have read, and that you agree to
* comply with and are bound by, such license terms.  If you do not agree to be bound by the applicable license
* terms, then you may not retain, install, activate or otherwise use the software.
*/

#include "events_init.h"
#include <stdio.h>
#include "lvgl.h"
#include "main.h"
#include <stdlib.h>

#if LV_USE_FREEMASTER
#include "freemaster_client.h"
#endif

extern  lv_ui guider_ui;

static void screen_LED_event_handler (lv_event_t *e)
{
	lv_event_code_t code = lv_event_get_code(e);
    lv_color_t led_color;
    
	switch (code) {
	case LV_EVENT_CLICKED:
	{
		lv_obj_t * status_obj = lv_event_get_target(e);
		int status = lv_obj_has_state(status_obj, LV_STATE_CHECKED) ? 1 : 0;
		switch(status) {
		case 0:
		{
			printf("led off\r\n");
            BSP_LED_Off(LD1);
            led_color.ch.green = 0x3f;
            led_color.ch.blue = 0x00;
            led_color.ch.red = 0x00;
            lv_led_set_color(guider_ui.screen_led_1,led_color);
            lv_led_set_brightness(guider_ui.screen_led_1,0);
			break;
		}
		case 1:
		{
			printf("led on\r\n");
            BSP_LED_On(LD1);
            led_color.ch.green = 0x3f;
            led_color.ch.blue = 0x00;
            led_color.ch.red = 0x00;
            lv_led_set_color(guider_ui.screen_led_1,led_color);
            lv_led_set_brightness(guider_ui.screen_led_1,255);
			break;
		}
		default:
			break;
		}
		break;
	}
	default:
		break;
	}
}
void events_init_screen(lv_ui *ui)
{
	lv_obj_add_event_cb(ui->screen_LED, screen_LED_event_handler, LV_EVENT_ALL, ui);
}

void events_init(lv_ui *ui)
{

}

将生成的代码加入工程编译

编译通过后在lvgl task内调用guiguider 生成的代码。

void start_task1(void *pvParameters)
{
#if (0 == USED_DMA2D_TEST_CODE)
    printf("lvgl benchmark demo started\r\n");
    
    //lv_port_pre_init();
    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    s_lvgl_initialized = true;

    //lv_demo_benchmark();
    //lv_demo_music();

    //s_lvgl_initialized = true;

    setup_ui(&guider_ui);
    events_init(&guider_ui);
    custom_init(&guider_ui);
    
    for (;;)
    {
        lv_task_handler();
        vTaskDelay(5);
    }

下载到板子运行验证，switch 开启时板子的绿色LED 被点亮而且led 组件也是点亮状态

下载到板子运行验证，switch 开启时板子的绿色LED 被熄灭而且led 组件也是熄灭状态

使用GuiGuider  来设计界面会大大提高效率，我们只需要在PC上拖拖拽拽点点配置即可完成UI界面的配置。