JSData consists of a convenient framework-agnostic, in-memory cache for managing your data, which then uses adapters to communicate with various persistence layers.The most commonly used adapters are the http adapter, for communicating with a RESTful backend, the localStorage, localForage, and firebase. Other adapters are also available.
In that post I will focus on the localStorage, an html5 feature that allows to store data on the client side. In order to make it a little more exciting, I will let the user store and clear viewer states through a simple demo.
Although JSData is framework-agnostic, it has an AngularJs extension which makes it very convenient to use within an Angular app.
Here is the live sample and the code that goes along. You can play with saving and restoring the viewer states, which will be persisted across sessions. A state includes camera properties, selected/isolated components and rendering settings.
1 //////////////////////////////////////////////////////// 2 // The Angular App 3 // 4 //////////////////////////////////////////////////////// 5 var app = angular.module( 6 'Autodesk.ADN.Demo.Storage.App', 7 [ 8 'js-data', 9 'mgcrea.ngStrap', 10 'mgcrea.ngStrap.tooltip', 11 'mgcrea.ngStrap.helpers.parseOptions' 12 ]); 13 14 //////////////////////////////////////////////////////// 15 // js-data store factory 16 // 17 //////////////////////////////////////////////////////// 18 app.factory('store', function () { 19 20 var store = new JSData.DS(); 21 22 store.registerAdapter( 23 'localstorage', 24 new DSLocalStorageAdapter(), 25 { default: true }); 26 27 return store; 28 }); 29 30 app.factory('StateStore', function (store) { 31 return store.defineResource('state'); 32 }); 33 34 //////////////////////////////////////////////////////// 35 // the App controller 36 // 37 //////////////////////////////////////////////////////// 38 app.controller('Autodesk.ADN.Demo.Storage.Controller', 39 40 function ($scope, $http, $sce, StateStore) { 41 42 //////////////////////////////////////////////// 43 // $scope members 44 // 45 //////////////////////////////////////////////// 46 $scope.items = []; 47 48 $scope.selectedItem = null; 49 50 //////////////////////////////////////////////// 51 // retrieve all stored states 52 // 53 //////////////////////////////////////////////// 54 StateStore.findAll().then(function (states) { 55 56 states.forEach(function(state) { 57 58 $scope.items.push({ 59 value: state.id, 60 label: $sce.trustAsHtml(state.name) 61 }); 62 }); 63 64 console.log(states); 65 }); 66 67 //////////////////////////////////////////////// 68 // AddState callback 69 // 70 //////////////////////////////////////////////// 71 $scope.onAddState = function() { 72 73 var data = $scope.viewer.getState(); 74 75 var name = new Date().toString( 76 'd/M/yyyy H:mm:ss'); 77 78 var stateData = { 79 name: name, 80 data: data 81 } 82 83 StateStore.create(stateData) 84 85 .then(function(state) { 86 87 $scope.items.push({ 88 value: state.id, 89 label: $sce.trustAsHtml(name) 90 }); 91 }); 92 } 93 94 //////////////////////////////////////////////// 95 // ClearStates callback 96 // 97 //////////////////////////////////////////////// 98 $scope.onClearStates = function() { 99 100 $scope.items = []; 101 102 StateStore.destroyAll(); 103 } 104 105 //////////////////////////////////////////////// 106 // watch selectedItem 107 // 108 //////////////////////////////////////////////// 109 $scope.$watch('selectedItem', function() { 110 111 if($scope.selectedItem !== null) { 112 113 var state = StateStore.get( 114 $scope.selectedItem); 115 116 $scope.viewer.restoreState(state.data); 117 } 118 }); 119 120 //////////////////////////////////////////////// 121 // Load urn with token 122 // 123 //////////////////////////////////////////////// 124 $scope.loadURN = function(token, urn) { 125 126 var config = { 127 environment : 'AutodeskProduction' 128 } 129 130 var viewerFactory = 131 new Autodesk.ADN.Toolkit.Viewer. 132 AdnViewerFactory( 133 token, 134 config); 135 136 viewerFactory.getViewablePath (urn, 137 138 function(pathInfoCollection) { 139 140 var viewerConfig = { 141 qualityLevel: [false, false], 142 viewerType: 'GuiViewer3D', 143 lightPreset: 0 144 }; 145 146 $scope.viewer = viewerFactory. 147 createViewer( 148 $('#viewerStorageDemoDiv')[0], 149 viewerConfig); 150 151 $scope.viewer.load( 152 pathInfoCollection.path3d[0].path); 153 }, 154 function (error) { 155 156 console.log('Error: ' + error); 157 }); 158 } 159 160 //////////////////////////////////////////////// 161 // Get token from the gallery (cors request) 162 // enabled only for that origin: 163 // http://adndevblog.typepad.com 164 //////////////////////////////////////////////// 165 $scope.getGalleryToken = function(onSuccess) { 166 167 var url = 168 'http://gallery.autodesk.io/api/tokenx'; 169 170 $.ajax({ 171 url: url, 172 method: 'GET', 173 success: function(data, state, res){ 174 onSuccess(data.access_token); 175 }, 176 error: function(data, state){ 177 console.log( 178 'error performing CORS request...'); 179 console.log(data); 180 } 181 }); 182 } 183 184 //////////////////////////////////////////////// 185 // 186 // 187 //////////////////////////////////////////////// 188 $scope.getGalleryToken(function(token) { 189 $scope.loadURN( 190 token, 191 "... urn ..."); 192 }); 193 });
You can download the complete example from the attachment below:
Storage-demo
Subscribe
Comments