Das Familienportrait

Wann kriegt man die ganze Familie schon mal zusammen um ein gemeinsames Bild zu machen...

Einerseits ergibt sich so selten die Gelegenheit, andererseits sind wir jeden Tag „anders“: glücklich, traurig, stolz auf den selbstgestrickten Schal, mit neuem Haarschnitt, müde nach einer zu kurzen Nacht oder albern in Grimassen-Laune. Das Familienportrait zeigt Ihnen ein ständig aktuelles, sich stets veränderndes Bild Ihrer Familie.

Eines von insgesamt fünf Konzepten aus dem Projekt "Nähe auf Distanz": https://naeheaufdistanz.com/

Konzipiert und umgesetzt vom Projektteam "Nähe auf Distanz" der Hochschule Mannheim und der Folkwang Universität der Künste Essen

Die vorliegende Version ist für genau fünf Personen ausgelegt. Du kannst das Familienportrait aber auch mit mehr oder weniger Personen nutzen: Wie wäre es statt Personen auf Knöpfe zu legen, Gesten oder Konstellationen zu verwenden? Alternativ kannst du als fortgeschrittener Maker auch den Code und die Hardware erweitern.

English Version Information: This instructable for the family portrait currently is only available in German. Sadly, due to time problems, we wont be able to translate this instructable by hand. Please try google translate, which gives you a fairly good translation: translate.google.com.

1. Stelle dich vor den Kamerakasten. Um ein Bild aufzunehmen, drückst du deinen persönlichen Auslöser neben deinem Namen.

2. Die Lichter unter der Kamera leuchten auf und zählen den Countdown bis zur Aufnahme hoch. Nicht sofort wegspringen! Warte noch einen Moment, nachdem das letzte Licht erloschen ist.

3. Das Foto erscheint im Anschluss auf deinem und allen anderen Familienportraits.

4. Durch Drücken des grünen Knopfes kannst du die Bilder deines Familienportraits neu anordnen. Die Anordnung der Fotos ändert sich aber nur bei dir - du machst bei den Anderen also nichts durcheinander.

5. Wenn du möchtest, kannst du abends den Bildschirm ausschalten, falls dich das Licht in der Nacht stört. Am Morgen solltest du den Bildschirm jedoch wieder einschalten. Vielleicht gibt es ja schon wieder ein neues Bild.

Für die Umsetzung des Familienportraits benötigst du einiges an Materialien. Eine Übersicht darüber erhälst du auf dieser Seite. Die hier vorgestellten Bauteile und Shops sind nur eine Empfehlung und können von erfahrenen Benutzern ausgetauscht werden.

Hardware:

1x Raspberry Pi 2 Modell B (oder neuer)

1x 16GB microSD-Speicherkarte

1x microUSB-Stromkabel

1x LAN Patch-Kabel

1x Breadboard

8x Buttons

1x Schieberegister TPIC6B595

5x LEDs (hier rot)

5x 150Ohm Widerstand (für die roten LEDs)

1x Microsoft Lifecam Studio

1x FullHD 21" Monitor

1x HDMI-Kabel

Aus dem Labor:

Kabellitze in rot, blau und schwarz

1x kurze Steckbrücken für Breadboards

1x Kabel male

1x Isolierband

Außerdem:

Kartonage (für Gehäuse, Passepartout und Rahmen)

Abisolierzange

Drucker

Lineal

Cuttermesser

Stift

doppelseitiges Klebeband

Für die Software:

Computer mit microSD-Kartenleser

Für diesen Schritt brauchst du: nichts - Grundlagenkapitel

Das Raspberry Pi ist ein Einplatinencomputer mit besonders kleiner Baugröße und vielen programmierbaren Ein- und Ausgängen. Neben den USB-Anschlüssen für verschiedene Geräte, dem HDMI-Ausgang für Monitore und der LAN-Buchse, ist vor allem die GPIO-Pin-Leiste als Ein- und Ausgabeschnittstelle von Bedeutung. Über diese frei programmierbaren Pins können verschiedene digitale und analoge Ein- und Ausgabemedien angeschlossen werden, unter anderem: Buttons, LEDs und Sensoren.

Das Raspberry Pi kann unter anderem mit verschiedenen Linux-Distributionen betrieben werden. Hierdurch kann die Programmierung in allen unter Linux verfügbaren Programmiersprachen erfolgen. Zusätzlich können die verschiedenen Dienste von Linux genutzt werden, um beispielsweise Programme automatisch auszuführen und zu verwalten. Auch können Programme wie der Browser genutzt werden, welcher über den bereits integrierten Netzwerkstack mit dem Internet kommunizieren kann.

Diese Bandbreite an Funktionalitäten grenzt das Raspberry Pi gegenüber anderen Microcontrollern (bspw. Arduino) ab und macht es zu einer idealen Plattform für das vorliegende Projekt des Familienportraits. Es sollte jedoch mindestens das Raspberry Pi 2 oder 3, Modell B sein. Diese liefern im Vergleich zu der ersten Version deutlich mehr Rechenleistung, was bei der Verarbeitung von Bildern in diesem Projekt sehr wichtig ist.

