(This is a continuation from the previous post: Lab3 “View and Data API Web Intro”)
If you look at the Quick Start guide, you can see there are a little bit of coding required for this portion. With very little explanation of what each line of code does (or at least I haven’t seen any), however, it may not be so obvious what the code is doing. In this post, I will try to take a look in more detail. Hopefully it will help understand if you are new to the API.
Let’s take a look at them one by one.
This is the viewer3D library that Autodesk provides. You can find the latest viewer3D from the hosted location:
viewer3D.min.js is the version without any formatting, while viewer3D.js is human-eyes friendly version.
To use it with our application, we include it in HTML with <script/> tag in the <head/> section. e.g.,
where we included the style sheet css file.
Typically, we use this file as provided. Since it is open source, it is also possible to modify for your needs. You can download from the location mentioned above.
This is the portion of the code based from the Quick Start guide, which I have re-structured as an “utility” for our minimum project. It assumes for a display of a single 3D model with basic UI turned on. The code looks like below:
The above code defines two functions: initialize() and loadDocument(). initialize() takes three arguments: 1) the name of a callback function to get a valid access token, 2) urn of an uploaded model, and 3) a html element to embed a viewer. Actual loading happens in the callback defined in loadDocument(). I have added comments about what each line of code does above.
Notice there are two levels of nested callbacks between them. In the first function, initialize, Autodesk.Viewing.Initializer takes a callback as the second argument, which calls the second function loadDocument. And in loadDocument, Autodesk.Viewing.Document.load takes another callback as the second argument, where finally the viewer loads the targeted model.
We can include this file to your HTML page, e.g.,
Later on, when you are ready to explore more features, such as displaying 2D drawing, you can come back to this file and modify for your needs. For now, let’s move on and call this function from your web form.
Embedding the Viewer in a Web Form
In the <head/> section of your web page, include script files we have discussed above, for example:
Add the following scrip to initialize the viewer and load a model:
where initialize() calls ViewerEmbed.initialize() which we defined in viewer-embed.js. The first argument, getToken, is the callback function which will be called from Autodesk.Viewing.Initializer to get a valid access token. In our intro project, we simply get necessary values from the text boxes on the web page that we have defined in the previous labs.
Add a section to embed the viewer, and name it “viewer”. Add a button that trigger the above viewing function, initialize, for example:
An example of final web page might look like this:
Tips: The REST call to register a model for viewing will return the status OK. But the actual process may be still in progress. You may want to add a call to check status. Or you can use the step 12 of LMV Quick Start for testing. Once again, our labs code is the minimum necessary for the viewing. To give you an idea how long it takes, with my environment, rst_basic_sample_project.rvt (which comes with Revit install, 6.44 MB of size) takes about 3 min. rac_advanced_sample_project.rvt (13.4 MB) takes about 10 min.
Troubleshoot: When the model is not ready, Load Error 9 will be returned. If this happens, wait a little bit, and try again. If you see Load Error 4, a problem might be with getting valid access token. Make sure getToken callback function is defined correctly, and not as within a local scope, for example.
This concludes the first tour of View and Data API Intro Labs. I hope you will find it helpful to get started with the View and Data API.
Update 7/11/2015 : In response to the request I received, I’ve added one more lab’s exercise showing how to access and search objects properties using the viewer API. Please take a look at this post if you are interested in continuing with the tutorial:
Lab5 View and Data API Intro – Get Properties & Search