====== Example : Tracking viewer changes ====== This example assumes you have successfully [[example_embed|embedded the component]] and [[example_checklicense|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 ======

===== Complete Example ===== Please open the **JavaScript Console** of your browser to see debug messages.