Für diesen Schritt brauchst du: 1x Raspberry Pi 2, 1x Breadboard, Kabel in rot und schwarz, Steckbrücken für Breadboard

Für den Zusammenbau der elektonischen Bauteile empfiehlt sich ein Steckbrett (Breadboard). Auf diese Weise können die einzelnen Bauteile schnell und ohne Werkzeuge zusammengesteckt, getestet und auch wieder auseinandergebaut werden. Wie ein Steckbrett funktioniert, wird hier erklärt: http://deskfactory.de/funktion-breadboard.Wichtig dabei ist zu verstehen, wie die einzelnen Pins des Steckbretts miteinander verbunden sind.

Nachdem die Funktionsweise des Steckbretts geklärt ist, müssen noch die einzelnen GPIO-Pins des Raspberry Pi betrachtet werden. Dabei hilft die folgende Seite: http://de.pinout.xyz/ (um die Darstellung auf dieser Seite benutzen zu können, solltest du das Raspberry Pi so hinlegen, dass die USB-Buchsen zu dir zeigen). Im Rahmen dieses Tutorials werden immer die Pin-Nummer (schwarze Zahl direkt neben dem Pin) und die Funktion (größerer Text mit etwas Abstand zum Pin) angegeben.

Zunächst musst du den 5V-Pin und den Masse-Pin (GND) des Raspberry Pi mit dem Steckbrett verbinden. Verbinde dazu den Pin 2 (5v Stromversorgung) mit der roten Außenleiste des Breadboards und den Pin 6 (Masse, Ground) mit der blauen Außenleiste des Breadboards. Außerdem müssen die beiden Seiten der Außenleisten farblich korrekt miteinander verbunden werden.

Für diesen Schritt brauchst du: Abisolierzange, Kabellitzen, Kabel (male-male), Isolierband, Buttons und LEDs zum Testen

Im Rahmen dieses Projekts baust du eine Box, welche über verschiedene Buttons und LEDs zur Ein- und Ausgabe verfügt. Deshalb ist es notwendig, dass die Komponenten nicht nur auf einem Steckbrett angebracht sind, sondern auch in der Box befestigt werden. Hierzu müssen die Buttons und LEDs so bedrahtet werden, dass du sie frei einbauen, aber dennoch auf dem verwendeten Steckbrett anschließen kannst.

Dafür kannst du folgendes Vorgehen nutzen:

1. Schneide von den Kabellitzen zwei gleichlange Stücke ab, die für die Länge zwischen dem Steckbrett und dem Befestigungsort ausreichen. Seid dabei großzügig, da ein Teil dieser Länge durch den Zusammenbau wieder verloren geht. Verwende unterschiedliche Kabelfarben um den Einsatz zu kodieren: schwarz für Masse (Ground), rot für die Spannungsquelle (Vcc) und blau für das Signal (zB ein GPIO-Pin).
2. Isoliere die Enden der Kabellitzen ab.
3. Schneide dir ein ca. 5 cm lange Kabel mit male-Steckern zurecht und isoliert auch diese ab.
4. Verbinde nun ein Ende der abisolierten Kabellitze mit dem abisolierten Ende des Kabels mit dem male-Stecker. Dazu kannst du die Enden miteinander verdrehen oder verlöten. Isoliere die Stelle mit dem Isolierband gut ab.
5. Verbinde anschließend die andere Seite der Kabellitze mit dem Button oder der LED. Bei einigen Komponenten gibt es dazu eine Schlaufe, durch welche du die Kabellitze durchziehen kannst. Bei anderen Komponenten (bswp. LEDs) musst du eine solche Schlaufe erst zurechtbiegen. Sobald du die Kabellitze mit der Komponente verbunden habt, musst ihr diese Verbindung ebenfalls isolieren.

Auf diese Weise kannst du die Komponenten an der Box befestigen und sie trotzdem ganz einfach auf dem Steckbrett ein- und ausstecken. Diese Technik kannst du bei allen folgenden Schritten benutzen.

Für diesen Schritt brauchst du: nichts - Grundlagenkapitel

Es gibt zwei verschiedene Arten von Sensordaten: digital und analog. Digitale Daten (z.B. Buttons) haben nur zwei Zustände: an oder aus. Analoge Daten (z.B. Helligkeitssensoren) haben, je nach Auflösung, beliebig viele Zwischenstufen. Zunächst sollen nur die Auslöser für die verschiedenen Benutzer (Familienmitglieder) eingebaut werden.

