2. The Editor
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
|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
These will both be used for when you use the https://micr.io/ image viewer to share your image.
|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
|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
|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
|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.
To enter Marker edit mode, click Markers in the top menu bar.
2.3.1. The main marker side bar
|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.
184.108.40.206. 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.
220.127.116.11. 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:
|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.|
18.104.22.168. 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.
|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.|
22.214.171.124. 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
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.
2.4. Marker Tours
2.4.1. Creating a marker tour
To create a marker tour, select Markers, Tours, and then click the + icon in the bottom menu.
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.
|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
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.
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.
126.96.36.199. 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.
188.8.131.52. 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.
184.108.40.206. 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
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
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:
220.127.116.11. Writing your content
You can write a basic page with custom bold, italic, titles and lists using the markdown language.
18.104.22.168. 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 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.