fix
parent
c7eb00c76e
commit
8fc57ae6c1
162
filter.html
162
filter.html
|
|
@ -46,22 +46,22 @@
|
|||
<div style="width: 200px;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic1" id="mic1-on"
|
||||
value="enable">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic1-on">ENABLE</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic1" id="mic1-off"
|
||||
value="disable">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="mic1-off">DISABLE</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
||||
<select class="select">
|
||||
<option>Bessel</option>
|
||||
<option>Butterworth</option>
|
||||
<option>Linkwitz-riley</option>
|
||||
<select class="select" id="mic1-type">
|
||||
<option value="Bessel">Bessel</option>
|
||||
<option value="Butterworth">Butterworth</option>
|
||||
<option value="Linkwitz-riley">Linkwitz-riley</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row _slider_customizations cus_handle mb-4">
|
||||
|
|
@ -72,16 +72,16 @@
|
|||
<div id="handle1" class="roundSlider"></div>
|
||||
<div
|
||||
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||
2000
|
||||
20000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" style="width: 55px; text-align: center;" value="7FS" />
|
||||
<input class="slider-value" id="handle1-value" style="width: 55px; text-align: center;" value="200Hz" />
|
||||
</div>
|
||||
<div class="mt-1" style="color: #888;">
|
||||
HPF(Hz)
|
||||
<!-- HPF(Hz) -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,35 +95,41 @@
|
|||
<div style="width: 200px;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic2" id="mic2-on"
|
||||
value="enable">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic2-on">ENABLE</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic2" id="mic2-off"
|
||||
value="disable">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="mic2-off">DISABLE</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
||||
<select class="select">
|
||||
<option>Bessel</option>
|
||||
<option>Butterworth</option>
|
||||
<option>Linkwitz-riley</option>
|
||||
<select class="select" id="mic2-type">
|
||||
<option value="Bessel">Bessel</option>
|
||||
<option value="Butterworth">Butterworth</option>
|
||||
<option value="Linkwitz-riley">Linkwitz-riley</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row _slider_customizations cus_handle mb-4">
|
||||
<div class="block mt-4">
|
||||
<div class="cell d-flex justify-content-center">
|
||||
<div style="top: 100px; right: -20; width: 50px; position:relative;color: #888;"
|
||||
class="text-end">20</div>
|
||||
<div id="handle2" class="roundSlider"></div>
|
||||
<div
|
||||
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||
20000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" style="width: 55px; text-align: center;" value="7FS" />
|
||||
<input class="slider-value" id="handle2-value" style="width: 55px; text-align: center;" value="200Hz" />
|
||||
</div>
|
||||
<div class="mt-1" style="color: #888;">
|
||||
HPF(Hz)
|
||||
<!-- HPF(Hz) -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -144,90 +150,82 @@
|
|||
</body>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
//初始化配置
|
||||
loadData()
|
||||
})
|
||||
|
||||
let app = (() => {
|
||||
$(document).ready(function () {
|
||||
$("input[name='mic1']").on('change', function () {
|
||||
let $value = $("input[name='mic1']:checked").val()
|
||||
alert($value)
|
||||
})
|
||||
|
||||
function updateSlider(element) {
|
||||
if (element) {
|
||||
$("input[name='mic2']").on('change', function () {
|
||||
let $value = $("input[name='mic2']:checked").val()
|
||||
alert($value)
|
||||
})
|
||||
|
||||
let parent = element.parentElement,
|
||||
lastValue = parent.getAttribute('data-slider-value');
|
||||
let container = parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
$("#mic1-type").on('change',function(){
|
||||
alert($("#mic1-type").val())
|
||||
})
|
||||
|
||||
console.log(`${lastValue}===${element.value}}`)
|
||||
// if (lastValue === element.value) {
|
||||
// return; // No value change, no need to update then
|
||||
// }
|
||||
$("#mic2-type").on('change',function(){
|
||||
alert($("#mic2-type").val())
|
||||
})
|
||||
})
|
||||
|
||||
parent.setAttribute('data-slider-value', element.value);
|
||||
let $thumb = parent.querySelector('.range-slider-thumb'),
|
||||
$bar = parent.querySelector('.range-slider-bar'),
|
||||
$value = container.querySelector('.slider-value')
|
||||
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
||||
console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
|
||||
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||
|
||||
|
||||
|
||||
$thumb.style.bottom = `${pct}%`;
|
||||
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||
$value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
|
||||
}
|
||||
}
|
||||
return {
|
||||
updateSlider: updateSlider
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
(function initAndSetupTheSliders() {
|
||||
const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-slider input'));
|
||||
inputs.forEach(input => input.setAttribute('value', '50'));
|
||||
inputs.forEach(input => app.updateSlider(input));
|
||||
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
|
||||
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
|
||||
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
|
||||
})();
|
||||
function loadData(){
|
||||
$("input[name='mic1']").val(['enable'])
|
||||
$("input[name='mic2']").val(['enable'])
|
||||
$("#mic1-type").val(["Butterworth"])
|
||||
$("#mic2-type").val(["Bessel"])
|
||||
}
|
||||
|
||||
$("#handle1").roundSlider({
|
||||
sliderType: "min-range",
|
||||
editableTooltip: false,
|
||||
radius: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
min:20,
|
||||
max:2000,
|
||||
step:1,
|
||||
value: 200,
|
||||
min: 20,
|
||||
max: 20000,
|
||||
step: 1,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true
|
||||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
}
|
||||
});
|
||||
|
||||
function changeTooltip(e) {
|
||||
var val = e.value, speed;
|
||||
// if (val < 20) speed = "Slow";
|
||||
// else if (val < 40) speed = "Normal";
|
||||
// else if (val < 70) speed = "Speed";
|
||||
// else speed = "Very Speed";
|
||||
|
||||
// return val + " km/h" + "<div>" + speed + "<div>";
|
||||
}
|
||||
|
||||
$("#handle2").roundSlider({
|
||||
sliderType: "min-range",
|
||||
editableTooltip: false,
|
||||
radius: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
value: 200,
|
||||
min: 20,
|
||||
max: 20000,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true
|
||||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
1
fs.html
1
fs.html
|
|
@ -165,6 +165,7 @@
|
|||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
},
|
||||
|
|
|
|||
107
home.html
107
home.html
|
|
@ -261,7 +261,9 @@
|
|||
<div>
|
||||
<div class="d-flex">
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<div class="equalizer-bar equalizer-bar-left">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
|
|
@ -289,7 +291,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<div class="equalizer-bar equalizer-bar-right">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
|
|
@ -454,7 +458,9 @@
|
|||
<div>
|
||||
<div class="d-flex">
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<div class="equalizer-bar equalizer-bar-left">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
|
|
@ -482,7 +488,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<div class="equalizer-bar equalizer-bar-right">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
|
|
@ -643,7 +651,9 @@
|
|||
<div>
|
||||
<div class="d-flex">
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<div class="equalizer-bar equalizer-bar-left">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
|
|
@ -671,7 +681,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<div class="equalizer-bar equalizer-bar-right">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
|
|
@ -1025,40 +1037,51 @@
|
|||
|
||||
function LineInputLeftRandomBar(number) {
|
||||
const bars = $("#lineinput .equalizer-bar-left")
|
||||
let row = (number + 72) / 3;
|
||||
let red = (-6 + 72) / 3;
|
||||
let yellow = (-18 + 72) / 3;
|
||||
|
||||
let spans = bars[0].getElementsByTagName('span');
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
if (row > i) {
|
||||
if (row >= red && i >= red) {
|
||||
spans[i].style.opacity = "1"
|
||||
spans[i].style.backgroundColor = "#ff0000"
|
||||
}
|
||||
else if (row >= yellow && i < red && i >= yellow) {
|
||||
spans[i].style.opacity = "1"
|
||||
spans[i].style.backgroundColor = "#ff6600"
|
||||
}
|
||||
else {
|
||||
spans[i].style.opacity = "1"
|
||||
spans[i].style.backgroundColor = "#a7dce9"
|
||||
}
|
||||
}
|
||||
else {
|
||||
spans[i].style.opacity = "1"
|
||||
spans[i].style.backgroundColor = "#333"
|
||||
}
|
||||
}
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function LineInputRightRandomBar(number) {
|
||||
const bars = $("#lineinput .equalizer-bar-right")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function Microphone1LeftRandomBar(number) {
|
||||
const bars = $("#microphone1 .equalizer-bar-left")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function Microphone1RightRandomBar(number) {
|
||||
const bars = $("#microphone1 .equalizer-bar-right")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function Microphone2LeftRandomBar(number) {
|
||||
const bars = $("#microphone2 .equalizer-bar-left")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function Microphone2RightRandomBar(number) {
|
||||
const bars = $("#microphone2 .equalizer-bar-right")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function OutputVolumeLeftRandomBar(number) {
|
||||
const bars = $("#outputvolume .equalizer-bar-left")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
function OutputVolumeRightRandomBar(number) {
|
||||
const bars = $("#outputvolume .equalizer-bar-right")
|
||||
updateBars(bars, number)
|
||||
}
|
||||
|
||||
|
||||
function updateBars(element, number) {
|
||||
let row = (number + 72) / 3;
|
||||
let red = (-6 + 72) / 3;
|
||||
let yellow = (-18 + 72) / 3;
|
||||
|
||||
let spans = bars[0].getElementsByTagName('span');
|
||||
let spans = element[0].getElementsByTagName('span');
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
if (row > i) {
|
||||
if (row >= red && i >= red) {
|
||||
|
|
@ -1079,9 +1102,10 @@
|
|||
spans[i].style.backgroundColor = "#333"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
setInterval(() => {
|
||||
setRandomBars();
|
||||
}, 200);
|
||||
|
|
@ -1089,8 +1113,21 @@
|
|||
function setRandomBars() {
|
||||
let num = getRandomIntInclusive(0, 72)
|
||||
let num2 = getRandomIntInclusive(0, 72)
|
||||
LineInputLeftRandomBar(num-72)
|
||||
LineInputRightRandomBar(num2-72)
|
||||
let num3 = getRandomIntInclusive(0, 72)
|
||||
let num4 = getRandomIntInclusive(0, 72)
|
||||
let num5 = getRandomIntInclusive(0, 72)
|
||||
let num6 = getRandomIntInclusive(0, 72)
|
||||
let num7 = getRandomIntInclusive(0, 72)
|
||||
let num8 = getRandomIntInclusive(0, 72)
|
||||
LineInputLeftRandomBar(num - 72)
|
||||
LineInputRightRandomBar(num2 - 72)
|
||||
Microphone1LeftRandomBar(num3 - 72)
|
||||
Microphone1RightRandomBar(num4 - 72);
|
||||
Microphone2LeftRandomBar(num5 - 72)
|
||||
Microphone2RightRandomBar(num6 - 72);
|
||||
OutputVolumeLeftRandomBar(num7 - 72);
|
||||
OutputVolumeRightRandomBar(num8 - 72);
|
||||
|
||||
}
|
||||
|
||||
function getRandomIntInclusive(min, max) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue