Zurück zum Support

DIY Pixel Lab

Voraussetzung ist, dass bereits einige Medien vorhanden sind, die wir auf unserer kleinen LED Matrix abspielen wollen.

Zuerst richten wir Resolume ein und erstellen für unsere Pixel Map ein eigenes Setup des erweiterten Ausgangs. Zunächst müssen wir eine eigene Lichtquelle für unseren LED Matrix Bildschirm erstellen. Mit Resolumes Lichtquellen-Editor kann man beliebige Layout-Variationen kreieren. 

Lichtquellen Editor

Klicken Sie in Resolume auf Anwendung und wählen Sie den Lichtquellen-Editor:
Der Lichtquellen-Editor ist in 3 Bereiche unterteilt:

Lichtquellen

Eine Liste mit allen Lichtquellen, die man beliebig ergänzen, entfernen, umbenennen usw. kann.

Lichtquellen-Parameter

In diesem Bereich kann man Parameter für die editierte Lichtquelle einstellen, etwa welche Art von Kanälen, die Breite und Höhe der Lichtquelle, ihre Richtung, ihr Farbraum usw.

Pixel

Eine visuelle und numerische Darstellung der zu erstellenden Lichtquelle.

Unsere 14 x 14 Pixelmatrix hat insgesamt 196 Pixel. Wenn Sie sich daran erinnern, wie viele Kanäle ein einzelnes DMX Universe hat, wird klar, dass diese Matrix nicht in 1 DMX Universe passt. Wir können nur 170 Pixel an RGB Daten in 512 Bytes unterbringen! 

Wir müssen also 2 Lichtquellen erstellen, die das Panel in 2 Sektionen unterteilen. Der Einfachheit halber erstellen wir 2 Lichtquellen als linken und rechten Teil der Matrix und verwenden diese in 2 Universes. Das Treibergerät muss dann die DMX Daten von beiden Universes kompilieren und entsprechend zu den LEDs rendern. Dazu kommen wir später.
Oben sehen Sie das physische Layout aller Pixel auf unserer 14x14 Matrix. 

Wir erstellen 2 Lichtquellen namens "14x14_LEFT" und "14x14 _Right". Diese unterscheiden sich nur im Verteilung-Attribut.

Eigene Lichtquelle

Wir klicken im Lichtquellen Panel auf den "+" Button, um eine neue Lichtquelle zu erstellen. Scrollen Sie im linken Bereich nach unten und doppelklicken Sie auf die neue Lichtquelle, um sie umzubenennen. Wir nennen sie "14x14_LEFT".

Gehen wir die Lichtquellen-Parameter dieser Lichtquelle einmal durch.

Breite & Höhe

Damit stellen wir die Breite und Höhe der Lichtquelle ein. Wir wählen 7 Pixel in der Breite und 14 Pixel in der Höhe.

Farbraum

Dieses Farbraum-Attribut weist Resolume an, wie es die Farbdaten jedes Pixels ordnen soll und in welcher Reihenfolge die Farben erscheinen sollen. Unsere Pixel haben RGB LEDs, ABER, und dies ist ein großes ABER, aber die tatsächliche Reihenfolge, in die die LEDs die empfangenen Daten übersetzen, ist von Pixelmodell zu Pixelmodell unterschiedlich. 

Zur Vereinfachung wähle ich RGB und filtere das tatsächliche Layout der Daten später im Treibergerät. Beachten Sie, dass man auch RBGW (weiß) Pixel oder nur weiße Pixel ansteuern kann. Man kann hier unter sehr vielen Konfigurationen wählen.

Gamma

Wir können bei 2.5 bleiben.

Verteilung

Das wahrscheinlich wichtigste Attribut, das Resolume über die physische Platzierung jedes Pixels informiert. Unser Panel ist so ausgerichtet, dass das 1. Pixel in der unteren linken Ecke sitzt. Dann fließen die Daten nach oben, nach RECHTS in die nächste Reihe, nach UNTEN, nach RECHTS, dann wieder hoch usw., wie von dem gewählten Icon angezeigt.

Um eine zweite Lichtquelle zu erstellen, können wir einfach auf die aktuelle Lichtquelle "14x14_LEFT" klicken und DUPLICATE wählen. Dann benennen wir sie um in "14x14_RIGHT".

Die Parameter dieser Lichtquelle sind fast identisch, ABER wir müssen den Verteilung-Parameter ändern, da dieser Teil des Panels oben beginnt!

Jetzt sind unsere persönlichen Lichtquellen eingerichtet. Wir klicken auf Close, um sie zu speichern! 

Pixel Map

Als nächstes müssen wir sie in das System des erweiterten Ausgangs einfügen, das virtuelle Mapping einstellen und sie über Ihren eigentlichen Medien positionieren. 

Im Hauptfenster Resolumes klicken wir auf das Ausgang-Menü und wählen "Erweitert".

Klicken Sie oben links auf das VORLAGEN-Menü und dann auf NEU, um das gleiche leere Layout zu erhalten. Der Farbverlauf im Screenshot ist der des gewählten Mediums. Es ist ein einfacher Shader namens "Gradient", der im Lieferumfang von Resolume enthalten ist.

