Playing with the new View & Data - Markup API

By Philippe Leefsma (@F3lipek)

The latest release of the viewer API is coming with a 2D markup feature that allows you to draw svg shapes on top of your 2d/3d models, potentially save the markup information you created and restore them at a later time.

There is a tutorial here that illustrates the basics of how to work with those markups. However I found it lacks a bit of information and some parts are not completely up-to-date yet, hence this post trying to bring a complement.

First of all the markups is an API-only feature, meaning there is no UI provided out of the box by the viewer to create and manipulate the markups, so you will have to create your own (alternatively get somebody to do it for you - manager saying). This might be a bit of work depending what kind of feature you want to expose to your users. I'm planning to have a custom panel that lets me test all - or most - of the features provided by the Markup API, so better spend a bit of time having a convenient UI.

What the doc doesn't say is that the markup extension isn't part of the viewer3d.js, so you have to include an extra script before attempting to use it:

https://autodeskviewer.com/viewers/2.2/extensions/MarkupsCore.js 

https://autodeskviewer.com/viewers/2.2/extensions/MarkupsCore.min.js (minified version)

You then need to explicitly load the extension in the viewer as parameter when creating the viewer object with options or at a later stage:

1 viewer.loadExtension("Autodesk.Viewing.MarkupsCore");
2 
3 var markupsExtension = viewer.getExtension(
4   "Autodesk.Viewing.MarkupsCore");

You are now all set to start using the extension object by invoking its methods. See there for the complete Markups Core API reference. 

How the API is working? Well you have two modes: Edit and View. In edit mode the user can draw markups onto the screen, your app can then ask the extension to save the current state of the markups as a string. In view mode your app can load previously created markups from the strings into named layers and then toggle ON or OFF those layers at will. Storage of that markup information is upon your responsibility. It is also important to mention that while in edit mode you cannot load previous markups and while in view mode you cannot create new markups, this is as-designed. Finally, while in view mode the extension maintains a stack of actions that allows to easily undo/redo the actions a user may perform: creating markup, moving, resizing, deleting, ...

For more details on how to perform those actions, you can refer to the tutorial mentioned above. One modification to take into account is that methods enterViewMode and leaveViewMode have been renamed respectively show and hide. You however still have methods enterEditMode and leaveEditMode. 

At the time of this writing, I was not able to modify the svg style of the markups, so width, stroke style and colour stick to the default values. I'm working on it and will update the code when I can sort it out...

That's it, most what the API offers now it doable from my custom panel, it can save current markups to named layer and while in view mode you can toggle those layers visibility. It's a demo sample, so it does not persist the layers across sessions or if you unload the extension but from there it would be easily extensible to save that to a database.

Here is how it looks when loaded in the viewer and a link where you can test it live. The next step will be to create my own custom kind of markup (custom EditMode, as mentioned by the tutorial). Stay tuned ...

Complete code with all source files is available from Autodesk.ADN.Viewing.Extension.Markup

Related articles

Building self-contained UI components for the viewer

What is this View & Data API thing anyway?

Integrating Sphero BB8 Droid with View & Data API - Part II

Comments

[Afshin Jafari]

Hi Philippe,
Thank you very much for this article.
However I tried to use this script in my test app and I receive this error:

"MarkupsCore.js:4259 Uncaught TypeError: Cannot read property 'call' of undefined"
in "MarkupTool()" function this line:
Autodesk.Viewing.ToolInterface.call(this);

any help will be appreciated.
Regards,
Afshin

[Philippe Leefsma]

Which version of the viewer API are you using? My live demo is using 2.2 and it works fine. Also did you include the markup script as mentioned in my article?
https://autodeskviewer.com/viewers/2.2/extensions/MarkupsCore.min.js

Here is the demo:
http://viewer.autodesk.io/node/gallery/embed?id=5502100f75464da00d7c4cb0&extIds=Autodesk.ADN.Viewing.Extension.Markup

Philippe.

[Afshin Jafari]

Thanks Philippe for your reply,
this is what I use:

here is the test app: http://aqueous-depths-27001.herokuapp.com/

Regards,
Afshin

[Afshin Jafari]

sorry it removed this section when posting the comment:

script src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"
script src="https://autodeskviewer.com/viewers/2.2/extensions/MarkupsCore.min.js"

[Philippe Leefsma]

What happens if you use the same version of the viewer than the extension?
https://autodeskviewer.com/viewers/2.2/viewer3D.min.js