feat: simple web page with sliders
This commit is contained in:
parent
673327efc1
commit
e47e69ba09
1 changed files with 37 additions and 0 deletions
37
src/web/index.html
Normal file
37
src/web/index.html
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link crossorigin rel="stylesheet" href="https://cdn.alemi.dev/web/alemi.css">
|
||||||
|
<title>mmp</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>mmp</h1>
|
||||||
|
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-1"></p>
|
||||||
|
<hr/>
|
||||||
|
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-2"></p>
|
||||||
|
<hr/>
|
||||||
|
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-3"></p>
|
||||||
|
<hr/>
|
||||||
|
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-4"></p>
|
||||||
|
<hr/>
|
||||||
|
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-5"></p>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
let socket = new WebSocket("wss://api.alemi.dev/mmp");
|
||||||
|
socket.addEventListener("message", (event) => console.warn("unexpected websocket message", event));
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
let inpt = document.getElementById("ctrl-" + (i+1));
|
||||||
|
inpt.addEventListener("input", (ev) => {
|
||||||
|
socket.send(JSON.stringify([i, parseInt(ev.target.value)]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue