Class HTMLMicrioElement

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 {@link 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 {@link View} 0, 0, 1, 1
restrict Restrict the image navigation to this {@link 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

Author

Marcel Duin [email protected]

Copyright

Q42 Internet BV, Micrio, 2015 - 2023

Link

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

Hierarchy

  • HTMLElement
    • HTMLMicrioElement

Accessors

observedAttributes $current camera

Properties

canvases current visible canvas events state barebone gridInfoData defaultSettings?

Methods

open close

Accessors

Static observedAttributes

  • get observedAttributes(): string[]

  • Returns string[]

$current

camera

  • get camera(): Camera

  • The virtual camera instance to control the current main image views

    Returns Camera

Properties

Readonly canvases

canvases: MicrioImage[] = []

All available canvases

Readonly current

current: Writable<MicrioImage> = ...

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

Readonly visible

visible: Writable<MicrioImage[]> = ...

Currently visible canvases

Readonly canvas

canvas: Canvas = ...

The Micrio sizing and <canvas> controller

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.

Readonly barebone

barebone: Writable<boolean> = ...

Barebone texture downloading, uglier but less bandwidth

gridInfoData

gridInfoData: {
    images: ImageInfo[];
}

Type declaration

Optional defaultSettings

defaultSettings?: Partial<Settings>

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

Methods

open

  • Open a Micrio image by ID or ImageInfo JSON data

    Parameters

    • idOrInfo: string | Partial<ImageInfo>

      An image ID or a ImageInfo JSON object

    • opts: {
          gridView?: boolean;
          splitScreen?: boolean;
          splitTo?: MicrioImage;
          isPassive?: boolean;
          vector?: {
              direction: number;
              distanceX: number;
              distanceY: number;
          };
      } = {}

      Some opening parameters

      • Optional gridView?: boolean

        Don't focus on an image inside the grid, keep the grid active

      • Optional splitScreen?: boolean

        Open the image as a secondary split screen image

      • Optional splitTo?: MicrioImage

        Optional image that is the lead image for split screen

      • Optional isPassive?: boolean

        Passive split screen

      • Optional vector?: {
            direction: number;
            distanceX: number;
            distanceY: number;
        }

        In case of 360, move into this direction

        • direction: number
        • distanceX: number
        • distanceY: number

    Returns MicrioImage

close

Settings

Member Visibility

Theme

Generated using TypeDoc