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

            • Custom Ratio: User-defined aspect ratio (format: xRatio: yRatio => 3: 4)
            • Custom Height: Custom height. Can be specified in all CSS units (e.g .:%, px, vh, em ...). Use %% as a unit to use x% of the
            • width => 20 %% -> 20% of the specified width
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.