Skip to content

Instantly share code, notes, and snippets.

@archi

archi/dsp.html Secret

Created July 19, 2020 18:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save archi/d48674a27365d55191324911a94a158e to your computer and use it in GitHub Desktop.
Save archi/d48674a27365d55191324911a94a158e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dsp.html
<!--
- This file based on part of freeDSP-aurora, licensed under CC-BY-SA
- Contributions by Sebastian Meyer
-->
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<head>
<title>AURORA DSP</title>
<link rel="stylesheet" href="dark.css">
</head>
<body onload="onLoad()">
<nav>
<ul>
<li><a onclick="configDev()">Config Device</a></li>
<li><a onclick="configWifi()">Config Wifi</a></li>
<li><a onclick="openPlugin()">Upload Plugin</a></li>
<li><a onclick="storePreset()">Store Preset</a></li>
<li><a href="preset.param" download>Export Preset</a></li>
<li><label for="presetimp">Import Preset</label><input type="file" id="presetimp" style="display:none"/></li>
</ul>
<div style="position:absolute;bottom:30px;right:30px;">
<p class="info">GUI: <a href='https://github.com/archi/aurora-tool' target='_at'>aurora-tool</a></p>
<p class="info" id="fw">FW: 0.0.0</p>
<p class="info" id="ip">Local Wifi IP: 0.0.0.0</p>
</div>
</nav>
<div>
<table>
<tr><td colspan="2"><center>
<table style="border-bottom:1px solid;"><tr><td><h1>Aurora DSP</h1></td></tr></table>
</center></td></tr>
<tr><td colspan="2"><h2>Leif's tolles Plugin :)</h2></td></tr>
<tr><td valign=top style="border-right: 1px solid #808080; min-width:200px; max-width:200px;">
<table align="center" style="padding:10px">
<tr><td><h2>AddOn</h2></td></tr>
<tr><td>
<div class="hidden" id="addon_none"><h3>None or custom</h3></div>
<div class="hidden" id="addon_a"><h3>The woodworker's friend</h3></div>
<div class="hidden" id="addon_b"><h3>Down with developers</h3>
<br>S/P-DIF Input:<br><br>
<select id="spdif_b" onchange="changeSPDIF('spdif_b')">
<option value="0x04">Coax 1</option>
<option value="0x05">Coax 2</option>
<option value="0x06">Coax 3</option>
<option value="0x07">Coax 4</option>
<option value="0x00">Optical 1</option>
<option value="0x01">Optical 2</option>
<option value="0x02">Optical 3</option>
<option value="0x03">Optical 4</option>
</select>
</div>
<div class="hidden" id="addon_c"><h3>Control over the crowd</h3></div>
<div class="hidden" id="addon_d"><h3>Balanced life</h3></div>
</td></tr>
</table>
</td><td>
<table style="border-spacing: 5px 10px;">
<tr>
<td rowspan="8" width="400px">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="width:350px">
Normally you would see more controls here.
But the <i>aurora-tool pre-alpha</i> does not support this, yet.
However, master volume (right) as well as the presets (bottom) should work.
</div>
</td><td rowspan="8" style="max-width: 80px;">
<input type="range" id="mvol" class="volslider" min="-80" max="0" onchange="postMVol()"/>
<div style="transform: translateY(240px);">Master<br>Volume</div>
</td></tr>
</table>
</td></tr>
<tr><td><br><br><br><br><br><br><br><br><br><br></td></tr>
<tr><td colspan="2"><center>
<table><tr><td><button class="prebtn" id="pre0" onclick="switchPreset(0)">Preset A</button></td>
<td><button class="prebtn" id="pre1" onclick="switchPreset(1)">Preset B</button></td>
<td><button class="prebtn" id="pre2" onclick="switchPreset(2)">Preset C</button></td>
<td><button class="prebtn" id="pre3" onclick="switchPreset(3)">Preset D</button></td></tr></table>
</center></td></tr>
</table>
</div>
<div id="highPass" class="modal" data-idx="0">
<div class="modal-content d_hp">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr>
<td class="headline">High Pass</td><td class="close" onclick="closeModal('highPass')">&times;</td>
</tr>
</table>
</td></tr>
<tr><td colspan="2">
<select id="hp_typ">
<option value="0">Bes 6</option>
<option value="1">Bes 12</option>
<option value="2">Bes 18</option>
<option value="3">Bes 24</option>
<option value="4">But 12</option>
<option value="5">But 18</option>
<option value="6">But 24</option>
<option value="7">LR 12</option>
<option value="8">LR 24</option>
<option value="9">LR 36</option>
<option value="10">LR 48</option>
</select>
</td></tr>
<tr><td><input type="number" id="hp_fc" style="width:95%;" step="any" min="1" max="20000"></td><td style="text-align:left;width:10%;">Hz</td></tr>
<tr><td colspan="2"><button class="send" id="hp_bypass" onclick="bypass('hp_bypass');sendParam('hp');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('hp')">Send</button></td></tr>
</table>
</div>
</div>
<div id="lowShelv" class="modal" data-idx="0">
<div class="modal-content d_shlv">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Low Shelving</td><td class="close" onclick="closeModal('lowShelv')">&times;</td></tr>
</table>
</td></tr>
<tr><td><input type="number" id="ls_v" style="width:95%;" step="any" min="-24" max="24"></td><td style="text-align:left;width:10%;">dB</td></tr>
<tr><td><input type="number" id="ls_fc" style="width:95%;" step="any" min="1" max="20000"></td><td style="text-align:left;width:10%;">Hz</td></tr>
<tr><td><input type="number" id="ls_s" style="width:95%;" step="0.01" min="0.1" max="2"></td><td style="text-align:left;width:10%;">S</td></tr>
<tr><td colspan="2"><button class="send" id="ls_bypass" onclick="bypass('ls_bypass');sendParam('lshelv');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('lshelv')">Send</button></td></tr>
</table>
</div>
</div>
<div id="peq" class="modal" data-idx="0">
<div class="modal-content d_peq">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Parametric EQ</td><td class="close" onclick="closeModal('peq')">&times;</td></tr>
</table>
</td></tr>
<tr><td><input type="number" id="peq_v" style="width:95%;" step="any" min="-24" max="24"></td><td style="text-align:left;width:10%;">dB</td></tr>
<tr><td><input type="number" id="peq_fc" style="width:95%;" step="any" min="1" max="20000"></td><td style="text-align:left;width:10%;">Hz</td></tr>
<tr><td><input type="number" id="peq_q" style="width:95%;" step="any" min="0.1" max="100"></td><td style="text-align:left;width:10%;">Q</td></tr>
<tr><td colspan="2"><button class="send" id="peq_bypass" onclick="bypass('peq_bypass');sendParam('peq');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('peq')">Send</button></td></tr>
</table>
</div>
</div>
<div id="highShelv" class="modal" data-idx="0">
<div class="modal-content d_shlv">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">High Shelving</td><td class="close" onclick="closeModal('highShelv')">&times;</td></tr>
</table>
</td></tr>
<tr><td><input type="number" id="hs_v" style="width:95%;" step="any" min="-24" max="24"></td><td style="text-align:left;width:10%;">dB</td></tr>
<tr><td><input type="number" id="hs_fc" style="width:95%;" step="any" min="1" max="20000"></td><td style="text-align:left;width:10%;">Hz</td></tr>
<tr><td><input type="number" id="hs_s" style="width:95%;" step="0.01" min="0.1" max="2"></td><td style="text-align:left;width:10%;">S</td></tr>
<tr><td colspan="2"><button class="send" id="hs_bypass" onclick="bypass('hs_bypass');sendParam('hshelv');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('hshelv')">Send</button></td></tr>
</table>
</div>
</div>
<div id="lowPass" class="modal" data-idx="0">
<div class="modal-content d_hp">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Low Pass</td><td class="close" onclick="closeModal('lowPass')">&times;</td></tr>
</table>
</td></tr>
<tr><td colspan="2">
<select id="lp_typ">
<option value="0">Bes 6</option>
<option value="1">Bes 12</option>
<option value="2">Bes 18</option>
<option value="3">Bes 24</option>
<option value="4">But 12</option>
<option value="5">But 18</option>
<option value="6">But 24</option>
<option value="7">LR 12</option>
<option value="8">LR 24</option>
<option value="9">LR 36</option>
<option value="10">LR 48</option>
</select>
</td></tr>
<tr><td><input type="number" id="lp_fc" style="width:95%;" step="any" min="1" max="20000"></td><td style="text-align:left;width:10%;">Hz</td></tr>
<tr><td colspan="2"><button class="send" id="lp_bypass" onclick="bypass('lp_bypass');sendParam('lp');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('lp')">Send</button></td></tr>
</table>
</div>
</div>
<div id="phase" class="modal" data-idx="0">
<div class="modal-content d_phase">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Phase</td><td class="close" onclick="closeModal('phase')">&times;</td></tr>
</table>
</td></tr>
<tr><td><input type="number" id="ph_fc" style="width:95%;" step="any" min="1" max="20000"></td><td style="text-align:left;width:10%;">Hz</td></tr>
<tr><td><input type="number" id="ph_q" style="width:95%;" step="any" min="0.1" max="100"></td><td style="text-align:left;width:10%;">Q</td></tr>
<tr><td colspan="2"><input type="checkbox" id="ph_inv">Invert</td></tr>
<tr><td colspan="2"><button class="send" id="ph_bypass" onclick="bypass('ph_bypass');sendParam('phase');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('phase')">Send</button></td></tr>
</table>
</div>
</div>
<div id="delay" class="modal" data-idx="0">
<div class="modal-content d_delay">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Delay</td><td class="close" onclick="closeModal('delay')">&times;</td></tr>
</table>
</td></tr>
<tr><td><input type="number" id="delayval" style="width:95%;" step="any" min="0" max="100"></td><td style="text-align:left;width:10%;">ms</td></tr>
<tr><td colspan="2"><button class="send" id="delay_bypass" onclick="bypass('delay_bypass');sendParam('delay');" data-bypass="0">Bypass</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('delay')">Send</button></td></tr>
</table>
</div>
</div>
<div id="gain" class="modal" data-idx="0">
<div class="modal-content d_gain">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Gain</td><td class="close" onclick="closeModal('gain')">&times;</td></tr>
</table>
</td></tr>
<tr><td><input type="number" id="gainval" style="width:95%;" step="any" min="-120" max="0"></td><td style="text-align:left;width:10%;">dB</td></tr>
<tr><td colspan="2"><button class="send" id="mute" onclick="mute()" data-mute="0">Mute</button></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendParam('gain')">Send</button></td></tr>
</table>
</div>
</div>
<div id="configDev" class="modal">
<div class="modal-content" style="width:600px;">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Device Config</td><td class="close" onclick="closeModal('configDev')">&times;</td></tr>
</table>
</td></tr>
<tr><td>AddOn</td><td>ADC Channel Summation</td></tr>
<tr style="vertical-align:top;"><td><select id="aid">
<option value="0">None or custom</option>
<option value="1">A The woodworker's friend</option>
<option value="2">B Down with developers</option>
<!--<option value="3">C Control over the crowd</option>-->
<option value="4">D Balanced life</option>
</select></td>
<td><select id="adcsum">
<option value="0">None</option>
<option value="1">8 to 4</option>
<option value="2">8 to 2</option>
<option value="3">8 to 1</option>
</select>
</td></tr>
<tr><td><input type="checkbox" id="vpot">Volume Potentiometer</td><td></td></tr>
<tr><td colspan="2"><button class="send" onclick="sendConfig()">Store</button></td></tr>
</table>
</div>
</div>
<div id="configWifi" class="modal">
<div class="modal-content">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">WiFi Config</td><td class="close" onclick="closeModal('configWifi')">&times;</td></tr>
</table>
</td></tr>
<tr><td>SSID</td></tr>
<tr><td><input type="text" id="ssid" style="width:95%;"></td></tr>
<tr><td>Password</td</tr>
<tr><td><input type="password" id="pwd" style="width:95%;"></td></tr>
<tr><td><button class="send" onclick="sendWifi()">Store WiFi</button></td></tr>
<tr><td>Password Access Point</td</tr>
<tr><td><input type="password" id="pwdap" style="width:95%;"></td></tr>
<tr><td><button class="send" onclick="sendPwdAP()">Store AP Password</button></td></tr>
</table>
</div>
</div>
<div id="plugin" class="modal">
<div class="modal-content" style="width:600px;">
<table class="ptbl">
<tr><td colspan="2" style="height:20px;padding-top:10px;">
<table style="width:100%;">
<tr><td class="headline">Upload Plugin</td><td class="close" onclick="closeModal('plugin')">&times;</td></tr>
</table>
</td></tr>
<tr><td>Please select the folder of the plugin.</td></tr>
<tr><td><input type="file" id="picker" name="fileList" webkitdirectory mozdirectory multiple width="95%"></td></tr>
<tr><td><div id="wait" style="display:none;">Please wait while uploading.</div></td></tr>
<tr><td><div id="prg" style="border: 1px solid #73EC6F; background: #73EC6F; height:2px; width:0%;"></div></td></tr>
</table>
</div>
</div>
<div id="plzw" class="modal" style="z-index:100;">
<div class="modal-content" style="width:50%">
<h2><br></h2>
<h2 id="msg">Please wait...</h2>
</div>
</div>
<script>
function openHP(idx){
document.getElementById("highPass").style.display = "block";
fetch("/hp?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("highPass").dataset.idx=idx;
document.getElementById("hp_fc").value=data.fc;
document.getElementById("hp_typ").value=data.typ;
document.getElementById("hp_bypass").dataset.bypass=data.bypass;
switchBypass("hp_bypass");
}).catch (function (error){console.log(error);
});
}
function openLShelv(idx){
document.getElementById("lowShelv").style.display = "block";
fetch("/lshelv?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("lowShelv").dataset.idx=idx;
document.getElementById("ls_v").value=data.gain;
document.getElementById("ls_fc").value=data.fc;
document.getElementById("ls_s").value=data.slope;
document.getElementById("ls_bypass").dataset.bypass=data.bypass;
switchBypass("ls_bypass");
}).catch (function (error){console.log(error);
});
}
function openPEQ(idx){
document.getElementById("peq").style.display = "block";
fetch("/peq?idx="+idx).then (function (response) {
return response.json();
}).then (function (data){
document.getElementById("peq").dataset.idx=idx;
document.getElementById("peq_v").value=data.gain;
document.getElementById("peq_fc").value=data.fc;
document.getElementById("peq_q").value=data.Q;
document.getElementById("peq_bypass").dataset.bypass=data.bypass;
switchBypass("peq_bypass");
}).catch (function (error){console.log(error);
});
}
function openHShelv(idx){
document.getElementById("highShelv").style.display = "block";
fetch("/hshelv?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("highShelv").dataset.idx=idx;
document.getElementById("hs_v").value=data.gain;
document.getElementById("hs_fc").value=data.fc;
document.getElementById("hs_s").value=data.slope;
document.getElementById("hs_bypass").dataset.bypass=data.bypass;
switchBypass("hs_bypass");
}).catch (function (error){console.log(error);
});
}
function openLP(idx){
document.getElementById("lowPass").style.display = "block";
fetch("/lp?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("lowPass").dataset.idx=idx;
document.getElementById("lp_fc").value=data.fc;
document.getElementById("lp_typ").value=data.typ;
document.getElementById("lp_bypass").dataset.bypass=data.bypass;
switchBypass("lp_bypass");
}).catch (function (error){console.log(error);
});
}
function openPhase(idx){
document.getElementById("phase").style.display = "block";
fetch("/phase?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("phase").dataset.idx=idx;
document.getElementById("ph_fc").value=data.fc;
document.getElementById("ph_q").value=data.Q;
if(data.inv==1) document.getElementById("ph_inv").checked=true;
else document.getElementById("ph_inv").checked=false;
document.getElementById("ph_bypass").dataset.bypass=data.bypass;
switchBypass("ph_bypass");
}).catch (function (error){console.log(error);
});
}
function openDelay(idx){
document.getElementById("delay").style.display = "block";
fetch("/delay?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("delay").dataset.idx=idx;
document.getElementById("delayval").value=data.dly;
document.getElementById("delay_bypass").dataset.bypass=data.bypass;
switchBypass("delay_bypass");
}).catch (function (error){console.log(error);
});
}
function openGain(idx){
document.getElementById("gain").style.display = "block";
fetch("/gain?idx="+idx).then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("gain").dataset.idx=idx;
document.getElementById("gainval").value=data.gain;
document.getElementById("mute").dataset.mute=data.mute;
switchMute();
}).catch (function (error){console.log(error);
});
}
function getMVol(){
fetch("/mvol").then (function (response) {return response.json();})
.then(function (data){
document.getElementById("mvol").value=data.vol;
}).catch (function (error) {console.log(error);
});
}
function getPreset(){
fetch("/preset").then (function (response) {
return response.json();
}).then (function (data) {
switchPreset(data.pre);
}).catch (function (error) {console.log(error);
});
}
function getConfig(){
fetch("/config").then (function (response) {
return response.json();
}).then (function (data) {
document.getElementById("aid").value = data.aid;
if(data.vpot==1) document.getElementById("vpot").checked=true;
else document.getElementById("vpot").checked=false;
document.getElementById("adcsum").value = data.adcsum;
}).catch (function (error) {console.log(error);
});
}
function postInputJson(id,idx){
var data={};
var elem = document.getElementById(id);
var selected = elem.options[elem.selectedIndex];
data.idx=idx;
data.sel=document.getElementById(id).value;
fetch("/input",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)}).catch(function(error){console.log(error);});
}
function postJson(btp){
var data={};
if(btp=="hp"){
data.idx=document.getElementById("highPass").dataset.idx;
data.fc=document.getElementById("hp_fc").value;
data.typ=document.getElementById("hp_typ").value;
data.bypass=document.getElementById("hp_bypass").dataset.bypass;
return fetch("/hp",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="lshelv"){
data.idx=document.getElementById("lowShelv").dataset.idx;
data.gain=document.getElementById("ls_v").value;
data.fc=document.getElementById("ls_fc").value;
data.slope=document.getElementById("ls_s").value;
data.bypass=document.getElementById("ls_bypass").dataset.bypass;
return fetch("/lshelv",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="peq"){
data.idx=document.getElementById("peq").dataset.idx;
data.gain=document.getElementById("peq_v").value;
data.fc=document.getElementById("peq_fc").value;
data.Q=document.getElementById("peq_q").value;
data.bypass=document.getElementById("peq_bypass").dataset.bypass;
return fetch("/peq",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="hshelv"){
data.idx=document.getElementById("highShelv").dataset.idx;
data.gain=document.getElementById("hs_v").value;
data.fc=document.getElementById("hs_fc").value;
data.slope=document.getElementById("hs_s").value;
data.bypass=document.getElementById("hs_bypass").dataset.bypass;
return fetch("/hshelv",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="lp"){
data.idx=document.getElementById("lowPass").dataset.idx;
data.fc=document.getElementById("lp_fc").value;
data.typ=document.getElementById("lp_typ").value;
data.bypass=document.getElementById("lp_bypass").dataset.bypass;
return fetch("/lp",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="phase"){
data.idx=document.getElementById("phase").dataset.idx;
data.fc=document.getElementById("ph_fc").value;
data.Q=document.getElementById("ph_q").value;
data.inv=document.getElementById("ph_inv").checked;
data.bypass=document.getElementById("ph_bypass").dataset.bypass;
return fetch("/phase",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="delay"){
data.idx=document.getElementById("delay").dataset.idx;
data.delay=document.getElementById("delayval").value;
data.bypass=document.getElementById("delay_bypass").dataset.bypass;
return fetch("/delay",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
else if(btp=="gain"){
data.idx=document.getElementById("gain").dataset.idx;
data.gain=document.getElementById("gainval").value;
data.mute=document.getElementById("mute").dataset.mute;
console.log( data.mute );
return fetch("/gain",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)});
}
}
function postMVol(){
var data={};
data.vol=document.getElementById("mvol").value;
fetch("/mvol",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)}).catch(function(error){console.log(error);});
}
function switchPreset(p){
var data={};
data.pre=p;
document.getElementById("msg").innerHTML="Switching preset, please wait...";
document.getElementById("plzw").style.display="block";
fetch("/preset",{method:"POST",headers:{
"Content-Type": "application/json"},
body:JSON.stringify(data)
}).then(function(response){return fetch("/addoncfg");
}).then(function(response){return response.json();
}).then(function(cfg){
if(document.getElementById("aid").value==2){
if(cfg.addcfg==0) document.getElementById("spdif_b").value="0x00";
else if(cfg.addcfg==1) document.getElementById("spdif_b").value="0x01";
else if(cfg.addcfg==2) document.getElementById("spdif_b").value="0x02";
else if(cfg.addcfg==3) document.getElementById("spdif_b").value="0x03";
else if(cfg.addcfg==4) document.getElementById("spdif_b").value="0x04";
else if(cfg.addcfg==5) document.getElementById("spdif_b").value="0x05";
else if(cfg.addcfg==6) document.getElementById("spdif_b").value="0x06";
else if(cfg.addcfg==7) document.getElementById("spdif_b").value="0x07";
}
return fetch("/allinputs");
}).then(function(response){return response.json();
}).then(function(data){
document.getElementById("chn0").value=data.in0;
document.getElementById("chn1").value=data.in1;
document.getElementById("chn2").value=data.in2;
document.getElementById("chn3").value=data.in3;
document.getElementById("chn4").value=data.in4;
document.getElementById("chn5").value=data.in5;
document.getElementById("chn6").value=data.in6;
document.getElementById("chn7").value=data.in7;
return fetch("/allbyp");
}).then(function(response){
return response.text();
}).then(function(response){
var data = JSON.parse(response);
for(ii in data.byp){
if(data.byp[ii].val) document.getElementById(data.byp[ii].name).style="border-bottom-color:red;";
else document.getElementById(data.byp[ii].name).style="";
}
return fetch("/allfc");
}).then(function(response){
return response.text();
}).then(function(response){
var data = JSON.parse(response);
for(ii in data.fc){document.getElementById(data.fc[ii].name).innerHTML=data.fc[ii].val;}
getMVol();
}).then(function(response){document.getElementById("plzw").style.display="none";
}).catch(function(error){console.log(error);});
document.getElementById("pre0").style.backgroundColor = "#101010";
document.getElementById("pre1").style.backgroundColor = "#101010";
document.getElementById("pre2").style.backgroundColor = "#101010";
document.getElementById("pre3").style.backgroundColor = "#101010";
document.getElementById("pre"+p).style.backgroundColor = "#73EC6F";
}
function sendParam(btp){postJson(btp).catch(function(error){console.log(error);});}
function mute(){
if(document.getElementById("mute").dataset.mute=="0")
document.getElementById("mute").dataset.mute="1";
else
document.getElementById("mute").dataset.mute="0";
switchMute();
sendParam("gain");
}
function switchMute(){
if(document.getElementById("mute").dataset.mute=="1"){
document.getElementById("mute").style.backgroundColor="#FF0000";
document.getElementById("mute").style.borderColor="#FF0000";
document.getElementById("mute").style.color="#101010";
}else{
document.getElementById("mute").style.backgroundColor = "#101010";
document.getElementById("mute").style.borderColor="#808080";
document.getElementById("mute").style.color="#D0D0D0";
}
}
function bypass(id){
if(document.getElementById(id).dataset.bypass=="0")
document.getElementById(id).dataset.bypass="1";
else
document.getElementById(id).dataset.bypass="0";
switchBypass(id);
}
function switchBypass(id){
if(document.getElementById(id).dataset.bypass=="1"){
document.getElementById(id).style.backgroundColor="#FF0000";
document.getElementById(id).style.borderColor="#FF0000";
document.getElementById(id).style.color="#101010";
}else{
document.getElementById(id).style.backgroundColor = "#101010";
document.getElementById(id).style.borderColor="#808080";
document.getElementById(id).style.color="#D0D0D0";
}
}
function closeModal(id){
document.getElementById(id).style.display = "none";
fetch("/allbyp")
.then(function(response){
return response.text();
}).then(function(response){
var data = JSON.parse(response);
for(ii in data.byp){
if(data.byp[ii].val) document.getElementById(data.byp[ii].name).style="border-bottom-color:red;";
else document.getElementById(data.byp[ii].name).style="";
}
return fetch("/allfc");
}).then(function(response){return response.text();
}).then(function(response){
var data = JSON.parse(response);
for(ii in data.fc){document.getElementById(data.fc[ii].name).innerHTML=data.fc[ii].val;}
}).catch(function(err){console.log(err);});
}
function configDev(){document.getElementById("configDev").style.display = "block";getConfig();}
function configWifi(){document.getElementById("configWifi").style.display = "block";}
function sendConfig(){
var data={};
data.aid=document.getElementById("aid").value;
data.vpot=document.getElementById("vpot").checked;
data.adcsum=document.getElementById("adcsum").value;
fetch("/config",{method:"POST",headers:{"Content-Type": "application/json"},body:JSON.stringify(data)})
.then(function(result) {
hideAddon();
if(data.aid==0) document.getElementById('addon_none').style.display = "block";
else if(data.aid==1) document.getElementById('addon_a').style.display = "block";
else if(data.aid==2) document.getElementById('addon_b').style.display = "block";
else if(data.aid==3) document.getElementById('addon_c').style.display = "block";
else if(data.aid==4) document.getElementById('addon_d').style.display = "block";
}).catch (function(err){console.log(err);});
}
function sendWifi(){
var data={};
data.ssid=document.getElementById("ssid").value;
data.pwd=document.getElementById("pwd").value;
fetch("/wifi",{method:"POST",headers:{"Content-Type": "application/json"},body:JSON.stringify(data)})
.then(function(response){
alert("Success! Your WiFi settings have been stored.");
return response;})
.catch(function(err){console.log(err);});
}
function sendPwdAP(){
var data={};
data.pwdap=document.getElementById("pwdap").value;
if((data.pwdap.length>7) || (data.pwdap.length==0)){
fetch("/pwdap",{method:"POST",headers:{"Content-Type": "application/json"},body:JSON.stringify(data)})
.then(function(response){
alert("Success! The password for the access point has been stored.");
return response;})
.catch(function(err){console.log(err);});
}else{
alert("Please select a password with at least 8 characters.");
}
}
function storePreset(){
var data={};
document.getElementById("msg").innerHTML="Storing preset, please wait...";
document.getElementById("plzw").style.display="block";
fetch("/store",{method:"POST",headers:{"Content-Type": "application/json"},body:JSON.stringify(data)})
.then(function(response){
alert("Success! Your preset has been stored.");
return response;})
.then(function(response){document.getElementById("plzw").style.display="none";})
.catch(function(err){console.log(err);});
}
function onLoad(){
hideAddon();
fetch("/config").then(function(response){
return response.json();
}).then(function(cfg){
document.getElementById("fw").innerHTML="FW: "+cfg.fw;
document.getElementById("ip").innerHTML="Local WiFi IP: "+cfg.ip;
var p=cfg.pre;
document.getElementById("pre0").style.backgroundColor = "#101010";
document.getElementById("pre1").style.backgroundColor = "#101010";
document.getElementById("pre2").style.backgroundColor = "#101010";
document.getElementById("pre3").style.backgroundColor = "#101010";
document.getElementById("pre"+p).style.backgroundColor = "#73EC6F";
if(cfg.aid==0) document.getElementById('addon_none').style.display = "block";
else if(cfg.aid==1) document.getElementById('addon_a').style.display = "block";
else if(cfg.aid==2)
{
if(cfg.addcfg==0) document.getElementById("spdif_b").value="0x00";
else if(cfg.addcfg==1) document.getElementById("spdif_b").value="0x01";
else if(cfg.addcfg==2) document.getElementById("spdif_b").value="0x02";
else if(cfg.addcfg==3) document.getElementById("spdif_b").value="0x03";
else if(cfg.addcfg==4) document.getElementById("spdif_b").value="0x04";
else if(cfg.addcfg==5) document.getElementById("spdif_b").value="0x05";
else if(cfg.addcfg==6) document.getElementById("spdif_b").value="0x06";
else if(cfg.addcfg==7) document.getElementById("spdif_b").value="0x07";
document.getElementById('addon_b').style.display = "block";
}
else if(cfg.aid==3) document.getElementById('addon_c').style.display="block";
else if(cfg.aid==4) document.getElementById('addon_d').style.display="block";
return fetch("/allinputs");
}).then(function(response){
return response.json();
}).then(function(data){
document.getElementById("chn0").value=data.in0;
document.getElementById("chn1").value=data.in1;
document.getElementById("chn2").value=data.in2;
document.getElementById("chn3").value=data.in3;
document.getElementById("chn4").value=data.in4;
document.getElementById("chn5").value=data.in5;
document.getElementById("chn6").value=data.in6;
document.getElementById("chn7").value=data.in7;
return fetch("/allbyp");
}).then(function(response){
return response.text();
}).then(function(response){
var data = JSON.parse(response);
for(ii in data.byp){
if(data.byp[ii].val) document.getElementById(data.byp[ii].name).style="border-bottom-color:red;";
else document.getElementById(data.byp[ii].name).style="";
}
return fetch("/allfc");
}).then(function(response){
return response.text();
}).then(function(response){
var data = JSON.parse(response);
for(ii in data.fc){
document.getElementById(data.fc[ii].name).innerHTML=data.fc[ii].val;
}
getMVol();
}).catch(function(err){console.log(err);
});
}
function hideAddon(){
document.getElementById('addon_none').style.display = "none";
document.getElementById('addon_a').style.display = "none";
document.getElementById('addon_b').style.display = "none";
//document.getElementById('addon_c').style.display = "none";
document.getElementById('addon_d').style.display = "none";
}
function changeSPDIF(id){
var data={};
data.len=3;
data.i2c=["0x82", "0x01", document.getElementById(id).value];
fetch("/addoncfg",{method:"POST",headers:{"Content-Type": "application/json"},body:JSON.stringify(data)});
}
function openPlugin(){document.getElementById("plugin").style.display = "block";}
let picker = document.getElementById('picker');
picker.addEventListener('change', e => {
var html,fw,css,plugin;
for(let file of Array.from(e.target.files)){
if(file.name=="dark.css")
css = file;
if(file.name=="dsp.fw")
fw = file;
if(file.name=="dsp.html")
html = file;
if(file.name=="plugin.ini")
plugin = file;
}
var prg=document.getElementById('prg');
prg.style.width="5%";
document.getElementById("wait").style.display="block";
fetch("/upload?fname=dark.css",{method:'POST',headers:{},body:css})
.then(function(response){
prg.style.width="25%";
return fetch("/upload?fname=dsp.fw",{method:'POST',headers:{},body:fw});})
.then(function(response){
prg.style.width="50%";
return fetch("/upload?fname=dsp.html",{method:'POST',headers:{},body:html});})
.then(function(response){
prg.style.width="75%";
return fetch("/upload?fname=plugin.ini",{method:'POST',headers:{},body:plugin});})
.then(function(response){
prg.style.width="100%";
return response;})
.then(function(response){
alert("Success! Your plugin has been installed. Please reboot your DSP and reconnect to it.");
document.getElementById("wait").style.display="none";
return response;})
.catch(function(err){alert( "Uploading your plugin failed: "+err);});
});
let preimport = document.getElementById("presetimp");
preimport.addEventListener('change', e => {
let file = e.target.files[0];
var p=0;
fetch("/config").then(function(response){
return response.json();
}).then(function(cfg){
var fname = file.name;
p=cfg.pre;
if(p==0) fname="usrparam.001";
else if(p==1) fname="usrparam.002";
else if(p==2) fname="usrparam.003";
else if(p==3) fname="usrparam.004";
return fetch("/upload?fname="+fname,{method:'POST',headers:{},body:file});
}).then(function(response){alert("Super! Successfully uploaded your preset.");switchPreset(p);
}).catch(function(err){alert( "Uploading your preset failed: "+err);});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment