Skip to content

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 instanceFires when the image data (markers, tours, audio) has been loaded
readyMicrio instanceFires when the Micrio instance has been created and is ready to print
settingsJSONAllows you to change the downloaded image settings before parsing
placedMicrio instanceFires when the <canvas> element has been placed in the DOM
loadedMicrio instanceThe image is fully loaded and ready to start rendering
drawnMicrio instanceFires when the first frame was succesfully drawn
showMicrio instanceThe Micrio image is loaded and fully shown
hideMicrio instanceThe Micrio image is hidden

Camera events

zoomMicrio instanceThe camera has zoomed
moveMicrio instanceThe camera has moved
drawMicrio instanceA frame has been drawn

Markers

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

Tours

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

Audio / video

no-autoplay-audioMicrio instanceAutoplay audio has been blocked by the browser
autoplay-blockedMicrio instanceFires when there is autoplay audio or video which was disallowed by the browser
can-play-audioMicrio instanceAudio has been succesfully instantiated and can be played freely
audio-muteMicrio instanceThe audio has been muted
audio-unmuteMicrio instanceThe 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.