Einrichtung & Installation M5Stack
Vorbereitung der Entwicklungsumgebung
Die folgende Checkliste erleichtert den Einstieg in die IoT-Anwendungsentwicklung. Die Liste enthält sämtliche notwendigen Vorkehrungen, um den Anwendungsfall mit dem M5Stack zu realisieren.
M5Burner muss auf dem Computersystem installiert sein – M5Burner ist unter https://m5stack.com/pages/download zu finden
Verwendung des M5Burner um auf dem M5Stack die aktuellste Firmware zu installieren
Bei der allerersten Verwendung des M5Stack muss man den M5Burner verwenden. Durch den M5Burner kann man die Firmware auf dem M5Core installieren. Dieser muss dieselbe Version haben wie UIFlow (wenn man damit arbeitet).
Den M5Burner kann man nach dem Download über die Datei „M5Burner.exe“ ausführen, wie in der nächsten Abbildung gezeigt.
Sobald man den M5Burner geöffnet hat, muss man die richtige UIFlow-Version laden. Dafür muss man auf das Download-Symbol neben der ausgewählten UIFlow-Version klicken. Danach sind der M5Stack über das USB-C Kabel an den Laptop/PC anzuschließen und der richtige COM-Anschluss auszuwählen. Anschließend kann man auf Burn klicken und die Firmware wird auf dem M5Stack installiert. Empfehlenswert ist es hier die Version „UIFlow-v1.4.5“ zu installieren. Die Darstellung vom M5Burner wird in Abbildung 5 gezeigt. In dieser Abbildung wurde die UIFlow-Version „UIFlow-v1.3.2“ ausgewählt.
Es kann vorkommen, dass das Computersystem den M5Stack nicht erkennt. Sollte dies geschehen, kann der Treiber „CP2104 Driver“ für den M5Stack, ebenfalls von der Seite https://m5stack.com/pages/download geladen werden.
Installieren von Treiber CP2104 Driver des M5Stack – dieser ist unter https://m5stack.com/pages/download zu finden
Installation von lokaler UIFlow-Programmierumgebung auf Computersystem
Die lokale Programmierumgebung von UIFlow kann von https://m5stack.com/pages/download geladen werden.
Verwendung von UIFlow
Um UIFlow verwenden, und somit Programme entwickeln zu können, gibt es zwei Möglichkeiten. UIFlow lässt sich installieren, und lokal auf dem Computersystem nutzen, oder auch online unter der Webseite https://flow.m5stack.com/.
Innerhalb der UIFlow-Oberfläche wird beim Starten der lokalen Programmierumgebung nach einem verbundenen M5Stack gefragt, welcher in der COM: Schaltfläche ausgewählt wird.
Üblicherweise wird der korrekte COM-Anschluss automatisch angezeigt. Sollte dies jedoch nicht der Fall sein, so kann man über den Gerätemanager des Computersystems herausfinden, welcher COM-Anschluss in UIFlow zu verwenden ist. Dafür klickt man mit der rechten Maustaste auf das Windows Symbol im unteren linken Bereich des Desktop und anschließend wählt man „Geräte-Manger“ aus, wie in der folgenden Abbildung zu sehen ist. Unter „Anschlüsse (COM & LPT)“ kann man dann herausfinden, über welchen COM der M5Core angesprochen werden kann. Diese Information findet man, sobald „Silicon Labs CP210x USB to UART Bridge (…)“ unter den Anschlüssen aufscheint. 
Dieser COM-Anschluss muss dann auf der Startseite von UI-Flow eingegeben werden.
Nach einer erfolgreichen Verbindung ist die Nutzung vom M5Stack und UIFlow vorbereitet. Dies erkennt man, wenn am unteren linken Rand des Bildschirms der Status „Connected“ sichtbar ist. Diese Anzeige ist in der nächsten Abbildung zu sehen.
Um den M5Stack online steuern zu können, muss die Seite https://flow.m5stack.com/ aufgerufen werden. Hier wird zunächst nach dem API Key gefragt .
Dieser ist direkt vom M5Stack abzulesen, indem zunächst auf die C-Taste für “Setup” gedrückt wird, und danach auf “Switch to USB Mode”. Durch das Menü lässt sich mittels A bzw. C Taste navigieren. Bestätigt kann ein Modus mittels B-Taste werden.
Hat man Switch to USB Mode ausgewählt, so erscheint am M5Stack ein QR-Code und links davon der APIKEY, welcher in der Webseite eingetragen werden muss.
Nach richtiger Eingabe erscheint links unten das Symbol “connected”:
Anwendung UIFlow
Nachdem die Verbindung zwischen UIFlow und dem M5Stack hergestellt wurde, ist die Nutzung der UIFlow-Plattform möglich – die ersten Schritte für die Entwicklung einer eigenen Anwendung sind gesetzt. In Abbildung 19 werden die Benutzungsschnittstelle dargestellt und die wichtigsten Komponenten hervorgehoben. Diese Komponenten werden unterhalb des Bildes noch genauer erklärt.
Hier können jene Units hinzugefügt werden, die man programmieren möchte.
Die Oberfläche des M5Core kann hier kreiert werden. Kreise, Texte, Quadrate und Bilder können per Drag and Drop eingefügt werden.
Dies ist der Programmierbereich (Coding Area). Hier erstellt man per Drag and Drop seinen Code, den man später ausführen möchte, zusammen.
Blöcke sind Bausteine in verschiedensten Farben mit verschiedensten Funktionen, die benutzt werden, um eine Ablauflogik zu programmieren. Abhängig davon, welche Funktion man benötigt, kann man einen Block per Drag und Drop auf der Oberfläche einfügen. Im Beispiel werden Blöcke aus dem Event-, PIR- und Label-Block verwendet.
Hier kann man zwischen den Programmiersprachen Blockly und Python wechseln.
Damit spielt man den Code temporär auf den M5Core, welcher diesen ausführt, sofern er korrekt zusammengestellt wurde.
Per Drag and Drop kann man zu diesem Papierkorb Blöcke hinziehen, die man nicht mehr benötigt, damit sie gelöscht werden.
Die Blöcke, die man zum Programmieren verwendet, befinden sich in dem Panel auf der linken Hälfte der UIFlow-Oberfläche. Dort kann zuerst eine Metakategorie ausgewählt werden und anschließend der Block, den man benötigt, per Drag and Drop in die Coding Area gezogen werden. Zur Veranschaulichung wird der Event-Block in Abbildung 20 verwendet, welcher besonders wichtig für den Start eines Programms ist.
Begriffserklärung
Um mit dem Programmieren sinnvoll starten zu können, sollte man jedoch davor noch ein die in der Folge beschriebenen Konzepte kennen.
Variablen stellen sozusagen das Gedächtnis eines Programms dar. Sie können Werte speichern, die im Zuge der Ausführung eines Programms geändert bzw. verwendet werden können, und zwar durch den Aufruf des Namens der Variable. Beispiele unterschiedlicher Variablen sehen wir in der nächsten Abbildung.
In diesem Bild ist ein Beispiel zu sehen, in dem die Berechnung von 2 + 3 durchgeführt wird, und diese Berechnung dann ausgegeben wird.
Als Label werden die Textplatzhalter auf dem M5Core bezeichnet, mit denen man gewisse Werte oder Strings auf dem LCD-Display des M5Core ausgeben kann.
Um ein Label auf dem M5Core anzuzeigen, muss man dieses von der linken oberen Ecke in UIFlow per Drag and Drop auf die Oberfläche des M5Core ziehen.
Danach erscheint in der Auswahlleiste für die Blöcke unter UI eine Subkategorie Label. Somit kann man jetzt die Blöcke auswählen, mit denen man die Ausgabe auf dem M5Core verändern kann.
Das Prinzip für Title, Rect, Circle und Image ist das gleiche wie für Label, mit Ausnahme der Subkategorien unter „UI“, die dann Title, Rect, Circle oder Image heißen, abhängig davon, welche Felder per Drag and Drop auf den Screen des M5Stack gezogen wurden.
