Cloud and Mobile

Using Riot.js + ES6 in viewer extensions

By Philippe Leefsma

That's my first post of 2016, so a Happy New Year! is in order. During the break, I've been playing with a less popular, however rising, JS front-end framework called Riot.js. Advertised on its own website as "a React-like user interface micro-library", Riot lets you define "custom tags" (AKA web components) which can be inserted inside your html as elements with self-contained JavaScript logic.

To me, the most seducing feature of Riot is its tininess and simplicity of use. Here is a picture that worths thousand words:

 

 

 

You can write Riot custom tags inside .tag files which are then referenced by your html the same way you reference a plain .js script. Here is an example extracted from the API documentation, for more details I invite to check the page directly:

1 <my-tag>
2   <h3>
3     {opts.title}
4   </h3>
5 
6   var title = opts.title
7   
8 </my-tag>

That's nice but another cool feature is the possibility to write the component as plain JavaScript using a template string. For a simple tag like this one the template would fit in a single line, however as your components become more complex, you would need to fit the html template on multiple lines to accommodate readability. That's were ES6 multiline strings come into the game. The previous tag would look as follow in plain ES6 js:

 1 riot.tag('my-tag',
 2 
 3   `<h3>
 4     {title}
 5   </h3>
 6   `,
 7 
 8   function(opts) {
 9 
10     this.title = opts.title
11   }
12 );

From there, we can write more complex riot components fitting in a single viewer extension plain js file which can be loaded/unloaded dynamically. Here is a picture of the demo panel I created and a link where you can test it live:


The full implementation of the riot panel extension is here, as you can see zero jQuery in the code:

Automated browser testing with Node.js + Selenium

By Philippe Leefsma

SeleniumHQ is a free set of tools and APIs that allow you to simulate user actions in a browser, locate html elements such as buttons, inputs, send clicks and so on... This is what our development team is using, among other tools, to automate tests with the viewer.

I gave a quick shot at it and it looks promising: Selenium API can be invoked with no less than seven programming languages! Java, C#, Python, Ruby, PHP, Perl, JavaScript (node.js).

I'm a big Node.js addict, so I tested again Node. The steps involved to set it up on your machine are very easy:

1/ Download the Selenium server from their download section

2/ The version at the time of this writing (2.48.2) requires Java SDK7 to be installed, so you may need to update your Java setup

3/ Run the Selenium server: Java -jar path-to-selenium-srv.jar

4/ Write your test and run it based on the framework you selected. If you are using Node, an npm package is available: selenium-webdriver

I created a basic test which already does a bit of work:

- It will start a web browser using the url of my gallery at http://gallery.autodesk.io.  My test supports firefox and chrome (an additional chromedriver package is required for chrome and the setup is slightly different).

- It will then wait for the model buttons to appear and will open a specific one: Engine

- Once the model is loaded, it will open the extension manager dialog and successively toggle each extension On and OFF. Some extensions are displaying an alert dialog, so a specific handling in that case is needed

That's it. Obviously each extension would require to write a specific test in order to be tested properly and some maybe tricky, but this is already a decent start. I'm also attempting to access the browser console output but I couldn't get it to work properly so far... Work in progress.

Here is the full node.js script of my selenium test:

Getting rid of JavaScript callbacks using async/await

By Philippe Leefsma

The awesome async/await syntax originally introduced by Microsoft in C# 4.5 is proposed as syntactic enhancement for ES7, the next JavaScript standard specification. While this feature will not be supported out of the box by browsers before at least a few years, it is however possible to start using today in your code with the help you great tools called transpilers, which translate your ES7 syntax into usable JavaScript supported by current browsers.

The setup is rather straightforward if you are using build tools like Webpack then you can integrate seamlessly the great Babel transpiler in your build process. Babel 6 has just been released and it now supports async/await keywords. For comprehensive details on how to integrate Babel with Webpack, I recommend taking a look at this article.

Now that you can automatically transpile your js code, let's take a look at how to add async/await to make your callbacks go away:

Let's use a viewer method that takes a callback as argument:

viewer.getProperties(dbId, cb)

The first step is to promisify that method. ES6 promises are also supported by Babel, so we can write the following code:

 1 /////////////////////////////////////////////////////////////
 2 // Async wrapper for viewer.getProperties
 3 //
 4 /////////////////////////////////////////////////////////////
 5 viewer.getPropertiesAsync = function(dbId) {
 6 
 7   return new Promise(function(resolve, reject) {
 8 
 9     viewer.getProperties(dbId, function(result){
10 
11       if (result.properties) {
12 
13         resolve(result.properties);
14       }
15       else {
16 
17         reject(new Error('Error getting properties'));
18       }
19     });
20   });
21 }

