01 Data Stories und Fakten zur Luftqualität
Zum Start dieses neuen Projektes wurden wir gebeten, nach existierenden Data Stories Ausschau zu halten. Nach etwas Recherche bin ich auf den „Spotify-Jahresrückblick“ gestoßen, den ich persönlich besonders spannend finde:
Spotifiy bezieht sich auf eigentlich abstrakte, rohe Zahlen – beispielsweise das meist gehörte Lied oder die zugehörige die Anzahl der gehörten Minuten – und bringt diese dem Nutzer mit Hilfe eines Rückblickes nahe.
Der Streamingdienst-Anbieter schafft es die Werte in zusammenhängender Weise zu erläutern und erzeugt so eine emotionale Bindung zum Kunden. Jedes Jahr freut man sich wieder erneut auf diesen Rückblick!
Der zweite Teil der Aufgabe bestand darin, über die Zusammensetzung der Luft zu recherchieren und erste Faktoren aufzuspüren, die die Luftqualität beeinträchtigen können.
Die Recherche hat mir die Zusammensetzung – nämlich Stickstoff 78%, Sauerstoff 21% und Edelgase 1% – erneut ins Gedächtnis gerufen, was eine Grundlage für den weiteren Verlauf diese Projektes schafft.
Auch sind mir erneut die Folgen schlechter Luftqualität bewusst geworden, wobei ich unter anderem das Reizen der Schleimhäute erwähnenswert finde, was durch Schadstoffe wie Stickstoffooxide (NOx) verursacht wird.
Quelle: https://www.lubw.baden-wuerttemberg.de/luft
02 Erste Ideen
Nun galt ersten Idee für das Projekt in diesem Modul zu entwerfen. Da dies eines der drei ersten „großen“ Designprojekte im Studium Kommunikationsdesign darstellt, fiel mir die Auswahl hierbei nicht so leicht.
Idee 1: Pflanzenscanner
Die erste Idee bestand in der Entwicklung eines „Pflanzen-Scanners für Feuchtigkeit und Klima“. Grund für diese Idee war ein längeres Gespräch mit einer Person, mit großer Hingabe zur Pflanzenwelt: Ich hatte Leon am Wochenende davor auf einem Workshop kennengelernt und er hat mir von seinem neuen Hobby – nämlich dem Bewirten von exotischen Pflanzen – erzählt. Ihm zufolge ist das Hobby allerdings etwas ausgeartet und er hat den Überblick über all seine Pflanzen verloren.
Hier knüpft „Plantly“ an, da es ein Sensorbasiertes Gerät sein könnte, das Temparatur und Luftfeuchtigkeit in der Umgebund an einer Pflanze misst und die Daten dann weiterleitet – an Leon zum Beispiel.
Umsetzen könnte man das eventuell mit einem DHT22-Sensor.
Ich habe diese Idee jedoch verworfen, da mir spontan eine weitere eingefallen ist, die sich auch mit der Idee einer meiner Komillitoninnen (Magdalena) zusammenführen ließ.
Idee 2: Wunderbaum zur CO2-Messung
Diese Idee ist durch das Feedback mit Michael im Seminar entstanden und hat ihren Fokus auf der Untersuchung der Luftqualität im Automobil.
Dies Idee hat direkten Bezug zu dem Alltag vieler Studenten und Dozenten, die täglich nach Münchberg pendeln.
Ein Objekt in Form eines Tannenbaums – inspiriert von den allseits bekannten Wunderbäumen – veranschaulicht die Luftqualität im Auto, die sonst nicht transparent und unabhängig von der Auto-Software betrachtet werden kann.
Basierend auf der sich ändernden Farbe des Baumes lassen sich Einschätzungen über die Luftqualität vornehmen, und bietet Raum für viele spannende Fragen:
- >Inwiefern ist die Luftqualität „schlechter“ bei einer langen Fahrt als bei einer Kurzen?
->Verbessert man beim Öffnen des Festers die Luftqualität oder trägt man zu einer Erhöhung des ppm-Wertes bei?
Umsetzen könnte man diese Idee vermutlich mit einem Sensirion CO2-Sensor.
03 Pitch zu „cAIRe“ (25.11.25)
Wir haben der Idee den Namen „cAIRe“ gegeben und ein erstes Pitchdeck entwickelt. Darin haben wir nochmal das Problem beschrieben, welches wir addressieren und die Lösung erläutert, die wir mit cAIRe bieten.
Weiterhin sind wir auf die Zielgruppe eingegangen, die von dieser Lösung profitieren würden. Zuletzt haben wir uns bereits ähnliche Lösungen angeschaut und untersucht, welches Alleinstellungsmerkmal cAIRe besitzt.
Feedback nach der Präsentation
Anschließend zur Präsentation hat uns Michael noch einiges an informativem Feedback gegeben.
1. Thema Helligkeit
- Das Thema rund um Helligkeit ist sehr wichtig. Wenn es die Zeit hergibt und wir gut vorankommen, können wir einen Helligkeitssensor verbauen.
- Das ist auch wichtig, um den Autofahrer nachts nicht zu blenden.
2. Thema User Journey
- Wir sollten zwar weit genug entfernt sein von dem Aussehen des Duftbaumes, damit es keine reine Kopie ist, gleichzeitig ist eine Anlehnung an die allseits bekannte Form hilfreich für die Bedienbarkeit
- Nutzer wissen für was der Baum gut ist und hängen ihn direkt an ihren Rückspiegel
3. All in One Product
- Alle technischen Komponenten werden in einem Objekt angebracht (Baum mit Arduino, Akku, PPM-Sensor, Helligkeitssensor)
- als Material transparentes PLA 3D Druck-Filament oder Plexiglas
04 ToDos
Um organisiert an das Projekt heranzugehen, haben wir spontan ToDos gesammelt, die im Zuge dieses Projektes erledigt werden müssen und haben diese dann auf einem Zeitstrahl angeordnet.
Die vorherigen Seminare haben uns gezeigt, mit welchem Mindset wir an dieses Projekt herangehen sollten: Verschiedene Umsetzungsarten ausprobieren und Prototypen früh testen!
05 Skizzen Feedback Moritz (02.12.25)
In einem ausführlichen Gespräch mit Moritz konnten wir weiterhin über die Entwicklung des Projektes sprechen und darüber welche Komponenten wir benötigen.
Einiges steht schon fest, andere Dinge sind noch unklar...
Fest steht, dass wir den Arduino (ESP 32) mit dem CO2-Sensor (SCD41) verbinden, um den ppm-Wert im Innenraum zu messen. Den Arduino werden wir mit einem Akku verbinden. Weiterhin benötigen wir LED-Stripes (WS281), da der Arduino selbst nur einen Nanopixel bietet. Wichtig: Moritz gab uns den wichtigen Input, dass der CO2-Sensor direkten Kontakt zur Luft haben muss, um keine ungenauen Daten aufzunehmen.
Unsicher sind wir uns noch über das genaue Produkt des Projektes.
- Einerseits könnten wir mithilfe des Lasercutters Plexiglas in die Form eines Duftbaums verwandeln. Hierbei wäre der oben erwähnte LED-Stripe essentiell, damit der Glasbaum von unten bestrahlt werden kann. Wahrscheinlich leuchten dann die Ränder des Plexiglases in der jeweiligen Farbe.
- Andererseits könnten wir ein 3D-Modell aus transparentem Filament anfertigen. Als Stil würde sich LowPoly anbieten. Idee von Moritz: Im hohlen Innenraum ist eine röhrenähnliche Struktur, die als „Wrapper“ für den LED-Streifen dient.
06 Experiment in Blender
In der ersten „Arbeitswoche“ habe ich mich mit der Idee des 3D-Modells beschäftigt. Auf der Website https://studio.tripo3d.ai/workspace/generate kann man 3D-Modelle generieren und sogar mit einer Textur versehen. Um mich zu orientieren, habe ich hier einen Tannenbaum erstellen lassen und diesen in Blender weiter bearbeitet. Auch habe ich eine erste „röhrenförmige Stütze“ entwickelt, die möglicherweise als Wrapper für den LED-Stripe dient.
Mir sind beim Modellieren mehrere Probleme aufgefallen.
- Wie bringen wir den LED-Stripe in die Stützstruktur und wie finden wir die Maße dafür raus?
- Wie kommen wir an das Innere des Baumes. Durch Durchschneiden, Schrauben oder Drehmechanismus?
Feedback
Michael meint, die Implementierung eines LED-Rings sei hier sinnvoll, da sich dieser gut am Boden des 3D-gedruckten Baumes anordnen lässt.
Auch Co2-Sensor und ESP32 können am Boden des Baumes platziert werden, wobei der ESP32 ebenfalls vertikal – ähnlich wie der tatsächliche Stamm eines Baums – angeordnet werden kann.
Bezüglich des von mir beschriebenen Problems – wie kommen wir an das Innere – gab und Michael einen geschickten Hinwes: Mithilfe eines Gewindes kann man einen Drehmechanismus erzeugen. Diese Variante ist deutlich eleganter als das Durchschneiden und anschließende Festschrauben und es gibt sogar schon Vorlagen dafür.
07 Experiment Arduino
Parallel zu dem Exkurs in Blender habe ich mir schonmal den ESP32 sowie den SCD41 angeschaut und damit experimentiert.
Mithilfe der Adafruit-Dokumentation konnte ich viel über den elektronischen Hintergrund lernen und verstehen, wie das System funktioniert. Auf GitHub habe ich mir dann die möglichen Funktionen der Komponenten genauer angeschaut. Durch kleine YouTube-Tutorials ist mir dann der Zusammenhang von boards, librarys und co. klarer geworden. Auch konnte ich verstehen, wie Daten zwischen zwei Komponenten ausgetauscht werden und dass es sinnvoll sein kann ein Upload Speed von 115200 baud zu verwenden.
Mit der Hilfe von KI und einigen Versuchen habe ich einen ersten funktionierenden Code entwickelt. Wichtig zu wissen war hier, dass der Nanopixel auf dem ESP32 sich auf dem PIN 0 befindet – nicht auf PIN 18 wie in der Dokumentation beschrieben.
Ich dachte anfangs tatsächlich der ESP hätte einen technischen Defekt und habe zunächst dafür gesorgt, dass die Status LED (PIN 13) durch schnelles oder langsames Blinken über den ppm-Wert informiert.
Nachdem mir das bewusst wurde, dass PIN 0 der richtige war verändert das LED seine Farbe basierend auf dem ppm-Wert, den der Sensor misst.
Feedback
Michael hat uns noch Feedback gegeben und mir geraten, den Code noch einmal neu und selbst zu schreiben. Dafür hat er mir einen ebenfalls funktionierenden, aber deutlich verständlicheren Code geschickt.
08 Experiment Plexiglas
In Illustrator habe ich einen einfachen Tannenbaum erstellt. Die roten filigranen Linien vermitteln dem Lasercutter, welche Stellen des Plexiglases er schneiden soll. Die schwarz gefärbte Schrift informiert den Laser, dass er hier eine Schraffur erzeugen soll.
Schon nach wenigen Minuten des Laserns konnten wir den Glasbaum in Händen halten, haben ihn abgespült und über den Nanopixel des Arduino gehalten.
Der von uns gewünschte Effekt – nämlich, dass Kanten und Schraffur des eigentlich weißen Plexiglases ihre Farbe ändern – konnte bereits mit einem Nanopixel erzielt werden.
Das unten beigefügte Foto zeigt die Stadien (extrem, hoch und niedrig).
09 Aktueller Projektstand
In einem Zoom-Meeting präsentierten wir dem gesamten Semester unseren aktuellen Projektstand. Darin zeigten wir unsere Experimente in Blender, Arduino und Illustrator. Zudem zeigten wir Fotos von Tannenbaum aus durchsichtigem Filament und dem aus Plexiglas. Wir erklärten, dass wir beide Ansätze für sinnvoll erachten, uns nun jedoch für einen entscheiden müssten. Für die Variante aus Plexiglas benötigten wir einen LED-Streifen (WS 2812B), und für die Variante aus Filament benötigten wir einen LED-Ring. Beide müssten entsprechend an den feather V2 gelötet werden.
Auch haben wir eine mögliche Animation für den LED-Ring in FIGMA erstellt. Man sieht hier den Wechsel von rot zurück zu gelb.
Feedback
Moritz und Michael empfahlen uns die Variante aus dem durchsichtigen Filament. Michael verdeutlichte uns, dass es bei dem Wechsel von „gelb“ auf „rot“ eine auffällige, aber nicht störende Animation braucht. So kann der Autofahrer eine negative Veränderung des ppm-Wertes direkt erfahren. Auch motivierte er uns dazu, rechtzeitig mit dem Testen der Werte während der Autofahrt anzufangen.
10 Wer macht was? | Weiterarbeit über Neujahr
Vorab sei gesagt, dass Magda und ich uns in allen Programmen, die wir für dieses Projekt benutzen, gemischt aufteilen, da die einzelnen Komponenten dieses Projekts (3D-Modell, Code, Technik) nicht vollends getrennt voneinander bearbeitet werden können. Da wir uns über die Ferien jedoch nicht sehen, haben wir die Arbeit zunächst wiefolgt aufgeilt:
Magda wird sich überwiedend mit dem 3D-Modell in Blender, der Integration eines Drehmechanismus und den Maßen sowie Abständen der Teile beschäftigen.
Ich kümmere mich um das Löten des LED-Rings an den feather V2, vereinfache den Code und beginne, die von uns überlegten LED-Animationen umzusetzen.
Wir werden uns regelmäßig besprechen und unsere Notizen weiterhin in einem gemeinsamen FIGMA-File sammeln, in dem wir gemeinsam an den Ideen für die spätere Animation arbeiten.
11 Ein unkomplizierter Code
Ich habe den zuvor sehr unverständlichen und „ChatGPT-lastigen“ nochmal neu geschrieben. Wichtig ist hier, den NEO_PIN 0 anzusprechen, da dies der ist, der sich auf dem feather befindet. Beim Upload habe ich die BAUD-rate auf 115200, um Probleme bei der Datenkommunikation zu vermeiden. Der Nanopixel auf dem Arduino ändert nun seine Farbe in den Stufen
Grün ( co 2 < 800)
Gelb (co2 < 1200)
Rot (co2 < 2000)
Magenta ( > 2000)
#include #include #include // 1. HARDWARE-STECKER#define NEO_PIN 0 // Nanopixel#define ALARM_PIN 13 // WarnledAdafruit_NeoPixel pixel(1, NEO_PIN, NEO_GRB + NEO_KHZ800);SensirionI2cScd4x scd4x;void setup() { Serial.begin(115200); pixel.begin(); pinMode(ALARM_PIN, OUTPUT); Wire.begin(); scd4x.begin(Wire, 0x62); scd4x.stopPeriodicMeasurement(); delay(100); scd4x.startPeriodicMeasurement(); Serial.println("Jetzt klappt es! Sensor ist bereit.");}void loop() { uint16_t co2; float temperature, humidity; delay(5000); // Messen uint16_t error = scd4x.readMeasurement(co2, temperature, humidity); if (error == 0 && co2 != 0) { Serial.print("CO2: "); Serial.println(co2); digitalWrite(ALARM_PIN, LOW); // Farben setzen if (co2 < 800) pixel.setPixelColor(0, pixel.Color(0, 255, 0)); // Grün else if (co2 < 1200) pixel.setPixelColor(0, pixel.Color(255, 255, 0)); // Gelb else if (co2 < 2000) pixel.setPixelColor(0, pixel.Color(255, 0, 0)); // Rot else { pixel.setPixelColor(0, pixel.Color(255, 0, 255)); // Magenta digitalWrite(ALARM_PIN, HIGH); } pixel.show(); }}
12 Verlötung des Rings
Dank Moritz Hilfe ließen sich LED-Ring und ESP über die Connector Cable verbinden. Die Verlötung sah dabei wiefolgt aus:
5V (RING) mit dem USB (ESP)
GND (RING) mit GND (ESP)
DI (RING) mit PIN15 (ESP)
13 Storyboard V1
13 Code für den LED-Ring
In einem Gespräch mit Moritz konnte ich noch letzte Veränderungen am Code machen, bevor die Technik unseres Projekts ihren Weg ins Innere des 3D-Baums finden wird. Heute stand nämlich eine erste Testfahrt an.
Jetzt zum Code: Startet man cAIRe, so gibt es zunächst eine „Intro-Animation“. Zwei ineinander verschachtelte For-Schleifen tragen dazu bei, dass der Ring sich wie bei einem Ladebalken „ausfüllt“.
Nun gibt es 4 Modes, dementsprechend auch 4 verschiedene Presets an Farben. Zeilen wie „int r = r1 + (r2 - r1) * f“ ermöglichen es, dass in einem Mode zwei verschiedene Farbtöne angezeigt werden können.
Bei den Modes 1-3 habe ich durch Ausprobieren Farbwerte aus dem rgbw-Spektrum gefunden, die ich als passend empfand.
Für Mode 4 habe ich eine besondere Animation implementiert.
Mit der Intention, dem Autofahrer subtil, aber nicht aufdringlich, zu vermitteln, dass der CO2-Wert im Fahrzeug sich erhöht, ist eine „Kreisel-Animation“ entstanden.
14 Testfahrt im Auto
Den Baum haben wir mitsamt Arduino an Magdalenas Rückspiegel befestigt. Um alle Farben einmal zu sehen, habe ich die CO2-Werte für die jeweiligen Modes im Code noch verändert, sodass der Baum oft seine Farbe wechselt.
15 Überarbeitung des Storyboards
Da der Videodreh bald ansteht, habe ich ein neues Storyboard entwickelt. Zu Beginn wird der Baum einmal vorgestellt und der Zuschauer wird über dessen Beschaffenheit aufgeklärt.
16 Zusätzlicher Code für den Videodreh
Um sicherzugehen, dass im Video alle Farben des Baumes zu sehen sind, habe ich einen zusätzlichen Code vorbereitet, bei dem die Farbe des Baumes mithilfe der Tastatur verändert werden kann.
Auch habe ich die Übergänge zwischen den Stufen überarbeitet.
