MP Embed Dev Blog
Feature Requests, Changelog and Tentative Roadmap
The mini map that you’ve come to love is now going to love you right back! If you ever felt that the minimap was a little bit unpredictable when using it, I am hoping that you will love today’s update!
- When maximized, the mini map and it’s control buttons will not fade with the UI.
- When maximized, you must click the ‘close’ arrow to close it (no more accidentally closing it!)
- When maximized, you can now drag the map around by default. Previously, this option was only available after zooming once.
- When minimized, dragging is disabled.
For my Premium BETA group – Added the ability to add confetti rain when entering a pano. 🙂
MPEmbed Premium will be introduce many new features – including the ability to throw confetti at your viewers. What features would you like to see created?
Posted by MPEmbed – Overlay for Matterport Showcase on Monday, September 10, 2018
Also – Large code restructuring done to improve performance and stability on load.
Scrollbars on the highlight directory and mattertag directory now display by default. Previously, they would only appear when a user would roll their mousewheel.
Mattertags in Infobox (&mt=0) – Removed link to provider for rich content and removed unnecessary space at bottom of window.
I have fixed a problem wherein MPEmbed would not initialize when dollhouse mode was disabled. There is a problem with the SDK wherein it does not send a signal indicating that the tour has started playing under these conditions. I’ve added a stop-gap solution that detects when a viewer has a location within the 3D tour that will initialize MPEmbed if it has not already started.
MPEmbed is now supported by WP3D Models! Read more at WP3DModels.com
Also … MPEmbed Premium is now in private BETA! – Interactive option configuration, creation of custom image filters, ability to assign filters to individual panos and the ability to select which hotspots to show on the minimap are all ready as the initial features on launch.
For those who were paying close attention (or data mining), you may have noticed that MPEmbed.com was framed at metroplex360.com. This was an unfortunate work-around as my SDK key was not setup to run with mpembed.com. That’s no longer the case! For me, this is a huge day for celebration!
Polish UI Translation Available – We’re a little bit ahead of Matterport in offering this, but now &lang=pl will provide polish labels for all MPEmbed Elements. (Courtesy: Marcin Baran)
Tint now works with Hidden Mattertags – You can customize the tint of MPEmbed’s UI elements with &tint=RRGGBB (i.e. &tint=FF0000 would be a very ugly red!). All MPEmbed features can be implemented using Mattertags (see the docs) – but tint was not working! Fixed! (Courtesy: Inge Van Hoof)
The Matterport SDK has a handly feature called ‘navigateToTag’. In theory, this will move you directly to a Mattertag, however, it fails if there is no clear path between where you are standing and where the tag is.
I suspect that internally, this function is what happens when you CLICK on a Mattertag, therefore, when used via the SDK, it can only be expected to work if the tag would be clickable.
It is for this reason that MPEmbed does a few clever things to make it work. When you click on a Mattertag Directory link, it will attempt to ‘navigateToTag’.
When MPEmbed determines that the desired outcome did NOT happen, it will then swap to dollhouse mode, because in dollhouse mode, all tags are accessible via a click.
A user wrote to me saying that it was not working and that MPEmbed became unstable when clicking on links. I tried out their space and confirmed that this was true (and panicked!)
What I realized was that they had disabled the dollhouse feature. For this reason, I have added ‘floorplan’ mode as a fallback for resolving Mattertag links. In the case that both dollhouse and floorplan have been disabled, you’re currently out of luck and the Mattertag directory will gracefully not work. No more
We’re in an https:// world and mixing https:// and http:// creates an error message in your browser. We’re pointing users in the right direction by showing an error when a space loads if their hosted images are using an http:// url. Standards, standards!
Multi-Floor Custom Mini Maps
Did you know that you can replace the minimap with your own? Simply use &minimapurl=https://somedomain.com/path/filename.png.
If you would like to use multiple floors, label each file with 000.png (first floor), 001.png (second floor), 002.png (third floor).
Be sure that your custom mini map lines up with the generated one. This can be tricky and you can read the docs to learn about &minimapoffset to fine tune if your map isn’t a 1:1 match.
The Return of Tooltips
At some point the tool tips that appeared when different elements were hovered stopped appearing. I did not notice.
One of our user’s suggested that we add tool tips. Now we have tooltips again.
Space Title now fades upon start
Before it faded after the dollhouse transition… which was kind of weird, right?
Highlight Reel Fixed
It stopped working. Now it works again! I love when people contact me and let me know 🙂
Labels on Mini Map Fixed
They were appearing under panoramas. That’s not useful. I fixed that.
As Matterport Showcase requires a secure URL (https://), it is important that your custom logo or infobox image is also served via https. While this is documented, a few of our users missed this and I am now filtering out non https URLs and showing a “friendly” error message.
Darker Background for Infobox Mattertags
Many users love the using &mdir=1&mt=0 to hide Mattertags in their space, but provide access to them in the infobox. I’ve increased the weight of the background to add a bit more contrast and also enlarged the ‘Close’ button. It was a little small before, wasn’t it?
The &reels= parameter — which allows you to combine highlight reels from multiple models into the highlight directory box — is an incredibly useful tool. I have a client whose website only accommodates one embedded tour per location page. Using the &reels parameter, I am able to link several tours together for a smooth experience.
I was a little bit baffled last night when I attempted to use a hidden mattertag to set this up. It just wouldn’t work! Ouch! I located the problem — so simple! If anyone else out there encountered this issue, I’d love to apologize for any hair loss it may have caused from scratching your head too much!
Google Analytics integration now logs clicking on Mattertags! This feature previously didn’t work. I’m not sure if the SDK wasn’t behaving properly, but I had written the code and disabled it due to it not working. I restored it and was pleasantly surprised that it was now working. You should be pleasantly surprised too!
WP3D Models Support Coming Soon!
MPEmbed support for WP3D Models is now in a limited beta. I am super excited as all free features of MPEmbed are supported and easily configured in an amazing way. Ross Peterson has made Google Analytics integration seamless as well as tying in many other features. I cannot wait for this to be released!
There were some issues with cached data not being refreshed. This is now resolved! &reels= is now working properly again too!
Some users may have noticed that Matterport Spaces that use MPEmbed do not look as crisp as tours that do not. Some of those users may have also noticed that when you resize your browser window, that suddenly your tour will get sharper.
This is due to a bug in Showcase v3.0 that happens whenever a space is embedded in an iframe. It loads 512k tiles and only 512k tiles. By resizing the iframe, it will force Showcase to check what the best tile size is to serve. I’ve added in code that automatically trips the ‘onresize’ function by ‘wiggling’ the iframe a little bit when each space loads. You can’t tell that it’s doing this — all you’ll notice is that your tour is looking a lot better 🙂
Matterport released Showcase v3.0.3 which contains several undocumented changes to how the SDK works along with some pretty exciting features.
Both the Mattertag Directory and the Minimap Hotspots were affected by changes to the SDK namespaces and these issues have been resolved with feedback to the team at Matterport.
WP Matterport Shortcode + MPEmbed
With WP Matterport Shortcode, you can embed Matterport Spaces in WordPress with a click-to-start thumbnail that opens your space above the site in a distraction-free mode. It speeds up your site’s load time and allows you to rapidly build a responsive gallery with columns. What’s even better is that you can use the plugin to apply MPEmbed settings to all of the tours in the gallery at once!
Oh, and here’s a preview of a feature that you will be seeing in premium:
Ever wanted two spaces for the price of one? 🙂 For apartments and homebuilders, it’s common to flip the orientation of a floorplan — so why not flip the orientation of a Matterport Space? There’s still some work to do on fixing the UI elements 🙂
New ‘saturate’ Filter:
Oh, and I added &filter=saturate — 125% saturation. &filter=oversaturate is 150% saturation and that’s sometimes a bit too much.
The system default scrollbars in the Mattertag Directory and Highlights Directory have been replaced with some pretty sexy scrollbars that autohide – cleaning up the UI a bit more!
In addition, the fading UI has always been a little bit buggy. I optimized and recoded it! Half the code, twice the stability!
You can now choose the order that about panels appear by using an alternate method for enabling panels.
This change has been made possible due to a new, unified method for creating parameters that now checks to make sure that values provided are valid. This new system powers both parameters and hidden mattertags and is a foundation for the upcoming ‘configurator’ inside of MP Embed Premium.
The ‘old’ info= parameter is and will always be supported, but is now undocumented as it is a legacy feature.
I’m excited to announce that we’ve been accepted as an embed provider by Embed.ly. Embed.ly is a service that provides standardization for embedding content within web apps — and is used by Matterport’s Multimedia Mattertags.
What this means is that you can now embed a space that uses mpembed.com INSIDE of a Matterport tour! How cool is that?
If you would like to add a tint to the UI so that it is not black and white, you can use a HEX Code to recolor all elements! Need some help? Visit: https://htmlcolorcodes.com/
|RRGGBB||Tint the UI with a color of your choice!|
I also fixed a bug with the fullscreen button.
MPEmbed overlays a hidden fullscreen button on top of the default Matterport one. This is necessary because otherwise, the default fullscreen button would take the tour fullscreen and leave behind all overlay features. Not cool!
One problem has been that if you are using the highlight reel, the fullscreen button can move. So – simple solution! I’ve added a second hidden fullscreen button. Yes, it’s always there 🙁 If the SDK has a feature wherein I can tell if the highlight reel is or is not open, I can do this properly. For now – problem solved!
MPEmbed on Facebook
Things I Cannot Do Right Now
Mattertags cannot be opened via SDK. This feature will be available VERY soon as well as the ability to instantly transition to where Mattertags are located instead of ‘flying’ to the point. I’m waiting on the Showcase v3.0.6 / SDK v3.0.6 release to enable this.
I cannot change the URL that is shown when clicking the ‘share’ icon or hitting ‘u’ to get a deep link.
I cannot do anything to fix issues caused by the VR Modal Box, Terms of Service or Help Modal Boxes.