That's it, we can now asynchronously invoke our wrapper in an async prefixed method as follow:

 1 /////////////////////////////////////////////////////////////
 2 // async method
 3 //
 4 /////////////////////////////////////////////////////////////
 5 async function dumpProperties(dbId) {
 6 
 7   try {
 8 
 9     let properties = await viewer.getPropertiesAsync(dbId);
10 
11     properties.map((prop) => {
12       console.log(prop)
13     });
14   }
15   catch(ex){
16 
17     console.log(ex);
18   }
19 }

Pretty neat right? You can find tons of other articles about the async/await feature in ES7, here is one that I liked particularly. The full source code of my ES7 Async extension for the viewer is available below and you can also test a live version from my gallery (output is dumped to the browser console): Autodesk.ADN.Viewing.Extension.ES7Async

Responsive Web Design for View & Data API - Part II

By Philippe Leefsma

Here is a link to the recording of the presentation I delivered this week at the Responsive Web Design meetup in New York. I was going through the responsive demos and tools I worked on the past few weeks. Take a look at my first blog post on the topic for more technical details.

Here is the slide deck for references to the links I used.

As I'm not a super experienced web designer, if you have feedback about any of this material, I would love to hear it, thanks!

 

 

Animated radial menu with css & jquery

By Philippe Leefsma

Here is a quickie before the weekend. I actually stole the original version from one of Cyrille's recent project. That's an animated radial menu using css and jquery. Click the icon to toggle visibility of the menu items: 

You can download the source from there: radial menu.zip
I also turned it into a viewer extension: select a component and the menu will stick to the hit point when you move the camera. You can test a live version here.

Responsive Web Design for View & Data API - Part I

By Philippe Leefsma

Responsive Web Design defines any approach or technique that makes your web page mobile friendly. It's actually more a concept rather than a well defined set of techniques. 

A responsive website should look good on virtually any screen size: desktops, tablets and smartphones. So should your website be responsive? When we know that over 50% of web browsing is done through mobile nowadays, the answer is definitely yes. Let's put it another way: if your site isn't responsive, you're likely to either lose a lot of traffic or look technologically backward!

I'm travelling to New York next week in order to present at a meetup, so I spent the last couple of weeks catching up with RWD all over the web. Even if I'm still scratching the surface, I feel a bit better about my web design skills and I'm going to share my experience so far...

Before we start, here is a tutorial that should make you familiar with the basics of RWD.

What are the tools which are available to help a novice creating a responsive web page?

1/ Let's start with the easiest! Grab an existing template and tweak it to your needs: 

A lot of existing responsive templates are available on the web, some are for sale and a lot are for free, so you can just browse for something close to what you are looking and start customising it. This obviously requires some html, css and a bit of JavaScript skills unless the template looks and does exactly what you need but it's unlikely. 

Here is a descent tutorial on RWD from w3schools. I used one of their sample to create my first responsive demo:

http://viewer.autodesk.io/node/responsive/demo1

And here a large collection of free responsive templates. I picked two of them and customised it to my needs, integrating them with View & Data API:

http://viewer.autodesk.io/node/responsive/demo2

http://viewer.autodesk.io/node/responsive/demo3

The full source code for those project is on Github.

 

2/ The good old way: Do it yourself!

Templates are ok but at some point you may want to go a step further and either create your own responsive page or upgrade an existing page to be responsive. If your page was not designed to be responsive from the scratch however, it's likely you will have to completely rethink it. But writing a responsive page is not that hard after all...

HTML5 and CSS3 provide a great deal of features to handle responsiveness: Flexbox, Media Queries or Bootstrap will let you create cutting edge webpages.  

 

3/ Use modern user interface design tools

 

There might be plenty of them already on the web and this is an area which should be rapidly expending in the future. I've picked two of them just because they are popular and expose a different experience: Webflow and Bootstrap Studio.

 

Webflow is a pure cloud product and also offers more than just interface design: it's a content management tool and can host your website at the same time, providing an end-to-end experience to the developers. It's UI is pretty slick with lot of features already. The approach is to shield the user from having to write any code at all. I found it pretty intuitive and they have a lot of video tutorials on their site so you can get up to speed quickly. It's free to try and to use to some extent, you can even publish websites. The paid plans start at $20/month and allow you to export your pages to use html/css/js in your own app. There is no way back: you cannot re-import into Webflow a modified project.

 

 

Here is my fancy test webpage, it's just a UI which isn't connected to anything in the background:

http://view-and-data.webflow.io 

 

Bootstrap Studio is a very recent product. As the name gives you a clue, it's based on Bootstrap and the approach is different: this is a desktop app that runs on Windows, Mac and Linux. It's just the first version so it offers much less control than Webflow however it looks promising.  You can create components which are higher level gathering of base html elements, save and share them, so several components are already available from their website: for example responsive navbar, pretty footer, login form and so on... It lets you drag and drop elements to your design and tweak their properties through the UI, however it also lets you directly edit the css, which gives a great share of control over what you can do even if it's not doable from the product directly. As a developer I particularly enjoy that feature. As a desktop product, you buy it once and you own it. It's market at $50 and but discounted at $25 for early adopters. I find it well worths the money.

 

Here is a picture of a test web page I created to play with the tool:

 

 

The test would not be complete without applying a concrete example to the View & Data API. So I experimented creating a responsive dialog interface I could inject in a viewer docking panel and the result is pretty satisfying:

 

 

And this is how the same dialog looks on the narrow screen of my phone, I had to use a scroll container because as the width is shrinking, the content gets shifted vertically, but I feel this is definitely acceptable:

 

 

Live demo is testable here and source code of the extension (es6) here.

There is still a lot to explore about of responsive design with and without View & Data, so stay tuned!

Offline support with View & Data API

By Philippe Leefsma

Since the launch of our View & Data API technology, developers have been asking if it is possible to use the viewer offline. 

For that reason Cyrille created the extract sample that allows you to upload your model to his website and it will let you download a package that contains all the files required for offline viewing.

I grabbed some of Cyrille's code and added it to the View & Data NPM Package, so it offers more flexibility to developers. It is so far exposing just a single method that allows you to download to a target directory on your server the whole directory structure and files required to load the model offline.

Here is what your node.js code may look like if you want to download a model knowing it's URN. You obviously have to use the same credentials that were used to upload and translate that model:

For offline viewing you need to run a local html server, then unzip the lmv-local/version.zip  in your client lib folder and reference the css and viewer3d.js (or viewer3d.min.js for production):

1 <link rel="stylesheet" type="text/css" href="lib/lmv-local/v1.2.21/style.css?v=v1.2.21">
2 <script src="lib/lmv-local/v1.2.21/viewer3D.min.js?v=v1.2.21"></script>

In your JavaScript, load an available viewable path obtained as output of the download:

 1 //<div id="viewer-local"></div> in your html
 2 
 3 var viewer = new Autodesk.Viewing.Private.GuiViewer3D(
 4   document.getElementById('viewer-local'));
 5 
 6 var options = {
 7   docid: viewablePath[0].path,
 8   env: 'Local'
 9 };
10 
11 Autodesk.Viewing.Initializer (options, function () {
12   
13   viewer.initialize();
14   
15   viewer.load(options.docid);
16 });

Here is an example of directory structure and files downloaded for a simple model. If you deal with more complex models, the amount of files can be considerably larger:

Embedding Node.js in your web page with Tonic

By Philippe Leefsma

I stumbled across Tonic few days ago and decided to share it on the blog today. This is another pretty cool tool that revolves around node.js: basically it's a REPL for node that you can embed in any web page. Purpose? It could be used for example in your API documentation to let developers experiment the API or showcase your latest node package without even leaving the page...

Below are two examples that illustrates the use of our View & Data npm package. Oh did you say ES7...? Another nice feature is that Tonic is already supporting the async syntax for JavaScript... Spoiled!
You just have to replace ConsumerKey and ConsumerSecret with your own credentials obtained from our developer portal and you are ready to go:

//////////////////////////////////////////////////// // Written by Philippe Leefsma 2015 - // ADN/Developer Technical Services // // Request View & Data token using async syntax // //////////////////////////////////////////////////// var request = require("request-promise"); var BASE_URL = 'https://developer.api.autodesk.com'; var VERSION = 'v1'; var config = { credentials: { ConsumerKey: "Your ConsumerKey goes here...", ConsumerSecret: "Your ConsumerSecret goes here..." }, //API EndPoints endPoints:{ authenticate: BASE_URL + '/authentication/' + VERSION + '/authenticate' } } async function getToken() { var params = { client_secret: config.credentials.ConsumerSecret, client_id: config.credentials.ConsumerKey, grant_type: 'client_credentials' }; return request.post( config.endPoints.authenticate, { form: params }); } var response = await getToken();

//////////////////////////////////////////////////// // Written by Philippe Leefsma 2015 - // ADN/Developer Technical Services // // Creates or retrieve a bucket using View & Data npm package // //////////////////////////////////////////////////// var Lmv = require('view-and-data'); var request = require('request'); var fs = require('fs'); var config = { credentials: { ConsumerKey: "Your ConsumerKey goes here...", ConsumerSecret: "Your ConsumerSecret goes here..." } } //////////////////////////////////////////////////// // Create or Access a bucket // //////////////////////////////////////////////////// function bucketTest(bucketName) { var lmv = new Lmv(config); function onError(error) { console.log("Mayday we're going dooooooowwwwwwnnn!"); console.log(error); } function onInitialized(response) { console.log('onInitialized'); var createIfNotExists = true; var bucketCreationData = { bucketKey: bucketName, servicesAllowed: [], policy: "transient" }; lmv.getBucket(bucketName, createIfNotExists, bucketCreationData).then( onBucketCreated, onError); } function onBucketCreated(response) { console.log('onBucketCreated'); console.log(response); } lmv.initialise().then(onInitialized, onError); return 'bucketTest returned'; } //Change bucket name too, needs to be unique... bucketTest('adn-tonic-bucket');

