DE - Dokumentation Webeinbindung

• Begriffe [DE] | Web Integration
• 360ty Elementor Addon - WordPress Plugin [DE] | Web Integration
• Tourbuilder Web-App [DE] | Web Integration
• iFrame [DE] | Web Integration

Begriffe [DE] | Web Integration

Node

Der Basepath ist die URL auf der die 360° Tour liegt

Hotspot

Ein Hotspot ist der Verbindungspunkt zwischen 2 nodes, der Kreis, der beim Klicken auf die nächste node führt.

FOV

FOV (Field of View) bezeichnet die Zoom variable einer Node. Dies wird in ° angegeben. Der Standardwert liegt dabei bei 65. Je niedriger der Wert, desto näher wird herangezoomt. Die Grenzwerte sind je nach Node und Bildauflösung verschieden aber liegen meistens zwischen 5 und 100.

Tilt

Tilt bezeichnet die vertikale Ausrichtung einer Node. Dies wird in ° angegeben. Die Grenzwerte liegen dabei bei -90 bis 90. Bei -90° schaut man in den Boden und bei 90° in den Himmel. Bei 0° gerade noch vorne.

Pan

Pan bezeichnet die horizontale Ausrichtung einer Node. Dies wird in ° angegeben. Die Grenzwerte liegen dabei bei -360 bis 360. Das Vorzeichen gibt dabei die Richtung an. + = im Uhrzeigersinn, – = gegen den Uhrzeigersinn. +/-90° ist eine viertel Drehung, +/-180° ist eine halbe Drehungung…

Keyframe

Ein Keyframe ist eine ist eine Position, auf die von der vorherigen Position aus gewechselt wird.

Movement/Fly-in

Das Movement/Die Fly-in Bewegung bewegt das Bild beim Aufruf der Node von einer Startposition zu einer Zielposition.

Start Werte

Die Start Werte sind die Positionen, bei der das Movement/die Fly-in Bewegung startet

Target Werte

Die Target Werte sind die Positionen, bei der das Movement/die Fly-in Bewegung endet. Falls kein Movement/ keine Fly-in Bewegung gesetzt ist, sind die Target Werte, die Positionen, auf der die Tour gestartet werden.

Control

Ein Control-Element ist ein Input-Feld in Elementor

360ty Elementor Addon - WordPress Plugin [DE] | Web Integration

installation

WordPress Dashboard

Filebrowser

CLI

Windows

1. 1. 1. Öffne eine Terminalanwendung (z.B.: CMD)
      2. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      3. Gehe zum Plugins Ordner (cd wp-content/plugins)
      4. führe diese Commandline aus:

git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

1. 1. 1. Öffne eine Terminalanwendung (z.B.: Shell)
      2. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      3. Gehe zum Plugins Ordner (cd wp-content/plugins)
      4. führe diese Commandline aus:

git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

1. 1. 1. Öffne eine Terminalanwendung (z.B.: Terminal)
      2. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      3. Gehe zum Plugins Ordner (cd wp-content/plugins)
      4. führe diese Commandline aus:

git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

SSH

Windows

1. 1. 1. Öffne einen SSH Client (z.B.: Putty)
      2. Verbinde dich mit deinem Webserver, auf dem WordPress liegt
      3. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      4. Gehe zum Plugins Ordner (cd wp-content/plugins)
      5. führe diese Commandline aus:

git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

1. 1. 1. Öffne eine Terminalanwendung (z.B.: Shell)
      2. Verbinde dich mit deinem Webserver, auf dem WordPress liegt
      3. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      4. Gehe zum Plugins Ordner (cd wp-content/plugins)
      5. führe diese Commandline aus:

git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

1. 1. 1. Öffne eine Terminalanwendung (z.B.: Terminal)
      2. Verbinde dich mit deinem Webserver, auf dem WordPress liegt
      3. Wechsle zu deinem WordPress Ordner (cd FILEPATH/TO/WORDPRESS)
      4. Gehe zum Plugins Ordner (cd wp-content/plugins)
      5. führe diese Commandline aus:

