Private & Confidential
(1.4.0) Matterport App
- Harvey Buchan
- Gareth Williams
The Igloo Matterport Service enables viewing and navigation of Matterport models in an immersive space.
Requirements
An annual license is required for this service.
Overview
Most standard Matterport features, including Mattertags, are supported. The service’s control page allows navigation of a model using a mobile device, and generation of a space’s floorplans to aid that process.
A single frame view allows use of Matterport in non-360 modes - (i.e. a single wall of an immersive room), and there’s easy support for <360 degree immersive projection surfaces.
There’s also a favourites system for Matterport spaces, allowing easy management of a collection of saved spaces for rapid viewing, as well as a one-click integration with any Matterport model embedded into a native website (no changes necessary - just click a bookmark and be taken straight to any Matterport model).
Matterport session
A Matterport session is included in the example Igloo Core Engine database. This consists of a single layer giving a full canvas view of the current Matterport space. The space can be navigated using the app in Igloo Control Panel.
Igloo Control Panel App
The control page allows easy movement around a Matterport space, and between different Matterport spaces. It’s accessible at http://localhost:800/matterport/control/ in Chrome, or at the same port/page on mobile devices using the media server’s local IP (e.g. http://10.0.0.1:800/matterport/control/). You can use the Mobile link in the page’s Settings menu to easily access the mobile control view using a QR code - see the Settings section below.
You can use the viewport at the top half of the page as normal, and any time you move between sweeps any other connected pages will synchronize.
Favourites
Click the 📖 icon to open/close the favourites menu.
Click a Matterport space within this menu to navigate to that space.
Click a folder to open that folder, showing the items it contains. To get out of a folder, click the back arrow in the top left of the menu.
Click the Add button to add a panorama to your favourites.
Editing the favourites menu
Click the Edit button at the top right of the menu to enter edit mode, giving additional icons within the menu.
The pencil icon renames a favourite item or folder - a dialogue box will appear for you to type in a new name.
If you leave the name of a favourites item blank, it will be change back to its default, Matterport-provided name.
The ❌ icon deletes a favourite item or folder - if it’s a folder, the entire folder and its contents will be deleted.
The ☰ icon is a drag handle. It allows re-organisation of the favourites menu.
Click and drag the drag handle to pick an item up, then drop it to move it to the location indicated.
A white line will show the destination of the item if moving within a list
If you drop an item on top of a folder, it will be moved into that folder - this is indicated by the background colour of the destination folder.
To move an item out of a folder, drop it on top of the back arrow in the top left of the menu
The favourites menu will autoscroll if required when dragging an item around
Press the new folder icon in the top right of the menu to create a new folder
Press Done to leave edit mode.
Floorplans
Clicking the Generate floorplans button in the bottom half of the page begins floorplan generation for the current space.
The panorama viewer at the top half of the screen will cycle through the available floors and take screenshots of them, then arrange them in a viewer in the bottom half of the screen. Once floorplan generation is complete, the panorama viewer will return to its previous position
If floorplans aren’t available for a model, an error message will be displayed - sometimes it’s worth refreshing the control page and re-trying to generate floorplans as some other errors can cause floorplan generation to fail. Usually, though, this is due to the model’s author disabling the viewing of floorplans.
Floor selection
If a model contains multiple floors, this section will display a button for each floor that’s been generated. The current floor is highlighted in green, and the other buttons can be pressed to switch to that floor.
Panorama buttons
The rest of the bottom half of the screen will display the model’s floorplan.
A button is shown for each panorama that the model contains; these can be clicked to navigate directly to that panorama.
The currently active panorama is displayed in red.
The black arrow around the button representing the current panorama shows the orientation of the control page’s panorama viewer - this will rotate when the control page’s panorama camera rotates.
The floorplans also display any labels that the Matterport model’s author has appended to their own floorplans.
Transforming the floorplans
Floorplan images can be zoomed and moved, similar to Google Maps behaviour. On desktop, the scrollwheel will zoom the floorplan and clicking/dragging will move the image.
On mobile, pinch-to-zoom and dragging the image will perform the same functions.
Resetting floorplan transforms (recentring)
This button in the bottom right will reset any zooming/panning the user has performed.
Orbitview
This page is a fullscreen panorama viewer. It’s accessible at http://localhost:800/matterport/orbitview in a WebView or Chrome, or at the same port/page on mobile devices, using the media server’s local IP (e.g. http://10.0.0.1:800/matterport/orbitview).
Its intended use is for things like displaying non-360 degree content on one wall of an Immersive Room, but can be used anywhere you’d like non-360 content.
There aren’t any additional controls but, like other pages, it can be used for navigation - any movements will synchronise with all other connected pages.
Orbitview’s camera orientation can be remotely controlled from the control page - see the section on the Settings menu above.
Bookmarklet
Bookmarklet setup instructions are here: (1.4.0) Utilities | bookmarklet .
Once set up, you can use the bookmarklet on any web page that contains a Matterport model.
Make sure the matterport model you want to visit is playing (i.e. you are able to navigate around the model on the webpage)
Click the bookmarklet from your bookmarks bar, or by viewing bookmarks on your mobile device and tapping it.
A pop-up will appear, and:
If there was only one matterport model on the page, the service will navigate there straight away
If there were multiple matterport model on the page, the popup will display a list of the models it could fine - the service will navigate to the item you click in this list.
If there weren’t any matterport models on the page, or the bookmarklet couldn’t find any, an error will be displayed by the pop-up.
To use the control page, make sure you return to http://localhost:800/matterport/control/
Popups being blocked might interfere with this process.
Licensing
Please contact a member of the Igloo Sales team for the current license fee for the Igloo Matterport Service. The service is charged for as a subscription on an annual basis.
The Matterport API key is stored in the igloo-core-service config.json.
(c) Igloo Vision 2020