Color Picker

Problemstellung

Oftmals sieht man Farben im echten Leben, die man gerne auf eigene Designs übertragen möchte. Versucht man dies, trifft man jedoch nicht immer den richtigen Farbton, zudem kann die herkömmliche Farbangleichung auch viel Zeit in Anspruch nehmen. Diesen Prozess wollten wir mit einem Colour Picker für das echte Leben erleichtern.

Funktionsprototyp 1

Durch regelmäßigen Input lernten wir zu Beginn vom Semester, wie man einen Arduino programmiert und verkabelt. Dieses Wissen haben wir uns zu Nutze gemacht und auf einem Breadboard einzelne Komponenten ausprobiert und selbst getestet. Zur Farberkennung haben wir einen RGB Farbsensor verwendet. Zudem haben wir eine RGB-LED für Farbfeedback mit eingebaut. Um den Prototypen funktionsfähig zu machen, verwendeten wir das Programm “MacroRecorder” für MacOS, welches wir durch simulierte Tastatureingaben durch Arduino auslösten. Das Enthaltene Makro öffnete in Photoshop das Auswahlfenster für die Primärfarbe und kopierte den HEX-Wert der gelesenen Farbe direkt dort hinein.

Designprototypen 1

Wir haben erste Designprototypen aus Schaumstoff gebaut. Es entstanden 3 verschiedene Varianten in verschiedenen Größen.
Zudem haben wir erste Renderings in Cinema4D erstellt.


Usability Test

Beim Usability Test hatten wir 4 Testteilnehmer die alle Vorerfahrung mit Bildbearbeitung hatten. 
Wir haben den Test in zwei Teile unterteilt, im ersten Teil testeten wir den Funktionsprototypen, im zweiten den Designprototypen.

Funktionsprototyp 2

Die Erkenntnisse die wir im Usability Test gesammelt haben, haben sich auch auf unseren Funktionsprototypen ausgewirkt.
Auf den LED Streifen haben wir verzichtet.
Zudem haben wir uns mehr Gedanken zu unserem Tastschalter gemacht. Dieser sollte wie ein Kamera Auslöser funktionieren; bei leichtem andrücken wird die Farbe anvisiert, beim durchdrücken aufgenommen. Um die Tatsächliche Funktionsweise des Prototyps herzustellen, simulierten wir diese mithilfe einer Webseite. Das Programm “P5SerialControl” kann die serielle Schnittstelle auslesen und so eine Verbindung mit unserem Arduino herstellen. Als Anzeige bauten wir mit Javascript, CSS und HTML eine Ausgabe. Die gelesene Farbe wird dort live angezeigt, wenn man den Auslöseknopf leicht drückt, und sie wird dorthin komplett übertragen, wenn man den Auslöseknopf durchdrückt. Dort erscheinen dann auch die RGB- und HSL-Werte, der HEX-Code sowie die Pantone-Farbe, falls der HEX-Code mit einem aus der Pantone-Tabelle übereinstimmt.

Designprototypen 2

Aus unseren Learnings vom Usabilitytest heraus zogen wir folgende Schlüsse: Die Benutzer:innen wünschten sich, dass man ein Feedback in Form eines Farbbildschirms bekommt. Dieser sollte einen Live-Feed aus der Sicht des Sensors zeigen. Zudem wählten sie das Oval als ihren Favoriten aus, die weitere Entwicklung lief also basierend auf dieser Grundlage ab. Wir fügten eine Spitze hinzu, in der sich der Sensor befinden soll, damit man gut zielen kann.

Aufbau

Unser gesamter Funktionsprototyp war zunächst noch auf einem Breadboard gesteckt und war sehr unübersichtlich und groß. Deswegen haben wir dann unseren gesamten Prototypen auf eine Platine gelötet und uns somit viele Kabel und viel Platz gespart. Außerdem haben wir Holzplatten zugelasert um unseren Funktionsprototyp damit zu verkleiden. Um Kurzschlüsse durch berühren der Lötverbindungen zu vermeiden haben wir unseren Verkleidung noch mit Isolierband umklebt.

Tastschalter

Die Idee beim Tastschalter war es zwei unterschiedliche Tastschalter aufeinander zu kleben. Der untere löst sehr früh aus, konnte aber nach dem auslösen noch weiter runter gedrückt werden. Der daraufliegende war ein ganz normaler Tastschalter der schwerer auszulösen ist als der untere. Dadurch wurde erst der untere ausgelöst und dann der obere, ähnlich wie der Auslöser einer Kamera.

Endergebnis

Da wir unseren Color Picker nicht in echt bauen können, haben wir als Abschluss unserer Arbeit alles in einem 3D-Rendering in Cinema4D vereint.

Ausblick

Im Idealfall würden wir unser Produkt zur vollen Reife ausbauen. Wir glauben, dass unser Ansatz sehr viel Potenzial hat und eine realistische Lösung für das Problem der Farbübertragung von der echten in die virtuelle Welt darstellt.
Wir möchten das haptische Feedback des Tastschalters perfektionieren, sodass man diesen intuitiv bedienen kann. In einer weiteren Runde von Usability Tests würden wir das Thema der Ergonomie nocheinmal fokussieren. Die Elektronik würden wir verkleinern und in das ausgearbeitete Gehäuse integrieren. Wir würden zudem die Konvertierung der gelesenen Farben in Pantone und RAL perfektionieren, sodass die gelesenen Farben geeicht, genormt und eindeutig zuzuordnen sind. Technische Probleme würden wir mithilfe von Adobe selbst angehen um eine saubere und verlässliche Übertragung direkt in Photoshop zu ermöglichen.