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.

Meine anderen Artikel zu Micropython und ESP:

• Signalverarbeitung mit Micropython
• BLE Sensoren mit Micropython
• RegulatorCard

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-WROOM.zip

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 🙂

Vereinfachtes Arbeiten, ohne Gerät, mit Thonny

Beim Erstellen von UIs stört noch das ständige Übertragen des Programms auf den ESP und das dortige Testen – das geht auf dem PC viel schneller und komfortabler.

Alles was du brauchst ist das AppImage hier:

Den Rest kann Thonny:

Viel Spaß damit 🙂

API-Doku etwas mehr Python-Like

Was mich noch gestört hat, ist dass die API-Doku im Netz leider nur die C-API beschreibt und ich immer etwas umdenken muss. Hab mal versucht aus einer JSON-Datei die beim Build entsteht etwas HTML zu generieren. Taugt zwar bei den Datentypen immer noch C auf – aber ist nach Objekten und Methoden aufgeteilt. Weiß ned obs so schon brauchbar ist. Möchte ich euch aber nicht vorenthalten:

https://stefan.box2code.de/static/Lvgl8.3_API_ForMicropython.html

Viel Spaß damit. Wenn ihr Verbesserungsideen habt – einfach her damit 🙂

Micropython mit LVGL für Windows

Nach dem AppImage für Linux hab ich mich noch mal hingesetzt und auch eine EXE für Windows generiert. Leider hat Thonny für Windows kein [Micropython (local)] als Einstellung aber damit kannst du deine Programme jetzt auch unter Windows laufen lassen. Was ich sehr cool finde ist dass der Interpreter nur ca. 5 MB groß ist.

Hier der Download:

Cheap Yellow Displays mit gedrehten Farben

Daniel hat mich vor einiger Zeit kontaktiert und mir erzählt, dass es das schöne günstige Board jetzt bei AliExpress für unter 7 € gibt. Diese Boards haben aber scheinbar Rot und Grün anders gedreht. Abhilfe schafft eine kleine Änderung in der display_driver.py:

disp = ili9XXX.ili9341(..., colormode=ili9XXX.COLOR_MODE_RGB)

Ich muss mir dort unbedingt auch ein paar holen 🙂

Image mit SquareLine Studio nutzen

Gestern hat mich Thomas über das Kontaktformular kontaktiert und mir erzählt, dass er versucht das Image mit SquareLine Studio zu verwenden. SquareLine Studio ist ein GUI-Designer, mit dem du deine GUI grafisch entwerfen kannst.

Wir haben rausgefunden, dass es geht wenn man ein paar Kleinigkeiten beachtet:

Beim Erzeugen des Projekts solltest du folgende Einstellungen verwenden:

Wichtig ist die LVGL-Version v8.3.6, da das Image auf v8.3.7 basiert

Die generierten Dateien deines Projekts schiebst du dann einfach mit Thonny auf deinen ESP.

Zusätzlich brauchst du noch folgenden einfachen Inhalt in deiner main.py, da der Treiber vom generierten Skript sonst nicht vor LVGL geladen wird

import display_driver
import ui # das ist die Datei mit deinem generierten code

SquareLine Studio ist ein sehr schönes Tool geworden und scheint gut zu funktionieren. Thomas hat gemeint, dass er eher aus der Hardwareecke kommt und das es genau das richtige Tool für ihn ist. Vielleicht gilt das ja auch für dich 🙂

Viele Screens mit wenig RAM-Verbrauch

Für viele scheint das wenige RAM z.B. bei Verwendung des CYD (Cheap Yellow Display) ein großes Problem zu sein. Ich hab heute mal versucht eine Blaupause zu erstellen, mit der man Programme mit unzähligen Screens machen kann ohne dass das RAM ausgeht. Der Trick dabei ist es, ausschließlich den angezeigten Screen ins RAM zu laden. Das geht eigentlich sehr sehr einfach. Das Programm unten simuliert 100 Screens und braucht nur wenige Kilobyte RAM (nämlich immer nur für den angezeigten Screen). Hoffe euch gefällts:

import lvgl as lv
import display_driver
import gc

class ScreenWithButtonOnly:
    def __init__(self, text, nextScreenNum):
        self.text = text
        self.nextScreen = nextScreenNum

    def load(self):
        self.screen = lv.obj()
        self.btn = lv.btn(self.screen)
        self.btn.add_event_cb(self.eventhandler, lv.EVENT.ALL, None)
        self.btn.align(lv.ALIGN.CENTER, 0, 0)
        self.btn.set_size(200,100)
        self.label = lv.label(self.btn)
        self.label.set_text(self.text)
        
    def eventhandler(self, e):
       if e.code == lv.EVENT.CLICKED:
          changeScreen(self.nextScreen)
    
class ScreenWithChartAndButton:
    def __init__(self, text, nextScreenNum):
        self.text = text
        self.nextScreen = nextScreenNum

    def load(self):
        self.screen = lv.obj()
        self.chart = lv.chart(self.screen)
        self.chart.set_size(200, 150)
        self.chart.align(lv.ALIGN.TOP_MID, 0, 10)
        self.chart.set_type(lv.chart.TYPE.LINE)

        self.ser1 = self.chart.add_series(lv.palette_main(lv.PALETTE.RED), lv.chart.AXIS.PRIMARY_Y)
        self.ser1.y_points = [0, 20, 40, 60, 80, 100, 80, 60, 40, 20, 0]
        self.chart.refresh()      
        
        self.btn = lv.btn(self.screen)
        self.btn.add_event_cb(self.eventhandler, lv.EVENT.ALL, None)
        self.btn.align(lv.ALIGN.BOTTOM_MID, 0, -10)
        self.btn.set_size(300,50)
        self.label = lv.label(self.btn)
        self.label.set_text(self.text)
        
    def eventhandler(self, e):
       if e.code == lv.EVENT.CLICKED:
          changeScreen(self.nextScreen)
    
class ScreenWithCalendarAndButton:
    def __init__(self, text, nextScreenNum):
        self.text = text
        self.nextScreen = nextScreenNum

    def load(self):
        self.screen = lv.obj()
        self.calendar = lv.calendar(self.screen)
        self.calendar.set_size(200, 160)
        self.calendar.align(lv.ALIGN.TOP_MID, 0, 10)
        self.btn = lv.btn(self.screen)
        self.btn.add_event_cb(self.eventhandler, lv.EVENT.ALL, None)
        self.btn.align(lv.ALIGN.BOTTOM_MID, 0, -10)
        self.btn.set_size(300,50)
        self.label = lv.label(self.btn)
        self.label.set_text(self.text)
        
    def eventhandler(self, e):
       if e.code == lv.EVENT.CLICKED:
          changeScreen(self.nextScreen)
        
def changeScreen(screenNum):
    screens[screenNum].load() # build the new screen
    
    # load the new screen (animated) and delete the old one
    lv.scr_load_anim(screens[screenNum].screen, lv.SCR_LOAD_ANIM.FADE_ON, 100, 0, True)
    
    gc.collect() # call the garbage collector
    print("MEM free: " + str(gc.mem_free())) # show free memory
    
screens = []

for i in range(0, 100):
    if i % 2 == 0:
        screens.append(ScreenWithChartAndButton("Screen " + str(i), i + 1))
    elif i % 3 == 0:
        screens.append(ScreenWithCalendarAndButton("Screen " + str(i), i + 1))  
    else:
        screens.append(ScreenWithButtonOnly("Screen " + str(i), i + 1))
        
screens.append(ScreenWithButtonOnly("Back to begin", 0))

        
changeScreen(0) # load initial screen