blob: a6ae38b2b4c2e2375aec1edef1048c6549c19111 (
plain) (
tree)
|
|
<!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>
<div class="struct">
<h4>soundcard_t</h4>
<span class="str">$STR(synth->soundcard.name)$</span>
</div>
<div class="struct">
<h4>midi_device_t</h4>
<span class="str">$STR(synth->midi_device.name)$</span>
</div>
<div class="struct">
<h4>synth_t</h4>
<span id="wvt_pos" class="int">wvt_pos: $INT( synth->wvt_pos )$</span>
<span id="cci" class="int">cci: $INT( synth->cci )$</span>
<span id="autogain" class="int">autogain: $INT( synth->autogain )$</span>
<span id="x" class="float">x: $FLOAT( synth->x )$</span>
<span id="midi_active_n" class="int">midi_active_n: $INT( synth->midi_active_n )$</span>
<span id="octave" class="int">octave: $INT( synth->octave )$</span>
<span id="delay" class="int">delay: $INT( synth->delay )$</span>
<span id="deli" class="int">deli: $INT( synth->deli )$</span>
<span id="f_adsr_enabled" class="int">f_adsr_enabled: $INT( synth->f_adsr_enabled )$</span>
<span id="filter" class="int">filter: $INT( synth->filter )$</span>
<span id="biquad" class="int">biquad: $INT( synth->biquad )$</span>
<span id="clamp" class="int">clamp: $INT( synth->clamp )$</span>
<span id="modi" class="int">modi: $INT( synth->modi )$</span>
<span id="geni" class="int">geni: $INT( synth->geni )$</span>
<span id="active" class="int">active: $INT( synth->active )$</span>
<span id="sound_active" class="int">sound_active: $INT( synth->sound_active )$</span>
</div>
<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);
const parts = event.data.split(":");
document.getElementById(parts[0]).innerText = parts[0] +": " + parts[1];
//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;
// var count = 0;
// function loop() {
// //document.getElementById("test").innerText = ;
// document.getElementById("test").innerText = "Count: " + count++;
// setTimeout(loop, 1000 / fps);
// }
// loop();
</script>
</body>
</html>
|
