Autodesk View and Data API Notes and Samples

Here is a summary of my notes from three presentations on the Autodesk View and Data API given by Cyrille Fauvel and Philippe Leefsma, in the two introductory workshops at HackZurich on Friday evening, October 10 and at HackaBxl in Brussels on October 17.

Philippe also presented a very nice and absolutely minimal basic viewer sample in node.js demonstrating how to implement a private web service to obtain the authorisation token without exposing your key and secret in your JavaScript source.

I will be making use of this material again in the coming days, for my Autodesk View and Data API class on Thursday at AU Germany in Darmstadt and at the Berlin Hackathon next weekend.

Autodesk View and Data API Presentation Notes

I already presented a bunch of stuff on the Autodesk View and Data API.

Here is an executive summary of the most important information to get started with it. We used this for the recent hackathons in Zurich, Brussels, and the upcoming one in Berlin.

The presentation is quick and efficient; the slides are discussed in just a couple of minutes, before diving into live source code demonstrations.

Please read the following notes in the context of the accompanying slide deck. By the way, this is the version I will be using for my presentation Autodesk View and Data API – Interaktives 3D Modell in beliebige Webseiten einbetten at Autodesk University Germany in Darmstadt on Thursday October 23.

Introduction

Samples

Main Highlights

More Features

Resources

Two Separate APIs

  1. Server side, to upload and translate.
  2. Web client, a normal HTML5 web page using CSS and JavaScript.

Server API – REST

Client API – JavaScript

Questions and Answers

Philippe's Basic Viewer Sample

Philippe Leefsma presented a sweet client-server sample to demonstrate an easy solution to manage the credentials in a JavaScript viewer application.

The problem is that you do not wish to expose your secret consumer key and consumer secret.

On the other hand, the viewer client needs to use them to access your stored models.

The solution for this is to define a minimal server that provides the required credentials.

The server is called by the client via REST and returns a token without exposing the credentials.

The server can only be called by the client due to the same-origin security policy.

The whole application just consists of four files implementing a node.js application:

Some points of interest:

The contents of the node.js application package are defined by package.json:

  {
    "name": "AdnViewerBasic",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./bin/www"
    },
    "dependencies": {
      "express": "~4.8.6",
      "body-parser": "~1.6.6",
      "cookie-parser": "~1.3.2",
      "morgan": "~1.2.3",
      "serve-favicon": "~2.0.1",
      "debug": "~1.0.4",
      "jade": "~1.5.0",
      "request": "*"
    }
  }

The server provides one single REST entry point, /api/token, to return an authoristion token, and implementes one view, views/index.html, setting up and displaying the viewer canvas:

  var api = require('./routes/api');
  var express = require('express');

  var app = express();

  app.use(express.static(__dirname + '/views'));
  app.use('/api', api);

  app.set('port', process.env.PORT || 3000);

  var server = app.listen(app.get('port'), function() {
    console.log('Server listening on port ' + server.address().port);
  });

The REST API call is implemented like this by routes/api.js:

  var express = require('express');
  var request = require('request');

  var router = express.Router();

  router.get('/token', function (req, res) {

    var params = {
      client_id: '********',
      client_secret: '********',
      grant_type: 'client_credentials'
    }

    request.post(
      'https://developer.api.autodesk.com' +
        '/authentication/v1/authenticate',

      { form: params },

      function (error, response, body) {
        if (!error && response.statusCode == 200) {
          var authResponse = JSON.parse(body);
          res.send(authResponse.access_token);
        }
      });
  });

  module.exports = router;

Cyrille Fauvel used a similar technique to implement the PoiPointer node.js REST server.

The client view is defined by index.html, a minimal sample of setting up and displaying the viewer:

<html>
  <head>
    <title>ADN Viewer Basic</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://viewing.api.autodesk.com/viewingservice/v1/viewers/style.css"/>
    <script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
    <script src="https://rawgit.com/Developer-Autodesk/library-javascript-view.and.data.api/master/js/Autodesk.ADN.Toolkit.Viewer.js"></script>
    <script>
      $(document).ready(function () {

        var adnViewerMng = new Autodesk.ADN.Toolkit.Viewer.AdnViewerManager(
          'http://' + window.location.host + '/api/token',
          document.getElementById('ViewerDiv'));

        adnViewerMng.loadDocument(
          "*X*u*m*k*2*u*2*q*W*0*z*v*y*v*m*l*3*6*W*u*T*w*j*3*j*w*T*t*T*u*D*u*z*v*2*h*C*k*2*=");
      });
    </script>
  </head>

  <body style="margin:0">
    <div id="ViewerDiv">
    </div>
  </body>
</html>

You can start it up on the command line and then check the results in the browser via your localhost at the specified port:

  $ node server.js
  Server listening on port 3000

Cloud and Mobile

Autodesk View and Data API Notes and Samples

By Jeremy Tammik.

I just published a summary of my notes from three presentations on the Autodesk View and Data API given by Cyrille Fauvel and Philippe Leefsma, in the two introductory workshops at HackZurich on Friday evening, October 10 and at HackaBxl in Brussels on October 17.

Philippe also presented a very nice and absolutely minimal basic viewer sample in node.js demonstrating how to implement a private web service to obtain the authorisation token without exposing your key and secret in your JavaScript source.