Options
All
  • Public
  • Public/Protected
  • All
Menu

Base image data

The MicrioData.ImageInfo.ImageInfo JSON data object, used to pass to HTMLMicrioElement.open.

The static image information, such as original resolution, image type, title, and all non-language specific settings ([[MicrioData.Settings]]), such as initial viewport, camera behavior, and 360° settings.

The only required field is id. If only the id field is specified, Micrio attempts to download the additional image data by itself (info.json), published by the Micrio servers. This data will also include image title, and any custom viewing settings set in the image editor.

This is a minimal accepted example:

{
"id": "dzzLm",
}

If you have manually entered the image width and height, it will not download the info.json file, assuming you have provided correct and complete data:

{
"id": "dzzLm",
"width": 41472,
"height": 30219
}

Optionally, when using HTMLMicrioElement <micr-io> tag attributes, these will overwrite whatever is loaded from the server. So if in the Micrio editor you have enabled the fullscreen toggle button, you can disable it in your own HTML using <micr-io fullscreen="false">.

Index

Type aliases

Type aliases

ImageInfo

ImageInfo: { id: string; path: string; version: number; width: number; height: number; tileSize: number; settings: Partial<Settings>; tilesId?: string; tileExtension?: string; title?: string; slug?: string; lang?: string; cultures?: string; is360?: boolean; isWebP?: boolean; isPng?: boolean; isSingle?: boolean; format?: string; legacyTiles?: boolean }

A Micrio image's main static image data object

Type declaration

  • id: string

    The image id

    required
  • path: string

    The image base path URI, with a trailing /

    default

    https://b.micr.io/

  • version: number

    The Micrio version this image was created in

    default

    autoloaded

  • width: number

    The original image width

    default

    autoloaded

  • height: number

    The original image height

    default

    autoloaded

  • tileSize: number

    The original tile size in px

    default

    autoloaded

  • settings: Partial<Settings>

    The image settings, such as viewport/UI settings, camera and user event behavior

  • Optional tilesId?: string

    Use an alternative image ID for the image tiles

  • Optional tileExtension?: string

    Optional custom file extension for tiles

  • Optional title?: string

    The image title (default: autoloaded)

  • Optional slug?: string

    The image slug (default: autoloaded)

  • Optional lang?: string

    The initial data language

  • Optional cultures?: string

    The available image data languages, comma-separated (default: autoloaded)

  • Optional is360?: boolean

    The image is 360 degrees

  • Optional isWebP?: boolean

    The image tiles are in WebP format

  • Optional isPng?: boolean

    The image tiles are in PNG format

  • Optional isSingle?: boolean

    Use a custom, single source uri for the zoomable image / video

  • Optional format?: string

    A custom format (dz for DeepZoom, iiif for IIIF)

  • Optional legacyTiles?: boolean

    Use this for old (<1.8) versions of Micrio

Settings

Settings: { view: View; restrict?: View; focus?: number[]; infoUrl?: string; static?: boolean; thumbSrc?: string; initType?: string; limitToCoverScale?: boolean; lazyload?: boolean; noExternals?: boolean; skipMeta?: boolean; fadeBetween?: boolean; keepRendering?: boolean; camspeed?: number; dragElasticity?: number; zoomLimit?: number; noRetina?: boolean; zoomLimitDPRFix?: boolean; freeMove?: boolean; resetView?: boolean; hookEvents?: boolean; hookKeys?: boolean; noZoom?: boolean; hookScroll?: boolean; hookPinch?: boolean; hookDrag?: boolean; twoFingerPan?: boolean; controlZoom?: boolean; noUI?: boolean; noControls?: boolean; fullscreen?: boolean; noLogo?: boolean; noOrgLogo?: boolean; noToolbar?: boolean; showInfo?: boolean; social?: boolean; minimap?: boolean; alwaysShowMinimap?: boolean; minimapWidth?: number; minimapHeight?: number; doTourJumps?: boolean; audio?: boolean; startVolume?: number; musicVolume?: number; mutedVolume?: number; muteOnBlur?: boolean; cmPerPx?: number; cmWidth?: number; cmHeight?: number; clusterMarkers?: boolean; micrioSplitLink?: string; secondaryInteractive?: boolean; noFollow?: boolean; js?: { href: string }; css?: { href: string }; markersScale?: boolean; _markers?: { markerIcon?: string; markerColor?: string; markerSize?: string; zoomOutAfterClose?: boolean; showTitles?: boolean; titlesNoScale?: boolean; staticPopups?: boolean; staticMobilePopups?: boolean; viewportIsMarker?: boolean; embedsInHtml?: boolean }; _360?: { closeTop?: boolean; video?: { video?: { width: number; height: number; fileUrl: string }; autoplay?: boolean; muted?: boolean; loop?: boolean; controls?: boolean }; orientation?: number }; _meta?: { crossfadeDuration?: number; scripts?: string[]; styles?: string[] } }

