Screenshot Extension Manager for the viewer

By Philippe Leefsma

This week post illustrates the concept I exposed in my previous post about building self-contained UI components for the viewer. 

I built a concrete example of such a component making use of the screenshot feature introduced recently in the View & Data API. The viewer.getScreenShot method allows you to programmatically get a screenshot of the current model with specified dimensions and retrieve it as a blob.

Here is the method prototype:

 1 /**
 2  * Captures the current screen image as Blob URL
 3  * Blob URL can be used like a regular image url
 4  * (e.g., window.open, img.src, etc)
 5  * If no parameters are given, returns an image as
 6  * Blob URL, with dimensions equal to current canvas dimensions
 7  * If width and height are given,
 8  * returns asynchronously and calls the callback
 9  * with the resized image as Blob URL
10  * If no callback is given, displays the image in a new window
11  * @param  {int}      [w]  width of the requested image
12  * @param  {int}      [h]  height of the requested image
13  * @param  {Function} [cb] callback
14  * @return {DOMString}     screenshot image Blob URL,
15  *     if no parameters are given
16  */
17 Autodesk.Viewing.Viewer3D.prototype.getScreenShot =
18     function(w, h, cb)

Pretty straightforward to use. However I noticed that I had to provide width and height arguments otherwise it doesn't to work as expected. If you want to use the current canvas size, you can simply invoke the method as follow using jQuery API:

1 var $container = $(viewer.container);
2 
3 viewer.getScreenShot(
4     $container.width(),
5     $container.height(),
6     function(newBlobURL){
7 
8         // use blobUrl ...
9     });

The rest of the code is pretty self-explanatory. The ScreenShot Manager will display a panel that allows you to take screenshots of the current model and shows a preview image. You can either delete it or download it by clicking the image link. For that I used an html5 feature that allows to use a download tag on <a> elements to pass the predefined name of the downloaded resource. Also the <a href> tag can just be set to the blobUrl, not further data manipulation is needed, which I found out after an hour of trials and errors :)

Below is how the result looks like and the complete, self-contained, code for the extension. To use it, simply reference the extension file in your html and invoke it as follow, passing the optional argument createControls if you want to add a toolbar icon, otherwise the panel will just be displayed directly:

1 viewer.loadExtension(
2   'Autodesk.ADN.Viewing.Extension.ScreenShotManager',
3   {
4       createControls: true
5   });

You can also test a live version here directly.

Comments

[SOAL]

Where can I find the viewer repo you used for this example and where can I read about how you connected this file to that viewer?