Micrio client Events API Client 5.x
WARNING
This page is about the Micrio client version 5, which is now outdated. 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. | |