Add custom toolbar for Autodesk Viewer

If you have participated in our recent activities, you will frequently hear the Autodesk viewer big Model Browser we are currently working on. This is a browser based on webgl technology that does not need to download any plug-ins, supports dozens of data formats. In addition, the viewer also provides APIs. You can embed the viewer into your own web program. We have also written a lot of samples and released them to GitHub. These examples require consumerkey. You need to apply to Autodesk. Currently, this product has not been officially released, we only invited some customers to do the test and will release it soon. You need to wait patiently.

Custom interface APIs have been added to the latest code push. You can use these APIs to create custom toolbar in the same style as the built-in toolbar of viewer. First, you need to create a container on the page, which is generally a div tag. Use CSS to control its position. The following JavaScript code will generate a custom toolbar:

(Screen-shot)

 

function addToolBar(container) {
    //create a toolbar
    var toolbar = new Autodesk.Viewing.UI.ToolBar(container);
 
    //create a subToolbar
    var subToolbar = toolbar.addSubToolbar(‘sub1‘);
 
    //add some  buttons to it
    var button1 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button1",
        "Tooltip for Button1",
        function (e) {
            alert("Button1 is clicked.");
        });
 
    //add icon for the button
    button1.className = ‘glyphicon glyphicon-euro‘;
 
    var button2 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button2",
        "Tool tip for Button2",
        function (e) {
            alert("Button2 is clicked");
        });
    //Add buttons to subtoolbar
    toolbar.addToSubToolbar("sub1", button1);
    toolbar.addToSubToolbar("sub1", button2);
 
 
    //create a radio sub toolbar
    var radioSubToolbar = toolbar.addSubToolbar(‘radioSub2‘, true); //id, isRadio
    
    // add some buttons to it
    var button3 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button3",
        "Tool tip for Button3",
        function (e) {
            alert("Button2 is clicked");
        });
    var button4 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button4",
        "Tool tip for Button4",
        function (e) {
            alert("Button4 is clicked");
        });
 
    //add buttons to radioSubToolbar
    toolbar.addToSubToolbar("radioSub2", button3);
    toolbar.addToSubToolbar("radioSub2", button4);
 
 
}

Next, we will introduce a method that is easier to organize and maintain to create custom toolbar.