Auswahl-Menü für das Display des TTGO

Hier werden einzelne Projekte mit MicroPython vorgestellt
Antworten
Heinrichs
Beiträge: 122
Registriert: Do 21. Okt 2010, 18:31

Auswahl-Menü für das Display des TTGO

Beitrag von Heinrichs » Di 3. Nov 2020, 17:51

Für unser GPS-Tracking-Programm war bereits ein Menü zur Auswahl der Skalen-Einheit benutzt worden. An dieser Stelle soll ein solches einfaches Menü-Programmteil genauer vorgestellt werden. Es lässt sich leicht auf andere Fälle übertragen. Die Bedienung sollte für den Anwender selbsterklärend sein: mit der Taste A (links oben in Abb. 1) wählt er das gewünschte Item aus; das aktuell angewählte Item ist an der gelben Schriftfarbe zu erkennen. Schließlich wird die Auswahl mit der Taste B (links unten) übernommen.

menue.jpg
Abb. 1:
menue.jpg (22.67 KiB) 101 mal betrachtet

Unser Beispiel aus Abb. 1 funktioniert so: In einer Liste auswahlliste werden die wesentlichen Daten der einzelnen Items gespeichert: Die Elemente dieser Liste bestehen ihrerseits jeweils auch aus einer Liste (im Folgenden Itemliste genannt) mit folgenden Angaben: eine Zahl, ein Text, die x-Position und die y-Position des Items auf dem Display, und zuletzt die Eigenschaft ausgewählt/nicht ausgewählt. Bei unserem Beispiel sehen die einzelnen Elemente der auswahlliste so aus:

Code: Alles auswählen

auswahl0 = [1, ' Tisch ', 35, 60, False]
auswahl1 = [5, ' Tische ', 35, 75, False]
auswahl2 = [10, ' Tische ', 35, 90, False]
auswahl3 = [50, ' Tische ', 35, 105, False] 

auswahlliste = [auswahl0, auswahl1, auswahl2, auswahl3]
Die Struktur der Itemlisten auswahl0, auswahl1, ... ermöglicht es, für jedes Item eine Zahl, einen Text, sowie die Koordinaten des Items auf dem Display vorzugeben. Damit hat der Benutzer einen gewissen Spielraum sowohl in Hinblick auf die angezeigten Inhalte, als auch auf deren Darstellung. Das letzte Element gibt an, ob das Item ausgewählt worden ist (True) oder nicht (False). Im Fall True wird es auf dem Display in gelber Farbe dargestellt.

Die Anzahl der Itemlisten ist durch die Schriftgröße begrenzt. Bei den in Abb. 1 gewählten Schriften passen vier Items gut auf das Display. Wählt man kleinere Schriften für die Fonts font0, font1 und font2 (s. Programm) oder lässt man ggf. auch die Überschrift weg, dann lassen sich deutlich mehr Items auf dem Display unterbringen.


Die Benutzung dieses kleinen Menü-Systems erfolgt in drei Schritten

1. Rahmen mit Taster-Kennung und Überschrift erzeugen
2. Auswahlliste initialisieren
3. Auswahl durchführen und ausgeben bzw. auswerten


Wie genau dies geschieht, kann man dem Hauptprogramm entnehmen.

Code: Alles auswählen

######################################
#  Menü-Auswahl                      #
#  für ESP32-Modul (TTGO T-Display)  #
#  erstellt am 02.11.2020            #
#  von G. Heinrichs                  #
######################################


from machine import Pin, SPI, UART
from time import sleep
import vga1_8x8 as font0
import vga2_8x16 as font1 # mit Sonderzeichen (Umlaute)
import vga1_bold_16x16 as font2
import st7789

# Display initialisieren...
spi = SPI(2, baudrate=20000000, polarity=1, sck=Pin(18), mosi=Pin(19))
display = st7789.ST7789(spi, 135, 240,  reset=Pin(23, Pin.OUT), cs=Pin(5, Pin.OUT), dc=Pin(16, Pin.OUT), backlight=Pin(4, Pin.OUT), rotation=3) # Landscape

display.init()
display.fill(0)  # loeschen; Bildschirm schwarz


########################## Funktionen #############################

def rahmen():
  display.rect(0, 0, 239, 134, st7789.YELLOW)
  display.rect(0, 0 ,20 ,20, st7789.YELLOW)
  display.text(font2, 'A', 2, 2, st7789.YELLOW)
  display.rect(0, 114 ,20 ,20, st7789.YELLOW)
  display.text(font2, 'B', 2, 117, st7789.YELLOW)
  display.text(font1, 'Mit Taster A scrollen', 35, 25, st7789.RED)
  display.text(font1, b'Mit Taster B ausw\x84hlen', 35, 40, st7789.RED)

def taster_eingabe(): # gibt Taster-Nummer zurück (A = 1, B = 2)
  tasterA = Pin(0, Pin.IN, Pin.PULL_UP) 
  tasterB = Pin(35, Pin.IN) # hat auf dem Board schon einen 100K-Pullup (bei Key)
  t = 0
  weiter = True
  while weiter:
    if tasterA.value() == 0:
      t = 1  
    if tasterB.value() == 0:
      t = 2  
    if t > 0:
      sleep(0.2)
      if tasterA.value() and tasterB.value() == True:
        weiter = False
  return t

def auswahl_anzeigen(awliste):
  for item in awliste:
    if item[4]:  # if selected...
      display.text(font1,str(item[0])+item[1],item[2],item[3],st7789.YELLOW)    
    else:
      display.text(font1,str(item[0])+item[1],item[2],item[3],st7789.WHITE)    
      
def waehlen(awliste):  # gibt das ausgewählte Item zurück
  global itemindex
  weiter = True
  while weiter:   
    rahmen()
    auswahl_anzeigen(awliste)

    while True:
      taster = taster_eingabe()
      if taster == 1: # Scrollen 
        itemindex += 1
        itemindex = itemindex % len(auswahlliste)
        for item in awliste: # erst alle auf False setzen
          item[4] = False
        awliste[itemindex][4]=True  # dann indiziertes Item auf True
        auswahl_anzeigen(awliste)
      if taster == 2: # auswählen
        return awliste[itemindex] 
        weiter = False
        

############################### Hauptprogramm #########################

# Rahmen mit Taster-Kennung, Überschrift
rahmen()
display.text(font2, 'Auswahl', 50, 5) # Überschrift
sleep(2)

# Auswahlliste initialisieren (Zahl, Text, x-Position, y-Position, ausgewählt/nicht ausgewählt)
auswahl0 = [1, ' Tisch ', 35, 60, False]
auswahl1 = [5, ' Tische ', 35, 75, False]
auswahl2 = [10, ' Tische ', 35, 90, False]
auswahl3 = [50, ' Tische ', 35, 105, False]  
auswahlliste = [auswahl0, auswahl1, auswahl2, auswahl3]
itemindex = 2  # Standardvorgabe: 10 Tische
auswahlliste[itemindex][4] = True

# Auswahl durchführen und ausgeben (hier: Anzahl und Bezeichner)
print(waehlen(auswahlliste)[:2]) # die ersten beiden Elemente des ausgewählten Items am Terminal ausgeben
Übrigens: Bei der in Abb. 1 getroffenen Auswahl gibt das Programm als Ergebnis auf dem Terminal die Teil-Liste [5, ' Tische '] aus.

Zum Abschluss noch eine Bemerkung zu den benutzten Fonts: Diese unterscheiden sich nicht nur in der Größe und dem Schriftstil (normal/fett), sondern auch darin, ob sie einen erweiterten Zeichensatz (und damit auch deutsche Sonderzeichen) zur Verfügung stellen oder nicht. (Weiterführende Erläuterungen dazu findet man hier.) In dem oben angeführten Programm besitzt z. B. font1 einen erweiterten Zeichensatz. Damit kann dann das Wort "auswählen" in der Kurzanleitung korrekt auf dem Display angezeigt werden. In unserem Programm wurde dazu der erforderliche Code "\x84' direkt in den entsprechenden Bytestring eingefügt. Wer es bequemer haben möchte, kann die deutschen Sonderzeichen Ä, ä, Ö, ö, Ü, ü und ß in einem Bytestring auch automatisch durch die folgende Funktion ersetzen lassen:

Code: Alles auswählen

def umlaute_ersetzen(bs):
  bs = bs.replace(b'Ä', b'\x8e')
  bs = bs.replace(b'ä', b'\x84')
  bs = bs.replace(b'Ö', b'\x99')
  bs = bs.replace(b'ö', b'\x94')
  bs = bs.replace(b'Ü', b'\x9a')
  bs = bs.replace(b'ü', b'\x81')
  bs = bs.replace(b'ß', b'\xe1')
  return bs 

Antworten