Knowledge Base
Recent Changes

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
dev:developer:3dmapping_sdk:viewer_state [2018/06/22 16:31]
jve@orbitgt.com created 		dev:developer:3dmapping_sdk:viewer_state [2020/05/15 11:22]
jeroen removed
Line 1: Line 1:
-====== Persisting Viewer State ======+====== Restoring Viewer State ======
  
-By default closing your host application means that the viewer component is destroyed and loses all state.  The SDK offers a mechanism to a) be notified when its state changes and b) restore the viewer using that state.  These can be used to persist viewer state across host application sessions. +Closing your host application usually means that the viewer component is destroyed and loses all state.  The SDK offers a mechanism to a) be notified when you should save viewer state and b) restore the viewer using that state.  These can be used to persist viewer state across host application sessions.
- +
-This allows you to make the viewer to remember state :  +
-  * Remember last login +
-  * etc...+
  
 This "state" object is made available as a string. This "state" object is made available as a string.
  
-References : +===== Saving state =====
-  * [[startup_option]] +
-  * See [[http://sdk.3dmapping.cloud/18.1.3/reference_docs/orbitgt/mapping3d/sdk/viewer/Viewer3DM.html|SDKViewer]] +
-  * See [[http://sdk.3dmapping.cloud/18.1.3/reference_docs/orbitgt/mapping3d/sdk/viewer/Viewer3DM.html#onAppStateChanged|SDKViewer.onAppStateChanged]]+
  
-===== Listen for state changes and save them =====+To listen for state changes, we listen to the ''onAppStateChanged'' signal of the viewer. Save state whenever it changes.
  
-To listen for state changes, we listen to the ''onAppStateChanged'' signal of the viewer.+Below is a pseudocode example of storing application state in the browser's localStorage.
  
 <code javascript> <code javascript>
-// Listen to the state-changed signal+// Listen to state changes
 viewer.onAppStateChanged.add(handleAppStateChanged); viewer.onAppStateChanged.add(handleAppStateChanged);
 +
 +// Save state
 +function handleAppStateChanged(state) {
 +    window.localStorage.getItem("m3dviewer_state",state);
 +}
 </code> </code>
  
-===== Restore the viewer using previous state =====+===== Loading state on startup =====
  
-When creating the viewer, you have the ability to pass [[startup_option|startup options]].\\  +When creating the viewer, you have the ability to pass [[glossary|startup options]]. The available options are defined by the ''Constants'' class.  You can use the ''Constants.STARTUP_APP_STATE'' startup option to restore a previously saved state.
-The ''appState'' option can be used to provide a state to start from.+
  
-<code javascript> +Startup options can be provided only once, on viewer construction.
-var options = new orbitgt.mapping3d.sdk.viewer.AMap(); +
-options.set("appState",savedAppState); +
-</code>+
  
-==== Example ==== +Below is a pseudocode example of restoring the application state using the state we have previously stored in the browser's localStorage.
- +
-Below is a full javascript example using ''window.localStorage'' for storing state.\\  +
-Try logging in to the viewer with "Remember me" checked, and refresh te page.+
  
 <code javascript> <code javascript>
-var viewer;+// Get a reference to some API elements we will use. 
 +var Constansts = orbitgt.mapping3d.sdk.viewer.Constants; 
 +var SDKViewer = orbitgt.mapping3d.sdk.viewer.SDKViewer; 
 +var AMap = orbitgt.mapping3d.sdk.viewer.AMap;
  
-/** +// Prepare options and set state. 
- * Called when something changes to the viewer state.  +var options = new AMap(); 
- */ +options.set(Constants.STARTUP_APP_STATE,window.localStorage.getItem("m3dviewer_state"));
-function handleAppStateChanged(state) { +
-    // Save state somewhere... +
-    window.localStorage.setItem("m3dviewer_state",state); +
-}+
  
-/** +// Create viewer 
- * Called when the viewer component is ready for interaction. +var appElement = document.getElementById("m3dviewer"); 
- */ +var viewer = new SDKViewer("example application",appElement,options);
-function handleReady() { +
-    // Listen to the state-changed signal +
-    viewer.onAppStateChanged.add(handleAppStateChanged); +
-} +
- +
-/** +
- * Called when the page is full loaded. +
- */ +
-function handleDOMReady() { +
-    // Create viewer startup options +
-    var options = new orbitgt.mapping3d.sdk.viewer.AMap(); +
-    options.set("appState",window.localStorage.getItem("m3dviewer_state")); +
-    // Create viewer +
-    var appElement = document.getElementById("m3dviewer"); +
-    viewer = new orbitgt.mapping3d.sdk.viewer.SDKViewer(appElement,options); +
-    viewer.setSize(600,400); +
-    viewer.isReady.then(handleReady); +
-} +
- +
-// Wait for page to load +
-document.addEventListener("DOMContentLoaded", handleDOMReady);+
 </code> </code>
- 
-<html> 
-<iframe scrolling="no" src="https://sdk.3dmapping.cloud/18.1.3/javascript_examples/example02.html" allowfullscreen="" width="600px" height="400px" frameborder="0"> 
-</iframe> 
-</html> 
-