Menu

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 older editor v1 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. Actions menu

Use the Actions menu to set the current language, preview, publish and open your published image, or copy image data from another image.
Action Description
Data language Set your current data language. Multi-language input is fully supported by Micrio.
Preview Use this option to preview any unpublished changes you've made to the image.
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.
Public link Once published, this link will be the public URL for this image.
Duplicate data 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.2. Settings menu

Use the settings menu to set the image title, description and options.

2.2.1 Main

Here, you can set the image title and description. The title is language independent, the description is for each language.

These will both be used for when you use the https://micr.io/ image viewer to share your image.

2.2.2. Settings

If you open the Image Settings, you will see a list of default image options. These are the default options for viewing, sharing or embedding the image, without manually having to set them youselves:
Setting Description
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.
Viewer background color When clicked, you can select the default background color of your image.
Enable navigation If disabled, all user image events (swipe, pinch, zoom) will be disabled. Tours and markers will still work.
Fullscreen button Show a fullscreen toggle button in the bottom right corner of the image.
Show the loader bar When enabled, show a loader bar at the top of the image when the image is being loaded.
Show the minimap If enabled, show a navigation minimap in the bottom left corner of the image screen
Show social sharing buttons If enabled, show social sharing buttons on the micr.io-viewer.
Always fill the screen If enabled, the user cannot zoom out further than having the entire screen filled
Maximum zoom level 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.
Background music volume If you have added background music to your image, this is the relative volume it will be played on (1=100%)
Background fade out volume 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.

2.2.3 360° specific settings

If you are working with a 360° image, there are special settings that only apply to these.
Setting Description
Image is 360° Use this toggler to turn 360° mode on or off. Note: this will only be visible in the preview or final image.
Allow WebVR If enabled, a VR button will be shown on devices that support it. When activated, users will be able to use their VR set to look around in your 360° images. For more information, see https://webvr.info/.
Auto rotate When the image is first loaded, do a slow automatic camera rotation until the user has their first interaction. Good for demo mode.
Fill 360 screen 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.
Use mobile orientation to navigate If enabled, the user will be able to use their mobile phone orientation to look around in the image

2.2.4 Custom JSON settings

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

2.3. 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.3.1. The main marker side bar

In the main marker side bar, you can set general marker options for this image.
Setting Description
Marker icon Select a default marker icon to be used for all new markers created in this image.
Marker color Select a default marker color to be used for all default markers created in this image.
Marker size Select a default marker size to be used for all new default markers created in this image.
Static popups All markers will have a statically positioned popup, instead of being relative to the marker position in the image.
Static mobile popups As above, but only for mobile devices.
Cluster markers If enabled, 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.

2.3.2. 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.3.3. 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.3.3.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.3.3.2. Main marker settings

You can easily edit marker contents. If you click a marker, the sidebar will display its data, which you can freely edit:

Field Description
Title Edit the marker title.
Body text Edit the main marker body text. You can use the markdown language for custom styling and inserting links.
Audio Add an audio file to this marker. Opens an asset picker where you can upload or select an audio file.
Images in popup Add/remove images to the marker popup
Images within main image Select images 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.
Use default styling If enabled, this marker will have the default circle shape, size and color.
Custom class names Set one or more custom class names for this marker
Video embeds To add a video (YouTube, Vimeo, ...) IFRAME element to this marker, set the direct frame URL here. You can add an optional description for this frame below.

2.3.3.2. Advanced marker settings

To set individual advanced marker settings, click the SETTINGS tab at the top of the marker editor side bar.

WARNING: use these at your own risk! Some of these options might show unexpected behavior when used together.