Jetzt müssen wir ein neues "DMX Lumiverse" hinzufügen. Resolume behandelt ein Lumiverse wie 1 DMX Universe mit einer eindeutigen DMX Universe ID und Subnet ID. Jedes Lumiverse kann maximal 512 Kanäle haben, genau wie ein normales DMX Universe. Klicken Sie oben links auf das große "+" Icon und wählen Sie "DMX Lumiverse".

Wir müssen die "Screen 1" Sektion aus dem Layout entfernen, da wir ein System nur mit DMX-Ausgang einrichten und für dieses Demo keine anderen Ausgänge benötigen. Klicken Sie auf "Screen 1" und anschließend auf das "X", um ihn aus dem Layout zu entfernen. Übrig bleibt "Lumiverse 1". 

Kopieren Sie dieses Lumiverse, indem Sie es rechtsklicken und Duplizieren wählen. Jetzt müssen wir darauf achten, dass in jedem Lumiverse die richtigen Lichtquellen enthalten sind. Standardmäßig wird beim Erstellen eines neuen Lumiverse die Lichtquelle hinzugefügt, mit der man zuletzt gearbeitet hat. Um ggf. die richtige zu wählen, klicken Sie im linken Panel auf die Lichtquelle und wählen rechts unten im Dropdown-Menü die richtige.

Das Layout unseres erweiterten Ausgangs hat 2 Lumiverses. Lumiverse 1 mit "14x14_LEFT" und Lumiverse 2 mit "14x14_RIGHT".

Im mittleren Panel kann man auf eine Lichtquelle klicken und sie an eine beliebige Position auf dem Bildschirm schieben. Auf dem obigen Screenshot sind die 2 Lichtquellen kombiniert, damit man alles besser nachvollziehen kann. 2 Dinge müssen getan werden. Wir müssen die Lichtquellen zusammenschieben und auf die richtige Größe skalieren.

Wie man sieht, wurden die Lichtquellen als Quadrate eingefügt. Aber da diese Lichtquellen 7 px breit und 14 px hoch sind, sind es eigentlich Rechtecke. Also klicken wir auf die linke Lichtquelle und stellen Sie im rechten Panel mit den Breite- und Höhe-Attributen ein.

Zur Vereinfachung setzen wir voraus, dass 1 LED Pixel exakt 50 Pixeln auf Ihrem Computerbildschirm entspricht. Die linke Lichtquelle hat also eine Breite von 7x50 = 350 px und eine Höhe von 14x50 = 700 px.
Wir stellen die gleichen Attribute für die rechte Lichtquelle ein und schieben dann beide zusammen.

Wir haben eine virtuelle Pixel Map für unser Panel erstellt. Speichern Sie Ihr Layout. Klicken Sie oben links auf das VORLAGEN Dropdown-Menü und wählen Sie SPEICHERN UNTER. Nennen Sie es "14 x 14 Panel". 

Zurück im Universe IDS müssen wir jetzt jeder Lichtquelle das geeignete Universe zuweisen, damit das Treibergerät berechnen kann, welches Universe auf welchen Teil des Panels gerendert werden soll. 

Wenn Sie auf "Lumiverse 1" klicken, sehen Sie auf der linken Seite Subnet und Universe. Diese belassen wir auf 0:0. Klicken Sie jetzt auf "Lumiverse 2" und stellen Sie Subnet 0:  Universe 1 ein. 

Jedes Mal, wenn ein einzelner Frame vom Ausgang gerendert wird, sendet Resolume 2 Datenblöcke. Block 1 enthält alle Daten für Lumiverse 1 und Block 2 alle Daten für Lumiverse 2. Das Treibergerät empfängt dann diese 2 Blöcke und erkennt daraus, welcher Datenblock auf welche Seite der Matrix kopiert werden muss.

Der DIY Pixeltreiber

In diesem Abschnitt bauen wir ein Gerät, mit dem man Art-Net Daten via WiFi empfangen und zur 14x14 LED Matrix weiterleiten kann. 

Hier ist ein kurzer Code, der alle benötigten Elemente enthält. Wenn Sie dieses Setup ganz von vorne aufbauen, sollten Sie einen Großteil des Codes verstehen, da er modular angelegt ist und sich auf sehr große Installationen erweitern lässt. 

Wir werden folgende Hardware und Software verwenden. Sie erhalten auch Links zu den verwendeten Geräten, damit Sie alles zu Hause nachvollziehen können. Diese Anleitung wurde für einen Windows PC geschrieben. Voraussetzung ist, dass Ihr PC mit einem kabelgebundenen oder drahtlosen Netzwerk verbunden ist und dass Sie den ESP32 mit einem WiFi Netzwerk verbinden können. (Das Netzwerk-Layout wird später beschrieben.) Sie werden eine WiFi SSD und deren Schlüssel benötigen. Ihr PC muss ungehindert mit dem WiFi-Netzwerk kommunizieren können.

Hardware

Software

Arduino IDE installieren und ESP32 API einrichten

