Mitten drin!

Der Rahmen

Ein Panorama-Viewer tritt in einer HTML5-Seite in der Regel an 3 Stellen in Erscheinung:

  • Innerhalb des <body>-Elements steht ein <canvas>-Element als Platzhalter für den Viewer.
  • Die eigentliche Funktionalität des Viewers ist in einer JavaScript-Klasse enthalten. Ein <script>-Element innerhalb des <head>-Elements verweist auf die zugehörige Datei (Panorado_min.js).
  • Das Laden der Seite sollte die Erzeugung und Initialisierung des Viewer-Objekts auslösen. Der entsprechende Code kann also als Event-Handler für das window.onload-Event notiert werden.

Damit sieht eine ganz einfache Seite so aus:

<!DOCTYPE html>
<html>
   <head>
      <title>Panorado JS Demo #1</title>
      <meta http-equiv='X-UA-Compatible' content='IE=edge'>
      <script src="Panorado_min.js"></script>
      <script>
         window.onload = function() {
            viewer = new PanoradoJS(document.getElementById("viewerCanvas"));
            viewer.image = { src: 'MyPano.jpg', projection: 'spherical' };
         }
      </script>
   </head>
   <body>
      <canvas id="viewerCanvas" style="width:800px;height:450px"></canvas>
   </body>
</html>

Ab v.2.2 wird auch die weniger gebräuchliche XHTML5-Syntax unterstützt.

Empfehlungen

  • Bringen Sie einen Hinweis zur interaktiven Maus- oder Touch-Steuerung!
  • Panoramabilder sollten die Eigenschaft projection: 'spherical' erhalten.
  • Bei einem 360°-Bild sollte das Originalbild ca. dreimal so breit wie das <canvas>-Element sein.
  • Für Bilder mit kleinerem Blickwinkel wird flache Projektion empfohlen (das ist die Standard-Einstellung).
    Zeigen Sie zunächst das ganze Bild verkleinert an: viewer.image.scale = -1.
    Fordern Sie den Benutzer auf, interaktiv hineinzoomen.
  • Bitte denken Sie daran, dass große Bilder ggfs. langsam über das Internet übertragen werden und im Speicher ein Vielfaches der Dateigröße an Platz beanspruchen.

Die Klasse PanoradoJS

Der Viewer ist nach außen ein Objekt einer JavaScript-Klasse wie andere auch, mit Eigenschaften, Methoden und Ereignissen.

Ein neu erzeugtes Viewer-Objekt muss vor allem 2 Dinge wissen, um seine Arbeit aufzunehmen:

  • Was soll gemalt werden? Dafür wird über die image-Eingenschaft eine Bilddatei benannt.
  • Wohin soll gemalt werden? Dafür ist ein canvas-Objekt zuzuordnen.
    "Canvas" heißt übrigens "Leinwand"!

Außer diesen beiden Eigenschaften gibt es zahlreiche weitere, die im Folgenden beschrieben werden.

PanoradoJS
Eigenschaften

Ein PanoradoJS-Viewer-Objekt unterstützt die folgende Eigenschaften (properties).
Alle Winkelangaben sind in Grad (degrees).

