Hast du schon mal versucht, ein komplexes Bild oder gar eine Animation für eine 16x16 oder 32x32 NeoPixel-Matrix (WS2812B) direkt im Arduino-Code zu schreiben? Wenn ja, dann weißt du: Das ist pure Fleißarbeit. Jedes Pixel einzeln mit RGB-Werten zu definieren, hunderte Zeilen Code für ein einziges Bild zu tippen das macht keinen Spaß und ist extrem fehleranfällig.
Die Idee für den NeoPixel Designer entstand genau aus diesem Frust heraus. Ich wollte ein Tool, mit dem ich einfach zeichnen kann und das mir den fertigen FastLED-Code per Knopfdruck ausspuckt, damit ich mich wieder auf das eigentliche Basteln konzentrieren kann.
Warum auf ronnie-berzins.de?
Vielleicht wunderst du dich, warum das Tool nicht direkt hier auf kreativekiste.de läuft. Das hat einen einfachen Grund: Die technische Komplexität. Das Tool basiert auf einer sehr modernen Struktur aus HTML5 und JavaScript. Eine direkte Einbindung in Joomla (das System hinter dieser Website) hätte zu viele Kompromisse bei der Performance und vor allem bei der Sicherheit bedeutet. Damit der Designer flüssig läuft und der Code-Generator sauber arbeitet, habe ich mich entschieden, ihn auf meinem Webspace unter ronnie-berzins.de auszulagern. So ist er sicher isoliert und bietet die beste Leistung.
Hier geht es zum Pixel-Designer https://www.ronnie-berzins.de/
Die 4 Module des Designers
Ich habe das Tool in vier spezialisierte Bereiche aufgeteilt, je nachdem, was du gerade bauen möchtest:
- Statisches Bild: Hier kannst du ein einzelnes Bild Pixel für Pixel zeichnen. Ideal für Logos, Symbole oder einfache Anzeigen.
- Bilderfolge (Frames): Du erstellst mehrere Einzelbilder hintereinander, die wie bei einem Daumenkino abgespielt werden. Perfekt für kleine, handgezeichnete Animationen.
- Bewegte Bilder (Tweening): Das ist ein echtes Highlight. Du definierst ein Start- und ein Endbild, und der Designer berechnet automatisch die Übergänge (Schritte) dazwischen. So entstehen butterweiche Farbübergänge oder Bewegungen ohne großen Aufwand.
- Laufschrift: Gib einfach deinen Text ein, wähle eine Farbe und die Geschwindigkeit. Der Designer wandelt die Buchstaben in eine Matrix-Animation um, inklusive Scroll-Funktion.
Worauf du achten musst (Grenzen der Hardware)
So einfach das Erstellen auch ist, die Hardware hat ihre Grenzen. Hier sind drei Dinge, die du beim Basteln immer im Kopf haben solltest:
- Der Stromhunger: Ein Arduino kann eine große Matrix niemals alleine über den 5V-Pin versorgen. Ab ein paar dutzend LEDs brauchst du unbedingt ein externes Netzteil.
- Der Speicher (RAM): Ein Arduino Uno hat nur 2 KB SRAM. Wenn du riesige Animationen mit hunderten Frames erstellst, ist der Speicher schnell voll. In solchen Fällen solltest du auf einen Arduino Mega oder einen ESP32 ausweichen.
- Deine Augen: NeoPixel sind extrem hell. Schau beim Testen niemals direkt in die volle Helligkeit, besonders bei weißen Flächen. Nutze am besten ein Diffusor-Material oder regle die Helligkeit im Designer weit runter.
Ein kleines Dankeschön
Zum Schluss möchte ich noch etwas loswerden: Dieses Projekt und vor allem das aufwendige Debugging des Code-Generators ist in enger Zusammenarbeit mit Gemini entstanden. Ohne diese Unterstützung wäre die Fehlersuche im JavaScript oft eine Sackgasse gewesen. Es ist nur fair, das zu erwähnen, denn diese Kombination aus menschlicher Idee und KI-Unterstützung hat dieses Tool erst möglich gemacht.
