Die 8×8 LED Matrix (mit Generator)

Wer schon einmal eine 8×8 Light Emitting Diode (LED) Anzeige für ein Mikrocontroller-Projekt programmiert hat, kennt das Problem: Das händische Ausrechnen der einzelnen Bildpunkte für den Programmcode kann ziemlich mühsam und fehleranfällig sein. Damit ist jetzt Schluss!
Ich habe euch ein kleines Werkzeug gebastelt, mit dem ihr eure Symbole, Buchstaben oder Animationen ganz bequem direkt hier im Browser zusammenklicken könnt.
So einfach funktioniert es:

1. Muster zeichnen: Klickt einfach auf die runden Punkte im dunklen Feld. Ein Klick schaltet den Punkt ein (er leuchtet rot), ein weiterer Klick schaltet ihn wieder aus. So malt ihr Pixel für Pixel euer Wunschmotiv.
2. Code erzeugen: Wenn euer Muster fertig ist, klickt auf die blaue Schaltfläche „Code generieren“.
3. Kopieren und einfügen: Im Textfeld darunter erscheint sofort der fertige Programmcode. Das Werkzeug rechnet euer Bild automatisch in das benötigte Zahlenformat um. Diesen Code-Schnipsel könnt ihr einfach in das unten vorhandene Code-Beispiel einfügen und direkt in eure Entwicklungsumgebung (wie zum Beispiel Arduino IDE oder Visual Studio Code) für euer nächstes ESP32- oder Arduino-Projekt ausprobieren.
   

Beispiel:

Wie entsteht dieser LED Matrix Code?

Vielleicht fragst du dich, wie aus ein paar bunten Punkten auf dem Bildschirm plötzlich eine Kombination wie 0x80 oder 0x3F wird. Das Ganze ist eigentlich nur eine Übersetzungshilfe für den Mikrocontroller.
Beispiel 1: Einsen und Nullen (Das Binärsystem)
Der Mikrocontroller versteht keine Farben oder Bilder. Er versteht nur „Strom an“ oder „Strom aus“. Für jede der 8 Leuchtdioden (LED) in einer Reihe merkt sich unser Werkzeug den Zustand:

• Leuchtet die Lampe (Rot), ist das eine 1.
• Ist die Lampe aus (Weiß), ist das eine 0.
  Nehmen wir die erste Zeile aus unserem Beispiel oben:
  🔴 ⚫ ⚫ ⚫ ⚫ ⚫ ⚫ ⚫
  
  Übersetzt in die Sprache des Computers sieht diese Reihe so aus:
  1 0 0 0 0 0 0 0
  Schritt 2: Die Kurzschreibweise (Das Hexadezimalsystem)
  Wenn wir nur mit Einsen und Nullen arbeiten, wird der Programmcode sehr lang und unübersichtlich. Deshalb übersetzt man diese 8er-Kette in einen kürzeren Code, das sogenannte Hexadezimalsystem (ein Zahlensystem, das 16 Zeichen nutzt).
  Dafür teilt der Computer unsere 8 Zahlen in zwei handliche 4er-Blöcke auf:
  Aus 10000000 wird 1000 und 0000.
  
• Nun wird jeder 4er-Block einzeln übersetzt:
  Der vordere binäre Block 1000 entspricht in unserem normalen Zahlensystem einer 8.
  Der hintere Block 0000 bleibt eine 0.
  Zusammengesetzt ergibt das die Zahl 80.
  
  Damit unser Programmcode später genau weiß, dass diese „80“ ein übersetzter Code ist und nicht einfach nur eine normale Zahl, setzt man in der Programmierung immer ein 0x davor.
  Und voilà: Aus unserer LED-Reihe wird der fertige Code 0x80! Das Werkzeug auf dieser Seite macht diese Rechnung für alle 8 Zeilen blitzschnell im Hintergrund, sodass du sofort loslegen kannst.

Ein zweites Beispiel: Woher kommt der Buchstabe in 0x3F aus der 4ten Zeile?

• Nehmen wir die vierte Zeile aus unserem Muster, in der fast alle Leuchtdioden an sind:
  ⚫ ⚫ 🔴 🔴 🔴 🔴 🔴 🔴
  Übersetzt in Einsen und Nullen (Strom an / Strom aus) sieht das so aus:
  0 0 1 1 1 1 1 1
  Auch hier teilen wir die Reihe wieder in zwei 4er-Blöcke auf:
  Aus 00111111 wird 0011 und 1111.
  
