Micrio Knowledge Base

Appearance

JS API Client 5.x ​

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

WARNING

Micrio 5 uses a new data model for internationalization. While it has backwards compatibility for older Micrio versions, do not attempt to use older Micrio versions to view content created for Micrio 5.

After creating a Micrio embed in your website using a <micr-io> embed, you can gain full control over the Micrio image by using the Micrio JavaScript (JS) API.

For the technical documentation, see our Micrio client documentation pages at /client/api/5.0/index.html.

INFO

This article does not apply to <iframe> Micrio embeds.

Accessing the Micrio JS instance ​

You can access a Micrio JS instance by simply querying the Micrio HTML element (<micr-io>):

js
const micrioInstance = document.getElementById('your-micrio-id');

From there on, you can continue with these topics:

  1. JS Developer API

    The Micrio JS client is fully documented using typedoc, and has auto-generated documentation pages of the entire client API. See the Typedoc API documentation here!

    This contains several modules you can control, for instance:

    • HTMLMicrioElement: The main Micrio HTML element which is also its main controller class.

    • Camera: The virtual camera object, which gives you full control of what the user sees in their screen, including a bunch of animations.

    • State: A state-based way with which you can interact with markers, tours and more using SvelteStore.

      This is a little different than using imperative JS functions like .openMarker(), but using a reactive state overall is much more developer friendly, since it's a single read+write property instead of needing a separate .getOpenedMarker() function.

    • Events: Set or remove specific event listeners, such as touch and keyboard events, or behavior specific events such as pinch to zoom, and two-finger pan.

    • Micrio.Models: All model definitions used in the client.

  2. JS Events API

    Read and control everything that happens with your image.

TypeScript API Workspace integration ​

For TypeScript project integrations (and neat VS Code autocompletion), you can use this declarations .d.ts reference file: https://r2.micr.io/micrio-5.0.min.d.ts!

Simply include the d.ts file in your project in a directory included in your project, and implement it:

js
import type { HTMLMicrioElement } from 'Micrio';

// This gives you full type checking and any editor autocompletion
const micrio = document.querySelector('micr-io') as HTMLMicrioElement;

// VS Code will fully know what you're doing here
micrio.camera.flyToView([.2,.2,.3,.3]).then(() => console.log('done!'));

Change logs ​

You can view the Micrio general change logs here.