Diese Buttons müssen dazu an das Raspberry Pi angeschlossen werden, was über die GPIO-Leiste möglich ist. Die darauf befindlichen Pins haben verschiedene Einsatzmöglichkeiten, welche je nach Einsatzzweck verwendet werden können. In unserem Fall wollen wir die Buttons jeweils zwischen einen Eingabe-Pin und den 5V-Pin anschließen. Ist der Button offen, liegt am Eingabe-Pin keine Spannung an und somit wird digital eine 0 eingelesen. Wird der Button gedrückt und damit der Stromkreis geschlossen, liegt am Eingabe-Pin eine Spannung an und es wird der digitale Wert 1 eingelesen.

*Zusatzwissen* Im Rahmen dieses Tutorials soll diese Detailtiefe ausreichen. Wichtig zu ist jedoch auch, dass es intern einen sogenannten Pull-Down-Widerstand gibt, welcher den Eingabe-Pin auf Ground zieht, wenn der Stromkreis nicht geschlossen ist. Mehr Informationen zu solchen Pull-Down-Widerständen und ihrem Nutzen gibt es auf der Seite des Elektronik-Kompendiums: http://www.elektronik-kompendium.de/public/schaerer/pullr.htm

Für diesen Schritt brauchst du: den bisherigen Aufbau, 8x Buttons, Kabel in rot und blau, 8x Steckverbinder male, Isolierzange, Isolierband

Jetzt musst du die Buttons am Steckbrett anschließen. Hierfür benötigst du fünf Buttons für die Auslöser, einen Button für das Neuladen der Website, einen Button zum Umverteilen der Bilder und einen Button zum Neustarten des Raspberry Pi.

Zunächst wird jeder Button mit der einen Kontaktseite an die rote 5V-Leiste angeschlossen. Als nächstes muss die jeweils andere Seite der Buttons an jeweils einen bestimmten GPIO-Pin des Raspberry Pi angeschlossen werden. In diesem Tutorial müssen die folgenden GPIO-Pins verwendet werden, da diese im Code fest hinterlegt sind:

Die Auslöser werden an die Pins

• 32 (BCM 16),
• 35 (BCM 19),
• 36 (BCM 16),
• 37 (BCM 26) und
• 38 (BCM 20) angeschlossen.

Der Button zum Neuladen der Website wird an

• Pin 29 (BCM 5) angeschlossen.

Der Button zum Umverteilen der Bilder wird an

• Pin 31 (BCM 6) angeschlossen.

Der Button zum Neustarten der Box wird an

Pin 40 (BCM 21) angeschlossen.

Für diesen Schritt brauchst du: den bisherigen Aufbau, 1x Schieberegister, Steckbrücken für Breadboard, Kabel in beliebigen Farben (nicht rot und nicht schwarz, Farben dienen der Kodierung)

Das Raspberry Pi bringt eine Menge an frei belegbaren GPIO-Pins mit. Will man jedoch viele LEDs zur Ausgabe nutzen, sind diese GPIO-Pins nicht immer ausreichend und man muss sie erweitern. Hierzu bieten sich Schieberegister an, welche über insgesamt nur drei der GPIO-Pins gesteuert werden und jeweils acht Ausgänge liefern. Die Schieberegister können außerdem verkettet werden und liefern so beinahe beliebig viele Ausgänge. Außerdem erleichtern die Schieberegister auch die Programmierung und Verkabelung insgesamt, da sie die Funktionalität bündeln.

*Zusatzwissen* Im Rahmen dieses Tutorials soll diese Detailtiefe ausreichen. Weitere Informationen zu Schieberegistern und der Funktionsweise gibt es auf dieser Seite: http://www.mikrocontroller.net/articles/AVR-Tutorial:_Schieberegister

