Lab5 View and Data API Intro – Get Properties & Search

This post was prompted by Sagar’s inquiry about accessing properties of Revit model using View and Data API. He left a comment saying that he followed my tutorial and was able to view the uploaded model successfully. So let’s take View and Data API Intro Lab4 as a starting point and build on top of it. In this post, we are going to add two functionalities that allow you to:

  • Select an object and obtain its properties
  • Search the model for a given string and isolate them in the view

Below is a sample image showing how a final web page may look like. Notice right above the viewer area; there are “Get Properties” and “Search” buttons along with text fields. We are going to add those.

2015_0709_Lab5ViewDataAPIIntro_PropertiesSearch

Modification to Viewer-Embed.js 

In the previous labs exercise, we have included JavaScript file named viewer-embed.js. This is like an utility specific for our minimum project. (If you recall, I restructured it from the original Quick Start Guide to make is easier to use by modularizing it. It assumes for a display of a single 3D model with basic UI turned on.) The basic functionality of this file remains the same. We can use the same code except that there is one line that you need to add; at the end of the initialize function, add the line to return the viewer that is created during the initialization: e.g.,

viewer-embed.js

    initialize: function (getToken, docUrn, viewerElement) {

        …
  
        var viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerElement, {
            extensions: [‘BasicExtension’]
        });

        // Initialize the viewer with the options.
        // Set the callback to actually load a model for viewing.
        Autodesk.Viewing.Initializer(options, function () { // onSuccessCallback
            viewer.initialize();
            ViewerEmbed.loadDocument(viewer, docUrn); // defined below.
        });

        return viewer; // Lab5 added.
    },

This allows the calling function to get hold of the viewer object and access various methods of the viewer. Save viewer-embed.js.

Next, open WebForm1.aspx code. At the top of JavaScript code section for the viewer, declare variable, say _viewer. Set _viewer to assign the return value from ViewerEmbed.initialize().

WebForm1.aspx

        <script>

            var _viewer; // Lab 5.    

            // Initialize the viewer, which includes setting a callback
            // function to load the model.
            // Arguments to ViewerEmbed.initialize:
            // 1) getToken – callback function to get a valid token
            // 2) docUrn – urn of a uploaded model
            // 3) viewerElement – a portion of html document to embed a viewer.

            function initialize() {
                var docUrn = document.getElementById(“TextBoxUrn”).value;
                var viewerElement = document.getElementById(‘viewer’);
                // Lab 5.
                _viewer = ViewerEmbed.initialize(getToken, docUrn, viewerElement);
            }

With this small modification, we can access viewer object through _viewer variable in the client side html file. Additional functionalities will be in JavaScript code.

Get Properties

Now, let’s move on and add a new functionality to get properties of a selected object in the viewer. To do this, we use two methods of _viewer or an instance of Viewer3D class:

  • Viewer3D.getSelection()
  • Viewer3D.getProperties()

getSelection() takes no argument, and returns the array of the currently selected object id’s.

getProperties() takes three arguments: objectId, onSuccessCallback and onErrorCallback; and upon success, it calls onSuccessCallback. The below shows the minimum code to realize this functionality:

getProperties(), propCallback() and propErrorCallback()

            //===================================================================
            // Lab5. Get Properties
            //===================================

            // Callback for “Get Properties” button.  
            // For simplicity, we only show properties of one selected object here.

            function getProperties() {
                if (_viewer.getSelection().length > 0) {
                    var objSelected = _viewer.getSelection()[0];
                    _viewer.getProperties(objSelected, propCallback, propErrorCallback);
                }
            }

            // Callback for _view.getProperties() on success.

            function propCallback(data) {

                var txtArea = document.getElementById(“TextAreaResult”);

                // Check if we got properties.
                if ((data.properties == null) || (data.properties.length == 0)) {
                    txtarea.value = “no properties”;
                    return;
                }

                // Iterate over properties and put together
                // a list of property’s name/value pairs to diplay.
                var str = “”;
                var length = data.properties.length;

                for (var i = 0; i < length; i++) {
                    var obj = data.properties[i];
                    str += obj.displayName + “: “ + obj.displayValue + “\n”;
                }

                txtArea.value = str;
            }

            function propErrorCallback(data) {
                var txtArea = document.getElementById(“TextAreaResult”);
                txtArea.value = “error in getProperties.”;
            }

You can set this function as a callback for a “Get Properties” button click, e.g.,

<input id=”ButtonProperty” type=”button” value=”Get Properties” onclick=”getProperties()/>  
<textarea id=”TextAreaResult” rows=”3″ cols=”80″></textarea>

This is it in terms of getting properties of an selected object. You might be finding it easier than you thought.

You should be able to test your code now. Try uploading a model, select one element, and press “Get Properties” button. If everything is working as intended, you will see a list of properties displayed in the text box above the viewing area.

Search

While I have your attention on this topic, let’s add one more functionality. This time we are going to add “search”. Search is probably one of attractive features of View and Data API. You can search through a model for any attributes or properties attached to individual components of the model. For this, we use two methods of _viewer or Viewer3D class:

  • Viewer3D.search()
  • Viewer3D.isolate()

search() takes four arguments: textToSearch, onSuccessCallback, onErrorCallback, and arrayOfAttributeNames. The fourth one is optional; if omitted, search will be performed for any attributes. And upon success, it calls onSuccessCallback function.

isolate() takes an array of object ids and isolate them or dim objects which is not a part of an array.
We call this to show what objects are returned as a result of search.

In addition, we used clearSelection() to clears current selection.

  • Viewer3D.clearSelection()

But this is to clear the functionality we added earlier to get properties of selected object.

The below shows the minimum code to realize this functionality:

search(), searchCallback() and searchErrorCallback()

            //===================================================================
            // Lab5. Search  
            //===================================

            //  Callback for “Search” button.

            function search() {
                var txtArea = document.getElementById(“TextAreaResult”);
                var searchStr = document.getElementById(“SearchString”).value;

                if (searchStr.length == 0) {
                    txtArea.value = “no search string.”;
                    return;
                }
                _viewer.clearSelection();
                _viewer.search(searchStr, searchCallback, searchErrorCallback);
            }

            // Callback for _viewer.search() on success.

            function searchCallback(ids) {
                _viewer.isolate(ids);
                var txtArea = document.getElementById(“TextAreaResult”);
                txtArea.value = ids;
            }

            // Callback for _viewer.search() on error.

            function searchErrorCallback() {
                var txtArea = document.getElementById(“TextAreaResult”);
                txtArea.value = “error in search.”;
            }

You can set this function as a callback for a Search button click, e.g.,

<input id=”ButtonSearch” type=”button” value=”Search >>” onclick=”search()/>
<input id=”SearchString” type=”text” value=””/>

Now time for another test. This time, type in a word, for example, “door” in the small text box next to “Search >>” button, then click “Search >>”. If everything is working as intended, you will see a collection of object isolated in the viewing area. To finish isolation, right click anywhere in the view and click “Show all objects”.

The updated Labs project source code is attached here: Download View Data API Intro Labs_2015 0710

I hope this gives you a good entry point to further take advantage of the client side View and Data JavaScript API.

For more information, please refer to View and Data API developer portal. In particular, the following sample and documentation are my recommendation to look at about the viewer functionalities:

  • Sample application LmvDbg – a sample web page intended as a leaning tool. *very* useful. Written by Jim Awe.
  • Viewer3D Class description on Reference Guide.

For those who haven’t seen my original post about “Hello World” style introduction to View and Data API, I also put the link here: Autodesk View and Data API Intro Overview

Thank you, Sagar, for prompting this topic.

Mikako

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s