|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>Sinus</title> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<h1>Sinus</h1> |
|
|
<div id="sliders"> |
|
|
<label for="amplitude">Amplitude:</label> |
|
|
<input type="range" id="amplitude" min="0" max="100" value="25" /> |
|
|
<span id="amplitudeValue">25</span> |
|
|
<br /> |
|
|
<label for="frequency">Sinus Frequency:</label> |
|
|
<input type="range" id="frequency" min="0" max="2" step="0.1" value="0.5" /> |
|
|
<span id="frequencyValue">0.5</span> |
|
|
<br /> |
|
|
</div> |
|
|
<h1>Synchronisation</h1> |
|
|
<div id="synchronisation"> |
|
|
<label for="sync">Sync freq:</label> |
|
|
<input type="range" id="sync" min="1" max="200" step="10" value="100" /> |
|
|
<span id="syncValue">50</span> |
|
|
<br /> |
|
|
<label for="motor_0">Motor 0 synced:</label> |
|
|
<input type="checkbox" id="motor_0_synced" /> |
|
|
<br /> |
|
|
<label for="motor_1">Motor 1 synced:</label> |
|
|
<input type="checkbox" id="motor_1_synced" /> |
|
|
<br /> |
|
|
<label for="motor_2">Motor 2 synced:</label> |
|
|
<input type="checkbox" id="motor_2_synced" checked /> |
|
|
<br /> |
|
|
<label for="motor_3">Motor 3 synced:</label> |
|
|
<input type="checkbox" id="motor_3_synced" checked /> |
|
|
<br /> |
|
|
<label for="motor_4">Motor 4 synced:</label> |
|
|
<input type="checkbox" id="motor_4_synced" /> |
|
|
<br /> |
|
|
<label for="motor_5">Motor 5 synced:</label> |
|
|
<input type="checkbox" id="motor_5_synced" /> |
|
|
<br /> |
|
|
</div> |
|
|
|
|
|
<h1>Debug</h1> |
|
|
<div id="debug"> |
|
|
<label for="verbose">Verbose:</label> |
|
|
<input type="checkbox" id="verbose" /> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" |
|
|
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" |
|
|
crossorigin="anonymous"></script> |
|
|
<script src="sinus.js"></script> |
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |
