使用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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

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挂载之后，运行】