【匠芯创D133CBS】--5.使用GuiGuider 配置LVGL

andeyqi

【匠芯创D133CBS】--5.使用GuiGuider 配置LVGL [复制链接]

<i class="pstatus"> 本帖最后由 andeyqi 于 2024-9-28 08:28 编辑 </i>

## 简介
   开发板已经一致适配了LVGL,SDK里也已经集成一些写好的demo,本次使用GuiGuider 来年生成显示界面并在办卡上显示。
   
## GuiGuider 界面配置
在GuiGuider 下配置screen 分辨率为1024*600 及screen 颜色添加switch 和 led 控件，通过switch 控件来控制led 空间的点亮熄灭，模拟点灯场景。

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847436" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847436&handlekey=savephoto_847436">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

设置switch 开关的click event,用于控制led 的点亮熄灭。

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847437" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847437&handlekey=savephoto_847437">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

配置好上诉event 后，会在event_init.c 中生成如下代码我们只要在里面添加对应的处理即可。
```c
#include "events_init.h"
#include <stdio.h>
#include "lvgl.h"

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

static void screen_sw_1_event_handler (lv_event_t *e)
{
	lv_event_code_t code = lv_event_get_code(e);

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:
		{
			
			break;
		}
		case 1:
		{
			
			break;
		}
		default:
			break;
		}
		break;
	}
	default:
		break;
	}
}
```
至此Guiguider 已经配置好了，我们继续修改SDK 添加GuiGuider 的demo 支持。

## GuiGuider 代码添加至SDK
```c
LVGL 启动流程如下
lvgl_thread_init
==》rt_thread_init //创建LVGL thread
====》lvgl_thread_entry
======》lv_port_disp_init();//初始化配置LCD显示
======》lv_port_indev_init();//配置触摸屏输入响应
======》lv_user_gui_init();//配置显示界面
========》aic_ui_init()
```
最终会调用到aic_ui_init（）函数这个函数里会配置LVGL界面配置，我们GuiGuider 代码调用也要放到此处，，该函数内根据不同的宏配置运行不同的demo,对应代码如下：
```c
void aic_ui_init()
{
/* qc test demo is only for aic internal qc testing, please ignore it. */

#ifdef LPKG_USING_LVGL_VSCODE
    extern void vscode_ui_init();
    vscode_ui_init();
    return;
#endif

#ifdef AIC_LVGL_BASE_DEMO
#include "base_ui.h"
    base_ui_init();
#endif

#ifdef AIC_LVGL_METER_DEMO
#include "meter_ui.h"
    meter_ui_init();
#endif

#ifdef AIC_LVGL_LAUNCHER_DEMO
    extern void launcher_ui_init();
    launcher_ui_init();
#endif

#ifdef AIC_LVGL_MUSIC_DEMO
    extern void lv_demo_music(void);
    lv_demo_music();
#endif

#ifdef AIC_LVGL_DASHBOARD_DEMO
    extern void dashboard_ui_init(void);
    dashboard_ui_init();
#endif

#ifdef AIC_LVGL_SHOWCASE_DEMO
    extern void showcase_demo_init(void);
    showcase_demo_init();
#endif

#ifdef AIC_LVGL_ELEVATOR_DEMO
#include "elevator_ui.h"
    elevator_ui_init();
#endif

#ifdef AIC_LVGL_SLIDE_DEMO
    extern void slide_ui_init(void);
    slide_ui_init();
#endif

#ifdef AIC_LVGL_SIMPLE_PLAYER_DEMO
    extern void simple_player_ui_init(void);
    simple_player_ui_init();
#endif
    return;
}
```

根据上述的代码结构我们添加AIC_LVGL_GUI_GUIDER 配置项目。

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847438" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847438&handlekey=savephoto_847438">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

在menuconfig 配置界面内选择该demo

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847439" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847439&handlekey=savephoto_847439">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

在aic_ui_init() 函数内添加Guiguider 初始化代码，并将GuiGuider 生成的代码加入工程编译。

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847440" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847440&handlekey=savephoto_847440">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_847441" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=847441&handlekey=savephoto_847441">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

配置好后在switch 的event 响应中添加LED 点亮熄灭的控制代码，对应switch case 0/1 的内容部分。
```c
extern  lv_ui guider_ui;

static void screen_sw_1_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:
		{
            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:
		{
            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;
	}
}
```

## 编译运行
将上述代码编译通过后运行效果如下，LVGL已经按照设计的方式运行。
<div id="player_2f5f2a13e6268400be7518adc71877780" class="localvideo-box"></div><div class="localvideo-title">459ada45c97138de0665ea8367fc0ea4</div><br/>

wangerxian

GuiGuider做复杂的界面可以吗？

andeyqi

wangerxian 发表于 2024-9-29 17:41 GuiGuider做复杂的界面可以吗？

可以, guiguider 的示例里有比较复杂的姐买你像数字仪表的demo

wangerxian

andeyqi 发表于 2024-9-29 17:59 可以, guiguider 的示例里有比较复杂的姐买你像数字仪表的demo

那可以尝试用这个软件设计LVGL~

【匠芯创D133CBS】--5.使用GuiGuider 配置LVGL [复制链接]

最新回复

点评

点评