autodesk-forge / forge-bim360reports Goto Github PK

BIM360 project dashboard example: Demonstrates how to extract properties from BIM360 elements and generate a project dashboard

Home Page: https://bim360reports.autodesk.io/

License: MIT License

JavaScript 80.15% CSS 1.16% HTML 18.70%

javascript data-management viewer bim360 d3js jstree jquery express

forge-bim360reports's Introduction

Visual Reports of Models

Thumbnail

Description

This sample application demonstrates how to extract models properties of Autodesk360/BIM360/Autodesk Construction Cloud (ACC) and generate a project dashboard. Also shows a nested view with 2d views of the model (if available). In the project tree of this sample, Autodesk360, BIM360 and ACC project are listed with different icons.

This sample is based on the Learn Forge tutorials in the section View BIM 360 models and Dashboard. The original implementation was based on Jim Awe - LMVNavTest (Depracated).

Live version

https://visualreports.autodesk.io

Setup

Prerequisites

BIM 360 or ACC Account: must be Account Admin to add the app integration. Learn about provisioning.
Forge Account: Learn how to create a Forge Account, activate subscription and create an app at this tutorial.
Visual Code or any other text-based tool.
JavaScript basic knowledge with jQuery.
NodeJS.

Run locally

Install NodeJS.

Clone this project or download it. It's recommended to install GitHub desktop. To clone it via command line, use the following (Terminal on MacOSX/Linux, Git Shell on Windows):

git clone https://github.com/autodesk-forge/forge-visualreports

To run it, install the required packages, set the enviroment variables with your client ID & secret and finally start it. Via command line, navigate to the folder where this repository was cloned and use the following:

Mac OSX/Linux (Terminal)

npm install
export FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM FORGE DEVELOPER PORTAL>>
export FORGE_CLIENT_SECRET=<<YOUR FORGE CLIENT SECRET>>
export FORGE_CALLBACK_URL=<<YOUR CALLBACK URL FROM FORGE DEVELOPER PORTAL>>
npm run dev

Windows (use Node.js command line from Start menu)

npm install
set FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM FORGE DEVELOPER PORTAL>>
set FORGE_CLIENT_SECRET=<<YOUR FORGE CLIENT SECRET>>
set FORGE_CALLBACK_URL=<<YOUR CALLBACK URL FROM FORGE DEVELOPER PORTAL>>
npm run dev

Open the browser: http://localhost:3000.

Important: do not use npm start locally, this is intended for PRODUCTION only with HTTPS (SSL) secure cookies.

Deployment

To deploy this application to Heroku, the Callback URL for Forge must use your .herokuapp.com address. After clicking on the button below, at the Heroku Create New App page, set your Client ID, Secret and Callback URL for Forge.

Watch this video on how deploy samples to Heroku.

Packages used

All Autodesk Forge NPM packages are included by default, see complete list of what's available at NPM website. OAuth, Model Derivative and OSS are used. Some other non-Autodesk packaged are used, including express and its session/cookie middlewares (express-session and cookie-parser) for user session handling. The front-end uses bootsrap and jquery.

Tips & tricks

For local development/testing, consider use nodemon package, which auto restart your node application after any modification on your code. To install it, use:

sudo npm install -g nodemon

Then, instead of npm run dev, use the following:

npm run nodemon

Which executes nodemon ./start.js. The flag option --ignore www/ indicates that the app should not restart if files under specific folder (such as www) are modified.

Troubleshooting

Cannot see my BIM 360 or ACC projects: Make sure to provision the Forge App Client ID within the BIM 360 or ACC Account, learn more here. This requires the Account Admin permission.
Cannot load Autodesk360 model: In Autodesk360, the model is not translated by default until the end user loads the model one time in Autodesk360, or the developer posts job to translate.
error setting certificate verify locations error: may happen on Windows, use the following: git config --global http.sslverify "false"

License

This sample is licensed under the terms of the MIT License. Please see the LICENSE file for full details.

Written by

Jaime Rosales D.

Forge Partner Development
Forge Developer Portal

forge-bim360reports's People

Contributors

Stargazers

Watchers

forge-bim360reports's Issues

2D drawings not loading

UI broken

Probably a package was updated a new deploy, probably need to review versioning on packages.json

Dashboard won't show in mobile devices

Hi all,

As the title says, I'm not able to visualize the dashboard on mobile devices. I have tried both iOS and Android and it just doesn't appear. Any ideas on how to adapt the code and solve this?

Thank you.

Pie Chart Extension

The pie Chart extension will be created using D3 library, the filling of the chart with the new information can happen when a dropdown of property options is selected or on the GeometryLoadEvent gets triggered after a new model selected from the DM Tree.

Sample JS code can be seen here
https://github.com/JimAwe/LmvNavTest/blob/master/scripts/Report_PieChart.js

Bar Chart Extension

The Bar Chart extension will be created using D3 library, the filling of the chart with the new information can happen when a dropdown of property options is selected or on the GeometryLoadEvent gets triggered after a new model selected from the DM Tree. (similar to issue #2 )

Sample JS code can be seen here
https://github.com/JimAwe/LmvNavTest/blob/master/scripts/Report_BarChart.js

UI overlapping

Some UI item overlapping

load multi projects

hi
first I would like to thank you for a great job, I would like to ask you please if you can upgrade the app to load multi projects and visualize it by the charts (the charts can read multi models same time)
thank you in advance :)

Zero-doc UI cleanup?

Consider cleanup the UI in zero-doc state:

Create DualViewer Extension or handle at time of loading model

We need to create a dualviewer extension that will contain a dropdown to have access to all the role:2d possible options, if no available ones, show a message in Div saying "Model does not have 2D Views"

Sample JS code can be seen here. Needs to be updated to Viewer Version standards
https://github.com/JimAwe/LmvNavTest/blob/master/scripts/LoadModel.js

Support EU endpoint for Viewer

@jaimerosales please check if this https://forge.autodesk.com/blog/bim-360-docs-api-changes-access-data-european-data-center works for this sample, I suspect not based on https://github.com/Autodesk-Forge/bim360appstore-viewer-nodejs-visual.reports/blob/master/www/js/forge.viewer.js#L51

Is possible in google docs?

NWD model doesn't show any information

Update moment library

Problems with external links on index. html

Hi...
I have a question..
Why did I have problems with external links after I developed my app on Heroku?

When I start my app locally it works.
After I developed it on heroku, my href = External links specified on the index. html file change and when I click on them from the browser it updates the page.

Thanks

Charts can't access data (instanceTree empty)

Hello,

I'm trying to adapt the code in order to visualize the data of an own Navisworks model (.nwd). I'm having troubles as it seems that no data is collected from the model: instanceTree is empty and I can't understand why (if I type 'instanceTree = viewer['3d'].model.getData().instanceTree' the data is there).

Any idea of how to make the dashboard access it?

EDIT: I'm having the same issue with revit models (.rvt). So it seems that the dashboard is not capable of accessing my instanceTree for some reason (I tested some test revit files that run properly and others that doesn't, so it doesn't seem to be the main reason).

EDIT 2: I have seen that the flagModel is set to true because viewables is found empty. This fact doesn't allow the dashboard to access the data. Any idea on how to fix this?

FINAL EDIT: Finally I just removed the flagModel = 'true' that triggered because I didn't have 2D material in my model and added an eventListener (Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT) so the data is retrieved only when the object tree is already created.