2. The Editor

The Micrio Editor is the main tool used to enrich your uploaded images with markers, tours, audio, and much more. This chapter explains how to use the different tools.

Note: if you're looking for the newer editor v2 documentation, please check HERE.

When you open the editor, you will see your image with a menu bar on top. The menu options are explained one by one below.

2.1. Image menu

Use the image menu to set image options, copy image data, preview or publish your changes.

2.1.1. Settings

If you open the Image Settings, you will see a list of default image options that can be checked or unchecked. These are the default options for viewing, sharing or embedding the image, without manually having to set them youselves:

Setting	Description
`clusterMarkers`	If set to `true`, if markers overlap eachother when the user is zoomed out, they will be combined to a single cluster marker, which, when clicked, will zoom the camera to the bounding areas of the containing markers, allowing the user to then choose which marker to open.
`fullscreen`	If set to `true`, show a button to toggle fullscreen mode
`hookEvents`	If set to `false`, all user image events (swipe, pinch, zoom) will be disabled. Tours and markers will still work.
`loaderbar`	If set to `true`, show a loader bar at the top of the image when the image is being loaded.
`markersRestrictToImage`	If set to `true`, the camera transitions to marker views will be restricted to the image boundaries.
`limitToCoverScale`	If set to `true`, the user cannot zoom out further than having the entire screen filled
`minimap`	If checked, show a navigation minimap in the bottom left corner of the image screen
`musicVolume`	If you have added background music to your image, this is the relative volume it will be played on (1=100%)
`mutedVolume`	When audio is being muted when marker or tour audio (ie a voice over) plays, fade all background audio (positional and music) to this volume.
`mutedVolume`	When audio is being muted when marker or tour audio (ie a voice over) plays, fade all background audio (positional and music) to this volume.
`repeatX`	If enabled, your image will be horizontally repeated infinitely
`social`	If enabled, show social sharing buttons on the micr.io-viewer
`zoomLimit`	The factor (1=100%) that users will be able to zoom in maximally. For instance, if set to `2`, the user will be able to zoom in to 200% of the original image resolution.

2.1.1.1 360° specific settings

If you are working with a 360° image, there are special settings that only apply to these. In the settings menu, expand the _360 menu to see these options:

Setting	Description
`autoRotate`	When the image is first loaded, do a slow automatic camera rotation until the user has their first interaction. Good for demo mode.
`closeTop`	For 360° images that are haven't got an exact `2:1` ratio, stretch out the images vertically to fill the entire vertical 3d space. Otherwise, black bars will be shown on the top and bottom of the 360° sphere.
`orientationControls`	If enabled, the user will be able to use their mobile phone orientation to look around in the image

2.1.2. Set Start View

When this option is selected, you will see a resizable rectangle overlay over the image. You can set these to the exact view that the image will always be opened on.

2.1.3. Set Description

Select this option to set an option image description, which will appear when you use the https://micr.io/ image viewer to share your image.

2.1.4. Copy data from another image

