Autodesk Developer Blog : View and Data API チュートリアル～その5 ～パネル表示

ご注意：View and Data API は2016年6月に Viewer と Model Derivative API に分離、及び、名称変更されました。

引き続き、前回まで作成した Extension を拡張していきます。View and Data API では、表示領域にカスタムなボタンやユーザインタフェースを表示させることも出来ます。今回は、前回、オブジェクト選択の機能で拡張した Extension に、選択したオブジェクトのプロパティを表示するパネル表示機能を実装していきます。なお、ここで紹介する内容は、Autodesk View & Data API – Getting Started Tutorial リポジトリ の Chapter 3 の Step 6 に該当するものです。

Viewing.Extension.Workshop.js を Adobe Brackets などで開いて、次の太字部分を追記します。

			
////////////////////////////////////////////////////////////////
// base class constructor
//
/////////////////////////////////////////////////////////////////
Autodesk.Viewing.Extension.call(this, viewer, options);
var _self = this;
var _viewer = viewer;
/////////////////////////////////////////////////////////////////
// create panel and set up inheritance
//
/////////////////////////////////////////////////////////////////
Viewing.Extension.Workshop.WorkshopPanel = function (
    parentContainer,
    id,
    title,
    options) {
    Autodesk.Viewing.UI.PropertyPanel.call(
        this,
        parentContainer,
        id, title);
};
Viewing.Extension.Workshop.WorkshopPanel.prototype = Object.create(
    Autodesk.Viewing.UI.PropertyPanel.prototype);
Viewing.Extension.Workshop.WorkshopPanel.prototype.constructor =
    Viewing.Extension.Workshop.WorkshopPanel;

		

Extension のロードとロード解除を担当する load() と unload() 関数で、定義したパネルのインスタンス化と後処理を追記します。load() と unload() 関数内の太字部分を追記してください。

			
/////////////////////////////////////////////////////////////////
// load callback: invoked when viewer.loadExtension is called
//
/////////////////////////////////////////////////////////////////
_self.load = function () {
    _viewer.addEventListener(
        Autodesk.Viewing.SELECTION_CHANGED_EVENT,
        _self.onSelectionChanged);
    _self.panel = new Viewing.Extension.Workshop.WorkshopPanel(
        _viewer.container,
        'WorkshopPanelId',
        'Workshop Panel');
    console.log('Viewing.Extension.Workshop loaded');
    return true;
};
/////////////////////////////////////////////////////////////////
// unload callback: invoked when viewer.unloadExtension is called
//
/////////////////////////////////////////////////////////////////
_self.unload = function () {
    _self.panel.setVisible(false);
    _self.panel.uninitialize();
    console.log('Viewing.Extension.Workshop unloaded');
    return true;
};

		

前回、オブジェクト選択で利用した SELECTION_CHANGED イベントのイベントハンドラ関数である onSelectionChanged() の中身を次の内容で置き換えます。このコードは、選択したオブジェクトをビュー内に拡大表示して、そのプロパティをインスタンス化したパネルに表示します。

			
/////////////////////////////////////////////////////////////////
// selection changed callback
//
/////////////////////////////////////////////////////////////////
_self.onSelectionChanged = function (event) {
    function propertiesHandler(result) {
        if (result.properties) {
            _self.panel.setProperties(
                result.properties);
            _self.panel.setVisible(true);
        }
    }
    if (event.dbIdArray.length) {
        var dbId = event.dbIdArray[0];
        _viewer.getProperties(
            dbId,
            propertiesHandler);
        _viewer.fitToView(dbId);
        _viewer.isolateById(dbId);
    }
    else {
        _viewer.isolateById([]);
        _viewer.fitToView();
        _self.panel.setVisible(false);
    }
}

		

Viewing.Extension.Workshop.js を上書き保存してから、Node.js で構築してある Web サーバーを localhost:3000 のURLで表示してみてください。選択したオブジェクトが拡大表示され、同時にプロパティが Workshop Panel のタイトルを持つパネルに表示されるはずです。

ここまでの実装で、オブジェクト選択とパネル表示を Extension としてモジュール化する実装が完了しました。このように、Extension 単位でさまざまな機能を盛り込んでいくことができます。

さて、次回は表示したオブジェクトにアニメーション機能を追加してみます。

By Toshiaki Isezaki

View and Data API チュートリアル ～ その5 ～ パネル表示

Share this:

Like this:

View and Data API チュートリアル～その5 ～パネル表示