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