Menu

5. JavaScript Modules API

This section documents how to control Micrio modules: Markers, Marker Tours, Tours, and Audio.
The current latest version of the Micrio client is 1.8:
<link rel="stylesheet" type="text/css" href="https://b.micr.io/micrio-1.8.min.css" />
<script src="https://b.micr.io/micrio-1.8.min.js"></script>

5.1. The Micrio.Modules class

The Micrio.Modules class contains all functionality relating to the minimap, markers, tours, and audio.

5.1.1. Properties

Property Type Description
markers Markers A reference to the Markers controller object
markerTours Array of MarkerTours A reference to the MarkerTours objects
minimap MiniMap A reference to the MiniMap controller object
navigator Navigator A reference to the Navigator controller object
tours Array of Tours A reference to the Tour objects

5.1.2. Methods

Method Description
mute() Mute all audio for this image
unmute() Unmute/resume all audio for this image

5.1.3. Events

All events are fired on the Micrio container element.

Event name Description
metadata Fires when all image module metadata (markers, tours, audio) has been loaded

5.2. The Markers class

This class is the controller for all Markers that have been added to the image in the editor.

5.2.1. Properties

Property Type Description
_container HTML Element The DOM marker container element
items Array of markers An array of all existing markers

5.2.2. Methods

Method Description
place() Places all markers on the image
remove() Removes all markers from the image
addItem(marker) Add a new marker to the image

5.3. The Marker class

This class controls the individual markers in your image.

5.3.1. Properties

Property Type Description
_container HTML Element Gets the marker HTML container element
_marker HTML Element Gets the marker HTML marker icon element
audio String The marker audio URL when entered
body String The marker body text
class String Any custom class names entered in the editor
data Object Any custom JSON added to the marker
html String Any custom HTML added to the marker in the editor
iconUrl URL Gets or sets the icon image URL to use as marker icon
images Array An array of image URLs added to the marker in the editor
json Object All marker data from the editor
onbeforeopen Function Gets or sets the function to call when the marker is opened, but the camera hasn't started animating yet
onbeforeclose Function Gets or sets the function to call at the start of the marker closing handling
onclose Function Gets or sets the function to call when the marker is closed
onflownto Function Gets or sets the function to call when the camera animation to the marker view has finished
onopen Function Gets or sets the function to call when the marker is opened
opened Boolean Returns whether the marker is opened or not
popup Popup controller The marker main popup controller object
popups Array of Popups All marker popup controllers
title String The marker title
view Viewport The viewport to zoom to when the marker is opened

5.3.2. Methods

Method Description
close() Close the marker
open() Open the marker
draw() Force an individual marker draw action
addPopup(popup) Add an individual Popup to this marker

5.3.3. Events

All events are fired on the main Micrio container element (<micrio>). The reference to the marker object is the argument event.detail.

Event name Description
marker-closed Fires when this marker has been closed
marker-open Fires when this marker has been opened
marker-opened Fires when this marker has been opened and the camera has flown to its viewport

5.4. The Marker.Popup class

The Popup class contains all functionality relating to marker popup windows.

5.4.1. Properties

Property Type Description
_audio HTML Element Returns the marker audio HTML5 element if entered
_body HTML Element Gets the popup body contents element
_container HTML Element Gets the popup container container element
_content HTML Element Gets the popup main content element
_html HTML Element Gets the popup custom HTML container element
_images HTML Element Gets the popup images container element
_title HTML Element Gets the popup title element
onclose Function Gets or sets the function to call when the popup is closed
onopen Function Gets or sets the function to call when the popup is opened

5.4.2. Methods

Method Description
close() Close the popup
open() Open the popup

5.5. The MarkerTour class

The MarkerTour class contains all functionality relating to the marker tours.

A Marker Tour itself is no more than a sequence of marker IDs coming from the editor. This class allows you to stop and start a marker tour.

5.5.1. Properties

Property Type Description
_controls HTML Element The HTML controls element shown when the tour is running (previous, next, steps)
steps Array of Markers Returns the ordered list of all the tour Marker steps
onstart Function Gets or sets the function to call when the tour is started
onstop Function Gets or sets the function to call when the tour is stopped

5.5.2. Methods

Method Description
goto(step (index int)) Open the specified step in the tour
next() Go to the next step in the tour
prev() Go to the previous step the tour
start() Start the tour
stop() Stop the tour

5.5.3. Events

All events are fired on the main Micrio container element (<micrio>). The reference to the marker-tour object is the argument event.detail.

Event name Description
markerTours-start Fires when this tour has been started
markerTours-stop Fires when this tour has been stopped

5.6. The MiniMap class

The MiniMap class contains all functionality relating to the minimap navigator of the image.

5.6.1. Properties

Property Type Description
_el HTML Element The minimap HTML container element

5.6.2. Methods

Method Description
draw Force a redraw of the minimap
hook Hook the minimap to the image navigation
hookEvents Hook user event listeners (zoom, pan)
remove Remove the minimap
show Place the minimap
unhook Unhook the minimap to the image navigation
unhookEvents Unhook user event listeners (zoom, pan)

5.7. The Navigator class

The Navigator class contains all functionality relating to navigating from one image to another.

With Micrio, you can navigate between images inside the same Micrio instance. You can even switch from 360° images to 2D images. When you navigate to another image, any playing audio, including music, also switches to the new image.

5.7.1. Properties

This class has no relevant public properties.

5.7.2. Methods

Method Description
goto(id) Navigate to Micrio image with id id
getCurrent() Returns the current active Micrio image

5.8. The Tours class

A Tour class controls a video tour made in the editor.

This is a sequence of viewports put out over a timeline, with an optional single audio file. Once a tour is started, no user interaction is required to finish it.

5.8.1. Properties

Property Type Description
_controls HTML Element The controller HTML element container
data Object JSON tour data from the editor
timeline Array The parsed timeline metadata used for the tour
playing Boolean Returns true if the tour is currently playing
paused Boolean Returns true if the tour is currently paused
onchange Array of functions Get or set the functions that are called when a tour step is changed
onstart Function Gets or sets the function that's called when the tour is started
onstop Function Gets or sets the function that's called when the tour is stopped

5.8.2. Methods

Method Description
hook() Hooks the input event listeners to the control HTML elements (start/stop/pause buttons and interactive timebar)
pause() Pauses the running tour
start() Starts the tour
stop() Stops the tour
unhook() Unhooks the input event listeners to the control HTML elements (start/stop/pause buttons and interactive timebar)

5.8.3. Events

All events are fired on the main Micrio container element (<micrio>). The reference to the tour object is the argument event.detail.

Event name Description
tours-start Fires when this tour has been started
tours-stop Fires when this tour has been stopped
By Marcel Duin, marcel@q42.nl - Last modified: 08/17/2017