|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>HTTP with Client-Side Sensor Data and Flags</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
} |
|
#container { |
|
margin: 50px; |
|
} |
|
#output, #client-refresh, #client-sensor, #controls, #flags, #export, #send-data, #send-flags { |
|
margin-top: 10px; |
|
padding: 10px; |
|
border: 1px solid #ccc; |
|
background-color: #f9f9f9; |
|
width: 320px; |
|
} |
|
#status { |
|
margin-top: 10px; |
|
font-weight: bold; |
|
} |
|
#error { |
|
margin-top: 10px; |
|
color: red; |
|
} |
|
button { |
|
margin-right: 5px; |
|
margin-bottom: 5px; |
|
} |
|
.flag-button.active { |
|
background-color: #4CAF50; |
|
color: white; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="container"> |
|
<h1>HTTP & Client-Side Sensor Data with Flags</h1> |
|
<p>データを送信するサーバーのURLを指定してください（例: https://example.com/api/）:</p> |
|
<input type="text" id="server-url" placeholder="https://example.com/api/"> |
|
<div id="send-flags"> |
|
<button onclick="setServerUrl()">設定</button> |
|
</div> |
|
|
|
<div id="controls"> |
|
<button onclick="startRecording()">記録開始</button> |
|
<button onclick="stopRecording()">記録停止</button> |
|
</div> |
|
|
|
<div id="flags"> |
|
<h3>フラグ設定</h3> |
|
<button id="flag-start" class="flag-button" onclick="toggleFlag('start')">Start</button> |
|
<button id="flag-stop" class="flag-button" onclick="toggleFlag('stop')">Stop</button> |
|
<button id="flag-pause" class="flag-button" onclick="toggleFlag('pause')">Pause</button> |
|
<button id="flag-walk" class="flag-button" onclick="toggleFlag('walk')">Walk</button> |
|
<button id="flag-inBag" class="flag-button" onclick="toggleFlag('inBag')">In Bag</button> |
|
<button id="flag-inPocket" class="flag-button" onclick="toggleFlag('inPocket')">In Pocket</button> |
|
<button id="flag-inHand" class="flag-button" onclick="toggleFlag('inHand')">In Hand</button> |
|
<div id="current-flags"> |
|
<strong>現在のフラグ:</strong> なし |
|
</div> |
|
<button onclick="sendFlagsToServer()">フラグを送信</button> |
|
</div> |
|
|
|
<div id="export"> |
|
<button onclick="exportToCSV()">CSVとしてエクスポート</button> |
|
</div> |
|
<div id="send-data"> |
|
<button onclick="sendDataToServer()">データを送信</button> |
|
</div> |
|
|
|
<div id="status">Status: Not connected</div> |
|
<div id="output">最新サーバーデータがここに表示されます</div> |
|
<div id="client-sensor">クライアントサイドデータ: 加速度と回転率がここに表示されます</div> |
|
<div id="client-refresh">クライアント リフレッシュレート: 計測中...</div> |
|
<div id="error">エラー: なし</div> |
|
</div> |
|
|
|
<script> |
|
|
|
let serverUrl = ''; |
|
|
|
|
|
let isRecording = false; |
|
let sensorData = []; |
|
|
|
|
|
const flags = { |
|
start: false, |
|
stop: false, |
|
pause: false, |
|
walk: false, |
|
inBag: false, |
|
inPocket: false, |
|
inHand: false |
|
}; |
|
|
|
|
|
function updateFlagButtons() { |
|
for (let key in flags) { |
|
const button = document.getElementById(`flag-${key}`); |
|
if (flags[key]) { |
|
button.classList.add('active'); |
|
} else { |
|
button.classList.remove('active'); |
|
} |
|
} |
|
|
|
|
|
const activeFlags = Object.keys(flags).filter(key => flags[key]); |
|
const currentFlagsDiv = document.getElementById('current-flags'); |
|
currentFlagsDiv.innerHTML = `<strong>現在のフラグ:</strong> ${activeFlags.length > 0 ? activeFlags.join(', ') : 'なし'}`; |
|
} |
|
|
|
|
|
function toggleFlag(flag) { |
|
if (flags.hasOwnProperty(flag)) { |
|
flags[flag] = !flags[flag]; |
|
updateFlagButtons(); |
|
} |
|
} |
|
|
|
|
|
function setServerUrl() { |
|
const inputUrl = document.getElementById('server-url').value.trim(); |
|
if (inputUrl) { |
|
serverUrl = inputUrl.endsWith('/') ? inputUrl : inputUrl + '/'; |
|
document.getElementById('status').innerHTML = `Status: Server URL set to ${serverUrl}`; |
|
document.getElementById('error').innerHTML = "エラー: なし"; |
|
} else { |
|
alert("有効なサーバーURLを入力してください。"); |
|
} |
|
} |
|
|
|
|
|
function requestSensorPermissions() { |
|
try { |
|
if (typeof DeviceMotionEvent.requestPermission === 'function') { |
|
DeviceMotionEvent.requestPermission() |
|
.then(permissionState => { |
|
if (permissionState === 'granted') { |
|
document.getElementById('status').innerHTML = "センサーアクセスが許可されました"; |
|
startMotionDetection(); |
|
} else { |
|
document.getElementById('status').innerHTML = "センサーアクセスが拒否されました"; |
|
} |
|
}) |
|
.catch(error => { |
|
handleError(error); |
|
}); |
|
} else { |
|
|
|
startMotionDetection(); |
|
} |
|
} catch (error) { |
|
handleError(error); |
|
} |
|
} |
|
|
|
|
|
function startMotionDetection() { |
|
try { |
|
window.addEventListener('devicemotion', function(event) { |
|
let acceleration = event.accelerationIncludingGravity; |
|
let rotationRate = event.rotationRate; |
|
let timestamp = event.timeStamp; |
|
|
|
let sensorInfo = { |
|
timestamp: timestamp, |
|
acceleration: { |
|
x: acceleration.x, |
|
y: acceleration.y, |
|
z: acceleration.z |
|
}, |
|
rotationRate: { |
|
alpha: rotationRate.alpha, |
|
beta: rotationRate.beta, |
|
gamma: rotationRate.gamma |
|
}, |
|
flags: { ...flags } |
|
}; |
|
|
|
document.getElementById('client-sensor').innerHTML = |
|
`加速度: <br> X: ${acceleration.x} <br> Y: ${acceleration.y} <br> Z: ${acceleration.z} <br>` + |
|
`回転率: <br> alpha: ${rotationRate.alpha} <br> beta: ${rotationRate.beta} <br> gamma: ${rotationRate.gamma}`; |
|
|
|
if (isRecording) { |
|
sensorData.push(sensorInfo); |
|
} |
|
|
|
|
|
sendFlagsToServer(); |
|
}); |
|
} catch (error) { |
|
handleError(error); |
|
} |
|
} |
|
|
|
|
|
function startRecording() { |
|
sensorData = []; |
|
isRecording = true; |
|
document.getElementById('status').innerHTML = "ステータス: 記録中..."; |
|
} |
|
|
|
|
|
function stopRecording() { |
|
isRecording = false; |
|
document.getElementById('status').innerHTML = "ステータス: 記録停止"; |
|
} |
|
|
|
|
|
function exportToCSV() { |
|
if (sensorData.length === 0) { |
|
alert("記録されたデータがありません。"); |
|
return; |
|
} |
|
|
|
let csvContent = "data:text/csv;charset=utf-8,"; |
|
csvContent += "timestamp,acceleration_x,acceleration_y,acceleration_z,rotation_alpha,rotation_beta,rotation_gamma,flags\n"; |
|
|
|
sensorData.forEach(function(row) { |
|
let flagsString = Object.keys(row.flags).filter(key => row.flags[key]).join(';') || 'none'; |
|
let dataString = `${row.timestamp},${row.acceleration.x},${row.acceleration.y},${row.acceleration.z},${row.rotationRate.alpha},${row.rotationRate.beta},${row.rotationRate.gamma},${flagsString}`; |
|
csvContent += dataString + "\n"; |
|
}); |
|
|
|
let encodedUri = encodeURI(csvContent); |
|
let link = document.createElement("a"); |
|
link.setAttribute("href", encodedUri); |
|
let currentDate = new Date(); |
|
let filename = `sensor_data_${currentDate.getFullYear()}-${String(currentDate.getMonth()+1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}_${String(currentDate.getHours()).padStart(2, '0')}-${String(currentDate.getMinutes()).padStart(2, '0')}-${String(currentDate.getSeconds()).padStart(2, '0')}.csv`; |
|
link.setAttribute("download", filename); |
|
document.body.appendChild(link); |
|
link.click(); |
|
document.body.removeChild(link); |
|
} |
|
|
|
|
|
function sendDataToServer() { |
|
if (sensorData.length === 0) { |
|
alert("送信するデータがありません。"); |
|
return; |
|
} |
|
|
|
if (!serverUrl) { |
|
alert("サーバーURLを設定してください。"); |
|
return; |
|
} |
|
|
|
fetch(`${serverUrl}sensor-data`, { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json' |
|
}, |
|
body: JSON.stringify(sensorData) |
|
}) |
|
.then(response => { |
|
if (response.ok) { |
|
alert("データが正常に送信されました。"); |
|
document.getElementById('output').innerHTML = "データがサーバーに送信されました。"; |
|
} else { |
|
alert("データの送信に失敗しました。ステータスコード: " + response.status); |
|
} |
|
}) |
|
.catch(error => { |
|
handleError(error); |
|
}); |
|
} |
|
|
|
|
|
function sendFlagsToServer() { |
|
if (!serverUrl) { |
|
console.warn("サーバーURLが設定されていません。フラグを送信できません。"); |
|
return; |
|
} |
|
|
|
|
|
fetch(`${serverUrl}flags`, { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json' |
|
}, |
|
body: JSON.stringify({ flags: { ...flags } }) |
|
}) |
|
.then(response => { |
|
if (response.ok) { |
|
console.log("フラグが正常に送信されました。"); |
|
} else { |
|
console.error("フラグの送信に失敗しました。ステータスコード: " + response.status); |
|
} |
|
}) |
|
.catch(error => { |
|
handleError(error); |
|
}); |
|
} |
|
|
|
|
|
function handleError(error) { |
|
console.error(error); |
|
let errorMessage = error.message || error; |
|
document.getElementById('error').innerHTML = "エラー: " + errorMessage; |
|
} |
|
|
|
|
|
window.onload = function() { |
|
updateFlagButtons(); |
|
}; |
|
</script> |
|
</body> |
|
</html> |
|
|
