Create background images with Google Streetview (EN|DE)

Overview

Wanna play tabletop games directly in front of your house? — Make your own TTS background image with Google Streetview in only three (more or less) easy steps. — Dedicated to users of Unix/Linux and MacOS.>> Guide in English and German.

— ENGLISH VERSION —

For the German translation see section below. / Für die deutsche Übersetzung siehe Abschnitt unten.

Intro

In this guide I’ll show you how to grab spherical background images from Google Streetview for usage in TTS.

Please, have in mind that all images from Google Streetview are copyright protected! They belong to Google. Never ever even think of selling your results or doing anything else stupid. So, this guide is only for personal use.

Requirements

• You need an operating system with the capability of a command line interface (aka bash or terminal) like Unix/Linux and MacOS have it.
• Furthermore you have to install cURL and GraphicsMagick[www.graphicsmagick.org] (ImageMagick[www.imagemagick.org] is also possible) if not already installed.
• Last but not least you have to use any webbrowser that has a built-in (extensions are also fine) web-developer tool like Google Chrome or Mozilla Firefox (with Firebug addon) that enables you to check network activities.

Windows

If using Windows you better see that other guide from Botan.

Unix/Linux

Depending on your distribution you either have to compile the required tools on your own or you just install it with APT (Debian and Ubuntu) or with YUM (Fedora) or whatever package manager you use.

e.g.

MacOS

For ease of use install Homebrew[brew.sh] — a package manager for MacOS.
Install GraphicsMagick (using Homebrew):

Now, let’s finally start…

Step 1) Get Streetview location id

First of all we need to get the Streetview image tiles we can glue together later on. You should know that Google uses unique ids for all Streetview locations you can think of (it’s the “panorama id”, in short: “panoid”, just read on to see what I am talking about).

“Go” to a location of your choice. For example:
The “Bullerdeich” Bridge in Hamburg, Germany[www.google.de]

Use the web developer tools in your browser to determine the urls of the tiles that are used by Google to create such spherical view. Use the network observation tool to get a list of all loaded resources. (See the documentation of your browser for any help here.)

For example you may then see a list of urls like this one[geo3.ggpht.com] (if not try reloading the page with activated web-dev-tool and network activity recording).

Between all those somehow cryptic and so-called GET-parameters in the url (look all key-value-pairs behind the questionmark “?” that are delimited by ampersand[en.wikipedia.org] “&”) you can find one with the name panoid. In my example it’s the following:

We only need the panoid’s value: NAzIEfZqsUayg5JOkHFgkg
Copy it and paste it wherever you can find it again for later use (by “later” I mean “for the next step” ;).

Actually that panoid we want to have is already used in the Streetview link that I posted at first and that leads you to the bridge. See the following part of that link:

But since this url is much more cryptic than the urls of single tiles, it’s easier to grab the panoid from the latter as described.

Step 2) Grab Streetview images

Now open your terminal and use cURL to download all tile images for your chosen location.

You need the following command to do that:

Please, ensure that you replaced “<INSERT_YOUR_PANOID_HERE>” with your actual panoid. It should then look like this:

Run the command (I recommed to do it in a sub-directory) and all tile images will be downloaded, this may take a few moments depending on your internet connection. When the download finished you will have 338 images in your folder named “tile_y02-x04.jpg” and “tile_y12-x09.jpg”, for instance.

Step 3) Build spherical background image

Cool, you’re almost done. You only have to combine all tiles to one big picture. Use GraphicsMagick to do exactly that:

This will create an image with a resolution of 13312×6656 pixels.

Feel free to change the geometry values which set the size of each tile.

This will create an image with a resolution of 2600×1300 pixels.

For more information about the “gm montage” command see official “gm” help page[www.graphicsmagick.org].

If you prefer working with ImageMagick instead of GraphicsMagick, see the corresponding “imagick” help page[www.imagemagick.org].

That’s it!

Let’s put everything together in a small summary:

1. grab panoid for any Streetview location with the help of the webdev-tools of your browser
2. download all tiles with cURL:
   curl [link][00-25]&y=[00-12] -o tile_y#2-x#1.jpg
3. glue tiles together with GraphicsMagick:
   gm montage +frame +shadow -tile 26×13 -geometry 400×400+0+0 tile_*.jpg spherical_background.jpg
4. done

Import your new spherical background image into TTS as usual. 🙂

Problems?

Let me know if any of the steps are unclear to you. Add your comments in English or German.

Credits

Credits should go to [link] where I got the basic information from.

Click the above link and see, how Drew (the article’s author) steps directly into Doctor Who’s TARDIS to create an image of it. 🙂

— DEUTSCHE VERSION —

For the English version scroll to top of this guide. / Für die englische Version einfach nach ganz oben scrollen.

Einleitung

In dieser Anleitung werde ich dir zeigen, wie man die Bilder von Google Streetview für die Verwendung im TTS abgreifen kann.

Bitte denke daran, dass alle Bilder von Google Streetview einem Urheberrecht unterliegen. Sie gehören Google. Denk nicht mal dran, deine Ergebnisse zu verkaufen oder was auch immer dir sonst noch Dummes in den Sinn kommen könnte. Also, wenn du diese Anleitung befolgst, dann bitte nur für den privaten Gebrauch.

Voraussetzungen

• Du brauchst ein Betriebssystem mit der Möglichkeit einer Commandline (sog. Bash oder Terminal) wie Unix/Linux und MacOS.
• Außerdem solltest du cURL und GraphicsMagick[www.graphicsmagick.org] (ImageMagick[www.imagemagick.org] ist auch ok) installiert haben, wenn nicht schon geschehen.
• Zu guter Letzt brauchst du einen Browser mit eingebautem (oder über ein Addon installiertem) Web-Developer-Tool, welches dich die Netzwerkaktivität überwachen lässt, wie Google Chrome oder Mozilla Firefox (mit dem Firebug-Addon).

