Skip to content

Micrio client Events API Client 5.x

This page is about the Micrio client version 5. Use the links below to navigate to alternative versions.

Since the <micr-io> element is an instance of the generic HTMLElement class, this means that all HTMLElement APIs can also be used with <micr-io>.

Reading events

All Micrio-specific events (CustomEvent) 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:

// 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);

List of event

Event nameevt.detail valueDescription


showHTMLMicrioElementThe main Micrio image is loaded and fully shown
pre-infoImageInfoBefore the ImageInfo settings are read, this event allows you to alter them
pre-dataImageInfoBefore the ImageData contents are read, this event allows you to alter it
printImageInfoThe main Micrio element has initialized and is being printed
loadMicrioImageIndividual image data is loaded and Micrio will start rendering
lang-switchLanguage codeThe user has switched available languages

Camera events

zoom{image: MicrioImage, view: Float64Array}The camera has zoomed
moveViewThe camera has moved
draw-A frame has been drawn
resizeDOMRectThe <micr-io> element was resized

User input

panstart-The user has started panning
panend-The user has stopped panning
pinchend-The user has stopped pinching


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

Marker and video tours

tour-startTour JSONA tour has been succesfully started
tour-stopTour JSONA tour has been succesfully stopped
tour-minimizeTour JSONA tour's UI interface has automatically minimized

Marker Tours

tour-stepMarkerTour JSONFires for each marker step in a marker tour
serialtour-playMarkerTour JSONA multi-image tour is played/resumed
serialtour-pauseMarkerTour JSONA multi-image tour is paused

Video Tours

videotour-startVideoTour JSONA video tour has started from the beginning (can be part of a marker tour)
videotour-stopVideoTour JSONA video tour has ended or is aborted (can be part of a marker tour)
videotour-play-A video tour is played or resumed
videotour-pause-A video tour is paused
tour-endedVideoTour JSONA video tour has ended
tour-endedVideoTour JSONA video tour has ended
tour-eventVideoTourEvent JSONWhen a video tour has custom events, they will be fired like this

Main media (video, audio, video tours)

audio-init-The audio controller has been succesfully initialized and can play audio
audio-mute-The audio has been muted
audio-unmute-The audio has been unmuted
autoplay-blocked-Fires when there is autoplay audio or video which was disallowed by the browser
media-play-Media has started playing
media-pause-Media has stopped playing
media-ended-Media has ended
timeupdatenumberA media timeupdate tick

Custom page popovers

page-openImageData.MenuA custom popover page was opened
page-closedImageData.MenuA custom popover page was closed

Album viewing

gallery-showCurrent image indexTriggers on album image change
page-closed-A custom popover page was closed

Grid views

grid-initGridThe grid controller has initialized
grid-load-All images in the grid have loaded
grid-layout-set-The grid layout has changed
grid-focus-The main grid view is activated
grid-blur-The main grid has lost focus, ie. navigated away

Splitscreen views

splitscreen-startMicrioImageSplit screen mode has started
splitscreen-stopMicrioImageSplit screen mode has stopped

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 500ms. The evt.details is an array of event types fired within the interval.