Programmieren des M5Stack ATOM Matrix mit UI Flow

In diesem Beitrag möchte ich dir zeigen wie einfach du mit UI Flow den kleinen Microcontroller M5Stack ATOM Matrix programmieren kannst.

der Microcontroller M5Stack ATOM Matrix

Den M5Stack ATOM Lite habe ich dir bereits im Beitrag ATOM Lite von M5Stack vorgestellt, der einzige kleine bzw. große Unterschied zwischen diesen beiden ist, das der ATOM Matrix über eine 5×5 RGB LED Matrix verfügt. Ansonsten sind diese beiden Microcontroller identisch.

Bezug des M5Stack ATOM Matrix

Den M5Stack ATOM Matrix habe ich wie auch den ATOM Lite über aliexpress.com für knapp 6€ zzgl. Versandkosten erstanden. Diesen kannst du aber auch recht günstig für ca. 13€ inkl. Versandkosten über ebay.de* erstehen.

Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!

Technische Daten des ATOM Matrix

Wie schon erwähnt hat der ATOM Matrix dieselbe Ausstattung wie auch der ATOM Lite jedoch mit einer 5×5 RGB LED Matrix.

Betriebsspannung: 5V mit max. 500mA
Umgebungstemperatur: 0°C .. 40°C
CPU: ESP32-PICO mit 240 MHz dual core
Flash Speicher: 4MB
Schnittstellen:
- USB Typ C,
- WiFi,
- Bluetooth Low Energy (BLE),
- IR Diode,
- Grove,
- Taster
Abmaße (LxBxH): 24mm x 24mm x 15mm

Aufbau & Pinout

Der ATOM Matrix verfügt über einen Taster auf der linken Seite für den Reset und über einen „versteckten“ Taster auf der RGB Matrix. Des Weiteren verfügt dieser über eine USB-Typ-C Schnittstelle sowie über eine Grove Schnittstelle zum Anschluss von Sensoren & Aktoren.

M5Stack ATOM Matrix, USB Typ C & Grove Schnittstelle — M5Stack ATOM Matrix, Reset Taster

Auf der Rückseite befinden sich 2 Buchsenleistenreihen, welche beschriftet sind.

UI Flow

Das Onlinetool UI Flow kannst du über die Adresse https://flow.m5stack.com/ erreichen. Auf der Startseite suchst du zunächst deinen Mikrocontroller aus. In unserem Fall wählen wir die Sprache „Deutsch“ sowie den ATOM Matrix aus.

Unter dem Abschnitt „M5Burner“ musst du das Tool zum Übertragen des späteren kompilierten Codes herunterladen, es stehen dir 2 Versionen zur Verfügung (Windows & Mac). Da ich einen Rechner mit Microsoft Windows 10 verwendet, lade ich mir den M5Burner für Windows herunter (ca. 86 MB).

M5Burner mit Ausgewählter Rubrik "ATOM" — M5Burner mit Ausgewählter Rubrik „ATOM“

Da wir wie bereits erwähnt einen ATOM Matrix haben, klicken wir die Schaltfläche „Download“ in der Kachel „UIFLOW(MATRIX)“.
Für den nächsten Schritt musst du den Mikrocontroller mit dem Computer verbinden!
Nun müssen wir den neuen Bootloader auf den Mikrocontroller kopieren, das ist mit diesem Tool recht einfach, denn man muss nur den richtigen COM Port (1) auswählen und die Schaltfläche „Burn“ (2) betätigen.

M5Burner zum brennen des Bootloaders für den ATOM Matrix

Nachdem klick, wird dann der Dialog „Wifi Settings“ angezeigt in welchem du die Zugangsdaten zu deinem lokalen WLAN eintragen kannst.

"WiFi Settings" in der Anwendung "M5Burner" — „WiFi Settings“ in der Anwendung „M5Burner“

Wenn jetzt die Schaltfläche „Start“ geklickt wurde, wird der neue Bootloader aufgespielt.
Während dieses Prozesses darf der Mikrocontroller nicht vom Computer getrennt werden!

=================
Start Burn
=================
--chip esp32 --port COM3 --baud 750000 --before default_reset write_flash -z --flash_mode dio --flash_freq 80m --flash_size detect 0x1000 E:\9999_Arduino\M5Burner\packages\fw\atom\UIFlow_Matrix-v1.7.2.bin
=================
esptool.py v2.5.0
Serial port COM3
Connecting...
.

