148 lines
6.4 KiB
HTML
148 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VR Charades Experiment Control</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>VR Charades Experiment Control</h1>
|
|
<p>Experiment management interface</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Timer Display -->
|
|
<div class="timer-section">
|
|
<div class="timer-label">Total Time Remaining</div>
|
|
<div id="timer-display" class="timer-display inactive">--:--</div>
|
|
</div>
|
|
|
|
<!-- Main Configuration -->
|
|
<div class="main-grid">
|
|
<div class="section">
|
|
<h2 class="section-title">Session Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Group ID</label>
|
|
<input type="text" id="group-id" class="form-input" placeholder="e.g., g1, team-alpha">
|
|
<div class="small-text">Used in exported CSV filename</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">Time per Word (seconds)</label>
|
|
<input type="number" id="time-s" class="form-input" value="30" min="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Total Duration (minutes)</label>
|
|
<input type="number" id="total-duration" class="form-input" value="0" min="0" step="0.5">
|
|
<div class="small-text">0 = unlimited</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2 class="section-title">Network Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Player 1 IP Address</label>
|
|
<input type="text" id="ip-player1" class="form-input" placeholder="10.42.0.38">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Player 2 IP Address</label>
|
|
<input type="text" id="ip-player2" class="form-input" placeholder="10.42.0.100">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Active Player</label>
|
|
<div class="radio-group">
|
|
<label class="radio-label">
|
|
<input type="radio" name="active-player" value="player1" checked>
|
|
<span>Player 1</span>
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="active-player" value="player2">
|
|
<span>Player 2</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VR Headset Configuration -->
|
|
<div class="section">
|
|
<h2 class="section-title">VR Headset Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Server IP Address</label>
|
|
<input type="text" id="server-ip" class="form-input" placeholder="10.42.0.1">
|
|
<div class="small-text">IP address that VR headsets should connect to</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Experiment Mode</label>
|
|
<select id="experiment-mode" class="form-input">
|
|
<option value="1;1;1;0">Dynamic Face</option>
|
|
<option value="0;0;0;1">Dynamic Hands</option>
|
|
<option value="1;1;1;1" selected>Dynamic Hands+Face</option>
|
|
<option value="1;0;0;0">Static Face</option>
|
|
<option value="0;0;0;1">Static Hands</option>
|
|
<option value="1;0;0;1">Static Hands+Face</option>
|
|
</select>
|
|
<div class="small-text">Controls which body parts are shown and interaction method</div>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button id="btn-send-config" class="btn btn-warning">Send Configuration to Headsets</button>
|
|
</div>
|
|
|
|
<div id="config-status" class="status-message" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- Word List -->
|
|
<div class="section">
|
|
<h2 class="section-title">Word List</h2>
|
|
|
|
<div class="form-group">
|
|
<textarea id="word-list" class="form-input" rows="12" placeholder="Enter one word per line..."></textarea>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button id="btn-shuffle" class="btn btn-secondary">Shuffle Words</button>
|
|
<button id="btn-start" class="btn btn-success">Start Experiment</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="controls-section">
|
|
<h2 class="section-title">Experiment Controls</h2>
|
|
<div class="btn-group">
|
|
<button id="btn-stop" class="btn btn-danger" disabled>Stop Experiment</button>
|
|
<button id="btn-save" class="btn btn-primary" disabled>Save Results (CSV)</button>
|
|
<button id="btn-download-tracking" class="btn btn-primary">Download Tracking Data (CSV)</button>
|
|
</div>
|
|
<div class="small-text" style="margin-top: 1rem;">
|
|
Tracking data is automatically recorded during experiments and includes camera and controller positions/rotations at 60Hz.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Display -->
|
|
<div class="word-display">
|
|
<h2 class="section-title">Experiment Progress</h2>
|
|
<div id="word-list-display" class="word-list-container">
|
|
<div class="placeholder">
|
|
<p><strong>No active experiment</strong></p>
|
|
<p>Configure settings above and click "Start Experiment" to begin</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
</html>
|