This article in English

Einleitung

Panoramafotografie ist eine vergleichsweise exotische Variante der Fotografie und im Gegensatz zu, sagen wir Portraits oder Landschaftsfotografie, ist es wohl nicht das Erste mit dem man in Berührung kommt wenn man seine erste Kamera in den Händen hält. Eine Menge Fotografen und Softwarefirmen betätigen sich im Feld der Panoramafotografie und verdienen damit ihre Brötchen. Das ist in Ordnung und ich möchte auch keinen dieser Leute auf die Straße setzen. Aber manchmal sind es diese Leute, die einem das Gefühl geben Panoramafotografie sollte besser „den Profis“ überlassen werden und das man überhaupt nicht erst damit anfangen sollte bevor man nicht

1. einen Panoramakopf fürs Stativ für mehrere hundert Euros kauft,
2. verschiedene Bearbeitungs- und Stitchingsoftware für ein paar weitere hundert Euros kauft und
3. einen auf Flash basierenden Panoramaviewer kauft um die Panoramen auf seiner Website zu präsentieren.

Für mich ist hier definitiv zu viel „kaufen“ im Spiel. Daher wird diese Serie von Artikeln jeden Aspekt der Panoramafotografie beleuchten, immer mit dem Fokus darauf, es möglichst kostengünstig und bodenständig zu halten.

Andere Artikel aus der Serie „Hinter den Kulissen der Panoramafotografie“

Teil I: Die Ausrüstung für die Panoramafotografie im Selbstbau

Teil II: Perfekte Panoramen, Open Source.

Teil III: Perfekte virtuelle Touren, Open Source. (dieser hier)

Teil IV: Anhang / Häufig gestellte Fragen

Perfekte virtuelle Touren, Open Source

Folgendes ist sehr wichtig: Auch wenn hier einiges an XML-Konfiguration geschrieben werden muss, sind keinerlei Programmierkenntnisse oder -erfahrungen notwendig! Auch wer keinerlei Erfahrung mit Beschreibungs- oder Programmiersprachen hat, sollte versuchen diese Tutorial durchzuarbeiten und sich nicht von den Codebeispielen verunsichern! Ich werde mit sehr einfachen Beispielen beginnen damit dieses Tutorial für jeden zu verstehen ist und Schritt für Schritt durch die Konfiguration gehen. Der ein oder andere wird sich wundern, was mit dem SaladoPlayer schon alles möglich ist, und wenn man die erste virtuelle Tour erstmal fertig hat, ist die zweite ein Spaziergang!

Grundlagen

