Recent Changes

This is documentation of an archived release.
For documentation on the current version, please check Knowledge Base.

Example : Tracking viewer changes

This example assumes you have successfully embedded the component and validated the license.

Steps to take :

Listen for viewer open and close events.
Listen for individual viewer events.

1. Listen for Panorama open and close events.

The Orbit WebClient Component provides a Panorama component that manages all PanoramaViewer components that are in use. It also dispatches a number of events, such as a viewer opening or closing.

client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.OPENED_VIEWER,
    function(e)
    {
        console.log("Viewer "+ e.viewerId +" is opened.");
    });

2. Listen for individual viewer events.

The Panorama object has a getViewer() method to access individual viewers. We can add and remove event listeners by using the addEventListener() and removeEventListener() methods.

The first 2 functions listed below are “event handler” functions, they are called when respectively the STATE_CHANGED or PHOTO_CHANGED events occur.

/**
 * Handle a viewer state change event.
 * @param e the event object.
 */
function handleStateChanged(e)
{
    var viewer = client.getPanorama().getViewer(e.viewerId);
    console.log("Viewer "+ e.viewerId +" State changed (pan="+ e.pan +",tilt="+ e.tilt +",fov="+e.fov +")");
    console.log("Viewer "+ e.viewerId +" Photo is "+ viewer.getPhoto().photoId);
}
 
/**
 * Handle a viewer photo change event.
 * @param e the event object.
 */
function handlePhotoChanged(e)
{
    var viewer = client.getPanorama().getViewer(e.viewerId);
    console.log("Viewer "+ e.viewerId +" Photo changed to "+ e.panoramaPhoto.photoId +" with location ", e.panoramaPhoto.location);
}
 
/** Listen to "opened-viewer" events. */
client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.OPENED_VIEWER,
    function(e)
    {
        /* Add event listeners. */
        console.log("Viewer "+ e.viewerId +" opened.");
        var viewer = client.getPanorama().getViewer(e.viewerId);
        viewer.addEventListener(orbit.webclient.PanoramaViewerEvent.STATE_CHANGED,handleStateChanged);
        viewer.addEventListener(orbit.webclient.PanoramaViewerEvent.PHOTO_CHANGED,handlePhotoChanged);
    });
 
/** Listen to "closed-viewer" events. */
client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.CLOSED_VIEWER,
    function(e)
    {
        /* Remove event listeners. */
        console.log("Viewer "+ e.viewerId +" closed.");
        var viewer = client.getPanorama().getViewer(e.viewerId);
        viewer.removeEventListener(orbit.webclient.PanoramaViewerEvent.STATE_CHANGED,handleStateChanged);
        viewer.removeEventListener(orbit.webclient.PanoramaViewerEvent.PHOTO_CHANGED,handlePhotoChanged);
    });

Complete Example

<html title="My Publication">
 <head>
  <script type="text/javascript" src="<server>/api/<version>/webclient_api.js"></script>
  <script type="text/javascript">
 
    var client;
 
    /**
     * Handle a viewer state change event.
     * @param e the event object.
     */
    function handleStateChanged(e)
    {
        var viewer = client.getPanorama().getViewer(e.viewerId);
        console.log("Viewer "+ e.viewerId +" State changed (pan="+ e.pan +",tilt="+ e.tilt +",fov="+e.fov +")");
        console.log("Viewer "+ e.viewerId +" Photo is "+ viewer.getPhoto().photoId);
    }
 
    /**
     * Handle a viewer photo change event.
     * @param e the event object.
     */
    function handlePhotoChanged(e)
    {
        var viewer = client.getPanorama().getViewer(e.viewerId);
        console.log("Viewer "+ e.viewerId +" Photo changed to "+ e.panoramaPhoto.photoId +" with location ", e.panoramaPhoto.location);
    }
 
    /**
     * Add the webclient component.
     */
    function addClient()
    {
     // Create the client.
      client = new orbit.webclient.Client(document.getElementById('clientElement'));
      client.addEventListener(orbit.webclient.ClientEvent.READY,
        function()
        {
          // Check license.
          client.setDeveloperId(<DeveloperID>);
          client.setProductId(<ProductID>);
          client.checkLicense();
        });        
 
      client.addEventListener(orbit.webclient.LicenseEvent.GRANTED,
        function(e)
        {
                /* Load a publication */
                client.setServer(<server>/service);
                client.setCredentials(<username>,<password>);
                client.loadPublication(<publicationName>);
 
                /* Listen to "opened-viewer" events. */
                client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.OPENED_VIEWER,
                    function(e)
                    {
                        /* Add event listeners. */
                        console.log("Viewer "+ e.viewerId +" opened.");
                        var viewer = client.getPanorama().getViewer(e.viewerId);
                        viewer.addEventListener(orbit.webclient.PanoramaViewerEvent.STATE_CHANGED,handleStateChanged);
                        viewer.addEventListener(orbit.webclient.PanoramaViewerEvent.PHOTO_CHANGED,handlePhotoChanged);
                    });
 
                /* Listen to "closed-viewer" events. */
                client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.CLOSED_VIEWER,
                    function(e)
                    {
                        /* Remove event listeners. */
                        console.log("Viewer "+ e.viewerId +" closed.");
                        var viewer = client.getPanorama().getViewer(e.viewerId);
                        viewer.removeEventListener(orbit.webclient.PanoramaViewerEvent.STATE_CHANGED,handleStateChanged);
                        viewer.removeEventListener(orbit.webclient.PanoramaViewerEvent.PHOTO_CHANGED,handlePhotoChanged);
                    });
            });     
 
    }
 
  </script>
 </head>
 <body onload="addClient()">
  <div id="clientElement"/>
 </body>
</html>

Complete Example

Please open the JavaScript Console of your browser to see debug messages.

Last modified:: 2019/03/25 11:36