LVGL之SquareLine studio开发linux图形界面

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画面了
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
LVGL 是一个开源的 GUI 库,LittlevGL 是 LVGL 的微型版本,它专注于嵌入式设备的 GUI 开发。在 LVGL 中,可以使用文件系统来加载和管理 GUI 资源。 在 LVGL 中,可以使用文件系统来存储和读取图像、字体、样式表等 GUI 资源。通过图形界面编辑器或者代码,可以将这些资源存储在文件系统中,以便在程序运行时使用。 使用文件系统的好处之一是可以将 GUI 资源与代码分离,使得开发更加灵活和可维护。通过使用文件系统,可以将资源放在外部存储设备上,如 SD 卡或闪存中,并在需要时动态加载到内存中使用。这使得能够动态地更新和更改资源而无需重新编译和烧录固件。 在 LVGL 中,可以使用一些文件系统接口函数来处理文件系统操作,如打开、关闭、读取、写入等。开发者可以根据具体的文件系统实现,来定义自己的文件系统接口函数,以适应不同的存储设备和文件系统格式。 为了使用文件系统,首先需要在 LVGL 的配置文件中启用文件系统支持,并指定相应的文件系统接口函数。然后,在代码中可以使用 LVGL 提供的 API 来加载和管理文件系统资源。例如,可以使用 `lv_img_create_from_file()` 函数来从文件中创建图像对象,然后将其显示在屏幕上。 总之,LVGL 可以通过文件系统来加载和管理 GUI 资源,使得开发更加灵活和可维护。通过使用文件系统,可以将资源与代码分离,动态地更新和更改资源,提高开发效率和可扩展性。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏洞百出

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值