Raspberry Pi: Web Socket

setup.jpg

Ein neues Tutorial mit dem Pi! Diesmal geht’s um Web-Sockets, nur besser erklärt als beim älteren Post, der mit dem ESP8266 zu tun hatte.

Um was geht’s? Sehr oft findet man Software, die man über den Webbrowser bedient, wie etwa Octoprint, metis oder Eiger (um auch einen kommerziell genutzten Kandidaten zu nennen). Hier zeige ich, wie man das ganze mit Web-Sockets, Java Script und Python realisieren kann.

Zudem gibt’s auch eine Anbindung an die Hardware des Raspberry, um nicht nur im virtuellen Raum zu bleiben.

Mehr dazu findet ihr auf deloarts.com.

Advertisements

360° Panorama

In einem früheren Beitrag habe ich gezeigt, wie man ein großes Panorama erstellt, und dieses dann im Web vorstellt. Nun gehe ich einen Schritt weiter und erstelle ein 360° Kugelpanorama.

Die Bilder

Um ein Panorama dieser Art zu erstellen braucht man natürlich vernünftige Bilder. Dabei muss man ein paar Dinge beachten, damit man später bei der Verarbeitung nicht in Arbeit untergeht (Stiching-Fehler). Gute Aufnahmen sind hier tatsächlich ein absolutes Muss, vor allem in Innenräumen, da die Abstände der Motive zur Kamera stark variieren. Es sei denn man steht in einem leeren Raum mit quadratischer Grundfläche.

Das Objektiv und die Aufnahmen

Das Objektiv erster Wahl ist hier das Sigma 8-16mm Superweitwinkelobjektiv.

lens

Bei einem Bildwinkel von 121,2° (bei 8mm Brennweite) erlaubt es ein 360° Panorama mit nur 4 Aufnahmen zu erstellen. Wer ein anderes Objektiv nutzt kann die mindestens nötige Anzahl entweder durch probieren herausfinden, oder man hohlt sich einfach eine App.

app

Sollte man sich allerdings an einem Ort befinden, an dem man nicht mehr so schnell zurückkommt, dann lohnt es sich, mehr Aufnahmen als besagte Mindestgrenze zu machen. Besser zu viel als zu wenig. Meistens mache ich gesamt 10 Aufnahmen, sechs im Hochformat um die Hochachse der Kamera, zwei Zenitaufnahmen und zwei Nadiraufnahmen – in genau dieser Reihenfolge.

Die sechs Bilder um die Hochachse überschneiden sich bei mir immer etwas, sodass sich das Stitchen bei etwaigen Aufnahmefehlern leichter bewältigen lässt.

Die Zenitaufnahme zeigt nach oben. In den meisten Fällen, sofern man sich draußen befindet, sieht man hier nur Wolken. Die erste Aufnahme zeigt einfach nach oben, die zweite erstelle ich 180° in der Objektivachseachse gedreht. Warum zuerst Zenit? Meistens sind Wolken in Bewegung – daraum sollte man zuerst die Bilder des bewegten Himmels machen, als vom als statischen zu betrachtenden Boden.

Die Nadiraufnahme ist das Pendant zur Zenitaufnahme – sie zeigt nach unten. Hier macht das Stativ gerne mal Probleme, da seine Beine dann am Bild zu sehen sind. Abhilfe schafft hier wieder die zweite, um 180° gedrehte Aufnahme, wodurch sich das spätere Entfernen der Beine am PC ziemlich einfach gestalltet. Als Notlösung (wer Photoshop nicht mag) kann man mit ausgestreckter Hand die beiden Aufnahmen machen, dabei muss man aber auf die Verwackelungsunschärfe achten!

Weil ich das Stativ erwähnt habe: Am besten werden die Bilder wenn die Kamera auf einem Stativ montiert ist, genauer: Mit einem Nodalpunktadapter.

Der Nodalpunkt

