Forge Viewer:ツールバーとパネルを持つスケルトン Extension で作成したスケルトン Extension のパネルにHTML コンテンツを用意して、アイコン画像付きのツールバー ボタンから表示/非表示するよう、 Extension を拡張してみたいと思います。
パネルの実装
Forge Viewer 内に表示されるコンテンツは、HTML として定義したユーザ インタフェースと、ユーザ インタフェースのイベント処理関数を内包する必要があります。まずは、Viewing.Extension.ViewControl.js ファイルを新規作成して、ViewControlPanel となる次のコードを記入します。
// *******************************************
// View Control Panel
// *******************************************
function ViewControlPanel(viewer, container, id, title, options) {
this.viewer = viewer;
Autodesk.Viewing.UI.DockingPanel.call(this, container, id, title, options);
var _myView = viewer.getState();
// the style of the docking panel
// use this built-in style to support Themes on Viewer 4+
this.container.classList.add('docking-panel-container-solid-color-a');
this.container.style.top = "10px";
this.container.style.left = "10px";
this.container.style.width = "240px";
this.container.style.height = "250px";
this.container.style.resize = "auto";
// this is where we should place the content of our panel
var div = document.createElement('div');
// and may also append child elements...
var html = [ '< div id="controls" style="position:absolute; width:100%">',
' < div style="position:absolute; top:10px; left:10px">',
' < button class="docking-panel-tertiary-button" type="button" id="register" style="width:75px; height:30px">ビュー登録',
' < button class="docking-panel-tertiary-button" type="button" id="restore" style="width:75px; height:30px">ビュー復元',
' < /div>',
' < div style="position:absolute; top:50px; left:30px">',
' < button class="docking-panel-tertiary-button" id="zoomin" style="position:absolute; top:0px; left:60px; width:30px">∧',
' < button class="docking-panel-tertiary-button" id="zoomout" style="position:absolute; top:80px; left:60px; width:30px">∨',
' < button class="docking-panel-tertiary-button" id="turnright" style="position:absolute; top:40px; left:140px; width:30px">>',
' < button class="docking-panel-tertiary-button" id="turnleft" style="position:absolute; top:40px; left:-20px; width:30px"><',
' < input id="step" style="position:absolute; top:52px; left:65px; width:50px; height:20px" size="5" maxlength="4" value="100" type="text" />',
' < /div>',
'< /div>'
].join('\n');
div.innerHTML = html;
this.container.appendChild(div);
// Register View
$(document).on("click", "[id^='register']", function () {
_myView = viewer.getState();
});
// Restore View
$(document).on("click", "[id^='restore']", function () {
_viewer.restoreState(_myView);
});
// Zoom In
$(document).on("click", "[id^='zoomin']", function () {
viewer.canvas.focus();
console.log(viewer.getActiveNavigationTool());
viewer.setActiveNavigationTool("dolly");
var step = document.getElementById('step').value * -1.0;
var cam = viewer.getCamera();
cam.translateX(0);
cam.translateY(0);
cam.translateZ(step);
viewer.impl.syncCamera();
viewer.setActiveNavigationTool("orbit");
});
// ↓ Zoom Out
$(document).on("click", "[id^='zoomout']", function () {
viewer.canvas.focus();
viewer.setActiveNavigationTool("dolly");
var step = document.getElementById('step').value;
var cam = viewer.getCamera();
cam.translateX(0);
cam.translateY(0);
cam.translateZ(step);
viewer.impl.syncCamera();
viewer.setActiveNavigationTool("orbit");
});
// Turn Right
$(document).on("click", "[id^='turnright']", function () {
viewer.canvas.focus();
viewer.setActiveNavigationTool("orbit");
var step = document.getElementById('step').value * -1.0;
var cam = viewer.getCamera();
cam.translateX(step);
cam.translateY(0);
cam.translateZ(0);
viewer.impl.syncCamera();
});
// Turn Left
$(document).on("click", "[id^='turnleft']", function () {
viewer.canvas.focus();
viewer.setActiveNavigationTool("orbit");
var step = document.getElementById('step').value;
var cam = viewer.getCamera();
cam.translateX(step);
cam.translateY(0);
cam.translateZ(0);
viewer.impl.syncCamera();
});
}
ViewControlPanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
ViewControlPanel.prototype.constructor = ViewControlPanel;
Extension の実装
上記のパネルを実装することになる ViewControlExtension Extension を実装します。ここでは、ViewControlPanel 実装の下に、次のコードを追記します。
ViewControlPanel パネルを表示するツールバー ボタンには、サーバー上の images フォルダの icon_ready.png が設定されてます。このアイコン画像は、ツールバー スタイル(CSS)に動的に追加されている点に注意してください。
// *******************************************
// View Control Extension
// *******************************************
function ViewControlExtension(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
this.panel = null;
}
ViewControlExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
ViewControlExtension.prototype.constructor = ViewControlExtension;
ViewControlExtension.prototype.load = function () {
if (this.viewer.toolbar) {
// Toolbar is already available, create the UI
this.createUI();
} else {
// Toolbar hasn't been created yet, wait until we get notification of its creation
this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
}
return true;
};
ViewControlExtension.prototype.onToolbarCreated = function () {
this.viewer.removeEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
this.onToolbarCreatedBinded = null;
this.createUI();
};
ViewControlExtension.prototype.createUI = function () {
var viewer = this.viewer;
var panel = this.panel;
// button to show the docking panel
var toolbarButtonShowDockingPanel = new Autodesk.Viewing.UI.Button('showViewControlPanel');
toolbarButtonShowDockingPanel.onClick = function (e) {
// if null, create it
if (panel === null) {
panel = new ViewControlPanel(viewer, viewer.container,
'viewControlPanel', 'View Control');
}
// show/hide docking panel
panel.setVisible(!panel.isVisible());
};
// ViewControlToolbarButton CSS class should be defined on your .css file
// you may include icons, below is a sample class:
var css = [
'.ViewControlToolbarButton {',
' background-image: url(/images/icon_ready.png);',
' background-size: 24px;',
' background-repeat: no-repeat;',
' background-position: center;',
'}'
].join('\n');
$('< style type="text/css">' + css + '< /style>').appendTo('head');
toolbarButtonShowDockingPanel.addClass('ViewControlToolbarButton');
toolbarButtonShowDockingPanel.setToolTip('View Control');
// SubToolbar
this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('UtilitiesToolbar');
this.subToolbar.addControl(toolbarButtonShowDockingPanel);
viewer.toolbar.addControl(this.subToolbar);
};
ViewControlExtension.prototype.unload = function () {
this.viewer.toolbar.removeControl(this.subToolbar);
return true;
};
Autodesk.Viewing.theExtensionManager.registerExtension('Viewing.Extension.ViewControl', ViewControlExtension);
Extension のロード
Viewing.Extension.ViewControl.js ファイルに実装した Extension の ID は、Viewing.Extension.ViewControl です。Extension のロードにも、この Extension ID を使用します。
_viewer.loadExtension('Viewing.Extension.ViewControl');
Extension で実装した ViewControlPanel パネルで配置されたボタンの クリック ハンドラに、JQuery を使用している点に注意してください。このため、ビューアを実装する本体の HTML には、Viewing.Extension.ViewControl.js ファイルとともに、JQuery ライブラリの参照記述も必要になります。
< script type="text/javascript" src="https://code.jquery.com/jquery-2.1.2.min.js"> < script type="text/javascript" src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"> < script type="text/javascript" src="index.js"> < script type="text/javascript" src="Viewing.Extension.ViewControl.js">
作成した Extension のツールバー ボタンとパネルは、Forge Viewer のテーマにも対応しているので、ライトテーマでは次のようになるはずです。
By Toshiaki Isezaki
コメント