git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Plugin Guide

Sobald Das Plugin Installiert und Aktiviert wurde, kommt beim Elementor Widget-Panel eine neue Kategorie “360ty” zum Vorschein, in der das 360ty Tourbuilder Widget zu finden ist

Controls

Set values to current Position

Dieser Button setzt die Startposition der Tour die jetzige Position des Previews. Dieser Button ist nur im Elementor Editor zu sehen.
Setzt folgende Control-Werte:

• • • • • Basepath
        • start Node
        • FOV
        • Tilt
        • Pan

Section: Inhalt

Subsection: Tour Options

Basepath

Der Basepath ist die URL, auf der die Tour-Dateien zu finden sind.

start Node

Die start Node gibt an, auf welcher Node die Tour beim Aufruf starten soll. Die start Node kann mit den Value Setter Buttons gesetzt werden.

FOV

FOV(Field of View) gibt den Zoom Wert der Startposition an.

Tilt

Tilt gibt die vertikale Position der Startposition an.

Pan

Pan gibt die horizontale Position der Startposition an.

Subsection: Movement Options​

Delay

Die Zeit in Millisekunden nach dem laden der Tour, nach der das Movement anfängt.

Loop Amount

Wie oft sich die Keyframes wiederholen sollen. Falls der Wert 0 ist, werden die Keyframes ignoriert.

Keyframes

Jeder Keyframe hat ein Position, auf die von dem vorherigen Keyframe gewechselt wurde. Der erste Keyframe wechselt von der start Position der Tour aus

Subsection: Additional Options​

Remove Hotspots

Deaktiviert alle Hotspots. Somit kann in der Panorama Tour nicht die Node gewechselt werden. Zeigt nur die Start Node.

Show share Buttons

Erzeugt einen share Button in der linken unteren Ecke des Elements. Bei Klick auf den share Button werden zwei neue Buttons erzeugt. Einer, der einen link zur aktuellen Position in der Tour in die Zwischenablage kopiert und einen, der ein Fenster öffnet, um die aktuelle Position in der Tour auf Facebook zu teilen.

Show Impressum

Erzeugt einen Link in der rechten unteren Ecke, der zu unserer Website führt.

Section: Stil

Subsection: Tour

Width

Gibt die Weite der Panorama Tour an. Kann in px und % angegeben werden. Falls keine Einheit angegeben wird, werden Pixel (px) genutzt.

Aspect Ratio

Gibt die Aspect Ratio der Panorama Tour an. Werte sind angegeben in x:y, wobei x die angegeben width ist und y daraus berechnet wird.

Custom Aspect Ratio

Kann nur genutzt werden, falls der Control “Aspect Ratio” den Wert “Custom Aspect Ratio” hat.
Hier kann eine benutzerdefinierte aspect ratio eingegeben werden. Format: x[nummer]:y[nummer]

Custom Height

Kann nur genutzt werden, falls der Control “Aspect Ratio” den Wert “Custom Height” hat.
Hier kann eine benutzerdefinierte Höhe für die Panorama Tour eingegeben werden. Kann in px und % angegeben werden. Falls keine Einheit angegeben wird, werden Pixel (px) genutzt.

Horizontal Alignment

Gibt an, wo die Panorama Tour Horizontal innerhalb des Widgets positioniert sein soll.

Subsection: Hotspots

Pulse Color

Setzt die Farbe des Pulses der Hotspots

Tourbuilder Web-App [DE] | Web Integration

Einstellungen / Tourbuilder

Tour-Options

Tour

Basepath

Der Basepath ist die URL, auf der die Tour-Dateien zu finden sind.

Set to current Position

Dieser Button setzt basepath, start Node, FOV, Tilt und Pan auf die jetztige Position des Previews.

start Node

Die start Node gibt an, auf welcher Node die Tour beim Aufruf starten soll.

