Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Drop handkerchief for JINS MEME
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment