Today's post focuses on writing self-contained, portable UI components for the viewer. By "portable" I mean you could easily take a component from one project and use it in another one without having to change any of its code.
The idea is to write your custom feature as a viewer extension with business logic and UI all included in the same JavaScript file. Although mixing JavaScript, html and css is usually not a recommended practice, I feel that in this specific case it makes sense.
Let say you need a dialog to manage items in your viewer application: could be viewer states, extensions you want to load/unload from the UI, records from a side database and so on... The viewer API propose an handy object to create custom panels with the same look and feel than the ones from GuiViewer3D, you just need to extend your custom object from the base class Autodesk.Viewing.UI.DockingPanel. The panel can then be populated by DOM elements you create dynamically from the js code.
In the gist below you can see a complete example of a simple UI component: it works with Viewer3D or GUIViewer3D and will add a custom toolbar with a button, pressing the button will display a panel where you can add and remove clickable items. In a real-life scenario, each item could be linked to a web-service call or a database record.
The only dependencies, other than the viewer API, are to jquery and bootstrap css (included by the script).
Here is a picture of the result:
You can test a live version of that component here, click the "Show panel" button to make it visible.
Subscribe
Comments