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.

== 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 geteigt 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 ==

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

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

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

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



== Die Tastenabfrage und Auswertung ==






== Der grafische Oberflächeneditor ==

[[Category:M5Stack-Software]]