Robot Ip input & cache
This commit is contained in:
145
public/animator.html
Normal file
145
public/animator.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Re-Commander — Animator Mode</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div id="status-dot"></div>
|
||||
<h1>Re<span>-Commander</span> — Animator</h1>
|
||||
<span id="status-label">Connecting…</span>
|
||||
<span id="hotword-indicator"></span>
|
||||
<button id="btn-back-home" style="margin-left: auto; padding: 5px 12px; font-size: 12px;">← Back to Home</button>
|
||||
</header>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- ── LEFT PANEL ── -->
|
||||
<div class="left-panel">
|
||||
|
||||
<!-- Animation Presets -->
|
||||
<div class="section">
|
||||
<div class="section-title">Animation Library</div>
|
||||
<div class="field">
|
||||
<label>Select Animation</label>
|
||||
<select id="anim-select">
|
||||
<optgroup label="── Blinks">
|
||||
<option>Eye_Blink_01</option>
|
||||
<option>Eye_Blink_02</option>
|
||||
<option>Eye_Double_Blink_01</option>
|
||||
</optgroup>
|
||||
<optgroup label="── Expressions">
|
||||
<option>eye_happy_00</option>
|
||||
<option>eye_happy_01</option>
|
||||
<option>eye_sad_01</option>
|
||||
<option>eye_scared_00</option>
|
||||
<option>Eye_Curious_01</option>
|
||||
</optgroup>
|
||||
<optgroup label="── Poses">
|
||||
<option>Eye_Look_Center_Middle_01</option>
|
||||
<option>Eye_Look_Left_Middle_01</option>
|
||||
<option>Eye_Look_Right_Middle_01</option>
|
||||
<option>Eye_Look_Center_Up_01</option>
|
||||
<option>Eye_Look_Center_Down_01</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-play-anim" style="width:100%;">▶ Play Animation</button>
|
||||
</div>
|
||||
|
||||
<!-- Animation Sequence -->
|
||||
<div class="section">
|
||||
<div class="section-title">Animation Sequence</div>
|
||||
<div class="field">
|
||||
<textarea id="sequence-list" rows="6" placeholder="Animation1 Animation2 Animation3" style="font-family: monospace; font-size: 12px;"></textarea>
|
||||
</div>
|
||||
<div class="controls-row">
|
||||
<button id="btn-play-sequence" style="flex:1;">▶ Play Sequence</button>
|
||||
<button id="btn-stop-sequence" class="danger" style="flex:1;">■ Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="section">
|
||||
<div class="section-title">Timeline</div>
|
||||
<div class="row">
|
||||
<label>Repeat Count</label>
|
||||
<input type="number" id="repeat-count" value="1" min="1">
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>Delay (ms)</label>
|
||||
<input type="number" id="anim-delay" value="500" min="0" step="100">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /left-panel -->
|
||||
|
||||
<!-- ── CENTER PANEL ── -->
|
||||
<div class="center-panel">
|
||||
|
||||
<!-- Camera feed -->
|
||||
<div id="camera-wrap">
|
||||
<img id="camera-feed" alt="Jibo camera" style="display:none;">
|
||||
<div id="camera-no-feed">
|
||||
<div style="font-size:40px;">📹</div>
|
||||
<div>Animation Preview</div>
|
||||
<div style="font-size:11px;color:var(--muted);">Start video to see animations being played</div>
|
||||
</div>
|
||||
<div id="click-dot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Playback Controls -->
|
||||
<div class="controls-row" style="justify-content:center; gap:10px; margin-top:20px;">
|
||||
<button id="btn-video-start" style="flex-basis: auto;">▶ Start Video</button>
|
||||
<button id="btn-video-stop" class="danger" style="flex-basis: auto;">■ Stop</button>
|
||||
</div>
|
||||
|
||||
</div><!-- /center-panel -->
|
||||
|
||||
<!-- ── RIGHT PANEL ── -->
|
||||
<div class="right-panel">
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" data-tab="tab-camera">Camera</button>
|
||||
<button class="tab-btn" data-tab="tab-log">Log</button>
|
||||
</div>
|
||||
|
||||
<!-- Camera tab -->
|
||||
<div class="tab-panel active" id="tab-camera">
|
||||
<div class="section-title">Video Stream</div>
|
||||
<div class="row">
|
||||
<label>Resolution</label>
|
||||
<select id="photo-res">
|
||||
<option value="highRes">HighRes</option>
|
||||
<option value="medRes">MedRes</option>
|
||||
<option value="lowRes">LowRes</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="btn-photo" style="width:100%;margin-bottom:10px;">📷 Take Photo</button>
|
||||
<div id="photo-strip"></div>
|
||||
</div>
|
||||
|
||||
<!-- Log tab -->
|
||||
<div class="tab-panel" id="tab-log" style="padding:0;display:flex;flex-direction:column;flex:1;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);">
|
||||
<span class="section-title" style="margin:0;">Animation Log</span>
|
||||
<button id="btn-clear-log" style="font-size:11px;padding:3px 8px;">Clear</button>
|
||||
</div>
|
||||
<div id="event-log"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- /right-panel -->
|
||||
</div>
|
||||
|
||||
<!-- Photo modal -->
|
||||
<div id="photo-modal">
|
||||
<div id="photo-modal-close">✕</div>
|
||||
<img id="photo-modal-img" src="" alt="Photo">
|
||||
</div>
|
||||
|
||||
<script src="animator.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user