You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
9.9 KiB
166 lines
9.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BATL CARLA Orchestrator</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-background"></div>
|
|
<div class="app-container">
|
|
|
|
<!-- Sidebar / Scenario Selection -->
|
|
<aside class="sidebar glass-panel">
|
|
<div class="brand">
|
|
<div class="brand-icon">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
|
|
</div>
|
|
<div>
|
|
<h1>BATL CARLA</h1>
|
|
<span class="subtitle">Orchestrator v1.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section" style="margin-bottom: 2rem;">
|
|
<div class="section-title">SIMULATOR STATUS</div>
|
|
<div class="status-card" id="sim-status-card">
|
|
<div class="status-indicator" style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
|
|
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<span class="dot red" id="sim-status-dot"></span>
|
|
<span id="sim-status-text" style="font-weight: 500; font-size: 0.9rem;">Offline</span>
|
|
</div>
|
|
<button id="kill-sim-btn" class="icon-btn danger-icon" title="Force Kill CarlaUE4" style="display: none; padding: 4px; color: var(--danger); border-radius: 4px;">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
|
|
</button>
|
|
</div>
|
|
<button id="launch-sim-btn" class="btn btn-secondary btn-small" style="width: 100%; margin-top: 10px; padding: 0.6rem;">Initialize CarlaUE4</button>
|
|
<!-- Idle Toggle -->
|
|
<div id="idle-toggle-container" class="idle-toggle-container" style="display: none;">
|
|
<span class="idle-label">GPU Idle Mode</span>
|
|
<label class="switch small-switch">
|
|
<input type="checkbox" id="gpu-idle-toggle">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="section-title">SCENARIOS</div>
|
|
<div id="scenario-list" class="scenario-list">
|
|
<!-- Populated dynamically via JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section" style="margin-top: auto; padding-top: 2rem;">
|
|
<button id="exit-all-btn" class="btn btn-danger btn-outline" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border-style: dashed; opacity: 0.8; padding: 0.8rem;">
|
|
<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
|
|
<span style="letter-spacing: 1px; font-weight: 700;">EXIT ALL</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Workspace -->
|
|
<main class="main-content">
|
|
|
|
<!-- Parameters Configuration -->
|
|
<section class="controls glass-panel pop-in" id="config-section">
|
|
<div class="panel-header" id="config-toggle-header" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
|
|
<h2>Configuration parameters</h2>
|
|
<div class="toggle-icon">
|
|
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body" id="config-card-body">
|
|
<form id="launch-form" class="form-grid">
|
|
|
|
<div class="input-group">
|
|
<label for="frames">Simulation Duration (Frames)</label>
|
|
<div class="input-wrapper">
|
|
<input type="number" id="frames" name="frames" placeholder="e.g. 200">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="weather">Weather Preset</label>
|
|
<div class="select-wrapper">
|
|
<select id="weather" name="weather">
|
|
<!-- Populated dynamically -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group toggle-group">
|
|
<div class="toggle-text">
|
|
<label for="no_record">Dry Run Mode</label>
|
|
<span class="helper">Disable multi-sensor data recording to disk</span>
|
|
</div>
|
|
<label class="switch">
|
|
<input type="checkbox" id="no_record" name="no_record">
|
|
<span class="slider round"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="full-width">
|
|
<div class="section-title" style="margin-top: 1rem;">DYNAMIC SCENARIO PARAMETERS</div>
|
|
<div id="dynamic-params-container" class="form-grid">
|
|
<!-- Populated dynamically when a scenario is selected -->
|
|
<div class="input-group full-width">
|
|
<span class="helper">Select a scenario to view its tunable parameters.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions full-width" style="display: flex; gap: 1rem;">
|
|
<button type="submit" id="launch-btn" class="btn btn-primary pulse-hover" style="flex: 1;">
|
|
<span class="btn-text" id="launch-text">Launch Simulation</span>
|
|
<div class="loader-spinner" id="launch-spinner" style="display: none;"></div>
|
|
</button>
|
|
<button type="button" id="stop-btn" class="btn btn-danger" style="display: none; flex: 1;">
|
|
<span class="btn-text">Stop Simulation</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Live Terminal Pane -->
|
|
<section class="terminal glass-panel slide-up">
|
|
<div class="terminal-header">
|
|
<div class="window-controls">
|
|
<span class="dot red"></span>
|
|
<span class="dot yellow"></span>
|
|
<span class="dot green"></span>
|
|
</div>
|
|
<span class="terminal-title">carla312 — Simulation Standard Output</span>
|
|
<div class="terminal-actions">
|
|
<button id="clear-terminal" class="icon-btn" title="Clear stdout">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Interactive Progress Bar -->
|
|
<div id="sim-progress-container" style="display: none; padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.15);">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #a0aec0; letter-spacing: 0.5px;">
|
|
<span>SIMULATION STATUS</span>
|
|
<span id="sim-progress-text">0% (0 / 0 frames)</span>
|
|
</div>
|
|
<div style="width: 100%; background: #1a202c; border-radius: 4px; overflow: hidden; height: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);">
|
|
<div id="sim-progress-fill" style="width: 0%; height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 10px rgba(96,165,250,0.5); transition: width 0.15s ease-out;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="terminal-body" id="terminal-output">
|
|
<div class="log-line system">> Application initialized. Fetching presets...</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Application Logic -->
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|