canvas [get; object] Das Canvas-Objekt innerhalb der HTML-Seite, auf das das Bild "gemalt" wird.
compassVisible [set, get; boolean] Gibt an, ob der Kompass aktuell sichtbar sein soll.
Beim Laden eines Bildes mit compassNorth-Angabe wird der Kompass sichtbar gemacht.
Default: false.
currentImageId [set, get; numeric] Der Index des aktuell in der Bildliste selektierten Bildes (0-basiert).
Der Wert -1 bedeutet, dass kein Bild von einer Bildliste selektiert ist.
dispHorzFov [set, get; numeric] Gibt den aktuell angezeigten horizontalen Blickwinkel an (in Grad).
Bezug ist der Blickwinkel in der Horizontlinie (tilt = 0).
dispVertFov [set, get; numeric] Gibt den aktuell angezeigten vertikalen Blickwinkel an (in Grad).
enabled [set, get; boolean] Gibt an, ob Benutzer-Interaktion per Maus, Tastatur und ggfs. Touch-Eingabe möglich ist. Default: true
fullWindow [set, get; boolean] Gibt an, ob der Viewer das gesamte Dokumentenfenster ausfüllen soll. Dies ist nicht zu verwechseln mit dem Bildschirm-Vollbildmodus des Browsers (F11).
Default: false.
fullWindowEnabled [set, get; boolean] Gibt an, ob interaktives Vergrößern des Viewers möglich ist. Default: true.
grabCursor0 [set, get; string] Gibt die URL einer .cur-Datei an, deren Bild für den Cursor im Grab-Modus mit nicht gedrückter linker Taste verwendet wird. Optional.
grabCursor1 [set, get; string] Gibt die URL einer .cur-Datei an, deren Bild für den Cursor im Grab-Modus mit gedrückter linker Taste verwendet wird. Optional.
gridSize [set, get; numeric] Die nominelle Größe des Rasters, das für sphärische Projektion verwendet wird. Ein kleineres Raster bewirkt bessere Bildqualität, aber geringere Performance. Wert: 1...8°, Default: 4°.
hotspotsVisible [set, get; boolean] Gibt an, ob Hotspots aktuell sichtbar sein sollen.
Default: true.
hotspotTemplate [set; object] Gibt Default-Werte für Hotspots an.
Diese Angaben können für jeden einzelnen Hotspot überschrieben werden.
Objekt-Eigenschaften:
  • imgInfo [string]: URL einer Bilddatei für Info-Hotspots.
    Default: internes Symbol.
  • imgLink [string]: URL einer Bilddatei für Link-Hotspots.
    Default: internes Symbol.
  • border [boolean]: Rahmen für Hotspot-Popups? Default: false.
  • shadow [boolean]: Schatten für Hotspot-Popups? Default: false.
  • opacity [numeric]: Transparenz für Hotspot-Popups. 0.0 .. 1.0; Default: 1.0.
image [set, get; object] Das Quellbild, das dargestellt werden soll.
Das Objekt enthält neben den Standardeigenschaften des HTML-Image-Objekts wie src, width und height weitere Eigenschaften (Beschreibung).
imageList [set, get; array] Eine optionale Liste mit Bildbeschreibungen.
Ist eine solche definiert, kann der Viewer über die Methoden selectImage() und nextImage() zwischen den Bildern der Liste wechseln.
info [get; string] Informationen über die aktuelle Umgebung des Viewers.
initialized [get; boolean] Gibt zurück, ob der Viewer initialisiert werden konnte.
isOrientationAvailable [get; boolean] Gibt an, ob die Lage des Geräts zur Bestimmung von pan/tilt/roll verwendet werden kann.
Mobilgeräte haben normalerweise die dafür erforderlichen Gyroscop/Accelerometer/Kompass-Sensoren.
Aktuell gibt es aber noch Fehler bei einigen Geräten bzw. Browsern.
isTouchAvailable [get; boolean] Gibt an, ob Touchscreen-Unterstützung verfügbar ist.
isWebGlAvailable [get; boolean] Gibt an, ob Grafik-Hardware-Unterstützung per WebGL verfügbar ist.
licenseKey [set, get; string] 16-stelliger Schlüssel zu einer gewerblichen Lizenz. Falls nicht gesetzt, kann der Viewer auf privaten Websites eingesetzt werden und zeigt dann ein Produktsymbol in der rechten unteren Bildecke.
loaded [get; boolean] Gibt an, ob aktuell ein Bild vollständig geladen und bereit zur Anzeige ist.
maxScale [set, get; numeric] Setzt eine Grenze für das Hineinzoomen.
Der angegebene Maßstab wird auf keinen Fall überschritten.
Wert: 0.125...8; default: 8.0.
minLivestreamWidth [set, get; numeric] Die minimale horizontale Auflösung des Livestream-Videobildes. (pixels)
Default: 640. Aktuell von Opera & Chrome verwendet. MISE unterstützt noch keine Livestreams, Firefox verwendet Einstellungen in about:config.
minScale [set, get; numeric] Setzt eine Grenze für das Herauszoomen.
Der angegebene Maßstab wird auf keinen Fall unterschritten.
Wert: 0.125...8; Default: 0.125.
mouseMode [set, get; string] Gibt an, ob beim Ziehen mit der Maus das Sichtfenster vor dem Bild ("pan") oder das Bild hinter dem Sichtfenster ("grab") in Mausrichtung verschoben wird.
Default: "grab" für Touchscreens, sonst "pan".
mousePan [get; numeric] Gibt die aktuelle Blickrichtung unter dem Mauscursor an (Horizontalwinkel).
mouseTilt [get; numeric] Gibt die aktuelle Blickrichtung unter dem Mauscursor an (Vertikalwinkel).
mouseWheel [set, get; string] Gibt an, ob beim Drehen des Mausrades nach vorn in das Bild hineingezoomt wird ("in"), aus dem Bild herausgezoomt wird ("out") oder das Mausrad ignoriert wird ("ignore"). Default: "in".
orientationMode [set, get; string] Gibt an, ob bzw. wie die Lage des Gerätes ausgewertet werden soll. Optionen:
"none" = Ignorieren
"absolute" = Bild entsprechend Himmelsrichtung, Neigung und Rotation des Geräts positionieren
Default: "none".
overlaysVisible [set, get; boolean] Gibt an, ob Overlays aktuell sichtbar sein sollen.
Default: true.
overlayTemplate [set; object] Gibt Default-Werte für Overlays an.
Diese Angaben können für jedes einzelne Overlay überschrieben werden.
Objekt-Eigenschaften:
  • popupClose [string]: Schließen von Overlay-Popups.
    Optionen: "auto" (Default) oder "button".
  • popupPerspective [boolean]: Overlay-Popups perspektivisch anzeigen?
    Default: false.
  • popupPosition [string]: Positionierung von Overlay-Popups.
    Optionen: "auto" (Default) oder "center".
  • popupScaling [string]: Skalierung von Overlay-Popups abhängig vom Bild-Maßstab.
    Optionen: "fixed", "logarithmic" (Default) oder "linear".
  • symbolPerspective [boolean]: Overlay-Symbole perspektivisch anzeigen?
    Default: false.
  • symbolSrc [string]: URL einer Bilddatei für Overlay-Symbole.
    Default: internes Symbol.
  • symbolScaling [string]: Skalierung von Overlay-Symbolen abhängig vom Bild-Maßstab.
    Optionen: "fixed", "logarithmic" (Default) oder "linear".
