Knowledge Base - Version 18.0
Recent Changes
This is documentation of an archived release.
For documentation on the current version, please check Knowledge Base.

Example : Export panorama snapshots

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

Steps to take :

  1. Listen to snapshot updates.
  2. Process the snapshot.

1. Listen to snapshot updates.

First we listen to viewer open and close events.

Whenever a viewer is opened, we listen for the PanoramaViewerEvent.SNAPSHOT_UPDATED event. This event is dispatched when one of the viewers updated its snapshot image.

Snapshot update events are dispatched when :

  1. The user presses the camera-icon in the toolbar
  2. The developer calls the updateSnapshot() function.
client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.OPENED_VIEWER,
    function(e)
    {
        var viewer = client.getPanorama().getViewer(e.viewerId);
        viewer.addEventListener(orbit.webclient.PanoramaViewerEvent.SNAPSHOT_UPDATED,handleSnapshotUpdated);
    });
client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.CLOSED_VIEWER,
    function(e)
    {
        var viewer = client.getPanorama().getViewer(e.viewerId);
        viewer.removeEventListener(orbit.webclient.PanoramaViewerEvent.SNAPSHOT_UPDATED,handleSnapshotUpdated);
    });

2. Process the snapshot

There are many things a developer can do with a snapshot image.

  • Add the snapshot to a list of snapshots on the page.
  • Send the image to the server for storage.
  • Open the image in a popup.
  • …

The handler below demonstrates adding the snapshot to the html document. 

function handleSnapshotUpdated(e)
{
    var viewer = client.getPanorama().getViewer(e.viewerId);
    $('#snapshots').append("<img src='data:image/jpeg;base64,"+viewer.getSnapshot()+"'/>");
}

The handler below demonstrates opening a popup showing the snapshot. 

function handleSnapshotUpdated(e)
{
    var viewer = client.getPanorama().getViewer(e.viewerId);
    var popup = window.open("","_blank");
    $(popup.document.body).append("<img src='data:image/gif;base64,"+viewer.getSnapshot()+"'/>");
}

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;       
 
    function handleSnapshotUpdated(e)
    {
        var viewer = client.getPanorama().getViewer(e.viewerId);
        $('#snapshots').append("<img src='data:image/gif;base64,"+viewer.getSnapshot()+"' height='100'/>");
    }
 
    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)
            { 
                client.setSetting("OpenSnapshots","false");
                client.setServer("http://developer.orbitgis.com/service");
                client.setCredentials("dev","dev");
                client.loadPublication("Sint-Niklaas_31370");             
                client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.OPENED_VIEWER,
                    function(e)
                    {
                        var viewer = client.getPanorama().getViewer(e.viewerId);
                        viewer.addEventListener(orbit.webclient.PanoramaViewerEvent.SNAPSHOT_UPDATED,handleSnapshotUpdated);
                    });
                client.getPanorama().addEventListener(orbit.webclient.PanoramaEvent.CLOSED_VIEWER,
                    function(e)
                    {
                        var viewer = client.getPanorama().getViewer(e.viewerId);
                        viewer.removeEventListener(orbit.webclient.PanoramaViewerEvent.SNAPSHOT_UPDATED,handleSnapshotUpdated);
                    });
            });
    }
 
  </script>
 </head>
 <body onload="addClient()">
  <div id="clientElement"/>
  <span id="snapshots"/>
 </body>
</html>

Result

Snapshots (to add a snapshot, click the toolbar camera button) :

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