VTS Browser Presenter API

VTS Browser Presenter API

This module provides methods for creating basic presentations.

Note: the URLs used in the examples currently do not work.

Usage Example

// First define the map we want to present on and then add attributes for presentation. That's it, really that easy.
var map = new vts.browser('map-div', {
    position: ["obj",14.824728,50.291323,"float",0,-17,-67,0.00,219,90],
    map: "https://cdn.melown.com/mario/store/melown2015/map-config/melown/Bentky-nad-Jizerou/mapConfig.json",
    presenter : {
        'presenation01' : 'presenation01.html',
        'presenation02' : 'presenation02.html'
    },
    presenterAutoplay : 'presenation01'
});

Presenter options

You can specify configuration for presentations directly upon creation of the vts.browser() object, as shown in the example above.

Config attributes:

Option	Type	Default	Necessary	Description
presenter	Object	null	Yes	Defines names and sources of particular presentations. See examples just below this table.
presenterAutoplay	String	null	No	Defines which presentation will start playing automatically on load.

// Examples of 'presenter' object

presenter : {
    'name-of-presentation' : 'url-to-HTML-structure',
    'another-name' : 'you-can-use-id-of-element-in-page',
    'even-another' : 'or-you-can-use-string-directly'
}

You can also control presentations by the Presenter interface. The presenter interface is obtained by calling the getPresenter() method on the browser object.

Presenter methods

Method name	Type	Default	Description
addPresentation(id, src)	String, String	null	Adds new presentation to the object. First argument takes name of the presentation, second argument takes its HTML structure. The second argument 'src' can be: URL, ID of DOM object on the page or String with direct HTML input. See examples below for more info.
removePresentation(id)	String	null	Removes particular presentation from object. If called without id, removes all presentations.
listPresentations(id)	String	null	Lists all available presentations added to the object. If 'id' is specified, returns source of that particular presentation.
playPresentation(id)	String	null	Plays particular presentation. If 'id' is not specified, 'presentation_autoplay' will start playing. If even that is not specified, first presentation in the list will start playing.
stopPresentation()			Stops currently playing presentation.
activePresentation()			Returns 'id' of presentation being played.

Default setup

When you call vts.browser(), object it creates already contains structure for presentations, inheriting given config, therefore you can simply use that object and append presentations directly to it (as represented in example below) or specify them in the config input (as seen in usage example). The presentations object is then held in object.presentation_ .

Presentation examples

// First define map we want to present on
var browser = new vts.browser('map-div', {
    position: ["obj",14.824728,50.291323,"float",0,-17,-67,0.00,219,90],
    map: "https://cdn.melown.com/mario/store/melown2015/map-config/melown/Bentky-nad-Jizerou/mapConfig.json"
});

// Then build a presentation from HTML source
var presenter = browser.getPresenter();
presenter.addPresentation('presenation01', 'presenation01.html');
presenter.playPresentation('presenation01');
// here we can also call just presenter.playPresentation() which
// invokes playing the first presentation in the list
// Now to stop playing that presentation, just call stopPresentation()
presenter.stopPrensetation();
// Add another presentation which will get its source HTML from
// an element on the page defined by #anotherPresentation id
// (e.g.: <div id="anotherPresentation"></div> )
// and return list of all available presentations so far
presenter.addPrensentation('test', '#anotherPresentation');
presenter.listPresentation();

How to correctly create a structure for your presentation

The basic structure of your presentation should be created from the followings:

<article>
    <section>
        <p></p>
    </section>
</article>

You can add several elements, which are styled by default. These are:

<article>
    <section>
        <h3>Big title</h3>
        <h4>Smaller title</h4>
        <img src="yourPicture.jpg">
        <p>Basic paragraph line for text</p>
        <b>Bold text</b>
        <a>Basic link to move around the presentation</a>
    </section>
</article>

Particular elements have also several attributes that define how the presentation looks and behave. These are:

<article data-mln-style="right|wide" data-mln-title="Title of the presentation">
        <section data-mln-position="obj, 15.2500670708541, 41.6946680855224, fixed, 220.0, -1.16302, -33.8188, 0, 1200000.0, 90.0" data-mln-transition="null|teleport" data-mln-style="title|full|mini">
                <h4>Some small title</h4>
        </section>
        <section data-mln-position="obj, 15.2500670708541, 41.6946680855224, fixed, 220.0, -1.16302, -33.8188, 0, 1200000.0, 90.0" data-mln-transition="null|teleport" data-mln-style="title|full|mini">
                <p>Check out 
                <a data-mln-navigate="first|last|next|prev|#id" data-mln-position="obj, 16.7131739505968, 40.0099398653073, fixed, 220.0, -0.44302, -30.7241, 0.0, 1118180, 90.0" data-mln-autorotate="-0.5"><b>this link</b></a>
                </p>
        </section>
</article>

And in continuity of above structure, take a look at these data-mln types you can specify :

Type	Where to put it	Options	Description
data-mln-style	<article>	[right, wide]	Defines whether you want the presentation to look as a panel on the right side of the page or as subtitles at the bottom of the page.
data-mln-title	<article>	none	Used to describe the presentation purpose. You should put here some meaningful text only.
data-mln-position	<section>, <a>	Options based on VTS Browser Autopilot API flyTo() function	Defines where should the presentation translate itself. If defined in <section>, it is considered as a default view position upon entering the section. If defined in <a>, it is considered as a flyTo() position upon click.
data-mln-transition	<section>, <a>	[null, teleport]	Used to define how transition between views is handled. By default you don't have to define data-mln-transition at all. If you define it as "teleport", instant move to desired location is preformed.
data-mln-autorotate	<section>, <a>	Float	Used to describe whether or not the view should automatically rotate around specified view.
data-mln-navigate	<a>	[first, last, next, prev, #id]	Used to navigate around presentation using steps. You can fly to first and last page of the presentation or step to next/previous one. Or you can insert step number and get to that particular section from anywhere.
data-mln-style	<section>	[full, title, mini]	Used to define the size of subtitles. Full is stretched to the whole screen, title goes as normal subtitle and mini is just a little button in the middle of the screen.