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 name | evt.detail value | Description | |
|---|---|---|---|
General | |||
show | HTMLMicrioElement | The main Micrio image is loaded and fully shown | |
pre-info | ImageInfo | Before the ImageInfo settings are read, this event allows you to alter them | |
pre-data | Record<string, ImageData> | Before the ImageData contents are read, this event allows you to alter it | |
print | Partial<ImageInfo> | The main Micrio element has initialized and is being printed | |
load | MicrioImage | Individual image data is loaded and Micrio will start rendering | |
lang-switch | Language code | The 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 | |
resize | DOMRect | The <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-open | Marker JSON | A marker has been opened and the camera animation is starting | |
marker-opened | Marker JSON | A marker has been fully opened and the camera is done, and popup shown | |
marker-closed | Marker JSON | A marker has been succesfully closed | |
Marker and video tours | |||
tour-start | Tour JSON | A tour has been succesfully started | |
tour-stop | Tour JSON | A tour has been succesfully stopped | |
tour-minimize | Tour JSON | A tour's UI interface has automatically minimized | |
Marker Tours | |||
tour-step | MarkerTour JSON | Fires for each marker step in a marker tour | |
serialtour-play | MarkerTour JSON | A multi-image tour is played/resumed | |
serialtour-pause | MarkerTour JSON | A multi-image tour is paused | |
Video Tours | |||
videotour-start | VideoTour JSON | A video tour has started from the beginning (can be part of a marker tour) | |
videotour-stop | VideoTour JSON | A 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-ended | VideoTour JSON | A video tour has ended | |
tour-ended | VideoTour JSON | A video tour has ended | |
tour-event | VideoTourEvent JSON | When 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 | |
timeupdate | number | A media timeupdate tick | |
Custom page popovers | |||
page-open | ImageData.Menu | A custom popover page was opened | |
page-closed | ImageData.Menu | A custom popover page was closed | |
Album viewing | |||
gallery-show | Current image index | Triggers on album image change | |
page-closed | - | A custom popover page was closed | |
Grid views | |||
grid-init | Grid | The grid controller has initialized | |
grid-load | - | All images in the grid have loaded | |
grid-layout-set | Grid | The grid layout has changed | |
grid-focus | MicrioImage | The main grid view is activated | |
grid-blur | - | The main grid has lost focus, ie. navigated away | |
Splitscreen views | |||
splitscreen-start | MicrioImage | Split screen mode has started | |
splitscreen-stop | MicrioImage | Split screen mode has stopped | |
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 500ms. The evt.details is an array of event types fired within the interval. | |