Laden Sie die Arduino IDE von arduino.cc herunter und installieren Sie sie wie üblich. Gehen Sie dann exakt wie folgt vor:

  1. Gehen Sie fürs ESP32 Arduino API zum Espressif GitHub
  2. Klicken Sie oben rechts auf "Clone or Download" und wählen Sie Download ZIP, um die Datei auf Ihrem Desktop zu speichern
  3. Gehen Sie zum Dokumente-Ordner Ihres Computers und suchen Sie den Arduino-Ordner "C:\Users\USERNAME\Documents\Arduino"
  4. Erstellen Sie einen Ordner namens "Hardware", falls noch nicht vorhanden
  5. Erstellen Sie im "Hardware" Ordner einen Ordner namens "espressif"
  6. Entpacken Sie in diesem Ordner den Inhalt der ZIP-Datei aus Schritt 2 und benennen Sie den entpackten Ordner um in "esp32"
  7. Gehen Sie in den "esp32\tools" Ordner, suchen Sie die ausführbare "get.exe" Datei, doppelklicken Sie darauf und warten Sie, bis die Eingabeaufforderung verschwunden ist. Im Hintergrund wird das neueste API von den Espressif Servern heruntergeladen, was je nach Internet-Verbindung 5 - 10 Minuten dauern kann. Sobald die Eingabeaufforderung verschwunden ist, können Sie mit dem nächsten Schritt fortfahren
  8. Öffnen Sie die Arduino IDE. Klicken Sie auf das Tools-Menü, wählen Sie Board und scrollen Sie nach unten. Wenn Sie bis jetzt alles korrekt installiert haben, sehen Sie eine ganze Menge ESP32 Platinen wie unten


Laden Sie dann den Projekt-Quellcode von GitHub herunter, speichern Sie den Ordner auf dem Desktop und öffnen Sie die Projektdatei "ESP32ArtNetDriver.ino". Klicken Sie auf das Tools Menü und wählen Sie Boards. Suchen und wählen Sie dann die Platine "Node32S". 

Verbinden Sie den ESP32 via USB-Kabel mit Ihrem PC und warten Sie, bis die Treiber installiert sind. Gehen Sie dann in der Arduino IDE zu Tools, PORT und wählen Sie den Port, an den der EPS32 angeschlossen ist. Jetzt können Sie den Code kompilieren und zum Microcontroller hochladen, aber lesen Sie weiter, da noch einige Dinge geändert werden müssen.

In den Zeilen 22 und 23:

//Networking 

const char * ssid = "ArtNet"; 

const char * password = "megapixels";

Ändern Sie SSID und Passwort entsprechend dem Namen des Netzwerks (die SSID) und dem Passwort des WiFi. Klicken Sie dann auf den UPLOAD Button, warten Sie ein paar Sekunden, bis der Code kompiliert ist, und laden Sie die Daten dann zum ESP32 hoch. Jetzt ist Ihr DevBoard betriebsbereit und wir können die Hardware anschließen!

Hinweise zum Netzwerk bei diesem Lab

Bei diesem Hardware Setup erzielen Sie die beste Performance, wenn Sie den Computer mit Resolume über einen kabelgebundenen Netzwerk-Port ans Netzwerk anschließen. Man kann Art-Net auch via WiFi von Resolume streamen, aber es werden aufgrund der Natur des UDP-Protokolls Verzögerungen und Verluste von Datenpaketen auftreten. Hier ist ein Beispiel für unser bevorzugtes Netzwerk-Setup bei diesem Lab:

Wir verwenden einen relativ billigen Router der Consumer-Klasse mit aktiviertem WiFi von TP-LINK. Man kann aber auch jeden anderen Router verwenden, solange DHCP aktiviert ist.

Hardware Verkabelung

Richten Sie die Hardware wie in der Abbildung oben ein. 

Wir nutzen den SN74HCT245 für die Pegelumwandlung. Die DATA- und CLOCK-Leitungen der SK9822 Pixel setzen einen Logikpegel von 5V voraus, bei dem 0V = 0 und 5V = 1 sind. Der ESP32 hat einen Logikpegel von 3,3 V, bei dem 0V = 0 und 3,3V = 1 sind! 

Wenn alles angeschlossen ist, schalten Sie Ihr Netzteil ein. Sie werden staunend sehen, dass Sie nichts sehen! 

Ausgang in Resolume aktivieren

Zu diesem Zeitpunkt werden Sie auch bei laufendem Resolume nichts auf dem Panel sehen, da wir noch keine Daten mit Resolume ausgeben! 

Öffnen Sie Resolume und gehen Sie zum erweiterten Ausgang. Bei diesem Demo senden wir Daten mit dem "Broadcast" Verfahren zum ESP32. Die Übertragung von UDP Paketen bringt besonders über WiFi viele Herausforderungen mit sich, daher sollten Sie auch zukünftig dieses Verfahren nur bei einem kleinen, kontrollierten Lab verwenden.

Klicken Sie auf "Lumiverse 1" und wählen Sie rechts beim "TargetIP" Attribut die Option "Broadcast". Nachdem Sie das Gleiche bei "Lumiverse 2" getan haben, wird Ihre Ausgabe auf Ihrem Matrix-Display erscheinen!

In Verbindung stehende Artikel