Micrio Knowledge Base

Appearance

Micrio client Events API Client 3.x ​

WARNING

This page is about the Micrio client version 3. Use the links below to navigate to newer versions.

To fully integrate the Micrio client into your website, you can use the Events API to hook to internal and user actions.

HTML Events vs JS instance events ​

Most of the regular Events fire on the <micr-io> HTML element itself. So for instance, if you want to listen to a marker-opened event, you can do this:

js
// Your HTML element reference
const image = document.querySelector('micr-io');

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

Micrio instance specific events ​

Because of a high firing frequency of some events, not all do not fire on the HTML element, but on the Micrio JS instance. This is done for performance reasons.

An example of this is the draw event, which fires for each frame that is drawn. To read this event, you need to add the event listener to the JS instance instead of the HTML element. The addEventListener API's behavior is exactly the same:

js
// Your Micrio instance reference (HTMLElement.micrio property)
const micrioInstance = document.querySelector('micr-io').micrio;

// Add the event listener
micrioInstance.addEventListener('draw', e => {
  // e.detail is the Micrio instance itself
	console.log('A frame was drawn!', e.detail);
});

List of event ​

Below is a full list of possible events to listen to. Some events only fire on the Javascript Micrio instance, due to the high event volume.

Event nameevt.detail valueFires on HTML elementDescription

General

metadataMicrio instance✔Fires when the image data (markers, tours, audio) has been loaded
readyMicrio instance✔Fires when the Micrio instance has been created and is ready to print
settingsJSON✔Allows you to change the downloaded image settings before parsing
placedMicrio instance✔Fires when the <canvas> element has been placed in the DOM
loadedMicrio instance✔The image is fully loaded and ready to start rendering
drawnMicrio instance✔Fires when the first frame was succesfully drawn
showMicrio instance✔The Micrio image is loaded and fully shown
hideMicrio instance✔The Micrio image is hidden

Camera events

zoomMicrio instance✘The camera has zoomed
moveMicrio instance✘The camera has moved
drawMicrio instance✘A frame has been drawn

Markers

marker-openMarker instance✔A marker has been opened and the camera animation is starting
marker-openedMarker instance✔A marker has been fully opened and the camera is done, and popup shown
marker-closeMarker instance✔A marker starts closing
marker-closedMarker instance✔A marker has been succesfully closed

Tours

markerTours-startMarkerTour instance✔A marker tour has been succesfully started
markerTours-stepMarkerTour instance✔Fires for each marker step in a marker tour
markerTours-stopMarkerTour instance✔A marker tour has been succesfully stopped
markerScrollTours-startMarkerScrollTour instance✔A marker scrolling tour has been succesfully started
markerScrollTours-stopMarkerScrollTour instance✔A marker scrolling tour has been succesfully stopped
tours-startTour instance✔A video tour has been succesfully started
tours-stopTour instance✔A video tour has been succesfully stopped
tour-eventTourEvent instance✔When a video tour has custom events, they will be fired like this

Audio / video

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

Special cases

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