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.
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>
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
- First, Login to ACC (or BIM360)
- In Doc Management, browse to your favorite folder
- Open Chrome’s Debug console
- Select ‘Network’ Tab, type ‘refresh’, click ‘preview’ (in blue)
- (In BIM360, type ‘token’ instead of ‘refresh’)
- Now, Refresh your Browser
- You'll now see a token in Preview - copy the access_token into <insert TOKEN> (in orange)
- Copy the ACC’s address bar URL, into <insert HUB> (in green)
- 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.
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