CODEWITHSUNDEEP
autodesk-forgeautodesk-viewer
Danila Eremenko
Danila Eremenko

Reputation: 35

Creating new panel in Autodesk Forge

I created my own button without any onClick event. I also expanded the default properties panel. How can I create my own panel and show it after clicking on a previously created button?

Upvotes: 0

Views: 774

Answers (2)

Petr Broz
Petr Broz

Reputation: 9942

Alternatively, if you're interested in a more specialized panel showing custom key-value data, you could refer to one of the Learn Forge tutorials that explains how this can be done:

// Subclassing a "property panel" class
class ModelSummaryPanel extends Autodesk.Viewing.UI.PropertyPanel {
    constructor(viewer, container, id, title, options) {
        super(container, id, title, options);
        this.viewer = viewer;
    }
}

let panel = new ModelSummaryPanel(viewer, viewer.container, 'my-panel', 'My Panel');
panel.setVisible(true);
panel.addProperty('Key 1', 'Value 1', 'Category 1');
panel.addProperty('Key 2', 'Value 2', 'Category 1');
panel.addProperty('Key 3', 'Value 3', 'Category 1');
panel.addProperty('Key A', 'Value A', 'Category 2');

Upvotes: 1

Ronak Shetiya
Ronak Shetiya

Reputation: 980

function ShowDocker(viewer) {

SimplePanel = function(parentContainer, id, title, content, x, y) {
    this.content = content;
    Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');
    // Auto-fit to the content and don't allow resize.  Position at the coordinates 
    //given.
    this.container.style.height = "auto";
    this.container.style.width = "auto";
    this.container.style.resize = "auto";
    this.container.style.left = x + "%";
    this.container.style.top = y + "%";
};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;
SimplePanel.prototype.initialize = function() {
    // Override DockingPanel initialize() to:
    // - create a standard title bar
    // - click anywhere on the panel to move
    // - create a close element at the bottom right
    //
    this.title = this.createTitleBar(this.titleLabel || this.container.id);
    this.container.appendChild(this.title);
    this.closer = this.createCloseButton(); 
    this.container.appendChild(this.title);
   this.title.appendChild(this.closer);
   this.container.appendChild(this.content);

this.initializeMoveHandlers(this.title);
this.initializeCloseHandler(this.closer);
};
var tag = document.createElement('testdiv');
var text = document.createTextNode("Here goes your html");
tag.appendChild(text);
var docpanel = new SimplePanel(this.viewer.container, 'AllPropertiesPanels', 'All 
Properties', tag, 50, 80);
docpanel.setVisible(true);

}

try this above code and you can make your panel appear and disappear on button click by assigning visibility to panel

docpanel.setVisible(true/false)

Upvotes: 1

Related Questions