• Jetzt schauen wir uns an, was diese Blöcke wert sind. In der Computersprache hat jede Stelle in so einem 4er-Block einen festen Zahlenwert. Von rechts nach links gelesen sind das die Werte 1, 2, 4 und 8. Man rechnet einfach die Werte zusammen, bei denen der Schalter auf 1 steht:
  
  Der vordere Block (0011): Hier stehen die Einsen auf den Plätzen für die Werte 2 und 1. Zusammen ergibt das 3 (2 + 1).
  Der hintere Block (1111): Hier stehen überall Einsen. Wir rechnen also alle Werte zusammen: 8 + 4 + 2 + 1 = 15.
  Jetzt haben wir für den vorderen Teil eine 3 und für den hinteren Teil eine 15.
  
  Hier entsteht ein kleines Problem: Wenn wir das nun einfach als Ergebnis hintereinanderschreiben, stünde da „315“. Der Computer wüsste nicht, ob das eine 3 und eine 15, oder eine 31 und eine 5 sein soll.
  Deshalb nutzt man in der IT das Hexadezimalsystem. Das funktioniert am Anfang wie unser normales Zählen von 0 bis 9. Da es aber keine einzelnen Ziffern für 10 bis 15 gibt, macht man einfach mit dem Alphabet weiter:

• Unsere ausgerechnete 15 wird beim Übersetzen also zu einem F.
  Setzen wir nun den vorderen Block (3) und den hinteren Block (F) zusammen, erhalten wir 3F. Wie vorhin gelernt, setzen wir wieder das Erkennungszeichen 0x davor und wir haben unser fertiges Ergebnis: 0x3F.
  
  Probiert es einfach hier im Generator aus. Hexadezimalsystem ist also keine Zauberei, sondern einfach eine clevere Art, lange Ketten von Einsen und Nullen kürzer aufzuschreiben.

Arduino Sketch:

Hier ein vollständiger und praxisnaher Beispiel-Code, um nun eine solche 8×8 Leuchtdioden-Matrix (Light Emitting Diode – LED) ansteuern zu können. Man nutzt in der Bastler-Welt meistens fertige Bauteile mit dem Chip MAX7219. Dieser Chip nimmt uns die schwere Arbeit ab, jede der 64 LEDs einzeln mit Strom versorgen zu müssen.
Hier ist die Vorlage. Egal ob die klassische Arduino-Software (die sogenannte Integrated Development Environment – IDE) verwendet wird oder im Visual Studio Code mit Platformio, dieser Code funktioniert überall.

1. Die Vorbereitung (Bibliothek installieren)

Damit der Arduino den MAX7219-Chip versteht, brauchen wir eine Übersetzungs-Hilfe, eine sogenannte Bibliothek (Library).
Suche in der Bibliotheksverwaltung nach LedControl (von Eberhard Fahle) und installiere sie.

2. Die Verkabelung

Das Matrix-Modul hat meistens 5 Anschlüsse. So verbindest du sie mit einem Standard-Arduino (wie dem Arduino Uno):

3. Der Programmcode (Sketch)

Diesen Code kannst du nun kopieren. Oben bei meinMuster setzen wir genau den Code ein, den unser neues Web-Werkzeug ausgespuckt hat.

#include "LedControl.h"

// Wir legen die Pins fest, an die wir das Modul angeschlossen haben
int DIN_PIN = 12;
int CS_PIN = 11;
int CLK_PIN = 10;

// Hier richten wir das Modul ein: (Daten-Pin, Takt-Pin, Auswahl-Pin, Anzahl der Module)
// Da wir nur eine 8x8 Matrix nutzen, steht am Ende eine 1.
LedControl matrix = LedControl(DIN_PIN, CLK_PIN, CS_PIN, 1);

// Hier fügen wir unseren generierten Code aus dem Generator ein!
byte meinMuster[8] = {
  0x80, 0x40, 0x21, 0x3F, 0x3F, 0x21, 0x40, 0x80
};

void setup() {
  // Der MAX7219-Chip ist beim Einschalten im Schlafmodus, um Strom zu sparen.
  // Wir wecken Modul 0 (unser erstes und einziges Modul) auf:
  matrix.shutdown(0, false);

  // Die Helligkeit einstellen (Werte von 0 bis 15 sind möglich)
  matrix.setIntensity(0, 8);

  // Zur Sicherheit einmal das komplette Display leeren, damit keine alten Muster leuchten
  matrix.clearDisplay(0);
}

