2015年5月12日火曜日

Cardboard実験サイト 4.1 Gyro / Panorama

概要

Gyroscopeのデータを取得して、デバイスの移動に応じて画面を動かすサンプルです。
３６０°のパノラマ写真をGyro連動で回転させます。

iOS/Androidで基本的に同じ使い方ができますが、Androidでのテストは行っていません。動作不良の場合は若干の修正で対応できるはずです。

画面レイアウト設定
タグ構造 
HTML/Photo1とほぼ同じですが、styleを変更するためにclassを設定しています。
msgDivは使い方、写真タイトルを表示するエリアです。
    <body onload="init();">
        <div id="container" class="picFrame">
            <div id="outerBox" class="pic">
                <div id="msgDiv"></div>
            </div>
        </div>
    </body>

index.htmlのjavascript
js/cssインポート
        <script src="../../js/cardboard.js"></script>
        <script src="../../js/gyro.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/cardboard.css" />
        <link rel="stylesheet" type="text/css" href="Panorama.css" />

javascript
        var gyro = null;            
        function init() {
             //デバイス横位置の大きさに合わせて左右の画面をリサイズ、イベント設定を行う。
             Config.setContainerSize();
             //イベントハンドラ設定
             Config.onclick = changeImage;
             //最初の画像を表示
             changeImage();
             //Gyroオブジェクト生成
             gyro = new Gyro();
             //タイマーイベントスタート
             setTimeout(move, 33);
        }



        var posX = 0;

        function move() {
            //絶えず値が変動するので、細かすぎる動きは無視する。
            //gyroからデバイスの位置を取得
　        //gyro.ox:  device orientation alpha 
            if (Math.abs(posX - gyro.ox) > 0.1) {
                posX = gyro.ox + offsetX;
                var x = (imgWidth * posX / 360).toFixed(1);
                Config.outerBox.style.backgroundPosition = x + "px";
            }
            setTimeout(move, 33);
        }



        //ダブルタップで画面チェンジ。
function changeImage(event) {
             with(Config.outerBox.style) {
                 backgroundImage = "url("+ imgUrl +")";
                 backgroundOrigin = "0px 0px";
             }
             //画像サイズ取得のためにimgに画像をセット。
             var img = document.createElement("img");
             img.addEventListener("load", imgLoaded);
        }

        var imgWidth = 0;
        var offsetX = 0;

        //img.onloadイベントハンドラ。imgから画像サイズを取得、初期表示位置(offsetX)をセット。
        function imgLoaded(event) {
                var srcElm = event.srcElement;
                imgWidth = Math.round(srcElm.width * (document.body.clientHeight / srcElm.height));
                offsetX = (event.srcElement.width - Config.outerBox.clientWidth) / 2;
                event.srcElement.removeEventListener("load");
        }












投稿者



時刻:























ラベル:

















0 件のコメント:















コメントを投稿

























        

      









登録:
コメントの投稿 (Atom)