Setting up iFrame and initialising

add an iFrame to your page, pointed to the following url

<iframe id='plattar-frame' src="https://app.plattar.com/webgleditor/preview/index.html" width='500px' height='500px'></iframe>

Add the following code in your javascript to get a reference to the iframe

window.onload = function(){
  iframe = document.querySelector('#plattar-frame');
}

Sending Messages to Plattar

Add the following script to allow you to send messages to the Plattar window.

function sendMessage(action, data){
  if(!iframe) { // used to repeat the call if the iframe isn't ready yet
    setTimeout(function(){
      sendMessage(action, data);
    }, 500);
    return;
  }

  action = action.toLowerCase();
  if(iframe !== window){
    iframe.contentWindow.postMessage({eventName: action, data: data || {}}, 'https://app.plattar.com');
  }
}

Supported functions:

// Initialise Plattar - replace <appId> with the id of your app as a uuid string
sendMessage('initpreview', {
  appId: <appId>,
  origin: window.origin // This is important so that cross-origin communication will work
});

// Load a scene - replace <sceneID> with the id of the scene you want to load as a uuid string
sendMessage('loadscene', {
  sceneId: <sceneId>
});

// Load a product - replace <productID> with the id of the product and <variationId> for the variation to switch to.
sendMessage('loadproduct', {
  productId: <productId>,
  variationId: <variationId>,
});

// Pause the current scene
sendMessage('pauseScene');

// Play the current scene
sendMessage('playScene');

// Clears a selected annotation
sendMessage('clearAnnotation');

// Makes the Plattar view fullscreen and renders the user's camera in the background (will require https). Optional camera flag to set whether the background camera will render or not
sendMessage('goFullscreen');
sendMessage('goFullscreen', {camera: <boolean - default: true>);

// Resets the camera/model to the original position of the loaded model
sendMessage('resetTransform');

// Activates the help slides. Optional type flag to show either mouse control hints or touch control hints.
sendMessage('activateHelp');
sendMessage('activateHelp', {type: <string - 'mouse|touch'>});

// Toggles the rendering of the background camera. Optional argument to set the camera on/off.
sendMessage('toggleCamera');
sendMessage('toggleCamera', {active: <boolean>);

Receiving messages from Plattar

The following event listener will listen for the Plattar events

window.addEventListener('message', function(e){
  switch(e.data.eventName){
    case <eventName>:
      // do a thing with e.data.data
      break;
  }
});

the object e.data will always be in the form:

e.data = {
  eventName: <string> // Name of the event
  data: <Object> // Custom data per event
}

The current events that Plattar will send out are:

// Sent when Plattar is ready to load a scene
{
  eventName: 'previewready',
  data: {}
}

// Requesting an external page to open from a button click in the scene
{
  eventName: 'openurl',
  data: {
    url: <string> //eg 'https://www.google.com'
  }
}

// This is sent when an annotation is clicked within the scene
{
  eventName: 'selectannotation',
  data: {
    title: <string>, // If its a content annotation
    text: <string>,

    url: <string>, // If its a link annotation

    scene_id: <uuid> // If its loading a different product
  }
}

Put it all together and get...

(function(){
  var iframe;

  window.onload = function(){
    iframe = document.querySelector('#plattar-frame');
    sendMessage('initpreview', {
      appId: 'cbdf17a0-aa06-11e6-bb59-8725806d0efc',
      origin: window.origin
    });
  }

  // Listens for messages coming from parent
  window.addEventListener('message', function(e){
    switch(e.data.eventName){
      case 'previewready':
        loadScene('849a4c40-f698-11e6-b5ea-3ffb8b683410');
        break;

      case 'openurl':
        window.open(e.data.data.url, '_blank');
        break;
    }
  });

  function pause(){
    sendMessage('pauseScene');
  }

  function play(){
    sendMessage('playScene');
  }

  function loadScene(sceneId){
    sendMessage('loadscene', {sceneId: sceneId});
  }

  function sendMessage(action, data){
    if(!iframe) {
      setTimeout(function(){
        sendMessage(action, data);
      }, 500);
      return;
    }

    action = action.toLowerCase();
    if(iframe !== window){
      iframe.contentWindow.postMessage({eventName: action, data: data || {}}, 'https://app.plattar.com');
    }
  }
})();

Did this answer your question?