Field Description
Icon Select a custom icon for this marker using the asset manager.
Marker is micrio link To navigate to another image using a crossfade when this marker is opened, select this option to choose which image to navigate to.
Always open This marker and its popup will always be opened and uncloseable.
Camera jump The camera will make a zooming arc when navigating to this marker.
Keep embedded images open Once the marker has been opened and it has in-image image embeds, these will not be removed once the marker has been closed.
Force audio fade-out Opening this marker forces any background audio to fade out.
No full-window image When an in-marker popup image is clicked, there will be no zoomed view overlay of the image.
Scale marker The marker size will be relative to the image-- ie it will scale when zooming in and out.
Show title Show the marker title under the marker itself.
Static popup This marker will have a statically placed popup not connected to the marker itself. Good for smaller screens.

2.3.3.3. Custom marker JSON

For JSON marker data to use with custom client implementations, use the CUSTOM tab to edit or create your own JSON data. To set individual advanced marker settings, click the SETTINGS tab at the top of the marker editor side bar. See JSON editor for instructions on how to use it.

2.3.4. 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.

2.4. 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.4.1. Creating a marker tour

To create a marker tour, select Markers, Tours, and then click the + icon in the bottom menu.

2.4.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.4.3. Marker tour options

In the sidebar, you can specify additional (advanced) marker tour options.

Field Description
Title Set the marker tour title, as it will be displayed in the top menu of the image viewer.
Description Set the marker tour description.
Scrolling tour Set this marker tour to be a scrolling tour. All marker content will be a single scrollable page, and the camera will fly to the view of the marker content you are currently reading. EXAMPLE.
Autostart Start this tour automatically when the image is first opened.
Can't exit this tour The user cannot close this tour.
Remove this tour Delete this tour by clicking on the icon.

2.5. 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.5.1. Creating a video tour

To create a new video tour, click on + icon at the bottom of the Video Tours menu. Then you can start creating!

2.5.2. Setting tour options

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 Tour duration input field in the editor side bar.

2.5.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 green + button in the bottom left of your screen. This will create a new view rectangle in your image, which you can then freely place and resize. During the creation process, you can freely zoom and navigate through the image, allowing you to precisely set the viewport to your needs.

2.5.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.

2.5.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.5.6. Deleting the Tour

To remove the current tour from this image, click the delete icon in the side bar.

2.5.7. 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.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. Ambient Music

You can upload selected music tracks 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.1.1. Adding Music

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

2.6.1.2. Removing Music

When there is already music selected in your image, click the delete icon next to it to remove it from the playlist.

2.6.2. Positional Audio

Positional 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 in the Audio side bar.

2.6.2.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 bottom right icon in the circle to increase or decrease the area where the audio will be heard
  • Use the volume slider to set the relative audio volume
  • Use the delete icon in the side bar to delete the sample

2.7. Micrio Embeds

Using Micrio embeds, you can place other Micrio images inside the current image, allowing the user to zoom in to that specific sub-image even further.

In the Micrio image viewer, embedded images will retain their own published markers, audio and tours. So if you embed an enriched sub-image, all its markers and tours will be available to the user!

2.7.1. Adding a Micrio embed

When you click the + icon on the bottom of the Embeds sidebar, you will see a list of already uploaded Micrio images to your current Micrio project. Select one,

2.7.2. Editing and removing a Micrio embed

Once you have selected an image embed, simply drag and resize it to the portion of the image it should be placed at.

To remove an image embed, select the correct image in the sidebar, and click the delete icon next to it.

2.8. Custom pages

Best for stand alone applications, the Custom Pages 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.8.1. Adding a menu

When you click the + button on the bottom of the Custom Pages sidebar, you can immediately start adding pages to it:

To remove this many and all its underlying pages, click the delete icon next to it.

2.8.2. Adding a content page

Adding a custom page under one of your own menus is very simple: click the ADD NEW PAGE button to add a page to this menu. Then you will see the following screen:

2.8.2.1. Writing your content

You can write a basic page with custom bold, italic, titles and lists using the markdown language.

2.8.2.2. Adding an image

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

2.9. 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.9.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 OK button.

2.9.2. Adding a new asset

To upload a new file, press the + 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.

By Marcel Duin, marcel@q42.nl - Last modified: 09/17/2017