Micrio Knowledge Base

Appearance

Custom Micrio integration example Client 4.x ​

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

This is a step by step tutorial. For more in-depth documentation on the JS API, visit the relevant documentation.

TIP

The full example for this tutorial can be found HERE.

Before starting this tutorial, we're assuming you've already completed the previous tutorial: How to use your own custom CSS styling.

1. Access the image in JavaScript ​

To access a Micrio image using JavaScript, put this in a <script> tag below where the <micr-io> element is in your HTML:

js
// The Micrio HTML element
const _micrioElement = document.getElementById('your-micrio-id');
// The Micrio HTML element
const _micrioElement = document.getElementById('your-micrio-id');

This _micrioElement object will be the main reference HTML Element throughout this tutorial.

2. Custom behavior on image events ​

This section covers some examples for when you're working with your own HTML controls to control the image from inside your own webpage.

A custom action when the image is loaded ​

If you have a custom UI element that you want to show or hide based on whether the user is zoomed in or not, you can use the load event:

js
_micrioElement.addEventListener('load', (e) => {
    console.info('The image is done loading!');

    // You can do whatever you want here
});
_micrioElement.addEventListener('load', (e) => {
    console.info('The image is done loading!');

    // You can do whatever you want here
});

Find out when the user is zoomed in ​

If you have site behaviour based on whether the user is zoomed in or not, you can use the zoom event.

js
_micrioElement.addEventListener('zoom', (evt) => {
    // The current camera coordinates and scale are evt.detail
    let currentCoords = evt.detail;
    console.info('Current camera coords', currentCoords[0], currentCoords[1]);

    // Let's check if the user is fully zoomed out

    // We need a reference to the Micrio JS object here.
    // From there we can access the virtual camera methods:

    if(_micrioElement.micrio.camera.isZoomedOut()) {
        console.info('The user is totally zoomed out!');
    }
    else {
        // If you have any scale-based custom actions, run them here:
        console.info('The user has zoomed in to scale: ', currentCoords[2]);
    }
});
_micrioElement.addEventListener('zoom', (evt) => {
    // The current camera coordinates and scale are evt.detail
    let currentCoords = evt.detail;
    console.info('Current camera coords', currentCoords[0], currentCoords[1]);

    // Let's check if the user is fully zoomed out

    // We need a reference to the Micrio JS object here.
    // From there we can access the virtual camera methods:

    if(_micrioElement.micrio.camera.isZoomedOut()) {
        console.info('The user is totally zoomed out!');
    }
    else {
        // If you have any scale-based custom actions, run them here:
        console.info('The user has zoomed in to scale: ', currentCoords[2]);
    }
});

3. Custom marker behavior ​

Markers are very powerful objects within an image. They can trigger a popup, jump to another image, or have a custom action defined within your website. This section gives some examples for marker interaction.

Refer to the marker events documentation for more context.

A custom action when a marker is opened ​

When you want to have a custom action executed once a user has opened a marker and you want to wait for the camera to have flown to the marker's viewport, do this:

js
_micrioElement.addEventListener('marker-opened', (evt) => {
    // The current camera coordinates and scale are evt.detail
    let marker = evt.detail;

    console.info('Opened marker and the camera has flown there :', marker);

    // Do something cool!
});
_micrioElement.addEventListener('marker-opened', (evt) => {
    // The current camera coordinates and scale are evt.detail
    let marker = evt.detail;

    console.info('Opened marker and the camera has flown there :', marker);

    // Do something cool!
});

No popup on marker open ​

To prevent a marker popup from being opened, you can use the marker-open event, which is fired when the user has clicked a marker, but before any animation or popup rendering is done.

js
_micrioElement.addEventListener('marker-open', (evt) => {
    // The current camera coordinates and scale are evt.detail
    let marker = evt.detail;

    // Prevent anything from happening by immediately closing the marker
    _micrioElement.$current.state.marker.set(null);

    console.info('Marker is clicked and prevented popup to open :', marker);

    // Do something cool!
});
_micrioElement.addEventListener('marker-open', (evt) => {
    // The current camera coordinates and scale are evt.detail
    let marker = evt.detail;

    // Prevent anything from happening by immediately closing the marker
    _micrioElement.$current.state.marker.set(null);

    console.info('Marker is clicked and prevented popup to open :', marker);

    // Do something cool!
});

Conclusion ​

In this tutorial, you've gone through some examples to handle custom Micrio events. From here on, you can implement these with your own functions and wishes.

The full working HTML of this tutorial can be found HERE.

If you have any more questions, please drop us a line and we'll try to help you further!