fix
parent
c7eb00c76e
commit
8fc57ae6c1
162
filter.html
162
filter.html
|
@ -46,22 +46,22 @@
|
||||||
<div style="width: 200px;">
|
<div style="width: 200px;">
|
||||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
<div class="d-flex redio-switche">
|
<div class="d-flex redio-switche">
|
||||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
<input type="radio" class="btn-check" name="mic1" id="mic1-on"
|
||||||
autocomplete="off">
|
value="enable">
|
||||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
<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"
|
<input type="radio" class="btn-check" name="mic1" id="mic1-off"
|
||||||
autocomplete="off">
|
value="disable">
|
||||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
<label class="btn btn-sm redio-btn off-btn" for="mic1-off">DISABLE</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3">
|
<div class="mt-3">
|
||||||
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
||||||
<select class="select">
|
<select class="select" id="mic1-type">
|
||||||
<option>Bessel</option>
|
<option value="Bessel">Bessel</option>
|
||||||
<option>Butterworth</option>
|
<option value="Butterworth">Butterworth</option>
|
||||||
<option>Linkwitz-riley</option>
|
<option value="Linkwitz-riley">Linkwitz-riley</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="row _slider_customizations cus_handle mb-4">
|
<div class="row _slider_customizations cus_handle mb-4">
|
||||||
|
@ -72,16 +72,16 @@
|
||||||
<div id="handle1" class="roundSlider"></div>
|
<div id="handle1" class="roundSlider"></div>
|
||||||
<div
|
<div
|
||||||
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||||
2000
|
20000
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<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>
|
||||||
<div class="mt-1" style="color: #888;">
|
<div class="mt-1" style="color: #888;">
|
||||||
HPF(Hz)
|
<!-- HPF(Hz) -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,35 +95,41 @@
|
||||||
<div style="width: 200px;">
|
<div style="width: 200px;">
|
||||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||||
<div class="d-flex redio-switche">
|
<div class="d-flex redio-switche">
|
||||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
<input type="radio" class="btn-check" name="mic2" id="mic2-on"
|
||||||
autocomplete="off">
|
value="enable">
|
||||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
<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"
|
<input type="radio" class="btn-check" name="mic2" id="mic2-off"
|
||||||
autocomplete="off">
|
value="disable">
|
||||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
<label class="btn btn-sm redio-btn off-btn" for="mic2-off">DISABLE</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3">
|
<div class="mt-3">
|
||||||
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
<label style="font-size:14px; color: #888;" class="me-2">Type</label>
|
||||||
<select class="select">
|
<select class="select" id="mic2-type">
|
||||||
<option>Bessel</option>
|
<option value="Bessel">Bessel</option>
|
||||||
<option>Butterworth</option>
|
<option value="Butterworth">Butterworth</option>
|
||||||
<option>Linkwitz-riley</option>
|
<option value="Linkwitz-riley">Linkwitz-riley</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="row _slider_customizations cus_handle mb-4">
|
<div class="row _slider_customizations cus_handle mb-4">
|
||||||
<div class="block mt-4">
|
<div class="block mt-4">
|
||||||
<div class="cell d-flex justify-content-center">
|
<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 id="handle2" class="roundSlider"></div>
|
||||||
|
<div
|
||||||
|
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||||
|
20000
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="">
|
<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>
|
||||||
<div class="mt-1" style="color: #888;">
|
<div class="mt-1" style="color: #888;">
|
||||||
HPF(Hz)
|
<!-- HPF(Hz) -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -144,90 +150,82 @@
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
<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) {
|
$("input[name='mic2']").on('change', function () {
|
||||||
if (element) {
|
let $value = $("input[name='mic2']:checked").val()
|
||||||
|
alert($value)
|
||||||
|
})
|
||||||
|
|
||||||
let parent = element.parentElement,
|
$("#mic1-type").on('change',function(){
|
||||||
lastValue = parent.getAttribute('data-slider-value');
|
alert($("#mic1-type").val())
|
||||||
let container = parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
})
|
||||||
|
|
||||||
console.log(`${lastValue}===${element.value}}`)
|
$("#mic2-type").on('change',function(){
|
||||||
// if (lastValue === element.value) {
|
alert($("#mic2-type").val())
|
||||||
// return; // No value change, no need to update then
|
})
|
||||||
// }
|
})
|
||||||
|
|
||||||
parent.setAttribute('data-slider-value', element.value);
|
function loadData(){
|
||||||
let $thumb = parent.querySelector('.range-slider-thumb'),
|
$("input[name='mic1']").val(['enable'])
|
||||||
$bar = parent.querySelector('.range-slider-bar'),
|
$("input[name='mic2']").val(['enable'])
|
||||||
$value = container.querySelector('.slider-value')
|
$("#mic1-type").val(["Butterworth"])
|
||||||
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
$("#mic2-type").val(["Bessel"])
|
||||||
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)));
|
|
||||||
})();
|
|
||||||
|
|
||||||
$("#handle1").roundSlider({
|
$("#handle1").roundSlider({
|
||||||
sliderType: "min-range",
|
sliderType: "min-range",
|
||||||
editableTooltip: false,
|
editableTooltip: false,
|
||||||
radius: 60,
|
radius: 60,
|
||||||
width: 10,
|
width: 10,
|
||||||
value: 0,
|
value: 200,
|
||||||
min:20,
|
min: 20,
|
||||||
max:2000,
|
max: 20000,
|
||||||
step:1,
|
step: 1,
|
||||||
handleSize: 0,
|
handleSize: 0,
|
||||||
handleShape: "square",
|
handleShape: "square",
|
||||||
circleShape: "pie",
|
circleShape: "pie",
|
||||||
startAngle: 315,
|
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({
|
$("#handle2").roundSlider({
|
||||||
sliderType: "min-range",
|
sliderType: "min-range",
|
||||||
editableTooltip: false,
|
editableTooltip: false,
|
||||||
radius: 60,
|
radius: 60,
|
||||||
width: 10,
|
width: 10,
|
||||||
value: 0,
|
value: 200,
|
||||||
|
min: 20,
|
||||||
|
max: 20000,
|
||||||
handleSize: 0,
|
handleSize: 0,
|
||||||
handleShape: "square",
|
handleShape: "square",
|
||||||
circleShape: "pie",
|
circleShape: "pie",
|
||||||
startAngle: 315,
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
1
fs.html
1
fs.html
|
@ -165,6 +165,7 @@
|
||||||
circleShape: "pie",
|
circleShape: "pie",
|
||||||
startAngle: 315,
|
startAngle: 315,
|
||||||
mouseScrollAction: true,
|
mouseScrollAction: true,
|
||||||
|
|
||||||
drag: function (args) {
|
drag: function (args) {
|
||||||
$("#handle1-value").val(`${args.value}Hz`);
|
$("#handle1-value").val(`${args.value}Hz`);
|
||||||
},
|
},
|
||||||
|
|
107
home.html
107
home.html
|
@ -261,7 +261,9 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="pinpu-box pe-4">
|
<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>
|
<span style="opacity: 1;"></span>
|
||||||
<span style="opacity: 1;"></span>
|
<span style="opacity: 1;"></span>
|
||||||
|
@ -289,7 +291,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pinpu-box pe-4">
|
<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>
|
<span style="opacity: 1;"></span>
|
||||||
<span style="opacity: 1;"></span>
|
<span style="opacity: 1;"></span>
|
||||||
|
@ -454,7 +458,9 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="pinpu-box pe-4">
|
<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>
|
<span style="opacity: 1;"></span>
|
||||||
<span style="opacity: 1;"></span>
|
<span style="opacity: 1;"></span>
|
||||||
|
@ -482,7 +488,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pinpu-box pe-4">
|
<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>
|
<span style="opacity: 1;"></span>
|
||||||
<span style="opacity: 1;"></span>
|
<span style="opacity: 1;"></span>
|
||||||
|
@ -643,7 +651,9 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div class="pinpu-box pe-4">
|
<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>
|
<span style="opacity: 1;"></span>
|
||||||
<span style="opacity: 1;"></span>
|
<span style="opacity: 1;"></span>
|
||||||
|
@ -671,7 +681,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pinpu-box pe-4">
|
<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>
|
<span style="opacity: 1;"></span>
|
||||||
<span style="opacity: 1;"></span>
|
<span style="opacity: 1;"></span>
|
||||||
|
@ -1025,40 +1037,51 @@
|
||||||
|
|
||||||
function LineInputLeftRandomBar(number) {
|
function LineInputLeftRandomBar(number) {
|
||||||
const bars = $("#lineinput .equalizer-bar-left")
|
const bars = $("#lineinput .equalizer-bar-left")
|
||||||
let row = (number + 72) / 3;
|
updateBars(bars, number)
|
||||||
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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function LineInputRightRandomBar(number) {
|
function LineInputRightRandomBar(number) {
|
||||||
const bars = $("#lineinput .equalizer-bar-right")
|
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 row = (number + 72) / 3;
|
||||||
let red = (-6 + 72) / 3;
|
let red = (-6 + 72) / 3;
|
||||||
let yellow = (-18 + 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++) {
|
for (let i = 0; i < spans.length; i++) {
|
||||||
if (row > i) {
|
if (row > i) {
|
||||||
if (row >= red && i >= red) {
|
if (row >= red && i >= red) {
|
||||||
|
@ -1079,9 +1102,10 @@
|
||||||
spans[i].style.backgroundColor = "#333"
|
spans[i].style.backgroundColor = "#333"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
setRandomBars();
|
setRandomBars();
|
||||||
}, 200);
|
}, 200);
|
||||||
|
@ -1089,8 +1113,21 @@
|
||||||
function setRandomBars() {
|
function setRandomBars() {
|
||||||
let num = getRandomIntInclusive(0, 72)
|
let num = getRandomIntInclusive(0, 72)
|
||||||
let num2 = getRandomIntInclusive(0, 72)
|
let num2 = getRandomIntInclusive(0, 72)
|
||||||
LineInputLeftRandomBar(num-72)
|
let num3 = getRandomIntInclusive(0, 72)
|
||||||
LineInputRightRandomBar(num2-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) {
|
function getRandomIntInclusive(min, max) {
|
||||||
|
|
Loading…
Reference in New Issue