pan [set, get; numeric] Gibt die aktuelle Blickrichtung an (Horizontalwinkel).
Beim Laden eines Bildes kann die anfängliche Blickrichtung angegeben werden.
"Pan" ist synonym mit "yaw". Wert: 0°...360°.
panCursor0 [set, get; string] Gibt die URL einer .cur-Datei an, deren Bild für den Cursor im Pan-Modus mit nicht gedrückter linker Taste verwendet wird. Optional.
panCursor1 [set, get; string] Gibt die URL einer .cur-Datei an, deren Bild für den Cursor im Pan-Modus mit gedrückter linker Taste verwendet wird. Optional.
panSpeed [set, get; numeric] Gibt die aktuelle Geschwindigkeit der horizontalen Bewegung an (Grad pro Sekunde).
Beim Laden eines Bildes kann die anfängliche Geschwindigkeit angegeben werden.
Wert: 0...60.
projection [set, get; string] Die aktuelle Projektionsart: "flat" oder "spherical". Default ist "flat".
Die anfängliche Projektionsart kann jedem einzelnen Bild mitgegeben werden, aber auch später gewechselt werden.
roll [set, get; numeric] Gibt die aktuelle Rotation des Bildes um die Längsachse des Objektivs an.
Der Roll-Wert spielt bei der Geräteausrichtungs-Steuerung eine Rolle.
Wert: -180°...+180°.
rollSpeed [set, get; numeric] Gibt die aktuelle Geschwindigkeit der Roll-Bewegung an (Grad pro Sekunde).
Beim Laden eines Bildes kann die anfängliche Geschwindigkeit angegeben werden.
Wert: 0...60.
scale [set, get; numeric] Gibt den aktuellen Maßstab an.
Der Wert 1 entspricht 100%.
Der Wert 0 setzt den kleinsten mit max. 2 Rändern möglichen Maßstab.
Der Wert -1 setzt den kleinsten ganz ohne Rand möglichen Maßstab.
Beim Laden eines Bildes kann dessen anfänglicher Maßstab angegeben werden.
Wert: 0.125...8.
softFade [set, get; numeric] Gibt die Dauer des SoftFade-Effekts an.
SoftFade ist das gleitende Überblenden beim Bildwechsel.
Wert: 0...10; Default: 0.5.
softPan [set, get; numeric] Gibt die Dauer des SoftPan-Effekts an.
SoftPan ist das Nachlaufen einer mit der Maus gestarteten Bewegung nach dem Loslassen der Maustaste.
Wert: 0...5; Default: 2.
softZoom [set, get; numeric] Gibt die Dauer des SoftZoom-Effekts an.
SoftZoom ist der gleitende Übergang von der aktuellen Zoomstufe zur neu gewählten.
Wert: 0...5; Default: 3.
tilt [set, get; numeric] Gibt die aktuelle Blickrichtung an (Vertikalwinkel).
Beim Laden eines Bildes kann die anfängliche Blickrichtung angegeben werden.
"Tilt" ist synonym mit "pitch". Wert: -90°...+90°.
tiltSpeed [set, get; numeric] Gibt die aktuelle Geschwindigkeit der vertikalen Bewegung an (Grad pro Sekunde).
Beim Laden eines Bildes kann die anfängliche Geschwindigkeit angegeben werden.
Wert: 0...60.
useTouch [set, get; boolean] Gibt an, ob Touchscreen-Eingaben anstatt Maus-Eingaben verwendet werden sollen.
Default: true falls verfügbar.
useWebGl [set, get; boolean] Gibt an, ob Grafik-Hardware-Unterstützung per WebGL verwendet werden soll.
Default: true falls verfügbar.
version [get; string] Die Versionsnummer des Viewers.
videoCurrentTime [set, get; numeric] Gibt die aktuelle Abspielposition einer Videodatei (falls geladen) an. In Sekunden.
videoDuration [get; numeric] Gibt die Gesamtlänge einer Videodatei (falls geladen) an. In Sekunden.
videoPlaying [set, get; boolean] Gibt an, ob eine Videodatei (falls geladen) abgespielt wird.
videoSound [set, get; boolean] Gibt an, ob der Ton einer Videodatei (falls geladen) abgespielt wird.
waitImage [set, get; string] Gibt die URL einer Bilddatei an, die beim Laden eines neuen Bildes angezeigt wird. Falls definiert, ersetzt dies die "Loading..."-Anzeige. Optional.

PanoradoJS
Methoden

Ein PanoradoJS-Viewer-Objekt unterstützt die folgende Methoden.
Alle Winkelangaben sind in Grad (degrees).

new PanoradoJS(canvas)

Constructor. Erwartet existierendes Canvas-Element als Parameter.
about() Zeigt in einem Popup-Fenster Informationen über die aktuelle Umgebung des Viewers.
move(panOff, tiltOff, rollOff) Verschiebt die Blickrichtung um die übergebenen Offset-Werte (Winkelangaben).
moveTo(pan, tilt, scale) Setzt den Blick auf die angegebenen Werte:
pan/tilt sind die Winkel-Koordinaten der neuen Blickrichtung.
scale ist der neue Maßstab.
Auf null gesetzte Parameter werden ignoriert.
moveToEx(pan, tilt, roll, scale, duration, onMoveCompleted) Setzt den Blick auf die angegebenen Werte:
pan/tilt/roll sind die Winkel-Koordinaten der neuen Blickrichtung.
scale ist der neue Maßstab.
duration ist die Dauer der Animation (in Sekunden; 0...60).
onMoveCompleted ist eine Callback-Funktion, die nach Erreichen der Zielposition ausgeführt wird.
Auf null gesetzte Parameter werden ignoriert. (Neu in Version 2.5)
nextImage(offset) Falls imageList gesetzt wurde, wechselt die Anzeige auf das Bild mit dem angegebenen positiven oder negativen Offset (rückwärts/vorwärts).
resize(width, height) Ändert die Größe des Canvas-Elements auf die angegebenen Werte.
selectImage(index) Falls imageList gesetzt wurde, wechselt die Anzeige auf das Bild mit dem angegebenen Index.
setSpeed(panSpeed, tiltSpeed, rollSpeed) Setzt die aktuelle Geschwindigkeit der Bildbewegung (Winkelangaben). Wird für einen der Parameter null angegeben, wird dieser ignoriert.
reset() Startet das aktuelle Bild neu, mit Blickrichtung, Maßstab und Geschwindigkeit wie beim Laden des Bildes.
zoom(factor) Ändert den aktuellen Maßstab um den angegebenen Faktor.
Die Blickrichtung in Bildmitte bleibt erhalten.
zoomToCursor(factor) Ändert den aktuellen Maßstab um den angegebenen Faktor.
Die Blickrichtung unter dem Mauscursor bleibt erhalten.

PanoradoJS
Ereignisse

Ein PanoradoJS-Viewer-Objekt feuert die folgenden Events.
Sie können geeignete Handler-Funktionen zuweisen. Innerhalb dieser Funktionen können Sie mit this auf das Viewer-Objekt verweisen (neu ab v. 2.5.1.2).

onClick [set, get] Funktion, die beim Drücken der linken Maustaste innerhalb des canvas-Objekts aufgerufen werden soll.
onDblClick [set, get] Funktion, die beim Doppelklicken der linken Maustaste innerhalb des canvas-Objekts aufgerufen werden soll. Nicht zuverlässig auf einigen Touchscreen-Geräten.
onImageLoaded [set, get] Funktion, die nach dem vollständigen Laden eines Bildes aufgerufen werden soll.
onImageMove [set, get] Funktion, die nach Ändern der Blickrichtung oder des Maßstabs aufgerufen werden soll.
onMouseMove [set, get] Funktion, die nach dem Verschieben des Mauscursors innerhalb des canvas-Objekts aufgerufen werden soll.
onResize [set, get] Funktion, die nach einer Größenänderung des canvas-Objekts aufgerufen werden soll.

PanoradoJS.image

Ein Bild, das Sie dem Viewer zuweisen, wird über ein mehr oder weniger komplexes JSON-Objekt definiert.

Beispiel:
viewer.image = { src: "MyPano.jpg", projection: "spherical" };

Diese hier angegebenen Bildeigenschaften lassen sich anschließend auch einzeln auslesen:

autoplay [get; boolean] Gibt an, ob Video automatisch gestartet werden soll.
Nicht von allen Browsern unterstützt.
Default: false (nicht starten).
compassNorth [get; numeric] Der Winkel zwischen linkem Bildrand und der Nordausrichtung.
Wert: 0...360; Default: null (kein Kompass).
description [get; string] Eine Beschreibung des Bildes im Klartext.
horizon [get; numeric] Der Abstand der Horizontlinie von der vertikalen Mittellinie des Bildes; in Grad. Default: 0°.
horzFov [get; numeric] Die Breite des Bildes (Field of view). Default: 360°.
hotspots [get; array] Eine optionale Liste von Hotspot-Definitionen (Beschreibung)
loop [get; boolean] Gibt an, ob Video-Datei als Schleife abgespielt werden soll.
Default: false (keine Schleife).
overlays [get; array] Eine optionale Liste von Overlay-Definitionen (Beschreibung)
pan [get; numeric] Die anfängliche horizontale Blickrichtung. Default: 0°.
panSpeed [get; numeric] Die anfängliche Geschwindigkeit der horizontalen Bewegung (Grad pro Sekunde).
Wert: 0...60; Default: 3.
projection [get; string] Die anfängliche Projektionsart. "flat" oder "spherical"; Default: "flat".
Die Projektionsart lässt sich nach dem Laden über die Eigenschaft viewer.projection ändern.
roll [get; numeric] Der anfängliche Rollwinkel. Default: 0°.
rollSpeed [get; numeric] Die anfängliche Roll-Geschwindigkeit (Grad pro Sekunde).
Wert: 0...60; Default: 0.
scale [get; numeric] Der anfängliche Maßstab.
1 entspricht 100%.
0 setzt den kleinsten mit max. 2 Rändern möglichen Maßstab (Default).
-1 setzt den kleinsten ganz ohne Rand möglichen Maßstab.
src [get; string] Die URL der Bild- oder Videodatei. Obligatorisch für "imagefile", "cubefile" und "videofile".
Falls die Datei von einer anderen Domain (z. B. Picasa) stammt, sollte der Server sie mit einem Access-Control-Allow-Origin-HTTP-Header ausliefern.
Für Videos können mehrere Quellen genannt werden, getrennt durch Semikolon, von denen die erste für den Browser geeignete verwendet wird.
title [get; string] Der Titel des Bildes im Klartext.
tilt [get; numeric] Die anfängliche vertikale Blickrichtung. Default: 0°.
tiltSpeed [get; numeric] Die anfängliche Geschwindigkeit der vertikalen Bewegung (Grad pro Sekunde).
Wert: 0...60; Default: 0.
type [get; string] Die Art der Bildquelle:
"imagefile", "cubefile", "videofile" oder "livestream".
Unterstützte Video-Formate für "videofile":
- MP4: MSIE, Firefox, Chrome, Safari
- WebM: Chrome, Firefox, Opera
- Ogg: Firefox, Opera, Chrome.
Browser, die "livestream" unterstützen:
Firefox, Opera, Chrome
Optional; Default: "imagefile".
userData [get; any] Eine beliebige benutzerdefinierte Eigenschaft. Default: null.