FOV

FOV(Field of View) gibt den Zoom Wert an, mit welchem die Tour beim Aufruf starten soll.

Tilt

Tilt gibt die vertikale Position an, mit welcher die Tour beim Aufruf starten soll.

Pan

Pan gibt die horizontale Position an, mit welcher die Tour beim Aufruf starten soll.

Addons

Kann individuell für desktop, tablet und mobile eingestellt werden.

Remove Hotspots

Deaktiviert alle Hotspots. Somit kann in der Panorama Tour nicht die Node gewechselt werden. Zeigt nur die Start Node.

Share Buttons

Erzeugt einen share Button in der linken unteren Ecke des Elements. Bei Klick auf den share Button werden zwei neue Buttons erzeugt. Einer, der einen link zur aktuellen Position in der Tour in die Zwischenablage kopiert und einen, der ein Fenster öffnet, um die aktuelle Position in der Tour auf Facebook zu teilen.

Impressum

Erzeugt einen Link in der rechten unteren Ecke, der zu unserer Website führt.

Movement

Falls Keyframes gesetzt wurden, bewegt sich die Tour automatisch zu den gesetzten Keyframes. Das Movement wird abgebrochen, wenn der Nutzer die Tour per Mausklickt selber bewegt. Klicke auf “Run Preview” um eine Vorschau der gesetzen Keyframes zu sehen.

Movement

Loop Amount

Gibt an, wie oft sich die Bewegung zu den Keyframes wiederholen soll. Bei Wert 0 werden alle Keyframes ignoriert und keine Bewegung erzeugt.

Delay

Gibt an, wie lange gewartet werden soll, bevor das Movement nach laden der Tour startet (in Millisekunden).

Keyframes

Jeder Keyframe hat eine Position, zu der vom vorherigen Keyframe aus gewechselt wird. Für den 1. Keyframe wird von der start Position der Tour aus gewechselt.

add Keyframe

Erzeugt einen Keyframe an der jetztigen Position des Previews.

set to current Position

Setzt den Keyframe auf die jetztige Position des Previews.

Node

Die Node auf die der Keyframe wechseln soll.

FOV

Der Zoom Wert auf den der Keyframe wechseln soll.

Tilt

Die vertikale Position auf die der Keyframe wechseln soll.

Pan

Die Horizontale Position auf die der Keyframe wechseln soll.

Movement Speed

Wie schnell die Bewegung stattfinden soll. (x * standartGeschwindigkeit) => x=0.5 -> halb so schnell, x=2 -> doppelt so schnell

Locked Controls

Mit welchen Eingaben der Benutzer das Movement nicht abbrechen kann. Ein Mausklick bricht das Movement immer ab. Falls Klicks trotzdem blockiert sind (all, Mouse), wird das Movement erst abgebrochen, sobald die Bewegung des aktiven Keyframes abgeschlossen ist.

Style

Tour Styles

Kann individuell für desktop, tablet und mobile eingestellt werden.
Klicke auf “update view”, um den style des Previews upzudaten

Width

Breite der Tour. Kann in allen CSS Einheiten angegeben werden (z.B.: %,px,vw,em…)

Aspect Ratio

Höhe der Tour berechnet aus der angegebenen Breite => y = x/(xRatio/yRatio)*

• • • • • • • Custom Ratio: Benutzerdefininierte Aspect Ratio (Fromat: xRatio:yRatio => 3:4)
            • Custom Height: Benutzerdefinierte Höhe. Kann in allen CSS Einheiten angegeben werden (z.B.: %,px,vh,em…). Benutze %%
            • als Einheit um x% der Breite zu benutzen => 20%% -> 20% der angegebenen Breite

Horizontal Alignment

Falls die Breite nicht 100% ist, wo die Tour horizontal liegen soll.

Hotspot Styles

Klicke auf “update view”, um den style des Previews upzudaten

Pulse Color

