MicroPython[ESP32]：ILI9341 2.8寸TFT-LCD显示屏LVGL显示GIF和旋转屏幕切换竖屏为横屏

Posted on by dsx2016
NO.1
显示GIF

官方文档

https://docs.lvgl.io/master/libs/gif.html#use-gif-images-from-file

官网效果

https://sim.lvgl.io/v9.0/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/6a47c6f33ac51a69cf241d43b74933c09c5d175f/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/6a47c6f33ac51a69cf241d43b74933c09c5d175f/examples/libs/gif/lv_example_gif_1.py

示例代码

官方演示的有两种使用GIF动图的方法

一种是需要先把GIF转为二进制数据

一种是直接加载存储的文件（推荐）

此图片的alt属性为空；文件名为image-753-1024x500.png

img2 = lv.gif(lv.scr_act())
img2.set_src("S:bulb.gif")
img2.align(lv.ALIGN.RIGHT_MID, -250, 0)
NO.2
粉丝计数器

使用了一个50×50的gif小图（24KB）作为动图

同时添加lvgl绘制的label（文本）显示粉丝数

NO.3
GIF说明

首先把要展示的GIF文件传输到ESP32

参考文章

《MicroPython 工具 Ampy：给ESP32传送JPG，GIF等文件》

此图片的alt属性为空；文件名为image-754.png

然后在项目中添加代码

# 创建文件源
scr = lv.scr_act()
# 创建GIF源
img2 = lv.gif(scr)
# 使用ESP32存储中的文件（注意S: 这个前缀表示使用ESP32的存储）
img2.set_src("S:test5.gif")
# 使图片居中
img2.center()

可以看到上图test5.gif图片在ESP32存储的根目录下，所以S:代表根目录，test5.gif为要展示的图片

NO.4
旋转屏幕

从网上拷贝的代码初始屏幕是竖版的，但想要的效果是横版的，所以需要旋转屏幕

竖版原版代码

# 屏幕宽高
WIDTH = 240
HEIGHT = 320


# 创建显示屏对象
disp = ili9341(miso=19, mosi=23, clk=18, cs=5, dc=26, rst=27, power=14, backlight=-1, backlight_on=0, power_on=0, rot=0x80,
        spihost=VSPI_HOST, mhz=60, factor=16, hybrid=True, width=WIDTH, height=HEIGHT,
        invert=False, double_buffer=True, half_duplex=False, initialize=True)

改为横屏

  1. 设置WIDTH = 320

  2. 设置HEIGHT = 240

  3. 设置rot=0x20（ili9341参数）

重新加载就变为横屏了

# 屏幕宽高
WIDTH = 320
HEIGHT = 240


# 创建显示屏对象
disp = ili9341(miso=19, mosi=23, clk=18, cs=5, dc=26, rst=27, power=14, backlight=-1, backlight_on=0, power_on=0, rot=0x20,
        spihost=VSPI_HOST, mhz=60, factor=16, hybrid=True, width=WIDTH, height=HEIGHT,
        invert=False, double_buffer=True, half_duplex=False, initialize=True)

官方文档并没有看到相关说明

rot参数需要看相关源码，上述效果参考搜索引擎

NO.5
tips

GIF的效果比静态图片要生动一些

END