Als erstes, möchte ich einen kurzen Überblick darüber geben, wie der SaladoPlayer funktioniert. Bevor wir damit beginnen, benötigt man die aktuelleste Version des SaladoPlayer. Im Moment ist das 1.3. Dazu geht man auf www.panozona.com oder direkt zum entsprechenden Git (https://github.com/mstandio/SaladoPlayer/downloads) und lädt sich die aktuellste Version herunter. Nach dem entpacken, sollte sich die Ordnerstruktur wie folgt darstellen:

Nun, was sehen wir hier: Als erstes ist hier mehr zu finden, als im ersten Moment benötigt wird. Brechen wir doch mal die Dinge runter auf das, was jede funktionierende Instanz des SaladoPlayer auf jeden Fall braucht:

1. Den eigentlicher Player, in diesem Fall SaladoPlayer-1.3.swf
2. Eine HTML-Datei in der der SaladoPlayer eingebettet wird. Hier: index.html
3. Eine XML-Konfigurationsdatei, es finden sich einige im Ordner examples
4. Ein Ordner mit den Panoramabildern, typischerweise panoramas
5. Der Ordner embed, der ein bisschen Javascript enthält, außerdem die Datei expressInstall.swf die ein automatisches Update durchführen kann, wenn ein Besucher mit einer veralteten Version des Flashplayers versucht das Panorama anzuschauen.

Die HTML-Datei ist die Datei, auf die der Besucher zugreifen wird. Die Datei muss nicht umbedingt index heissen, aber ich belasse es erstmal dabei. In der HTML-Datei wird dann die SaladoPlayer-1.3.swf geladen und dem Besucher angezeigt. Der SaladoPlayer liest dann die, ebenfalls in der .html-Datei angegebene XML-Datei und damit auch die gesamte Konfiguration ein, welche Panoramen geladen werden sollen, wie sie miteinander verknpft sind, wo die Panoramen auf einer Karte liegen und so weiter. Die .swf im Browser aufzurufen bringt nichts weiter als einen leeren Player, weil nur in der .html steht, wo der SaladoPlayer die Einstellungen für die virtuelle Tour herbekommt. Die .xml aufzurufen wird genauso wenig funktionieren, wenn man sein Panorama also verlinken möchte, muss man immer zu der .html verlinken

Hallo Welt! Das erste virtuelle Panorama in 5 Minuten.

Um von Null anzufangen, erzeuge einen neuen, leeren Ordner irgendwo auf dem Computer. Der Ordnername ist erstmal egal, ich nennen ihn einfach mal testpano. Ich kopiere dann den Ordner embed und die Dateien index.html und SaladoPlayer-1.3.swf und zusätzlich eine der XML-Dateien aus dem Ordner examples in den Ordner testpano. Es ist tatsächlich egal welche von den Beispielen man nimmt, ich nehme einfach das erste, dass ich finden kann. Dann sollte man die .xml zu etwas vernünftigem umbenennen, zum Beispiel testpano1.xml. Ich erstele dann noch einen zusätzlichen Ordner in testpano mit dem Namen panoramas. Wenn alles fertig ist, sollte das ganze wie folgt aussehen:

Bevor ich jetzt ins Detail gehe, brauchen wir noch ein Panorama. Es sind tatsächlich Panoramas in der .zip-Datei des SaladoPlayer enthalten, dabei handelt es sich aber nur um farbige Schachbrettmuster um die mitgelieferten Beispiele darzustellen und es macht nicht wirklich Spaß, mit diesen zu „spielen“.

Wer mein vorheriges Tutorial verfolgt hat, sollte bereits ein Panorama in der Struktur, wie sie der SaladoPlayer verlangt, vorliegen haben. Wenn dem so ist, kopiert man einfach den Hauptordner mit dem Prefix dz_ in den Ordner panoramas. Wer ein Equirect-Panorama vorliegen hat, kann den zweiten Teil dieser Serie besuchen und lernt dort, wie man aus solch einem Panorama eine entsprechende Ordnerstruktur mit Hilfe des SaladoConverter erstellt. Für alle, die gerade kein passendes Panorama zu Hand haben, gibt es das Panorama aus dem Beispiel hier zum Downlaod: (2 MB): dz_testpano.zip

Egal auf welchem Wege, ich habe nun also einen Ordner panoramas/dz_testpano, der eine XML-Datei testpano_f.xml und sechs weitere Ordner mit den Endungen _b, _d, _f, _l, _r und _u enthält, alles vom SaladoConverter erstellt. Wir haben damit nun alle Dateien, die wir für das Panorama im Web benötigen. Bevor ich die Dateien aber hochlade, ist noch ein kleines bisschen Konfiguration notwendig.

Zuerst, öffne ich die index.html in einem beliebigen Editor. Ich arbeite gerne mit Scintilla/SciTE, aber man kann eigentlich jeden Editor nutzen, den man will. Notepad++ ist ein sehr poluärer, kostenloser Editor. Auf jeden Fall sollte ein Editor genutzt werden, der Syntax Highlighting beherrscht. Um das klar zu stellen: Weder der normale Editor von Microsoft Windows, noch der Standardeditor on MAC OS sind eine gute Idee. Nach dem Öffnen der index.html, sieht man folgendes:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>SaladoPlayer v1.3</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="embed/swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			flashvars.xml = "examples/00_demo/01_demo.xml"
			var params = {};
			params.menu = "false";
			params.quality = "high";
			params.allowfullscreen = "true";
			swfobject.embedSWF("SaladoPlayer-1.3.swf", "SaladoPlayer", "100%", "100%", "10.1.0", "embed/expressInstall.swf", flashvars, params);
		</script>
	</head>
	<body bgcolor="#000000">
		<div id="SaladoPlayer">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="embed/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

Im Augenlick sind hier zwei Zeilen wichtig, Zeile 8 und Zeile 13. In Zeile 8 wird die XML-Konfigurationsdatei geladen und in Zeile 13 der SaladoPlayer. Da Zeile 8 nun zu einer Beispieldatei zeigt, die es so gar nicht mehr gibt, sollten wir diese Zeile anpassen, damit unsere Konfigurationsdatei aufgerufen wird. Da diese Datei im Hauptverzeichnis liegt, mache ich nun folgendes:

flashvars.xml = "testpano1.xml"

Mein Ziel ist es, den schnellsten Weg zum ersten virtuellen Panorama im Web zu zeigen, daher soll das hier erstmal alles sein, ich speichere und schließe die Datei.

Als nächstes steht die XML-Konfiguration an. Dazu öffne ich die testpano1.xml und lösche alles was ich dort finde. Nun werde ich die kürzeste Konfiguration zeigen, die möglich ist. Diese Konfiguration sagt der SaladoPlayer nur, dass ein einziges Panorama in der virtuellen Tour kommen wird, und gibt den Ort des Panoramas in der Deepzoom Struktur an.

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
	<global>
		<panoramas firstPanorama="testpano"/>
	</global>
	<panoramas>
		<panorama id="testpano" path="~panoramas/dz_testpano/testpano_f.xml"/>
	</panoramas>
</SaladoPlayer>

Es kann sich jeder gerne diese Konfig kopieren und bei sich einfügen, das einzige was noch zu tun ist, ist an der Stelle panorama id="testpano" das testpano zu einem beliebigen anderem Namen zu ändern (das muss aber noch nichtmal sein), und den Pfad zum eigenen Panorama angeben. Wer einen Ordner panoramas wie vorher beschrieben angelegt hat, bei dem wird der Pfad der XML-Datei der Deepzoom-Struktur wie folgt aussehen: path="~panoramas/dz_yourpanoname/yourpanoname_f.xml". Außerdem muss man die ID des Panoramas noch ein paar Zeilen darüber aufrufen, im Element global. firstPanorama="yourpanorama". Das einzige was also wirklich wichtig ist, ist dass diese beiden IDs übereinstimmen, sonst funktioniert das ganze nicht. Wenn das nun alles fertig ist, ist die Konfigurationsdatei soweit fertig und kann geschlossen werden.

Das waren nun 9 Zeilen Konfiguration, große Projekte erfordern manchmal 1000 Zeilen oder mehr. Das hört sich jetzt vielleicht beängstigend viel an, ist es aber eigentlich gar nicht. Warum nicht? Weil die meisten Teile immer gleich sind und wiederkehrend geschrieben werden müssen. Erzeugt man also eine wirklich große Panoramatour, wird man sehr viel mit Copy&Paste arbeiten. Wenn man einmal eine gute Vorlage hat, kann man später auch einfach die Namen und Pfade der Bilder ersetzen und schon ist man so gut wie fertig.

Ich lade nun den gesamten Order auf einen Webserver und rufe die index.html im Browser auf. So sollte das ganze dann aussehen, ein virtuelles 360°x180° Panorama, erstellt mit Open Source Software, presentiert mit Open Source Software:

Hurra, das erste Panorama funktioniert! Jetzt erstmal zurück zu den Grundlagen des SaladoPlayer…

Nun haben wir also unser erstes Panorama laufen. Tatsächlich habe ich aber eine ganze Menge Basics ausgelassen, nur damit der SaladoPlayer in möglichst kurzer Zeit konfiguriert war. Ein paar mehr Dinge muss man schon über den SaladoPlayer wissen, damit man größere und ausgefeiltere virtuelle Touren erstellen kann. Daher möchte ich nun nochmal von vorn beginnen:

XML

Bevor ich jetzt noch mehr XML bringe, sollten wir uns über die Basics von XML klar werden. XML ist eine Beschreibungssprache, so wie HTML eine ist. Doch was ist eine Beschreibungssprache eigentlich genau?

Mit einer Programmiersprache schreibe ich Programme, die dann auf verschiedenen Maschinen laufen können. Eine Programmiersprache gibt der Maschine Anweisungen etwas zu tun, zum Beispiel ein mathematisches Problem lösen oder Text auf dem Bildschirm auszugeben. Im Gegensatz dazu, gibt eine Beschreibungssprache (engl. markup language) keine Anweisungen etwas zu tun. Eine Beschreibungssprache erzeugt nur Anmerkungen rund um einen Text, so dass der Computer in der Lage ist, zwischen reinem Text und Anmerkung zu unterscheiden. Ein Beispiel: In html kann ich schreiben: <strong>Wort</strong>. Diese Anmerkung wird dazu füren, das „Wort“ fett gedruckt wird. Nämlich so: Wort. Der Browser versteht die Sprache html und wird daher die Anmerkungen in den Klammern nicht ausgeben. (Die einzelnen Anmerkungen nennt man übrigns tags in Beschreibungssprachen.) Sie sind auch gar nicht dazu gedacht, ausgegeben zu werden. Ein weiteres HTML-konformes tag wäre zum Beispiel <h2>Wort</h2>, was „Wort“ zu einer Übrerschrift zweiter Ordnung machen würde. Im Gegensatz dazu, ist <EineSehrGrosseUeberschrift>Word</EineSehrGrosseUeberschrift> nicht HTML-konform und wird daher auch vom Browser nicht verstanden.

In HTML gibt es – genau wie in XML – Start- und End-tags. Zusammen bilden sie ein Element. End-tags sehen genauso aus wie Start-tags, nur beginnen sie jeweils mit einem Schrägstrich. Zum Beispiel: <Greeting>Hello World!</Greeting>.

Was du man für den SaladoPlayer schreibt hat damit sehr viele Gemeinsamkeiten zu der Programmierung von Websites. Man schreibt eine lange Seite mit XML-Konfiguration, aber anstatt einer Website, liest der SaladoPlayer die Konfiguration und erstellt daraus eine virtuelle Tour. HTML ist per Definition ein relativer strikter Satz gültiger Elemente und tags, während XML eigentlich nur ein paar grundsätzliche Regeln definiert. Um genau zu sein, ist es der SaladoPlayer, der hier spezifische Elemente erwartet, z.B. <global>,<panoramas> oder <actions>. Wenn man eine bestimmte Eigenschaft in HTML sucht, kann man eigentlich überall im Internet fündig werden. Wenn man etwas bestimmtes mit dem SaladoPlayer tun möchte, und nicht genau weiß mit welchen Elementen man das tun kann, gibt es das SaladoPlayer-Wiki und das SaladoPlayer-Forum.

Warum wird der SaladoPlayer nun mit XML konfiguriert? Der SaladoPlayer und alle seine Module sind in der Lage eine Menge Eingangsvariablen zu verstehen und zu verarbeiten. Man muss unter Umständen nur eine einzige Zeile Code ändern und man bekommt schon eine völlig andere virtuelle Tour. Oder man kann zum Beispiel zwei verschiedene XML-Dateien für den gleichen Satz Panoramen schreiben und hat so zwei ganz verschiedene Touren ohne alles zweimal hochladen zu müssen. Tatsächlich braucht man die SaladoPlayer.swf nur ein einziges mal auf dem Webserver und kann darauf so viele Panoramen laufen lassen, wie man will. Es ist einfach sehr effizient.

Und da ist noch mehr: Wenn man mit XML arbeitet, weiß man immer genau was man tut. Jeder Input hat direkten Einfluss auf die erstellte Tour. Man kann alte Konfigurationen aus bereits fertig gestellten Touren oder von anderen Nutzern kopieren, anpassen, erweitern und wieder hochladen und man kann mit anderen Nutzern kreative Wege finden, aus den vorhandenen Elementen und Attributen „das Maximum“ aus dem SaladoPlayer raus zu holen.

Der ein oder andere mag jetzt denken, dass es besser wäre eine grafische Oberfläche für das ganze zu haben. Vielleicht stimmt das auch. Es gab mal ein Projekt mit dem Namen SaladoConfigurator, das aber im Moment nicht weiterentwickelt wird. Vermutlich wird es irgendwann einmal wiederbelebt, wenn der Support aus der Community gut genug ist und sich jemand dieses Projektes annimmt. Für den Moment ist XML auf jeden Fall eine gute Möglichkeit unsere virtuellen Touren zu konfigurieren, die Grenze setzt eigentlich nur die eigene Kreativität.

Die Struktur

Es ist in jedem Fall sehr wichtig die Struktur des SP zu verstehen, denn wenn man das tut, sind auch sehr große und ausgefeilte virtuelle Touren kein Problem.

Im ersten Beispiel habe ich ein sehr minimalistisches Beispiel gezeigt, beschränkt auf die Komponenten, die zwangsläufig nötig sind. Ich möchte nun auf dieses Minimalbeispiel zurückkommen und es Stück für Stück erweitern.

Fangen wir also an. Weil es der XML-Standard vorsieht, müssen wir jede SaladoPlaer-Config mit einer Zeile beginnen, die den Typ des Dokumentes definiert. Und zwar so:

<?xml version="1.0" encoding="utf-8" ?>

Danach, öffnen und schließen wir <SaladoPlayer>-tags. Später wird unser gesamter Code zwischen diesen tags stehen:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
</SaladoPlayer>

Innerhalb des Element <SaladoPlayer> können 4 weitere Elemente auftreten, und zwar <global>, <panoramas>, <modules> und <actions>:

• global: Hier definiert man globare Einstellungen, wie z.B. autorotation, welches das erste Panorama der Tour sein soll, wie lange die Überblendungen dauern usw.
• panoramas: Hier werden alle Panoramen definiert, wo sie liegen (also der Dateipfad) und wie sie miteinander verknüpft sind.
• modules: Hier werden zusätzliche Module hinzugefügt, für Hintergrundmusik, Lensflare, Karten, Navigationsbuttons usw. Hier gibt es eine Liste mit derzeit verfügbaren Modulen.
• actions: Hier werden Aktionen definiert. Aktionen werden benötigt um Sprünge in andere Panoramen zu ermöglichn, Menüs ein- und auszublenden oder die Hintergrundmusik ein- und auszuschalten.

Für jede einigermaßen komplette virtuelle Tour werden alle 4 Elemnte benötigt. Es ist zum Beispiel sehr ungewönlich, keine Aktionen zu definieren. Mein Minimalbeispiel vom Beginn ist hier eine der ganz wenigen Ausnahmen. Daher ist es sinnvoll, leere Varianten aller 4 Elemente in die Konfiguration hinzuzufügen:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
	<global>
	</global>
	<panoramas>
	</panoramas>
	<modules>
	</modules>
	<action>
	</actions>
</SaladoPlayer>

Die Aufgabe dieser 4 Elemente ist eigentlich nur, eine übersichtliche Struktur zu erreichen. Das Element <modules> wird zum Beispiel selbst gar nicht zu Konfiguration genutzt. Innerhalb dieser Elemente können aber weitere Unterelemente definiert werden, in denen dann erst die tatsächliche Konfiguration stehen wird.

Ein Beispiel:

Ein Unterelement von <global> ist <control>. <control> hat eine ganze Menge nutzbarer Attribute (hier zu finden) die wir alle definieren können, aber nicht müssen. Das ist grundsätzlich beim SaladoPlayer so, was man nicht explizit definiert, erhält meistens einen Standardwert, der in der Regel auch ganz gut funktioniert.

Wenn ich jetzt die Funktion „autorotate“ ausstellen möchte, muss ich dazu den Wert des Attributes autorotation auf false setzen. autorotation ist ein Attribut von conrol, daher muss ich folgendes tun:

<global>
        <control autorotation="enabled:false" />
</global>

Ich bitte zu beachten, dass hier nur ein <control>-tag auftaucht, diesmal aber mit einem Schrägstrich am Ende. Diese Schreibweise ist eine Kurzform von

<global>
        <control autorotation="enabled:false"></control>
</global>

und das ist laut XML-Standard auch so gültig. Es ist erlaubt, weil das <control>-Element leer ist. Wenn ich <b>Wort</b> schreibe, ist damit etwas im Element, nämlich „Wort“. Hier ist zwar ein Attribut gesetzt worden, aber im <control>-Element steht eben nichts. Ein tag mit einem Schrägstrich am Ende ist als empty-elememt tag definiert und für genau solche Situationen gedacht, um den Code schlanker zu machen. Weil in der Konfiguration für den SaladoPlayer normalerweise eine Menge leere Elemente anfallen, findet man diese Abkürzungen auch weiter verbreitet.

Das ist nun eigentlich alles, was man braucht um seine eigenen XML-Dateien zu schreiben. Ich werde nun noch ein paar Beispiele präsentieren, um das Prinzip noch zu verdeutlichen.

Panoramen hinzufügen

Ich mache einfach mal mit dem vorherigem Beispiel weiter, in dem ich schon die autorotaion abgeschaltet habe. Ich möchte nun ein paar Panoramen hinzufügen, denn das ist offensichtlich der wichtigste Konfigurationsschritt überhaupt.

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
	<global>
                <control autorotation="enabled:false" />
	</global>
	<panoramas>
	</panoramas>
	<modules>
	</modules>
	<action>
	</actions>
</SaladoPlayer>

Panoramen können hinzugefügt werden, in dem man <panorama>-Elemente in dem <panoramas>-Element hinzufügt. Nach einem kurzen Blick ins SP-Wiki (http://panozona.com/wiki/SaladoPlayer:Configuration#panorama) stelle ich fest, dass <panorama> zwei Pflichtattribute hat, die also umbedingt angegeben werden müssen. Und zwar sind dass id und path. Ich tue nun folgendes:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
	<global>
                <control autorotation="enabled:false" />
	</global>
	<panoramas>
		<panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml" />
		<panorama id="pano2" path="~panoramas/dz_pano2/pano2_f.xml" />
		<panorama id="pano3" path="~panoramas/dz_pano3/pano3_f.xml" />
	</panoramas>
	<modules>
	</modules>
	<action>
	</actions>
</SaladoPlayer>

Panoramen hinzufügen ändert nun noch nicht sehr viel, wenn man sie nicht aufruft. Dies passiert im nächsten Schritt:

Panoramen über Hotspots verbinden

Wenn man mehr als ein Panorama zum SaladoPlayer hinzufügt, kann man diese mit Hilfe der Hotspots verknüpfen. Hotspots sind in diesem Zusammenhang nichts weiter als Objekte, die eine vorher definierte Aktion ausführen, wenn man sie anklickt. Es gibt jede Menge Aktionen, die ein Hotspot ausführen kann, zum Beispiel einen Sound abspielen, eine Textnachricht anzeigen, zu einer Kameraeinstellungen springen, oder wie ich es zeigen werde, zu einem anderen Panorama springen.
SaladoPlayer kennt drei verschiedene Typen von Hotspots, SimpleHotspot, AdvancedHotspot und VideoHotspot.
Wie man sich schon leicht vorstellen kann, ist der letzte dafür gedacht, Videos in das Panorama einzubinden, und die ersten beiden für mehr oder weniger statische, Grafiken. Um es möglichst einfach zu halten, werde ich den SimpleHotspot nehmen

Als erstes brauchen wir den Ordner hotspots, der im SaladoPlayer-Download zu finden ist, und laden diesen in das Hauptverzeichnis unserer SaladoPlayer-Instanz auf dem Webserver hoch. Dieser Ordner wird benötigt, weil sich dort die entsprechenden .swf-Dateien SimpleHotspot-1.0.swf, AdvancedHotspot-1.0.swf und VideoHotspot-1.0.swf befinden und zusätzlich noch ein paar Beispielbilder, die wir als Hotspots nutzen können.

Ich werde nun einen Hotspot in pano1 platzieren, der zu pano2 zeigen wird. Dafür benötige ich zwei Dinge: Eine Aktion, die ich mal jumpToPano2 nennen werde, und einen Hotspot in pano1, der diese Aktion auslösen wird. Ich füge dazu folgende Zeile in das action-Element ein, dass derzeit noch leer ist:

<action id="jumpToPano2" content="SaladoPlayer.loadPano(pano2)"/>

Als nächstes füge ich den Hotspot als Unterelement von pano1 ein, was gleichbedeutend damit ist, dass er in pano1 zu sehen sein wird.

<swf id="Pano1ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" mouse="onClick:jumpToPano2">

Insgesamt haben wir dann also folgendes:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
    <global>
                <control autorotation="enabled:false" />
    </global>
    <panoramas>
	<panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml">
             <swf id="Pano1ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" mouse="onClick:jumpToPano2"/>
	</panorama>
	<panorama id="pano2" path="~panoramas/dz_pano2/pano2_f.xml" />
	<panorama id="pano3" path="~panoramas/dz_pano3/pano3_f.xml" />
    </panoramas>
    <modules>
    </modules>
    <actions>
                <action id="jumpToPano2" content="SaladoPlayer.loadPano(pano2)"/>
    </actions>
</SaladoPlayer>

Nun haben wir einen Hotspot in unser erstes Panorama hinzugefügt. Es ist leicht ersichtlich, dass wir mindestens einen weiteren Hotspot brauchen, um zurück zu Pano1 zu kommen. Dafür brauchen wir, um genau zu sein, noch einen Hotspot und eine Aktion. Ich werde das gleiche mal für alle 3 Panoramen erledigen. Dazu brauche ich 4 Hotspots und 3 Aktionen um die Panoramen in einer Reihe hintereinander zu verbinden. Auch werde ich die Hotspots nun besser platzieren, sonst führt das ganze zu einem großen Durcheinander. Zur Platzierung der Hotspots nutzt man das Attribut location des Element <swf>.

location="distance:0,pan:0,tilt:0"

distance definiert die Distanz des Hotspots zur Kamera, lässt die Grafik also hauptsächlich größer oder kleiner erscheinen. pan definiert die horizontale Position des Hotspots in Grad (-180 bis 180) und tilt tut das gleiche in vertikaler Richtung (-90 bis 90). Wenn ich nun alle Parameter entsprechend setze, sieht das folgendermaßen aus:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
    <global>
                <control autorotation="enabled:false" />
    </global>
    <panoramas>
	<panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml">
                    <swf id="Pano1ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:0,tilt:-15" mouse="onClick:jumpToPano2"/>
	</panorama>
	<panorama id="pano2" path="~panoramas/dz_pano2/pano2_f.xml">
                   <swf id="Pano2ToPano1" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-127,tilt:-10" mouse="onClick:jumpToPano1"/>
                   <swf id="Pano2ToPano3" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:70,tilt:-15" mouse="onClick:jumpToPano3"/>
	</panorama>
	<panorama id="pano3" path="~panoramas/dz_pano3/pano3_f.xml">
                   <swf id="Pano3ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-40,tilt:-15" mouse="onClick:jumpToPano2"/>
	</panorama>
    </panoramas>
    <modules>
    </modules>
    <actions>
                <action id="jumpToPano1" content="SaladoPlayer.loadPano(pano1)"/>
                <action id="jumpToPano2" content="SaladoPlayer.loadPano(pano2)"/>
                <action id="jumpToPano3" content="SaladoPlayer.loadPano(pano3)"/>
    </actions>
</SaladoPlayer>

Vielleicht fragst sich der ein oder andere jetzt, wie ich überhaupt an die Werte für pan und tilt gekommen bin. Man könnte sie herausfinden, im dem man in einem trial-and-error-Verfahren Werte verändert und sich das Ergebnis anschaut. Das ist aber ziemlich aufwändig, und vor allem unnötig. Dafür gibt es nämlich den ViewFinder. ViewFinder ist ein Modul, das nicht dafür gemacht wurde, dem Besucher der Panoramatour irgendetwas anzuzeigen, sondern einzig bei der Erstellung verwendet werden sollte und die Konfiguration erleichtert. Es handelt sich um das erste Modul was ich hier nutzen werde, im folgenden Schritt erkläre ich daher, wie das geht.

Module nutzen

In der Konfigurationsdatei ist immer noch ein leeres Element, und zwar das mit dem Namne modules. Module spielen eine wichtige Rolle bei der Arbeit mit dem SaladoPlayer, weil alles, was die Grundfunktionalität des SP übersteigt, mit Modulen gemacht wird. Es gibt jetzt schon eine ziemlich lange Liste mit verfügbaren Modules und da der SaladoPlayer ja ein offenes Projekt ist, können Module von jedem geschrieben und hinzugefügt werden. Das neueste Beispiel für ein Modul aus der Community ist LensFlare, der Wunsch danach kam aus der Community und wurde von dieser auch beantwortet.

Beispiel: ViewFinder

Ich möchte also mit dem Modul ViewFinder beginnen. Im SaladoPlayer-Ziparchiv ist ein Ordner mit dem Namen modules, entweder lädt man nun den ganzen Ordner auf seinen Werbserver hoch, oder man fügt nur den Ordner auf dem Server hinzu und lädt dort die ViewFinder-1.3.swf rein. ViewFinder ist das einfachste Modul, es hat nur ein notwendiges Attribut (path) und auch sonst nicht viele Einstellmöglichkeiten. Ich kann das Modul mit einer Zeile Code einbinden:

<ViewFinder path="~modules/ViewFinder-1.3.swf"/>

Diese Zeile muss in die XML-Datei in das Element modules:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
    <global>
                <control autorotation="enabled:false" />
    </global>
    <panoramas>
            <panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml">
                    <swf id="Pano1ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:0,tilt:-15" mouse="onClick:jumpToPano2"/>
	    </panorama>
	    <panorama id="pano2" path="~panoramas/dz_pano2/pano2_f.xml">
                   <swf id="Pano2ToPano1" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-127,tilt:-10" mouse="onClick:jumpToPano1"/>
                   <swf id="Pano2ToPano3" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:70,tilt:-15" mouse="onClick:jumpToPano3"/>
	    </panorama>
	    <panorama id="pano3" path="~panoramas/dz_pano3/pano3_f.xml">
                   <swf id="Pano3ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-40,tilt:-15" mouse="onClick:jumpToPano2"/>
	    </panorama>
    </panoramas>
    <modules>
	    <ViewFinder path="~modules/ViewFinder-1.3.swf"/>
    </modules>
    <actions>
                <action id="jumpToPano1" content="SaladoPlayer.loadPano(pano1)"/>
                <action id="jumpToPano2" content="SaladoPlayer.loadPano(pano2)"/>
                <action id="jumpToPano3" content="SaladoPlayer.loadPano(pano3)"/>
    </actions>
</SaladoPlayer>

Wie man jetzt sehen kann, werden die Werte für pan, tilt und fov in der linken oberen Ecke angezeigt. Das ist ziemlich praktisch beim Konfigurieren virtueller Touren, gerade wenn man viele Hotspots hat. Wenn man alle Werte gesetzt hat, sollte man das Modul offensichtlich wieder deaktivieren, damit es dem Besucher später nicht die Sicht versperrt. Das geht einfach durch das Löschen der einen Zeile Code, oder indem man sie auskommentiere, und zwar so:

<!-- <ViewFinder path="~modules/ViewFinder-1.3.swf"/> -->

Module hinzufügen funktioniert eigentlich immer auf die gleiche Art und Weise, aber die meisten Module erfordern ein bisschen mehr Konfiguration als der ViewFinder. Grundsätzlich laufen Module und Aktionen Hand in Hand: Erst definiert man all die Konfiguration, die für das Modul nötig ist, und dann definiert man alle Aktionen, die auf das Modul angewendet werden, was wieder oft dazu führt, dass das Modul selbst weiter Aktionen ausführt. Das klingt jetzt vielleicht etwas verwirrend, daher hier ein weiteres Beispiel:

Beispiel: BackgroundMusic

Ich möchte gerne Hintergrundgeräusche zu meinem Panorama hinzufügen. Dies übersteigt die Grundfunktionalität und muss daher mit einem Modul gemacht werden. BackgroundMusic-1.1.swf ist im Ziparchiv des SaladoPlayers im Ordner modules zu finden. Neben der .swf-Datei braucht man noch eine Sounddatei, die man in den neu erstellten Ordner media/sounds/ kopiert.

BackgroundMusic ist ein gutes Beispiel für die komplexere Nutzung eines Moduls. Jedes Panorama soll mit einer anderen Sounddatei verknüpft werden, welche immer auotmatisch abgespielt werden soll, wenn man das Panorama betritt. Ebenfalls soll es einen Hotspot geben, mit dem man die Geräusche global an- und ausschalten kann.
Man kann sich das Modul BackgroundMusic wie einen CD-Player vorstellen: Man kann damit immer nur eine CD gleichzeitig abspielen, aber es ist ein CD-Wechsel eingebaut, der hunderte CDs beinhalten kann. Am Anfang muss man alle CDs in den Wechsel legen. Jedes mal, wenn man dann das Panorama wechselt, wird die CD gewechselt und abgespielt. Man definiert also erstmal alle Sounddateien in der Modulkonfiguration und nutzt dann die Funktion BackgroundMusic.setTrack() um eine „CD“ über die ID zu wählen.

Als erstes definiere ich also das Modul BackgroundMusic innerhalb von modules und füge drei Tracks mit den IDs pano1, pano2 und pano3 hinzu:

<BackgroundMusic path="~modules/BackgroundMusic-1.1.swf">
	<tracks>
		<track id="pano1" path="~media/sounds/pano1_recorded_sounds.mp3"/>
		<track id="pano2" path="~media/sounds/pano2_recorded_sounds.mp3"/>
		<track id="pano3" path="~media/sounds/pano3_recorded_sounds.mp3"/>
	</tracks>
</BackgroundMusic>

Dann brauche ich Aktionen: Eine wird benötigt, um die Musik an- und auszuschalten, drei weitere sind jeweils dazu da, um die jeweilige Sounddatei zu laden.

<action id="toggleBackgroundMusic" content="BackgroundMusic.togglePlay()"/>
<action id="setTrackPano1" content="BackgroundMusic.setTrack(pano1)"/>
<action id="setTrackPano2" content="BackgroundMusic.setTrack(pano2)"/>
<action id="setTrackPano3" content="BackgroundMusic.setTrack(pano3)"/>

Die Aktionen müssen beim Eintritt in das Panorama ausgeführt werden. Das ist möglich, in dem jeweils das Attribut onEnter zu panorama hinzugefügt wird, so wie in diesem Beispiel:

<panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml" onEnter="setTrackPano1">

Nun bin ich fast fertig. Ich brauche jetzt noch einen Hotspot, der den Sound global an- und ausschaltet. Ich hätte hier gerne in paar mehr Einstellmöglichkeiten, daher wähle ich für diesen Zweck den AdvancedHotspot:

<swf id="playMusic" path="~hotspots/AdvancedHotspot-1.0.swf" location="distance:1000,pan:-20,tilt:10" mouse="onClick:toggleBackgroundMusic">
	<settings path="~hotspots/images/soundspeaker.png" beat="false"/>
</swf>

Die gesamte Konfiguration sieht nun wie folgt aus, darunter eine Demo:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
    <global>
                <control autorotation="enabled:false" />
    </global>
    <panoramas>
	<panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml" onEnter="setTrackPano1">
		<swf id="Pano1ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:0,tilt:-15" mouse="onClick:jumpToPano2"/>
		<swf id="playMusic" path="~hotspots/AdvancedHotspot-1.0.swf" location="distance:1000,pan:-20,tilt:10" mouse="onClick:toggleBackgroundMusic">
			<settings path="~hotspots/images/soundspeaker.png" beat="false"/>
		</swf>
	</panorama>
	<panorama id="pano2" path="~panoramas/dz_pano2/pano2_f.xml" onEnter="setTrackPano2">
		<swf id="Pano2ToPano1" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-127,tilt:-10" mouse="onClick:jumpToPano1"/>
		<swf id="Pano2ToPano3" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:70,tilt:-15" mouse="onClick:jumpToPano3"/>
	</panorama>
	<panorama id="pano3" path="~panoramas/dz_pano3/pano3_f.xml" onEnter="setTrackPano3">
		<swf id="Pano3ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-40,tilt:-15" mouse="onClick:jumpToPano2"/>
	</panorama>
    </panoramas>
    <modules>
		<BackgroundMusic path="~modules/BackgroundMusic-1.1.swf">
			<tracks>
				<track id="pano1" path="~media/sounds/pano1_recorded_sounds.mp3"/>
				<track id="pano2" path="~media/sounds/pano2_recorded_sounds.mp3"/>
				<track id="pano3" path="~media/sounds/pano3_recorded_sounds.mp3"/>
			</tracks>
		</BackgroundMusic>
    </modules>
    <actions>
		<action id="jumpToPano1" content="SaladoPlayer.loadPano(pano1)"/>
		<action id="jumpToPano2" content="SaladoPlayer.loadPano(pano2)"/>
		<action id="jumpToPano3" content="SaladoPlayer.loadPano(pano3)"/>

		<action id="toggleBackgroundMusic" content="BackgroundMusic.togglePlay()"/>
		<action id="setTrackPano1" content="BackgroundMusic.setTrack(pano1)"/>
		<action id="setTrackPano2" content="BackgroundMusic.setTrack(pano2)"/>
		<action id="setTrackPano3" content="BackgroundMusic.setTrack(pano3)"/>

    </actions>
</SaladoPlayer>

Beispiel: BackgroundMusic (nochmal)

Ich habe schon gesagt, dass auch ein Modul selbst Aktionen auslösen kann. Das ist im vorherigen Beispiel gar nicht passiert, daher möchte ich dieses nun noch weiter ausbauen um zu zeigen wie das funktioniert, und wie diese Eigenschaft nutzen kann.
Sagen mir mal, ich möchte, dass das Lautsprechersymbol geändert wird, wenn ich den Sound an- und ausschalte. Das ist eine Aktion, die das Modul BackgroundMusic selbst ausführen kann, wenn es seinen Zustand ändert.
Als erstes mal muss ich eine andere Variante des Buttons nehmen, weil Hotspots per Definition nicht ein- und ausgeblendet werden können. Hotspots sind hier also nicht das richtige Element. Stattdessen werde ich ein anderes Modul nutzen, und zwar ImageButton. ImageButton lässt uns Grafiken an den Bildschirm des Besuchers „heften“, die der Kamerabewegung des Besuchers folgen statt an einem bestimmten Punkt im Panorama stehen zu bleiben, so wie ein Hotspot das tut. Also definiere ich das ImageButton-Modul mit zwei verschiedenen Buttons, einen activeSoundButton und einen inactiveSoundButton. Beide Buttons sollen in der Ecke oben links erscheinen, 50 Pixel vom linken und oberen Rand entfernt. Beide Buttons lösen die gleiche Aktion aus, nämlich die gleiche wie im vorherigen Beispiel: toggleBackgroundMusic. Weil der Sound gleich von Beginn an gespielt werden soll, setzte ich den activeSoundButton als von Beginn an „sichtbar“. Dafür bekommt der Button das Attribut open="true":

<ImageButton path="~modules/ImageButton-1.3.swf">
	<button id="activeSoundButton" path="~hotspots/images/soundspeaker_enabled.png" action="toggleBackgroundMusic" >
		<window align="vertical:top,horizontal:left" move="horizontal:50,vertical:50" open="true"/>
	</button>
	<button id="inactiveSoundButton" path="~hotspots/images/soundspeaker_disabled.png" action="toggleBackgroundMusic" >
		<window align="vertical:top,horizontal:left" move="horizontal:50,vertical:50" open="false"/>
	</button>
</ImageButton>

So weit, so klar. Ein Klick auf das Icon schaltet nun den Sound an und aus. Aber ich wollte ja auch, dass sich das Icon ändert, je nach dem ob die Musik spielt oder nicht. Das ist, was das Modul BackgroundMusic nun machen wird. Als erstes brauche ich dafür zwei Aktionen, einen wird den aktiven Button einblenden und den inaktiven ausblenden, und eine wird genau das Gegenteil tun:

<action id="showActiveSoundButton" content="ImageButton.setOpen(activeSoundButton,true);ImageButton.setOpen(inactiveSoundButton,false)"/>
<action id="showInactiveSoundButton" content="ImageButton.setOpen(activeSoundButton,false);ImageButton.setOpen(inactiveSoundButton,true)"/>

Als Unterelement von BackgroundMusic füge ich das Element settings wie folgt ein:

<settings play="true" onPlay="showActiveSoundButton" onStop="showInactiveSoundButton"/>

play="true" wird hier den Sound gleich von Beginn an spielen. Aber noch eine andere Sache ist neu, und zwar onPlay. Dieses Attribut beinhaltet die Aktion, die ausgeführt werden soll, wenn das Modul die Musik startet. Das gleiche gilt für onStop, nur beim Stoppen der Musik. Wir haben nun einen Kreis gebaut: Ein Klick auf den Button führt eine Aktion aus, die Aktion aktiviert das Modul und das Modul führt selbst wieder eine Aktion aus, dei den Button verändert, den wir gerade angeklickt haben.

Die ganze Konfiguration sieht wie folgt aus:

<?xml version="1.0" encoding="utf-8" ?>
<SaladoPlayer>
	<global>
                <control autorotation="enabled:false" />
	</global>
	<panoramas>
		<panorama id="pano1" path="~panoramas/dz_pano1/pano1_f.xml" onEnter="setTrackPano1">
			<swf id="Pano1ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:0,tilt:-15" mouse="onClick:jumpToPano2"/>
		</panorama>
		<panorama id="pano2" path="~panoramas/dz_pano2/pano2_f.xml" onEnter="setTrackPano2">
			<swf id="Pano2ToPano1" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-127,tilt:-10" mouse="onClick:jumpToPano1"/>
			<swf id="Pano2ToPano3" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:70,tilt:-15" mouse="onClick:jumpToPano3"/>
		</panorama>
		<panorama id="pano3" path="~panoramas/dz_pano3/pano3_f.xml" onEnter="setTrackPano3">
			<swf id="Pano3ToPano2" path="~hotspots/SimpleHotspot-1.0.swf" location="distance:500,pan:-40,tilt:-15" mouse="onClick:jumpToPano2"/>
		</panorama>
	</panoramas>
	<modules>
		<BackgroundMusic path="~modules/BackgroundMusic-1.1.swf">
			<settings play="true" onPlay="showActiveSoundButton" onStop="showInactiveSoundButton"/>
			<tracks>
				<track id="pano1" path="~media/sounds/pano1_recorded_sounds.mp3"/>
				<track id="pano2" path="~media/sounds/pano2_recorded_sounds.mp3"/>
				<track id="pano3" path="~media/sounds/pano3_recorded_sounds.mp3"/>
			</tracks>
		</BackgroundMusic>
		<ImageButton path="~modules/ImageButton-1.3.swf">
			<button id="activeSoundButton" path="~hotspots/images/soundspeaker_enabled.png" action="toggleBackgroundMusic" >
				<window align="vertical:top,horizontal:left" move="horizontal:50,vertical:50" open="true"/>
			</button>
			<button id="inactiveSoundButton" path="~hotspots/images/soundspeaker_disabled.png" action="toggleBackgroundMusic" >
				<window align="vertical:top,horizontal:left" move="horizontal:50,vertical:50" open="false"/>
			</button>
		</ImageButton>
	</modules>
	<actions>
		<action id="jumpToPano1" content="SaladoPlayer.loadPano(pano1)"/>
		<action id="jumpToPano2" content="SaladoPlayer.loadPano(pano2)"/>
		<action id="jumpToPano3" content="SaladoPlayer.loadPano(pano3)"/>

		<action id="toggleBackgroundMusic" content="BackgroundMusic.togglePlay()"/>
		<action id="setTrackPano1" content="BackgroundMusic.setTrack(pano1)"/>
		<action id="setTrackPano2" content="BackgroundMusic.setTrack(pano2)"/>
		<action id="setTrackPano3" content="BackgroundMusic.setTrack(pano3)"/>

		<action id="showActiveSoundButton" content="ImageButton.setOpen(activeSoundButton,true);ImageButton.setOpen(inactiveSoundButton,false)"/>
		<action id="showInactiveSoundButton" content="ImageButton.setOpen(inactiveSoundButton,true);ImageButton.setOpen(activeSoundButton,false)"/>
    </actions>
</SaladoPlayer>

Das ganze hier soll als Beispiel dienen, wie komplexe Kombinationen von Aktionen und Modules aussehen können. Durch derartige Kombination lassen sich dynamische, und vor allem multimediale virtuelle Touren erstellen, die keine Wünsche offen lassen.
Die Nutzung von Modulen sollte in ihren Grundzügen nun soweit klar geworden sein und damit endet mein Artikel über den SaladoPlayer auch schon. Es ist nun an jedem selbst, die Möglichkeiten des SaladoPlayer weiter zu erkunden. Die Beispiele auf dieser Seite sollen nur als Starthilfe fungieren, die Funktionen des SP übersteigen das hier gezeigte bei weitem. Ich lade dazu ein, die Beispiele auf diese Seite zu kopieren und zu erweitern, auch lohnt sich ein Blick in den Ordner examples, der im Ziparchiv des SaladoPlayer dabei ist, dort finden sich Beispiele für allem was mit dem Download mitgeliefert wird: Module, Aktionen, Attribute… Ich bitte darum, Probleme und Erfahrungen im SaladoPlayer-Forum zu besprechen, und die Software damit in Zukunft noch besser zu machen.

Credits

Ein großer Dank geht an Marek Standio, weil er den SaladoPlayer so aufopferungsvoll pflegt und im SaladoPlayer-Forum stehts weiterhilft!

Das XML-Dateisymbol ist © by Dellustrations (http://www.dellustrations.com/).

Alle anderen Zeichnungen, Bilder und der Text sind lizenziert unter der Creative Commons Lizenz by-nc.

Falls dir dieser Artikel gefallen hat, zeige deine Unterstützung bitte durch einen Klick auf den Share-Button. Ich freue mich natürlich auch über eine kleine Spende über Paypal oder über einen Klick auf den Flattr-Button.