Der Nodalpunk ist jener „Punkt“ in welchem sich alle Lichtstrahlen vor und hinter der Linse kreuzen würden. Das bedeutet also, wenn man die Kamera um ihre Hochachse um den Nodalpunkt dreht fallen alle Lichtstrahlen aller umliegenden Objekte in diesem Punkt zusammen. Nur so erreicht man, dass beim Drehen der Kamera keine Tiefenfehler entstehen und das Bild später beim Stichen fehlerfrei zusammengefügt werden kann.

Um die Kamera auch richtig auf dem Adapter platzieren zu können muss man den Abstand des Nodalpunktes zur Stativschraube kennen. Dazu gibt es hier passende und gut beschriebene Tabellen.

Wer keinen Nodalpunktabadpter hat, der kann zumindest im Freien (große, weite Flächen) freihand arbeiten. Dabei entstehen zwar immer ein paar Fehler beim Stitchen, mit etwas Geduld kann man diese jedoch später in Photoshop retuschieren. Wer es trotz fehlendem Adapter ganz geanu nehmen mag: Einfach ein Stück Schnur am Objektiv auf der Höhe des Nodalpunktes befestigen. Am anderen Ende etwas schweres befestigen (eventuell ein kleiner Stein), damit die Schnur gespannt ist. Dann muss man sich nur noch „um die Schnur drehen“, darauf achtend, dass der Stein auf seiner Position liegen bleibt und die Schnur auch wirklich senkrecht nach unten hängt.

cord

Die Kamerasettings

Kurz und bündig: Manueller Modus, konstante Belichtungszeit, konstante Blende, konstanter ISO-Wert, konstante Brennweite.

Die Brennweite sollte so kurz wie möglich gehalten werden, in meinem Fall also 8mm. Die Belichtungszeit ist abhängig von der Umgebung, sie ist der variable Part der 4 Paramter. Ebenso variabel, allerdings zu Gunsten der Bildqualität niedrig zu halten ist der ISO-Wert. Die Blende sollte so weit offen sein, dass die Schärfentiefe in jeder Bildebene gleich hoch ist.
Ein guter Richtwert bei 8mm ist f/12 bis f/16. Zu klein sollte die Blendenöffnung nicht sein, da sonst die Lichtstrahlen zu stark gebeugt werden, was zu einer Unschärfe führt.

Über den „Schärfebereich“ gibt die hyperfokale Distanz auskunft, für welche es ebenso Apps gibt. Der Fokus sollte so gewählt werden, dass die hyperfokale Distanz dem Abstand zwischen Kamera und nächstgelegenen Objekt entspricht.

Das Histogramm

Das Histogram ist bei 360° Panoramas (oder eigentlich generell) eines der besten Hilfswerkzeuge in der digitalen Fotografie. Es gibt Auskunft über die Anzahl der Pixel zu einem gewissen Helligkeitsbereich. Der linke Rand im Histogram zeigt die Anzahl an rein schwarzen Pixel, der rechte Rand die Anzahl rein weißer Pixel. Dazwischen liegen alle Graustufen. Das folgende Bild zeigt die beiden Extrema und mittleres Grau.

histogram_description_1

Das Histogramm des Teelöffels zeigt recht gut was ich meine. Es sind sehr viele helle Grautöne vorhanden, deshalb liegt der Schwerpunkt auch im rechten Bereich. Ganz links und ganz rechts sind hohe Spitzen erkennbar.

histogram_description_2

Diese hohen Spitzen sind sehr schlecht, da sie keine Informationen mehr enthalten – es ist im Bild an diesen Stellen nur mehr pures Schwarz oder Weis. Für das spätere Bearbeiten ist das eine Katastrophe (ja, es ist wirklich so schlimm).

Deshalb achte ich Aufnahmen immer darauf, innerhalb der beiden Grenzen zu liegen, so wie ich es bei einem der 10 Bilder für das Panorama gemacht habe:

histogram

