77 lines
2.2 KiB
HTML
77 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Little Sophia Control Panel</title>
|
|
<script src="https://unpkg.com/nexusui"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<h2>Little Sophia Control Panel</h2>
|
|
<button id="connect">Connect</button>
|
|
<button id="disconnect" hidden>Disconnect</button>
|
|
</div>
|
|
<div id="connectionStatus">
|
|
<span>Status: <strong id="statusText">Disconnected</strong></span>
|
|
|
|
|
|
|
|
<div class="dial-container">
|
|
<div class="dial" data-index="0"><label>Motor 1</label>
|
|
<div id="dial0"></div><span id="value0">512</span>
|
|
</div>
|
|
<div class="dial" data-index="1"><label>Motor 2</label>
|
|
<div id="dial1"></div><span id="value1">512</span>
|
|
</div>
|
|
<div class="dial" data-index="2"><label>Motor 3</label>
|
|
<div id="dial2"></div><span id="value2">512</span>
|
|
</div>
|
|
<div class="dial" data-index="3"><label>Motor 4</label>
|
|
<div id="dial3"></div><span id="value3">512</span>
|
|
</div>
|
|
<div class="dial" data-index="4"><label>Motor 5</label>
|
|
<div id="dial4"></div><span id="value4">512</span>
|
|
</div>
|
|
</div>
|
|
<label>
|
|
<input type="checkbox" id="syncCheckbox"> Sync
|
|
</label>
|
|
|
|
<canvas id="timelineCanvas" width="800" height="30"></canvas>
|
|
|
|
<div>
|
|
<label>Frame: <span id="frameDisplay">0</span></label><br>
|
|
<input type="range" id="frameSlider" min="0" max="399" value="0" style="width: 80%">
|
|
</div>
|
|
|
|
<label for="filenameInput">Filename:</label>
|
|
<input type="text" id="filenameInput" />
|
|
<button id="saveAnimation">Save Animation</button>
|
|
<button id="clearAnimation">Clear</button>
|
|
|
|
<div id="fileListWrapper">
|
|
<div id="fileListHeader">
|
|
<span>Animations</span>
|
|
<div id="fileActions">
|
|
<button id="playFile" >Play</button>
|
|
<button id="loadFile" disabled>Load</button>
|
|
<button id="deleteFile" disabled>Delete</button>
|
|
</div>
|
|
</div>
|
|
<ul id="fileList"></ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<textarea id="log" rows="10" cols="60" readonly></textarea><br>
|
|
<input type="text" id="input" placeholder="Type message here">
|
|
<button id="send">Send</button>
|
|
|
|
<script type="module" src="script.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |