Adding custom toolbar for Autodesk viewer

By Daniel Du

As as said in this post, we are working on a brand new large model viewer intensively,which supports dozens of different model formats. We also have been working the APIs which allow you upload and translate file and then embed the viewer into your own web site.  If you are interested, here are our samples on github, most of these samples requires consumer key, which need to apply from Autodesk. We have already invited some selected customers as pilot of these APIs. It is just around the corner for public access.

A few days back, some new APIs are just added to allow developers to add custom toolbar with consistent look and feel with the built-in ones. In this post, I will share some code snippets how to use the new APIs.

(screen-shot)

Firstly, you need to create a container element in your webpage, generally it is a <div> tag, make it in correct position with CSS(cascade style sheet), I will omit this part. Let’s look at the JavaScript code directly:

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);
 
 
}

In next post, I will introduce how to do it in more organized way. Stay tuned.