Micrio image settings, which is included as ImageInfo.settings.

Type declaration

  • view: View

    The starting viewport ([x0,y0,x1,y1])

  • Optional restrict?: View

    Restrict navigation to this viewport ([x0,y0,x1,y1])

  • Optional focus?: number[]

    Load the image focussed on this coordinate ([x, y])

  • Optional infoUrl?: string

    Use a custom uri for the info json file

  • Optional static?: boolean

    Render this image as a static image

  • Optional thumbSrc?: string

    Use a custom thumbnail image uri

  • Optional initType?: string

    The starting viewport. Possible values cover and contain. Defaults to contain

  • Optional limitToCoverScale?: boolean

    The user cannot zoom out more than a fully covered view

  • Optional lazyload?: boolean

    Initialize the image when the container is scrolled into view (default: false)

  • Optional noExternals?: boolean

    Don't load any custom JS or CSS scripts

  • Optional skipMeta?: boolean

    Don't load this image's [[MicrioData]] (markers, tours, etc)

  • Optional fadeBetween?: boolean

    Do a crossfade when navigating between images (default: true)

  • Optional keepRendering?: boolean

    Don't stop drawing frames when idle

  • Optional camspeed?: number

    The camera animation speed (default: 1)

  • Optional dragElasticity?: number

    Kinetic dragging sensitivity (default: 1)

  • Optional zoomLimit?: number

    The maximum zoom level in % of the original (default: 1)

  • Optional noRetina?: boolean

    Turn off support for high DPI screens

  • Optional zoomLimitDPRFix?: boolean

    Adjust the maximum zoom of high DPI screens to that of regular displays

  • Optional freeMove?: boolean

    Allow the user to pan and zoom out of image bounds

  • Optional resetView?: boolean

    When navigating back to this image from another image, reset the initial view

  • Optional hookEvents?: boolean

    Hook user events (default: true)

  • Optional hookKeys?: boolean

    Hook keyboard controls (default: false)

  • Optional noZoom?: boolean

    Don't allow the user to zoom in or out

  • Optional hookScroll?: boolean

    Use the mousewheel or trackpad scrolling for zooming (default: true)

  • Optional hookPinch?: boolean

    Allow pinch to zoom on touch devices (default: true)

  • Optional hookDrag?: boolean

    Allow panning through the image (default: true)

  • Optional twoFingerPan?: boolean

    Force two-finger panning on touch devices (default: false)

  • Optional controlZoom?: boolean

    Force using the CTRL/CMD-keys to zoom in using scrolling (default: false)

  • Optional noUI?: boolean

    Don't load any UI elements

  • Optional noControls?: boolean

    Don't show any controls in the UI

  • Optional fullscreen?: boolean

    Show a fullscreen button if supported

  • Optional noLogo?: boolean

    Don't show the Micrio logo on the top left

  • Optional noOrgLogo?: boolean

    Don't show the organisation logo on the top right

  • Optional noToolbar?: boolean

    Don't show the menu bar with tours and custom pages

  • Optional showInfo?: boolean

    Show an info modal with the image title and description

  • Optional social?: boolean

    Show a social sharing button

  • Optional minimap?: boolean

    Show the minimap (default: true)

  • Optional alwaysShowMinimap?: boolean

    Don't fade out the minimap (default: false)

  • Optional minimapWidth?: number

    The minimap maximum width, in px (default: 200)

  • Optional minimapHeight?: number

    The minimap maximum height, in px (default: 160)

  • Optional doTourJumps?: boolean

    More natural camera zooming animation during transitions (default: true)

  • Optional audio?: boolean

    Enable the audio controller (default: true)

  • Optional startVolume?: number

    The starting audio volume [0-1] (default: 1)

  • Optional musicVolume?: number

    The music audio volume [0-1] (default: 1)

  • Optional mutedVolume?: number

    The audio volume when other media is playing [0-1] (default: 0)

  • Optional muteOnBlur?: boolean

    Mute the audio when the current browser tab loses focus

  • Optional cmPerPx?: number

    The physical resolution of the object in cm per px

  • Optional cmWidth?: number

    The physical width of the object in cm

  • Optional cmHeight?: number

    The physical height of the object in cm

  • Optional clusterMarkers?: boolean

    Overlapping markers are clustered

  • Optional micrioSplitLink?: string

    A static split-screen Micrio Image ID

  • Optional secondaryInteractive?: boolean

    When this is a secondary image in split screen, allow independent navigating

  • Optional noFollow?: boolean

    When this is a secondary image, don't follow the main image's navigation

  • Optional js?: { href: string }

    Load a custom JS file with this image

    • href: string

      The asset href

  • Optional css?: { href: string }

    Load a custom CSS file with this image

    • href: string

      The asset href

  • Optional markersScale?: boolean

    All markers are scaled with the image

  • Optional _markers?: { markerIcon?: string; markerColor?: string; markerSize?: string; zoomOutAfterClose?: boolean; showTitles?: boolean; titlesNoScale?: boolean; staticPopups?: boolean; staticMobilePopups?: boolean; viewportIsMarker?: boolean; embedsInHtml?: boolean }

    Optional marker settings

    • Optional markerIcon?: string

      The uri of the default marker icon

    • Optional markerColor?: string

      The default marker color

    • Optional markerSize?: string

      The default marker size in px

    • Optional zoomOutAfterClose?: boolean

      Zoom out when closing a marker

    • Optional showTitles?: boolean

      Show the titles for all markers on hover

    • Optional titlesNoScale?: boolean

      Don't scale titles if marker is scaling

    • Optional staticPopups?: boolean

      All marker popups are static

    • Optional staticMobilePopups?: boolean

      All marker popups are static on mobile

    • Optional viewportIsMarker?: boolean

      All markers are sized to their viewports

    • Optional embedsInHtml?: boolean

      All marker embeds are printed in HTML, not WebGL

  • Optional _360?: { closeTop?: boolean; video?: { video?: { width: number; height: number; fileUrl: string }; autoplay?: boolean; muted?: boolean; loop?: boolean; controls?: boolean }; orientation?: number }

    Optional settings for 360 images/video

    • Optional closeTop?: boolean

      Vertically stretch the image to a full sphere if the image is not 2:1 ratio

    • Optional video?: { video?: { width: number; height: number; fileUrl: string }; autoplay?: boolean; muted?: boolean; loop?: boolean; controls?: boolean }

      A 360 video object

      • Optional video?: { width: number; height: number; fileUrl: string }

        Optional video asset object

        • width: number
        • height: number
        • fileUrl: string

          The video asset url

      • Optional autoplay?: boolean

        Try to autoplay the video

      • Optional muted?: boolean

        The video is muted

      • Optional loop?: boolean

        Loop the video

      • Optional controls?: boolean

        Show video player controls

    • Optional orientation?: number

      The Y-orientation in degrees of how the picture was taken

  • Optional _meta?: { crossfadeDuration?: number; scripts?: string[]; styles?: string[] }

    Freeform custom settings, this is the "Custom JSON" field in the image editor

    • Optional crossfadeDuration?: number

      Optional image crossfade duration, in seconds

    • Optional scripts?: string[]

      An array of JavaScript uris to load for this Micrio instance

    • Optional styles?: string[]

      An array of CSS uris to load for this Micrio instance

Generated using TypeDoc