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:

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

List of event

For the technical documentation, see our Micrio client documentation pages.

Event nameevt.detail valueDescription

General

showHTMLMicrioElementThe main Micrio image is loaded and fully shown
pre-infoImageInfoBefore the ImageInfo settings are read, this event allows you to alter them
pre-dataRecord<string, ImageData>Before the ImageData contents are read, this event allows you to alter it
printPartial<ImageInfo>The 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
move{image: MicrioImage, view: Float64Array}The camera has moved
draw-A frame has been drawn
resizeDOMRectThe <micr-io> element was resized

User input

panstart-The user has started panning
panend{duration: number, movedX: number, movedY: number}The user has stopped panning
pinchstart-The user has started pinching
pinchend{duration: number, movedX: number, movedY: number}The user has stopped pinching

Markers

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-setGridThe grid layout has changed
grid-focusMicrioImageThe 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.