Nummerische Touchtastatur für Core2

21. März 2021 · Kommentieren · Kategorien: M5Stack, Micropython, UIFlow-IDE

Durch den Touchscreen des M5Stack Core 2 bieten sich viele Eingabemöglichkeiten die bei den Geräten ohne Touchscreen extern nachgerüstet werden müssen. Mein erster Versuch gilt einem nummerschen Keyboard auf dem Touchscreen.

Ehrlich gesagt ist mein zweiter Versuch. Der Erste war nur mal zum probieren wie das überhaupt geht. So war die GUI nach einem LCD_clear oder Clear_screen verschwunden und nicht wieder herstellbar. Auch war mir nicht klar, ob die Touch-Button wenn sie unsichtbar sind noch reagieren. Das alles habe ich beim ersten Austesten herausbekommen und ist in diesen Beitrag eingeflossen.

Auf diese Erfahrungen aufbauend ist dieser Versuch am Ende wirklich einsetzbar.

Das Ergebnis des zweiten Anlaufs kann sich sehen lassen:

Darstellung des Versuchsprogramms

Die Nutzung des Touchscreens geht am einfachsten mit dem UI-Simulator der UIFlow-IDE. Der ist aber nicht sonderlich komfortabel. Ich habe mich deshalb zu folgender Vorgehensweise entschlossen:

  • Die Darstellung der GUI und die erforderlichen Objekte werden vorher entworfen.
  • Die GUI-Elemente mit dem UI-Simulator erzeugen und nur die wesentlichen Eigenschaften festlegen.
  • Sie werden platzsparend irgenwie und -wo im UI-Simulator angelegt.
  • Die Anordnung auf dem Display wird vom Programm vorgenommen.
  • Sie werden im Programm sichtbar bzw. unsichtbar geschaltet. Dadurch wird ihre Funktion aktiviert bzw. deaktiviert.
So sehen die grafischen Elemente beim Erstellen aus.
Das ist ein Programmausschnitt der die Objekte anordnet.

Die Blöcke der Buttons und Labels bieten eine große Gestaltungsmöglichkeit. Diese sollte man nutzen um ein ansprechendes Aussehen zu erzeugen. Vor allem kann man die Objekte sichtbar (show) und unsichtbar (hide) machen. Unsichtbare Button reagieren nicht auf Berührung. So kann man auch verschiedene Objekte übereinander legen. Aktiv ist immer nur das sichtbare Objekt. Eine sehr interessante Gestaltungsmöglichkeit für eine GUI.

Ich habe im Testprogramm die Button „show“ und „hide“ eingebaut, mit denen ich die Tastatur ein- und ausschalten kann. Die Anzeige der Eingabe „label_input_show“ bleibt aber und so kann überprüft werden, dass tasächlich keine Eingabe erfolgt, wenn die Tastatur unsichtbar ist.

Die Funktionen und Buttom-Aktivities zum sichtbar und unsichtbar machen der Tastatur.

Hier kann die Programmdatei für die UIFlow-IDE heruntergeladen werden:

Touch_key_test_001-001.m5fHerunterladen

Bearbeitung zur Einsatzreife

Nachdem die wesentliche Funktionaltät erreicht war habe ich Anpassungen vorgenommen, die dieses Programm für Projekte einsatzfähig machen soll.