Page Comparison

Panel

title	Goal of this tutorial

Anchor

	1
	1

The goal of this tutorial is to initiate youto you to the Spinalcom viewerViewer and how to install it.

$ mkdir newfolder $ cd newfolder $ npm init -y

To follow this tutorial, some installations are required.

Before installing the Spinal Viewer, you need to install Spinalcom Drive. By the way, you can follow this tutorial if you don't know how to.

Once this is done there are 2 ways to install Spinalcom Viewer.

A. Without editing package.json

you can install the viewer in the same folder you installed the drive.

Panel

title	Installation

Anchor

	2
	2

First create a new folder and initialize it using npm.

Code Block

language	bash
theme	DJango

Code Block

language	bash
theme	DJango

$ npm i https://github.com/spinalcom/spinal-browser-viewer

Panel

title	Configuration

Anchor

	3
	3

To use the viewer

.git

B. By editing package.json

Add spinal-browser-drive to the dependencies in package.json.

package.you're going to need an Autodesk Forge account. Create or log in:

https://developer.autodesk.com/

Create an App with at least the Data Management API and Model Derivative API. The other labels don't matter.

https://forge.autodesk.com/myapps/create

Image Added

After you created the app you will be given a client ID and a client secret in the app's information.

Put these information in .config.json in the environment of spinal-organ-forge.

.config.json

Code Block

language	js
theme	DJango
linenumbers	true

{
  "spinal-core-hub": {
    "env": {
      "SPINAL_USER_ID": "168",
      "SPINALHUB_PORT": 7777,
      "SPINALHUB_IP": "127.0.0.1",
      "SPINAL_PASSWORD": "JHGgcz45JKilmzknzelf65ddDadggftIO98P",
      "SPINAL_PASSWORD_ROOT": "4YCSeYUzsDG8XSrjqXgkDPrdmJ3fQqHs",
      "SPINAL_PASSWORD_USER": "LQv2nm9G2rqMerk23Tav2ufeuRM2K5RG"
    },
    "env_test": {
      "SPINAL_USER_ID": "168",
      "SPINALHUB_PORT": 7777,
      "SPINALHUB_IP": "127.0.0.1",
      "SPINAL_PASSWORD": "JHGgcz45JKilmzknzelf65ddDadggftIO98P",
      "SPINAL_PASSWORD_ROOT": "4YCSeYUzsDG8XSrjqXgkDPrdmJ3fQqHs",
      "SPINAL_PASSWORD_USER": "LQv2nm9G2rqMerk23Tav2ufeuRM2K5RG"
    },
    "env_production": {
      "SPINAL_USER_ID": "168",
      "SPINALHUB_PORT": 7777,
      "SPINALHUB_IP": "127.0.0.1",
      "SPINAL_PASSWORD": "JHGgcz45JKilmzknzelf65ddDadggftIO98P",
      "SPINAL_PASSWORD_ROOT": "4YCSeYUzsDG8XSrjqXgkDPrdmJ3fQqHs",
      "SPINAL_PASSWORD_USER": "LQv2nm9G2rqMerk23Tav2ufeuRM2K5RG"
    }
  },
  "spinal-organ-forge": {
    "env": {
      "INTERVAL": 2000,
      "CLIENT_ID": "REPLACE_HERE",
      "CLIENT_SECRET": "REPLACE_HERE"
    },
    "env_test": {
      "INTERVAL": 2000,
      "CLIENT_ID": "REPLACE_HERE",
      "CLIENT_SECRET": "REPLACE_HERE"
    },
    "env_production": {
      "INTERVAL": 2000,
      "CLIENT_ID": "REPLACE_HERE",
      "CLIENT_SECRET": "REPLACE_HERE"
    }
  }
}

Once is done, we need to add some packages to our file package.json.

First of all delete the package-lock.json file and add the following dependencies to the file :

package.json

Code Block

language	js
theme	DJango
linenumbers	true

