fix
parent
8fc57ae6c1
commit
f2abc25b40
56
control.html
56
control.html
|
|
@ -17,7 +17,8 @@
|
|||
<div class="fs-3">GEAZAN</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center fw-bold border-black nav">
|
||||
<div class="fw-bold border-black nav-bar" style="position:relative;">
|
||||
<div class="d-flex nav justify-content-center">
|
||||
<div class="">
|
||||
<a href="home.html">HOME</a>
|
||||
</div>
|
||||
|
|
@ -32,6 +33,19 @@
|
|||
<div class="active"><a href="control.html">CONTROL</a></div>
|
||||
<div class="last "><a href="system.html">SYSTEM</a></div>
|
||||
</div>
|
||||
<div class="d-flex float-end ps-5 align-items-center" style="position:absolute; right: 10px;top: 3px;">
|
||||
<button class="btn btn-dark border-black">
|
||||
<svg t="1699500251819" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4301" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="20" height="20">
|
||||
<path
|
||||
d="M513.3 239.9c-73.5 0-142.6 28.6-194.6 80.6-52 52-80.6 121.1-80.6 194.6s28.6 142.6 80.6 194.6c52 52 121.1 80.6 194.6 80.6s142.6-28.6 194.6-80.6c52-52 80.6-121.1 80.6-194.6s-28.6-142.6-80.6-194.6c-52-52-121.1-80.6-194.6-80.6z m0 482.3c-114.2 0-207.2-92.9-207.2-207.2S399 307.8 513.3 307.8c114.2 0 207.2 92.9 207.2 207.2s-92.9 207.2-207.2 207.2zM637.9 803.6H388.7c-18.8 0-34 15.2-34 34s15.2 34 34 34h249.2c18.8 0 34-15.2 34-34s-15.2-34-34-34zM588.1 885H438.6c-18.8 0-34 15.2-34 34s15.2 34 34 34h149.5c18.8 0 34-15.2 34-34s-15.2-34-34-34zM513.3 227.5c18.8 0 34-15.2 34-34V97c0-18.8-15.2-34-34-34s-34 15.2-34 34v96.5c0 18.7 15.2 34 34 34zM701.3 276.9c5.9 4.2 12.7 6.2 19.5 6.2 10.7 0 21.3-5.1 27.9-14.5l55.3-79c10.8-15.4 7-36.6-8.3-47.4-15.4-10.8-36.6-7-47.4 8.3l-55.3 79c-10.8 15.4-7.1 36.6 8.3 47.4zM938 357.6c-6.6-17.6-26.2-26.5-43.8-19.9l-90.4 33.8c-17.6 6.6-26.5 26.2-19.9 43.8 5.1 13.7 18.1 22.1 31.9 22.1 4 0 8-0.7 11.9-2.2l90.4-33.8c17.6-6.6 26.5-26.2 19.9-43.8zM283.4 252.5c6.6 9.4 17.2 14.5 27.9 14.5 6.7 0 13.5-2 19.5-6.2 15.4-10.8 19.1-32 8.3-47.4l-55.3-79c-10.8-15.4-32-19.1-47.4-8.3-15.4 10.8-19.1 32-8.3 47.4l55.3 79zM248.1 399.1c6.6-17.6-2.4-37.2-19.9-43.8l-90.4-33.8c-17.6-6.6-37.2 2.4-43.8 19.9-6.6 17.6 2.4 37.2 19.9 43.8l90.4 33.8c3.9 1.5 7.9 2.2 11.9 2.2 13.8 0 26.8-8.4 31.9-22.1z"
|
||||
fill="#ffffff" p-id="4302" data-spm-anchor-id="a313x.search_index.0.i3.5b953a811enFNb"
|
||||
class="selected"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="px-3 d-flex justify-content-center">
|
||||
|
|
@ -45,8 +59,7 @@
|
|||
<input type="radio" class="btn-check" name="power" id="power-on" value="on">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="power-on">ON</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="power" id="power-off"
|
||||
value="off">
|
||||
<input type="radio" class="btn-check" name="power" id="power-off" value="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="power-off">OFF</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,16 +81,14 @@
|
|||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-6 col-form-label">Hibernation Timer(min)</label>
|
||||
<div class="col-6">
|
||||
<input type="number" class="form-control float-start" id="timer"
|
||||
style="width: 100px;">
|
||||
<input type="number" class="form-control float-start" id="timer" style="width: 100px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-6 col-form-label">Unit Trigger</label>
|
||||
<div class="col-6">
|
||||
<div class="redio-switche float-start" style="display:inline-block;">
|
||||
<input type="radio" class="btn-check" name="trigger" id="trigger-on"
|
||||
value="enable">
|
||||
<input type="radio" class="btn-check" name="trigger" id="trigger-on" value="enable">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="trigger-on">ENABLE</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="trigger" id="trigger-off"
|
||||
|
|
@ -90,12 +101,10 @@
|
|||
<label for="inputPassword" class="col-6 col-form-label">Analog signal delection</label>
|
||||
<div class="col-6">
|
||||
<div class="redio-switche float-start" style="display:inline-block;">
|
||||
<input type="radio" class="btn-check" name="analog" id="analog-on"
|
||||
value="enable">
|
||||
<input type="radio" class="btn-check" name="analog" id="analog-on" value="enable">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="analog-on">ENABLE</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="analog" id="analog-off"
|
||||
value="disable">
|
||||
<input type="radio" class="btn-check" name="analog" id="analog-off" value="disable">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="analog-off">DISABLE</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -104,12 +113,10 @@
|
|||
<label for="inputPassword" class="col-6 col-form-label">Control Lock</label>
|
||||
<div class="col-6">
|
||||
<div class="redio-switche float-start" style="display:inline-block;">
|
||||
<input type="radio" class="btn-check" name="lock" id="lock-on"
|
||||
value="lock">
|
||||
<input type="radio" class="btn-check" name="lock" id="lock-on" value="lock">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="lock-on">LOCK</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="lock" id="lock-off"
|
||||
value="unlock">
|
||||
<input type="radio" class="btn-check" name="lock" id="lock-off" value="unlock">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="lock-off">UNLOCK</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,7 +124,8 @@
|
|||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-6 col-form-label">Blink</label>
|
||||
<div class="col-6 d-flex">
|
||||
<button type="button" id="blink" class="btn btn-dark border border-black px-5">Blink</button>
|
||||
<button type="button" id="blink"
|
||||
class="btn btn-dark border border-black px-5">Blink</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,33 +151,33 @@
|
|||
//初始化配置
|
||||
loadData()
|
||||
})
|
||||
$(document).ready(function(){
|
||||
$("#submit").on('click',function(){
|
||||
$(document).ready(function () {
|
||||
$("#submit").on('click', function () {
|
||||
var power = $("input[name='power']:checked").val();
|
||||
var hibernation = $("input[name='hibernation']:checked").val();
|
||||
var timer = $("#timer").val();
|
||||
var trigger = $("input[name='trigger']:checked").val();
|
||||
var delection =$("input[name='analog']:checked").val();
|
||||
var delection = $("input[name='analog']:checked").val();
|
||||
var lock = $("input[name='lock']:checked").val();
|
||||
})
|
||||
|
||||
$("#blink").on('click',function(){
|
||||
$("#blink").on('click', function () {
|
||||
alert('blink click')
|
||||
})
|
||||
|
||||
$("#submit").on('click',function(){
|
||||
$("#submit").on('click', function () {
|
||||
alert('on submit')
|
||||
})
|
||||
|
||||
$("#timer").on('change',function(){
|
||||
$("#timer").on('change', function () {
|
||||
var num = $("#timer").val()
|
||||
if(num < 5 || num > 30){
|
||||
if (num < 5 || num > 30) {
|
||||
alert("The hibernation timer lasts only 5-30 minutes")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function loadData(){
|
||||
function loadData() {
|
||||
$("input[name='power']").val(["on"])
|
||||
$("input[name='hibernation']").val(["enable"])
|
||||
$("#timer").val("1")
|
||||
|
|
|
|||
85
css/app.css
85
css/app.css
|
|
@ -25,6 +25,22 @@ body {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button{
|
||||
-webkit-appearance: none !important;
|
||||
|
||||
}
|
||||
|
||||
input[type="number"]{
|
||||
-moz-appearance: textfield;
|
||||
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 600px;
|
||||
background-color: #1E1E1E;
|
||||
|
|
@ -63,6 +79,10 @@ body {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-bar{
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.nav {
|
||||
border-top: 2px solid black;
|
||||
border-bottom: 2px solid black;
|
||||
|
|
@ -688,7 +708,6 @@ input:disabled {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.volume-ruler .mm {
|
||||
width: 5px;
|
||||
}
|
||||
|
|
@ -726,6 +745,70 @@ input:disabled {
|
|||
}
|
||||
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(1) {
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(2) {
|
||||
top: 7.14285%;
|
||||
}
|
||||
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(3) {
|
||||
top: 14.28571%;
|
||||
}
|
||||
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(4) {
|
||||
top: 21.428571%;
|
||||
}
|
||||
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(5) {
|
||||
top: 28.571428%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(6) {
|
||||
top: 35.7142857%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(7) {
|
||||
top: 42.8571428%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(8) {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(9) {
|
||||
top: 57.14285714%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(10) {
|
||||
top: 64.2857142%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(11) {
|
||||
top: 71.4285714%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(12) {
|
||||
top: 78.57142857%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(13) {
|
||||
top: 85.71428571%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(14) {
|
||||
top: 92.85714285%;
|
||||
}
|
||||
|
||||
.volume-ruler.home .cm:nth-of-type(15) {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.volume-ruler .cm>span {
|
||||
position: absolute;
|
||||
right: -18px;
|
||||
|
|
|
|||
148
ducking.html
148
ducking.html
|
|
@ -117,12 +117,79 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number"
|
||||
style="width: 50px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3" id="ducklevel">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
DuckLevel
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="volume-slider-box">
|
||||
<div class="volume-slider" data-slider-value="50">
|
||||
<input type="range" orient="vertical" min="0" max="100"
|
||||
step="0.1" value="30">
|
||||
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
||||
</div>
|
||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-45</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-100</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number"
|
||||
style="width: 50px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3" id="attack">
|
||||
|
|
@ -174,63 +241,12 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3" id="ducklevel">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
DuckLevel
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="volume-slider-box">
|
||||
<div class="volume-slider" data-slider-value="50">
|
||||
<input type="range" orient="vertical" min="0" max="100"
|
||||
step="0.1" value="30">
|
||||
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
||||
</div>
|
||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-45</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-100</span>
|
||||
</section>
|
||||
</section>
|
||||
<input class="slider-value text-center" type="number"
|
||||
style="width: 50px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -284,9 +300,13 @@
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number"
|
||||
style="width: 50px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -340,12 +360,12 @@
|
|||
alert($value)
|
||||
})
|
||||
|
||||
mic1.on('change',function(){
|
||||
mic1.on('change', function () {
|
||||
var isChecked = mic1.prop('checked');
|
||||
alert(isChecked)
|
||||
})
|
||||
|
||||
mic2.on('change',function(){
|
||||
mic2.on('change', function () {
|
||||
var isChecked = mic2.prop('checked');
|
||||
alert(isChecked)
|
||||
})
|
||||
|
|
@ -388,7 +408,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (490 / 100)) + 10).toFixed(1)}ms`);
|
||||
$value.val(`${((input.val() * (490 / 100)) + 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -419,7 +439,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (60 / 100)) - 60).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (60 / 100)) - 60).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -450,7 +470,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (100 / 100) - 100)).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (100 / 100) - 100)).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -481,7 +501,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (2000 / 100)) + 10).toFixed(1)}ms`);
|
||||
$value.val(`${((input.val() * (2000 / 100)) + 10).toFixed(1)}`);
|
||||
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
|
|
|||
64
eq.html
64
eq.html
|
|
@ -95,7 +95,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -152,7 +156,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,7 +216,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -264,7 +276,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -343,7 +359,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -400,7 +420,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -456,7 +480,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 30px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -512,7 +540,11 @@
|
|||
</div>
|
||||
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" style="width: 35px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -611,7 +643,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -642,7 +674,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -673,7 +705,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100) - 10)).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100) - 10)).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -704,7 +736,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
|
@ -739,7 +771,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -770,7 +802,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -801,7 +833,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100) - 10)).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100) - 10)).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -832,7 +864,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
|
|
|||
24
filter.html
24
filter.html
|
|
@ -77,8 +77,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" id="handle1-value" style="width: 55px; text-align: center;" value="200Hz" />
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<div>
|
||||
<input class="slider-value text-center" id="handle1-value" type="number" style="width: 40px;" value="200" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
|
||||
</div>
|
||||
<div class="mt-1" style="color: #888;">
|
||||
<!-- HPF(Hz) -->
|
||||
|
|
@ -125,8 +129,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" id="handle2-value" style="width: 55px; text-align: center;" value="200Hz" />
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<div>
|
||||
<input class="slider-value text-center" id="handle2-value" type="number" style="width: 40px;" value="200" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
|
||||
</div>
|
||||
<div class="mt-1" style="color: #888;">
|
||||
<!-- HPF(Hz) -->
|
||||
|
|
@ -198,10 +206,10 @@
|
|||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
$("#handle1-value").val(`${args.value}`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
$("#handle1-value").val(`${args.value}`);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -221,10 +229,10 @@
|
|||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
$("#handle2-value").val(`${args.value}`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
$("#handle2-value").val(`${args.value}`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
28
fs.html
28
fs.html
|
|
@ -68,9 +68,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" id="handle1-value"
|
||||
style="width: 55px; text-align: center;" value="7Hz" />
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<div>
|
||||
<input class="slider-value text-center" id="handle1-value" type="number" style="width: 40px;" value="7" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,9 +109,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" id="handle2-value"
|
||||
style="width: 55px; text-align: center;" value="7Hz" />
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<div>
|
||||
<input class="slider-value text-center" id="handle1-value" type="number" style="width: 40px;" value="7" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">Hz</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -160,6 +166,7 @@
|
|||
value: 7.0,
|
||||
min: 1.0,
|
||||
max: 10.0,
|
||||
step:0.1,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
|
|
@ -167,10 +174,10 @@
|
|||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
$("#handle1-value").val(`${args.value}`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
$("#handle1-value").val(`${args.value}`);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -182,6 +189,7 @@
|
|||
value: 7.0,
|
||||
min: 1.0,
|
||||
max: 10.0,
|
||||
step:0.1,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
|
|
@ -189,10 +197,10 @@
|
|||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
$("#handle2-value").val(`${args.value}`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
$("#handle2-value").val(`${args.value}`);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
401
home.html
401
home.html
|
|
@ -163,30 +163,62 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="volume-ruler home">
|
||||
<section class="cm">
|
||||
<span>12</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
<!-- <span>6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
<span>0</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
<span>-12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-18</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-24</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-30</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-36</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-42</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-48</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-54</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-66</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-72</span>
|
||||
|
|
@ -237,7 +269,12 @@
|
|||
|
||||
</div>
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" min="-72" max="12"
|
||||
style="width: 40px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -287,39 +324,11 @@
|
|||
<span style="opacity: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
</div>
|
||||
<div style="font-size: 12px !important;width: 14px;margin: 0 3px;">L
|
||||
</div>
|
||||
</div>
|
||||
<div class="pinpu-box pe-4">
|
||||
<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>
|
||||
<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>
|
||||
<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: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
</div>
|
||||
<div style="font-size: 12px !important;width: 14px;margin: 0 3px;">R
|
||||
<div
|
||||
style="font-size: 12px !important;width: 14px;margin: 0 3px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ps-1">
|
||||
<section class="volume-ruler left-ruler">
|
||||
<section class="cm">
|
||||
|
|
@ -361,33 +370,65 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="volume-ruler home">
|
||||
<section class="cm">
|
||||
<span>12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
<span>-12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-18</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
<span>-24</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-30</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-36</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-42</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-48</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-54</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-66</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-72</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -434,7 +475,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" min="-72" max="12"
|
||||
style="width: 40px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -484,39 +530,11 @@
|
|||
<span style="opacity: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
</div>
|
||||
<div style="font-size: 12px !important;width: 14px;margin: 0 3px;">L
|
||||
</div>
|
||||
</div>
|
||||
<div class="pinpu-box pe-4">
|
||||
<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>
|
||||
<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>
|
||||
<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: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
</div>
|
||||
<div style="font-size: 12px !important;width: 14px;margin: 0 3px;">R
|
||||
<div
|
||||
style="font-size: 12px !important;width: 14px;margin: 0 3px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ps-1">
|
||||
<section class="volume-ruler left-ruler">
|
||||
<section class="cm">
|
||||
|
|
@ -558,33 +576,65 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="volume-ruler home">
|
||||
<section class="cm">
|
||||
<span>12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
<span>-12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-18</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
<span>-24</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-30</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-36</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-42</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-48</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-54</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-66</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-72</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -630,7 +680,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" min="-72" max="12"
|
||||
style="width: 40px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -751,33 +806,65 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="volume-ruler home">
|
||||
<section class="cm">
|
||||
<span>12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-6</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
<span>-12</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-18</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
<span>-24</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
<!-- <span>-30</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-36</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-42</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-48</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-54</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-66</span> -->
|
||||
<!-- <section class="mm"></section> -->
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-72</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -823,7 +910,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="slider-value-box input-group justify-content-center mt-3">
|
||||
<input class="slider-value" style="width: 55px;" />
|
||||
<div>
|
||||
<input class="slider-value text-center" type="number" min="-72" max="12"
|
||||
style="width: 40px;" />
|
||||
</div>
|
||||
<span
|
||||
style="font-size: 12px; color: #555; padding-left: 6px; padding-top: 5px;">dB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -851,10 +943,10 @@
|
|||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
loadData()
|
||||
LineInputSlider()
|
||||
Microphone1Slider()
|
||||
Microphone2Slider()
|
||||
OutputVolumeSlider()
|
||||
LineInputSlider(-29)
|
||||
Microphone1Slider(5)
|
||||
Microphone2Slider(2)
|
||||
OutputVolumeSlider(4)
|
||||
LineInputLeftRandomBar(0)
|
||||
LineInputRightRandomBar(0)
|
||||
})
|
||||
|
|
@ -862,37 +954,53 @@
|
|||
$(document).ready(function () {
|
||||
|
||||
$('#lineinput-voice-add').on('click', function () {
|
||||
alert('lineinput add')
|
||||
let num = $("#lineinput .volume-slider input").val();
|
||||
let value = ((num * (84 / 100) - 72) + 1).toFixed(1)
|
||||
LineInputSlider(value)
|
||||
})
|
||||
|
||||
$('#lineinput-voice-low').on('click', function () {
|
||||
alert('lineinput low')
|
||||
let num = $("#lineinput .volume-slider input").val();
|
||||
let value = ((num * (84 / 100) - 72) - 1).toFixed(1)
|
||||
LineInputSlider(value)
|
||||
})
|
||||
|
||||
|
||||
$('#microphone1-voice-add').on('click', function () {
|
||||
alert('microphone1 add')
|
||||
let num = $("#microphone1 .volume-slider input").val();
|
||||
let value = ((num * (20 / 100) - 10) + 1).toFixed(1)
|
||||
Microphone1Slider(value)
|
||||
})
|
||||
|
||||
$('#microphone1-voice-low').on('click', function () {
|
||||
alert('microphone1 low')
|
||||
let num = $("#microphone1 .volume-slider input").val();
|
||||
let value = ((num * (20 / 100) - 10) - 1).toFixed(1)
|
||||
Microphone1Slider(value)
|
||||
})
|
||||
|
||||
|
||||
$('#microphone2-voice-add').on('click', function () {
|
||||
alert('microphone2 add')
|
||||
let num = $("#microphone2 .volume-slider input").val();
|
||||
let value = ((num * (20 / 100) - 10) + 1).toFixed(1)
|
||||
Microphone2Slider(value)
|
||||
})
|
||||
|
||||
$('#microphone2-voice-low').on('click', function () {
|
||||
alert('microphone2 low')
|
||||
let num = $("#microphone2 .volume-slider input").val();
|
||||
let value = ((num * (20 / 100) - 10) - 1).toFixed(1)
|
||||
Microphone2Slider(value)
|
||||
})
|
||||
|
||||
$('#outputvolume-voice-add').on('click', function () {
|
||||
alert('add')
|
||||
let num = $("#outputvolume .volume-slider input").val();
|
||||
let value = ((num * (20 / 100) - 10) + 1).toFixed(1)
|
||||
OutputVolumeSlider(value)
|
||||
})
|
||||
|
||||
$('#outputvolume-voice-low').on('click', function () {
|
||||
alert('low')
|
||||
let num = $("#outputvolume .volume-slider input").val();
|
||||
let value = ((num * (20 / 100) - 10) - 1).toFixed(1)
|
||||
OutputVolumeSlider(value)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -907,10 +1015,11 @@
|
|||
}
|
||||
|
||||
|
||||
function LineInputSlider() {
|
||||
function LineInputSlider(number) {
|
||||
let element = $('#lineinput')
|
||||
let input = $("#lineinput .volume-slider input")
|
||||
input.attr('value', (5 + 72) / (84 / 100))
|
||||
let value = (parseInt(number) + 72) / (84 / 100)
|
||||
input.attr('value', value)
|
||||
updateLineInputSlider(element);
|
||||
|
||||
|
||||
|
|
@ -935,14 +1044,16 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (84 / 100)) - 72).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (84 / 100)) - 72).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function Microphone1Slider() {
|
||||
function Microphone1Slider(number) {
|
||||
let element = $("#microphone1")
|
||||
let input = $("#microphone1 .volume-slider input")
|
||||
input.attr('value', (-5 + 10) / (20 / 100))
|
||||
let value = (parseInt(number) + 10) / (20 / 100)
|
||||
input.attr('value', value)
|
||||
|
||||
updateMicrophone1Slider(element);
|
||||
|
||||
|
||||
|
|
@ -966,14 +1077,17 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function Microphone2Slider() {
|
||||
function Microphone2Slider(number) {
|
||||
let element = $('#microphone2')
|
||||
let input = $("#microphone2 .volume-slider input")
|
||||
input.attr('value', (1 + 10) / (20 / 100))
|
||||
|
||||
let value = (parseInt(number) + 10) / (20 / 100)
|
||||
input.attr('value', value)
|
||||
|
||||
updateMicrophone2Slider(element);
|
||||
|
||||
|
||||
|
|
@ -998,15 +1112,18 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
||||
function OutputVolumeSlider() {
|
||||
function OutputVolumeSlider(number) {
|
||||
let element = $('#outputvolume')
|
||||
let input = $("#outputvolume .volume-slider input")
|
||||
input.attr('value', (1 + 10) / (20 / 100))
|
||||
|
||||
let value = (parseInt(number) + 10) / (20 / 100)
|
||||
input.attr('value', value)
|
||||
|
||||
updateOutputVolumeSlider(element);
|
||||
|
||||
|
||||
|
|
@ -1031,7 +1148,7 @@
|
|||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
|
@ -1084,11 +1201,11 @@
|
|||
let spans = element[0].getElementsByTagName('span');
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
if (row > i) {
|
||||
if (row >= red && i >= red) {
|
||||
if (row > red && i > red) {
|
||||
spans[i].style.opacity = "1"
|
||||
spans[i].style.backgroundColor = "#ff0000"
|
||||
}
|
||||
else if (row >= yellow && i < red && i >= yellow) {
|
||||
else if (row > yellow + 1 && i <= red && i > yellow + 1) {
|
||||
spans[i].style.opacity = "1"
|
||||
spans[i].style.backgroundColor = "#ff6600"
|
||||
}
|
||||
|
|
@ -1114,17 +1231,13 @@
|
|||
let num = getRandomIntInclusive(0, 72)
|
||||
let num2 = getRandomIntInclusive(0, 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
<div class="mb-3 row">
|
||||
<label for="hostName" class="col-sm-5 col-form-label">Host Name</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="hostName">
|
||||
<input type="text" class="form-control" id="hostName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<hr style="color: #555;"/>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-sm-4 col-form-label">Factory Reset</label>
|
||||
<div class="col-sm-8 d-flex">
|
||||
|
|
@ -79,9 +82,10 @@
|
|||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-sm-4 col-form-label">Fimware Upgrade</label>
|
||||
<div class="col-sm-8 d-flex">
|
||||
<button id="selectFile" class="btn button btn-dark border border-black">Browser</button>
|
||||
|
||||
<input type="text" id="fileName" class="form-control" />
|
||||
<input type="file" id="uploadFile" style="display: none;">
|
||||
<button id="selectFile" class="btn button btn-dark border border-black">Browser</button>
|
||||
<button type="button" id="upgrade"
|
||||
class="btn button btn-dark border border-black ms-4">Load</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue