Schwarzatal.org

Pano360

Hauptseite > Schwarzatal.org


Diese Seite beschreibt das Gadget Pano360, mit dem sich 360-Grad-Panoramen (Kugelpanoramen) direkt in Wiki-Seiten einbetten lassen. Die Panoramen lassen sich mit Maus oder Finger drehen, neigen und zoomen und können im Vollbild angezeigt werden.

Technische Grundlage ist die freie JavaScript-Bibliothek Pannellum (MIT-Lizenz), die lokal auf dem Server gehostet wird. Es werden keine externen Dienste eingebunden.

Schnellstart

Ein hochgeladenes Panoramabild einbinden: 

<div class="pano360" data-src="Datei:Beispiel Panorama.jpg">
360°-Panorama (benötigt JavaScript)
</div>

Der Text im <div> ist ein Ersatztext, der nur angezeigt wird, falls JavaScript deaktiviert ist oder das Gadget nicht lädt.

Voraussetzungen an das Bild

Das Gadget zeigt equirektangulare Panoramen an – das Standardformat jeder 360°-Kamera und der meisten Panorama-Apps. Zwei Dinge müssen stimmen:

  • Seitenverhältnis exakt 2:1 (z.B. 8192 × 4096 oder 4096 × 2048 Pixel).
 Bilder mit anderem Verhältnis werden verzerrt dargestellt.
  • Breite nicht zu groß wählen. Für zuverlässige Darstellung auch auf
 Tablets und Smartphones sollte die Bildbreite möglichst bei ca. 4096 Pixeln
 liegen. Größere Bilder (8192 px) funktionieren auf den meisten Geräten, können
 auf älteren Mobilgeräten aber schwarz bleiben (Grenze der Grafik-Textur).

Zum Hochladen Spezial:Hochladen verwenden und auf der Dateibeschreibungsseite Quelle und Lizenz angeben. Sehr große Dateien scheitern eventuell an den Upload-Grenzen des Servers – dann Bild verkleinern.

Alle Optionen (data-Attribute)

Gesteuert wird das Panorama über data--Attribute am <div>:

Attribut Pflicht Bedeutung
data-src ja Bildquelle. Entweder ein Wiki-Dateiname (Datei:X.jpg, File:X.jpg oder X.jpg) oder eine vollständige URL bzw. ein absoluter Pfad.
data-height nein Höhe der Anzeige in Pixeln. Standard: 400 (per CSS).
data-yaw nein Horizontale Start-Blickrichtung in Grad (−180 bis 180).
data-pitch nein Vertikale Start-Blickrichtung in Grad (−90 bis 90).
data-hfov nein Start-Blickwinkel (Zoom) in Grad. Kleiner = näher herangezoomt. Standard 100.
data-autorotate nein Automatische Drehung in Grad pro Sekunde, z.B. 2. Negativer Wert dreht andersherum.
data-preview nein Vorschaubild, das während des Ladens angezeigt wird (Dateiname oder URL).
data-title nein Titel, der im Viewer eingeblendet wird.
data-author nein Urheber, der im Viewer eingeblendet wird.
data-compass nein 1 blendet einen Kompass ein.
data-north nein Nordausrichtung in Grad (für den Kompass): in welche Blickrichtung Norden liegt.

Beispiele

Mit fester Höhe, Titel und langsamer Selbstdrehung: 

<div class="pano360" data-src="Datei:Gipfel Schwarzakopf.jpg"
     data-height="450" data-title="Gipfel Schwarzakopf"
     data-author="Max Mustermann" data-autorotate="2">
360°-Panorama
</div>

Mit definierter Startblickrichtung (Blick nach Südwesten, leicht nach unten) und Kompass: 

<div class="pano360" data-src="Datei:Aussicht.jpg"
     data-yaw="-135" data-pitch="-10" data-compass="1" data-north="0">
360°-Panorama
</div>

Bild von einer externen Adresse statt aus dem Wiki: 

<div class="pano360" data-src="https://example.org/pano/berg.jpg">
360°-Panorama
</div>

Installation

Das Gadget besteht aus vier Bausteinen. Nötig sind FTP-Zugang zum Server und Administrationsrechte im Wiki.

1. Pannellum-Bibliothek hochladen

Das aktuelle Release Pannellum 2.5.6 von GitHub herunterladen und aus dem Ordner build/ zwei Dateien per FTP ablegen: 

