LVGL之SquareLine studio开发linux图形界面

原创已于 2026-01-29 11:14:07 修改 · 4.2k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#linux #lvgl #SquareLine

于 2023-05-24 09:58:21 首次发布

LINUX 同时被 2 个专栏收录

46 篇文章

订阅专栏

图形库，QT，LVGL

8 篇文章

订阅专栏

文章详细介绍了如何在Linux和Windows环境下安装SDL库和LVGL软件，通过SquareLine新建工程并设计界面，然后导出源码。在Linux中进行编译时，需注意32位库的安装和Makefile配置，最终通过`makeclean`和`make-j8`生成可执行文件，并将画面输出到SSH终端。

1：安装SDL库和LVGL软件

linux：安装SDL库
sudo apt-get install libsdl2-dev
(判断自己的SDL库可不可以用直接找
一个main.c编译的时候 -lSDL2 ,没有报找不到SDL2就表明可以用)

windows：安装SquareLine studio
打开LVGL官网下载免费的版本安装即可

2：打开SquareLine新建工程

新建工程，记得把工程保存到自己记得的位置
如果要添加资源文件，例如图片字体等，就需要打开最下面的
ADD FILE INTO ASSETS 按钮，在弹出的文件筐里面放入自己的资源

接着设计自己界面，设计好了之后点击右上角的运行模拟看看
没问题之后导出
点击创建模板工程，把模板工程的位置放在linux文件夹下面
此模板工程包含了源码
注意：（只需要导出一次源码，第二次导出会覆盖之前的一切）
注意：如果又修改了图形界面，此时只需要导出UI文件就行了

在这里插入图片描述

3：编译LVGL

1：把这个Makefile文件放入刚刚导出源码工程的顶层目录

注意:如果是编译32位的程序,则主机需要安装32位的SDL库:
sudo apt-get install libsdl2-dev:i386
使用"-m32"参数告诉编译器使用32位的目标文件
使用"-L/path/to/32bit/sdl/lib"告诉链接器在32位的
库路径"/path/to/32bit/sdl/lib"中查找库文件

#
# Makefile
#
# ⭐全速编译命令： make clean && make -j$(nproc)

CC ?= gcc
#CC := arm-buildroot-linux-gnueabihf-gcc	# 注意配置工具链!

LVGL_DIR_NAME ?= lvgl
LVGL_DIR ?= ${shell pwd}
CFLAGS ?= -O3 -g0 -I$(LVGL_DIR)/  -Wall -Wshadow \
								-Wundef -Wmissing-prototypes \
								-Wno-discarded-qualifiers -Wall \
								-Wextra -Wno-unused-function \
								-Wno-error=strict-prototypes \
								-Wpointer-arith -fno-strict-aliasing \
								-Wno-error=cpp -Wuninitialized \
								-Wmaybe-uninitialized -Wno-unused-parameter \
								-Wno-missing-field-initializers -Wtype-limits \
								-Wsizeof-pointer-memaccess -Wno-format-nonliteral \
								-Wno-cast-qual -Wunreachable-code \
								-Wno-switch-default -Wreturn-type \
								-Wmultichar -Wformat-security \
								-Wno-ignored-qualifiers -Wno-error=pedantic \
								-Wno-sign-compare -Wno-error=missing-prototypes \
								-Wdouble-promotion -Wclobbered \
								-Wdeprecated -Wempty-body \
								-Wtype-limits -Wshift-negative-value \
								-Wstack-usage=2048 \
								-Wno-unused-value -Wno-unused-parameter \
								-Wno-missing-field-initializers \
								-Wuninitialized -Wmaybe-uninitialized \
								-Wall -Wextra -Wno-unused-parameter \
								-Wno-missing-field-initializers -Wtype-limits \
								-Wsizeof-pointer-memaccess \
								-Wno-format-nonliteral -Wpointer-arith \
								-Wno-cast-qual -Wmissing-prototypes \
								-Wunreachable-code -Wno-switch-default \
								-Wreturn-type -Wmultichar -Wno-discarded-qualifiers \
								-Wformat-security -Wno-ignored-qualifiers -Wno-sign-compare
LDFLAGS ?= -lm -lSDL2
BIN = kunkun_show


#Collect the files to compile
MAINSRC = ./main.c

include $(LVGL_DIR)/lvgl/lvgl.mk
include $(LVGL_DIR)/lv_drivers/lv_drivers.mk
#include $(LVGL_DIR)/lv_100ask_teach_demos/lv_100ask_teach_demos.mk
include $(LVGL_DIR)/ui/ui.mk


OBJEXT ?= .o

AOBJS = $(ASRCS:.S=$(OBJEXT))
COBJS = $(CSRCS:.c=$(OBJEXT))

MAINOBJ = $(MAINSRC:.c=$(OBJEXT))

SRCS = $(ASRCS) $(CSRCS) $(MAINSRC)
OBJS = $(AOBJS) $(COBJS)

## MAINOBJ -> OBJFILES

all: default

%.o: %.c
	$(CC)  $(CFLAGS) -c $< -o $@
	@echo "CC $<"
    
default: $(AOBJS) $(COBJS) $(MAINOBJ)
	$(CC) -o $(BIN) $(MAINOBJ) $(AOBJS) $(COBJS) $(LDFLAGS)
	mkdir -p $(LVGL_DIR)/obj $(LVGL_DIR)/bin
	mv *.o $(LVGL_DIR)/obj/
	mv $(BIN) $(LVGL_DIR)/bin/

clean: 
	rm -f $(BIN) $(AOBJS) $(COBJS) $(MAINOBJ) ./bin/* ./obj/*

2：把这个ui.mk放入ui目录下

UI_DIR_NAME ?= ui

CSRCS += $(wildcard $(LVGL_DIR)/$(UI_DIR_NAME)/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(UI_DIR_NAME)/fonts/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(UI_DIR_NAME)/screens/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(UI_DIR_NAME)/images/*.c)

3:修改lvgl目录下的lvgl.mk

# include $(LVGL_DIR)/$(LVGL_DIR_NAME)/demos/lv_demos.mk
# include $(LVGL_DIR)/$(LVGL_DIR_NAME)/examples/lv_examples.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/core/lv_core.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/draw/lv_draw.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/extra/lv_extra.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/font/lv_font.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/hal/lv_hal.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/misc/lv_misc.mk
include $(LVGL_DIR)/$(LVGL_DIR_NAME)/src/widgets/lv_widgets.mk

4:修改lv_drivers目录下的lv_drivers.mk

LV_DRIVERS_DIR_NAME ?= lv_drivers

CSRCS += $(wildcard $(LVGL_DIR)/$(LV_DRIVERS_DIR_NAME)/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(LV_DRIVERS_DIR_NAME)/wayland/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(LV_DRIVERS_DIR_NAME)/indev/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(LV_DRIVERS_DIR_NAME)/gtkdrv/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(LV_DRIVERS_DIR_NAME)/display/*.c)
CSRCS += $(wildcard $(LVGL_DIR)/$(LV_DRIVERS_DIR_NAME)/sdl/*.c)

5:执行 
make clean
make -j8
在bin目录下就可以得到可执行文件

4:把linux的画面输出到ssh终端

linux下执行命令:
sudo cp /home/user/.Xauthority /boot/
其中user是自己的用户名
最后直接运行bin文件下的文件就可以看到LVGL画面了