Panorado JS 2.6 - Technische Referenz

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 löst die Erzeugung und Initialisierung des Viewer-Objekts aus. 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>
      <script src="Panorado_min.js"></script>
      <script>
         window.onload = function() {
            const viewer = new PanoradoJS(document.querySelector("#viewerCanvas"));
            viewer.image = { src: 'MyPano.jpg', projection: 'spherical' };
         }
      </script>
   </head>
   <body>
      <canvas id="viewerCanvas" style="width:800px;height:400px"></canvas>
   </body>
</html>

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 (Himmelsrichtung) aktuell sichtbar sein soll. Wertet die compassNorth-Eigenschaft des aktuellen Bildes aus. Default: false.
`controls`	[get; object] Eigenschaften der Schaltflächen innerhalb des Viewers. (Beschreibung)
`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).
`fullScreen`	[set, get; boolean] Gibt an, ob der Viewer den gesamten Bildschirm ausfüllen soll. Default: false.
`fullWindow`	[set, get; boolean] Gibt an, ob der Viewer das gesamte Dokumentenfenster des Browsers ausfüllen soll. Default: false.
`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°.
`hotspots`	[set, get; array] Eine Liste von Hotspot-Definitionen (Beschreibung) für das aktuell angezeigte Bild
`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 aktuell dargestellt wird. 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. Anders als früher funktionieren die meisten Geräte/Betriebssyteme/Browser hier inzwischen korrekt. Der Chrome-Browser warnt vor der Verwendung bei "unsicheren" Quellen (z. B. HTTP).
`isTouchAvailable`	[get; boolean] Gibt an, ob Touchscreen-Unterstützung 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 Der Chrome-Browser unterstützt "absolute" in Zukunft möglicherweise nur noch bei "sicheren" Quellen (HTTPS). Default: "none".
`overlays`	[set, get; array] Eine Liste von Overlay-Definitionen (Beschreibung) für das aktuell angezeigte Bild
`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". `symbolLabel` [boolean]: Zeigt den Symbol-Titel in einem Anzeigefeld. `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. Ein anderer negativer Wert ist ein Faktor zum o. g. 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.
`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 diese das Default-Symbol. 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.
`getDispPoint(pan, tilt)`	Liefert die aktuellen Viewport-Koordinaten für die angegebene Bildposition. (object: { x, y })
`getImagePoint(x, y)`	Liefert die aktuelle Bildposition (pan/tilt) für die angegebenen Viewport-Koordinaten. (object: { pan, tilt })
`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.
`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. Sie sollten diese Methode ohne Parameter aufrufen, wenn sich die Größe des Canvas-Elements ohne eine Größenänderung des Browser-Fensters ändert.
`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.
`toDataURL(maxWidth, maxHeight, maxStringLength)`	Gibt einen DataURL-String im PNG-Format zurück, der einen Snapshot des aktuell sichtbaren Viewer-Inhalts enthält. Mit dieser DataURL können Sie den Snapshot in einem `<img>`-Element anzeigen oder als Datei downloaden. Die optionalen Parameter 1 und 2 (null erlaubt) definieren die maximale Größe für die Ausgabe. Als 3. Parameter kann die maximale URL-Stringlänge angegeben werden. In jedem Fall bleiben die Proportionen und der Bildausschnitt des Viewers erhalten.
`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.

`onClick`	[set, get] Funktion, die beim Drücken der linken Maustaste innerhalb des canvas-Objekts aufgerufen werden soll.
`onCompassNeedsCalibration`	[set, get] Funktion, die aufgerufen werden soll, wenn der Kompass des Mobilgeräts kalibriert werden muss.
`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.
`function`	[get; function] Eine JavaScript-Funktion, die beim Anklicken aufgerufen werden soll. Optional.
`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] Die URL der Seite (Link), die beim Anklicken angezeigt werden soll. Funktionsaufrufe in der Form `"javascript:doSomething();"` werden aus Sicherheitsgründen nicht mehr unterstützt; verwenden Sie stattdessen die Hotspot-Eigenschaft `function`. Optional.

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 `<a>`, `<img>` möglich, ggfs. mit Unterelementen. Das referenzierte Element kann innerhalb der HTML-Seite definiert sein. Blockelemente sollten die Styles `width` und `height` setzen. Interessant sind auch die Styles `overflow`, `background-color`, `border` und `box-shadow`. Der Viewer erstellt einen Clone des angegebenen Elements. Daher kann ein Element als Vorlage für mehrere Popups dienen. 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 `<a>`, `<img>` möglich, ggfs. mit Unterelementen. Das referenzierte Element kann innerhalb der HTML-Seite definiert sein. Blockelemente sollten die Styles `width` und `height` setzen. Der Viewer erstellt einen Clone des angegebenen Elements. Daher kann ein Element als Vorlage für mehrere Symbole dienen. 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.
`symbolFunction`	[get; function] Eine JavaScript-Funktion, die beim Klicken auf das Overlay-Symbol aufgerufen werden soll. Optional.
`symbolHref`	[get; string] Die URL einer HTML-Seite, die beim Klicken auf das Overlay-Symbol unmittelbar geöffnet werden soll. Optional.
`symbolImagePan`	[get; number] Wenn `symbolListIndex` gesetzt ist: Gibt die anfängliche horizontale Blickrichtung des neuen Bildes aus der ImageList an. Optional.
`symbolLabel`	[get; boolean] Das Overlay-Symbol soll als Anzeigefeld mit dem Titeltext angezeigt werden. Optional.
`symbolListIndex`	[get; numeric] Der Index des Bildes aus der ImageList des Viewers, das beim Klicken auf das Overlay-Symbol unmittelbar angezeigt werden soll. 0-basiert. Optional.
`symbolPerspective`	[get; boolean] Gibt an, ob das Overlay-Symbol perspektivisch angezeigt werden soll. Default: false.
`symbolRotation`	[get; boolean] Drehwinkel des Overlay-Symbols. Optional. Default: 0.
`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. Alternativ zu `symbolElement` oder `symbolElementId`. Tipp: 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 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.
`fullScreen`	[set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Vergrößern des Viewers auf Bildschirmgröße gezeigt werden soll. Default: true.
`fullWindow`	[set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Vergrößern des Viewers auf Fenstergröße gezeigt werden soll. Default: false.
`helpUrl`	[set, get; string] Gibt eine URL für eine Seite mit einem Hilfstext an - falls gesetzt, aktiviert durch eine interne Hilfe-Schaltfläche.
`helpFunction`	[set, get; function] Funktion, die durch eine interne Hilfe-Schaltfläche aktiviert werden soll.
`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.
`projection`	[set, get; boolean] Gibt an, ob eine interne Schaltfläche zum Umschalten der Projektionsart (flach oder sphärisch) gezeigt werden soll. Default: false.
`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; numeric] Gibt einen Größenfaktor für die internen Schaltflächen an. Wert: 0.7...2; Default: 1.
`titles`	[set, get; string or object] Definiert die erklärenden Texte, die beim Überfahren der Schaltflächen angezeigt werden. Optionen: `auto`: Vordefinierte Texte in der Sprache des Browsers (Default) `en`: Vordefinierte englische Texte `de`: Vordefinierte deutsche Texte `none`: Keine Texte `{ name1: "text1", name2: "text2", ... }` : JS-Objekt mit spezifischen Texten für die Schaltflächen mit folgenden Namen: `reset, videoPause, videoProgress, videoSound, zoomOut, scale100, scaleFit, zoomIn, motionLeft, motionStop, motionRight, browsePrev, browseNext, hotspots, orientation, fullScreen, fullWindow, help, info, closeWindow`
`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 überhaupt angezeigt werden sollen. Default: true.

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

PanoradoJS.actionEnabled

Das Objekt definiert, welche der folgenden Aktionen für den Benutzer freigegeben sind.
Default für alle Aktionen: true.

`pan`	[set, get; boolean] Horizontales Verschieben des Bildausschnitts.
`tilt`	[set, get; boolean] Vertikales Verschieben des Bildausschnitts.
`roll`	[set, get; boolean] Rollen des Bildausschnitts.
`zoom`	[set, get; boolean] Zoomen des Bildausschnitts.
`mouseMode`	[set, get; boolean] Umschalten des Mausmodus.
`compassMode`	[set, get; boolean] Umschalten des Kompassmodus.
`hotspotMode`	[set, get; boolean] Sichtbarkeit aller Hotspots und Overlays.
`video`	[set, get; boolean] Video-Funktionen.
`navigate`	[set, get; boolean] Wechseln des aktuellen Bildes.
`projection`	[set, get; boolean] Umschalten der Projektionsart (flach oder sphärisch).
`fullScreen`	[set, get; boolean] Vergrößern auf volle Bildschirmfläche.
`fullWindow`	[set, get; boolean] Vergrößern auf volle Fensterfläche.
`deviceOrientation`	[set, get; boolean] Steuern des Viewers mittles Lagesensoren und Kompass.
`allMove`	[set, get; boolean] Alle Aktionen zum Verschieben des Bildausschnitts.
`all`	[set, get; boolean] Alle o. g. Aktionen.

PanoradoJS.filters

Über das Objekt können globale optische Filter für den Viewer definiert werden.

brightness [set, get; boolean] Helligkeit. Wert: 0...100; Default: 1.

contrast [set, get; boolean] Kontrast. Wert: 0...100; Default: 1.

saturate [set, get; boolean] Sättigung. Wert: 0...100; Default: 1.

blur [set, get; boolean] Unschärfe (in px). Wert: 0...100; Default: 0.

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>
         let viewer, 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', scale: -1 },
               { src: 'MyFlatImage1.jpg', title: 'Flat Image #1', horzFov: 20, projection: 'flat', scale: -1 }
            ];

            viewer = new PanoradoJS(document.querySelector("#viewerCanvas"));
            viewer.imageList = imgList;
            viewer.selectImage(0);
            viewer.onImageLoaded =
               function() { document.querySelector('#imageTitle').innerHTML = this.image.title; };
            viewer.onDblClick =
               function() { this.zoomToCursor(2); };
            document.querySelector("#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:400px"></canvas>
      <div id="overlay1" style="pointer-events:auto">Hello World!</div>
   </body>
</html>

Panorado JS Technische Referenzv. 2.6.1.14