Farbe des Pulses der Hotspots. Angegeben in HEX-code (z.B.: #FFFFFF -> weiß)

Run Preview

Zeigt, wie die Tour beim Aufruf der Seite aussieht.

Get Code

Platziere das div, wo die Tour eingebunden werden soll.
Falls mehrere Touren auf einer Seite eingebunden werden, müssen die externen scripts und stylesheets nicht nochmal eingebunden werden. Jedoch muss die id des div’s geändert werden, da diese einzigartig sein muss. Die ID muss in der Klassen-Instaziierung ebenfalls geändert werden. -> new Pano(“newID“,…). Ebenfalls muss der variablenname (tour_360ty) geändert werden, da dieser auch einzigartig sein muss.

Head

Code, der in den <head> tag eingefügt wird.

Body

Code, der in den <body> tag eingefügt wird.

 

iFrame [DE] | Web Integration

Wie es Funktioniert

Hier gehts zu unserem Tool für iFrame einbindungen

Bei der iFrame-Einbindung werden Parameter in der URL des “src” tags mitgegeben. Diese Parameter können genutzt werden, um Voreinstellungen der Tour zu setzen.
Falls ein Parameter nicht angegeben wird, wird ein Standartwert benutzt, der in jeder Tour unterschiedlich ist, genutzt.
Die URL Parameter sind case-sensitive!
Beispiel: https://bregenzsommer.360ty.cloud/?Pano=node15&PanoFovStart=18&PanoTiltStart=-13&PanoPanStart=53&PanoPanTarget=-8&PanoTiltTarget=-13&PanoFovTarget=52&MoveSpeed=2.5&MoveDelay=1500&MoveLock=Mousewheel
Nach der URI (hier “https://bregenzsommer.360ty.cloud/”) folgt ein “?”. Ab dem “?” werden die Parameter gelesen. Danach können die Parameter eingesetzt werden. Die Parameter werden durch ein “&” geteilt und die Werte mit einem “=” zugewiesen.

URL Parameter

Position

Pano=node[nummer] -> Anfangs-Node angeben
PanoFovTarget=[number(0 – 100 in °)] ->FOV Wert der Anfangs-Node bzw. Ziel-position der Fly-in Bewegung
PanoTiltTarget = [number(-90 - 90 in °)] -> Tilt Wert der Anfangs-Node bzw. Ziel-position der Fly-in Bewegung
PanoPanTarget=[number(-360 – 360 in °)] -> Pan Wert der Anfangs-Node bzw. Ziel-position der Fly-in Bewegung

Fly-in Bewegung

AutoMove -> Aktiviert das Movement/die Fly-in Bewegung
PanoFovStart=[number(0 – 100 in °)] -> FOV Wert der Zielposition der Fly-in Bewegung
PanoTiltStart=[number(-90 – 90 in °)] -> Tilt Wert der Zielposition der Fly-in Bewegung
PanoPanStart=[number(-360 – 360 in °)] ->Pan Wert der Zielposition der Fly-in Bewegung
MoveLock=[All,Mousewheel,Mouse,Keyboard,Keyboard_Mousewheel] -> verhindert interaktionen mit der Tour während der Fly-in Bewegung, durch den angegeben Typen
MoveDelay=[number in ms] -> startet die Fly-in Bewegung nach dem angegeben Wert in Millisekunden. Standardmäßig 500
MoveSpeed=[number] -> multipliziert die Standardgeschwindigkeit mit dem angegebenen Wert

Hotspots

SingleImage -> Hotspots werden verborgen

Beispiel

<iframe src=`https://bregenzsommer.360ty.cloud/?Pano=node15
        &PanoFovStart=18&PanoTiltStart=-13&PanoPanStart=53&PanoPanTarget=-8
        &PanoTiltTarget=-13&PanoFovTarget=52&MoveSpeed=2.5&MoveDelay=1500&MoveLock=Mousewheel`
        style = “height: 40vh; width: 100%”>
</iframe>