Embed the Tandem Viewer
This page contains a Sample of how to Embed the Tandem Viewer into your own webpage, using Javascript.
For the complete source code, and live demo, click this link.
Configuration
Before running this sample, it is necessary to
- configure Autodesk Tandem to allow service access, see API Basics/Authentication
- Have a 2 legged or 3-legged Access Token
To configure Tandem service access:
- Create new application using APS Portal.
- Open your test facility in Autodesk Tandem.
- Navigate to ‘Users’ then select Service.
- Enter Client ID of an application in the field. Use the Client ID from your APS Application, from step 1 above.
- Set the appropriate permission. A minimum of ‘Read’ is required for Embedded Tandem Viewer permissions.
- Click ‘Add’
Done!
Your new APS Application
can now use 2-legged authentication tokens to read any of the Tandem Data API’s. Tandem Viewer, can view any facility, that is shared with user ‘Client ID’.
To start the Tandem Viewer, we will create a 2-legged token. See References
for 3-legged example.
- Copy your APS Portal
APS_CLIENT_ID
andAPS_CLIENT_SECRET
- Insert
APS_CLIENT_ID:APS_CLIENT_SECRET
into the curl script below. This is based on Authentication field guide - Write down your ‘Access Token’
For example:
curl -v 'https://developer.api.autodesk.com/authentication/v2/token' \
-X 'POST' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Accept: application/json' \
-u 'APS_CLIENT_ID:APS_CLIENT_SECRET' \
-d 'grant_type=client_credentials' \
-d 'scope=data:read'
Result:
{
"token_type": "Bearer",
"expires_in": 1799,
"access_token": "eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5X2RldiJ9.eyJjbGllbnRfaWQiOiJjWTFqcm1rQXhPSVptbnNsOVhYN0puVURtVEVETGNGeCIsImV4cCI6MTQ4NzU2NzgwMSwic2NvcGUiOlsiZGF0YTpyZWFkIl0sImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9qd3RleHAzMCIsImp0aSI6InJZcEZZTURyemtMOWZ1ZFdKSVVlVkxucGNWT29BTDg0dFpKbXlmZ29ORW1MakF0YVVtWktRWU1lYUR2UGlnNGsifQ.uzNexXCeu4efGPKGGhHdKxoJDXHAzLb28B2nSjrq_ys"
}
Creating the HTML & Code
Now that you have an access token…
- copy this HTML, into a text editor / IDE:
It contains code comments. Notice the difference in
options
used by Tandem Viewer, compared with APS Viewer SDK.
<header>
<link href="https://tandem.autodesk.com/viewer/style.min.css" rel="stylesheet" type="text/css">
</header>
<body onLoad="main()">
<div id="viewer"></div>
</body>
<script src="https://tandem.autodesk.com/viewer/viewer3D.min.js"></script>
<script>
// This example demonstrates how to Load a Facility/Model from Tandem, using 2-Legged Auth
async function main() {
const div = document.getElementById("viewer");
const tandem = await new tandemViewer(div);
// Get a list of facilities and open the first one
const FacilityList = await tandem.fetchFacilities();
const facilityNumber = 0;
await tandem.openFacility(FacilityList[facilityNumber]);
}
// initialize Tandem Viewer and load different facilities
class tandemViewer {
constructor(div) {
return new Promise(async (resolve) => {
// run the curl script and copy the fresh Access-Token here
const _access_token = “eyJhbGciOiJIUzI1NiIsImtpZCI6…etc”
// Open Tandem Viewer
const options = {
env: "DtProduction",
api: 'dt',
productId: 'Digital Twins',
corsWorker: true,
};
const av = Autodesk.Viewing;
av.Initializer(options, () => {
this.viewer = new av.GuiViewer3D(div, {
extensions: ['Autodesk.BoxSelection'],
screenModeDelegate: av.NullScreenModeDelegate,
theme: 'light-theme',
});
this.viewer.start();
av.endpoint.HTTP_REQUEST_HEADERS['Authorization'] = `Bearer ${_access_token}`;
this.app = new Autodesk.Tandem.DtApp();
window.DT_APP = this.app;
resolve(this);
});
})
}
async fetchFacilities(URN) {
const FacilitiesSharedWithMe = await this.app.getCurrentTeamsFacilities();
const myFacilities = await this.app.getUsersFacilities();
return [].concat(FacilitiesSharedWithMe, myFacilities);
}
async openFacility(facility) {
this.app.displayFacility(facility, false, this.viewer);
}
}
</script>
Next steps:
- Save this code above, as a
index.html
file - Change the value of
_access_token
, to the value from result of your curl scriptaccess_token
value - open this
index.html
directly in a chrome browser ( file://folder/index.html )
Note: Load a different 3D model, by changing the
facilityNumber = 0;
to1, 2, 3..
etc. This will load different facilities based on the array of facilities returned by the API, from what facilities are shared.
Other Resources
Conclusion:
With everything in place, you should now see your shared facility, similar to this…
An embedded Tandem Viewer, showing a 3D model:
For full source code and live demo, see this here