使用SquareLine Studio创建LVGL项目到IMX6uLL平台

---

前言

遇到的问题：#error LV_COLOR_DEPTH should be 16bit to match SquareLine Studio's settings，解决方法见# 四、交叉编译

一、SquareLine Studio是什么？

SquareLine Studio 是 LVGL 官方推出的一款跨平台 UI 开发工具，支持 Windows、Linux 和 macOS 平台。SquareLine Studio 采用所见即所得的开发方式，可大大减少用户开发 UI 的时间。
官网https://squareline.io/downloads

二、下载安装

1.注册

2.打开软件
下载为软件压缩包，解压缩后双击运行安装程序直接安装【点击option可以自己指定安装路径】即可，安装完成后打开软件，输入注册邮箱、密码，点击 LOG IN：

勾选获取的许可证，点击 SELECT LICENSE：

许可证获取成功，点击 START SQUARELINE 即可开始使用：

https://blog.csdn.net/abcabc123123123123/article/details/124852542

三、工程配置

1.创建工程

2.设计界面
自行设计，这里只是做一个测试

3.设置路径

4.导出源码

设置的路径下面就有如下文件：

四、交叉编译

1.LVGL环境
参考：https://blog.csdn.net/weixin_44236302/article/details/137449365

将上面生成的代码放在ui文件目录下：

2.更改Makefile文件
将以下代码添加到Makefile中

# 添加源文件目录  根据自己ui目录下面的文件夹添加
VPATH += :$(LVGL_DIR)/ui
VPATH += :$(LVGL_DIR)/ui/components
VPATH += :$(LVGL_DIR)/ui/fonts
VPATH += :$(LVGL_DIR)/ui/screens# 添加头文件目录 根据自己ui目录下面的文件夹添加
CFLAGS += -I$(CURDIR)/ui
CFLAGS += -I$(CURDIR)/ui/components
CFLAGS += -I$(CURDIR)/ui/fonts
CFLAGS += -I$(CURDIR)/ui/screens# CSRCS 			+=$(LVGL_DIR)/mouse_cursor_icon.c 
#根据自己ui目录下面的文件夹添加
UI_CSRCS += $(wildcard ui/*.c)
UI_CSRCS += $(wildcard ui/components/*.c)
UI_CSRCS += $(wildcard ui/screens/*.c)

3.更改Main.c文件

#include "lvgl/lvgl.h"
#include "lvgl/demos/lv_demos.h"
#include "lv_drivers/display/fbdev.h"
#include "lv_drivers/indev/evdev.h"
#include <unistd.h>
#include <time.h>
#include <sys/time.h>
#include <stdio.h>
#include "ui/ui.h"#define DISP_BUF_SIZE (800 * 480)int main(void)
{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    = 800;//根据自己的LCD分辨率更改disp_drv.ver_res    = 480;//根据自己的LCD分辨率更改lv_disp_drv_register(&disp_drv);/* Linux input device init */evdev_init();/* Initialize and register a display input driver */lv_indev_drv_t indev_drv;lv_indev_drv_init(&indev_drv);      /*Basic initialization*/indev_drv.type = LV_INDEV_TYPE_POINTER;indev_drv.read_cb = evdev_read;lv_indev_t * my_indev = lv_indev_drv_register(&indev_drv); /*Create a Demo*///lv_demo_widgets();ui_init();/*Handle LVGL tasks*/while(1) {lv_timer_handler();usleep(5000);}return 0;
}/*Set in lv_conf.h as `LV_TICK_CUSTOM_SYS_TIME_EXPR`*/
uint32_t custom_tick_get(void)
{static uint64_t start_ms = 0;if(start_ms == 0) {struct timeval tv_start;gettimeofday(&tv_start, NULL);start_ms = (tv_start.tv_sec * 1000000 + tv_start.tv_usec) / 1000;}struct timeval tv_now;gettimeofday(&tv_now, NULL);uint64_t now_ms;now_ms = (tv_now.tv_sec * 1000000 + tv_now.tv_usec) / 1000;uint32_t time_ms = now_ms - start_ms;return time_ms;
}

3.执行编译
切换到工程目录文件

执行make

报错：#error "LV_COLOR_DEPTH should be 16bit to match SquareLine Studio's settings"

解决办法：

进入ui文件夹【自己生成的源目录下面】找到ui.c文件中的TEST LVGL SETTINGS

如果报错为should be 16bit ，那么将#if LV_COLOR_DEPTH != 32改为#if LV_COLOR_DEPTH != 16

如果报错为should be 32bit ，那么将#if LV_COLOR_DEPTH != 16改为#if LV_COLOR_DEPTH != 32

make clean清除编译文件之后，在make
编译成功之后，会在工程目录下生成一个build文件，其中bin文件下面的就是可执行文件【拷贝到开发板上，使用nfs挂载之后，运行】