Promise-based Transient Tag Functionality

by Jowed

HTML

<head>
  <script src="https://static.matterport.com/showcase-sdk/latest.js"></script>
</head>
<body>
  <div class="container">
    <iframe id="showcase-iframe" allow='xr-spatial-tracking; fullscreen' frameborder='0'></iframe>
    <button id="btn">
    Add arbitrary tag
    </button>
  </div>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
}
#showcase-iframe{
  width: 100%;
  height: 100%;
}
#btn{
  height: 150px;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key
const modelSid = "iL4RdJqi2yK"; 
const urlParameters = "&play=1&qs=1";

const iframe = document.getElementById('showcase-iframe')
function connect() {
	window.MP_SDK.connect(iframe, key, '')
    .then(loadedShowcaseHandler, console.error);
}
iframe.onload = connect;
iframe.src = `https://my.matterport.com/show/?m=${modelSid}${urlParameters}`;

async function loadedShowcaseHandler(mpSdk) {
	const customTags = [
    {
      label: "Tag 1",
      anchorPosition: {x: 0, y: .2, z: 0},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 1, g: 0, b: 0}
    },
    {
      label: "Tag 2",
      anchorPosition: {x: 0, y: .4, z: 0},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 0, g: 1, b: 0}
    },
    {
      label: "Tag 3",
      anchorPosition: {x: 0, y: .6, z: 0},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 0, g: 0, b: 1}
    },
  ];
	giveTagAddButtonFunctionality(mpSdk);
  const collection = await waitForMPTags(mpSdk);
  giveNewlyAddedTagsCustomFunctionality(mpSdk);
  mpSdk.Mattertag.add(customTags);
}

function giveTagAddButtonFunctionality(mpSdk){
	const btn = document.getElementById('btn');
  btn.addEventListener('click', ()=>{
  	mpSdk.Mattertag.add({
    	label: "Transient Tag",
      anchorPosition: {x: 1.5, y: .2, z: 2},
      stemVector: {x: 0, y: 0, z: 0},
      color: {r: 1, g: 0, b: 1}
    });
  });
}

async function waitForMPTags(mpSdk){
  const promise = new Promise((res, rej) => {
     const initTagSubscription = mpSdk.Mattertag.data.subscribe({
    		onCollectionUpdated: (collection) => {
          console.log("Matterport tags finished initially adding");
          // Handle any post-initial tag added operations here
          initTagSubscription.cancel();
          res(collection);
        }
  	});
  });
  return promise;
}

function giveNewlyAddedTagsCustomFunctionality(mpSdk){
	mpSdk.Mattertag.data.subscribe({
  	onAdded: (idx, item) => {
    	console.log("Transient...