View source for UIFlow-Eingabe für 5-Tasten mit Makey

von Peter (peter@attraktor.org)

Bilderfrefix: M5-Soft-5T0-...

Der M5StickC ist zur Steuerung vieler Geräte ausreichend. Er hat jedoch ein Manko: Er besitzt nur 2 Tasten und nach den Einbau in ein Gehäuse nur noch eine. Ich habe deshalb eine [[UIFlow-Multifunktionstaste|Routine]] geschrieben mit der man 3 unterschiedliche Tastendrücke mit dieser einen Taste ausführen kann. Das ist aber nicht sonderlich komfortabel. Der Einsatz einer 5-Tasten-Kombination für rauf-runter-links-rechts-ok schein mir ein optimaler Konpromiss zwischen Bedienungskomfort und Platzbedarf. Deshalb habe ich eine Routine geschrieben, die eine Dateneingabe mit einer solchen Tasten-Kombi ermöglicht.

[[image:M5-Soft-5T0-001.png|1000px]]

== Das Programm ==

Konkret soll sie mir zur Eingabe von Stromwerten für eine Elektronische-Last dienen. Mit der 5-Tasten-Kombination lässt sich der Strom einstellen und mit der Taste A des M5StickC wird der Strom ein- und ausgeschaltet.

[[image:M5-Soft-5T0-002.png]]

Diese Bild gibt nur eine Übersicht. Die einzelnen Teile dieser Routine werden im Folgenden größer gezeigt und ihre Funktion erklärt.

Diese Routine besteht aus drei Teilen. Ganz links ist das Hauptprogramm, ind der Mitte die Routine zur Darstellung auf dem Display und rechts die Routine, die einen Tastendruck von der 5-Tasten-Kombination holt, auswertet und ausführt.

== Display-new ==

Die Funktion "display-new" löscht das Display und baut es neu auf.

[[image:M5-Soft-5T0-003.png]]

Zuerst wird das Display gelöscht. Dann wird mit dem Aufbau begonnen. Zuerst wird der blaue Balken hinter dem Titel gezeichnet und dann die Programmmeldung daraufgeschrieben. Diese Reihenfolge ist wichtig,da der Balken die Schrift sonst überdeckt. Die grafischen Elemente wurden mit dem Oberflächeneditor von UIFlow entworfen. Da das diese Editor die Ausrichtung auf dem Display nicht darstellt gestaltet sich der ein wenig kompliziert. Beim Einsatz des Titelelements und gedrehtem Display wird nur ein 80px breiter blauer Balken erzeugt. Deshalb habe ich diesen per dazugesetzt.

[[image:M5-Soft-5T0-004.png]]

Dann wird der Modus abgefragt in dem sich das Programm befindet. Modus 0 ist der normale Modus, Modus 1 der Eingabemodus. In diesem wird die gerade aktive Stelle der Eingabe grau hinterlegt. Im Modus 0 wird kein Cursor angezeigt.

[[image:M5-Soft-5T0-005.png]]

Anschliessend erfolgt die Anzeige des aktuellen Wertes. "Anzeige disp-wert show" ist erforderlich, damit der Wert auch sicher angezeigt wird. Ohne diesen Block hängt die Anzeige von irgendwelchen anderen Einflüssen ab. Ich habe hier den internen Wert für den Strom (mA) noch durch 1000 geteilt, weil ich die Anzeige in Ampere darstellen wollte.

[[image:M5-Soft-5T0-006.png]]

Schliesslich wird noch die Statusleiste erzeugt. Auch hier wieder zuerst der grüne Hintergrundbalken und dann der Text. In diesem Fall soll die Spannung an dem Gerät und die im Wärme umgesetzte Leistung angezeigt werden. 

[[image:M5-Soft-5T0-007.png]]

Bei der Überschreitung eines Grenzwertes kann der Balken z.B. auf die Farbe rot umgestellt werden. Die Farbe kann im z.B. Hauptprogramm geändert werden.

[[image:M5-Soft-5T0-008.png]]


== Das Hauptprogramm ==
Das Hauptprogramm enthält 2 Teile, wie auch die Sketche der Aruino-IDE. Im Ersten Setup werden Dinge definiert und einmalige Aktionen ausführt um einen problemlosen Programmablauf sicherzustellen. Unter Schleife steht dann das Hauptprogramm, dass die eigentliche Funktion des Programms ausführt.

[[image:M5-Soft-5T0-010.png]]

=== Setup ===

Hier wird zuerst einmal das Display auf Horizontal mit Taste rechts eingestellt (1).

Dann werden diverse Variablen mit einem sinnvollen Wert belegt. So erhält die Variable imax z.B. den Wert 5000 der einem maximalen Strom von 5,000A entspricht.

Außerdem werden X-Positionen der drei anzuzeigenden Werte Wert, Volt und Watt festgelegt (werden im Programm nicht verändert).

[[image:M5-Soft-5T0-011.png]]

Schliesslich wird noch eine Liste mit internen Daten erstellt.

[[image:M5-Soft-5T0-012.png]]

Diese Liste enthält 4 Einträge, die den Stellen der einzugebenen Zahl entsprechen, wobei Stelle 1 ganz links liegt. Jeder dieser 4 Einträge erhält wieder eine List mit 2 Einträgen, die den Wert der Stelle und die X-Position des Cursors unter der Stelle beinhalten. Die Werte der Cursor-Positionen wurden durch ausprobieren ermittelt.

=== Schleife ===

[[image:M5-Soft-5T0-013.png]]

Dieses Hauptprogramm wurde geschrieben, um das Eingabeprogramm zu testen. Wenn ein Wert geholt wurde, wird die Farbe der Anzeige auf grün gesetzt. Dann auf einen Druck der Taste A gewartet und noch dem Loslassen der Taste die Schrift auf rot gesetzt. Schliesslich wird wieder auf einen Tastendruck gewartet und erneut in die Eingaberoutine gesprungen.

== Die Tastenabfrage und Auswertung ==

[[image:M5-Soft-5T0-014.png]]

Hier liegt der wesentliche Programmteil für die Abfrage der Tasten.

Zuerst wird die Farbe der Darstellung der eingegebenen Zahl auf gelb eingestellt. Das ist die Farbe für die Eingabe der Zahl. Wenn die Zahl eingegeben ist wird sie grün und wenn das Gerät später aktiv ist, also den eingestellten Strom zieht, dann wird sie rot.

Anschliessend werden die erforderlichen Variablen auf ihre Startwerte gesetzt. So wird mode = 1 für den Eingabemodus. der Cursor wird auf die erste Stelle (die ganz links) gesetzt.

Dann geht das Programm in eine Schleife, die solange durchlaufen wird, bis die Taste 4 (sel) gedrückt wird. Die Tastatur liefert ohne Tastendruck -1, bei gedrückter Taste deren Nummer (0...4). Wobei 4 der Sel-Taste im ersten Bild dieses Artikels entspricht. Damit wird der Eingabevorgang beendet.

Die folgende Schleife wartet darauf, dass eine Taste gedrückt wird. Wenn das der Fall, wird die entsprechende Zahl in eingabe gespeichert und darauf gewartet, dass die Taste wieder losgelassen wird. Das soll falschen Mehrfacheingaben verhindern.

Nun erfolgt die Auswertung des Tastendrucks und die Ausführung seiner Funktion:

Taste next = 0 - Die Nummer der Stelle wird um 1 erhöht und geprüft, ob die Zahl noch im zulässigen Bereich liegt. Wenn sie zu groß ist wird sie auf den maximalen Wert, hier 4 gesetzt. Dann werden die Werte für die Cursorposition und der Wert der Stelle geholt und ans Ende des Auswerteteils gesprungen. Dort wird das Display mit den neuen Einstellungen neu aufgebaut und auf den nächsten Tastendruck gewartet.

Taste before = 1 - Hier wird die Nummer der Stelle verringert und darauf geprüft ob die Stellenzahl <1 geworden ist. Wenn, dann wird sie auf 1 gesetzt. Der Rest erfolgt wie bei der vorherigen Taste.

Taste inc = 2 - Hier wird der einzugebenen Wert um den Wert der Stelle erhöht und anschliessend geprüft, ob der maximale Wert überschritten wird. Ist das der Fall, so wird Wert auf den maximale zulässigen Wert gesetzt. Anschließend wird das Display mit dem neuen Wert aufgebaut und auf den nächsten Tastendruck gewartet.

Taste dec = 3 - Hier geschieht das Gleiche wie bei Taste inc, nur dass der Wert abgezogen wird.

Taste sel = 4 - Diese Taste ist die OK- oder Enter-Taste. Wird sie gedrückt, so erfolgt keine Verarbeitung. Die IF-ElSEIF-Kette wird übersprungen und  am Ende das Dislay neu aufgebaut. Dann springt das Programm wieder zum Anfang der Schleife. Dort wird die 4 erkannt und diese Schleife verlassen. Nun wird am Ende noch der Modus auf 0 gesetzt (Eingabemodus ist beendet) und die Funktion verlassen.

== Der grafische Oberflächeneditor ==

[[Category:M5Stack-Software]]