Headless viewer: Creates a custom Viewer GUI using react-express

Home Page: https://viewer-rocks.autodesk.io/

License: MIT License

HTML 5.01% JavaScript 79.73% CSS 15.25%

viewer-react-express-headless's Introduction

Viewer - React - Express - Headless

Description

Using Forge Viewer, you have the option of a Headless one, the option to add your own logo and get rid of extension that interact with the viewer is possible. I created a demonstration of this scenario using React on the Front End, Redux to handle states for Properties metadata access and NodeJS (Express) together with React-Scripts to handle the authentication and access to the use of the Forge services.

The available Extensions once in Full Screen mode are.

Properties (Categories are display with the option to expand to see all metadata available from the model)
Explode Slider
Explode Animation
Rotate Animation
Restate of the model to original form

This sample show a simple integration of the Viewer in a headless way with custom made extensions. The front-end will look like:

Thumbnail

Setup

The 6 models will need to translated and hosted on your own bucket. This will change the URN values that will need to be subtitued here. URN Gallery JSON

Feel free to use your own models in the Gallery.

Note Restore State

The Restore State functionality is hardcoded for the specific models. You will need to get the State for each of your models and pass the new JSON value at this location Restore State JSON

Development mode

Follow these instructions to get the app running locally:

run git clone this repository
cd into the project's directory
create a file called server/credentials.js with your credentials, follow this template
run npm install
run npm run watch

This will get a server running locally, open http://localhost:3000 on your browser to see the app running.

Production mode

To run this app in production mode, run npm run build and then npm start in a production environment.

If you try to deploy this on Heroku, we set a postinstall script that will run the build script, so there is no need to run it again, simply let Heroku run npm start (which it does automatically) and you'll be good to go.

Heroku Deployment

To deploy this project to Heroku, be sure to set your environment variables in the dashboard:

FORGE_CLIENT_ID
FORGE_CLIENT_SECRET

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

viewer-react-express-headless's People

Contributors

Stargazers

Watchers

viewer-react-express-headless's Issues

Feature Request: Mobile device VR access

Include viewer VR extension for mobile devices for exploration and demo of the site.

local setup incorrectly

This is my steps:

git clone https://github.com/Autodesk-Forge/viewer-react-express-headless.git
cd viewer-react-express-headless/
cd server
cp credentials_.js credentials.js

sudo nano /home/felipe/viewer-react-express-headless/server/credentials.js

##

		client_id: process.env.FORGE_CLIENT_ID || 'ccccc',
		client_secret: process.env.FORGE_CLIENT_SECRET || 'xxxxxxx',
##
cd ..
npm install

sudo nano /home/felipe/viewer-react-express-headless/server/server.js

##
app.set('port', (process.env.PORT || 3002));
##

npm run watch

show me this

Something is already running on port 3000.

Would you like to run the app on another port instead? [Y/n]

I put Y

Starting the development server...

Compiled successfully!

The app is running at:

http://localhost:3003/

Note that the development build is not optimized.
To create a production build, use npm run build.

If i put
app.set('port', (process.env.PORT || 3002));

Why run in 3003?

An run 3002 to, but with errors:

In console show me this:

THREE.WebGLRenderer 71
viewer3D.min.js?v=v2.14:2175 GET https://developer.api.autodesk.com/viewingservice/v1/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmlld2VyLXJvY2tzLXJlYWN0L1JDJTIwQ2FyLmYzZA 401 (Unauthorized)
i.rawGet @ viewer3D.min.js?v=v2.14:2175
i.getManifest @ viewer3D.min.js?v=v2.14:2184
k @ viewer3D.min.js?v=v2.14:9539
d.load @ viewer3D.min.js?v=v2.14:9543
i @ Viewer-helpers.js:66
(anonymous) @ Viewer-helpers.js:59
XMLHttpRequest.send (async)
b.refreshCookie @ viewer3D.min.js?v=v2.14:18958
b.refreshToken @ viewer3D.min.js?v=v2.14:18971
b.initializeAuth @ viewer3D.min.js?v=v2.14:18982
e @ viewer3D.min.js?v=v2.14:19204
developer.api.autodesk.com/viewingservice/v1/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmlld2VyLXJvY2tzLXJlYWN0L1JDJTIwQ2FyLmYzZA:1 GET https://developer.api.autodesk.com/viewingservice/v1/dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dmlld2VyLXJvY2tzLXJlYWN0L1JDJTIwQ2FyLmYzZA 401 (Unauthorized)
Viewer-helpers.js:89

Mobile Device Properties Table CSS UI work needed

When access from Mobile devices of a specific screen size (phones for the most part) a full display of a table with the properties data needs to be display. Work on CSS in order to have a better UX Experience.

add external extensions

Hi, if i would add an external extension such as this:

https://forge-rcdb.autodesk.io/configurator?id=5a361b2b58144b5ed2936ddf

here the source:

https://github.com/Autodesk-Forge/forge-rcdb.nodejs/tree/master/src/client/viewer.components/Viewer.Extensions.Dynamic/Viewing.Extension.PointCloudMarkup

What i do? I have difficult with react code and don't understand how can add (and if is possible) external extensions

Thanks!

Move Github Source link to Upper corner

On the main page (with the vignettes) I saw you added the View Source link at the bottom, move it to the upper right corner

error on load

Hi, if i run the example in local mode i receive the attached on console, i replaced client_id. client_secret and callbackUrl in credentials.js

log.log

Any idea?

Thanks?

"Properties"

Hi!

I see that you have modified the "Properties" by embedding the "Properties" from the Toolbar into the viewer (you changed the UI and put it on an absolute position in the upper right). This looks so much more cleaner than the original "Properties" tab. How did you do this using Redux to handle states for Properties metadata? Can I take a look at this somewhere in the code?

Unauthorized Model

I've entered the client ID and secret into the application, but still getting this error.

Some questions, if I have to translate my own model, how to do it manually? and how do I get the urn?

Viewer.setDisplayEdges(true) not working

Hello,

I can get the demo running, but it does not display the edges of my models.
When I use the chrome console to do the equivalent of going to Settings -> Performance -> Display Edges on a non headless viewer: NOP_VIEWER.setDisplayEdges(true) , nothing happens.

The edges are not displayed nor do I get any error message.

When I try the same command in chrome console at https://viewer.autodesk.com with the same model loaded, it works and I can toggle the display of edges by changing the boolean parameter from true to false.

Can you please tell me how I can get the edges displaying on the viewer-react-express-headless.

Thank you for time.

Feature Request: Add Search Extension

activate the Search extension

Heroku React Issue

Hi!

I tried forking & deploying to Heroku but it gets hung up pretty early on when calling react-scripts build. The only change I made was adding my credentials. Any idea if there's an easy fix to this? I love the style of the viewer and was hoping to play around with it a bit.

   > [email protected] build /tmp/build_a500c81f59799abc10fd0ba4c5d858f9
   > react-scripts build
   
   /tmp/build_a500c81f59799abc10fd0ba4c5d858f9/node_modules/react-scripts/config/webpack.config.js:318
           ...(isEnvProductionProfile && {
           ^^^
   SyntaxError: Unexpected token ...
       at Object.exports.runInThisContext (vm.js:76:16)
       at Module._compile (module.js:528:28)
       at Object.Module._extensions..js (module.js:565:10)
       at Module.load (module.js:473:32)
       at tryModuleLoad (module.js:432:12)
       at Function.Module._load (module.js:424:3)
       at Module.require (module.js:483:17)
       at require (internal/module.js:20:19)
       at Object.<anonymous> (/tmp/build_a500c81f59799abc10fd0ba4c5d858f9/node_modules/react-scripts/scripts/build.js:38:23)
       at Module._compile (module.js:556:32)
   ///
   npm ERR! Linux 4.4.0-1048-aws
   npm ERR! argv "/tmp/build_a500c81f59799abc10fd0ba4c5d858f9/.heroku/node/bin/node" "/tmp/build_a500c81f59799abc10fd0ba4c5d858f9/.heroku/node/bin/npm" "run" "build"
   npm ERR! node v6.7.0
   npm ERR! npm  v3.10.10
   npm ERR! code ELIFECYCLE
   npm ERR! [email protected] build: `react-scripts build`
   npm ERR! Exit status 1
   npm ERR! 
   npm ERR! Failed at the [email protected] build script 'react-scripts build'.
   npm ERR! Make sure you have the latest version of node.js and npm installed.
   npm ERR! If you do, this is most likely a problem with the viewer-server package,
   npm ERR! not with npm itself.
   npm ERR! Tell the author that this fails on your system:
   npm ERR!     react-scripts build
   npm ERR! You can get information on how to open an issue for this project with:
   npm ERR!     npm bugs viewer-server
   npm ERR! Or if that isn't available, you can get their info via:
   npm ERR!     npm owner ls viewer-server
   npm ERR! There is likely additional logging output above.
   
   npm ERR! Please include the following file with any support request:
   npm ERR!     /tmp/build_a500c81f59799abc10fd0ba4c5d858f9/npm-debug.log
   `

Heroku setup is incorrect

app.json says in "FORGE_CLIENT_ID"
"generator": "public"

should be
"value": "public"

How to Run this example in Visual Studio

Hi,
We have downloaded this sample and open this sample in Visual Studio 2017.
Please help us how to run this example in Visual Studio.

And also please let us know the CLIENT ID and CLIENT SECRET is necessary? If necessary please let us know how to create those credentials.

Thank you.

Work on CSS for Properties Table display

Properties table look a bit odd, some better UI needs to be applied to it in order to have a better UX experience.

Instructions in README.md doesn't have the credentials template configuration

Development mode
Follow these instructions to get the app running locally:

1.run git clone this repository
2.cd into the project's directory
3.create a file called server/credentials.js with your credentials, follow this template
4.run npm install
5.run npm run watch

This will get a server running locally, open http://localhost:3000 on your browser to see the app running.

I want to learn how to setup this App but The 'template' link is bronken.

used custom code implementation for model browser functionality. is there any way to get data of model browser.

i used headless functionality for viewer in angular 5. Common attributes like zoom, rotation, pan - custom usage of setActiveNavigationTool() inbuilt function.
so is there any way to get model browser data functionality like door / wall / kitchen attributes
Please let me know the way ...

My result

Hi!
I forked my own viewer-react-express-headless and edited the credentials.js and Deployed to Heroku.

Here is my result: https://immense-fortress-56268.herokuapp.com/

It doesnt seem like it's quite working. Neither of the models loads. What could be the problems?

Kind regards.

.dwg support

Is there dwg support in application and also drag and drop parts?

autodesk-forge / viewer-react-express-headless Goto Github PK