Weitere Bild-Eigenschaften, die nicht explizit gesetzt werden müssen:

height [get; numeric] Die Höhe des Bildes in Pixeln.
is360 [get; boolean] Gibt an, ob die Breite des Bildes 360° beträgt.
vertFov [get; numeric] Die Höhe des Bildes (Field of view), in Grad.
Ergibt sich aus den Eigenschaften horzFov, width und height.
width [get; numeric] Die Breite des Bildes in Pixeln.

PanoradoJS.image.hotspots

Hotspots sind Symbole an festen Punkten eines Bildes, die beim Überfahren mit der Maus einen Text anzeigen und beim Draufklicken zu einer anderen Seite führen.

Eine Bildbeschreibung kann ein Array von Hotspot-Definitionen in JSON-Notation enthalten.

Beispiel für ein einzelnes Hotspot-Objekt:
{ pan: 120, tilt: 10, text: "Ausführliche Beschreibung", url: "Description.htm", target: "_blank" }

Über die hotspotTemplate-Eigenschaft des Viewers lassen sich Defaults für nicht explizit definierte Hotspot-Eigenschaften setzen (s. o.).

Hotspot-Definitionen lassen sich über viewer.image.hotspots[index] auch wieder auslesen.
Folgende Hotspot-Eigenschaften sind möglich:

border [get; boolean] Rahmen für Popup? Optional; Default: false.
img [get; string] Die URL einer Bilddatei, die für das angezeigte Symbol verwendet werden soll. Optional.
opacity [get; numeric] Transparenz für Popup. Optional; 0.0 .. 1.0; Default: 1.0.
pan [get; numeric] Die Blickrichtung (Horizontalwinkel). Obligatorisch.
shadow [get; boolean] Schatten für Popup? Optional; Default: false.
target [get; string] Der Name des Fensters, in dem die verlinkte Seite angezeigt werden soll. Default: "_self".
Mit "_blank" können Sie ein Popup-Fenster angeben. Sie können auch beliebige eigene Namen verwenden.
text [get; string] Der beschreibende Text, der beim Überfahren mit der Maus angezeigt wird.
Zeilenumbrüche können Sie mit <br> definieren.
tilt [get; numeric] Die Blickrichtung (Vertikalwinkel). Obligatorisch.
url [get; string] Falls nicht gesetzt, ist der Hotspot rein informativ.
Falls gesetzt, ist dies die URL der Seite (Link), die beim Anklicken angezeigt werden soll.
Anstatt einer URL können Sie auch einen Javascript-Funktionsaufruf angeben, in der Form
"javascript:doSomething();"

PanoradoJS.image.overlays

Overlays funktionieren ähnlich wie Hotspots (s. o.), erlauben aber, komplexe HTML-Elemente wie etwa <div> zu definieren, die beim Anklicken des zugehörigen Symbols angezeigt werden.

Eine Bildbeschreibung kann ein Array von Overlay-Definitionen in JSON-Notation enthalten.

Beispiel für ein einzelnes Overlay-Objekt:
{ pan: 120, tilt:10, popupElementId: "overlay1" }

Über die overlayTemplate-Eigenschaft des Viewers lassen sich Defaults für nicht explizit definierte Overlay-Eigenschaften setzen (s. o.).

Overlay-Definitionen lassen sich über viewer.image.overlays[index] auch wieder auslesen.
Folgende Overlay-Eigenschaften sind möglich:

pan [get; numeric] Die Blickrichtung (Horizontalwinkel). Obligatorisch.
popupClose [get; string] Definiert, wie das Overlay-Popup wieder geschlossen wird.
Options: "auto" (Default), "button".
popupElement [get; object] Ein HTML- (DOM-) Element, das beim Anklicken des Symbols angezeigt wird.
Neben <div> sind auch andere Elementtypen wie <iframe>, <a>, <img> möglich, ggfs. mit Unterelementen.
Das referenzierte Element kann innerhalb der HTML-Seite definiert sein.
Es wird empfohlen, zunächst dessen Style visible=hidden zu setzen. Blockelemente sollten die Styles width und height setzen. Interessant sind auch die Styles overflow, background-color, border und box-shadow.
Sie können das Overlay-Popup alternativ über die popupElementId-Eigenschaft definieren (s. u.).
popupElementId [get; string] Anstatt des Popup-Elements selber (s. o.) kann auch dessen id-Eigenschaft angegeben werden.
popupPerspective [get; boolean] Gibt an, ob das Overlay-Popup perspektivisch und zentriert über dem Symbol angezeigt werden soll.
Kombiniert mit popupScaling: "linear" sind Varianten von Bildausschnitten möglich.
Default: false.
popupPosition [get; string] Position des Overlay-Popups.
Optionen: "auto" (versetzt zum Symbol, innerh. Viewer; Default), "center" (zentriert über dem Symbol).
popupScaling [get; string] Skalierung des Overlay-Popups abhängig vom Bild-Maßstab.
Optionen: "fixed", "logarithmic" (Default) oder "linear".
symbolElement [get; object] Ein HTML- (DOM-) Element, das als Symbol angezeigt wird.
Neben <div> sind auch andere Elementtypen wie <iframe>, <a>, <img> möglich, ggfs. mit Unterelementen.
Das referenzierte Element kann innerhalb der HTML-Seite definiert sein.
Es wird empfohlen, zunächst dessen Styles visible=hidden zu setzen. Blockelemente sollten die Styles width und height setzen.
Bei mehreren mit symbolElement definierten Overlays müssen separate Elemente verwendet werden.
Sie können das Overlay-Symbol alternativ über die symbolElementId-Eigenschaft definieren (s. u.).
symbolElementId [get; string] Anstatt des Symbol-Elements selber (s. o.) kann auch dessen id-Eigenschaft angegeben werden.
symbolHref [get; string] Die URL einer HTML-Seite, die beim Klicken auf das Overlay-Symbol unmittelbar geöffnet werden soll. Optional.
symbolPerspective [get; boolean] Gibt an, ob das Overlay-Symbol perspektivisch angezeigt werden soll.
Default: false.
symbolScaling [get; string] Skalierung des Overlay-Symbols abhängig vom Bild-Maßstab.
Optionen: "fixed", "logarithmic" (Default) oder "linear".
symbolSrc [get; string] Die URL einer Bilddatei, die für das angezeigte Symbol verwendet werden soll. Optional.
Sie können PNG-Dateien mit Schatten- und Transparenzeffekten oder GIF-Dateien mit Animationen verwenden.
symbolTitle [get; string] Ein beschreibender Text, der beim Überfahren des Overlay-Symbols mit der Maus angezeigt werden soll. Optional.
tilt [get; numeric] Die Blickrichtung (Vertikalwinkel). Obligatorisch.

PanoradoJS.controls

Über das Objekt viewer.controls können Sie die automatisch innerhalb des Viewers angezeigten Schaltflächen definieren.
Folgende Eigenschaften sind möglich:

browse [set, get; boolean] Gibt an, ob interne Schaltflächen zum Wechseln des Bildes angezeigt werden sollen. Default: true.
Setzt voraus, dass viewer.imageList definiert ist und mehr als ein Bild enthält.
closeWindow [set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Schließen des Fensters angezeigt werden soll. Default: true.
Setzt voraus, dass der Viewer formatfüllend in einem Popup-Fenster angezeigt wird.
fullWindow [set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Vergrößern des Viewers auf Fenstergröße gezeigt werden soll. Default: true.
helpUrl [set, get; string] Gibt eine URL für eine Seite mit einem Hilfstext an - falls gesetzt, aktiviert durch eine interne Schaltfläche.
hotspots [set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Ein-/Ausschalten von Hotspots und Overlays angezeigt werden soll. Default: true.
Setzt voraus, dass Hotspots oder Overlays definiert sind.
info [set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Anzeigen von Statusinformationen gezeigt werden soll. Default: true.
motion [set, get; boolean] Gibt an, ob interne Schaltflächen zum Bewegen des Bildes angezeigt werden sollen. Default: true falls kein Touchscreen.
orientation [set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Ausrichten der Blickrichtung nach der Geräteausrichtung gezeigt werden soll. Default: true falls Geräteausrichtung unterstützt.
reset [set, get; boolean] Gibt an, ob eine interne Reset-Schaltfläche angezeigt werden soll. Default: true.
scale [set, get; boolean] Gibt an, ob interne Schaltflächen zum Skalieren (Zoomen) des Bildes angezeigt werden sollen. Default: true falls kein Touchscreen.
size [set, get; boolean] Gibt einen Größenfaktor für die internen Schaltflächen an. Wert: 0.7...2; Default: 1.
video [set, get; boolean] Gibt an, ob interne Schaltflächen zur Video-Steuerung angezeigt werden sollen. Default: true. Anzeige nur bei Videodatei als Bildquelle.
visible [set, get; boolean] Gibt an, ob interne Schaltflächen angezeigt werden sollen. Default: true.

Hinweis: Alle o. g. Funktionen und viele mehr lassen sich auch über externe HTML-Elemente realisieren!

CMS-Seiten

Falls Sie Ihre Website mit einem Content Management System wie z. B. WordPress, Joomla, TYPO3 oder Drupal erstellen, kann der Zugriff auf den HTML-<head>-Bereich bzw. auf JavaScript eingeschränkt sein.

Empfehlung dann: Erstellen Sie mit einem Texteditor eine eigene HTML-Seite für den Viewer nach den o. g. Spezifikationen. Binden Sie diese Seite dann per <iframe>-Element in den CMS-Inhalt ein.

Steuerung per Maus, Finger & Tastatur

Wenn der Eingabefocus auf den Viewer gesetzt ist, kann dieser folgendermaßen gesteuert werden:

Mit der Maus:

Linke Maustaste
drücken & ziehen
Verschiebt den Bildausschnitt.
Mausrad drehen Zoomt (+/-).
(Bei gedrückter Umschalttaste in kleineren Schritten)

Mit den Fingern (Touchscreen):

Wischen mit
einem Finger
Verschiebt den Bildausschnitt.
Zwei Finger spreizen Zoomt (+/-).

Mit der Tastatur:

M Schaltet um zwischen Maus-Funktionsarten.
1 Setzt den Maßstab auf 100%.
2 Setzt den Maßstab auf 200%.
5 Setzt den Maßstab auf 50%.
A Zeigt den maximalen ohne Rand möglichen Bildausschnitt.
+/- Zoomt (Vergrößert/Verkleinert).
(Bei gedrückter Umschalttaste in kleineren Schritten)
Cursortasten Verschiebt den Bildauschnitt.
Umschalt+ Cursortasten Bewegt den Bildauschnitt gleichmäßig.
Enter Vergrößert Viewer auf volle Fenstergröße.
Escape Stoppt die Bildbewegung bzw. verkleinert Vollfenster-Viewer auf Normalgröße.
C Schaltet Kompass-Anzeige ein/aus.
H Macht Hotspots sichtbar/unsichtbar.
I Zeigt Informationen über den Viewer an.

Beispielseite II

Eine HTML-Seite mit etwas spezifischeren Einstellungen könnte so aussehen:

<!DOCTYPE html>
<html>
   <head>
      <title>Panorado JS Demo #2</title>
      <script src="Panorado_min.js"></script>
      <script>
         var imgList;

         window.onload = function() {
            imgList = [
               { src: 'Panorama1.jpg', title: 'Panorama #1', projection: 'spherical',
                  pan: 90, scale: 1, horzFov: 180, horizon: 3,
                  hotspots: [
                     { pan: 6, tilt: 0, text: "More about this spot...", url: "More.htm", target: "_blank" },
                     { pan: 88.3, tilt: 5, text: "This is something to notice", img: "HsInfo.png" }
                  ],
                  overlays: [
                     { pan: 120.6, tilt: -5, elementId: "overlay1" }
                  ]
               },
               { src: 'MyPano2.jpg', title: 'Panorama #2', horzFov: 360, projection: 'spherical' },
               { src: 'MyFlatImage1.jpg', title: 'Flat Image #1', horzFov: 20, projection: 'flat' }
            ];

            viewer = new PanoradoJS(document.getElementById("viewerCanvas"));
            viewer.imageList = imgList;
            viewer.selectImage(0);
            viewer.onImageLoaded =
               function() { document.getElementById('imageTitle').innerHTML = this.image.title; };
            viewer.onDblClick =
               function() { this.zoomToCursor(2); };
            document.getElementById("version").innerHTML = viewer.version;
         };
      </script>
   </head>
   <body>
      <h1>Panorado JS v.<span id="version">???</span> Demo #2</h1>
      <p id="imageTitle">Loading image...</p>
      <canvas id="viewerCanvas" style="width:800px;height:450px"></canvas>
      <div id="overlay1">Hello World!</div>
   </body>
</html>