ORBITVU VIEWER API

Updated on Aug 17, 2021

Infinity360 と ORBITV VIEWERのフリーバージョンでは、JavaScriptを使用してORBITV VIEWERをプログラムで制御することができます。

ORBITVU VIEWER APIオブジェクトにアクセスするには、以下を実行する必要があります。

グローバルコールバック関数 (JavaScript)を定義
viewer_api_init パラメータにこの関数の名前を設定

サンプルコード：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <script type="text/javascript">
            // Global variable to store VIEWER API object reference
            var viewer_api_obj = null;

            // Callback called while VIEWER is loading
            window['my_loading_callback'] = function(progress){
                console.log('progress: ' + progress);
            }

            // Callback called when viewer is initialized (all required frames are loaded)
            // From this point it is possible to manipulate it, eg. rotate/zoom
            window['my_viewer_initialized_callback'] = function(){
                // as soon as viewer is initialized rotate to 10-th frame
                viewer_api_obj.setScene({hangle: 10});
            }

            // callback called on API initialization used to set another callbacks and store API object reference
            window['my_api_callback_name'] = function(api_obj) {
                viewer_api_obj = api_obj;
                api_obj.addCallback('my_viewer_initialized_callback', 'viewer_initialized');
                api_obj.addCallback('my_loading_callback', 'loading');
            };
        </script>
    </head>
    <body>
        // YOUR SITE CODE HERE
        <div class="orbitvu-viewer" style="background: url(//static.orbitvu.co/001/CmWVYLsjZz3nh3FvjzepBQ/300/350/img01.png) no-repeat center center #ffffff; width: 350px; height: 300px">
            <script type="text/javascript" src="//orbitvu.co/001/CmWVYLsjZz3nh3FvjzepBQ/ov3601/3/script?
                &width=350&content2=yes&height=300
                &viewer_api_init=my_api_callback_name"
            ></script>

        </div>
        // YOUR SITE CODE HERE
    </body>
</html>

external_access_init パラメータを使用することもできますが、VIEWER 2.3.33以降は viewer_api_init　の方が推奨されています。

external_access_initのサンプルコード：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            var viewer_api_obj = null;
            window['my_api_callback_name'] = function(local_viewer) {
                 /* STARTING from ORBITVU VIEWER 2.3.3 it is not required to use code below */
                 /* start: viewer <= 2.3.2*/
                     if (!local_viewer) {
                         // specify id of VIEWER Flash object
                         local_viewer = document.getElementById('ovContent-dSz54kMJ7rHKtC6E2YBHpf-obj');
                     }
                 /* end: viewer <= 2.3.2*/

                 viewer_api_obj = local_viewer;
                 local_viewer.setScene({hangle: 10});
            };
        </script>
    </head>
    <body>
        // YOUR SITE CODE HERE
        <div class="orbitvu-viewer" style="background: url(//static.orbitvu.co/001/CmWVYLsjZz3nh3FvjzepBQ/300/350/img01.png) no-repeat center center #ffffff; width: 350px; height: 300px">
            <script type="text/javascript" src="//orbitvu.co/001/CmWVYLsjZz3nh3FvjzepBQ/ov3601/3/script?
                &width=350&content2=yes&height=300
                &external_access_init=my_api_callback_name"
            ></script>

        </div>
        // YOUR SITE CODE HERE
    </body>
</html>

getScene

現在表示されているシーンに関する情報を返します。

viewer_api_obj.getScene();

次の情報を持つディクショナリーオブジェクトを返します：

scale - 現在のスケール
centerx - ビューポートセンターの現在のＸ座標 (ピクセル単位 - プレゼンテーションの最大解像度に対する)
centery - ビューポートセンターの現在のＹ座標 (ピクセル単位 - プレゼンテーションの最大解像度に対する)
centerX - centerx と同じ
centerY - centery と同じ
hangle - 現在表示されている水平フレームの数
vangle - 現在表示されている水直フレームの数

setScene

プレゼンテーションの操作に使用される主な機能：

viewer_api_obj.setScene({<param_name>: <param_value>});

パラメータ:

hangle

水平フレームに回転
値: 0 - <フレーム数>
例: viewer_api_obj.setScene({hangle: 10});

vangle

3D プレゼンテーションの垂直角度を設定

hangleInc

フレーム数（例：2, -2）で指定された水平角度を変更

vangleInc

ライン数（例：1, -1）で指定された水直角度を変更

panX

水平軸に沿って現在のビューを移動、例：100 (右に100px移動), -10% (現在のビューから左に 10%移動), -30px (左に 30px 移動)

panY

水直軸に沿って現在のビューを移動、例：100 (下に100px移動), -10% (現在のビューから上に 10%移動), -30px (上に 30px 移動)

reset_position

即座にプレゼンテーションの位置をリセット（first_frame、first_row、scaleそれぞれの初期値が使われます）。

バージョン: 3.9.0+

値: yes|no

追加パラメーター: vangle, hangle, scale - パラメーターの特定の値を強制的に変更。

　vangle - 垂直方向（行）

　hangle - 水平方向のフレーム

　scale - ズームレベル

例: setScene({reset_position: 'yes'}), setScene({reset_position: 'yes', hangle: 4})

mode

ORBITVU VIEWER が動作するモード
値: rotate | drag | onerotation | onerotationslow
デフォルト: rotate

autorotate

自動回転の開始/停止
値: yes | no
デフォルト: no

autorotate_dir

自動回転の方向
値: left | right

zoomMul

指定されたファクターによってズーム

scaleUp

ズームイン

scaleDown

ズームアウト

１回のコールで異なるパラメータを組み合わせてはいけません。

addCallback

ORBITVU VIEWER イベントをハンドルするためのコールバックを追加：

viewer_api_obj.addCallback('<callback_function_name>', '<event_name>');

関数オブジェクト自体ではなく、グローバルにアクセス可能なコールバック関数の名前を渡す必要があります。

利用可能なイベント：

activity_start

3.3.0 以降から利用可
アクティビティが発生したときに呼び出されます。例： VIEWERがインタラクトされているときや、API呼び出しによって何らかのアクションが発生したとき

activity_end

3.3.0 以降から利用可
VIEWERでアクティビティが発生していないときに呼び出されます。例：自動回転が停止させられたとき

autorotate_start

autorotate_stop

自動回転が停止させられたときに呼び出されます。例：プレゼンテーションがクリックされたとき

center_change

ビューセンターが変更されたとき呼び出されます。

fullscreen_off

fullscreen_on

interaction_start

2.3.27 以降から利用可
VIEWERに対する任意の操作で呼び出されます。例：マウスクリック、ボタンクリック、マウスホイールによるズームイン/ズームアウト

loading

2.3.33 以降から利用可
ORBITVU VIEWERがフレームをロードしているときに呼び出されます。コールバックには、すでに読み込まれたフレームの割合を表す数値が渡されます。
partial_load が yes に設定されている場合、以下のように定義された partial_loading イベントも確認してください。この場合、ロードイベントはロードされた最初の４つのフレームにのみ適用されます。

mode_changed

2.3.33 以降から利用可
VIEWER モードが変更されたとき呼び出されます。例： from rotate to drag
値: rotate | drag | onerotation | onerotationslow

partial_loading

3.0.26 以降から利用可
Called when VIEWERがバックグラウンドでフレームをローディングしているときに呼び出されます（ partial_load が yes のとき )。コールバックには、すでに読み込まれたフレームの割合を表す数値が渡されます。

partially_initialized

partial_load がyes に設定され、最初の４フレームのセットがロードされたときに呼び出されます（VIEWERはユーザーによって操作可能）

rotate

回転中に呼び出されます。

set_scene

シーンの開始を設定しているときにトリガーが発生します。

set_scene_complete

シーンの完了を設定しているときにトリガーが発生します。

viewer_initialized

2.3.33 以降から利用可
必要なすべてのフレームがロードされたときに呼び出され、VIEWERを操作することができます。

zoom_in

zoom_out

calculate_position

2.3.15 以降利用可

プレゼンテーションのmax_width および max_height に相対的な x, y 座標を現在のビューポート座標（スケール）に変換します。

たとえば、プレゼンテーションの max_width/max_height が 4422px x 3073pxで、サイズが368px x 400pxのビューポートに表示されている場合、x: 1000 y: 500 の座標は、現在のスケールと中心位置に応じてビューポートに対する座標に変換されます：

scale: 0.175, centerX: 2623, centerY: 1930

変換：

x: -99, y: -50

これは、プレゼンテーション上の特定の位置に何かを表示する場合に便利です。

使用例：

viewer.calculate_position({x: 1000, y: 500})

ここで、viewer は viewer_api_init (または external_access_init) コールバックによって返されるオブジェクトです。

パラメータ：

coords
x, y 値を持つディクショナリー, 例： {x: 1000, y: 500}

get_presentation_info

2.3.15 以降利用可

以下の情報を含むディクショナリーを返します：

width - 現在のビューポートの幅
height - 現在のビューポートの高さ
max_width - プレゼンテーションの最大幅
max_height - プレゼンテーションの最大高さ
hangles_no - 水平フレーム数
vangles_no - 水直フレーム数
min_scale - 最小ズームスケール値
max_scale - 最大ズームスケール値
dimensions_changed - if true indicates that Viewer is changing its dimensions, eg. while entering fullscreen

handle_resize

ORBITV VIEWERに、コンテナのサイズが変更されたことを手動で通知します：

viewer_api_obj.handle_resize();

これはウィンドウのサイズ変更時に自動的に呼び出されますが、たとえば VIEWERのコンテナ要素のディメンションをインタラクティブに変更したいのであれば、ORBITVU VIEWERが正しく表示されるようにhandle_resizeを呼び出すことができます。

enable_mousewheel

マウスホイールによるズームを有効にします。当メソッドは mousewheel パラメータを ‘yes’に切り替えます：

viewer_api_obj.enable_mousewheel();

disable_mousewheel

マウスホイールによるズームを無効にします。当メソッドは mousewheel パラメータを ‘no’に切り替えます：

viewer_api_obj.disable_mousewheel()

set_forced_mode

2.3.33 以降利用可

ORBITVU VIEWERのモードをドラッグ(drag) か回転(rotate)に切り替えます。

値: drag | rotate

Previous Article ORBITTOUR 埋め込みコードのカスタマイズ

Next Article ORBITTOUR API