Windows

Wenn du Windows benutzt, schau besser in die andere Anleitung von Botan.

Unix/Linux

Abhängig von deiner Distribution musst du die notwendigen Tools/Libs selbst kompilieren oder du installierst sie einfach mit APT (Debian und Ubuntu) oder mit YUM (Fedora) oder welchen Paket-Manager du auch immer verwendest.

z.B.

MacOS

Um es einfach zu halten, installiere dir erstmal Homebrew[brew.sh] — das ist ein Paket-Manager für MacOS.
Installiere dann das Paket für GraphicsMagick (mit Homebrew):

Jetzt kann’s endlich losgehen…

Schritt 1) Streetview Positions-ID holen

Zu allererst müssen wir alle Kachelbilder von Streetview holen, damit wir die später aneinanderfügen können. Dazu musst du wissen, dass Google für jede erdenkliche Streetview-Position eine eindeutige Kennung verwendet (die sog. “panorama id”, kurz: “panoid”, lies einfach weiter, wir kommen gleich noch dazu).

“Geh” an einen Ort deiner Wahl. Zum Beispiel:
Die Bullerdeich Brücke in Hamburg[www.google.de]

Benutze das Web-Developer-Tool in deinem Browser, um die URLs der Kacheln zu ermitteln, die von Google verwendet werden, um die 3D-Ansicht zu erzeugen.
Aktiviere die Netzwerk-Überwachung, um eine Liste aller geladenen Ressourcen zu erhalten. (Siehe auch die Dokumentation deines Browsers für Hilfe.)

Zum Beispiel siehst du in der Liste URLs wie diese hier[geo3.ggpht.com] (wenn nicht, dann versuche es einmal mit einem Neuladen der Seite, während das Web-Dev-Tool mitsamt der Netzwerküberwachung aktiv ist).

Zwischen all den mehr oder weniger kryptischen, sogenannten GET-Parametern in der URL (man achte auf die Schlüssel-Wert-Paare zwischen den “&”-Zeichen hinter dem Fragezeichen “?”) findest du einen mit dem Namen panoid. In meinem Beispiel ist das der folgende Teil:

Wir brauchen hier nur den Wert der panoid: NAzIEfZqsUayg5JOkHFgkg
Kopier ihn dir irgendwo hin, wo du ihn später leicht wiederfindest (und mit “später” meine ich “gleich im nächsten Schritt” ;).

Eigentlich ist die panoid sogar schon Teil des Streetview-Links, der dich zur Brücke führt und den ich oben verlinkt habe. Schau dir mal folgenden Teil der URL an:

Aber da diese URL noch kryptischer anzusehen ist als die URLs der einzelnen Kacheln, ist es einfacher, die panoid von letzteren auszulesen wie halt eben beschrieben.

Schritt 2) Streetview-Bilder laden

Öffne dein Terminal (bzw. deine Bash) und benutze cURL zum Herunterladen aller Kachel-Bilder deiner aktuellen Streetview-Position.

Dafür brauchst du den folgenden Befehl:

Bitte achte darauf, den Teil “<INSERT_YOUR_PANOID_HERE>” mit deiner richtigen panoid zu ersetzen. Das sollte dann ungefähr so aussehen:

Führe den Befehl aus (ich empfehle dir, das in einem Unterverzeichnis zu tun) und alle Kachel-Bilder werden heruntergeladen. Je nach Internet-Verbindung dauert das ein wenig. Sobald der Download abgeschlossen ist, liegen in deinem Verzeichnis 338 Bilder mit Namen wie bspw. “tile_y02-x04.jpg” oder “tile_y12-x09.jpg”.

Schritt 3) Hintergrundbild zusammenbauen

Cool, du bist fast fertig. Jetzt musst du nur noch all die Kacheln in ein großes Bild zusammenfügen. Benutze GraphicsMagick, um genau das zu tun:

Dabei wird ein Bild mit den Pixelmaßen 13312×6656 angelegt.

Spiel ruhig ein bisschen mit den geometry-Werten herum, welche die Größe jeder einzelnen Kachel festlegen.

Dabei wird ein Bild mit den Pixelmaßen 2600×1300 angelegt.

Für mehr Informationen über den “gm montage” Befehl siehe offizielle “gm” Hilfe-Seite[www.graphicsmagick.org].

Wenn du lieber mit ImageMagick arbeitest anstatt mit GraphicsMagick, schau mal in die entsprechende “imagick” Hilfe-Seite[www.imagemagick.org].

Das war’s!

Lass uns das mal zusammenfassen:

1. erstmal die panoid für einen Ort in Streetview ermitteln mit Hilfe der Web-Dev-Tools deines Browsers
2. dann alle Kacheln mit cURL runterladen:
   curl [link][00-25]&y=[00-12] -o tile_y#2-x#1.jpg
3. schließlich die Kacheln mit GraphicsMagick zusammenfügen:
   gm montage +frame +shadow -tile 26×13 -geometry 400×400+0+0 tile_*.jpg spherical_background.jpg
4. fertig

Nun kannst du wie gewohnt dein neues 3D-Hintergrundbild in TTS importieren. 🙂

Probleme?

Lass mich wissen, wenn einer der Schritte für dich unklar ist. Ergänze einfach deine Kommentare auf englisch oder deutsch.

Danksagung

Lorbeeren sollten an [link] gehen, wo ich die Informationen hauptsächlich her habe.

Klicke obigen Link und schau, wie Drew (der Autor des Artikels) direkt in die TARDIS von Doctor Who steigt, um solch ein Bild zu erzeugen. 🙂