Incom ist die Kommunikations-Plattform der Hochschule Augsburg Gestaltung

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Augsburg Gestaltung mehr erfahren

Krendlinger_Lechner (Block III)

In Block III arbeiten wir weiterhin mit PoseNet, Handpose, Facemesh und/oder KNN-Classifier und jetzt noch dem Arduino-Kit.

In der Gruppe wird mithilfe eines Miroboard gearbeitet und sich regelmäßig zu Besprechungen digital getroffen.

Ideen-Sammlung

🔸 Eine Getränkemaschine, die dir dein gewünschtes Getränk zubereitet und serviert.

🔸Kleiner Laptop Gnom der mit dir Agiert.
Mithilfe einer Scheibe die sich drehen lässt mit Arduino, auf der Gesichter/Emotionen abgebildet sind.
Je nach dem was grade passiert, reagiert der Gnom mit einer Emotion.

🔸Ein Sparmotivator der sich freut wenn du etwas Geld rein wirfst.

Erste Versuche - Sparmotivator

Kleiner Versuch eines Tresors mit Schließmechanismus. Über Mausbewegung wird der Servo-Motor bewegt und das Schloss öffnet oder schließt sich.

tresor.jpegtresor.jpeg

Moodboard

Moodboard.pngMoodboard.png

Umsetzung - SAVID

Dieses Projekt entstand in Teamarbeit und alle Aufgaben wurden recht gleichmäßig auf beide Teammitglieder aufgeteilt.

Die Erstellung des Prototyps wurde übernommen von Nathan Lechner.

Die Appgestaltung wurde übernommen von Anja Krendlinger.

Der Code wurde von beiden bearbeitet mithilfe von GitLab.

Es wurde sich für die Umsetzung des Sparmotivators entschieden.
Hier wurde sich auf den Namen SAVID geeinigt.
Dieser Motivator soll einen dazu bringen mehr Geld zu sparen in dem er Freude zeigt wenn man etwas in ihn hinein wirft. Dazu führen soll natürlich auch das niedliche Aussehen und die persönlichere Reaktion des Tresors auf die eigenen Taten.

Verschiedene Ideen der Umsetzung sind entstanden. Hier wurde sich zuerst mithilfe von Skizzen überlegt wie man am besten einen Tresor sympatisch macht und Emotionen darstellen kann, da es ja zum sparen anregen soll.

Zum Beispiel mit einem beweglichen „Arm“ oben drauf, in dessen Spitze sich eine Kamera befindet. Hier können verschiedene Emotionen durch bewegung dargestellt werden und gleichzeitig der Arm als Sicherheitsfaktor benutzt werden.

Aber auch die niedliche Darstellung an Wall-E angelehnt, einer Katze 🐱(hier kann man den Schwanz bewegen als Emotionsdarstellung) oder einem Pokemon.

Wall-E (Kindheit).pngWall-E (Kindheit).png
Arm oben mit Kamera.pngArm oben mit Kamera.png
Als abschreckfaktor.pngAls abschreckfaktor.png
Pflanze (Pokemon).pngPflanze (Pokemon).png
Katze/Schwanz bewegung.pngKatze/Schwanz bewegung.png
Kaktus.pngKaktus.png

Das Interface soll für eine App gestaltet werden, sodass SAVID mithilfe dem Handy eingestellt werden kann. Die Farbwahl muss noch getroffen werden.

Erste Reaktionsabläufe wurden besprochen und skizziert.

2021-05-30 17_07_44-ID4 Anja & Nates Killer Projects, Online Whiteboard for Visual Collaboration.png2021-05-30 17_07_44-ID4 Anja & Nates Killer Projects, Online Whiteboard for Visual Collaboration.png
2021-05-30 17_34_27-Window.png2021-05-30 17_34_27-Window.png

Nach dem man sich auf ein Design geeinigt hatte, wurde überlegt welche Bewegungsabläufe sinn ergeben würden und umgesetzt werden müssen.

Der Kamera muss sich nach Rechts und Links bewegen können, der Torso muss sich drehen können und die Tresortüre muss verschließbar sein.
Also wurden 3 extra Motoren für den Arduino besorgt.

Zeichenfläche 1.jpgZeichenfläche 1.jpg
3teilig_SAVID.jpg.png3teilig_SAVID.jpg.png

Die Farbwahl viel auf Türkis mit schwarzen und weißen Akzenten.
Es wurden die Seiten für die Webanwendung erstellt, damit dort dann alles eingearbeitet werden kann was mit Arduino, Handpose und Teachable Machines benötigt wird.

