November 22, 2022

Fast debugging with CodePen, Viewer and BIM 360 ACC docs

Want to debug a BIM360/ACC model with your Viewer extension in under 3 mins ?

No server code, no auth setup, no "deploy to Heroku", "no GitHub push", no App Store integration… just codePen, your browser and fast coding !

 

INTRODUCTION

First, we start with a minimal CodePen…

https://codepen.io/wallabyway/pen/yLEPQap

This code is minimal - it displays a list of BIM360 / ACC Files in a combo box, and when we click on one of them, it loads the Viewer.  I’ve added a tiny Viewer extension, as a skeleton.  All it does is paint things RED, but enough for a code placeholder.

 

codepen-login

 

Looking at the code in the gif above, you can see HTML (top left), and plain Javascript (top right).

The codePen needs two things to operate…

  • a hub URL (green) and
  • a Token (orange)

We put them into the URL parameters here and here (this makes sharing links easier, but more on that later).

https://codepen.io/wallabyway/pen/yLEPQap?hub=<INSERT HUB>&accessToken=<INSERT TOKEN>

accesstoken

Now we need to be fast, since token’s expire quickly, so follow these steps

(Click the video below to see the steps in action)

STEPS

  1. First, Login to ACC (or BIM360)
  2. In Doc Management, browse to your favorite folder
  3. Open Chrome’s Debug console
  4. Select ‘Network’ Tab, type ‘refresh’, click ‘preview’ (in blue)
    1. (In BIM360, type ‘token’ instead of ‘refresh’)
  5. Now, Refresh your Browser
  6. You'll now see a token in Preview - copy the access_token into <insert TOKEN> (in orange)
  7. Copy the ACC’s address bar URL, into <insert HUB> (in green)
  8. Now hit return key in your browser, to see Codepen reload.

 

DONE!  (In under 3 minutes)

You should see the "Combo Box" is now filled with your ACC/BIM 360 files.

file-list

Notice that the Viewer will load the first model in the list, but you can load any model from your ACC / BIM 360 folder - just select it.
If you want to quickly try multi-model loading your ACC/BIM 360 models together, then why not change the 'startViewer(URN)' function.

Quick Extension Debugging

Next, try the sample extension

  • Click on elements, and paint them RED.
  • Modify the RED color value from (1,0,0,1) to green (0,1,0,1).
  • Codepen will auto load after you make a change
  • (see the end of the video above)

 

Easy peasy !

 

 

TECHNICAL DETAILS

The tiny Viewer extension should be used as a starting point for your own exploration.   It’s very minimal:

class MyExtension extends AV.Extension {
  unload() { return true }

  load() {
    this.viewer.addEventListener(AV.SELECTION_CHANGED_EVENT, (e) => this.onSelect(e) );
    return true;
  }

  onSelect(e) {
    const RED_COLOR = new THREE.Vector4(1, 0, 0, 1);
    this.viewer.setThemingColor(e.dbIdArray[0], RED_COLOR );
  }
}
AV.theExtensionManager.registerExtension("MyExtension", MyExtension);

 

Next, is the forge-viewer loading, also minimal…

HTML

<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<link href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" rel="stylesheet">
</head>
<body style="margin:0; overflow-y: hidden;">

<div id="Viewer"></div>
</body>

JAVASCRIPT

function startViewer(urn) {
  AV.Initializer({ env: "AutodeskProduction" }, () => {
    const options = { extensions: ["MyExtension"] };
    const viewer = new AV.Private.GuiViewer3D(div, options);
    viewer.start();
    viewer.setTheme("light-theme");

    AV.Document.load(`urn:${urn}`, (doc) => {
      var viewables = doc.getRoot().getDefaultGeometry();
      viewer.loadDocumentNode(doc, viewables);
    });
  });
}

Notice there is no ‘token’ code.  That’s because the ‘Viewer’ defaults to using the URL parameter ’accessToken’…

Finally, there’s the "Combo Box" code, found at the bottom.

The combo box decodes the URL into Project and Folder IDs and then retrieves the "File List" from Data Management API using the TOKEN.  Now, when you select a combo box item, it loads the URN into the Viewer.

 

SUMMARY

Codepen can be a quick way of sharing ideas and testing out new ones, with the help of BIM360/ACC models.

Just remember - you’ve got to code fast, before your token runs out !

Reach me on Twitter:  @micbeale

Posted by

Michael Beale

Autodesk

Michael Beale is a senior software engineer at Autodesk, where he has been a globe-trotting technical advocate for Forge. Michael focuses on connecting Autodesk cloud data and Autodesk Forge APIs to the browser. He’s also contributed to Autodesk Homestyler, the Forge Large Model Viewer (LMV), Autodesk Prooflab, Stereo-Panorama service with webVR and recently 3D formats, such as glTF and 3D-Tiles-Next...

Related Posts