Hier kommt nun der schwierige Part: Alle Bilder des Panoramas müssen innerhalb der Grenzen liegen, damit keine Bildinformation verloren geht. Dazu ein Tipp: Ein Bild vom Himmel (Zenit) machen, die Belichtungsdauer entsprechend korrigieren, dann ein Bild vom Boden (Nadir) machen und schauen, ob noch alles im grünen Bereich ist. Wenn nicht: Nachkorrigieren.
Generell gilt, dass digitale Kameras wesentlich besser mit dunklen Tönen umgehen können als mit hellen. Deshalb lieber alles etwas dunkler Fotografieren, sodass nichts an den rechten Rand des Histograms rutscht. Beim späteren Bearbeiten kann man dann einfach die zu dunklen Stellen heller machen.
Fotografiert wird natürlich im RAW Format!

Das Stitchen

Sind die Bilder im Kasten kann man sie mit ICE von Microsoft zusammenfügen. Der Editor ist kostenlos und unter allen bisher von mir getesteten mein Favorit.

Als Projektion muss man Spherical wählen, nur so erstellt ICE aus dem Panorama die gewünschte Rektangularprojektion.

ice_projection

Am Ende sollte das Resultat dann so zirka so aussehen, wobei ich die Breite des Bildes meist auf 5000 Pixel setze – die Höhe muss dann die halbe Breite sein, da ein 360° Panorama in seiner Höhe mit 180° beschränkt ist. Sollte das nicht der Fall sein, dann fehlen Bilder – ICE kann dann keine volle Kugeloberfläche erstellen.

ice

three.js

Nun da das Bild endlich fertig ist, muss man es auch irgendwo anzeigen. Und wo geht das besser als im Web? Hierzu nutze ich three.js

Auf GitHub findet man alles nötige. Im Ordner 360_Panorama befindet sich das index.html und die nötigen Java Scripte, außerdem auch das Bild (area.jpg). Achtung! Wer die index.html Datei lokal öffnet wird zunächst nichts sehen, außer einen schwarzen Bildschirm, der Grund ist, dass 3D-Figuren lokal nicht angezeigt werden. Einige Tipps wie man das umgeht findet man hier.
Da man das Ganze aber ohnehin online stellen will kann man den Ordner 360_Panorama auch gleich auf seinen Webspace kopieren, und diesen dann ansurfen.

Kostenlose Webspaces gibt es wie Sand am Meer, ich habe, bevor ich mir eine eigene Domain mit Webspace zugelegt habe, bplaced genutzt. Einfach anmelden, den Ordner hochladen und mit yourname.bplaced.net/360_panorama/ online ansehen.

Im index.html befindet sich das Script, welches alle nötigen Aufgaben für das Anzeigen des Bildes übernimmt (Kugel erstellen, Kamera in die Kugel setzen, Bild auf die Innenseite projizieren, Rendern starten, Mausbefehle abfangen). Hierfür gibt es eine guteDokumentation. Ich habe eingestellt, dass sich die Kugel langsam drehen soll, wem das nicht gefällt, der kann dies mit controls.autoRotate = false; ändern.

controls.noPan = true;
controls.noZoom = true; 
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;

Das Bild wird, wie bereits erwähnt, auf die Innenseite der Kugel projiziert. Nun erklärt sich auch, warum man in ICE eine Rektangularprojektion erzeugt. Betrachtet man ein „normales“ Bild in 2D, so sieht dieses so aus:

grid_small

In 3D wird daraus jedoch das hier. (Leider unterstützt WordPress wegen Sicherheitsrichtlinien keine iFrames. Den Beitrag gibt’s flawless hier zu sehen)

Das Ergebnis

Hat man alles zusammen, so präsentiert sich am Ende ein 360° Panorama, das man hier interaktiv steuern kann!

Das war’s auch schon.

.

.

 

Panorama w/ Leaflet

Hier zeige ich wie man Giga-Panoramas im Web einfach und (mehr oder weniger) schnell darstellen kann. Hierfür nutze ich Leaflet. Dabei handelt es sich um ein Java Script, das sich wirklich leicht in eine Website implementieren lässt.

Bilder & Verarbeitung