Seite1.pngSeite1.png
Kamera.pngKamera.png

App-Gestaltung

Nach und nach wurden die Seiten der App eingefügt und an ein Handyformat angepasst.
Um die einzelnen Handposen einzufügen, wurden Seiten mit der Videokamera eingefügt. Hier ist nun auch die Handpose in den Code eingearbeitet, sodass der Nutzer einfach seine gewünschte Handpose einspielen kann und nach ca. 50 Beispielen auf die nächste Seite weiter kommt.

Nach den 3 Handposen sieht man nun auch noch mal eine Vorschau der Posen um sicher zu gehen, das der Nutzer auch damit zufrieden ist.

Auf dem Endscreen hat man auch noch die Möglichkeit sich eine kurze Anleitung anzusehen und natürlich auch ein komplett neues Passwort zu erstellen, wenn man möchte.

Die Webanwendung wäre nun, bis auf den Feinschliff, fertig.

Prototyp

Die Reaktionen des SAVID wurden programmiert und müssen nun noch in den Code eingearbeitet werden.
Es ist bereits der erste Prototyp gebastelt worden.
Der Tresor besteht aus 3 Bauteilen mit 3 Servo-Motoren die dazu dienen die Bewegungen bzw Reaktionen des SAVID umzusetzten.
Die Gestaltung ist recht simple in schwarz und weiß gehalten.

WhatsApp Image 2021-06-13 at 15.26.15.jpegWhatsApp Image 2021-06-13 at 15.26.15.jpeg
WhatsApp Image 2021-06-13 at 15.27.38.jpegWhatsApp Image 2021-06-13 at 15.27.38.jpeg
07318931-4E73-4EFC-AB1D-C73673C3D717.jpeg.jpg07318931-4E73-4EFC-AB1D-C73673C3D717.jpeg.jpg
A385CA23-C845-4F40-BAE4-E956FEE3F976.jpeg.jpgA385CA23-C845-4F40-BAE4-E956FEE3F976.jpeg.jpg
A840707C-777A-44AE-93D4-031908035F87.jpegA840707C-777A-44AE-93D4-031908035F87.jpeg

Das Handpose-Passwort wird auch vom Tresor schon erkannt. Hier wird mithilfe von kurzen Bewegungen bestätigt und mit einem drehen der Kamera angezeigt wenn er etwas nicht „verstanden“ hat.

Weiterhin wird mithilfe von Google Teachable Machines eingearbeitet das der Tresor Geld erkennt und sich darauf freuen kann.
Hier wird unterschieden zwischen Münzen und Scheinen.
Auch Angst soll noch eingebaut werden.
SAVID dreht sich weg wenn man ihm ohne Geld zu nahe kommt oder versucht ihn ohne Passwort zu öffnen.

Finale Abgabe

savid_1.jpgsavid_1.jpg
savid_4.jpgsavid_4.jpg
savid_3.jpgsavid_3.jpg
savid_2.jpgsavid_2.jpg
savid_5.jpgsavid_5.jpg

SAVID ist ein kleiner Tresor der liebend gerne Geld für andere aufbewahrt und sich deshalb auch immer sehr freut, wenn ihm jemand Geld mitbringt.

Sicherheit liegt ihm aber auch sehr am Herzen, weswegen man, um ihn zu öffnen, eine Art Handschlag brauch. Diesen Handschlag kann man in der SAVID App persönlich konfigurieren und besteht aus 3 verschiedenen Handposen die von der Kamera erkannt werden.

SAVID soll durch sein niedliches auftreten und die direkten Reaktionen mit dem Nutzer dazu anregen Geld zu sparen.

Solltest du ihn also eingerichtet haben und vor seinen Augen einen 5€ Schein halten, wird er sich tierisch freuen!
SAVID kann aber auch sehr schreckhaft sein. Kommst du ihm also ohne Geld zu nahe, dreht er sich weg und brauch eine Weile um sich wieder zu beruhigen.

Viel Spaß beim Sparen mit deinem neuen kleinen Tresor! 💸

Demo: https://www.hs-augsburg.de/homes/n8lech/id4/block3/savid/index.html

Fachgruppe

Interaktive Medien

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Zugehöriger Workspace

IA4 Interaktionsdesign / Mensch und Maschine

Entstehungszeitraum

Sommersemester 2021