Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# forge-extensions
# aps-extensions

[![Node.js](https://img.shields.io/badge/Node.js-4.4.3-blue.svg)](https://nodejs.org/)
[![npm](https://img.shields.io/badge/npm-2.15.1-blue.svg)](https://www.npmjs.com/)
Expand Down Expand Up @@ -26,7 +26,7 @@ This sample is a collection of extensions ready to be reused. Just add reference

Extensions were created using a [Basic Skeleton](public/extensions/BasicSkeleton).

This sample is based on the [Learn Forge](http://learnforge.autodesk.io) tutorials in the section *View modelss*.
This sample is based on the [Learn Aps](http://learnforge.autodesk.io) tutorials in the section *View modelss*.

## Thumbnail

Expand All @@ -36,34 +36,34 @@ This sample is based on the [Learn Forge](http://learnforge.autodesk.io) tutoria

Extensions are dynamically loaded and unloaded for testing on the live version.

[forge-extensions.autodesk.io](https://forge-extensions.autodesk.io)
[aps-extensions.autodesk.io](https://aps-extensions.autodesk.io)

# Setup

To use this sample, you will need Autodesk developer credentials. Visit the [Forge Developer Portal](https://developer.autodesk.com), sign up for an account, then [create an app](https://developer.autodesk.com/myapps/create). For this new app, use `http://localhost:3000/api/forge/callback/oauth` as the Callback URL, although it is not used on a 2-legged flow. Finally, take note of the **Client ID** and **Client Secret**.
To use this sample, you will need Autodesk developer credentials. Visit the [APS Developer Portal](https://developer.autodesk.com), sign up for an account, then [create an app](https://developer.autodesk.com/myapps/create). For this new app, use `http://localhost:3000/api/aps/callback/oauth` as the Callback URL, although it is not used on a 2-legged flow. Finally, take note of the **Client ID** and **Client Secret**.

## Run locally

Install [NodeJS](https://nodejs.org).

Clone this project or download it. It's recommended to install [GitHub Desktop](https://desktop.github.com/). 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-extensions.git
git clone https://github.com/autodesk-platform-services/aps-extensions.git

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 to and use the following commands:

Mac OSX/Linux (Terminal)

npm install
export FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
export FORGE_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
export APS_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
export APS_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
npm start

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

npm install
set FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
set FORGE_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
set APS_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
set APS_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
npm start

Open the browser: [http://localhost:3000](http://localhost:3000).
Expand All @@ -82,7 +82,7 @@ ExtensionName[Folder]
| |->assets[folder]
|->config.json
</pre>
Refer the [BasicSkeleton Extension](https://github.com/autodesk-forge/forge-extensions/tree/master/public/extensions/BasicSkeleton) for boilerplate code.
Refer the [BasicSkeleton Extension](https://github.com/autodesk-platform-services/aps-extensions/tree/main/public/extensions/BasicSkeleton) for boilerplate code.

2) Each extension folder should be self-contained code, so that it's easily shareable between projects.
Extension[Folder]/config.json is meant for keeping the config of an extension and for sharing.
Expand All @@ -104,7 +104,7 @@ Extension config schema:
"includeinlist":"true or false"
}
</pre>
Example: [IconMarkupExtension config.json](https://github.com/autodesk-forge/forge-extensions/blob/master/public/extensions/IconMarkupExtension/config.json)
Example: [IconMarkupExtension config.json](https://github.com/autodesk-platform-services/aps-extensions/blob/main/public/extensions/IconMarkupExtension/config.json)

> Note: If your extension relies on event Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT to load, in load function check if the data is already loaded, if not only then add the event listener, below code shows the structure.
<pre>
Expand All @@ -127,22 +127,22 @@ class MyExtension extends Autodesk.Viewing.Extension {
...
}
</pre>
Example: [IconMarkupExtension load function](https://github.com/autodesk-forge/forge-extensions/blob/master/public/extensions/IconMarkupExtension/contents/main.js#L26)
Example: [IconMarkupExtension load function](https://github.com/autodesk-platform-services/aps-extensions/blob/main/public/extensions/IconMarkupExtension/contents/main.js#L26)

> Note: After the new extension is added, please restart the server.

# Understanding extensionloader and using it in forge app
# Understanding extensionloader and using it in aps app

The way loose coupling between extensions and forge app is achived is with custom event, if you want to use extensionloader in your forge app, follow the three steps:
The way loose coupling between extensions and aps app is achived is with custom event, if you want to use extensionloader in your aps app, follow the three steps:

1) Copy paste the [extensions](https://github.com/autodesk-forge/forge-extensions/tree/master/public/extensions) in public folder of your app or in the folder where the index file resides.
1) Copy paste the [extensions](https://github.com/autodesk-platform-services/aps-extensions/tree/main/public/extensions) in public folder of your app or in the folder where the index file resides.

2) Include below script in index.html file
<pre>
<script src="/extensions/extensionloader.js"></script>
</pre>

3) Here's the linking part between the app and the extensionloader, in viewer [onDocumentLoadSuccess](https://github.com/autodesk-forge/forge-extensions/blob/master/public/js/ForgeViewer.js#L35) function, emit an event to inform the extensionloader that viewer has loaded the model with the below [code](https://github.com/autodesk-forge/forge-extensions/blob/master/public/js/ForgeViewer.js#L39):
3) Here's the linking part between the app and the extensionloader, in viewer [onDocumentLoadSuccess](https://github.com/autodesk-platform-services/aps-extensions/blob/main/public/js/ApsViewer.js#L35) function, emit an event to inform the extensionloader that viewer has loaded the model with the below [code](https://github.com/autodesk-platform-services/aps-extensions/blob/main/public/js/ApsViewer.js#L39):
<pre>
var ViewerInstance = new CustomEvent("viewerinstance", {detail: {viewer: viewer}});
document.dispatchEvent(ViewerInstance);
Expand Down Expand Up @@ -172,7 +172,7 @@ To unload extension:

## Packages used

The [Autodesk Forge](https://www.npmjs.com/package/forge-apis) packages are included by default. Some other non-Autodesk packages are used, including [express](https://www.npmjs.com/package/express) and [multer](https://www.npmjs.com/package/multer) for upload.
The [Autodesk Platform Services](https://www.npmjs.com/package/forge-apis) packages are included by default. Some other non-Autodesk packages are used, including [express](https://www.npmjs.com/package/express) and [multer](https://www.npmjs.com/package/multer) for upload.

# Tips & tricks

Expand All @@ -199,7 +199,7 @@ Please see the [LICENSE](LICENSE) file for full details.

## Written by

The [Forge Advocates](http://forge.autodesk.com) team:
The [APS Advocates](http://forge.autodesk.com) team:

* Varun Patil [@VarunPatil578](https://twitter.com/VarunPatil578)
* Petr Broz [@ipetrbroz](https://twitter.com/ipetrbroz)
Expand Down
10 changes: 5 additions & 5 deletions config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/////////////////////////////////////////////////////////////////////
// Copyright (c) Autodesk, Inc. All rights reserved
// Written by Forge Partner Development
// Written by APS Partner Development
//
// Permission to use, copy, modify, and distribute this software in
// object code form for any purpose and without fee is hereby granted,
Expand All @@ -16,13 +16,13 @@
// UNINTERRUPTED OR ERROR FREE.
/////////////////////////////////////////////////////////////////////

// Autodesk Forge configuration
// Autodesk Platform Services configuration
module.exports = {
// Set environment variables or hard-code here
credentials: {
client_id: process.env.FORGE_CLIENT_ID,
client_secret: process.env.FORGE_CLIENT_SECRET,
callback_url: process.env.FORGE_CALLBACK_URL
client_id: process.env.APS_CLIENT_ID,
client_secret: process.env.APS_CLIENT_SECRET,
callback_url: process.env.APS_CALLBACK_URL
},
scopes: {
// Required scopes for the server-side application
Expand Down
2 changes: 1 addition & 1 deletion public/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body {
height: calc(100vh - 150px);
}

#forgeViewer {
#apsViewer {
width: 100%;
}

Expand Down
35 changes: 35 additions & 0 deletions public/extensions/AecGridsExtension/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# AEC Grids

[Demo](https://aps-extensions.autodesk.io/?extension=AecGridsExtensionn)

A APS Viewer extension for loading and rendering Revit Grids by AEC Model Data

![thumbnail](extension.gif)

## Limitation

This extension works only for models that has AEC Model Data and have grids extracted inside its AEC Model Data.

**Note.** Currently, only RVT files produced by Revit 2018 and newer versions will have AEC Model Data after translating by APS Model Derivative API. See [Blog: Consume AEC Data which are from Model Derivative API](https://forge.autodesk.com/blog/consume-aec-data-which-are-model-derivative-api).

## Usage

Enable the extension, click on the Grids button to open AecGridsPanel, and then click on the checkbox to show grids of the level you want to show.

## Setup

Include the JS file on your page. This CDN is compatible with the latest Viewer version (v7).

```xml
<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/autodesk-forge/forge-extensions/public/extensions/AecGridsExtension/contents/main.css" />
<script src="http://cdn.jsdelivr.net/gh/autodesk-forge/forge-extensions/public/extensions/AecGridsExtension/contents/main.js"></script>
```

After Viewer is ready, preferable inside `onDocumentLoadSuccess`, load the extension

```javascript
viewer.loadExtension("AecGridsExtension")
```

## Author
[Eason Kang](https://twitter.com/yiskang)
40 changes: 40 additions & 0 deletions public/extensions/AecGridsExtension/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{
"name": "AecGridsExtension",
"displayname": "AEC Grids",
"description": "A Forge Viewer extension for loading and rendering Revit Grids by AEC Model Data",
"options": {
"alertOnDefaultFailure": true,
"autoUnloadOnNoAecModelData": true
},
"editoptions":"true",
"viewerversion": "7.*",
"loadonstartup": "false",
"filestoload": {
"cssfiles": [
"main.css"
],
"jsfiles": [
"main.js"
]
},
"bloglink": "",
"includeinlist": "true",
"externaldependencies": [
{
"type": "js",
"link": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
},
{
"type": "js",
"link": "https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"
},
{
"type": "css",
"link": "https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css"
},
{
"type": "css",
"link": "https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default-dark/style.min.css"
}
]
}
42 changes: 42 additions & 0 deletions public/extensions/AecGridsExtension/contents/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.fpd-docking-panel {
top: 10px;
left: 10px;
}

.fpd-aec-grids-panel {
max-width: 315px;
max-height: 280px;
width: 315px;
height: 280px;
left: 10px;
top: 225px;
}

.fpd-aec-grids-panel .docking-panel-footer {
z-index: 1;
}

.adsk-viewing-viewer .adsk-icon-documentModels {
background-repeat: no-repeat !important;
background-size: 80% !important;
margin-left: 4px;
margin-top: 3px
}

.adsk-viewing-viewer.dark-theme .adsk-icon-documentModels {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E %3Ctitle%3Efolder-16%3C/title%3E %3Cg id='assets'%3E %3Cg id='Layer_201' data-name='Layer%25201'%3E %3Cpath fill='%23F4F4F4' d='M0,2.5V4H6.34l1-1-1-1H.5A.5.5,0,0,0,0,2.5ZM0,5v8a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V4a1,1,0,0,0-1-1H9L7,5Z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E")
}

.adsk-viewing-viewer.dark-theme .adsk-icon-documentModels:hover,
.adsk-viewing-viewer.dark-theme .active .adsk-icon-documentModels {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E %3Ctitle%3Efolder-16%3C/title%3E %3Cg id='assets'%3E %3Cg id='Layer_201' data-name='Layer%25201'%3E %3Cpath fill='%2300BFFF' d='M0,2.5V4H6.34l1-1-1-1H.5A.5.5,0,0,0,0,2.5ZM0,5v8a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V4a1,1,0,0,0-1-1H9L7,5Z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E")
}

.adsk-viewing-viewer.light-theme .adsk-icon-documentModels {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E %3Ctitle%3Efolder-16%3C/title%3E %3Cg id='assets'%3E %3Cg id='Layer_201' data-name='Layer%25201'%3E %3Cpath fill='black' d='M0,2.5V4H6.34l1-1-1-1H.5A.5.5,0,0,0,0,2.5ZM0,5v8a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V4a1,1,0,0,0-1-1H9L7,5Z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E")
}

.adsk-viewing-viewer.light-theme .adsk-icon-documentModels:hover,
.adsk-viewing-viewer.light-theme .active .adsk-icon-documentModels {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E %3Ctitle%3Efolder-16%3C/title%3E %3Cg id='assets'%3E %3Cg id='Layer_201' data-name='Layer%25201'%3E %3Cpath fill='%2300BFFF' d='M0,2.5V4H6.34l1-1-1-1H.5A.5.5,0,0,0,0,2.5ZM0,5v8a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V4a1,1,0,0,0-1-1H9L7,5Z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E")
}
Loading