LmvDbg – Learning Tool for View and Data API

In my previous posts, I pointed out a sample called “LmvDbg”. It’s an extremely helpful sample to learn about the client side of View and Data JavaScript API. In fact, I would attribute it as a learning “tool” beyond a sample application. When I “googled” about it, however, it appears that nobody explicitly wrote about this sample. I only see a few posts on forum by the author. I thought it’s worth a special attention through a blog post to raise an awareness about this sample. After the basic understanding of View and Data API, for example, through the labs exercises, it’s probably a good next step to look at this sample as well.

Before I write about the sample itself, let me quickly note about the author and where the name of this sample “LmvDbg” is coming from. This application is written by Jim Awe, chief software architect at Autodesk. He is the original author of other tools which are well known in API communities: e.g., ArxDbg (for AutoCAD ObjectARX API), MgdDbg (for AutoCAD .NET API), and RvtDbg (for Revit, which later renamed as Revit Lookup). Dbg stands for Debug. Lmv stands for Large Model Viewer, which is the name used prior to officially named as View and Data API.

Now, let’s take a look at LmvDbg sample application. To start with, here is the link to the application in action:

http://autodesk-forge.github.io/viewer-javascript-debugger.tool/

Here is the link to the source code:

https://github.com/Autodesk-Forge/viewer-javascript-debugger.tool 

At the time of this writing, the page looks like below. Please note that this application is continuously updated as new functionality is added.  If you are viewing with a small window, the layout may look different.

Warning: somebody seems to keep moving the location of those depository. If you find the link no longer exists, try to search “View and Data API” and “LmvDbg”.

2015_0714_LmvDbg_UI

You are free to explore any menus and selections on this page, of course. But let’s take a look at README link located at the bottom of Viewer API functions listing on the right-hand side. It opens up the detailed explanation about  functionality of this sample, including how to use Chrome Developer Tool in conjunction with the sample. This sample uses JavaScript console.log to “dump” behind the scenes information. You may want to browse through the README. It gives you big picture of the usage of this application beyond tesing viewing the model itself. The images below show how the README looks like.

2015_0714_LmvDbg_Description_1

2015_0714_LmvDbg_Description_2.png

Next, let’s take a look at the first one, Background Color, and see what it does. When you click on the any of link, it opens up the additional UI and the code that implements that functionality below the viewing area, e.g.,

2015_0714_LmvDbg_CodeView.png

Using this, you can play with the functionality while input different value in UI, and see how the code looks like to implement it. In order to debug, you use Chrome Developer Tool. You can put breakpoints to snoop into the code line by line.

As of this writing, following functionalities are included:

Viewer methods

  • background color – setBackgroundColor()
  • navigation tool – get/setActiveNavigationTool(), getDefaultNavigationToolName().
  • hide/show/visibility – areAllVisible(), hideAll, showAll, anyLayerHidden, getHiddennodes, getIsolatedNodes
  • camera – .navigation.getCamera, applyCamera.
  • View – navigation.setView, fitToView, navigation.setWorldUpVector, setViewFromFile, setViewFromViewBox.
  • focal length – get/setFocallength,
  • FOV – get/setFOV, navigation.getFovMin/Max
  • Explode – getExplodeScale, viewer.model.is2d, explode.
  • viewer state – getState, restoreState,
  • screen shot – getScreenShot,
  • search – search, isolate, getProperties,
  • object tree – getObjectTree, isolate, hide, show, fitToView, getProperties
  • mouse-click config – getClickConfig

Other methods (these includes combination of number of functions. Not exhaustive list)

  • Viewer preferences – displayViewCube, setUsePivotAlways, setZoomTowardsPivot, setClickToSetCOI, loadExtension, unloadExtension, SetReverseZoomDirection, setOrbitPastWorldPoles, setPropertiesOnSelect, setUseLeftHandInput, etc.
  • Viewer settings – anyLayerHidden, areAllVisible, canChangeScreenMode, etc.
  • Selection set – getSelection, getSelectionVisibility, getSelectionCount,
  • Navigation settings – navigation.getCamera, getCameraUpVector, getFovMax/Min, etc.
  • Document settings — _loadedDodument.getPath, getPropertyDbPath, getRootItem, getViewablePath, getThumnailPath, getNumViews,
  • Model settings — _viewer.model, model.geomPolyCount, getBoundingBox, getData, getLayerRoot, getRoot, getRootId, getUnitScale, getUnitString, getUpVector, instancePolyCount, is2d, isLoadDone, isObjectTreeCreated.
  • Override color — _viewer.impl.createOverlayScene, imple.removeOverLay, impl.addOverlay, impl.getRenderProxy.
  • Toolbars – getToolbar, Viewing.UI.ControleGroup, Viewing.UI.Button, addControl, etc.

Here is a snapshot of another example showing how the object tree functionality looks like:

2015_0714_LmvDbg_ObjectTree.png

I hope this quick introduction is enough to motivate you to take a look at LmvDbg sample, and encourage you to explore and learn what is possible using View and Data API.

Mikako

Update: 2/8/2017. Updated to new URL’s for demo and github location. Looks like somebody keeps moving around 🙂

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