diff options
| author | grm <grm@eyesin.space> | 2025-03-02 14:42:46 +0200 |
|---|---|---|
| committer | grm <grm@eyesin.space> | 2025-03-02 14:42:46 +0200 |
| commit | a043eb3931b58d9370565734211508af1f83fe94 (patch) | |
| tree | 92df69f9d7511e83b88df5604558b669c5b2a899 /tmpl | |
| parent | 092f4e2740a2e59a6b6c5aa064f59d9970790e23 (diff) | |
| download | synth-project-a043eb3931b58d9370565734211508af1f83fe94.tar.gz synth-project-a043eb3931b58d9370565734211508af1f83fe94.tar.bz2 synth-project-a043eb3931b58d9370565734211508af1f83fe94.zip | |
Add template and suppress verbose logging
Diffstat (limited to 'tmpl')
| -rw-r--r-- | tmpl/index.html | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/tmpl/index.html b/tmpl/index.html new file mode 100644 index 0000000..23a0714 --- /dev/null +++ b/tmpl/index.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> + <head> + <title>C SYNTH WEB!</title> + </head> + <body> + <input id='slider' style='width: 100%; height: 200px;' type='range' + min='1' max='22000' /> + <button onclick='onButtonClick()'>Trigger</button> + <button id='but'>ws</button> + <script> + const ws = new WebSocket('ws://10.0.0.10:9967'); + const slider = document.getElementById('slider'); + const but = document.getElementById('but') + slider.oninput = function() { ws.send(slider.value); } + but.onmousedown = function() { ws.send('note_on'); }; + but.onmouseup = function() { ws.send('note_off'); } + ws.onmessage = function(event) { + console.log('Message from server: ' + event.data); + slider.value = parseInt(event.data); + }; + ws.onopen = function() { + console.log('Connected to WebSocket server'); + }; + ws.onerror = function(error) { + console.error('WebSocket error: ' + error); + }; + // Function to send key events + const pressed_map = new Map(); + + const sendKeyEvent = (eventType, event) => { + if (ws.readyState === WebSocket.OPEN) { + if (event.repeat == true) return; + if (eventType == "keydown") { + if (pressed_map.get(event.key) == true) return; + pressed_map.set(event.key, true) + ws.send("+" + event.key); + } else if (eventType == "keyup") { + pressed_map.set(event.key, false) + ws.send("-" + event.key); + } + // console.log(event); + // ws.send(JSON.stringify({ + // type: eventType, + // key: event.key, + // code: event.code, + // keyCode: event.keyCode, + // ctrl: event.ctrlKey, + // shift: event.shiftKey, + // alt: event.altKey, + // meta: event.metaKey + // })); + } + }; + document.addEventListener("keydown", (event) => sendKeyEvent("keydown", event)); + document.addEventListener("keyup", (event) => sendKeyEvent("keyup", event)); + + var fps = 60; + + function loop() { + //document.getElementById("test").innerText = ; + + setTimeout(loop, 1000 / fps); + } + loop(); + </script> + </body> +</html> |