Micrio Client - v5.0.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
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) |
It's been a while! Micrio 5.0 is released together with the new Micrio dashboard. Read more about this
- 🔼 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
- 📢 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[]
)
- 📢 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
- 📢 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
- ✅ 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.
- ✅ 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
Added more UI customization possibilities
- 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
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.
- 🧰 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
- ✅ 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
- 📢 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
markerTours-*
, markerScrollTours-*
and tours-*
now named tour-*
Mainly a stability and performance upgrade.
- 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
Fully documented the client using JSDoc -- See the documentation here!
- 📢 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
- Using WebWorkers to download tile textures over multiple threads
- A lot of performance and stability fixes and updates, especially for iPad
-
- ✅ 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
-
- 🧰 Rewrote the entire engine to use WebAssembly. Read the journey blogpost HERE!
- Many stability and bug fixes
- ✅ Full 360° video support with enriched content (markers, audio, storytelling)
The dark, pre-changelog days..