Chip is ESP32-PICO-D4 (revision 1)
Features: WiFi, BT, Dual Core, 240MHz, Embedded Flash, VRef calibration in efuse
MAC: 24:a1:60:46:03:98
Uploading stub...
Running stub...
Stub running...
Changing baud rate to 750000
Changed.
Configuring flash size...
Auto-detected Flash size: 4MB
Compressed 4182016 bytes to 1847866...

Writing at 0x00001000... (0 %)
Writing at 0x00005000... (1 %)
...
Writing at 0x001bd000... (99 %)

Writing at 0x001c1000... (100 %)

Wrote 4182016 bytes (1847866 compressed) at 0x00001000 in 34.0 seconds (effective 985.3 kbit/s)...
Hash of data verified.

Leaving...
Hard resetting via RTS pin...
=================
 Burn Successfully 
=================

Wenn auch dieser Prozess abgeschlossen ist, dann kann der Dialog über die Schaltfläche „Close“ schließen und wir können zur Webseite von UI Flow zurückkehren.

Eingeben des API Keys in UI Flow

Damit wir unseren Code auf den M5Stack ATOM Matrix aufspielen können, müssen wir nun den API Key unseres Mikrocontrollers eingeben.
Diesen kannst du auf 2 Wege ermitteln.

COM Monitor von M5Burner

Zum einen über den M5Burner über den „COM Monitor“ (blaue Schaltfläche, oben rechts in der Anwendung). Wenn jetzt der Dialog geöffnet ist, wird die Resettaste am ATOM Matrix betätigt, es wird dann im unteren Abschnitt der API-Key angezeigt.

API Key im M5Burner - "COM Monitor" — API Key im M5Burner – „COM Monitor“

WLAN Netzwerk

Der API Key ist aber auch Bestandteil der Kennung des Wifi Netzwerks.

alternative Nutzung der UI Flow IDE

Die UI Flow IDE kann, nachdem der neue Bootloader auf den Mikrocontroller gespielt wurde, genauso gut wie die Online Version verwendet werden.

Du kannst die aktuelle Version von der UI Flow IDE unter https://m5stack.com/pages/download für Windows, Mac oder Linux herunterladen.

Ich finde, dass die IDE sogar noch etwas besser funktioniert und daher möchte ich in den nächsten Schritten diese verwenden.

Wenn die 100 MB große *.zip Datei heruntergeladen wurde, muss diese in ein beliebiges Verzeichnis entpackt werden. (Und kann von dort aus auch gleich gestartet werden.) Beim ersten Start der Software unter Windows 10 wird man aufgefordert den Zugriff auf lokale Ressourcen zu geben, diese werden zbsp. für die Verbindung über USB zum Mikrocontroller benötigt.

Einstellungen

Zunächst muss der COM Port ausgewählt werden (1) an welchem der ATOM angeschlossen wurde und die Sprache(2). Danach den Mikrocontroller selbst (3) und sobald wir auf die Schaltfläche „OK“ geklickt haben, können wir mit der Programmierung beginnen.

Programmieren des M5Stack ATOM Matrix mit UI Flow

Nun, nachdem die Entwicklungsumgebung eingerichtet ist, möchte ich dir einige Beispiele zeigen welche du mit dem M5Stack ATOM Matrix und wenigen Bauteilen nachstellen kannst.

RGB LEDs des ATOM Matrix steuern

Im ersten Beispiel möchte ich dir zeigen, wie du die RGB LED Matrix steuern kannst. Dazu kannst du entweder einzelne Punkte aktivieren und das Programm aufspielen oder aber mit etwas mehr Code das ganze dynamisch und bunt gestalten.

Einfaches ansteuern von RGB LEDs

dynamisches ansteuern von RGB LEDs

M5Stack ATOM Matrix, steuern der RGB LEDs mit UI Flow

Dieses Video auf YouTube ansehen.

Taster abfragen

Unter der LED Matrix ist ein kleiner Taster verbaut welchen wir auch abfragen können bzw. auf die Aktion des Tasters reagieren können.

Steuern der RGB LED Matrix mit dem Taster

Als Erstes wollen wir mithilfe des Tasters die RGB LED Matrix steuern. D.h. bei einem Klick des Tasters soll ein Index nach oben gezählt werden und der entsprechende NeoPixel in Rot eingefärbt werden.