MicroPython[ESP32-S3]：LVGL点亮屏幕并设置触摸事件

Posted on by dsx2016

bilibili-视频演示

点击本文字，打开哔哩哔哩APP

NO.1
前置物品

​需要准备下列物品

  1. ESP32-S3 (R16BN8) 开发板（已刷入MicroPython+LVGL固件）

  2. 3.5寸TFT液晶显示屏模块串口SPI驱动ILI9488带电容触摸(触摸FT6236)RGB320*480

  3. USB数据线

  4. 杜邦线若干（母对母）

img

NO.2
接线方法

接线图（建议放大看）

左侧3.5寸SPI触控显示屏

右侧ESP32-S3 R16N8

img

接线表格

ili9488屏幕 ESP32-S3开发板
VDD 3.3V
GND GND
CS 10
RST (RESET) 18
D/C (DC) 17
SDI (MOSI) 11
SCK (CLK) 12
BL (LED) 16
SDO (MISO) 13
NC/3V3 /
CTP-SDA 6
CTP-SCL 7
CTP-INT /
CTP-RST /

注意事项

上述表格的连线会和下面的代码一一对应

如果熟悉原理，可自行修改连接针脚和代码

NO.3
初始化代码

引入LVGL，显示驱动和触控驱动等

import lvgl as lvfrom espidf import VSPI_HOSTfrom ili9XXX import ili9488from ft6x36 import ft6x36 from machine import Pin, I2C

点亮屏幕

p16 = Pin(16, Pin.OUT)p16.value(1)

创建显示屏对象（480*320横屏）

disp = ili9488(miso=13, mosi=11, clk=12, cs=10, dc=17, rst=18,               spihost=VSPI_HOST, mhz=20,power=-1,backlight=-1,               factor=16, hybrid=True, width=480, height=320,rot=0x20,               invert=False, double_buffer=True, half_duplex=False)

创建横屏触摸

touch = ft6x36(sda=6, scl=7,inv_x=False, inv_y=False, swap_xy=True)
NO.4
触控按钮

官方文档

https://docs.lvgl.io/8.3/examples.html#events

img

复制触控代码

因为我们有自己的显示和触控实例化，所以只需要把官方代码创建图片和事件的代码复制过来就好，不需要把网页的依赖复制过来

class Event_1():    def __init__(self):        self.cnt = 1        #        # Add click event to a button        #​        btn = lv.btn(lv.scr_act())        btn.set_size(100, 50)        btn.center()        btn.add_event(self.event_cb, lv.EVENT.CLICKED, None)​        label = lv.label(btn)        label.set_text("Click me!")        label.center()​    def event_cb(self,e):        print("Clicked")​        btn = e.get_target_obj()        label = btn.get_child(0)        label.set_text(str(self.cnt))        self.cnt += 1​evt1 = Event_1()

img

NO.5
效果展示

触控效果

显示一个按钮，点击一下，数字+1

img

NO.6
Tips

注意

我在同一个商家同时买的两块屏幕，显示效果完全不一样

左侧正常，右侧感觉屏幕是坏的（一样的代码）

目前没有找到问题，抽空问问商家

img

本篇是合集内容的第三篇

合集往期内容

《MicroPython[ESP32-S3]：刷入LVGL+MicroPython固件支持16M 外扩flash/8M PSRAM》

《MicroPython[ESP32-S3]：使用esptool刷入固件，支持lvgl》

点击底部的阅读原文

可以查看本文对应的10分钟的视频演示

img

END