EN - Documentation Web Integration

Terminology [EN] | Web Integration

Node

A node is a 360 ​​° image. The panorama tour consists of nodes that are connected by hotspots.

Hotspot

A hotspot is the connection point between 2 nodes, the circle that leads to the next node when you click it.

FOV

FOV (Field of View) describes the zoom variable of a node. This is given in °. The default value is 70. The lower the value, the closer you zoom in. The limit values ​​vary depending on the node and the image resolution, but are mostly between 5 and 100.

Tilt

Tilt describes the vertical alignment of a node. This is given in °. The limit values ​​are -90 to 90. At -90 ° you look into the ground and at 90 ° you look at the sky. At 0 ° just ahead.

Pan

Pan describes the horizontal alignment of a node. This is given in °. The limit values ​​are -360 to 360. The algebraic sign indicates the direction. + = clockwise, - = counterclockwise. +/- 90 ° is a quarter turn, +/- 180 ° is a half turn ...

Keyframe

A keyframe is a position, which is moved to from the previous position.

Movement/Fly-in

The Movement / Fly-in moves the image from a start position to a target position when the node is called.

Start values

The start values ​​are the positions at which the movement / Fly-in starts

Target Values

The target values ​​are the positions at which the movement / fly-in ends. If no movement / no fly-in is set, the target values ​​are the positions on which the tour is started.

Control

A control element is an input field in Elementor

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

installation

WordPress Dashboard

      1. download the Plugin here 
      2. Navigate to your WeordPress Dashboard -> Plugins
      3. Click on the “Install” button to the right of the “Plugins” heading
      4. At the same place, click on the “Upload Plugin” button, select the downloaded .zip file and click on "install now"
      5. Click on the "activate Plugin" button
      6. Now you should see a new Widget-category called "360ty" in the Elementor Widget-tab.

Filebrowser

      1. download the Plugin here and unzip the .zip file
      2. Navigate to your WordPress folder -> wp-content -> plugins
      3. Paste the extracted folder into the plugins folder
      4. Activate the “360ty Elementor Addon” plugin in your WordPress dashboard -> Plugins -> installed plugins
      5. Now you should see a new Widget-category called "360ty" in the Elementor Widget-tab.

CLI

Windows

      1. Open a terminal (e.g .: CMD)
      2. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      3. Navigate to your plugins folder (cd wp-content/plugins)
      4. execute this Commandline:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

      1. Open a terminal (e.g .: Shell)
      2. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      3. Navigate to your plugins folder (cd wp-content/plugins)
      4. execute this Commandline:
git clone https://github.com/Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

      1. Open a terminal (e.g .: CMD)
      2. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      3. Navigate to your plugins folder (cd wp-content/plugins)

      4. execute this Commandline:

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

SSH

Windows

      1. open an SSH Client (e.g .: Putty)
      2. Connect to your web server on which WordPress is located
      3. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      4. Navigate to your plugins folder (cd wp-content/plugins)
      5. execute this Commandline:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Linux

      1. Open a terminal (e.g .: Shell)
      2. Connect to your web server on which WordPress is located
      3. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      4. Navigate to your plugins folder (cd wp-content/plugins)
      5. execute this Commandline:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Mac-OS

      1. Open a terminal (e.g .: CMD)
      2. Connect to your web server on which WordPress is located
      3. Change to your WordPress directory(cd FILEPATH / TO / WORDPRESS)
      4. Navigate to your plugins folder (cd wp-content/plugins)
      5. execute this Commandline:
git clone ssh://git@github.com:Jonas-360ty/360ty_Elementor_Addon_Plugin.git

Plugin Guide

As soon as the plugin has been installed and activated, a new category “360ty” appears in the Elementor widget panel, in which the 360ty Tourbuilder widget can be found

Controls

With the middle mouse button (keep mouse wheel pressed) you can move around in the panorama tour. The scrolling of the mouse wheel is used to zoom. You can left-click on hotspots to change nodes.

Set values to current Position

This button sets the start position of the tour the current position of the preview. This button can only be seen in the Elementor Editor.
Sets following Control-values:

Set to current Values Picture

Section: Content

Subsection: Tour Options

Basepath

The basepath is the URL on which the tour files can be found on.

start Node

The start node indicates on which node the tour should start when called. The start node can be set with the value setter buttons.

FOV

FOV (Field of View) indicates the zoom value of the start position.

Tilt

Indicates the vertical position of the start position

Pan

Indicates the horizontal postion of the start position

Subsection: Movement Options​

Delay

The time in milliseconds after loading the tour after which the movement begins.

Loop Amount

How often the keyframes should repeat. If the value is 0, the keyframes are ignored.

Keyframes

Each keyframe has a position, which is moved to from the previous Keyframe. The first Keyframe moves from the start position

Subsection: Additional Options​

Remove Hotspots

Deactivates all hotspots. This means that the node cannot be changed in the Panorama Tour. Only shows the start node.

Show share Buttons

Creates a share button in the lower left corner of the element. When you click on the share button, two new buttons are created. One that copies a link to the current position in the tour to the clipboard and one that opens a window to share the current position of the tour on Facebook.

Show Impressum

Creates a link in the lower right corner leading to our website 

Section: Style

Subsection: Tour

Width

Indicates the width of the panorama tour. Can be specified in px and%. If no unit is specified, pixels (px) are used.

Aspect Ratio

Specifies the aspect ratio of the panorama tour. Values ​​are given in x: y, where x is the given width and y is calculated from it.

Custom Aspect Ratio

