• Public
  • Public/Protected
  • All

The main Micrio HTML element

The main <micr-io> controller instance, which extends a basic HTMLElement.

This controls all necessary rendering components and images to display.

Creating a Micrio element is easy:

<micr-io id="[your image ID]"></micr-io>

Attribute settings

You can customize the Micrio behavior by setting its HTML element attributes. These will be parsed to a Models.ImageInfo.ImageInfo JSON object, and overwrite any values received from the server.

Image info

Attribute Description Default value
id The image id, required
width The image original width, optional when ID is specified auto
height The image original height, optional when ID is specified auto

General options

Attribute Description Default value
lang The primary data language code en
path The image bath path URI https://b.micr.io/
skipmeta Don't download image data (markers, tours, etc) false
lazyload Initialize the image when the element scrolls into the view false
gtag Uses Google Analytics for sending user events, if available true

Display options

Attribute Description Default value
focus The image opening focal point coordinates x, y 0.5, 0.5
view The image opening View 0, 0, 1, 1
restrict Restrict the image navigation to this View 0, 0, 1, 1
zoomlimit The zoom limit (1=100% of original) 1
coverlimit Limit the viewport to always fill the screen false
inittype The starting viewport, cover filling the screen The full image
is360 Render the image as 360° auto
normalize-dpr Users with high DPI screens can zoom in as far as regular screens false

User input events and behavior

Attribute Description Default value
events Enable or disable user input events true
keys Enable keyboard camera navigation controls false
zooming Allow the user to zoom true
scroll-zoom Allow the user to use the mousewheel to zoom true
pinch-zoom Allow the user to use touch pinching to zoom true
dragging Allow the user to pan the image by dragging it true
two-finger-pan On touch, the users needs to use two fingers to pan the image false
control-zoom Using a mouse, the user must press ctrl or cmd to zoom using the scroll wheel false
camspeed Default camera animation speed 1
elasticity The kinetic dragging elasticity 1

User interface options

Attribute Description Default value
controls Shows control buttons on the bottom right true
social Put social sharing icons in the control buttons true
fullscreen Place a fullscreen switch on the bottom right true
logo Shows the Micrio logo on the top left true
logo-org Shows the custom organisation logo on the top right true
toolbar Prints the toolbar at the top true
show-info Shows the image info panel if available at the bottom left true
minimap Show the minimap true
minimap-hide Autohide the minimap when zoomed out fully true
minimap-height The maximum minimap width in pixels 200
minimap-width The maximum minimap height in pixels 160

Audio options

Attribute Description Default value
muted Mute all positional audio and music in the image false
volume The default positional audio and music volume 1
musicvolume The default music volume 1
mutedvolume The volume to fade positional audio and music to when muted 0

Marcel Duin marcel@micr.io


Q42 Internet BV, Micrio, 2015 - 2023


https://micr.io/ , https://q42.nl/en/


  • HTMLElement
    • HTMLMicrioElement



Static observedAttributes

  • get observedAttributes(): string[]
  • Returns string[]



Readonly current

current: Writable<MicrioImage> = ...

Current main MicrioImage store Writable. Its value can be referred to using the $current property

Readonly secondary

secondary: Writable<MicrioImage> = ...

In split screen mode, this is the secondary image


Readonly camera

camera: Camera = ...

The virtual camera instance to control the current main image views

Readonly events

events: Events = ...

User input browser event handlers

Readonly state

state: Main = ...

The main state manager. Read more about it in the State section.

Optional defaultSettings

defaultSettings?: Partial<Settings>

Custom settings, if specified, this overwrites any server received data




Generated using TypeDoc