219 lines
8.2 KiB
HTML
219 lines
8.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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
|
<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">
|
|
<div><span>Status: <strong id="statusText">Disconnected</strong></span>
|
|
</div>
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="motors-tab" data-bs-toggle="tab" data-bs-target="#motors" type="button"
|
|
role="tab" aria-controls="motors" aria-selected="true">Motors</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="animation-tab" data-bs-toggle="tab" data-bs-target="#animation" type="button"
|
|
role="tab" aria-controls="animation" aria-selected="false">Animation</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab"
|
|
aria-controls="about" aria-selected="false">About</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab content -->
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade" id="motors" role="tabpanel" aria-labelledby="motors-tab">
|
|
|
|
|
|
|
|
|
|
<div class="container mt-3">
|
|
<div class="channel-section">
|
|
|
|
<!-- Channel 1 -->
|
|
<div class="channel-box mb-5">
|
|
<label class="form-label">Channel 0</label>
|
|
<div class="row mb-2">
|
|
<div class="col-9">
|
|
<select class="form-select">
|
|
<option selected>SCS</option>
|
|
<option>STS</option>
|
|
<option>SM</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-3">
|
|
<button id="btn_scan_channel_0" class="btn btn-primary w-100">Scan</button>
|
|
</div>
|
|
</div>
|
|
<table id="channel0-motor-table" class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th data-key="MODEL">MODEL</th>
|
|
<th data-key="ID">ID</th>
|
|
<th data-key="MIN_ANGLE_LIMIT">MIN ANGLE</th>
|
|
<th data-key="MAX_ANGLE_LIMIT">MAX ANGLE</th>
|
|
<th data-key="POSITION">POSITION</th>
|
|
<th data-key="CW_DEAD_ZONE">CW DEAD ZONE</th>
|
|
<th data-key="CCW_DEAD_ZONE">CCW DEAD ZONE</th>
|
|
<th data-key="OFFSET">OFFSET</th>
|
|
<th data-key="MODE">MODE</th>
|
|
<th data-key="TORQUE_ENABLE">TORQUE ENABLE</th>
|
|
<th data-key="ACCELERATION">ACCELERATION</th>
|
|
<th data-key="GOAL_POSITION">GOAL POSITION</th>
|
|
<th data-key="GOAL_TIME">GOAL TIME</th>
|
|
<th data-key="GOAL_SPEED">GOAL SPEED</th>
|
|
<th data-key="LOCK">LOCK</th>
|
|
<th data-key="CURRENT_SPEED">SPEED</th>
|
|
<th data-key="CURRENT_LOAD">LOAD</th>
|
|
<th data-key="TEMPERATURE">TEMPERATURE</th>
|
|
<th data-key="MOVING">MOVING</th>
|
|
<th data-key="CURRENT_CURRENT">CURRENT</th>
|
|
<th data-key="VOLTAGE">VOLTAGE</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<button id="btnSendChangesCh0">Send Changes</button>
|
|
</div>
|
|
|
|
<!-- Channel 2 -->
|
|
<div class="channel-box mb-5">
|
|
<label class="form-label">Channel 1</label>
|
|
<div class="row mb-2">
|
|
<div class="col-9">
|
|
<select class="form-select">
|
|
<option selected>SCS</option>
|
|
<option>STS</option>
|
|
<option>SM</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-3">
|
|
<button id="btn_scan_channel_1" class="btn btn-primary w-100">Scan</button>
|
|
</div>
|
|
</div>
|
|
<table id="channel1-motor-table" class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th data-key="MODEL">MODEL</th>
|
|
<th data-key="ID">ID</th>
|
|
<th data-key="MIN_ANGLE_LIMIT">MIN ANGLE</th>
|
|
<th data-key="MAX_ANGLE_LIMIT">MAX ANGLE</th>
|
|
<th data-key="POSITION">POSITION</th>
|
|
<th data-key="CW_DEAD_ZONE">CW DEAD ZONE</th>
|
|
<th data-key="CCW_DEAD_ZONE">CCW DEAD ZONE</th>
|
|
<th data-key="OFFSET">OFFSET</th>
|
|
<th data-key="MODE">MODE</th>
|
|
<th data-key="TORQUE_ENABLE">TORQUE ENABLE</th>
|
|
<th data-key="ACCELERATION">ACCELERATION</th>
|
|
<th data-key="GOAL_POSITION">GOAL POSITION</th>
|
|
<th data-key="GOAL_TIME">GOAL TIME</th>
|
|
<th data-key="GOAL_SPEED">GOAL SPEED</th>
|
|
<th data-key="LOCK">LOCK</th>
|
|
<th data-key="CURRENT_SPEED">SPEED</th>
|
|
<th data-key="CURRENT_LOAD">LOAD</th>
|
|
<th data-key="TEMPERATURE">TEMPERATURE</th>
|
|
<th data-key="MOVING">MOVING</th>
|
|
<th data-key="CURRENT_CURRENT">CURRENT</th>
|
|
<th data-key="VOLTAGE">VOLTAGE</th>
|
|
</tr>
|
|
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<button id="btnSendChangesCh1">Send Changes</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="tab-pane fade show active" id="animation" role="tabpanel" aria-labelledby="animation-tab">
|
|
<canvas id="curveCanvas" width="900" height="600"></canvas>
|
|
<!-- <div style="margin-top: 10px; text-align: center;">
|
|
<input type="range" id="timeSlider" min="0" step="1" style="width: 80%;">
|
|
</div> -->
|
|
|
|
|
|
<div id="dialArea" class="dial-container"></div>
|
|
|
|
<label>
|
|
<input type="checkbox" id="syncCheckbox"> Sync
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="feebackCheckbox"> Feedback
|
|
</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>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
|
|
|
|
<p>Developed by Jake Wilkinson at <a href="https://realrobots.net/">RealRobots.net</a> for Hanson Robotics.</p>
|
|
</div>
|
|
</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>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
|
crossorigin="anonymous"></script>
|
|
</body>
|
|
|
|
</html> |