void loop() {
  // Eine Schleife, die von 0 bis 7 zählt (also unsere 8 Reihen)
  for (int reihe = 0; reihe < 8; reihe++) {
    // Der Befehl setRow benötigt drei Infos: (Modulnummer, Reihe, Muster für die Reihe)
    // Wir übergeben ihm einfach Stück für Stück die Werte aus unserem Array.
    matrix.setRow(0, reihe, meinMuster[reihe]);
  }

  // Das Muster bleibt nun dauerhaft an.
  // Wir warten eine Sekunde, bevor die loop()-Schleife wieder von vorn beginnt.
  delay(1000); 
}

Was passiert in diesem Code?

Der wichtigste Teil passiert unten in der loop()-Schleife. Die Funktion setRow() der LedControl-Bibliothek ist nämlich genau dafür gemacht, solche vorberechneten Zahlenreihen zu verarbeiten.
Wir sagen dem Mikrocontroller einfach: „Schau dir unser Muster namens meinMuster an. Nimm dir die erste Zeile und schicke sie an die erste Reihe der Matrix. Dann nimm dir die zweite Zeile…“ und so weiter.
Da wir die Arbeit (das Ausrechnen der Hexadezimal-Werte) schon vorher im Generator erledigt haben, ersparen wir dem Arduino viel Rechenarbeit und er kann das Bild sofort anzeigen.

Vier 8×8 Leuchtdioden-Matrizen Lauflicht

Mit MAX7219 8x32 4 in 1 Dot Matrix LED Display Modul ein Lauflicht erzeugen.
Wenn wir nun Texte verschieben (scrollen) wollen, stößt unsere bisherige Lösung (LedControl) an ihre Grenzen. Wir müssten das Alphabet Pixel für Pixel selbst zeichnen und die Verschiebung über alle vier Module hinweg mathematisch berechnen. Das ist deutlich aufwendiger.

In der Bastler-Welt nutzt man für solche Laufschriften deshalb die Bibliothek MD_Parola zusammen mit der Bibliothek MD_MAX72XX. Diese beiden nehmen uns die komplette Arbeit ab: Sie kennen das Alphabet bereits und übernehmen die flüssige Animation.

1. Bibliotheken installieren

Suche in deiner Entwicklungsumgebung (zum Beispiel in der Arduino Software) nach der Bibliothek MD_Parola von majicDesigns und installiere sie. Wenn du gefragt wirst, ob auch fehlende Abhängigkeiten (wie MD_MAX72XX) installiert werden sollen, bestätige das unbedingt mit "Ja".

2. Die Verkabelung

Verkabelung ist die gleiche wie oben

3. Der Programmcode (Sketch)

#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h> // Serial Peripheral Interface (wird für die Kommunikation benötigt)

// Hier definieren wir, welche Art von Matrix-Modul wir haben.
// Bei den meisten 4er-Ketten aus Fernost ist es der Typ FC16_HW.
// Steht der Text später auf dem Kopf oder ist spiegelverkehrt, ändere 
// diesen Wert in GENERIC_HW oder PAROLA_HW.
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW 

// Wir haben 4 Module in unserer Kette
#define MAX_DEVICES 4 

// Unsere Anschlüsse am Mikrocontroller
#define DATA_PIN 12
#define CS_PIN   11
#define CLK_PIN  10

// Wir erstellen unser Matrix-Objekt und übergeben die Einstellungen
MD_Parola meineMatrix = MD_Parola(HARDWARE_TYPE, DATA_PIN, CLK_PIN, CS_PIN, MAX_DEVICES);

void setup() {
  // Das Modul starten
  meineMatrix.begin();
  
  // Die Helligkeit einstellen (Werte von 0 bis 15)
  meineMatrix.setIntensity(5);
  
  // Den Bildschirm einmal komplett leeren
  meineMatrix.displayClear();

  // Den Lauftext konfigurieren:
  // (Text, Ausrichtung, Geschwindigkeit, Pause am Ende, Effekt beim Reinkommen, Effekt beim Rausgehen)
  // Eine niedrigere Zahl bei Geschwindigkeit macht den Text schneller!
  meineMatrix.displayText("Prilchen", PA_CENTER, 80, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
}

void loop() {
  // Die Funktion displayAnimate() hält die Animation am Laufen.
  // Sie meldet "wahr" (true) zurück, wenn der Text komplett durchgelaufen ist.
  if (meineMatrix.displayAnimate()) {
    
    // Wenn der Text durchgelaufen ist, setzen wir die Animation zurück,
    // damit sie sofort wieder von vorne beginnt.
    meineMatrix.displayReset();
  }
}

Ergebnis: