yaggytter/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <style>
    #icon-body {
        transition-property: transform;
        transition-duration: 0.1s;
    }
    .dialog-container {
        height: 500px;
        overflow-y: scroll;
    }
  </style>
  <script>
  var JinsMemeAppID = 'AppID';
  var JinsMemeAppSecret = 'AppSecret';
  var blinkCount = 0;
  var elapsedSec = 0.0;
  var gameState = "STOP"; // STOP / START / DROP / END
  var startTime = new Date();
  var dropTime = new Date();
  var startYaw = 0;
  var nowYaw = 0;

    // 計測結果を描画する
    function draw(data)
    {
        nowYaw = data.yaw;
        var info = "";
        var nowTime = new Date();

        if (gameState == 'START' || gameState == 'DROP') {
            // まばたきチェック
            var eye = document.getElementById("icon-eye");
            if (data.blinkSpeed > 0 || data.blinkStrength > 0) {
                blinkCount++;
            }

            // 振り向きチェック
            var yaw = Math.abs(startYaw - nowYaw);
            if (yaw > 90 && yaw < 270) {
                document.getElementById('btn').innerHTML = '次ターンスタート';
                info = "決着！<br/>";
                if (gameState == 'DROP') {
                    var point = Math.floor((nowTime.getTime() - dropTime.getTime()) / 1000);
                    info += "ポイント : " + point;
                }
                else {
                    info += "ポイント : 60";
                }
                gameState = 'STOP';
            }
            else {
                // 状況描画
                var diffSec = Math.floor((nowTime.getTime() - startTime.getTime()) / 1000);

                var blinkRate = Math.floor(60 * blinkCount / diffSec);
                info = "まばたき速度 : " + blinkRate + "回/分<br/>経過秒数 : " + diffSec + "<br/>";

                if (diffSec >= 60) {
                    document.getElementById('btn').innerHTML = '次ターンスタート';
                    info = "決着！<br/>";
                    gameState = 'STOP';
                }
            }
        }

        if (gameState == 'DROP') {
            var point = Math.floor((nowTime.getTime() - dropTime.getTime()) / 1000);
            info += "ポイント : " + point;
        }

        if (info != "") {
            document.getElementById('info').innerHTML = info;
        }
    }

    function btnClicked() {

        if (gameState == 'STOP') {
            gameState = 'START';
            document.getElementById('btn').innerHTML = 'ハンカチを落とす';
            elapsedSec = 0.0;
            blinkCount = 0;
            startTime = new Date();
            startYaw = nowYaw;
            document.getElementById('icon-eye').style.display = "none";
            document.getElementById('img-D1').style.display = "";
        }
        else if (gameState == 'START') {
            gameState = 'DROP';
            dropTime = new Date();
            document.getElementById('btn').innerHTML = 'やり直す';
            document.getElementById('img-D1').style.display = "none";
            document.getElementById('img-D2').style.display = "";
        }
        else if (gameState == 'DROP') {
            gameState = 'STOP';
            document.getElementById('btn').innerHTML = 'ハンカチ落としスタート';
            document.getElementById('img-D2').style.display = "none";
            document.getElementById('icon-eye').style.display = "";
        }
    }

    // 起動時のイベント
    document.addEventListener('deviceready', function() {
        startTime = new Date();

        // アプリの初期化処理
        cordova.plugins.JinsMemePlugin.setAppClientID(
            JinsMemeAppID,
            JinsMemeAppSecret,
            function() {
                restartScan();
            },
            function() {
                console.log('Error: setAppClientID');
            }
        );
    });

    // デバイスのスキャン開始
    function startScan() {
        // デバイス選択ダイアログを表示
        var deviceList = document.getElementById('deviceList');
        deviceList.innerHTML = '<ons-list-header>デバイスを選択</ons-list-header>';
        document.getElementById('selectDeviceDialog').show();

        cordova.plugins.JinsMemePlugin.startScan(function(device) {
            // ダイアログにデバイスを追加
            deviceList.innerHTML += `<ons-list-item tappable onclick="connect('${device}')">${device}</ons-list-item>`;
        }, function() {
            console.log('Error: startScan');
        });
    }

    // デバイスのスキャン停止
    function stopScan(successCallback) {
        cordova.plugins.JinsMemePlugin.stopScan(function() {
            if(successCallback) successCallback();
        }, function() {
            console.log('Error: stopScan');
        });
    }

    // デバイスのスキャン再開
    function restartScan() {
        stopDataReport();
        disconnect();
        stopScan(startScan);
    }

    // アプリとデバイスの接続
    function connect(device) {
        // スキャン停止
        stopScan();
        // ダイアログを閉じてモーダルを表示
        document.getElementById('selectDeviceDialog').hide();
        document.getElementById('modal').show();

        // 選択されたデバイスに接続
        cordova.plugins.JinsMemePlugin.connect(device, function() {
            startDataReport();
        }, function() {
            console.log('Disconnect');
        }, function() {
            console.log('Error: connect');
            document.getElementById('modal').hide();
        });
    }

    // アプリとデバイスの切断
    function disconnect() {
        cordova.plugins.JinsMemePlugin.disconnect(function() {}, function() {
            console.log('Error: disconnect');
        });
    }

    // 計測開始
    function startDataReport() {
        elapsedSec = 0.0;
        blinkCount = 0;
        gameState = "STOP";
        startTime = new Date();
        document.getElementById('btn').innerHTML = 'ハンカチを落とす';

        cordova.plugins.JinsMemePlugin.startDataReport(function(data) {
            document.getElementById('modal').hide();
            draw(data);
        }, function() {
            console.log('Error: startDataReport');
            document.getElementById('modal').hide();
        });
    }

    // 計測停止
    function stopDataReport()
    {
        cordova.plugins.JinsMemePlugin.stopDataReport(function() {}, function()
        {
            console.log('Error: stopDataReport');
        });
    }
    // プラグアイコン押下時
    function reconnect() {
        ons.notification.confirm("再接続しますか？")
        .then(function(result) {
           if(result) {
               restartScan();
           }
        });
    }
  </script>
</head>
<body>
  <ons-page>
    <!-- ツールバー -->
    <ons-toolbar>
      <div class="center">Drop handkerchief</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="plug" size="24px" onclick="reconnect()"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <!-- タブバー -->
    <ons-tabbar position="auto" id="tabbar">
      <ons-tab label="" page="tab1.html" icon="eye" active>
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <!-- Eyeタブ -->
<ons-template id="tab1.html">
    <ons-page id="first-page">
        <p>
            <ons-button modifier="large" id='btn' onclick='btnClicked();'>ハンカチ落としスタート</ons-button>
        </p>
        <div style="text-align: center;" id="info">
        準備OK？
        </div>
        <div style="text-align: center;">
            <ons-icon id="icon-eye" icon="eye" size="200px"></ons-icon>
            <img src="img/D1.png" id="img-D1" style="display:none;" width="70%"/>
            <img src="img/D2.png" id="img-D2" style="display:none;" width="70%"/>
        </div>
    </ons-page>
</ons-template>

  <!-- デバイス選択ダイアログ -->
  <ons-dialog id="selectDeviceDialog">
    <ons-list id="deviceList">
    </ons-list>
  </ons-dialog>

  <!-- モーダルウィンドウ -->
  <ons-modal id="modal">
    <p>接続中...</p>
    <ons-icon icon="spinner" size="28px" spin></ons-icon>
  </ons-modal>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
	<script src="components/loader.js"></script>
	<script src="lib/onsenui/js/onsenui.min.js"></script>

	<link rel="stylesheet" href="components/loader.css">
	<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
	<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
	<link rel="stylesheet" href="css/style.css">

	<style>
	#icon-body {
	transition-property: transform;
	transition-duration: 0.1s;
	}
	.dialog-container {
	height: 500px;
	overflow-y: scroll;
	}
	</style>
	<script>
	var JinsMemeAppID = 'AppID';
	var JinsMemeAppSecret = 'AppSecret';
	var blinkCount = 0;
	var elapsedSec = 0.0;
	var gameState = "STOP"; // STOP / START / DROP / END
	var startTime = new Date();
	var dropTime = new Date();
	var startYaw = 0;
	var nowYaw = 0;

	// 計測結果を描画する
	function draw(data)
	{
	nowYaw = data.yaw;
	var info = "";
	var nowTime = new Date();

	if (gameState == 'START' \|\| gameState == 'DROP') {
	// まばたきチェック
	var eye = document.getElementById("icon-eye");
	if (data.blinkSpeed > 0 \|\| data.blinkStrength > 0) {
	blinkCount++;
	}

	// 振り向きチェック
	var yaw = Math.abs(startYaw - nowYaw);
	if (yaw > 90 && yaw < 270) {
	document.getElementById('btn').innerHTML = '次ターンスタート';
	info = "決着！<br/>";
	if (gameState == 'DROP') {
	var point = Math.floor((nowTime.getTime() - dropTime.getTime()) / 1000);
	info += "ポイント : " + point;
	}
	else {
	info += "ポイント : 60";
	}
	gameState = 'STOP';
	}
	else {
	// 状況描画
	var diffSec = Math.floor((nowTime.getTime() - startTime.getTime()) / 1000);

	var blinkRate = Math.floor(60 * blinkCount / diffSec);
	info = "まばたき速度 : " + blinkRate + "回/分<br/>経過秒数 : " + diffSec + "<br/>";

	if (diffSec >= 60) {
	document.getElementById('btn').innerHTML = '次ターンスタート';
	info = "決着！<br/>";
	gameState = 'STOP';
	}
	}
	}

	if (gameState == 'DROP') {
	var point = Math.floor((nowTime.getTime() - dropTime.getTime()) / 1000);
	info += "ポイント : " + point;
	}

	if (info != "") {
	document.getElementById('info').innerHTML = info;
	}
	}

	function btnClicked() {

	if (gameState == 'STOP') {
	gameState = 'START';
	document.getElementById('btn').innerHTML = 'ハンカチを落とす';
	elapsedSec = 0.0;
	blinkCount = 0;
	startTime = new Date();
	startYaw = nowYaw;
	document.getElementById('icon-eye').style.display = "none";
	document.getElementById('img-D1').style.display = "";
	}
	else if (gameState == 'START') {
	gameState = 'DROP';
	dropTime = new Date();
	document.getElementById('btn').innerHTML = 'やり直す';
	document.getElementById('img-D1').style.display = "none";
	document.getElementById('img-D2').style.display = "";
	}
	else if (gameState == 'DROP') {
	gameState = 'STOP';
	document.getElementById('btn').innerHTML = 'ハンカチ落としスタート';
	document.getElementById('img-D2').style.display = "none";
	document.getElementById('icon-eye').style.display = "";
	}
	}

	// 起動時のイベント
	document.addEventListener('deviceready', function() {
	startTime = new Date();

	// アプリの初期化処理
	cordova.plugins.JinsMemePlugin.setAppClientID(
	JinsMemeAppID,
	JinsMemeAppSecret,
	function() {
	restartScan();
	},
	function() {
	console.log('Error: setAppClientID');
	}
	);
	});

	// デバイスのスキャン開始
	function startScan() {
	// デバイス選択ダイアログを表示
	var deviceList = document.getElementById('deviceList');
	deviceList.innerHTML = '<ons-list-header>デバイスを選択</ons-list-header>';
	document.getElementById('selectDeviceDialog').show();

	cordova.plugins.JinsMemePlugin.startScan(function(device) {
	// ダイアログにデバイスを追加
	deviceList.innerHTML += `<ons-list-item tappable onclick="connect('${device}')">${device}</ons-list-item>`;
	}, function() {
	console.log('Error: startScan');
	});
	}

	// デバイスのスキャン停止
	function stopScan(successCallback) {
	cordova.plugins.JinsMemePlugin.stopScan(function() {
	if(successCallback) successCallback();
	}, function() {
	console.log('Error: stopScan');
	});
	}

	// デバイスのスキャン再開
	function restartScan() {
	stopDataReport();
	disconnect();
	stopScan(startScan);
	}

	// アプリとデバイスの接続
	function connect(device) {
	// スキャン停止
	stopScan();
	// ダイアログを閉じてモーダルを表示
	document.getElementById('selectDeviceDialog').hide();
	document.getElementById('modal').show();

	// 選択されたデバイスに接続
	cordova.plugins.JinsMemePlugin.connect(device, function() {
	startDataReport();
	}, function() {
	console.log('Disconnect');
	}, function() {
	console.log('Error: connect');
	document.getElementById('modal').hide();
	});
	}

	// アプリとデバイスの切断
	function disconnect() {
	cordova.plugins.JinsMemePlugin.disconnect(function() {}, function() {
	console.log('Error: disconnect');
	});
	}

	// 計測開始
	function startDataReport() {
	elapsedSec = 0.0;
	blinkCount = 0;
	gameState = "STOP";
	startTime = new Date();
	document.getElementById('btn').innerHTML = 'ハンカチを落とす';

	cordova.plugins.JinsMemePlugin.startDataReport(function(data) {
	document.getElementById('modal').hide();
	draw(data);
	}, function() {
	console.log('Error: startDataReport');
	document.getElementById('modal').hide();
	});
	}

	// 計測停止
	function stopDataReport()
	{
	cordova.plugins.JinsMemePlugin.stopDataReport(function() {}, function()
	{
	console.log('Error: stopDataReport');
	});
	}
	// プラグアイコン押下時
	function reconnect() {
	ons.notification.confirm("再接続しますか？")
	.then(function(result) {
	if(result) {
	restartScan();
	}
	});
	}
	</script>
	</head>
	<body>
	<ons-page>
	<!-- ツールバー -->
	<ons-toolbar>
	<div class="center">Drop handkerchief</div>
	<div class="right">
	<ons-toolbar-button>
	<ons-icon icon="plug" size="24px" onclick="reconnect()"></ons-icon>
	</ons-toolbar-button>
	</div>
	</ons-toolbar>

	<!-- タブバー -->
	<ons-tabbar position="auto" id="tabbar">
	<ons-tab label="" page="tab1.html" icon="eye" active>
	</ons-tab>
	</ons-tabbar>
	</ons-page>

	<!-- Eyeタブ -->
	<ons-template id="tab1.html">
	<ons-page id="first-page">
	<p>
	<ons-button modifier="large" id='btn' onclick='btnClicked();'>ハンカチ落としスタート</ons-button>
	</p>
	<div style="text-align: center;" id="info">
	準備OK？
	</div>
	<div style="text-align: center;">
	<ons-icon id="icon-eye" icon="eye" size="200px"></ons-icon>
	<img src="img/D1.png" id="img-D1" style="display:none;" width="70%"/>
	<img src="img/D2.png" id="img-D2" style="display:none;" width="70%"/>
	</div>
	</ons-page>
	</ons-template>

	<!-- デバイス選択ダイアログ -->
	<ons-dialog id="selectDeviceDialog">
	<ons-list id="deviceList">
	</ons-list>
	</ons-dialog>

	<!-- モーダルウィンドウ -->
	<ons-modal id="modal">
	<p>接続中...</p>
	<ons-icon icon="spinner" size="28px" spin></ons-icon>
	</ons-modal>

	</body>
	</html>