38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ESP32 Animation Creator</title>
|
|
<script src="https://unpkg.com/nexusui"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<h2>ESP32 Animation Creator</h2>
|
|
<button id="connect">Connect</button>
|
|
<button id="sendFrame">Send Frame</button>
|
|
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
<textarea id="log" rows="10" cols="60" readonly></textarea><br>
|
|
<input type="text" id="input" placeholder="Type message here">
|
|
<button id="send">Send</button>
|
|
<button id="saveAnimation">Save Animation</button>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|