016a131f33
work in progress which eventually will enable the user to configure dsp processor on the fly using an on device http server. first try and possible fix for #22 Signed-off-by: Karl Osterseher <karli_o@gmx.at>
37 lines
1.5 KiB
HTML
37 lines
1.5 KiB
HTML
<!DOCTYPE HTML><html>
|
|
<head>
|
|
<!-- define meta data -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- define the style CSS of your page -->
|
|
<style>
|
|
html {font-family: Arial; display: inline-block; text-align: center;}
|
|
h1 {font-size: 2.9rem;}
|
|
h2 {font-size: 2.1rem;}
|
|
p {font-size: 1.9rem;}
|
|
body {max-width: 500px; margin:0px auto; padding-bottom: 30px;}
|
|
.slider { -webkit-appearance: none; margin: 14px; width: 400px; height: 15px; border-radius: 5px; background: #39a6de; outline: none; -webkit-transition: .2s; transition: opacity .2s;}
|
|
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 12px; background: #f74d4d; cursor: pointer;}
|
|
.slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 12px; background: #F74D4D; cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>DSP processor filter configuration</h1>
|
|
|
|
<h2>base gain</h2>
|
|
|
|
<!-- Displays the range of the slider from 0 to 100 in steps of 1 -->
|
|
<p><span id="textSliderValue">50</span> %</p>
|
|
<p><input type="range" onchange="updateSlider(this)" id="BaseGainSlider" min="0" max="100" value="50" step="1" class="slider"></p>
|
|
<script>
|
|
function updateSlider(element) {
|
|
var sliderValue = document.getElementById("BaseGainSlider").value;
|
|
document.getElementById("textSliderValue").innerHTML = sliderValue;
|
|
console.log(sliderValue);
|
|
var httpRequest = new XMLHttpRequest();
|
|
httpRequest.open("POST", "/post?value="+sliderValue, true);
|
|
httpRequest.send();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|