Micrio Client - v5.0.0

Micrio

Micrio 5.0

Welcome to the Micrio 5.0 API documentation pages!

This is the home of the auto-generated Micrio client JS API documentation.

If you are looking for HOWTOs, tutorials, or general Micrio help, please check out our searchable Knowledge Base at:

https://doc.micr.io/

If you want to dive into the Micrio possibilities for use in your own project, you are in the right place here!

Start your journey by checking out the Micrio section.

Below you can find the most recent changelogs.

Good luck!

The Micrio team

Changelog

Legend:

A feature has been added
A feature has been deprecated/removed
🧰 An update/upgrade under the hood
📢 Breaking change, upgrading or using an older version could break on this
🔼 Requires the latest Micrio Dashboard (2024)
  • 🌋 5.0 - 2024/06/17

    It's been a while! Micrio 5.0 is released together with the new Micrio dashboard. Read more about this

    Links

    Key points

    • 🔼 Designed to work with the latest Micrio Dashboard v3 (2024), though still fully backwards compatibly with Micrio 4.x-published images
    • WCAG 2.2 accessibility compatibility: full screenreader and keyboard controls support
    • ✅🔼 Right To Left (rtl) language support
    • ✅🔼 Markers for 360° object viewing and storytelling
    • ✅🔼 Single <micr-io> ID for 360° objects (Dashboard v3 feature)
    • ✅🔼 Single <micr-io> album/{folderId] ID for albums (Dashboard v3 feature)
    • ✅ Introduced Grid viewer functionality, GridController
    • 📢🔼 New data model for 5.0 and up: all localizations are in the same model!
    • 📢 Interface elements revamp
    • 🧰 Improved Camera transitions
    • 🧰 Removed independent Spaces.pub embeddable 360 content compatibility -- Spaces is now fully included in the new Micrio dashboard

    Data model changes

    • 📢 All languages are published in the same file, reducing multilingual complexity
    • 📢 Introduced a dynamic MicrioImage.settings Writable, replacing static MicrioImage.$info.settings
    • 📢 Renamed namespace Micrio.Models.ImageCultureData to Micrio.Models.ImageData
    • 📢 All localized data sits under i18n properties of respective types
    • 📢 Positional audio no longer independent entities, and are now an optional Marker setting
    • 📢 Marker popups are always statically placed, and can no longer be attached to the marker itself
    • 📢 In-image embeds removed from Marker entity and became independent entities
    • 📢 Marker custom classNames (.class (string)) has been changed to .tags (string[])

    JS API changes

    • 📢 Each MicrioImage has its own individual Camera, instead of a single HTMLMicrioElement.camera (it still exists, and points to the current active image camera .$current.camera)
    • 📢 Camera animation functions .flyTo[...] have optional AnimationOptions argument object instead of direct mandatory arguments
    • TypeScript interfaces Micrio.View and Micrio.Coords have moved to Micrio.Models.Camera namespace

    User Interface

    • 📢 Interface design revamp! HTML is mostly unchanged, but CSS has had a few major improvements
    • ✅ Light and dark browser mode support, defaults to dark, can be set in the editor
    • ✅ Much fancier marker elements
    • ✅ You can now also open a marker image gallery as full-window popover
    • 🧰 All icons use the Font Awesome icon set
    • 🧰 Default font used is now Work Sans
    • 🧰 Marker popups are now on the left side by default
    • 🧰 The social sharing button now opens the OS-specific share menu

    HTML / CSS embedding changes

    • ✅ The <micr-io> element can now be muted by setting a muted attribute, or setting <micr-io>.muted = true;
    • 📢 All <micr-io> attribute options have data- prefix, except for lang, id, muted, height, width, volume, lazyload.
    • 📢 All Micrio HTML component elements now have micrio- CSS classname prefix.
    • 🧰 All z-index CSS has been removed: the HTML structure makes sense by itself now.

    Other changes

    • ✅ Added support for video as in-image embeds, including transparent webp/H.265
    • 🧰 Custom menu pages now have a unique deeplink when Router is used
  • 💫 4.1 - 2022/05/18

    Added more UI customization possibilities

    Links

    Changes

    • Added UserInterfaceSettings where you can specify your own icons
    • You can specify default image settings in JS
    • Extended MarkerSettings. You can now:
      • Place marker tour controls inside a marker popup
      • Enable minimizing marker popups
      • Turn on that when a marker is opened that is part of a tour, this tour will also start automatically at the marker's step
    • Added new feature player: Serial Tours
    • Bug and stability fixes
  • 💕 4.0 - 2022/02/14

    A total rewrite from the ground up has been done.

    Nothing has been changed in the data model, but if you are using custom implementations and want to upgrade, check out the Micrio 4.0 documentation.

    For upgrading existing 3.x implementations, see this Micrio knowledge base guide.

    Links

    General changes

    • 🧰 Micrio client codebase is now fully TypeScript (+AssemblyScript for Wasm)
    • 🧰 New WebAssembly rendering model, improving performance and image switching
    • 🧰 Switched API documentation pages from JSDoc to typedoc

    New features

    API

    • ✅ Introduced a State Management API to replace the deprecated Micrio.Modules
    • ❌ The Micrio.Modules JS API has been deprecated. Please see the migration article above.
    • ❌ The new Micrio() constructor has been deprecated: <micr-io> is now the only way to initialize Micrio
    • 📢 Micrio.Camera.setCoo now requires 3 arguments (x:number,y:number,z:number) instead of int[3]
    • 📢 <micr-io> now is the main Micrio controller instance instead of <micr-io>.micrio, and has direct Micrio members, such as .camera

    HTML & CSS

    • 📢 Micrio interface HTML elements have been restructured and some class names have been changed
    • 📢 Micrio marker custom classNames: no more class- prefix is added in the output HTML
    • 📢 Micrio marker CSS variables changed prefix from --default-marker-* to --micrio-marker-*

    Events

    • 📢 Events markerTours-*, markerScrollTours-* and tours-* now named tour-*
  • 💫 3.3 - 2021/03/31

    Mainly a stability and performance upgrade.

    Links

    Changes

    • Included Google Tag Manager support for Micrio event tracking
    • You can now use the trackpad for panning and zooming
    • Support for custom JS & CSS uploaded in the Image Editor
    • Set up for use with Spaces
    • Many stability and performance fixes, especially for slower connections
  • 📚 3.2 - 2021/02

    Fully documented the client using JSDoc -- See the documentation here!

    Links

    General

    DOM structure

    • 📢 Due to the change to Svelte, the DOM structure of Micrio HTML elements has been changed
    • 📢 Greatly simplified the DOM structure by removing the ShadowRoot

    Performance

    • Using WebWorkers to download tile textures over multiple threads
    • A lot of performance and stability fixes and updates, especially for iPad
  • 🔎 3.1 - 2020/11

    Links

    Changes

    • ✅ Added multi-image tours: marker tours over multiple images
    • ✅ Added side-by-side comparison mode (let us know if you're interested in this!)
    • Many stability and bug fixes
  • 🚅 3.0 - 2020/08

    Links

    Changes

    • 🧰 Rewrote the entire engine to use WebAssembly. Read the journey blogpost HERE!
    • Many stability and bug fixes
  • 🎞 2.9 - 2020/05

    Links

    Changes

    • ✅ Full 360° video support with enriched content (markers, audio, storytelling)
  • 📜 Earlier versions

    The dark, pre-changelog days..