demo_embedded/index.html

<!doctype html>
<html>
  <head>
    <title>StreamBIM embedded demo</title>
    <style>
    html, body {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    body {
      color: black; 
    }
    td, h1 {
      padding: 12px;
    }
    td {
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    input, textarea, #screenshotImg {
      margin-bottom: 8px;
      width: calc(100% - 8px);
    }
    textarea {
      height: 60px;
    }
    .main {
      display: flex;
      width: 100%;
      height: 100%;
    }
    .content {
      overflow: scroll!important; 
      -webkit-overflow-scrolling: touch!important; 
      flex-basis: 320px;
      height: 100%;
    }
    #streambim_target {
      flex-grow: 1;
    }
    #events {
      height: 200px; 
      overflow: scroll;
      padding: 12px;
      margin-bottom: 12px;
      white-space: pre;
    }
    #events li {
      padding: 8px;
    }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="content">
        <h1>StreamBIM embedded demo</h1>
        <div id="events"></div>
        <div id="connecting">
          Waiting for connection...
        </div>
        <div id="buttons" style="display:none;">
          <table>
            <tr><td>
              <button id="getProjectId">Get project ID</button>
              <button id="getUserEmail">Get user email</button>
              <button id="getFloorsBtn">Get floors</button>
            </td></tr>
            <tr><td>
              <button id="getCameraState">Get camera state</button>
              <button id="setLastCameraState">Set last saved camera state</button>
              <button id="setLastCameraPosition">Set last saved camera position</button>
            </td></tr>
            <tr><td>
              <button id="setNavigationMode0Btn">Person mode</button>
              <button id="setNavigationMode1Btn">Spin mode</button>
            <tr><td>
            <tr><td>
              <input id="guidInput" placeholder="GUID/ID - type, click on object or move into space to populate"></input>
              <button id="getSpace">Get space</button>
              <button id="getObjectInfo">Get object info</button>
              <button id="gotoSpace">Go to space</button>
              <button id="gotoFloorBtn">Go to floor</button>
              <button id="highlightObject">Highlight object</button>
              <button id="deHighlightObject">De-highlight object</button>
              <button id="hideObject">Hide object</button>
              <button id="showObject">Show object</button>
              <button id="gotoObject">Goto object</button>
            </td></tr>
            <tr><td>
              <button id="deHighlightAllObjects">De-highlight all objects</button>
              <button id="showAllObjects">Show all objects</button>
            </td></tr>
            <tr><td>
              <button id="findObjectsOfSameTypeBtn">Find objects of same type</button>
              <button id="findObjectsInSameSystemBtn">Find objects in same system</button>
              <button id="showObjectsOfSameTypeBtn">Show objects of same type</button>
              <button id="showObjectsInSameSystemBtn">Show objects in same system</button>
              <button id="getObjectInfoForAllDoors">Get object info for all doors</button>
              <button id="getObjectInfoForObjectsWithHeightOver2000Btn">Get object info for all doors more than 2 meters high</button>
              <button id="zoomToSearchBtn">Zoom to search</button>
              <button id="searchVisModeBtn">Cycle search visualization mode</button>
              <button id="resetObjectSearchBtn">Reset object search</button>
            </td></tr>
            <tr><td>
              <input id="quickSearchInput" placeholder="Search for objects and properties..."></input>
              <button id="quickSearchBtn">Quick search</button>
              <input id="propertyValuesInput" placeholder="psetName~propKey"></input>
              <button id="propertyValuesBtn">Get values for object property</button>
            </td></tr>
            <tr><td>
              <textarea id="stateInput" placeholder="JSON state"></textarea>
              <button id="getViewportState">Get viewport state</button>
              <button id="setViewportState">Set viewport state</button>
            </td></tr>
            <tr><td>
              <textarea id="stylesInput" placeholder="CSS"></textarea>
              <button id="applyStylesBtn">Apply styles</button>
            </td></tr>
            <tr><td>
              <textarea id="customObjectInput" placeholder='{"name": "Custom object", "center": [0.0, 0.0, 0.0]}'></textarea>
              <button id="customObjectBtn">Add object</button>
            </td></tr>
            <tr><td>
              <textarea id="colorCodingInput" placeholder='{"362dngm4r7CQ3PvZ2b5Y_N":"red","362dngm4r7CQ3PvZ2b5Y_8":"white","362dngm4r7CQ3PvZ2b5Y_9":"blue","362dngm4r7CQ3PvZ2b5Y$e":"green"}'></textarea>
              <button id="colorCodeObjectsBtn">Color code objects</button>
              <button id="colorCodeSpacesBtn">Color code spaces</button>
            </td></tr>
            <tr><td>
              <textarea id="layersInput" placeholder='{"HAVNEPARKENFK1ARK62202301231343":false,"HAVNEPARKENFK1RIE29202301231352":false,"HAVNEPARKENFK1RIV39202301231350":false}'></textarea>
              <button id="getLayersBtn">Get layers</button>
              <button id="setLayersBtn">Set layers</button>
            </td></tr>
            <tr><td>
              <button id="showGridsBtn">Show grids</button>
              <button id="hideGridsBtn">Hide grids</button>
            </td></tr>
            <tr><td>
              <img id="screenshotImg" placeholder="Screenshot">
              <button id="takeScreenshotBtn">Get 3D screenshot</button>
              <button id="getOverviewMapImageBtn">Get overview map image</button>
              <button id="getDetailMapImageBtn">Get detail map image</button>
            </td></tr>
            <tr><td>
              <button id="changeSkyColorBtn">Change sky color</button>
            </td></tr>
            <tr><td>
              <button id="getAnnotatedFloorplanBtn">Get annotated floorplan for pick point</button>
            </td></tr>
          </table>
        </div>
      </div>
      <iframe id="streambim_target"></iframe>
    </div>
    <script src="../dist/streambim-widget-api.min.js"></script>
    <script>
      var logEvent = function(text) {
        var element = document.createElement('li');
        element.textContent = text;
        eventsContainer = document.getElementById('events');
        eventsContainer.appendChild(element);
        eventsContainer.scrollTop = eventsContainer.scrollHeight;
      };

      var logError = function(name, error) {
        var text = name + ' failed: ' + error.code;
        if (error.detail) {
          text = text + JSON.stringify(error.detail);
        }
        logEvent(text);
      }

      const iframe = document.getElementById('streambim_target');
      // var projectId = prompt('Project ID')
      // iframe.src = 'https://dev.streambim.com/webapp/default/#/viewer?projectId=' + projectId + '&embedded=true';

      iframe.src = 'http://localhost:4201/#/viewer?projectId=1113&embedded=true'

      StreamBIM.connectToChild(iframe, {
        pickedObject: function (result) {
          if (result.point) {
            logEvent('Clicked object "' + result.guid + '" at (' + result.point[0].toFixed(2) + ', ' + result.point[1].toFixed(2) + ', ' + result.point[2].toFixed(2) + ')');
          } else {
            logEvent('Clicked object "' + result.guid)
          }
          document.getElementById('guidInput').value = result.guid;
          window.pickPoint = result.point;
        },
        spacesChanged: function (guids) {
          if (guids.length) {
            logEvent('Entered space ' + guids[0]);
          } else {
            logEvent('Left building');
          }
        },
        floorChanged: function (floorId) {
          logEvent('Entered floor ' + floorId);
        },
        cameraChanged: function (cameraState) {
          window.cameraState = cameraState;
          logEvent('Camera changed: ' + JSON.stringify(cameraState));
        },
        beforeInit: function() {
          StreamBIM.setStyles('.message-container {background-color: white;}')
          StreamBIM.setSkyColor('white')
          StreamBIM.setNavigationMode(1)
        }
      }).then( function () {
        document.getElementById('connecting').style = 'display:none';
        document.getElementById('buttons').style = '';
        logEvent('Widget ready');
      }).catch( function(error) {
        logEvent('Connect failed: ' + JSON.stringify(error));
      });

      var getProjectIdClicked = function () {
        StreamBIM.getProjectId().then( (result) => {
          logEvent('Got project ID: ' + result);
        }).catch( function(error) {
          logError('getProjectId', error);
        });
      }

      var getUserEmailClicked = function () {
        StreamBIM.getUserEmail().then( (result) => {
          logEvent('Got user email: ' + result);
        }).catch( function(error) {
          logError('getUserEmail failed: ', error);
        });
      }

      var getFloorsClicked = function () {
        StreamBIM.getFloors().then( (result) => {
          logEvent('Got floors: ' + result.map(function(floor){return `${floor.name} (height: ${floor.height.toFixed(2)} - ID: ${floor.id})`}).join(', '));
        }).catch( function(error) {
          logError('getFloors', error);
        });
      }

      var getCameraStateClicked = function () {
        StreamBIM.getCameraState().then( (result) => {
          logEvent('Got camera state: ' + JSON.stringify(result));
          window.lastCameraState = result;
        }).catch( function(error) {
          logError('getCameraState', error);
        });
      }

      var setLastCameraStateClicked = function () {
        StreamBIM.setCameraState(window.lastCameraState).then( (result) => {
          logEvent('setCameraState: ' + result);
        }).catch( function(error) {
          logError('setCameraState', error);
        });
      }

      var setLastCameraPositionClicked = function () {
        StreamBIM.setCameraPosition(window.lastCameraState.position).then( (result) => {
          logEvent('setCameraPosition: ' + result);
        }).catch( function(error) {
          logError('setCameraPosition', error);
        });
      }

      var setNavigationMode0Clicked = function () {
        StreamBIM.setNavigationMode(0).then( (result) => {
          logEvent('setNavigationMode: ' + result);
        }).catch( function(error) {
          logError('setNavigationMode', error);
        });
      }

      var setNavigationMode1Clicked = function () {
        StreamBIM.setNavigationMode(1).then( (result) => {
          logEvent('setNavigationMode: ' + result);
        }).catch( function(error) {
          logError('setNavigationMode', error);
        });
      }

      var getSpaceClicked = function () {
        StreamBIM.getSpaces().then( (result) => {
          if (result.length > 1) {
            logEvent('Got spaces: ' + result.join(', '));
          } else if (result.length == 1) {
            logEvent('Got space: ' + result[0]);
          } else {
            logEvent('No spaces at current location');
          }
          document.getElementById('guidInput').value = result[0] || '';
        }).catch( function(error) {
          logError('getSpaceClicked', error);
        });
      }

      var getObjectInfoClicked = function () {
        var guid = document.getElementById('guidInput').value;
        if (guid) {
          StreamBIM.getObjectInfo(guid).then( (result) => {
            logEvent('Got object info: ' + JSON.stringify(result));
          }).catch( function(error) {
            logError('getObjectInfo', error);
          });
        } else {
          logError('Could not get object info: GUID required');
        }
      }

      var gotoSpaceClicked = function () {
        var guid = document.getElementById('guidInput').value;
        StreamBIM.gotoSpace(guid).then( (result) => {
          logEvent('gotoSpace: ' + result);
        }).catch( function(error) {
          logError('gotoSpace', error);
        });
      }

      var gotoFloorClicked = function () {
        var floorId = document.getElementById('guidInput').value;
        StreamBIM.gotoFloor(floorId).then( (result) => {
          logEvent('gotoFloor: ' + result);
        }).catch( function(error) {
          logError('gotoFloor', error);
        });
      }

      var highlightObjectClicked = function () {
        var guid = document.getElementById('guidInput').value;
        StreamBIM.highlightObject(guid).then( (result) => {
          logEvent('highlightObject: ' + result);
        }).catch( function(error) {
          logError('highlightObject', error);
        });
      }

      var deHighlightObjectClicked = function () {
        var guid = document.getElementById('guidInput').value;
        StreamBIM.deHighlightObject(guid).then( (result) => {
          logEvent('deHighlightObject object: ' + result);
        }).catch( function(error) {
          logError('deHighlightObject', error);
        });
      }

      var deHighlightAllObjectsClicked = function () {
        StreamBIM.deHighlightAllObjects().then( (result) => {
          logEvent('deHighlightAllObjects: ' + result);
        }).catch( function(error) {
          logError('deHighlightAllObjects', error);
        });
      }

      var hideObjectClicked = function () {
        var guid = document.getElementById('guidInput').value;
        StreamBIM.hideObject(guid).then( (result) => {
          logEvent('hideObject: ' + result);
        }).catch( function(error) {
          logError('hideObject', error);
        });
      }

      var showObjectClicked = function () {
        var guid = document.getElementById('guidInput').value;
        StreamBIM.showObject(guid).then( (result) => {
          logEvent('showObject: ' + result);
        }).catch( function(error) {
          logError('showObject', error);
        });
      }

      var gotoObjectClicked = function () {
        var guid = document.getElementById('guidInput').value;
        StreamBIM.gotoObject(guid).then( (result) => {
          logEvent('gotoObject: ' + result);
        }).catch( function(error) {
          logError('gotoObject', error);
        });
      }

      var showAllObjectsClicked = function () {
        StreamBIM.showAllObjects().then( (result) => {
          logEvent('showAllObjects: ' + result);
        }).catch( function(error) {
          logError('showAllObjects', error);
        });
      }

      var getViewportStateClicked = function () {
        StreamBIM.getViewportState().then( (result) => {
          var stringifiedState = JSON.stringify(result);
          logEvent('Got viewport state: ' + stringifiedState);
          document.getElementById('stateInput').value = stringifiedState;
        }).catch( function(error) {
          logError('getViewportState', error);
        });
      }

      var setViewportStateClicked = function () {
        var state = JSON.parse(document.getElementById('stateInput').value);
        StreamBIM.setViewportState(state).then( (result) => {
          logEvent('setViewportState: ' + result);
        }).catch( function(error) {
          logError('setViewportState', error);
        });
      }

      var applyStylesClicked = function () {
        var styles = document.getElementById('stylesInput').value;
        StreamBIM.applyStyles(styles).then( (result) => {
          logEvent('applyStyles: ' + result);
        }).catch( function(error) {
          logError('applyStyles', error);
        });
      }

      var colorCodeObjectsClicked = function () {
        let colorCoding;
        let input = document.getElementById('colorCodingInput').value;
        if (input) {
          colorCoding = JSON.parse(input)
        } else {
          colorCoding = {
            '362dngm4r7CQ3PvZ2b5Y_N': 'red',
            '362dngm4r7CQ3PvZ2b5Y_8': 'white',
            '362dngm4r7CQ3PvZ2b5Y_9': 'blue',
            '362dngm4r7CQ3PvZ2b5Y$e': 'green'
          }
        }
        StreamBIM.colorCodeObjects(colorCoding).then( (result) => {
          logEvent('colorCodeObjects: ' + result);
        }).catch( function(error) {
          logError('colorCodeObjects', error);
        });
      }

      var colorCodeSpacesClicked = function () {
        let colorCoding;
        let input = document.getElementById('colorCodingInput').value;
        if (input) {
          colorCoding = JSON.parse(input)
        } else {
          colorCoding = {
            '3PB1onecrDh9eyOs0PIUei': 'red'
          }
        }
        StreamBIM.colorCodeSpaces(colorCoding).then( (result) => {
          logEvent('colorCodeSpaces: ' + result);
        }).catch( function(error) {
          logError('colorCodeSpaces', error);
        });
      }

      var createObjectClicked = function () {
        let objectInfo;
        let input = document.getElementById('customObjectInput').value;
        if (input) {
          objectInfo = JSON.parse(input)
        } else {
          objectInfo = { name: 'Custom object', center: [0.0, 0.0, 0.0] }
        }
        StreamBIM.createObject(objectInfo).then( (result) => {
          logEvent('Object created: ' + result);
        }).catch( function(error) {
          logError('create object error: ', error);
        });
      }

      var getLayersClicked = function () {
        StreamBIM.getLayers().then( (result) => {
          logEvent('Layers: ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('getLayers', error);
        });
      }

      var setLayersClicked = function () {
        let layers;
        let input = document.getElementById('layersInput').value;
        if (input) {
          layers = JSON.parse(input)
        } else {
          layers = {
            "HAVNEPARKENFK1ARK62202301231343": false,
            "HAVNEPARKENFK1RIE29202301231352":false,
            "HAVNEPARKENFK1RIV39202301231350":false
          }
        }
        StreamBIM.setLayers(layers).then( (result) => {
          logEvent('setLayers: ' + result);
        }).catch( function(error) {
          logError('setLayers', error);
        });
      }

      var showGridsClicked = function () {
        StreamBIM.showGrids().then( (result) => {
          logEvent('Show grids: ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('showGrids', error);
        });
      }

      var hideGridsClicked = function () {
        StreamBIM.hideGrids().then( (result) => {
          logEvent('Hide grids: ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('hideGrids', error);
        });
      }

      var quickSearchClicked = function () {
        var freetext = document.getElementById('quickSearchInput').value;
        StreamBIM.quickSearch(freetext).then( (result) => {
          logEvent('quickSearch: ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('quickSearch', error);
        });
      }

      var propertyValuesClicked = function () {
        var property = document.getElementById('propertyValuesInput').value;
        StreamBIM.valuesForObjectProperty(property).then( (result) => {
          logEvent('propertyValues: ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('propertyValues', error);
        });
      }

      var takeScreenshotClicked = function () {
        StreamBIM.takeScreenshot().then( (result) => {
          logEvent('Got screenshot');
          document.getElementById('screenshotImg').src = result;
        }).catch( function(error) {
          logError('takeScreenshot', error);
        });
      }

      var getOverviewMapImageClicked = function () {
        StreamBIM.getMapImage({width: 1024, height: 768, resolution: 5}).then( (result) => {
          logEvent('Got map image');
          document.getElementById('screenshotImg').src = result;
        }).catch( function(error) {
          logError('getMapImage', error);
        });
      }

      var getDetailMapImageClicked = function () {
        StreamBIM.getMapImage({width: 1024, height: 768, resolution: 1}).then( (result) => {
          logEvent('Got map image');
          document.getElementById('screenshotImg').src = result;
        }).catch( function(error) {
          logError('getMapImage', error);
        });
      }

      var changeSkyColorClicked = function () {
        let color = `rgb(${(255*Math.random()).toFixed()},${(255*Math.random()).toFixed()},${(255*Math.random()).toFixed()})`
        StreamBIM.setSkyColor(color).then( (result) => {
          logEvent('setSkyColor');
        }).catch( function(error) {
          logError('setSkyColor', error);
        });
      }

      var findObjectsOfSameTypeClicked = function () {
        var guid = document.getElementById('guidInput').value;
        if (guid) {
          StreamBIM.getObjectInfo(guid).then( (selectedObject) => {
            var typeGuid = selectedObject.properties['Type Object Global Id']
            if (typeGuid) {
              var query = {
                key: 'Type Object Global Id',
                value: typeGuid,
                limit: 100
              }
              StreamBIM.findObjects(query).then( (result) => {
                logEvent('Objects of same type: \n   - ' + result.join('\n   - '));
              }).catch( function(error) {
                logError('findObjects', error);
              });
            } else {
              throw {code: 'Object has no type object'}
            }
          }).catch( function(error) {
            logError('findObjectsOfSameTypeClicked', error);
          });
        } else {
          logEvent('findObjectsOfSameTypeClicked: GUID required');
        }
      }

      var findObjectsInSameSystemClicked = function () {
        var guid = document.getElementById('guidInput').value;
        if (guid) {
          StreamBIM.getObjectInfo(guid).then( (selectedObject) => {
            var systemGuids = selectedObject.properties['System Global Id']
            if (systemGuids && systemGuids.length) {
              var query = {
                key: 'System Global Id',
                value: systemGuids[0],
                limit: 100
              }
              StreamBIM.findObjects(query).then( (result) => {
                logEvent('Objects in same system: \n   - ' + result.join('\n   - '));
              }).catch( function(error) {
                logError('findObjects', error);
              });
            } else {
              throw {code: 'Object is not part of any system'}
            }
          }).catch( function(error) {
            logError('showObjectsInSameSystem', error);
          });
        } else {
          logEvent('showObjectsInSameSystem failed: GUID required');
        }
      }

      var showObjectsOfSameTypeClicked = function () {
        var guid = document.getElementById('guidInput').value;
        if (guid) {
          StreamBIM.getObjectInfo(guid).then( (selectedObject) => {
            var typeGuid = selectedObject.properties['Type Object Global Id'].split('~').pop()
            if (typeGuid) {
              var query = {
                key: 'Type Object Global Id',
                value: typeGuid,
                limit: 100
              }
              StreamBIM.applyObjectSearch(query, true).then( (result) => {
                logEvent('Objects of same type: \n   - ' + result.join('\n   - '));
              }).catch( function(error) {
                logError('findObjects', error);
              });
            } else {
              throw {code: 'Object has no type object'}
            }
          }).catch( function(error) {
            logError('showObjectsOfSameTypeClicked', error);
          });
        } else {
          logEvent('showObjectsOfSameType: GUID required');
        }
      }

      var showObjectsInSameSystemClicked = function () {
        var guid = document.getElementById('guidInput').value;
        if (guid) {
          StreamBIM.getObjectInfo(guid).then( (selectedObject) => {
            var systemGuids = selectedObject.properties['System Global Id']
            if (systemGuids && systemGuids.length) {
              var query = {
                key: 'System Global Id',
                value: systemGuids[0],
                limit: 100
              }
              StreamBIM.applyObjectSearch(query, true).then( (result) => {
                logEvent('Objects of same type: \n   - ' + result.join('\n   - '));
              }).catch( function(error) {
                logError('findObjects', error);
              });
            } else {
              throw {code: 'Object is not part of any system'}
            }
          }).catch( function(error) {
            logError('showObjectsInSameSystemClicked', error);
          });
        } else {
          logEvent('showObjectsInSameSystemClicked: GUID required');
        }
      }

      var getObjectInfoForAllDoorsClicked = function () {
        var query = {
          filter: {
            key: '@kind',
            value: 'Door'
          },
          page: {
            limit: 1000,
            skip: 0
          }, 
          sort: {
            field: 'Name',
            descending: false
          }
        }
        StreamBIM.getObjectInfoForSearch(query).then(function(result) {
          logEvent('Info for all doors: \n   - ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('getObjectInfoForAllDoorsClicked', error);
        });
      }

      var getObjectInfoForObjectsWithHeightOver2000Clicked = function () {
        var query = {
          filter: {
            rules: [[{
              buildingId: '1000',
              psetName: 'BaseQuantities',
              propKey: 'Height',
              propValue: '2000',
              operator: '>'
            }]]
          },
          page: {
            limit: 1000,
            skip: 0
          }, 
          sort: {
            field: 'Name',
            descending: false
          }
        }
        StreamBIM.getObjectInfoForSearch(query).then(function(result) {
          logEvent('getObjectInfoForObjectsWithHeightOver2000: \n   - ' + JSON.stringify(result));
        }).catch( function(error) {
          logError('getObjectInfoForObjectsWithHeightOver2000', error);
        });
      }

      var zoomToSearchClicked = function () {
        StreamBIM.zoomToSearchResult().then( () => {
          logEvent('zoomToSearch');
        }).catch( function(error) {
          logError('zoomToSearch', error);
        });
      }

      var visMode = 0;

      var searchVisModeClicked = function () {
        let mode = ['HIDDEN', 'FADED', 'ORIGINAL'][visMode%3];
        StreamBIM.setSearchVisualizationMode(mode).then( () => {
          logEvent('setSearchVisualizationMode');
          visMode++;
        }).catch( function(error) {
          logError('setSearchVisualizationMode', error);
        });
      }


      var resetObjectSearchClicked = function () {
        StreamBIM.resetObjectSearch().then( () => {
          logEvent('Object search reset');
        }).catch( function(error) {
          logError('resetObjectSearch', error);
        });
      }

      var getAnnotatedFloorplanClicked = function () {
        let point = window.pickPoint || window.cameraState.position;
        if (point) {
          StreamBIM.getAnnotatedFloorplan(point).then( (res) => {
            let anchor = document.createElement("a");
            anchor.href = res
            anchor.download = 'Document.pdf'
            anchor.target = "_blank"
            anchor.click()
            anchor.remove()
          }).catch( function(error) {
            logError('resetObjectSearch', error);
          });
        } else {
          alert('Move or pick in the scene to get a coordinate first')
        }
      }

      document.getElementById('getProjectId').addEventListener("click", getProjectIdClicked, false);
      document.getElementById('getFloorsBtn').addEventListener("click", getFloorsClicked, false);
      document.getElementById('getUserEmail').addEventListener("click", getUserEmailClicked, false);
      document.getElementById('getCameraState').addEventListener("click", getCameraStateClicked, false);
      document.getElementById('setLastCameraPosition').addEventListener("click", setLastCameraPositionClicked, false);
      document.getElementById('setNavigationMode0Btn').addEventListener("click", setNavigationMode0Clicked, false);
      document.getElementById('setNavigationMode1Btn').addEventListener("click", setNavigationMode1Clicked, false);
      document.getElementById('setLastCameraState').addEventListener("click", setLastCameraStateClicked, false);
      document.getElementById('getSpace').addEventListener("click", getSpaceClicked, false);
      document.getElementById('getObjectInfo').addEventListener("click", getObjectInfoClicked, false);
      document.getElementById('gotoSpace').addEventListener("click", gotoSpaceClicked, false);
      document.getElementById('gotoFloorBtn').addEventListener("click", gotoFloorClicked, false);
      document.getElementById('highlightObject').addEventListener("click", highlightObjectClicked, false);
      document.getElementById('deHighlightObject').addEventListener("click", deHighlightObjectClicked, false);
      document.getElementById('deHighlightAllObjects').addEventListener("click", deHighlightAllObjectsClicked, false);
      document.getElementById('hideObject').addEventListener("click", hideObjectClicked, false);
      document.getElementById('showObject').addEventListener("click", showObjectClicked, false);
      document.getElementById('gotoObject').addEventListener("click", gotoObjectClicked, false);
      document.getElementById('showAllObjects').addEventListener("click", showAllObjectsClicked, false);
      document.getElementById('getViewportState').addEventListener("click", getViewportStateClicked, false);
      document.getElementById('setViewportState').addEventListener("click", setViewportStateClicked, false);
      document.getElementById('applyStylesBtn').addEventListener("click", applyStylesClicked, false);
      document.getElementById('customObjectBtn').addEventListener("click", createObjectClicked, false);
      document.getElementById('colorCodeObjectsBtn').addEventListener("click", colorCodeObjectsClicked, false);
      document.getElementById('colorCodeSpacesBtn').addEventListener("click", colorCodeSpacesClicked, false);
      document.getElementById('getLayersBtn').addEventListener("click", getLayersClicked, false);
      document.getElementById('setLayersBtn').addEventListener("click", setLayersClicked, false);
      document.getElementById('showGridsBtn').addEventListener("click", showGridsClicked, false);
      document.getElementById('hideGridsBtn').addEventListener("click", hideGridsClicked, false);
      document.getElementById('quickSearchBtn').addEventListener("click", quickSearchClicked, false);
      document.getElementById('propertyValuesBtn').addEventListener("click", propertyValuesClicked, false);
      document.getElementById('takeScreenshotBtn').addEventListener("click", takeScreenshotClicked, false);
      document.getElementById('getOverviewMapImageBtn').addEventListener("click", getOverviewMapImageClicked, false);
      document.getElementById('getDetailMapImageBtn').addEventListener("click", getDetailMapImageClicked, false);
      document.getElementById('changeSkyColorBtn').addEventListener("click", changeSkyColorClicked, false);
      document.getElementById('findObjectsOfSameTypeBtn').addEventListener("click", findObjectsOfSameTypeClicked, false);
      document.getElementById('findObjectsInSameSystemBtn').addEventListener("click", findObjectsInSameSystemClicked, false);
      document.getElementById('showObjectsOfSameTypeBtn').addEventListener("click", showObjectsOfSameTypeClicked, false);
      document.getElementById('showObjectsInSameSystemBtn').addEventListener("click", showObjectsInSameSystemClicked, false);
      document.getElementById('zoomToSearchBtn').addEventListener("click", zoomToSearchClicked, false);
      document.getElementById('searchVisModeBtn').addEventListener("click", searchVisModeClicked, false);
      document.getElementById('resetObjectSearchBtn').addEventListener("click", resetObjectSearchClicked, false);
      document.getElementById('getObjectInfoForAllDoors').addEventListener("click", getObjectInfoForAllDoorsClicked, false);
      document.getElementById('getObjectInfoForObjectsWithHeightOver2000Btn').addEventListener("click", getObjectInfoForObjectsWithHeightOver2000Clicked, false);
      document.getElementById('getAnnotatedFloorplanBtn').addEventListener("click", getAnnotatedFloorplanClicked, false);
    </script>
  </body>
</html>