VISUAL REPORTSWITH CONNECTED DATA

/ Forge Partner DevelopmentPhilippe Leefsma @F3lipek

AGENDA1. Accessing Design Data

2. UI Customization &Overrides

3. Connecting External DataSources

Part I - ACCESSING DESIGN DATA

▴w v A f

▴d

▴o x e C r n i

Accessing the APIhtml: <div id="viewer"> </div>

js: function load (urn) {

initializationStuff(urn, ..., function(svf) {

var viewerContainer = document.getElementById('viewer')

var viewer = new Autodesk.Viewing.Viewer3D(viewerContainer)

viewer.loadModel(getViewablePath(svf))

// call API's

viewer.setBackgroundColor( ... )

VIEWER COMPONENT MODEL

{ name: 'chassis' //display name of the component dbId: 53 //unique id for the component in the model fragIds: [38, 39] //reference the three.js meshes parent: 37 //dbId of the parent node children: [65, 113, 146] //array of children nodes ids }

MODEL STRUCTURE (1)function buildModelTree (model) {

var instanceTree = model.getData().instanceTree

var rootId = instanceTree.getRootId()

var rootNode = { dbId: rootId, name: instanceTree.getNodeName(rootId) }

buildModelTreeRec(rootNode)

return rootNode }

MODEL STRUCTURE (2)function buildModelTreeRec (node) {

instanceTree.enumNodeChildren (node.dbId, function (childId) {

node.children = node.children || []

var childNode = { dbId: childId, name: instanceTree.getNodeName(childId) }

node.children.push(childNode)

buildModelTreeRec(childNode) }) }

NODE FRAGMENTSvar instanceTree = model.getData().instanceTree

var fragIds = []

instanceTree.enumNodeFragments(dbId, function (fragId) {

fragIds.push(fragId) })

MODEL STRUCTURE (3)

function buildModelTreeRec (node) {

node.fragIds = []

instanceTree.enumNodeFragments(dbId, function (fragId) {

node.fragIds.push(fragId) })

instanceTree.enumNodeChildren (node.dbId, function (childId) {

node.children = node.children || []

var childNode = { dbId: childId, name: instanceTree.getNodeName(childId) }

COMPONENT PROPERTIES

model.getProperties(dbId, function(result) {

if (result.properties){

result.properties.forEach( function (prop) {

console.log(prop) }) } }

http://calm-inlet-4387.herokuapp.com/

Part II - UI CUSTOMIZATION& OVERRIDES

2D OVERLAYS

Docking Panel

class CustomPanel extends Autodesk.Viewing.UI.DockingPanel {

constructor(container, title, options = {}) {

super(container, panelId, title, options)

this.container.appendChild(...) }

}

Property Panelclass CustomPropertyPanel extends Autodesk.Viewing.UI.ViewerPropertyPanel {

constructor(viewer) {

super(viewer) }

setProperties (properties) {

properties.push({ ... custom property ... })

super.setProperties(properties) } }

▴w v A f

▴d

▴o x e C r n i

FRAGMENT OVERRIDESMaterial//current model

var model = viewer.model

//create custom materialvar material = new THREE.MeshPhongMaterial({ color: '#F43BC1' //... other properties })

//set material on specific fragId model.getFragmentList().setMaterial( fragId, material)

//force viewer to update scene viewer.impl.invalidate(true)

Overlay//access render proxy var renderProxy = viewer.impl.getRenderProxy( model, fragId)

//clone geometryvar meshProxy = new THREE.Mesh( renderProxy.geometry)

meshProxy.matrix.copy( renderProxy.matrixWorld)

//create 3d overlay viewer.impl.addOverlay( materialName, meshProxy)

// force update viewer.impl.invalidate(true)

Transform// access fragment proxy i.e. THREE.Mesh var fragProxy = viewer.impl.getFragmentProxy( model, fragId)

fragProxy.getAnimTransform()

fragProxy.position = new THREE.Vector3(x, y, z)

//Not a standard three.js quaternion fragProxy.quaternion._x = qx; fragProxy.quaternion._y = qy; fragProxy.quaternion._z = qz; fragProxy.quaternion._w = qw;

fragProxy.updateAnimTransform()

viewer.impl.invalidate(true)

PLAYING WITH SVG

(source: Mozilla Developer Network)

Scalable Vector Graphics (SVG) is an XML-based markuplanguage for describing two-dimensional vector graphics.

SVG is essentially to graphics what HTML is to text.

http://snapsvg.io/

PERCENT: 65

RUN

65%

R:

G:

B:

▴w v A f

▴d

▴o x e C r n i

Coordinates Conversion2D > 3D

function screenToWorld (screenPoint) {

var viewport = viewer.navigation.getScreenViewport()

var n = { x: (screenPoint.x - viewport.left) / viewport.width, y: (screenPoint.y - viewport.top) / viewport.height }

var worldPoint = viewer.utilities.getHitPoint(n.x, n.y)

return worldPoint }

3D > 2Dfunction worldToScreen(worldPoint) {

var p = new THREE.Vector4()

p.x = worldPoint.x p.y = worldPoint.y p.z = worldPoint.z p.w = 1

var camera = viewer.navigation.getCamera()

p.applyMatrix4(camera.matrixWorldInverse) p.applyMatrix4(camera.projectionMatrix)

var screenPoint = viewer.impl.viewportToClient(p.x, p.y)

//snap pixel centre screenPoint.x = Math.floor(screenPoint.x) + 0.5

3D OVERLAYS

Simulation GallerySearch and copy from number of ready‐to‐use simula�on.

Search simulation

 281 Views

External �ow simulation in township planning

Wind is an important environmental factor that influences comfort & safety. Thissimula�on es�mated air flow pa�ern around a highrise structure of the city.

 54 Likes  221 Views

Stop valve with a bend

A valve that can be opened or closed to regulate or stop the flow of fluid in apipe. In this simula�on, pressure drop is es�mated for stop valve with a bend.

 10 Likes

BETA SIGN IN SIGN UPSIMULATION GALLERY

0.0

Max Particles 10

Particle Types 50

PARTICLE CONTROLS

Particle System Properties

▴w v A f

▴d

▴o x e C r n i

0.0FPS

0.0Desintegrations

Custom Meshes

var geometry = new THREE.SphereGeometry(size, 4, 4)

var mesh = new THREE.Mesh( geometry, material)

mesh.position.set(x, y, z)

viewer.impl.scene.add(mesh)

Pier 9 IoT Viewer

Pier 9 IoT Viewer

f▴w v A

▴d

▴o x e C r n i

▴w v A f

▴d

▴o x e C r n i

CSS3DRenderer / CSS3DObjectvar cssRenderer = new THREE.CSS3DRenderer()

viewer.container.appendChild( cssRenderer.domElement)

var glScene = new THREE.Scene()

var iFrame = document.createElement('iframe')

var cssObj = new THREE.CSS3DObject(iFrame)

cssObj.position.set(x, y, z)

cssObj.scale.set(sx, sy, sz)

glScene.add(cssObj)

Part III - CONNECTING EXTERNAL DATASOURCES

http://mongo.autodesk.io/

http://mongo.autodesk.io/

REST / JSONvar router = express.Router()

router.get('/items/:id', function (req, res) {

var item = getItemFromDatabase(id)

res.json(item)})

var app = express()

app.use('/api', router)

app.listen(process.env.PORT)

fetch vs XMLHttpRequestfunction getItem(id, onSuccess, onError) {

fetch('/api/items/' + id).then(function (response) {

response.json(function (item) {

onSuccess(item) })

}, function (error) {

onError(error) }) }

Promises + async / awaitfunction getItem (id) {

return new Promise( async function (resolve, reject) {

try {

var response = await fetch('/api/items/' + id)

var item = await response.json()

return resolve(item) } catch(ex) {

return reject(ex) } }) }

http://prelude.dotdotty.com/

RESOURCES

. . .

https://github.com/leefsmp/forge-connected-data

https://github.com/Developer-Autodesk

library-javascript-viewer-extensions

view.and.data-nodejs-mongo.sample

https://d3js.org

LmvNavTest

VISUAL REPORTSWITH CONNECTED DATA

Q & A

/ Forge Partner DevelopmentPhilippe Leefsma @F3lipek