If you want to copy all data from an existing image (for instance when you've uploaded an updated image), use this option to select the image to copy the already existing data from.

2.1.5. Preview

Use this option to preview any unpublished changes you've made to the image.

2.1.6. Publish

Use this option to publish the current image data to the public. When this is done, all your latest changes and additions to the image data are visible to everyone.

2.2. Custom menus

Best for stand alone applications, the Custom Menus section allows you to add basic content screens as a drop-down menu in the image viewer.

This is good for adding About or Credits screens without having to make your own HTML document for it. You can make as many nested menus and pages as you need.

2.2.1. Adding a menu

When you click Add main menu in the menu, you are prompted to type a name (for instance "About"). After this, your menu will appear directly under the Custom menus menu:

Under this menu, there are 3 options:

Option	Description
Remove this menu	Removes this menu and all its submenus and pages.
Add sub menu	Create a submenu under this menu that can have its own subpages and -menus. For instance: About » This image
Add page	Add a new content page popup directly under this menu. Its details are explained in the next section.

2.2.2. Adding a content page

Adding a custom page under one of your own menus is very simple. First, enter a title for your page, for instance This Image. Then you will see the following screen:

2.2.2.1. Writing your content

You can write a basic page with custom bold, italic, titles and lists using the markdown language. See a simple example in the image above. Use the preview button to see how this will look.

2.2.2.2. Adding an image

To add your own custom header image to this page, click the Set Image button. This will open the asset manager where you can upload and select an image. Use the preview button to see how this will look.

2.2.2.3. Custom page data

For advanced usage, and for use with custom client embedded integrations, you can enrich each content page with custom JSON. If you click the Custom Page Data menu, this will show a custom JSON editor. Please refer to its documentation for how to use this.

The entered JSON data will be accessible in the client by reading the micrioInstance.loader.meta object.

2.2.2.4. Preview, remove, save

These individual buttons speak for themselves. Use Preview to preview your current page edits, Remove to delete this page, and Save to save this page and close the editor.

2.3. Video Tours

Video Tours are a main Micrio feature. They allow you to create a totally self playing tour through your image, using multiple viewports set out over a custom time line, with additional main audio like a voice-over.

2.3.1. Creating a video tour

To create a new video tour, click on New Video Tour under the Video Tours menu. You will then be prompted to enter a name, and then you can start creating!

2.3.2. Setting the Tour duration

The first thing you'll want to do after creating a new video tour, is decide the total duration of the tour. Perhaps you already have a voice-over audio file of 2 minutes, then you should set the duration to 120 (seconds).

You can do this using the Duration input field on the bottom right of the editor interface.

2.3.3. Video Hotspots

The most important part of the video tours are the video hotspots. These are the views the camera will focus on during the tour.

To create a hotspot, click on the Create Video Hotspot button in the interface. This will allow you to drag a new view rectangle in your image. During the creation process, you can freely zoom and navigate through the image, allowing you to precisely set the viewport to your needs.

2.3.4. The Timeline

The timeline bar is the bar at the bottom of the editor interface. With this, you can set the tour viewport order, and camera speeds and durations.

After creating a video hotspot, you will see a new gray block appearing in the time bar. This is the period when the camera has this view focussed, ie doesn't move.

You can adjust the position of the view area by dragging it through the timeline, and you can adjust its duration by dragging the left and right handles of the grey block.

You can also click anywhere on the timeline to make the camera go to the exact viewport of the time you have selected, and drag the time bar around.

2.3.5. Tour Audio

The unique part of a Video Tour is that you can add a single piece of audio that will be played when the tour is running. A single, long voice-over that tells you about what you see during the touring progress is perfect for this.

2.3.6. Previewing your tour

You can preview the tour within the editor by simply pressing the button left of the timeline.

2.3.7. Saving and exiting the tour editor

If you are done editing the current video tour and want to save and return to the main editor interface, click on Done on the top left of your screen.

2.3.8. Deleting the Tour

To remove the current tour from this image, click Remove this tour on the top left of your screen.

2.3.9. Example application

Example: A great example of this (in Dutch) is a tour through the outside architecture of the Rijksmuseum Amsterdam, as made by NTR Schooltv: An interactive video tour of the Rijksmuseum . Click "Start Details" when you've opened it to see a wonderful application.

2.4. Markers

Markers are powerful tools-- they are items you can place on your image, connecting them with a specific area, and adding content, images, audio, and video to them. This section explains how to do all that.

To enter Marker edit mode, click Markers in the top menu bar.

2.4.1. Placing a marker

To add a marker to your image, press the button on the bottom right of the screen, after which you can select where you want your marker to be placed inside the image.

2.4.2. Editing a marker

Once a marker has been placed, you will see the newly added marker with opened popup window, and a dark rectangle placed in the image.

2.4.2.1. View Rectangle

The dark view rectangle is the viewport the camera will fly to when the user has opened this marker. This should contain the part of the image that has the detail that the marker is about.

To change this rectangle, simply click to select it, after which you can move and resize it to your needs.

Hint: Make sure the marker main icon is inside this rectangle, otherwise users won't see the (full) popup window when they have opened the marker. It's always a good idea to place the marker itself in the top left of the rectangle, ensuring the popups are displayed fully on many possible different screen sizes.

2.4.2.2. The Popup

You can easily edit the Popup contents. If you click the title, you can immediately change it.

To edit the main text contents, click the icon to toggle the text editor. In the input field, you can use the markdown language for custom styling and inserting links. When you are done with that, click the icon again to save it.

2.4.2.3. Edit Controls

On the left of the popup, you see a list of icons. These are used to add specialized marker components:

Icon	Description
	The main marker icon. You can drag this to move the marker around.
	Focus the view rectangle of this marker
	Delete this marker
	Add an audio file to this marker. Opens an asset picker where you can upload or select an audio file.
	Add a new image to the marker popup
	Add custom HTML to the marker, such as a video `<iframe>`. Any HTML is accepted!
	Select an image to be embedded inside the image when this marker is opened. This can be a partial image overlay for instance. When the marker is closed, the image is also hidden.
	Set one or more custom class names for this marker
	Opens the a JSON editor for custom data added to this marker. See advanced marker options for more info.

2.4.3. Custom styling and behavior

Markers are incredibly versatile objects. By default, they simply show a popup that has information. But you can do much more with them -- they can also be used as internal links to other Micrio images, or to activate custom behavior inside your own implementation.

There are several ways to give them custom styling, icons, and style or place the marker popups differently, for instance giving all marker popups a static position on the screen instead of being relative to the marker icon.

To learn how to use simple CSS and custom JS with markers, please see the Custom CSS Styling and Custom Marker Javascript tutorials on this site.

There are also some built-in advanced marker features, which are used at your own risk. These are documented below.

2.5. Marker Tours

Marker tours are a sequence of markers, in the order that you specify, allowing the user to navigate through using previous and next step functionality.

2.5.1. Creating a marker tour

To create a marker tour, select Markers, Tours, and then New marker tour in the top menu. Give it a name, and you're ready to create it!

2.5.2. Editing

This is very straightforward, since a marker tour is nothing more than a sequence of selected markers. Once you've opened or created a tour from the top menu, you see all image markers semi-transparent.

Click on the markers you want inside the tour, and you will see that they turn blue with a number and arrows besides them:

The numbers indicate which step inside the marker tour the markers are. You can change the order of individual steps by clicking the and buttons next to the marker.

If you want to remove a marker from the tour, simply click on the main marker icon again, and it will be removed.

2.5.3. Saving

To save your current changes and return to the main editor, click on Done in the top left of the screen.

2.5.4. Deleting

To delete the current marker tour, click on Remove this tour in the top left of the screen.

2.6. Audio

Adding audio to your images is a very powerful feature-- when done right, it can engulf your visitors, and really set the mood for your storytelling.

There are two kinds of audio you can add: positional audio and ambient music. Both are explained in this section.

Hint: for all audio uploads, please use MP3 files, encoded at a web quality bitrate. This is to prevent large downloads. Do not use .RAW, .PCM or .WAV files.

2.6.1. Position Audio

Position Audio allows you to place separate audio samples on specific locations in your image. This results to the user hearing them (in full stereo) when they navigate through those locations in your image.

This is great for ambient audio to add to the experience of your image. Wind audio samples to place in mountains, water audio for water, etc. You can let your imagination run free here.

To activate the editor positional audio mode, open the Positional Audio option under the Audio top menu. All existing positional audio will automatically start playing as it will in the final version.

2.6.1.1. Setting positional audio

To add your own positional audio sample, press the button on the bottom right of the screen. Then the Asset Manager is opened where you can upload new or select existing audio samples.

Once you have selected an audio sample, you will see the audio added in the center of your image like this:

There are several ways to control and place the audio:

Use the icon to move the sample to the desired position in your image
Use the icon increase or decrease the area where the audio will be heard
Use the icon to delete the sample
Use the volume slider to set the relative audio volume

Hint: The best practise is trial and error with positional audio. Play and move them around until the balance seems best!

2.6.2. Ambient Music

You can upload a selected music track for your image, which will be played on the background, and muted when other audio (of a video tour or marker-- usually voice-overs) will be playing.

Note: You can adjust the main music volume, and the volume it will fade out to in the Main Image Settings.

2.6.2.1. Adding Music

To add a background music track to your image, click the Set Music option under the Audio menu, after which you will be able to upload and select a music file in the Asset Manager.

2.6.2.2. Removing Music

When there is already music selected in your image, click the Remove Music option under the Audio menu.

2.7. The Asset Manager

The editor has a basic Asset Manager where you can manage all separate image and audio files uploaded for this image. This sections explains how to use it.

The interface is almost the same for both images and audio fragments, the only difference is the preview. For simplicity, we use the image asset manager here.

2.7.1. Selecting an existing asset

When the Asset Manager is opened from inside the editor, you will see a screen like this:

To select an existing asset, simply click on the asset you would like to use, and press the Select button.

2.7.2. Adding a new asset

To upload a new file, press the New.. button on the bottom of the form. A new asset item is added with a file selector:

To add a new asset, select a file from your computer, and press Submit to start uploading. Once this has been completed, the file will display as a regular asset in the list, after which you can select to use it.

2.8. Advanced features ⚡

Micrio has been in development for quite a while, and has been used in a wide variety of projects. In that time, quite some features were developed that work, but are not fully supported. This section details a quick overview of some of those features.

Note: Use these at your own risk! Some of these features will be supported and fully implemented later on. For now, these are still officially unsupported.

2.8.1. Multilingual images

Below the surface, Micrio fully supports multilingual implementations of the editor. The default language for all images is English (en)-- you will see this in the URL bar when you have the editor open. For instance:

https://micr.io/editor/#edit/umcjt/en

To enter data for another language, all you have to do is manually change the last part of the URL (en) to a different 2-letter language code, such as nl. Then the editor will reload with empty data, and you can enter all content in that language.

2.8.1.1. Multilanguage in the client output

You can easily specify which language the client output should load:

In the online micr.io viewer (or an IFRAME embed): the viewing url will be something like https://micr.io/i/umcjt/en. If you have published data for the nl language, simply change the url to https://micr.io/i/umcjt/nl, and it will use that language's data.
As a <micr-io> embed on your own site: just add the attribute lang="nl" to the HTML tag, like <micr-io lang="nl"></micr-io>.
When creating a Micrio instance from JavaScript: simply add lang: 'nl' to the Micrio options.

2.8.2. Advanced Marker options

Markers can be used in a large variety of ways. In the Marker Edit Controls, the icon will open a Custom JSON editor for this marker. There, you can enter any data that can be read from the client, allowing for self-made custom actions and data unique to a marker.

However, there are also some pre-programmed JSON fields that trigger built-in functionality:

Field	Type	Description
`alwaysOpen`	Boolean	If set to `true`, this marker will be opened all the time, and will be unclosable.
`doJump`	Boolean	If set to `true`, when this marker is opened, the camera will 'jump' to it, by zooming out and then in again when moving towards this marker's view area.
`icon`	String	Use a custom icon for this marker, without having to do it using CSS. Click the icon for opening the Asset Manager to upload/select the icon. Note: this field is required to have markers shown in VR mode.
`iconHeight`	Number	Set the marker icon pixel height
`iconWidth`	Number	Set the marker icon pixel width
`imageClickUrl`	String	When you've added an image to the marker popup, normally when you click it, the image will be opened in a full screen overlay. Use this property to set a custom URL that will be opened in an `iframe` instead, like a YouTube or Vimeo URL.
`keepEmbedsOpen`	Boolean	If you've added image embeds to this marker, they will stay placed after you've closed the marker.
`micrioLink`	String	A Micrio Image ID to switch to when this marker is opened. When this field is created, you will notice a small icon appearing on the right, with which you can select to which image the marker should link.
`mute`	Boolean	If set to `true`, all positional audio and music will be faded out when this marker is opened. This is already automatically done when a marker has custom HTML, but this is to force it.
`preventImageOpen`	Boolean	When you've added an image to the marker popup, normally when you click it, the image will be opened in a full screen overlay. Set this to `true` to prevent that.
`scales`	Boolean	Normally, marker icons stay the same size whether you are zoomed in or not. If this field is `true`, the marker will scale with the image, making it look like it's a part of the image itself.
`showInVR`	Boolean	When set to `true`, this marker will be shown in VR mode, only when there's also an `icon` specified.
`showTitle`	Boolean	When set to `true`, this marker's title will be added to the marker icon HTML element, so you can use it as an icon subtitle.
`staticPopup`	Boolean	If set to `true`, this marker popup will have a static position (ie the top right of the screen), not relative to the marker position. This is good for mobile interfaces, for instance.

Log in with your Google account