{
  "name": "

newfolder

button-system",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "spinal-browser-admin": "git+https://

here

github.com/spinalcom/spinal-browser-admin.git",
    "

dependencies": {

spinal-browser-drive": "git+https://github.com/spinalcom/spinal-browser-drive.git",
    "spinal-browser-viewer": "git+https://github.com/spinalcom/spinal-browser-viewer.git",
    "spinal-env-admin-panel-user-manager": "git+https://github.com/spinalcom/spinal-env-admin-panel-user-manager.git#v2.0.0",
    "spinal-env-drive-plugin-base": "git+https://github.com/spinalcom/spinal

-browser-viewer" } }Then install it using npm.

-env-drive-plugin-base.git",
    "spinal-env-drive-plugin-digital_twin": "git+https://github.com/spinalcom/spinal-env-drive-plugin-digital_twin.git",
    "spinal-env-drive-plugin-sync-file": "git+https://github.com/spinalcom/spinal-env-drive-plugin-sync-file.git",
    "spinal-env-drive-plugin-version_manager": "git+https://github.com/spinalcom/spinal-env-drive-plugin-version_manager.git",
    "spinal-env-viewer-plugin-forge": "git+https://github.com/spinalcom/spinal-env-viewer-plugin-forge.git",
    "spinal-env-viewer-plugin-graph-manager": "git+https://github.com/spinalcom/spinal-env-viewer-plugin-graph-manager.git",
    "spinal-env-viewer-graph-service": "git+https://github.com/spinalcom/Spinal-Graph-Service.git",
    "spinal-env-viewer-plugin-scene": "git+https://github.com/spinalcom/spinal-env-viewer-plugin-scene.git",
    "spinal-env-viewer-plugin-version": "https://github.com/spinalcom/spinal-env-viewer-plugin-version"
  },
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0"
  }
}

Now go to .config_env folder and here you have the following files :

admin.json
drive.json
viewer.json
user_role_manager.json

In order to launch the Viewer, you need to modify these files like this :

./.config_env/admin.json

Code Block

language	js
theme	DJango
linenumbers	true

{
  "spinal-env-admin-access-rights-manager": "1.0.1",
  "spinal-env-admin-panel-hub-status": "1.0.1",
  "spinal-env-admin-panel-user-manager": "1.0.2",
  "spinal-env-drive-core": "1.0.2",
  "spinal-env-drive-plugin-base": "2.0.0"
}

./.config_env/drive.json

Code Block

language	js
theme	DJango
linenumbers	true

{
  "spinal-env-drive-core": "1.0.2",
  "spinal-env-drive-plugin-forge": "1.0.7",
  "spinal-env-drive-plugin-forge_viewer": "1.0.1",
  "spinal-env-drive-plugin-base": "789",
  "spinal-env-drive-plugin-digital_twin": "789",
  "spinal-env-drive-plugin-sync-file": "78",
  "spinal-env-drive-plugin-version_manager": "789"
}

./.config_env/viewer.json

Code Block

language	js
theme	DJango
linenumbers	true

{
  "spinal-env-viewer-plugin-sample": "1.0.0",
  "spinal-env-viewer-plugin-forge": "git+https://github.com/spinalcom/spinal-env-viewer-plugin-forge.git",
  "spinal-env-viewer-plugin-graph-manager": "git+https://github.com/spinalcom/spinal-env-viewer-plugin-graph-manager.git",
  "spinal-env-viewer-graph-service": "git+https://github.com/spinalcom/Spinal-Graph-Service.git",
  "spinal-env-viewer-plugin-scene": "git+https://github.com/spinalcom/spinal-env-viewer-plugin-scene.git",
  "spinal-env-viewer-plugin-version": "https://github.com/spinalcom/spinal-env-viewer-plugin-version"
}

Now you need to compile them in order to work :

Code Block

language	bash
theme	DJango
linenumbers	true

./node_modules/.bin/create_driver_env # compile the driver

./node_modules/.bin/create_viewer_env # compile the viewer

./node_module/.bin/create_admin_env # compile the admin

The Viewer's configuration is now done.

Panel

title	Launch your application

Anchor

	4
	4

If you see a previously launched spinal-hub-7777 or spinal-hub-forge-7777 you need to delete them.

Code Block

language	bash
theme	DJango

$ pm2 delete spinal-hub-7777
$ pm2 delete spinal-organ-forge-7777

After deleting the old spinal-hub can now start your application with:

Code Block

language	bash
theme	DJango

$ pm2 npm install

Conclusion

start launch.config.js

Panel

title	Basic usage

Anchor

	5
	5

The drive, the admin and the viewer are browser applications. To use them you need to access them via a browser (you may change the host/port corresponding to your .config.json file):

http://127.0.0.1:7777/html/drive

To create your digital twin you're going to need a rvt file. You can get one here:

And,

http://www.autodesk.com/revit-rac-basic-sample-project-2016-enu?_ga=2.104361024.1367483780.1526027060-750616995.1518426196

Once you have downloaded it, use your file manager to drag and drop it on the drive.

Image Added

Then right click on the .rvt and select the application "Create Digital Twin".

Jira Legacy

showSummary	false
server	System JIRA
serverId	a13f1ba3-c2e9-3e40-861f-593cef64a896
key	SSS-118

Image Added

This will take a few minutes. Once this is done right click on the digital twin that was created and select Open with Op. Center Viewer.

It will open a new tab with the viewer and load the 3D model of a house.

Image Added

Versions Compared

Old Version 3

New Version Current

Key

Table of contents

Quick navigation

A. Without editing package.json

B. By editing package.json