Die Informationen zum Anschluss der Schieberegister an das Raspberry Pi können dem Datenblatt entnommen werden (https://www.sparkfun.com/datasheets/IC/TPIC6B595.pdf). Da die Bezeichner der einzelnen Pins aber ständig wechseln, wird im Rahmen dieses Tutorials nur beschrieben, wie die einzelnen Pins des Schieberegisters mit dem Raspberry Pi verbunden werden müssen.

Zunächst muss das Schieberegister mittig auf das Steckbrett aufgebracht werden. Dabei sollte der ausgeschnittene Halbkreis (siehe erstes Bild) auf der Oberseite des Schieberegisters nach links zeigen. Die Nummerierung der Pins erfolgt jetzt von unten links nach rechts und dann von oben rechts nach links.

1. Zunächst werden die Pins 2 und 8 des Schieberegisters mit der 5V-Leiste des Steckbretts verbunden.
2. Die Pins 9, 10, 11 und 19 des Schieberegisters mit der Masse-Leiste des Steckbretts verbunden.
3. Nun folgt der Anschluss an das Raspberry Pi. Dazu werden
   
   • Pin 3 des Schieberegisters an Pin 22 (BCM 25) des Raspberry Pi
   • Pin 12 des Schieberegisters an Pin 18 (BCM 24) des Raspberry Pi und
   • Pin 13 des Schieberegisters an Pin 16 (BCM 23) des Raspberry Pi angeschlossen.

Für diesen Schritt brauchst du: den bisherigen Aufbau, 5x LEDs, 5x 150 Ohm Widerstände, Kabel in rot und einer anderen Farbe (nicht rot und nicht schwarz, Farbe dient der Kodierung)

Jetzt müssen noch die LEDs an das Schieberegister angeschlossen werden. Hierzu werden die fünf genutzten LEDs ebenfalls mittig auf das Steckbrett aufgesteckt. Das lange Bein der LED (+) muss an die 5V-Leiste angeschlossen werden. Da die LEDs jedoch keine 5V benötigen und dadurch sogar beschädigt werden, muss ein Widerstand davorgeschaltet werden. Für die verwendeten roten LEDs muss jeweils ein 150 Ohm Widerstand vorgeschaltet werden.

Werden andere LEDs benutzt, muss der Widerstand entsprechend angepasst werden. Beim Berechnen hilft folgende Seite: http://www.leds.de/Widerstandsrechner/

Abschließend muss noch das kurze Bein (-) der einzelnen LEDs mit dem Schieberegister verbunden werden. Dazu werden die Pins 4-7 und 14 genutzt. Schließe die LEDs der Reihe nach an diese Pins an, wobei die LED an Pin 4 beim Countdown zuerst beleuchtet wird, die LED an Pin 14 zuletzt.

Die bisher zusammengebauten Komponenten bilden die Steuerzentrale unseres Familienportraits - Bildschirm und Kamera werden später angeschlossen. Jetzt folgt das Gehäuse für das Raspberry Pi. Dieses kannst du im Rahmen dieses Tutorials aus einer alten Pappschachtel bauen. Falls du die HD-Webcam von Microsoft verwendest, kannst du die Verpackung zum Bau eines Gehäuses verwenden - perfekt für einen ersten Prototypen!

Öffne zunächst die Verpackung und schneide die Klebestelle auf. Als nächstes positionierst du das Raspberry Pi auf der Unterseite der Box. Achte dabei darauf, dass die USB-Anschlüsse nach hinten und die HDMI- und der Stromanschluss zur Seite zeigen. Positionier das Raspberry Pi genau so, dass die seitlichen Anschlüsse an der Kante anliegen.

Markiere die Montagelöcher des Raspberry Pi und durchsteche diese mit einem dünnen Schraubenzieher. Befestige das Raspberry Pi mit den flexiblen Kabelbindern mit dem Drahtkern. Auf diese Weise kannst du das Raspberry Pi leicht wieder aus der Box lösen.

Um die HDMI- und Stromanschlüsse nutzen zu können, musst du diese noch aus der Seite der Box ausschneiden. Klappe dazu die Seitenwand zum Raspberry Pi hoch und markiere dir die Position dieser beiden Anschlüsse. Klappe dann die Seite wieder herunter und benutz das Cuttermesser, um die Markierungen auszuschneiden. Wenn du mit dem Cuttermesser unsicher bist, empfiehlt es sich, das Raspberry Pi für den Schneidevorgang auszubauen.

Befestige das Steckbrett an der Unterseite der Box. Dafür kannst du die selbstklebende Unterseite des Steckbretts nutzen.

Jetzt baust du die Buttons und die LEDs ein. Markiere dir dafür auf der Oberseite 5 Stellen für die Auslösebuttons, 2 für die Neuladen- und Umverteilen-Buttons und 5 Stellen für die LEDs. Den Neustart-Button kannst du an die Seite der Box bauen. Du kannst diese Komponenten frei positionieren, unseren Vorschlag siehst du im Bild. Durchsteche nun die Markierungen mit dem Schraubenzieher und passe diese so so an, dass die LEDs und Buttons genau passen.

Die LEDs kannst du mit etwas Isolierband von hinten befestigen. Biege dazu die Beine zur Seite, sodass du direkt drüberkleben kannst. Wenn du die gleichen Buttons wie wir verwendest, kannst du diese mit dem integrierten Gewinde an der Box festschrauben. Alternativ kannst du diese auch mit Isolierband befestigen.

Nachdem alle diese Komponenten verbaut sind, sieht deine Box in etwa so aus, wie auf den Bildern. Jetzt kannst du die Box wieder zusammenklappen und mit Isolierband oder Kabelbindern verschließen.

Für diesen Schritt brauchst du: den bisherigen Aufbau, USB-Webcam

Als nächstes musst du die Kamera an das Raspberry Pi anschließen. In diesem Tutorial verwenden wir die Microsoft HD Webcam, welche Fotos und Videos in Full-HD aufnehmen kann. Eine alternative Liste mit kompatiblen Kameras ist hier verfügbar: http://elinux.org/RPi_USB_Webcams

Neben den USB-Webcams gibt es auch das Kameramodul für das Raspberry Pi. Informationen zu der Kamera und dem Anschluss findet ihr hier: https://www.raspberrypi.org/help/camera-module-setup/

In diesem Fall kannst du die Kamera einfach per USB an das Raspberry Pi anschließend. Benutze dafür die freien USB-Anschlüsse auf der Rückseite der Box. Die Kamera kannst du dann frei positionieren.

Für diesen Schritt brauchst du: den bisherigen Aufbau, Monitor

Jetzt kannst du den Monitor an die Box anschließen. Hierzu eignet sich jeder Monitor, welcher über einen HDMI-Eingang verfügt. Im Rahmen dieses Tutorials solltest du jedoch einen Monitor mit einer Auflösung von 1920x1080 Pixeln verwenden, da der hier vorgestellte Code für diese Auflösung ausgelegt ist.

Als Diagonale eignen sich beispielsweise 21 Zoll, da du in diesem Fall die Vorlage für das Passepartout und den Rahmen unverändert nutzen kannst. Falls du aber kein Problem damit hast, diese beiden Vorlagen zu skalieren, kannst du auch andere Diagonalen verwenden.

Schließe den Monitor per HDMI-Kabel an den HDMI-Ausgang der Box an. Dieser befindet sich hier der Öffnung, die du in die Box geschnitten hast. Verbinde dann den Monitor mit dem Stromnetz.

Für diesen Schritt brauchst du: Monitor, Karton oder dickes Papier, dünnes Papier zum drucken, Drucker, Lineal, Cuttermesser, Bleistift, doppelseitiges Klebeband

Für das Passepartouts benötigst du weißes, dickes Papier oder weißen Karton in der Größe der Anzeigefläche des Monitors. Lade dir das Bild für diesen Schritt als Vorlage für das Passepartout herunter und drucke sie passend für deine Monitorgröße aus. Hierzu empfiehlt sich ein DIN-A3-Drucker. Du kannst aber auch einen DIN-A4-Drucker benutzen und die Vorlage auf mehrere Seiten drucken. Lege dann die Seiten passend aneinander und übertrage die Umrisse der einzelnen Fenster auf den Karton/das Papier. Hierbei ist es nicht schlimm, dass du auf die Unterlage malst, da du diese Striche wegschneiden wirst.

Schneide die einzelnen Fenster auf. Bei einem Passepartout schneidet man dabei schräg in das Papier ein, wodurch die einzelnen Bilder in den Fenstern "versinken": Eine Überischt zum Passepartout. Nimm dir dazu das Lineal und das Cuttermesser und setze etwa 2-3 mm neben einer gezeichnet Linie an. Achte dabei darauf, dass du außerhalb des Fensters ansetzt. Schneide nun etwas oberhalb des Fensters am Lineal entlang bis zum unteren Ende des Fensters. Halte dabei das Cuttermesser schräg in das Papier hinein, um auf diese Weise den Effekt eines Passepartouts zu erschaffen. Schneide so alle Fenster aus.

Es folgt der Rahmen, welchen du vor das Passepartout auf den Bildschirm klebst. Diesen Rahmen kannst du ebenfalls aus dickem Papier oder Karton herstellen. Der Rahmen sollte dabei an jeder Seite etwa 1 cm nach innen in den Monitor ragen. Auf diese Weise hält der Rahmen das Passepartouts am Monitor fest. Die Form und Farbe des Rahmens kannst du frei bestimmen.

Lege das Passepartout auf den Bilderrahmen und achte darauf, dass es richtig ausgerichtet ist (großes Bildfenster befindet sich auf der rechten Seite). Befestige einige Streifen des doppelseitigen Klebebands am Rahmen des Monitors - am besten jeweils einen Streifen in jeder Ecke und nochmals jeweils einen in der Mitte der einzelnen Seiten. Lege den Rahmen mittig auf den Monitor und klebe diesen an den Klebestreifen auf.

Für diesen Schritt brauchst du: den bisherigen Aufbau, Netzwerkkabel, Stromkabel

Der Aufbau des Familienportraits ist fast vollständig. Es fehlt nur noch die Speicherkarte mit der Software, das Netzwerkkabel und das Stromkabel.

Verbinde das Raspberry Pi mit dem Netzwerkkabel mit dem Netzwerk. Stecke dazu die eine Seite des Netzwerkkabels in die Rückseite des Raspberry Pi und die andere Seite des Kabels kommt in euren Router.

Stecke das kleine Ende des Stromkabels durch das vorher ausgeschnittene Loch des Gehäuses in das Raspberry Pi. Verbinde das Raspberry Pi aber noch nicht mit dem Stromnetz. Bevor du das machen kannst, musst du dich um die Software kümmern. Dies wird in den folgenden Schritten beschrieben.

Für diesen Schritt brauchst du: einen internetfähigen PC mit einem installierten Browser wie den Internet Explorer, Mozilla Firefox oder Google Chrome.

Wir verwenden einen externen Dienst namens “PubNub” für die Kommunikation zwischen unseren Geräten. PubNub ist kostenlos und ermöglicht in Echtzeit Daten zwischen den Geräten auszutauschen.

PubNub Account erstellen

Obwohl PubNub kostenlos ist, wird ein Account benötigt. Öffne deinen Browser und gib “http:///www.pubnub.com” in die Adresszeile ein. Klicke auf “Get Started Now”, um einen Account zu erstellen. Nachdem du die notwendigen Daten eingegeben und dich eingeloggt hast, wirst du auf eine Seite mit allen Informationen weitergeleitet, welche du für die Inbetriebnahme des Familienportraits benötigst.

PubNub App-Daten

Die benötigten Daten sind folgende:

• Publish Key
• Subscribe Key
• Secret Key

Notiere die Daten auf einem Blatt Papier oder in einer Textdatei. Diese werden später wichtig, wenn wir das Raspberry Pi und den Webserver einrichten. Wichtig ist, dass du den Secret Key niemandem zugänglich machst.

Sollte das trotzdem geschehen, ist das kein Beinbruch: du kannst dir einen neuen Schlüssel generieren lassen. Das hat aber zur Folge, dass du diesen in allen verwendeten Geräten auch wieder ändern musst.

Für diesen Schritt brauchst du: wie zuvor einen internetfähigen PC und einen Browser, sowie eine gültige E-Mail Adresse.

Die von unserer Webcam gemachten Bilder sollen natürlich später auch angezeigt werden. Beim Familienportrait wird das in Form einer Webseite gemacht, die die gemachten Bilder speichert und danach sofort anzeigt. Hierfür wird ein Webserver gebraucht, der mit der Programmiersprache PHP5 umgehen kann.
Diese Webseite muss natürlich auf einem Server liegen, der über das Internet erreichbar ist. Hier haben wir zwei Möglichkeiten: Entweder über einen eigenen Server, oder über einen externen Dienstleister, der uns diese Funktionalität anbietet. In dieser Anleitung konzentrieren wir uns darauf einen kostenlosen Dienst (Hostinger) im Internet zu verwenden.

Klicke auf diesen Link, um auf die Webseite von Hostinger weitergeleitet zu werden.

Konto erstellen

Obwohl Hostinger das hosten von Webseiten kostenlos anbietet, benötigen wir einen Account. Klicke auf den Button "Jetzt bestellen" und du wirst zu einer Eingabemaske weitergeleitet, welche dich nach deinem Namen, deiner E-Mail Adresse und einem Passwort frägt. Sobald du dies erfolgreich getan hast, wirst du auf eine Seite weitergeleitet, um dein Hosting-Paket auszuwählen. Bevor du allerdings dein Paket auswählen kannst, musst du deine E-Mail Adresse bestätigen. Öffne hierfür dein E-Mail Konto. Du solltest von Hostinger eine E-Mail mit dem Betreff "Bestätigung der Registrierung" erhalten haben. Diese E-Mail erhält einen Link, mit dem du deine Anmeldung bestätigen kannst. Klicke auf diesen Link und du wirst auf die Seite weitergeleitet, um dein Hosting-Paket auszuwählen.

Hosting-Paket auswählen

Nachdem du die Anmeldung erfolgreich durchgeführt hast, du ein Hosting Paket auswählen. Klicke auf den blauen Button mit der Beschriftung "neues Hosting" und wähle das kostenlose Hosting-Paket aus. Im nächsten Schritt wirst du nach dem Domain Typen, einer Subdomain und einem Passwort für die Seite gefragt. In diesem Beispiel habe ich die Subdomain "portraitinstructable.esy.es" gewählt. Das ist die Adresse, die wir durch unseren Browser ansteuern können. Als letztes musst du die Seite durch ein Passwort schützen. Klicke danach auf "Weiter". Auf der letzten Seite des Bestellvorgangs siehst du eine kurze Übersicht über das, was du bis jetzt gewählt hast und wirst gebeten eine kurze Beschreibung für die bestellte Seite zu erstellen. Dieser Schritt ist Pflicht, vergiss also nicht eine passende Beschreibung einzutragen. Klicke danach auf den "Bestellen"-Button. Du wirst zu einer Übersicht deiner erstellten Webseiten weitergeleitet. Nach kurzer Zeit solltest du unter "Liste der Hosting Konten" deine Webseite aufgelistet sehen. Wenn du auf das kleine "+"-Icon daneben klickst, werden mehrere Optionen aufgelistet, wie du weiter verfahren kannst.

Um zu überprüfen, ob das Einrichten geklappt hast, kannst du die gewählte Subdomain direkt über deinen Browser aufrufen (im Falle dieses Beispiels ist das http://portraitinstructable.esy.es/)

Wie die passende Webseite für dein Familienportrait auf diese Webseite hochgeladen wird, erfährst du im nächsten Schritt.

Klicke in der Liste deiner Hosting-Konten in den Optionen deiner eingerichteten Webseite auf "Verwalten" und dann auf den Button "Webseite importieren". Du wirst auf eine neue Seite geleitet, welche eine Datei für die Webseite benötigt. Die nötige Datei heißt portrait-webseite.zip, diese findest du am Ende von diesem Step. Lade sie herunter und ziehe die zip-Datei per Drag & Drop in das graue Feld in der Mitte der Webseite. Nach kurzer Zeit solltest du eine positive Meldung erhalten haben, dass die Webseite erfolgreich importiert wurde. Wenn du wieder deine Webseite mit dem Zusatz "/portrait-webseite" im Browser aufrufst (in diesem Beispiel also http://portraitinstructable.esy.es/portrait-webseite), solltest du eine Testseite sehen, welche weiße Kästen mit den Zahlen Eins bis Fünf zeigt.

Wir sind jedoch noch nicht ganz fertig...

PubNub-Schlüssel eintragen

Damit diese Webseite auch später mit unserem Raspberry Pi kommuniziert, müssen wir zwei Dateien der Webseite verändern und dort unsere Schlüssel von PubNub eintragen. Gehe zurück auf das Dashboard (Hosting -> Verwalten - dort wo du auf "Webseite importieren" geklickt hast) und scrolle zum Button "Dateiverwaltung 2". Klicke drauf und du wirst auf eine Seite weitergeleitet, welche die Ordnerstruktur deiner Webseite anzeigt. Klicke auf den Order "public_html" und danach auf den Ordner "portrait-webseite". Du solltest eine Auflistung von mehreren Dateien und Ordnern sehen. Uns interessieren hier die Dateien "index.php" und upload.php". In diesen beiden Dateien müssen wir unsere Schlüssel von PubNub eintragen.

Du kannst beide Dateien direkt in dieser Dateiverwaltung editieren. Klicke hierfür auf einfach auf "edit", was sich rechts neben der jeweiligen Datei befindet.

Zunächst editieren wir die Datei "index.php". Ein Fenster mit einem großen Textfeld sollte sich öffnen. Scrolle herunter bis du die folgende Zeilen findest:

var pubnub = PUBNUB({<br>		subscribe_key: 'HIER SUBSCRIBE KEY EINTRAGEN'
	});

Ersetze den Text "HIER SUBSCRIBE KEY EINTRAGEN" durch den von dir notierten Subscribe-Key von PubNub. Wichtig hierbei ist, dass du die Anführungszeichen nicht ersetzt. Tust du dies, wird es nicht funktionieren. Speichere deine Veränderungen, indem du auf das "Speichern"-Symbol am oberen Ende der angezeigten Seite klickst und danach auf den blauen Pfeil, um wieder in die Dateiverwaltung zu gelangen.

Das Gleiche machst du auch mit der "upload.php"-Datei. Hier musst du zwei Stellen editieren. Am unteren Ende der Datei befindet sich folgende Zeile:

$pubnub = new Pubnub('HIER PUBLISH KEY EINTRAGEN', 'HIER SUBSCRIBE KEY EINTRAGEN');

Wie eben ersetzt du die beiden Texte jeweils durch den Publish- und Subscribe-Key von PubNub. Achte auch hier darauf, dass die Anführungszeichen erhalten bleiben. Speichern nicht vergessen!

Die Webseite ist fertig eingerichtet. Wir müssen in den folgenden Schritten noch das Raspberry Pi konfigurieren, sodass es die von der Webcam aufgenommenen Bilder auf die Webseite hochlädt und anzeigt.

Für diesen Schritt brauchst du: das Raspberry Pi, eine SD-Karte mit mindestens 16GB Speicher, einen SD-Kartenleser, Maus, Tastatur, einen HDMI-Monitor und ein HDMI-Kabel.

Das in diesem Schritt verlinkte Video erklärt dir, wie du unter Windows deine SD-Karte mit dem Betriebssystem für das Raspberry Pi bespielen kannst. Die Seite der Raspberry Pi Foundation hat sich jedoch ein wenig verändert. Die nötige Datei findest du unter https://www.raspberrypi.org/downloads/raspbian/. Lade die Datei "Raspbian Jessie" herunter und entpacke diese. Die restlichen Schritte sind identisch zu denen im Video.

Schließe deine Tastatur und Maus über USB an das Raspberry Pi an. Setz die bespielte SD-Karte in den (auf der Rückseite des Raspberry Pi's) vorhergesehenen SD-Karten-Slot. Anschließend kannst du das Raspberry an den Strom anstecken.

Dein Raspberry bootet und du siehst auf dem anschlossenen Bildschirm diesen Vorgang. Nach erfolgreichem Boot-Vorgang erscheint der Raspberry-Desktop.

Unter Menu -> Preferences -> Raspberry Pi Configuration stellst du anschließend die Tastatur-Sprache auf Deutsch um, indem du auf den Reiter Localisation klickst und unter Set Keyboard die Sprache Deutsch auswählst.

Außerdem wählst du Boot to Desktop aus. Diese Einstellung findest du unter dem Reiter System.

Zum Schluss erweiterst du das Filesystem (im Reiter System), indem du auf Expand Filesystem klickst. Jetzt muss das Raspberry nur nochmal gebootet werden, in dem du auf OK klickst.

Sobald du das Raspberry Pi eingerichtet und neu gestartet hast, sollte das Betriebssystem sofort in die Desktop-Oberfläche starten.

Um die Installation zu starten, klicke auf das Logo mit dem Bildschirm in der Icon-Leiste um ein Terminal zu starten. Es sollte sich ein Textfenster mit schwarzem Hintergrund öffnen. Nun kannst du die Installation mittels der Installations-Datei starten. (Sollte diese Datei nicht mehr verfügbar sein, schau bitte etwas weiter unten)

Installations-Datei

Dort gibst du bitte folgenden Befehl ein und bestätigst mit der Enter Taste:

wget https://www.dropbox.com/s/x9foyp9c3jkgmoz/portrait-setup.sh?dl=1

Auf dem Bildschirm sollten mehrere Zeilen Text erscheinen. Wenn in die letzte Zeile ähnlich zu dieser ausschaut hat es geklappt:

"2016-02-17 12:27:55 (29.0 MB/s) - ‘portrait-setup.sh’ saved [268/268]"

Diese Datei wird den Installationsprozess anstoßen und alle notwendige Software installieren, die du benötigst. Jetzt müssen wir noch die Installation anstoßen. Das machst du indem du den folgenden Befehl eingibst:

bash portrait-setup.sh

Dieser Vorgang dauert einige Minuten, schalte das Raspberry Pi in dieser Zeit nicht aus und schließe nicht den Terminal. Dieser Schritt ist kritisch. Es kann sein, dass du nach Speicherbelegung gefragt wirst - bestätige mit Ja (Y) und drücke Enter. Fahre danach fort mit "Anpassungen".

Installations-Datei nicht verfügbar?
Leider haben wir keine Möglichkeit, die Installations-Datei zuverlässig zu hosten und es kann dazu kommen, dass die Datei nicht mehr verfügbar ist. In diesem Fall kannst du die Installation auch mit folgenden Befehlen durchführen:

git clone https://bitbucket.org/gtRfnkN/naehe-portrait.git
cd naehe-portrait
bash shell-scripts/install.sh

Dieser Vorgang dauert einige Minuten, schalte das Raspberry Pi in dieser Zeit nicht aus und schließe nicht den Terminal. Dieser Schritt ist kritisch.

Es kann sein, dass du nach Speicherbelegung gefragt wirst - bestätige mit Ja (Y) und drücke Enter.

Anpassungen

Nachdem die Installation abgeschlossen ist, müssen wir noch eine letzte Datei editieren, um die gemachten Bilder auf unsere Webseite hochladen zu können. Dafür müssen wir die Datei "main.py" editieren und dort unsere eigene Webseite eintragen.

Das Raspberry Pi verfügt bereits über ein Programm, um schnell Dateien editieren zu können. Um den Texteditor zu starten, gib im Terminal folgenden Befehl ein:

cd naehe-portait
leafpad main.py

Der Texteditor sollte in einem eigenen Fenster starten und dir die aufgerufene Datei anzeigen. Es interessiert uns die Zeile

UPL_URL = 'http://portrait.naehe.org/upload.php'

Diese Zeile müssen wir ändern, dass sie auf deine erstellte Webseite verweist. Im Falle unseres Beispiels wäre das also

UPL_URL = 'http://portraitinstructable.esy.es/portrait-webseite/upload.php' 

Das wars! Speichere die Datei mit dem Tastenkürzel Strg + S und schließe das Fenster des Texteditors. Als nächstes müssen wir den Raspberry Pi neu starten, damit alle gemachten Änderungen übernommen werden und wir zuletzt unsere Bilder anzeigen können.

Klicke auf das Button "Menu" in der oberen linken Ecke und klicke ein weiteres Mal auf "Shutdown". Wir wollen das Raspberry Pi neu starten und nicht ausschalten, wir klicken also auf "Reboot". Das Raspberry Pi schließt alle Anwendungen und startet neu. Nach kurzer Zeit solltest du dich wieder in der Desktop-Umgebung befinden. Willst du das Familienportrait starten, öffnest du wie zuvor das Terminal und gibst folgende Zeile ein (du musst diese wieder auf deine gewählte Webseite anpassen)

chromium-browser --app=http://portraitinstructable.esy.es/portrait-webseite

Es sollte sich ein Browser Fenster öffnen, welches deine Webseite anzeigt! Willst du ein Bild machen, drücke einfach einen der fünf Buttons am Raspberry Pi und nach einem kurzen Countdown wird automatisch ein Bild gemacht, hochgeladen und auf deinem Portrait angezeigt!

Herzlichen Glückwunsch und viel Spass damit!