Das erste Panorama, das ich fürs Web optimiert habe zeigt die Landschaft meiner Heimatstadt. Man braucht nur knapp 30 Minuten lang bergauf zu gehen und schon befindet man sich in einer wesentlich idyllischeren Umgebung. Das Bild war von Anfang an als „Testbild“ gedacht. Ich habe nicht auf den besten Ausschnitt oder die höchste Schärfe geachtet, sondern ich wollte einfach eine nette Basis für das Online-Pano.
.
Ich habe die Kamera ohne Stativ (es lag zuhause) im Hochformat gehalten und sechs Bilder gemacht. Dabei habe ich darauf geachtet, dasss sich alle Folgebilder zu gut 40% überlappten. Das ist wichtig für die spätere Nachbearbeitung.
.
Nach einer kurzen Bearbeitung (Helligkeit, Kontrast, Schärfe) aller RAW-Bilder und deren Konvertierung ins jpg-Format habe ich das Bild in Photoshop von Photomerge zusammensetzen lassen. Danach folgte die Farbanpassung im gesamten Bild, da dies wesentlich einfacher ist, wenn man das Bild als ganzes betrachtet. Hier habe ich ebenfalls nur sehr wenig verändert, etwa das sehr dominate Blau etwas abgeschwächt und mit etwas Magenta vermischt.
.
Eine kleine Anmerkung zum Stitchen der Bilder: Ich habe erst nachdem das Bild fertig und online war einen anderen Editor entdeckt, mit welchem das Mergen sehr viel besser funktioniert. Es handelt sich um den ICE (Image Composite Editor) von Microsoft. Er ist kostenlos und lässt sich zudem sehr angenehm bedienen. Außerdem stimmen die Resultate.
.
ice
.

Als letzten Schritt, bevor wir zum Script kommen, muss man das Bild „zerhacken“. Dabei wird das Bid in unterschiedlichen Zoomebenen in 256×256 Pixel große Quadrate zerlegt und gespeichert. Jede Zoomebene erhält ihre eigene Nummer, und die Position des Teilbildes in der Ebene wird mit X-Y-Koordinaten festgelegt. Hierzu eine kleine Beschreibung:

Zoomlevel 0, die Koordinaten des Bildes sind X=0 und Y=0, also heißt die Datei 0-0-0.jpg.

zoom0.jpg

Zoomlevel 1, die Koordinaten des Bildes 1 sind X=0 und Y=0 und jene von Bild 2 sind X=1 und Y=0, also heißen die Dateien 1-0-0.jpg und 1-1-0.jpg.

zoom1.jpg

Warum macht man das? Das gesamte Bild auf einer Website zu laden würde viel zu lange dauern. Deshalb lädt man immer nur die Anteile des Bildes, die auch tatsächlich gebraucht werden – auf den Bildschrim passen. Lässt man sich das Bild in die Ansicht einpassen, so sieht man nicht das tatsächliche Panorama mit (hier) 15000×8000 Pixel, sondern nur mit ungefähr der momentanen Bildschirmauflösung.

Wie macht man das? Eine gute Lösung ist Zoomify. Wer mit Photoshop arbeitet, der hat das Glück, dass im Export Zoomify unterstützt wird. Die exportierten Bilder werden in Ordnern mit maximal 256 Bildern gespeichert, ehe ein neuer Ordner angelegt wird. Diese Ordner lädt man dann auf den Webserver und verweist im Java Script darauf.

Leaflet

Auf GitHub findet man das nötige Script, sowie ein kleines Beispiel-html-File.

In Zeile 21 des panorama.html Files gibt man den Link zum eigenen js-File an und in Zeile 26 folgt der Link zum Ordner, welcher die Ordern der Tiles beinhaltet.

Das js-File kommt natürlich in den js-Ordner am Webserver. Hier darf man dann den Link nicht vergessen!

Das Resultat

Alles zusammen sieht dann so aus:

http://www.deloarts.com/de/photography/first_pano/

WordPress unterstützt hier aufgrund der Sicherheitsrichtlinien leider keine iFrames. Deshalb muss man separat auf den Link klicken. Hier kann man den Eintrag Flawless betrachten.

Bilddaten
  • Kamera: Canon EOS 650D
  • Blende: f/8
  • Belichtungsdauer: 1/320 Sek.
  • Filmempfindlichkeit: ISO-100
  • Objekitv: Canon 18-200mm
  • Brennweite: 50mm