Geile Grafik, mit wenig Aufwand, für den ESP32
In letzter Zeit benutze ich für den ESP und ESP32 immer mehr Micropython (wie z.B. hier: CLM, Nobb-E, MessageInAbottle)
weils einfach verdammt schnell geht.
Um mit dem ESP32 noch umwerfende Grafik zu machen gibt es lv_micropython.
Leider musst du dir das für deinen Controller selbst bauen und kannst nich sofort loslegen.
Ich werd in diesem Betrag am Ende ein fertiges Binary von lv_micropython anhängen,
damit du ohne großen Aufwand in diese geniale Grafikbibliothek einsteigen kannst.
Eine Übersicht was LVGL alles kann findest du hier LVGL-Api
Für Micropython mit LVGL gibt es einen online Simulator, mit dem du ohne Hardware alles an Grafik schon mal ausprobieren kannst.
Ein cooles Beispiel ist z.B. das hier
Ich nutze den online Simulator für das komplette UI-Design – erst dann pack ichs auf den Controller.
Und wenns etwas größer wird einfach den Linux/SDL-Port
Das ist einfach und unglaublich effizient.
Aber am Ende muss es doch auf den Controller und dafür müssen wir ein wenig was tun.
Als erstes muss der Micropython-Interpreter mit LVGL-Bindings auf deinen Controller.
Hier gibt es zwei unterschiedliche Varianten.
- ESP32 WROOM mit nur 320kB-RAM
- ESP32 WROVER mit gigantischen 4MB-RAM (man bekommt auch mehr – können wir aber nicht wirklich nutzen)
Einfache Programme laufen auf beiden, aber preislich unterscheiden se sich fast ned – Daher fällt die Auswahl leicht 🙂
Im ZIP-File am Ende findest du trotzdem einen Ordner für beide Varianten.
Was wir jetzt brauchen ist noch ein Display.
Ich hab dieses hier schon ne Weile in Verwendung: AZ-Touch
Gleich mit Gehäuse für faule Leute wie mich 🙂
Ich benutze für Micropython auf dem ESP32 meistens Thonny
Der dient als IDE und kann auch Dateien auf das Flash-Dateisystem des Controllers schieben.
Eine Datei, die wir dorthin schieben müssen ist display_driver.py mit folgendem Inhalt:
import ili9XXX
from xpt2046 import xpt2046
import lvgl as lv
disp = ili9XXX.ili9341(miso=19, mosi=23, clk=18, dc=4, cs=5, rst=22, power=-1, backlight=15, mhz=20, width=320, height=240, rot=ili9XXX.LANDSCAPE, factor=16)
touch = xpt2046(cs=14, transpose=False, cal_x0 = 3783, cal_y0 = 3600, cal_x1 = 242, cal_y1 = 123)
Diese kannst du bei Bedarf an andere Displays anpassen
Jetzt kannst du dir noch eines der Simulator-Beispiele von hier in den Mu-Editor kopieren und einfach (auf dem Gerät) ausführen.
Bist du zufrieden, dann schiebst du deinen Quellcode als main.py auf den Controller und beim nächsten Reset ist deine Grafik da und tut Dinge 🙂
Ich hab das mal mit dem Meter-Beispiel von oben gemacht:
Man beachte den schnellen Start (ca. 1 Sekunde). Das mit einem embedded Linux zu übertreffen wird schwierig 🙂
Downloads:
lv_micropython-WROVER.zip
(hier hab ich auch noch die deutschen Umlaute mit in die Systemfont gepackt)
Neues Board
Bei Amazon gibt es ein schönes neues Board: https://www.amazon.de/dp/B0CSYPG716
Leider war das Touch-Screen etwas zickig und ich musste den Treiber dafür etwas anpassen (Brauchte eine SoftSPI weil die Pins so komisch konfiguriert waren) Mit der richtigen display_driver.py klappts aber damit auch:
import sys
import espidf as esp
from machine import *
import ili9XXX
import lvgl as lv
disp = ili9XXX.ili9341(factor=32, double_buffer=False, clk=14, cs=15, dc=2, rst=12, power=23, backlight=21, miso=12, mosi=13,width=320, height=240, backlight_on=1, rot=ili9XXX.LANDSCAPE)
spi2=SoftSPI(baudrate=2500000,sck=Pin(25),mosi=Pin(32),miso=Pin(39))
class xpt2046:
CMD_X_READ = const(0x90)
CMD_Y_READ = const(0xd0)
CMD_Z1_READ = const(0xb8)
CMD_Z2_READ = const(0xc8)
MAX_RAW_COORD = const((1<<12) - 1)
def __init__(self, spi, cs, max_cmds=16, cal_x0 = 3783, cal_y0 = 3948, cal_x1 = 242, cal_y1 = 423,
transpose = True, samples = 3):
# Initializations
if not lv.is_initialized():
lv.init()
disp = lv.disp_t.__cast__(None)
self.screen_width = 320
self.screen_height = 240
self.spi = spi
self.cs = cs
self.recv = bytearray(3)
self.xmit = bytearray(3)
self.max_cmds = max_cmds
self.cal_x0 = cal_x0
self.cal_y0 = cal_y0
self.cal_x1 = cal_x1
self.cal_y1 = cal_y1
self.transpose = transpose
self.samples = samples
self.touch_count = 0
self.touch_cycles = 0
indev_drv = lv.indev_drv_t()
indev_drv.init()
indev_drv.type = lv.INDEV_TYPE.POINTER
indev_drv.read_cb = self.read
indev_drv.register()
def calibrate(self, x0, y0, x1, y1):
self.cal_x0 = x0
self.cal_y0 = y0
self.cal_x1 = x1
self.cal_y1 = y1
def deinit(self):
print('Deinitializing XPT2046...')
def touch_talk(self, cmd, bits):
if self.cs is not None:
self.cs(0)
self.xmit[0] = cmd
self.spi.write_readinto(self.xmit, self.recv)
if self.cs is not None:
self.cs(1)
return (self.recv[1] * 256 + self.recv[2]) >> (15 - bits)
# @micropython.viper
def xpt_cmds(self, cmds):
result = []
for cmd in cmds:
value = self.touch_talk(cmd, 12)
if value == int(self.MAX_RAW_COORD):
value = 0
result.append(value)
return tuple(result)
# @micropython.viper
def get_med_coords(self, count : int):
mid = count//2
values = []
for i in range(0, count):
values.append(self.xpt_cmds([self.CMD_X_READ, self.CMD_Y_READ]))
x_values = sorted([x for x,y in values])
y_values = sorted([y for x,y in values])
if int(x_values[0]) == 0 or int(y_values[0]) == 0 : return None
#print(x_values[mid], y_values[mid])
return x_values[mid], y_values[mid]
# @micropython.viper
def get_coords(self):
med_coords = self.get_med_coords(int(self.samples))
if not med_coords: return None
if self.transpose:
raw_y, raw_x = med_coords
else:
raw_x, raw_y = med_coords
if int(raw_x) != 0 and int(raw_y) != 0:
x = ((int(raw_x) - int(self.cal_x0)) * int(self.screen_width)) // (int(self.cal_x1) - int(self.cal_x0))
y = ((int(raw_y) - int(self.cal_y0)) * int(self.screen_height)) // (int(self.cal_y1) - int(self.cal_y0))
return x,y
else: return None
# @micropython.native
def get_pressure(self, factor : int) -> int:
z1, z2, x = self.xpt_cmds([self.CMD_Z1_READ, self.CMD_Z2_READ, self.CMD_X_READ])
if int(z1) == 0: return -1
return ( (int(x)*factor) / 4096)*( int(z2)/int(z1) - 1)
start_time_ptr = esp.C_Pointer()
end_time_ptr = esp.C_Pointer()
cycles_in_ms = esp.esp_clk_cpu_freq() // 1000
# @micropython.native
def read(self, indev_drv, data) -> int:
esp.get_ccount(self.start_time_ptr)
coords = self.get_coords()
#print(coords)
esp.get_ccount(self.end_time_ptr)
if self.end_time_ptr.int_val > self.start_time_ptr.int_val:
self.touch_cycles += self.end_time_ptr.int_val - self.start_time_ptr.int_val
self.touch_count += 1
if coords:
data.point.x ,data.point.y = coords
data.state = lv.INDEV_STATE.PRESSED
return False
data.state = lv.INDEV_STATE.RELEASED
return False
def stat(self):
return self.touch_cycles / (self.touch_count * self.cycles_in_ms)
touch = xpt2046(spi=spi2, cs=Pin(33), cal_x1 = 3700, cal_y1 = 3820, cal_x0 = 180, cal_y0 = 250, transpose=False)
lv.init()ESP-NOW
Ich hab mich riesig gefreut, dass Harald mich letzte Woche über das Kontaktformular angeschrieben und mir von EspNow erzählt hat. EspNow ist ein sehr einfaches Protokoll, mit dem sich ESPs untereinander kurze Nachrichten senden können ohne sich vorher zu verbinden (verwenden dazu einfach die WiFi-MAC-Addresse). Unter https://docs.espressif.com/projects/esp-faq/en/latest/application-solution/esp-now.html findet man erste Informationen zu diesem coolen Protokoll. Und natürlich in der Micropython-Doku: https://docs.micropython.org/en/latest/library/espnow.html
Ich kannte EspNow garnicht, finds aber superklasse und hab Harald versprochen, dass ichs natürlich einbaue, damit man auch grafisch rumfunken kann 🙂
So erstmal die Firmware, jetzt mit ESP-NOW:
Harald hat gemeint er benutzt gerne asyncio und braucht noch aioespnow:
Und natürlich ein kleines Beispiel, was man damit machen kann:
Sender (mit Grafik)
import network
import espnow
import lvgl as lv
import display_driver
sta = network.WLAN(network.STA_IF)
sta.active(True)
sta.disconnect()
en = espnow.ESPNow()
en.active(True)
peer = b'\xff\xff\xff\xff\xff\xff' # MAC broadcast-address
en.add_peer(peer)
color = "red"
count = 1
def send():
en.send(peer, color + " " + str(count))
def event_handler(e):
global color
code = e.get_code()
obj = e.get_target()
if code == lv.EVENT.VALUE_CHANGED:
option = " "*10
obj.get_selected_str(option, len(option))
color = option.strip()
send()
print("Color: " + color)
roller1 = lv.roller(lv.scr_act())
roller1.set_options("\n".join([
"red",
"green",
"blue"]),lv.roller.MODE.INFINITE)
roller1.set_width(300)
roller1.set_visible_row_count(3)
roller1.align(lv.ALIGN.CENTER,0,-50)
roller1.add_event_cb(event_handler, lv.EVENT.ALL, None)
def slider_event_cb(e):
global count
slider = e.get_target()
slider_label.set_text("{:d}%".format(slider.get_value()))
slider_label.align_to(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)
count = int(slider.get_value() / 6)
send()
# Create a slider in the center of the display
slider = lv.slider(lv.scr_act())
slider.align(lv.ALIGN.CENTER,0,50)
slider.add_event_cb(slider_event_cb, lv.EVENT.VALUE_CHANGED, None)
# Create a label below the slider
slider_label = lv.label(lv.scr_act())
slider_label.set_text("0%")
slider_label.align_to(slider, lv.ALIGN.OUT_BOTTOM_MID, 0, 10)Empfänger (mit Neopixel-Ring)
import network
import espnow
import time
import machine, neopixel
sta = network.WLAN(network.STA_IF)
sta.active(True)
sta.disconnect()
e = espnow.ESPNow()
e.active(True)
peer = b'\xff\xff\xff\xff\xff\xff' # MAC broadcast-address
e.add_peer(peer)
np = neopixel.NeoPixel(machine.Pin(5), 16)
def disp(msg):
part = msg.split(" ")
color = (255, 0, 0)
if "green" in part[0]:
color = (0, 255, 0)
if "blue" in part[0]:
color = (0, 0, 255)
print(part[1])
cnt = int(part[1].strip("'"))
for i in range(0, 15):
if i < cnt:
np[i] = color
else:
np[i] = (0,0,0)
np.write()
disp("green 3")
def messageReceived(obj):
host, msg = e.recv(100)
print(host, msg)
disp(str(msg))
e.irq(messageReceived)
while True:
time.sleep_ms(100)
print(".")Hinweis: wenn man, wie ich, zu faul ist eine MAC-Adresse einzugeben, kann man mit EspNow auch einfach an die Broadcast-Addresse FF:FF:FF:FF:FF:FF senden. Dann geht’s einfach an alle ESPs in Reichweite 🙂