WARNING: This documentation is for older Micrio client versions (pre 3.2), and is no longer updated. For the most up-to-date version, go to the v4 JS API documentation for documentation on markers, tours and audio.

1. The Micrio class

You can create or access existing Micrio images using Javascript. The Micrio object is the basis for accessing the camera, events, and marker classes.

Accessing the JS instance

You can access a Micrio image in Javascript by referencing a <micr-io> embed like this:

let image = document.getElementById('your-micrio-id').micrio;

Properties

Methods

Events

2. The Camera class

Properties

Methods

Events

These events are fired on the Micrio JS instance (not the HTML element)

micrioInstance.addEventListener('move', e => {
	console.log('Current viewport:', e.detail);
});

3. The Camera.Events class

This class contains all the internal Micrio event handlers for user interactions (mouse and touch).

Properties

This class has no relevant public properties.

Methods

4. The Micrio.Modules class

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

Properties

Events

All events are fired on the Micrio container element.

5. The Markers class

Properties

Methods

6. The Marker class

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

Properties

Methods

Events

7. The Marker.Popup class

Properties

	<tr>
		<td><code>onclose</code></td>
		<td>Function</td>
		<td>Gets or sets the function to call when the popup is closed</td>
	</tr>
	<tr>
		<td><code>onopen</code></td>
		<td>Function</td>
		<td>Gets or sets the function to call when the popup is opened</td>
	</tr>
</tbody>

Methods

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

Methods

Events

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

9. The MiniMap class

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

Properties

Methods

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

Properties

This class has no relevant public properties.

Methods

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

Properties

Methods

Events

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