Processing ist eine extrem leistungsstarke, auf Java basierende Open-Source-Programmiersprache und Entwicklungsumgebung (IDE). Sie wurde speziell für Elektronik-Begeisterte, Künstler, Designer und Bastler entwickelt, um visuelle Inhalte mit minimalem Code-Aufwand auf den PC-Bildschirm zu zaubern.
Während dein Arduino Sensordaten misst, LEDs schaltet oder Motoren drehen lässt, ist Processing das perfekte Werkzeug auf deinem Computer, um diese Daten in wunderschöne, interaktive Oberflächen (HMI - Human Machine Interfaces), Diagramme, Tachos oder vollgesteuerte Dashboards zu verwandeln. Es erweckt die nackten Zahlen deines Mikrocontrollers visuell zum Leben.
Download & Installation
Um den generierten Code auszuführen, brauchst du die offizielle, kostenlose Processing-Entwicklungsumgebung.
- Download-Link:
https://processing.org/download - Installation: Du musst die heruntergeladene Zip-Datei lediglich auf deinem PC (Windows, Mac oder Linux) entpacken. Eine Installation ist nicht notwendig. Öffne einfach die processing.exe und du bist startklar!
Wie wird Processing programmiert?
Ein klassisches Processing-Programm basiert im Wesentlichen auf zwei festen Haupt-Säulen, die in einer Dauerschleife arbeiten:
- setup(): Dieser Bereich wird beim Start des Programms genau einmal ausgeführt. Hier stellst du die Weichen: Wie groß soll das Fenster sein? Welche Bilder müssen geladen werden? Welcher serielle COM-Port wird geöffnet?
- draw(): Dieser Bereich ist das absolute Herzstück. Er läuft als Endlosschleife standardmäßig exakt 60-mal pro Sekunde von oben nach unten durch. Du kannst dir das wie ein Daumenkino vorstellen. In jedem Durchgang wird der Bildschirm blitzschnell neu gezeichnet. Dadurch entstehen flüssige Bewegungen, Live-Updates deiner Tachos und direkte Reaktionen auf deine Mausklicks.
Wie funktioniert die ProcessingKiste?
Die ProcessingKiste nimmt dir die lästige Tipparbeit und das Auswendiglernen von Java-Befehlen komplett ab! Genau wie bei der Arduino-LogicKiste schiebst du dir deine visuelle Oberfläche ganz einfach logisch per Drag-and-Drop aus bunten Blöcken zusammen.
Im Hintergrund arbeitet ein intelligenter Code-Generator, der deine Blöcke in Echtzeit in sauberen, performanten Processing-Java-Code übersetzt. Diesen Code kopierst du am Ende einfach mit einem Klick, fügst ihn in die Processing-IDE ein und drückst auf "Start". Dein maßgeschneidertes PC-Dashboard ist fertig!
2. Die Kategorien und ihre Blöcke
🧱 Kategorie: Grundgerüst
Diese Kategorie enthält das unumgängliche Fundament deines Projekts. Ohne diese Struktur kann kein Processing-Programm existieren.
- Block: Processing Start
- Erklärung: Das ist der unersetzliche Hauptcontainer deines gesamten Programms. Er ist fest auf deiner Arbeitsfläche verankert. Er teilt deinen Code intern genau in die Bereiche auf, die Processing erwartet: GLOBAL (für die dauerhafte Anmeldung von Variablen), SETUP (für Befehle, die einmalig beim Start ausgeführt werden, wie Fenstergrößen oder das Laden von Medien) und DRAW (für das Daumenkino, in dem deine Tachos und Formen permanent live gezeichnet werden).
🔌 Kategorie: Schnittstelle
Hier schlägst du die Brücke zu deinem Arduino. Diese Blöcke regeln den Empfang und das Senden von Daten über das USB-Kabel (Serielle Verbindung).
- Block: Seriellen Port starten
- Erklärung: Dieser Block gehört zwingend in den SETUP-Bereich. Er teilt dem PC mit, auf welchem COM-Port (z. B. "COM3") dein Arduino angeschlossen ist und mit welcher Geschwindigkeit (Baudrate, z. B. 9600) geredet wird.
- Block: Wenn Daten empfangen werden
- Erklärung: Ein ganz besonderer, freischwebender Container. Er arbeitet wie ein Hardware-Interrupt. Er läuft völlig unabhängig von der schnellen Zeichen-Schleife im Hintergrund. Nur in der Millisekunde, in der der Arduino ein Datenpaket schickt, wacht dieser Block kurz auf, verarbeitet die Daten blitzschnell und geht wieder schlafen. Das sorgt dafür, dass deine Visu niemals ruckelt.
- Block: Lese Text bis Trennzeichen
- Erklärung: Holt die reingekommenen Zeichen vom USB-Port ab und liest sie als zusammenhängenden Text aus, bis das definierte Endzeichen (meistens ein Zeilenumbruch) erkannt wird.
- Block: Zerstückele Text am Komma
- Erklärung: Wenn dein Arduino mehrere Sensorwerte gleichzeitig schickt (z. B. "23.5,1012,1"), trennt dieser Block den Text an jedem Komma auf und speichert die Einzelteile in einer übersichtlichen Liste (Array) ab.
- Block: Sende Text an Arduino
- Erklärung: Schickt Daten oder Befehle vom PC zurück über das USB-Kabel an den Arduino (z. B. wenn du einen Button auf dem PC-Bildschirm anklickst, um eine LED an der Hardware einzuschalten).
🎨 Kategorie: Formen & Farben
Mit diesen Bausteinen gestaltest du das Aussehen deines Dashboards. Wichtig: Processing arbeitet wie ein Zeichner – die Reihenfolge von oben nach unten entscheidet, was im Vordergrund liegt!
- Block: Hintergrundfarbe
- Erklärung: Färbt die gesamte Leinwand mit einem Klick in deine Wunschfarbe ein. Gehört meistens als allererster Block in den DRAW-Bereich, um das alte Bild aus dem vorherigen Durchgang sauber zu übermalen.
- Block: Füllfarbe
- Erklärung: Bestimmt die Farbe für das Innere aller nachfolgenden Formen (Rechtecke, Kreise). Funktioniert wie das Auswählen eines Buntstifts.
- Block: Keine Füllung
- Erklärung: Schaltet die Füllung ab. Nachfolgende Formen werden transparent gezeichnet, sodass man nur noch ihren Rand sieht.
- Block: Randfarbe
- Erklärung: Legt die Farbe für alle Linien und die Außenränder von geometrischen Formen fest.
- Block: Kein Rand
- Erklärung: Deaktiviert die Randlinie vollständig. Formen haben dann ein sauberes, randloses Design.
- Block: Linienstärke
- Erklärung: Bestimmt in Pixeln, wie dick Linien und Umrandungen gezeichnet werden sollen.
- Block: Rechteck
- Erklärung: Zeichnet ein Rechteck. Du übergibst ihm die Startkoordinaten X und Y für die linke obere Ecke sowie die Breite und Höhe in Pixeln.
- Block: Kreis / Ellipse
- Erklärung: Zeichnet eine runde Form. Die Koordinaten X und Y bestimmen hier exakt den Mittelpunkt, gefolgt von der Breite und Höhe.
- Block: Linie
- Erklärung: Zieht einen geraden Strich von einem Startpunkt (X1/Y1) zu einem Endpunkt (X2/Y2).
📝 Kategorie: Texte
Speziell für die optimale User Experience (UX) gibt es hier einen eigenen Bereich für Schriften, damit Messwerte und Beschriftungen sofort an der richtigen Stelle landen.
- Block: Zeige Text
- Erklärung: Schreibt ein festes Wort oder den aktuellen Inhalt einer Variablen an die gewünschte X/Y-Position auf den Bildschirm.
- Block: Textgröße
- Erklärung: Ändert die Schriftgröße in Pixeln für alle nachfolgenden Textausgaben.
- Block: Textausrichtung
- Erklärung: Bestimmt, wie sich der Text zu seinem X-Koordinatenpunkt verhält: Linksbuendig, Zentriert oder Rechtsbuendig.
- Block: Schriftart
- Erklärung: Wechselt zwischen gängigen System-Schriftarten (wie Arial, Courier New oder Verdana), um deiner Visu einen technischen oder modernen Look zu verpassen.
- Block: Textfarbe
- Erklärung: Aus reiner UX-Sicht dein bester Freund: Hiermit legst du explizit die Farbe deines Textes fest, ohne im Menü nach der Füllfarbe für Formen suchen zu müssen.
📥 Kategorie: Eingaben (Input)
Hier befinden sich alle interaktiven Bedienelemente, mit denen der Nutzer vor dem PC aktiv Werte verändern oder Befehle auslösen kann.
- Block: Button geklickt
- Erklärung: Überwacht ein unsichtbares oder hinterlegtes Rechteck auf dem Bildschirm. Sobald der Nutzer mit der Maus in diesen Bereich klickt, gibt der Block sofort den Zustand wahr (true) aus. Perfekt für Schalter.
- Block: Schieberegler (Slider)
- Erklärung: Zeichnet einen analogen Schieberegler auf das Dashboard. Der Nutzer kann den Regler mit der Maus ziehen. Du musst das Ergebnis lediglich einer Variablen zuweisen, um den eingestellten Wert (zwischen dem einstellbaren Minimum und Maximum) zu sichern.
- Block: Zahleneingabe-Feld
- Erklärung: Zeichnet eine Box auf dein Dashboard. Klickt der Nutzer darauf, öffnet sich ein sicheres, natives Windows-Eingabefenster. Die dort eingetippte Zahl wird vom Block übernommen und direkt als mathematischer Wert für Berechnungen oder Sollwerte bereitgestellt.
- Block: Texteingabe-Feld
- Erklärung: Funktioniert wie das Zahlenfeld, nimmt aber geschriebene Wörter oder Namen entgegen. Ideal, um Namen für Bestenlisten oder Parametersätze einzutippen.
📤 Kategorie: Anzeigen (Output)
Diese Werkzeuge bereiten deine nackten Sensordaten grafisch ansprechend für das Auge auf.
- Block: Balkenanzeige
- Erklärung: Zeichnet ein dynamisches Balkendiagramm (Fortschrittsbalken). Der Balken füllt sich automatisch prozentual auf, je nachdem, wie hoch dein Sensorwert im Verhältnis zum eingestellten Min- und Max-Wert ist.
- Block: Zeigerinstrument (Tacho)
- Erklärung: Generiert ein klassisches, rundes analoges Zeigerinstrument (Halbkreis) mit einer Nadel. Die Nadel schlägt präzise im Verhältnis zum eingehenden Messwert aus.
- Block: Statuslampe (Digital)
- Erklärung: Eine klassische Meldeleuchte mit 2 Zuständen. Du gibst ihr ein Signal (wahr/falsch oder 1/0) und bestimmst zwei Farben. (Beispiel: Motor aus = Grau, Motor läuft = Grün).
- Block: Status-Ampel (Analog)
- Erklärung: Eine extrem flexible Mehrstufen-Lampe. Sie kann bis zu 5 verschiedene Zustände (0 bis 4) auswerten und wechselt je nach Zahl vollautomatisch auf die von dir hinterlegte Farbe. Perfekt für Warnsysteme (0 = Aus, 1 = Normal/Grün, 2 = Achtung/Gelb, 3 = Alarm/Rot).
🖼️ Kategorie: Bilder & Medien
Grafiken machen deine HMI-Oberflächen erst richtig professionell. Hier steuerst du das Laden von Bildern.
- Block: Lade Bild
- Erklärung: Gehört unbedingt in den SETUP-Bereich! Lädt eine Bilddatei (z. B. .png oder .jpg) aus dem Ordner deines Programms in den Arbeitsspeicher des PCs und gibt ihr einen Namen. Da das Laden von der Festplatte Zeit kostet, darf dieser Block niemals im schnellen DRAW-Bereich stehen.
- Block: Zeige Bild
- Erklärung: Dieser Block kommt in den DRAW-Bereich. Er holt das im Setup geladene Bild blitzschnell auf den Bildschirm und skaliert es exakt auf deine gewünschte X/Y-Position sowie Breite und Höhe.
🧮 Kategorie: Logik & Mathe
Das Gehirn deiner Visualisierung. Hier werden Bedingungen geprüft und Werte angepasst.
- Block: Wenn (If)
- Erklärung: Führt die darin platzierten Blöcke nur aus, wenn die angehängte Bedingung erfüllt (wahr) ist.
- Block: Wenn / Sonst (If / Else)
- Erklärung: Die Weiche: Ist die Bedingung erfüllt, wird der obere "Dann"-Bereich ausgeführt. Ist sie nicht erfüllt, schaltet das Programm sofort in den unteren "Sonst"-Bereich um.
- Block: Vergleich (==, !=, <, >)
- Erklärung: Vergleicht zwei Werte oder Variablen miteinander und liefert ein klares Ja (wahr) oder Nein (falsch).
- *Block: Grundrechenarten (+, -, , /)
- Erklärung: Erlaubt dir mathematische Berechnungen direkt in der Visu vorzunehmen.
- Block: Skaliere (Map)
- Erklärung: Einer der mächtigsten Blöcke! Er rechnet einen Wertebereich harmonisch in einen anderen um. Schickt dein Arduino zum Beispiel einen analogen Sensorwert von 0 bis 1023, deine Balkenanzeige auf dem PC-Bildschirm ist aber nur 0 bis 300 Pixel breit, rechnet dieser Block das im Hintergrund völlig automatisch mathematisch um.
- Block: Begrenze Wert (Constrain)
- Erklärung: Kappt Ausreißer ab. Er sorgt dafür, dass ein Wert niemals kleiner als das Minimum und niemals größer als das Maximum werden kann, um Darstellungsfehler auf dem HMI zu verhindern.
- Block: Minimum / Maximum
- Erklärung: Vergleicht zwei Zahlen und filtert wahlweise nur die kleinste oder die größte Zahl heraus.
- Block: Runde / Absolutwert
- Erklärung: Schneidet unschöne Nachkommastellen für die Textanzeige ab oder entfernt ein negatives Vorzeichen (Minuszeichen).
- Block: Potenz
- Erklärung: Berechnet eine Zahl hoch eine andere (Basis hoch Exponent).
💾 Kategorie: Variablen & Daten
Hier verwaltest du den Zwischenspeicher deines PCs, um Daten im Programmflusss zu halten.
- Block: Setze Variable auf
- Erklärung: Erstellt eine Variable im Hintergrund automatisch als Kommazahl (float) im globalen Bereich und füllt sie mit einem Wert.
- Block: Variable [Name]
- Erklärung: Liest den aktuell gespeicherten Wert der Variable aus, um ihn an Tachos, Texte oder Berechnungen zu übergeben.
- Block: Hole Zahl aus Liste an Position
- Erklärung: Dein Spezial-Werkzeug für die Schnittstelle: Nimmt ein bestimmtes Textstück aus dem Zerstückeler-Block der seriellen Schnittstelle und wandelt es im Hintergrund absolut sicher in eine echte Zahl (float) um, damit Processing fehlerfrei damit arbeiten kann.
- Block: Text-Wert
- Erklärung: Ein reiner Textbaustein, der vom Generator automatisch in die für Java notwendigen Anführungszeichen "" gesetzt wird.
