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