Can only be used if the control “Aspect Ratio” has the value “Custom Aspect Ratio”.
A user-defined aspect ratio can be entered here. Format: x [number]: y [number]

Custom Height

Can only be used if the “Aspect Ratio” control has the value “Custom Height”.
A user-defined height for the panorama tour can be entered here. Can be specified in px and %. If no unit is specified, pixels (px) are used.

Horizontal Alignment

Specifies where the panorama tour should be horizontally aligned within the widget.

Subsection: Hotspots

Pulse Color

Sets the color of the pulse of the hotspots

Tourbuilder Web-App [EN] | Web Integration

Settings / Tourbuilder

Tour-Options

Tour

Basepath

The basepath is the URL on which the tour files can be found on.

Set to current Position

This button sets basepath, start node, FOV, Tilt and Pan to the current position of the preview.

start Node

The start node indicates on which node the tour should start when called.

FOV

FOV (Field of View) indicates the zoom value with which the tour should start when called.

Tilt

Tilt indicates the vertical position with which the tour should start when called.

Pan

Pan indicates the horizontal position with which the tour should start when called.

Addons

Can be set individually for desktop, tablet and mobile.

Remove Hotspots

Deactivates all hotspots. This means that the node cannot be changed in the Panorama Tour. Only shows the start node.

Share Buttons

Creates a share button in the lower left corner of the element. When you click on the share button, two new buttons are created. One that copies a link to the current position in the tour to the clipboard and one that opens a window to share the current position of the tour on Facebook.

Impressum

Movement

If keyframes have been set, the tour automatically moves to the set keyframes. The movement is canceled if the user moves the tour himself with a click of the mouse. Click on “Run Preview” to see a preview of the set keyframes.

Movement

Loop Amount

Specifies how often the movement should repeat itself. If the value is 0, all keyframes are ignored and no movement is generated.

Delay

Specifies how long to wait before the movement starts after loading the tour (in milliseconds).

Keyframes

Each keyframe has a position to moveto from the previous keyframe. For the 1st keyframe, the tour move from the start position.

add Keyframe

Generates a keyframe at the current position of the preview.

set to current Position

Sets the keyframe to the current position of the preview.

Node

The node to which the keyframe should move to.

FOV

The zoom value to which the keyframe should move to.

Tilt

The vertical position to which the keyframe should move to.

Pan

The horizontal position to which the keyframe should move to.

Movement Speed

How fast the movement should take place. (x * standard speed) => x = 0.5 -> half as fast, x = 2 -> twice as fast

Locked Controls

The gestures with which the user cannot cancel the movement. A mouse click always aborts the movement. If clicks are still blocked (all, mouse), the movement is only canceled as soon as the movement of the active keyframe has been completed.

Style

Tour Styles

Can be set individually for desktop, tablet and mobile.

Click on “update view” to update the style of the preview

Width

Width of the tour. Can be specified in all CSS units (e.g .:%, px, vw, em ...)

Aspect Ratio

Height of the tour calculated from the specified width => y = x / (xRatio / yRatio) *

Horizontal Alignment

If the width is not 100%, where the tour should be horizontally aligned.

Hotspot Styles

Click on “update view” to update the style of the preview

Pulse Color

Color of the pulse of the hotspots. Specified in HEX code (e.g .: #FFFFFF -> white)

Run Preview

Shows what the tour looks like when the page is called.

Get Code

Place the div where the tour should be embedded.
If several tours are integrated on one page, the external scripts and stylesheets do not have to be integrated again. However, the id of the div has to be changed because it has to be unique. The ID must also be changed in the class instantiation. -> new Pano ("newID", ...). The variable name (tour_360ty) must also be changed, as this has to be unique too.

Head

Code that is inserted into <head> the tag.

Body

Code that is inserted into the <body> tag.

 

iFrame [EN] | Web Integration

How it works

Here you can find our Tool for iFrame embeds.

With the iFrame integration, parameters are given in the URL of the “src” tag. These parameters can be used to set customized settings for the tour.
If a parameter is not specified, a standard value is used, which is different in each tour.
The URL parameters are case-sensitive!
Example: 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
After the URI (here "https://bregenzsommer.360ty.cloud/”) follows a “?”. After the "?" the parameters are read. Then the parameters can be used. The parameters are divided by an “&” and the values ​​are assigned with an “=”.

URL Parameter

Position

Pano=node[nummer] -> set start-node
PanoFovTarget=[number(0 – 100 in °)] -> FOV value of the start node or target FOV position of the fly-in movement
PanoTiltTarget = [number(-90 - 90 in °)] -> Tilt value of the start node or vertical target position of the fly-in movement
PanoPanTarget=[number(-360 – 360 in °)] -> Pan value of the start node or horizontal target position of the fly-in movement

Fly-in

AutoMove -> Activates the movement / fly-in
PanoFovStart=[number(0 – 100 in °)] -> FOV value of the start position of the Fly-in
PanoTiltStart=[number(-90 – 90 in °)] -> Tilt value of the target position of the fly-in
PanoPanStart=[number(-360 – 360 in °)] -> Pan value of the target position of the fly-in
MoveLock=[All,Mousewheel,Mouse,Keyboard,Keyboard_Mousewheel] -> prevents interactions with the tour during the fly-in motion, by the specified type
MoveDelay=[number in ms] -> starts the fly-in according to the specified value in milliseconds. Default 500
MoveSpeed=[number] -> multiplies the standard speed with the specified value

Hotspots

SingleImage -> hides hotspots

Example

<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>