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.

technische Daten des ATOM Matrix

Wie schon erwähnt hat der ATOM Matrix die selbe 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.

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 Microcontroller 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. 86MB). 

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 Microcontroller mit dem Computer verbinden!
Nun müssen wir den neuen Bootloader auf den Microcontroller 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.

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

Wenn nun die Schaltfläche „Start“ geklickt wurde , wird der neue Bootloader aufgespielt.
Während dieses Prozesses darf der Microcontroller 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ück kehren.

eingeben des API Keys in UI Flow

Damit wir unseren Code auf den M5Stack ATOM Matrix aufspielen können müssen wir nun den APOI Key unseres Microcontrollers 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 nun der Dialog geöffnet ist wird die Resettaste am ATOM Matrix betätigt, es wird dann im unteren Abschnitt der API Key angezeigt.

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 Microcontroller 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 das 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 Microcontroller 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 Microcontroller selbst (3) und sobald wir auf die Schaltfläche „OK“ geklickt haben können wir mir 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

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 mit Hilfe 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.

Video

 

alternative mit großen Zahlen