As mentioned in the last post, we're now going to take a closer look at writing extensions for the Autodesk View & Data API. To start with, we're going to create an extension which displays a vertical toolbar docked to the left of the Autodesk viewer. This toolbar will be centred on the viewer area and only contain three buttons: two will be toggles – with events assigned to when they're both clicked and unclicked – while the third will simply launch an action.
Here's the JavaScript for this extension:
///////////////////////////////////////////////////////////////////////////////
// Autodesk.Research.TtIf.Extension.Toolbar
//
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace('Autodesk.Research.TtIf.Extension');
Autodesk.Research.TtIf.Extension.Toolbar = function (viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
var _viewer = viewer;
var _this = this;
_this.load = function () {
createToolbar();
console.log('Autodesk.Research.TtIf.Extension.Toolbar loaded');
return true;
};
_this.unload = function () {
deleteToolbar();
console.log('Autodesk.Research.TtIf.Extension.Toolbar unloaded');
return true;
};
function createToolbar() {
var toolbar = new Autodesk.Viewing.UI.ToolBar('toolbar-TtIf');
var ctrlGroup = new Autodesk.Viewing.UI.ControlGroup(
'Autodesk.Research.TtIf.Extension.Toolbar.ControlGroup'
);
ctrlGroup.addClass('toolbar-vertical-group');
// Names, icons and tooltips for our toolbar buttons
var names = ['CGB1', 'CGB2', 'CGB3'];
var icons = ['dashboard', 'fire', 'flash'];
var tips = ['Dashboard', 'Temperature', 'Power'];
// Operations for when the buttons are clicked
var clicks =
[
function () { console.log('Dashboard clicked'); },
function () { console.log('Temperature clicked'); },
function () { console.log('Power clicked'); }
]
// Operations for when buttons are unclicked (i.e. toggled off)
// If false, then the button won't have any 'state'
var unclicks =
[
function () { console.log('Dashboard clicked'); },
function () { console.log('Temperature clicked'); }
]
// The loop to create our buttons
var button;
for (var i = 0; i < names.length; i++) {
// Start by creating the button
button = new Autodesk.Viewing.UI.Button(
'Autodesk.Research.TtIf.Extension.Toolbar.' + names[i]
);
// Assign an icon
if (icons[i] && icons[i] !== '') {
button.icon.classList.add('myicon');
button.icon.classList.add('glyphicon');
button.icon.classList.add('glyphicon-' + icons[i]);
}
// Set the tooltip
button.setToolTip(tips[i]);
// Only create a toggler for our button if it has an unclick operation
if (unclicks[i]) {
button.onClick = createToggler(button, clicks[i], unclicks[i]);
}
else {
button.onClick = clicks[i];
}
ctrlGroup.addControl(button);
}
toolbar.addControl(ctrlGroup);
var toolbarDivHtml = '<div id="divToolbar"> </div>';
$(_viewer.container).append(toolbarDivHtml);
// We want our toolbar to be centered vertically on the page
toolbar.centerToolBar = function () {
$('#divToolbar').css({
'top': 'calc(50% + ' + toolbar.getDimensions().height / 2 + 'px)'
});
};
toolbar.addEventListener(
Autodesk.Viewing.UI.ToolBar.Event.SIZE_CHANGED,
toolbar.centerToolBar
);
// Start by placing our toolbar off-screen (top: 0%)
$('#divToolbar').css({
'top': '0%',
'left': '0%',
'z-index': '100',
'position': 'absolute'
});
$('#divToolbar')[0].appendChild(toolbar.container);
// After a delay we'll center it on screen
setTimeout(function () { toolbar.centerToolBar(); }, 100);
}
function deleteToolbar() {
$('#divToolbar').remove();
}
function createToggler(button, click, unclick) {
return function () {
var state = button.getState();
if (state === Autodesk.Viewing.UI.Button.State.INACTIVE) {
button.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
click();
} else if (state === Autodesk.Viewing.UI.Button.State.ACTIVE) {
button.setState(Autodesk.Viewing.UI.Button.State.INACTIVE);
unclick();
}
};
}
function setVisibility(panel, flag) {
if (panel)
panel.setVisible(flag);
}
var css = [
'.myicon {',
'font-size: 20px;',
'padding-top: 1px !important;',
'}',
'.toolbar-vertical-group > .adsk-button > .adsk-control-tooltip {',
'left: 120%;',
'bottom: 25%;',
'}'
].join('\n');
$('<style type="text/css">' + css + '</style>').appendTo('head');
};
Autodesk.Research.TtIf.Extension.Toolbar.prototype =
Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.Research.TtIf.Extension.Toolbar.prototype.constructor =
Autodesk.Research.TtIf.Extension.Toolbar;
Autodesk.Viewing.theExtensionManager.registerExtension(
'Autodesk.Research.TtIf.Extension.Toolbar',
Autodesk.Research.TtIf.Extension.Toolbar
);
To give it a try, copy and paste the code into the extension editor in the View & Data Gallery.
Here's how it looks for me – note the two items toggled on, as well as the right-positioned tooltip for the top icon (which the invisible cursor is hovering over):
I'm happy that I once again used the tie-fighter model, as it happens to be the unofficial Star Wars day. May the 4th be with you, and all that.
In response to the last post, an old friend and colleague in Autodesk Consulting, Jan Liska, pinged me to point me to some great samples he'd written to show using the View & Data API from TypeScript. It's something I've been meaning to do for some time, and when I see the TypeScript samples when compared to JavaScript (and think about the hoops I jump through to implement and extend interfaces, etc.) I wish I'd covered it sooner. It's now been added to the list, though, rest assured. 🙂
Leave a Reply