ESP32(MicroPython)LVGL自定义折线
本次有两个用于在指定的坐标绘制直线的程序,都需要通过滑杆输入坐标。第一个程序通过点击绘制键完成绘制,上一次绘制结束点作为下一次绘制的起始点。第二个程序直接根据输入的坐标变化情况连续绘制。理论上坐标原点在屏幕中心,没有找到把原点设在右上角的方法,实际运行情况不符合预期。另外,持续运行可能导致程序退出,应该是绘制折线会增加内存占用。
代码如下
程序一
import lvgl as lv
import time
from espidf import VSPI_HOST
from ili9XXX import ili9341
from xpt2046 import xpt2046
import fs_driver
import random
# ------------------------------ 屏幕初始化操作 --start------------------------
# 屏幕宽高
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)
# 创建触摸屏对象
touch = xpt2046(cs=25, spihost=VSPI_HOST, mosi=-1, miso=-1, clk=-1, cal_y0 = 423, cal_y1=3948)
# ------------------------------ 屏幕初始化操作 --stop------------------------
# 1. 创建显示screen对象。将需要显示的组件添加到这个screen才能显示
scr = lv.obj() # scr====> screen 屏幕
fs_drv = lv.fs_drv_t()
fs_driver.fs_register(fs_drv, 'S')
scr = lv.scr_act()
scr.clean()
x1=0
x2=0
y1=0
y2=0
flag=0
# 2. 封装要显示的组件
class MyWidget():
def __init__(self, scr,x1,x2,y1,y2):
# 创建 线 对象
obj_line = lv.line(scr)
# 创建样式
style = lv.style_t()
style.init()
style.set_line_color(lv.palette_main(lv.PALETTE.GREY))
style.set_line_width(2)
style.set_line_rounded(True)
# 添加样式
obj_line.add_style(style, 0)
point = [{"x": x1, "y": y1}, {"x": x2, "y": y2}]
obj_line.set_points(point, len(point))
obj_line.center()
class Widget1():
def __init__(self, scr,x,y,w,r1,r2): #x轴偏移量,y轴偏移量,宽度,高度,最小值,最大值
# 创建滑块slider组件
self.slider = lv.slider(scr)
self.slider.set_width(w) # 设置滑块的宽度
self.slider.set_range(r1, r2) # 默认值是0-100
self.slider.align(lv.ALIGN.CENTER,x,y) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
self.slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # 添加回调函数
# 创建一个标签label
self.label = lv.label(scr)
self.label.set_text("0") # 默认值
self.label.align_to(self.slider, lv.ALIGN.OUT_TOP_MID, 0, 0) # label的中间与滑块的上外边框中间对齐,然后y向上15像素 x不变
def slider_event_cb(self, evt):
slider = evt.get_target()
global x2
x2=slider.get_value()
# 修改label的值
self.label.set_text(str(x2))
class Widget2():
def __init__(self, scr,x,y,w,r1,r2): #x轴偏移量,y轴偏移量,宽度,高度,最小值,最大值
# 创建滑块slider组件
self.slider = lv.slider(scr)
self.slider.set_width(w) # 设置滑块的宽度
self.slider.set_range(r1, r2) # 默认值是0-100
self.slider.align(lv.ALIGN.CENTER,x,y) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
self.slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # 添加回调函数
# 创建一个标签label
self.label = lv.label(scr)
self.label.set_text("0") # 默认值
self.label.align_to(self.slider, lv.ALIGN.OUT_TOP_MID, 0, 0) # label的中间与滑块的上外边框中间对齐,然后y向上15像素 x不变
def slider_event_cb(self, evt):
slider = evt.get_target()
global y2
y2=slider.get_value()
# 修改label的值
self.label.set_text(str(slider.get_value()))
class CounterBtn():
def __init__(self, scr,x,y,w,h): #x轴偏移量,y轴偏移量,宽度,高度
self.cnt = 0
btn = lv.btn(scr) # 将当前按钮与screen对象进行关联
# btn.set_pos(20, 10) # 相对于屏幕左上角 x为20,y为10
btn.set_size(w, h) # 设置按钮的宽度为120, 高度为50
btn.align(lv.ALIGN.CENTER,x,y) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
btn.add_event_cb(self.btn_event_cb, lv.EVENT.ALL, None) # 设置按钮被按下后的回调函数
label = lv.label(btn) # 在按钮上创建一个标签Label,用来显示文字用
label.set_text("draw") # 设置文字内容
label.center() # 相对于父对象居中
def btn_event_cb(self, evt):
global flag
code = evt.get_code() # 获取点击事件类型码
btn = evt.get_target() # 获取被点击的对象,此时就是按钮
if code == lv.EVENT.CLICKED:
flag=1
# Get the first child of the button which is the label and change its text
label = btn.get_child(0)
label.set_text("draw") # 修改文字内容
# 3. 创建要显示的组件
Widget1=Widget1(scr,-25,-135,160,0,240) #x轴偏移量,y轴偏移量,宽度,高度,最小值,最大值
Widget2=Widget2(scr,-25,-100,160,0,310)
counterBtn1 = CounterBtn(scr,90,-125,50,50) #x轴偏移量,y轴偏移量,宽度,高度
# 4. 显示screen对象中的内容
lv.scr_load(scr)
while True:
time.sleep(0.5)
if flag==1 :
flag=0
Widget=MyWidget(scr,x1,x2,y1,y2)
x1=x2
y1=y2
lv.scr_load(scr)
程序二
import lvgl as lv
import time
from espidf import VSPI_HOST
from ili9XXX import ili9341
from xpt2046 import xpt2046
import fs_driver
import random
# ------------------------------ 屏幕初始化操作 --start------------------------
# 屏幕宽高
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)
# 创建触摸屏对象
touch = xpt2046(cs=25, spihost=VSPI_HOST, mosi=-1, miso=-1, clk=-1, cal_y0 = 423, cal_y1=3948)
# ------------------------------ 屏幕初始化操作 --stop------------------------
# 1. 创建显示screen对象。将需要显示的组件添加到这个screen才能显示
scr = lv.obj() # scr====> screen 屏幕
fs_drv = lv.fs_drv_t()
fs_driver.fs_register(fs_drv, 'S')
scr = lv.scr_act()
scr.clean()
x1=0
x2=0
y1=0
y2=0
flag=0
# 2. 封装要显示的组件
class MyWidget():
def __init__(self, scr,x1,x2,y1,y2):
# 创建 线 对象
obj_line = lv.line(scr)
# 创建样式
style = lv.style_t()
style.init()
style.set_line_color(lv.palette_main(lv.PALETTE.GREY))
style.set_line_width(2)
style.set_line_rounded(True)
# 添加样式
obj_line.add_style(style, 0)
point = [{"x": x1, "y": y1}, {"x": x2, "y": y2}]
obj_line.set_points(point, len(point))
obj_line.center()
class Widget1():
def __init__(self, scr,x,y,w,r1,r2): #x轴偏移量,y轴偏移量,宽度,高度,最小值,最大值
# 创建滑块slider组件
self.slider = lv.slider(scr)
self.slider.set_width(w) # 设置滑块的宽度
self.slider.set_range(r1, r2) # 默认值是0-100
self.slider.align(lv.ALIGN.CENTER,x,y) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
self.slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # 添加回调函数
# 创建一个标签label
self.label = lv.label(scr)
self.label.set_text("0") # 默认值
self.label.align_to(self.slider, lv.ALIGN.OUT_TOP_MID, 0, 0) # label的中间与滑块的上外边框中间对齐,然后y向上15像素 x不变
def slider_event_cb(self, evt):
slider = evt.get_target()
global x2
x2=slider.get_value()
# 修改label的值
self.label.set_text(str(x2))
class Widget2():
def __init__(self, scr,x,y,w,r1,r2): #x轴偏移量,y轴偏移量,宽度,高度,最小值,最大值
# 创建滑块slider组件
self.slider = lv.slider(scr)
self.slider.set_width(w) # 设置滑块的宽度
self.slider.set_range(r1, r2) # 默认值是0-100
self.slider.align(lv.ALIGN.CENTER,x,y) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
self.slider.add_event_cb(self.slider_event_cb, lv.EVENT.VALUE_CHANGED, None) # 添加回调函数
# 创建一个标签label
self.label = lv.label(scr)
self.label.set_text("0") # 默认值
self.label.align_to(self.slider, lv.ALIGN.OUT_TOP_MID, 0, 0) # label的中间与滑块的上外边框中间对齐,然后y向上15像素 x不变
def slider_event_cb(self, evt):
slider = evt.get_target()
global y2
y2=slider.get_value()
# 修改label的值
self.label.set_text(str(slider.get_value()))
class CounterBtn():
def __init__(self, scr,x,y,w,h): #x轴偏移量,y轴偏移量,宽度,高度
self.cnt = 0
btn = lv.btn(scr) # 将当前按钮与screen对象进行关联
# btn.set_pos(20, 10) # 相对于屏幕左上角 x为20,y为10
btn.set_size(w, h) # 设置按钮的宽度为120, 高度为50
btn.align(lv.ALIGN.CENTER,x,y) # 居中(第1个0表示x的偏移量,第2个0表示相对于y的偏移量)
btn.add_event_cb(self.btn_event_cb, lv.EVENT.ALL, None) # 设置按钮被按下后的回调函数
label = lv.label(btn) # 在按钮上创建一个标签Label,用来显示文字用
label.set_text("draw") # 设置文字内容
label.center() # 相对于父对象居中
def btn_event_cb(self, evt):
global flag
code = evt.get_code() # 获取点击事件类型码
btn = evt.get_target() # 获取被点击的对象,此时就是按钮
if code == lv.EVENT.CLICKED:
flag=1
# Get the first child of the button which is the label and change its text
label = btn.get_child(0)
label.set_text("draw") # 修改文字内容
# 3. 创建要显示的组件
Widget1=Widget1(scr,-25,-135,160,0,240) #x轴偏移量,y轴偏移量,宽度,高度,最小值,最大值
Widget2=Widget2(scr,-25,-100,160,0,310)
counterBtn1 = CounterBtn(scr,90,-125,50,50) #x轴偏移量,y轴偏移量,宽度,高度
# 4. 显示screen对象中的内容
lv.scr_load(scr)
while True:
time.sleep(0.1)
Widget=MyWidget(scr,x1,x2,y1,y2)
x1=x2
y1=y2
lv.scr_load(scr)