Menu

4. JavaScript Image API

Using JavaScript, you can have full control over your Micrio images. You can control what the user sees and handle custom events.
The current latest version of the Micrio client is 3.3:
<script src="https://b.micr.io/micrio-3.3.min.js"></script>

4.1. Full JS API documentation

4.1.1. Accessing the instance

You can access a Micrio image in Javascript either by creating it there (see 3.2.3), or referencing a <micr-io> embed like this:

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

4.1.2. JSDoc API Manual pages

Since Micrio 3.2, the JavaScript client is fully typed for JSDoc and has auto-generated documentation.

Click here to go to the 3.3 JSDoc pages

Note: For documentation for Micrio versions older than 3.2, visit the older JS Modules API documentation.

4.1.3. Typescript compatibility

For full TypeScript compatibility, you can use the Micrio type definition .d.ts file by using this file:

https://b.micr.io/micrio-3.3.min.d.ts

4.1.4. Changelog

The version history changelog can be viewed HERE.

4.2. JS Events

A powerful Micrio feature is reading user events.

4.2.1. Binding event handlers

With access to a Micrio JS instance, you can easily bind events like this:

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

image.addEventListener('marker-opened', e => {
	console.log('Marker was opened!', e.detail);
});

4.2.2. All events

All possible Micrio events are listed below

Event name evt.detail value Description

General

metadata Micrio instance Fires when the image data (markers, tours, audio) has been loaded
ready Micrio instance Fires when the Micrio instance has been created and is ready to print
settings JSON Allows you to change the downloaded image settings before parsing
placed Micrio instance Fires when the <canvas> element has been placed in the DOM
loaded Micrio instance The image is fully loaded and ready to start rendering
drawn Micrio instance Fires when the first frame was succesfully drawn
show Micrio instance The Micrio image is loaded and fully shown
hide Micrio instance The Micrio image is hidden

Camera events

zoom Micrio instance The camera has zoomed
move Micrio instance The camera has moved
draw Micrio instance A frame has been drawn

Markers

marker-open Marker instance A marker has been opened and the camera animation is starting
marker-opened Marker instance A marker has been fully opened and the camera is done, and popup shown
marker-close Marker instance A marker starts closing
marker-closed Marker instance A marker has been succesfully closed

Tours

markerTours-start MarkerTour instance A marker tour has been succesfully started
markerTours-step MarkerTour instance Fires for each marker step in a marker tour
markerTours-stop MarkerTour instance A marker tour has been succesfully stopped
markerScrollTours-start MarkerScrollTour instance A marker scrolling tour has been succesfully started
markerScrollTours-stop MarkerScrollTour instance A marker scrolling tour has been succesfully stopped
tours-start Tour instance A video tour has been succesfully started
tours-stop Tour instance A video tour has been succesfully stopped
tour-event TourEvent instance When a video tour has custom events, they will be fired like this

Audio / video

no-autoplay-audio Micrio instance Autoplay audio has been blocked by the browser
autoplay-blocked Micrio instance Fires when there is autoplay audio or video which was disallowed by the browser
can-play-audio Micrio instance Audio has been succesfully instantiated and can be played freely
audio-mute Micrio instance The audio has been muted
audio-unmute Micrio instance The audio has been unmuted

Special cases

update Array<event-types> When there is any user action, this event fires. This event is deferred and will fire at a maximum rate of every 200ms. The evt.details is an array of event types fired within the interval.