<dl8-tour>

With the <dl8-tour> element you can effortlessly integrate an interactive tour consisting of multiple viewpoints and connected via so called portals in your website. The <dl8-tour> element is the root element and therefore the entry point for defining an interactive tour. It makes use of child elements to describe the actual tour images (or probes) as well as the portals that connect probes with each other. Thus it works much like any other nested DOM structure. The <dl8-tour> element follows the common Delight VR API. See below for an example and all tour specific attributes and child elements.

 <dl8-tour poster="poster.jpg" title="Example Tour 1" author="John Doe"
           start-probe-id="living-room">

    <dl8-tour-img probe-id="bathroom" title="Bathroom" format="STEREO_360_TB"
                  src="bathroom.jpg">
      <dl8-tour-portal to="living-room" lat="0" lon="270" distance="1.5"
                  title="Enter Living Room"></dl8-tour-portal>
    </dl8-tour-img>

    <dl8-tour-img probe-id="living-room" title="Living Room"
                  format="STEREO_360_TB" src="bathroom.jpg">
      <dl8-tour-portal to="bathroom" lat="0" lon="90" distance="1"
                  title="Go to Bathroom"></dl8-tour-portal>
    </dl8-tour-img>

  </dl8-tour>

start-probe-id="<string>" [optional]

Defines the id of the <dl8-tour-img> element that should be the starting point of the tour. This id must match one probe-id of a <dl8-tour-img> child element. If nothing is set the first <dl8-tour-img> will be the start of the tour.

<dl8-tour-img>

The <dl8-tour-img> describes one of the probes the tour is comprised of. It has the following attributes that can be set:

probe-id="<string>" [mandatory]

A unique freely definable id within the scope of the <dl8-tour> that is used throughout the scope of the <dl8-tour> parent element to reference to this probe.

format="<string>" [mandatory]

The image format that should be used for this specific probe. Please note that you can mix and match multiple format types for each of the defined <dl8-tour-img> elements that are part of the <dl8-tour> parent element. See the image element format API for further information.

title="<string>" [optional]

The title string of the probe. This will be used as the player headline when viewing this probe and will further be used as the pop-over text on a portal, when hovered, and when the portal’s “title” attribute is not set.

src="<uri>" [mandatory]

The image src URI to use. You can optionally provide src-left and src-right to separately define the image for each eye in VR.

rotation-y="<number>" [optional]

The angle in degrees of rotation of the probe around the y-axis (up-axis). This attribute can be used in case the probes comprising the tour were not completely aligned and the initial relative rotations of probes have to be adjusted. The default is 0 degrees.

<dl8-tour-portal>

The <dl8-tour-portal> element describes a portal or “hotspot” that connects the parent <dl8-tour-img> with another <dl8-tour-img> and thus forms a portal between those two. It can be placed in a polar coordinate fashion using latitude/longitude and distance. It supports the following attributes:

to="<string>" [mandatory]

Defines the “probe-id” of any <dl8-tour-img> within the scope of the parent <dl8-tour> element to which the portal should lead to. Please note that self referencing probe ids are not possible and will be ignored.

title="<string>" [optional]

The title string of the portal. This will be used in the pop-over text on a portal when it is hovered. Example usages could be “Enter Bathroom” or “Go to Outside”.

lat="<number>" [optional]

The latitude angle in degrees where the portal should be placed.

lon="<number>" [optional]

The longitude angle in degrees where the portal should be placed.

distance="<number>" [optional]

The distance in meters from the viewer to where the portal should be placed. The default is 1 meter.