Event Watcher Extension for View & Data

By Philippe Leefsma

A quick post about events in the viewer. It's pretty straightforward to listen to events, all you need is knowing the eventId you are looking for. For example the following code illustrates how to set and remove an event listener for the selection changed:

The problem is that unfortunately the documentation of the JavaScript API doesn't expose a list of all available events you can subscribe to. No worries, your humble servant is here to the rescue and he's been skimming the viewer3d.js file to grab the list of all events for you:

Autodesk.Viewing.ANIMATION_READY_EVENT
Autodesk.Viewing.CAMERA_CHANGE_EVENT
Autodesk.Viewing.CUTPLANES_CHANGE_EVENT
Autodesk.Viewing.ESCAPE_EVENT
Autodesk.Viewing.EXPLODE_CHANGE_EVENT
Autodesk.Viewing.FULLSCREEN_MODE_EVENT
Autodesk.Viewing.GEOMETRY_LOADED_EVENT
Autodesk.Viewing.HIDE_EVENT
Autodesk.Viewing.HIGHLIGHT_EVENT
Autodesk.Viewing.ISOLATE_EVENT
Autodesk.Viewing.LAYER_VISIBILITY_CHANGED_EVENT
Autodesk.Viewing.MODEL_ROOT_LOADED_EVENT
Autodesk.Viewing.NAVIGATION_MODE_CHANGED_EVENT
Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT
Autodesk.Viewing.OBJECT_TREE_UNAVAILABLE_EVENT
Autodesk.Viewing.PROGRESS_UPDATE_EVENT
Autodesk.Viewing.RENDER_OPTION_CHANGED_EVENT
Autodesk.Viewing.RESET_EVENT
Autodesk.Viewing.SELECTION_CHANGED_EVENT
Autodesk.Viewing.SHOW_EVENT
Autodesk.Viewing.TOOLBAR_CREATED_EVENT
Autodesk.Viewing.TOOL_CHANGE_EVENT
Autodesk.Viewing.VIEWER_RESIZE_EVENT
Autodesk.Viewing.VIEWER_STATE_RESTORED_EVENT
Autodesk.Viewing.VIEWER_UNINITIALIZED

I also went a bit further and created an extension which allows to set and remove events dynamically while outputting arguments in a logger window.

I took the opportunity to try a library called jquery-jsonview, pretty slick to use and handy it lets you dump a json object into a div and nicely formats it.

One limitation I had when stringifying the json to display it in the jsonview is that some of the events are circular structure, hence throwing exception when passed to the built-in JSON.stringify method. No worries once again because no matter what issue you have, there has to be a lib that can help: ended up using circular-json which does as well a pretty good job at handling circular json objects.

Here is the complete code the for the extension and a live version that can be tried from here. Some of the events cannot be tested from the EventWatcher due to timing or other constraints, for example TOOLBAR_CREATED or GEOMETRY_LOADED will be fired before the event extension is even loaded.

 

NPM Package for View & Data API

By Philippe Leefsma

This week I gave a try at creating my first npm package, bringing a modest contribution to that wonderful technology.

I'm not going to write yet another tutorial about how to publish your own npm package, you should be able to find plenty of resources on the web. Here a pretty neat and concise tutorial I stumble across.

Basically creating an npm package consists of creating a repository on github which include a specific description file package.json, then register that package under a unique name so other programmers will be able to install it easily by typing npm install my-package-name and start using it in their application.

What I liked about the tutorial I pointed out above is that it describes how to create and register your package, but also how to write a test for it using mocha, a test framework and chai, an assertion library.

In the case of View & Data API, any test would need to call a REST webservice, hence it needs to be asynchronous. I had to tweak a little the approach exposed in the post in order to achieve asynchronous tests.

At the moment this version of the package is quite minimalistic but it already allows you to achieve the basic complete workflow from your node application: 

- Generate authetication tokens

- File upload, including large uploads using the resumable API

- Registration (ie. triggering translation of your file)

- And monitoring the translation of your model

In the future, I'm planning to keep supporting and enhance this package to maintain it on the edge of what is doable with View & Data API.

The best example of use is probably the tests I wrote, so here they are. Remember, this is a node.js server-side library, so it doesn't do viewing.

You are able to install it using npm install view-and-data command.

Check view-and-data-npm on github for more details.