In my previous post I was exposing a JavaScript wrapper for the View & Data which makes it easy to upload and translate your files from a client html page.
I’ve been playing with the Viewer API for couple of months now and I found it useful to use a little wrapper around the client API, so common tasks such as loading/closing a document, saving/restoring a view, getting a property value are more straightforward.
Here is the most basic example on how to use the wrapper:
$(document).ready(function () {
// document URN
var documentId = "dXJuOmFkc2sub2JqZ...real urn’s are longer ...";
// creates new AdnViewerManager instance
adnViewerMng = new Autodesk.ADN.Toolkit.Viewer.AdnViewerManager(
http://your.server.token.api.url.here...,
document.getElementById('ViewerDiv'));
// loads document
adnViewerMng.loadDocument(documentId);
});
A concrete example can be found in my Node.js Sample.
Below is the current code of that wrapper, but you will find the up-to-date version on github, so I recommend you grab this one instead:
Autodesk.ADN.Toolkit.Viewer.js on Github
-
//////////////////////////////////////////////////////////////////////
// Copyright (c) Autodesk, Inc. All rights reserved
// Written by Philippe Leefsma 2014 -ADN/Developer Technical Services
// Permission to use, copy, modify, and distribute this software in
// object code form for any purpose and without fee is herebygranted,
// provided that the above copyright notice appears in all copies and
// that both that copyright notice and the limited warranty and
// restricted rights notice below appear in all supporting
// documentation.
//
// AUTODESK PROVIDES THIS PROGRAM "AS IS" AND WITH ALL FAULTS.
// AUTODESK SPECIFICALLY DISCLAIMS ANY IMPLIED WARRANTY OF
// MERCHANTABILITY OR FITNESS FOR A PARTICULAR USE. AUTODESK, INC.
// DOES NOT WARRANT THAT THE OPERATION OF THE PROGRAM WILL BE
// UNINTERRUPTED OR ERROR FREE.
///////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
// Namespace declaration
//
///////////////////////////////////////////////////////////////////////
var Autodesk = Autodesk || {};
Autodesk.ADN = Autodesk.ADN || {};
Autodesk.ADN.Toolkit = Autodesk.ADN.Toolkit || {};
Autodesk.ADN.Toolkit.Viewer = Autodesk.ADN.Toolkit.Viewer || {};
///////////////////////////////////////////////////////////////////////
// Autodesk.ADN.Toolkit.Viewer.AdnViewerManager
//
///////////////////////////////////////////////////////////////////////
Autodesk.ADN.Toolkit.Viewer.AdnViewerManager = function (
getToken,
viewerContainer) {
///////////////////////////////////////////////////////////////////
// Generate GUID
//
///////////////////////////////////////////////////////////////////
var _newGUID = function () {
var d = new Date().getTime();
var guid = 'xxxx-xxxx-xxxx-xxxx-xxxx'.replace(
/[xy]/g,
function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
});
return guid;
};
///////////////////////////////////////////////////////////////////
// Private Members
//
///////////////////////////////////////////////////////////////////
var _viewerContainer = viewerContainer;
var _viewerDivId = _newGUID();
var _onGeometryLoadedCbs = [];
var _getToken = getToken;
var _viewer = null;
var _self = this;
///////////////////////////////////////////////////////////////////
// Returns adsk viewer
//
///////////////////////////////////////////////////////////////////
this.getViewer = function () {
return _viewer;
};
///////////////////////////////////////////////////////////////////
// Returns viewer div id
//
///////////////////////////////////////////////////////////////////
this.getViewerDivId = function () {
return _viewerDivId;
};
///////////////////////////////////////////////////////////////////
// Initialize Viewer and load document
//
///////////////////////////////////////////////////////////////////
this.loadDocument = function (urn, onViewerInitialized) {
var options = { env: "AutodeskProduction" };
// initialized with access token
if (typeof _getToken == 'string' ||
_getToken instanceof String) {
options.accessToken = _getToken;
}
// initialized with getToken callback
else {
options.getAccessToken = _getToken;
options.refreshToken = _getToken;
}
var viewerElement = _createViewerElement(_viewerContainer);
Autodesk.Viewing.Initializer(options, function () {
_getViewablePath(
urn, null, function (path, is3d) {
if (path) {
if (_viewer) {
_viewer.uninitialize();
}
if (is3d) {
_viewer =
new Autodesk.Viewing.Private.GuiViewer3D(
viewerElement, {});
_viewer.initialize();
_viewer.setProgressiveRendering(true);
_viewer.setQualityLevel(true, true);
}
else {
_viewer =
new Autodesk.Viewing.Private.GuiViewer2D(
viewerElement, {});
_viewer.initialize();
}
_viewer.addEventListener(
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
_onGeometryLoaded);
_viewer.load(path);
if (onViewerInitialized)
onViewerInitialized(_viewer);
}
});
});
//fit view on escape
$(document).keyup(function (e) {
// esc
if (e.keyCode == 27) {
_viewer.fitToView(false);
}
});
};
///////////////////////////////////////////////////////////////////
// Close current document if any
//
///////////////////////////////////////////////////////////////////
this.closeDocument = function () {
var viewerDiv = document.getElementById(_viewerDivId);
if (viewerDiv) {
viewerDiv.parentNode.removeChild(viewerDiv);
}
}
///////////////////////////////////////////////////////////////////
// Register for geometry loaded callback
//
///////////////////////////////////////////////////////////////////
this.registerForGeometryLoaded = function (callback) {
_onGeometryLoadedCbs.push(callback);
};
///////////////////////////////////////////////////////////////////
// Get current view
//
///////////////////////////////////////////////////////////////////
this.getCurrentView = function (viewname) {
var camera = _viewer.getCamera();
var view = {
id: _newGUID(),
name: viewname,
position: _viewer.navigation.getPosition(),
target: _viewer.navigation.getTarget(),
fov: _viewer.getFOV(),
};
return view;
};
///////////////////////////////////////////////////////////////////
// Set view
//
///////////////////////////////////////////////////////////////////
this.setView = function (view) {
_viewer.navigation.setRequestTransition(
true,
new THREE.Vector3(
view.position.x,
view.position.y,
view.position.z),
new THREE.Vector3(
view.target.x,
view.target.y,
view.target.z),
view.fov);
_viewer.resize();
};
///////////////////////////////////////////////////////////////////
// Get Property Value
//
///////////////////////////////////////////////////////////////////
this.getPropertyValue = function (dbId, displayName, callback) {
function _cb(result) {
if (result.properties) {
for (var i = 0; i < result.properties.length; i++) {
var prop = result.properties[i];
if (prop.displayName === displayName) {
callback(prop.displayValue);
return;
}
}
callback('undefined');
}
}
_viewer.getProperties(dbId, _cb);
};
///////////////////////////////////////////////////////////////////
// Get all leaf components
//
///////////////////////////////////////////////////////////////////
this.getAllLeafComponents = function (callback) {
function getLeafComponentsRec(parent) {
var components = [];
if (typeof parent.children !== "undefined") {
var children = parent.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (typeof child.children !== "undefined") {
var subComps = getLeafComponentsRec(child);
components.push.apply(components, subComps);
}
else {
components.push(child);
}
}
}
return components;
}
_viewer.getObjectTree(function (result) {
var allLeafComponents = getLeafComponentsRec(result);
callback(allLeafComponents);
});
};
///////////////////////////////////////////////////////////////////
// Creates new viewer div element
//
///////////////////////////////////////////////////////////////////
var _createViewerElement = function (viewerContainer) {
var viewerDiv = document.getElementById(
_viewerDivId);
if (viewerDiv) {
viewerDiv.parentNode.removeChild(
viewerDiv);
}
viewerDiv = document.createElement("div");
viewerDiv.id = _viewerDivId;
viewerDiv.style.height = "100%";
viewerContainer.appendChild(viewerDiv);
// disable default context menu on viewer div
$('#' + _viewerDivId).on('contextmenu',
function (e) {
e.preventDefault();
});
// disable scrolling on DOM document
// while mouse pointer is over viewer area
$('#' + _viewerDivId).hover(
function () {
var x = window.scrollX;
var y = window.scrollY;
window.onscroll = function () {
window.scrollTo(x, y);
};
},
function () {
window.onscroll = null;
}
);
return viewerDiv;
};
///////////////////////////////////////////////////////////////////
// Get 2d or 3d viewable path
//
///////////////////////////////////////////////////////////////////
var _getViewablePath = function (
documentId, initialItemId, callback) {
if (documentId.indexOf('urn:') !== 0)
documentId = 'urn:' + documentId;
Autodesk.Viewing.Document.load(
documentId,
function (document) {
var items = [];
if (initialItemId) {
items =
Autodesk.Viewing.Document.getSubItemsWithProperties(
document.getRootItem(),
{ 'guid': initialItemId },
true);
}
if (items.length == 0) {
items =
Autodesk.Viewing.Document.getSubItemsWithProperties(
document.getRootItem(),
{ 'type': 'geometry', 'role': '2d' },
true);
if (items.length > 0) {
var path2d = document.getViewablePath(
items[0]);
callback(path2d, false);
}
}
if (items.length == 0) {
items =
Autodesk.Viewing.Document.getSubItemsWithProperties(
document.getRootItem(),
{ 'type': 'geometry', 'role': '3d' },
true);
if (items.length > 0) {
var path3d = document.getViewablePath(
items[0]);
callback(path3d, true);
}
}
},
function (error) {
console.log("Error loading document: " + error)
callback(null);
}
);
};
///////////////////////////////////////////////////////////////////
// Geometry Loaded event
//
///////////////////////////////////////////////////////////////////
var _onGeometryLoaded = function (event) {
_viewer.removeEventListener(
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
_onGeometryLoaded);
_viewer.fitToView(false);
_onGeometryLoadedCbs.forEach(
function (callback) {
callback(_viewer);
});
};
}
Input the name of a bucket and select files to upload. If the bucket doesn't exist it will be created, then the files will be upload and translated, ready for viewing using the output URN.
Token generation cannot be achieved from a browser, so you need API keys to generate the token some other way: using curl, an executable, ADN samples, ...
Access Token:
Bucket name:
Subscribe
Comments