MP Embed Roadmap
Feature Requests, Changelog and Tentative Roadmap
I Hear You!!!
August 16, 2018
- 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.
- Added error messages for using insecure URLs for &minimapurl – 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!
- 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 tooltips. Now we have tooltips again.
August 13, 2018
- 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.
August 9, 2018
- Added error messages for using insecure URLs for &logo and &image – 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.
(And yes, MPEmbed runs from metroplex360.com still — Matterport have still not assigned us a second SDK key despite respectfully asking every few weeks!)
- 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?
August 1, 2018 – &reels now works as a Hidden Mattertag
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!
July 18, 2018 – Bug Fixes + WP3D Models Integration News
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!
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!
July 2, 2018 – MPEmbed in 2k/4k!
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 🙂
July 1, 2018 – Infobox Custom Order Fixed.
The ability to choose the order of the panels in the infobox was recently added and recently broken! This has now been fixed with a quick rewrite. (Thanks to Ross Peterson for discovering this!).
June 30, 2018 – Showcase v3.0.3 Support; WP Matterport Shortcode Support
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.
Also – we have now added support to WP Matterport Shortcode. With MP 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 🙂
Oh, and I added &filter=saturate — 125% saturation. &filter=oversaturate is 150% saturation and that’s sometimes a bit too much.
June 27, 2018 – Cache Optimization
MPEmbed caches data so that reloading is faster. One problem is that when a user changes tour information, caching will prevent updated information from showing. Now, data is refreshed after the space is loaded. While this doesn’t diminish the # of times that data is pulled – if offsets it to happen in the background after a tour is loaded with cached information.
June 26, 2018 – Fading UI Optimization + Sexy Scrollbars
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!
June 25, 2018 – Custom Order for Infobox Panels
You can now choose the order that infobox 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.
June 21, 2018 – Highlight Directory Fixed!
There was a bug where the highlight directory was not working. This was resolved. Thank you to those who reached out!
June 19, 2018 – Embed.ly Support!
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?
June 14, 2018 – Add a Tint to the User Interface!
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!
June 11, 2018 – Presenting: The Optimized Infobox
The infobox was too big. I have nipped and tucked as well as replaced much of the visible content with icons that will display information when a user rolls the mouse over. The only thing I find odd is that the Contact Name seems to be sort of hanging there without any context… which in the default Matterport Infobox, it has context as it is an equal citizen with everything else. As I’ve turned all other information into icons, this little bit of left over text looks a bit odd. I’m thinking about what to do here.
June 3, 2018 – Bug Fixes and Toggle Tabs!
- &play=1 wasn’t working on mobile. This was disabled as it was being repurposed as a workaround and now a workaround has been made for the workaround. (Thanks, Jack Siew!)
- The infobox tabs can now be closed. (Thanks, Jack Siew!)
Feature requests are fun and if it’s easy, I tend to tackle it quickly. If it’s a major feature that will impact the trajectory of MPEmbed, then it may take some time before I tackle it.
I work on this when I am finished with paid client work, although I have at times forgone work in order to spend time on this project as I am heavily invested in it.
So here’s the list of what you guys have requested:
- Easier way to configure tours
MP Embed Premium will have a full user interface, image upload for logos and header images, etc.
- Drone OBJ Support
A user has asked me to support this as a way to introduce tours. Sounds exciting. I may support this via SketchFab API and mash the two up so that any object can be used — or I may simply make a lightweight viewer (or find an open source one) built in Three.js. I think that SketchFab offers some advantages as they have processing that will optimize and
- iGuide-style Interface (Mini Map on Left) // Features from Other Platforms for Matterport
There have been a few people interested in an iGuide-look for Matterport. I’m a bit torn here as I absolutely love the iGuide team and recognize that this UI is a distinctive ‘feature’ of their platform that appeals to a certain demographic. At the same time, I feel that things like this are inevitable and not to toot my own horn here, but objectively, I think that if there is someone who is capable of respectfully imitating and working with other developers, it’s me. I am friends with the guys at iGuide and have nothing but massive respect for them.
There’s a similar potential conflict of interest with my ScreenShare concept that is already a feature in PanoSkin. I independently came up with this idea before I was aware that it is a PanoSkin feature. Likewise, I am friends with the guys over at PanoSkin and have nothing but massive respect for them. They are aware of the fact that I am intending to develop this, but that I am wanting to be respectful and give credit where its due. In this case, it’s a ‘first to market’ credit that may deserve a plug. I am, for instance, not going to be supporting Google Street View tours in MPEmbed, therefore, I am not providing a screen share platform for GSV.
- Different configurations for Mobile / Desktop
A user asks if we can add separate mobile settings so that a tour shows a minimap on the desktop, but not mobile. Interesting idea. I’d prefer to make the mobile map experience worth keeping — but understand that as it is right now, it can be difficult to use on some screens.
My plan with the minimap — which as of 5/24 is now overlapping the infobox on mobile — is to not allow both minimap and infobox to appear at the same time. Working on this at the moment… it’s so fiddly 🙂
- Rotating to landscape mode causes overlap of panels
Investigating. It is likely that the infoboxes will not be viewable on landscape mode, or will need to move to a column layout.
- Too many hotspots
You can shrink the hotspots with (&hotspots=2). Premium will allow you to customize which hotspots appear.
- Rotate the Minimap
WIP -&minimaprotate=90, &minimaprotate=180 &minimaprotate=270. On some maps, this works well. On some, the map moves uncomfortably off screen. This is because my method of facilitating this involved taking a major short cut and I need to go back in and do things programmatically instead of cheating with CSS 🙂
- Follow On Zoom
When zoomed in, center map based on current pano.
- Animated GIF / Custom oEmbed/OpenGraph Start Image
We already have animated GIFs working — (Premium)
- Different / Custom Start Image
- WP3D Models Support
Ross Peterson will be adding support soon.
- WP Matterport Shortcode Support
I maintain this free plugin and will be introducing mpembed to it after Premium launches…
- GDPR Compliance
Not sure what this would entail, but this will be investigated.
- Get a Proper SDK Key
The current SDK key is for metroplex360.com, thus I’m framing a frame within a frame in order to run this all through mpembed.com/show/ — Getting a proper SDK key will reduce the # of iframes being used and remove ‘metroplex360.com’ from fullscreen mode browser messages.
5/22/18 – Multiple-Tour Highlight Directory
- Join the highlight reels from multiple tours into one highlight directory!
- Be sure to enable the highlight directory (&info=hdir)
- Update 5/24 – If you use a tour that does NOT have a highlight reel, the tour’s thumbnail image will be used instead and a single highlight reel entry will be created for the tour. (Requested by: Gerald Smith)
- MPEmbed now loads up to 3 seconds faster too thanks to server-side caching of SDK data.
5/15/18 – Improved French Translation (Thank you, Benoit Penicaut)
5/14/18 – Mini Map Enhancements
- You can zoom into the minimap with the mouse wheel and drag the floorplan around as well as resize the map box with the lower left handle.
- You can now adjust the position of the panos for use on custom maps that are not proportional to the generated map. &minimapoffset=w,h,x,y (width, height, x offset, y offset). All values are in %. This feature is definitely for the PROs out there as correctly moving your pano map and aligning it will take some tweaking. If you are familiar with using your browser’s debug tools, you can fine tune by playing with the CSS and seeing the live preview as you do this. Premium will have a GUI for this!
5/13/18 – Resizeable Mini Map!
- Minimap now features a draggable resize handler on the bottom left!
- Image in details box is now responsive on mobile screens.
5/9/18 – Bring your own map!
- 1/2 Size Hotspots – &hotspots=2
- Minimap on mobile/portrait mode fixes
- You can now swap the generated map with your own
5/1/18 – Minimap Hotspot Visibility Recode
- Minimap – Rewrote the algorithms for calculating the visibility of panoramas while changing floors. The SDK now provides the associated floor for each pano (aka ‘sweep’), however, simply using this data would prevent the appearance of nearby panorama hotspots that would enable a visitor to click a nearby panorama that is set to the next floor. Therefore I have also included all nearby neighbors with a threshold of 2 meters. Nearby neighbors on assigned to different floors appear as slightly smaller blue hotspots.
- Infobox – Reduced maximum height of infobox to allow more room for the floor changing button.
- 4/28/18 – Adjusted opacity of inactive tabs.
- 4/21/18 – Added mousewheel zoom to the minimap; Renamed ‘Close Tag’ to ‘Close’ and moved from bottom left to top right of window for &mt=0 mode; Added a secret code (‘d e b u g’)
- 4/17/18 – &minimap=3 – Starts minimap maximized.
- 4/15/18 – Added an interactive url builder to the homepage; &filter=darken changed from 80% to 90% with 10% Contrast; &filter=darkenmore changed from 60% to 75% with 25% contrast
- 4/10/18 – Fixed a bug where the minimap bounding box would extend beyond the map and block navigation interaction.
- 4/7/18 – Added – Darken Filter (Thanks, Gerald Smith); Removed – &filter=blue, &filter=lum and &filter=killyellow (awww) — Filters now work consistently on all browsers (Except IE); Removed debug code that showed a message when clicking on the active pano in the minimap (Thanks, Isabel Wang); Fixed – &fadehotspots disabled on tablets and mobile correctly (Thanks, Gerald Smith); Passes validator.w3.org — except for allow=”vr” (Thanks, Google for enforcing non-standards); Fixed a bug that caused MPEmbed’s overlay to fail since yesterday (Sorry)
- 4/3/18 – Added &fadehotspots=1 for large tours with many panos. This will automatically fade out inactive hotspots on desktop when the map is not hovered as well as shrinking the hotspots to half their size until hovered individually. Bug fixes: Fixed tour spinning out of control when looking down; Fixed ©right (conflict with debug box); Fixed MiniMap position on smaller screens to not overlap
- 4/2/18 – Updated debug box with full parameters list, minimapfilter selection and fixed debug minimap toggle. oEmbed bug fixes. Figured out why oEmbed doesn’t work in WordPress for Matterport or oEmbed
- 3/29/18 – Added XML support for oEmbed.
- 3/28/18 – Tour Title appears on click-to-start screen; Fixed mobile browser detection; MPEmbed works on iOS / Safari and Chrome again. (Adds &play=1 to bypass opening in a new window); Added a click-to-start start screen for mobile; Added ‘reset’ button next to Mattertag Directory filter; Added oEmbed support! (See it in action with the insert media from URL option in WordPress)
- 3/26/18 – Showcase v3.01. BETA replaces v3.0.0 BETA (new dollhosue transitions, lighter background behind terms). Minimap fixed as the method for generating the vr minimap image url changed.
- 3/25/18 – New Feature – Mattertag content displays in the infobox when hidden in the space (&mt=0). Killer feature; Mobile Mattertag Directory is now alphabetized in drop down list; renamed ‘directory’ to ‘highlights’; UI no longer fades when clicking on a highlight reel entry in the ‘highlights’ tab; Added translations of ‘Details’, ‘Highlights’, ‘Tags’ and ‘Presented by’ in all supported languages using Google Translate.
- 3/24/18 – Infobox – Tabs no longer appear when only one panel is selected (i.e. &info=mdir), fixed showing first available infobox panel if ‘details’ is not enabled; expanded hit target area for arrow buttons in top corners and minimap hotspots.
- 3/23/18 – Mattertag Directory now has colored icons based on the Mattertag color — plus filtering box (add mdirfilter to info panels)
- 3/22/18 – Minimap toggle now appears at the same time as the map (and doesn’t appear if minimap is disabled)
- 3/21/18 – Added ‘minimapfilter’ parameter. Apply any filter to the mini map (&minimapfilter=blackandwhite) for instance.
- 3/19/18 – New website with MP.Embed Premium membership sign up added. (not available to use yet)
- 3/18/18 – Added ‘image’ support in details box.
- 3/17/18 – Removed default Google Analytics UUID (my UUID)
- 3/16/18 – Added OpenGraph / Twitter tag; Added copyright feature to bottom right of player.
- 3/15/18 – Optimized UI for mobile. Mobile dropdowns added for hotspots and Mattertags.
- 3/14/18 – Added UI fading during movement; Added support for Chinese Servers.
- 3/13/18 – Public Beta Launches – Added support for parameters via Mattertags; Changed several parameters
- 3/12/18 – New UI with tabbed infobox box. Removed hdirectory and mdirectory params.
- 3/11/18 – Labels now display on the mini map!
- 3/7/18 – Fixed floorplan from exceeding window height when expanded. Restored Native UI icon for Full Screen.
- 3/6/18 – Google Analytics (&ga=UID) implemented
- 3/5/18 – MP.Embed private beta launches.
- Mattertags cannot be opened via SDK. I’ve requested this feature.
- 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.
- I cannot add full screen for iOS/Safari. It isn’t supported (https://caniuse.com/#feat=fullscreen) and if there was an intelligent work around, I’m sure that BigScreen would support it (https://brad.is/coding/BigScreen/)
- You need to disable the highlight’s reel in order to make full screen work. I cannot detect when the highlight reel is open. This moves the UI’s full screen button. That messes up MPEmbed’s full screen hit target.