<Wiki-Wurzel>/resources/lib/pannellum/pannellum.js
<Wiki-Wurzel>/resources/lib/pannellum/pannellum.css

<Wiki-Wurzel> ist das Verzeichnis, in dem auch index.php liegt. Zur Kontrolle die JS-Datei direkt im Browser aufrufen – es muss JavaScript-Quelltext erscheinen, kein 404-Fehler.

2. Gadget-Code anlegen

Den JavaScript-Code auf der Seite MediaWiki:Gadget-Pano360.js speichern (der vollständige, aktuelle Code liegt dort) und die zugehörige Gestaltung auf MediaWiki:Gadget-Pano360.css: 

.pano360 {
	width: 100%;
	height: 400px; /* Standardhöhe, per data-height überschreibbar */
	margin: 0.5em 0;
	border: 1px solid #a2a9b1;
	border-radius: 2px;
	background: #f8f9fa;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #54595d;
	overflow: hidden;
}

3. Gadget registrieren

In MediaWiki:Gadgets-definition diese Zeile ergänzen: 

* Pano360[ResourceLoader|default|dependencies=mediawiki.util]|Pano360.js|Pano360.css

default bedeutet: für alle Leserinnen und Leser aktiv, auch ohne Anmeldung. Die Abhängigkeit mediawiki.util braucht das Gadget zum Auflösen der Bild-Adressen.

4. Panoramabild hochladen

Ein equirektangulares Bild (Seitenverhältnis 2:1) über Spezial:Hochladen hochladen. Danach wie oben per <div class="pano360"> einbinden.

So funktioniert es

Beim Laden einer Seite sucht das Gadget nach Elementen mit der Klasse pano360. Findet es welche, lädt es Pannellum genau einmal aus /resources/lib/pannellum/ nach und startet für jeden Container einen Viewer. Die Bildquelle wird so aufgelöst: Beginnt data-src mit http oder /, wird sie unverändert als Adresse verwendet; andernfalls gilt der Wert als Wiki-Dateiname, der über Spezial:Weiterleitung/file/… zur Originaldatei führt. Die Panoramen laden sofort beim Seitenaufruf.

Auf anderen Wikis nachbauen

Das Gadget hat außer Pannellum keine weiteren Abhängigkeiten (kein Three.js o.ä.), was den Nachbau einfach macht. Nötig ist:

  1. Die Erweiterung Gadgets muss aktiviert sein.
  2. Die zwei Pannellum-Dateien nach /resources/lib/pannellum/ hochladen (Schritt 1). Liegt das Ziel-Wiki in einem Unterverzeichnis, ist das kein Problem – das Gadget setzt den Pfad automatisch relativ zur jeweiligen Installation zusammen.
  3. Den Inhalt von MediaWiki:Gadget-Pano360.js und MediaWiki:Gadget-Pano360.css in die gleichnamigen Seiten des Ziel-Wikis kopieren.
  4. Die Registrierungszeile in MediaWiki:Gadgets-definition eintragen (Schritt 3).

Ein anderer Speicherort für die Bibliothek lässt sich im Gadget-Code oben in der Variablen LIB_PATH anpassen.

Fehlersuche

Wird kein Panorama angezeigt, hilft die Browser-Konsole (in Firefox: Menü → Weitere Werkzeuge → Web-Entwicklerwerkzeuge → Konsole) und diese Reihenfolge:

  • Lädt die Bibliothek? Die Adresse …/resources/lib/pannellum/pannellum.js direkt im Browser öffnen. Erscheint ein 404, liegt die Datei am falschen Ort.
  • Lädt das Bild? Die Adresse …/index.php?title=Special:Redirect/file/<Dateiname> direkt öffnen. Erscheint das Bild nicht, stimmt der Dateiname in data-src nicht.
  • Bild verzerrt? Das Bild ist nicht im Verhältnis 2:1.
  • Auf dem Handy schwarz, am PC nicht? Das Bild ist für das Gerät zu groß – Breite reduzieren (siehe „Voraussetzungen an das Bild").
  • Meldung „Viewer konnte nicht geladen werden"? Die Bibliothek wurde nicht gefunden – Pfad aus Schritt 1 prüfen.

Lizenz

Die Bibliothek Pannellum steht unter der MIT-Lizenz. Für die eingebundenen Panoramabilder gilt jeweils die auf ihrer Dateibeschreibungsseite angegebene Lizenz.

Abgerufen von „https://schwarzatal.org/index.php?title=Pano360&oldid=998“