Added updating for some sliders etc.; some are still remaining
This commit is contained in:
parent
2aee4216d2
commit
18789ca7c4
GPG Key ID:
327233DA85435270
164
simpledemo.html
164
simpledemo.html
@ -192,7 +192,7 @@
|
||||
<hr>
|
||||
<div class='btn-group' role='group' aria-label='Basic playback option (play, pause, next, previous)'>
|
||||
<button type='button' class='btn btn-secondary' onclick="http
|
||||
= new XMLHttpRequest();http.open('GET', '/api/v1/playback/previous');http.send();">
|
||||
= new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/previous');http.send();updateStrings();">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-rewind-circle'
|
||||
viewBox='0 0 16 16'>
|
||||
<path d='M7.729 5.055a.5.5 0 0 0-.52.038l-3.5 2.5a.5.5 0 0 0 0 .814l3.5 2.5A.5.5 0 0 0 8 10.5V8.614l3.21 2.293A.5.5 0 0 0 12 10.5v-5a.5.5 0 0 0-.79-.407L8 7.386V5.5a.5.5 0 0 0-.271-.445'/>
|
||||
@ -200,17 +200,15 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button type='button' class='btn btn-success' onclick="http
|
||||
= new XMLHttpRequest();http.open('GET',
|
||||
'/api/v1/playback/play');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML =
|
||||
'yes';">
|
||||
= new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/play');http.send();updateStrings();">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle'
|
||||
viewBox='0 0 16 16'>
|
||||
<path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'></path>
|
||||
<path d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445'></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button type='button' class='btn btn-success'
|
||||
onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/pause');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML = 'no';\">
|
||||
<button type='button' class='btn btn-success' onclick="http
|
||||
= new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/pause');http.send();updateStrings();">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pause-circle'
|
||||
viewBox='0 0 16 16'>
|
||||
<path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/>
|
||||
@ -218,7 +216,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button type='button' class='btn btn-secondary'
|
||||
onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/next');http.send();">
|
||||
onclick="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/next');http.send();updateStrings();">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'
|
||||
class='bi bi-skip-forward-circle'
|
||||
viewBox='0 0 16 16'>
|
||||
@ -230,18 +228,12 @@
|
||||
<br>
|
||||
<hr>
|
||||
<br><label for='volumeRange' class='form-label'>Volume</label>
|
||||
<input type='range' class='form-range' value='" + String(currentVolume) + "' min='0' max='" + String(maxVolume) + "'
|
||||
id='volumeRange'
|
||||
onchange='value = document.getElementById(\"volumeRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/volume/\" + value);http.send();document.getElementById(\"playbackTable_volumeValue\").innerHTML = value + \"/" + String(maxVolume) + "%\"'>
|
||||
<input type='range' class='form-range' value='0' min='0' max='0'
|
||||
id='updatedLabel_VOLUME_range_bottom'
|
||||
onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/volume/' + this.value);http.send();updateStrings();">
|
||||
<button type='button' id='playbackMuteButton' onclick=
|
||||
"http = new XMLHttpRequest();
|
||||
http.open('GET', '/api/v1/volume/toggle_mute');
|
||||
http.send(); button = document.getElementById('playbackMuteButton');
|
||||
button.classList.contains('btn-outline-danger') ? button.className = 'btn btn-danger' : button.className = 'btn
|
||||
btn-outline-danger';
|
||||
mutedValueHTML = document.getElementById('playbackTable_mutedValue');
|
||||
button.classList.contains('btn-outline-danger') ? mutedValueHTML.innerHTML = 'no' : mutedValueHTML.innerHTML = 'yes'"
|
||||
class='btn btn-danger'> or btn-outline-danger'>
|
||||
"http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/volume/toggle_mute');http.send();updateStrings();"
|
||||
class='btn btn-danger'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute'
|
||||
viewBox='0 0 16 16'>
|
||||
<path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'></path>
|
||||
@ -270,14 +262,14 @@
|
||||
aria-label='Playlist path (must start with a /)' aria-describedby='playlist_playBtn'
|
||||
id='playlist_playPathInput'>
|
||||
<button class='btn btn-success' type='button' id='playlist_playBtn' onclick=
|
||||
"playlistPath
|
||||
= document.getElementById('playlist_playPathInput').value;
|
||||
http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();">
|
||||
"playlistPath = document.getElementById('playlist_playPathInput').value;
|
||||
http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();
|
||||
updateStrings();">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
<!--create playlist api demo -->
|
||||
<!-- Create playlist api demo -->
|
||||
<p>Demo for creating a new playlist containing all the contents of the given folder (on the SD card).</p>
|
||||
<p>The new playlist will be located in the given folder and is named <code>.directory.m3u</code>. This can't be changed.
|
||||
</p>
|
||||
@ -288,9 +280,9 @@
|
||||
aria-label='Folder path (must start with a /)' aria-describedby='playlist_createBtn'
|
||||
id='playlist_createPathInput'>
|
||||
<button class='btn btn-success' type='button' id='playlist_createBtn' onclick=
|
||||
"folderPath
|
||||
= document.getElementById('playlist_createPathInput').value;
|
||||
http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/create?folder_path='+folderPath);http.send();">
|
||||
"folderPath = document.getElementById('playlist_createPathInput').value;
|
||||
http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playlist/create?folder_path='+folderPath);http.send();
|
||||
updateStrings();">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
@ -322,8 +314,8 @@
|
||||
<br>
|
||||
<hr>
|
||||
<label for='balanceRange' class='form-label'>Balance (-16 to 16)</label>
|
||||
<input type='range' class='form-range' value='" + String(balanceLevel+16) + "' min='0' max='32' id='balanceRange'
|
||||
onchange='value = document.getElementById(\"balanceRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/balance/\" + value);http.send(); document.getElementById(\"balanceChangeTable_balanceValue\").innerHTML = value-16;'>
|
||||
<input type='range' class='form-range' value='16' min='0' max='32' id='updatedLabel_BALANCE_range_bottom'
|
||||
onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/balance/' + this.value);http.send();updateStrings();">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -358,18 +350,18 @@
|
||||
<br>
|
||||
<hr>
|
||||
<label for='eqLowRange' class='form-label'>Equalizer for lows (-40dB to 6dB)</label>
|
||||
<input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='eqLowRange'
|
||||
onchange='value = document.getElementById(\"eqLowRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/low/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqLowValue\").innerHTML = value-40 + \"dB\";'>
|
||||
<input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='updatedLabel_EQLOW_range_bottom'
|
||||
onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/low/' + this.value);http.send();updateStrings();">
|
||||
<br>
|
||||
<hr>
|
||||
<br><label for='eqMidRange' class='form-label'>Equalizer for mids (-40dB to 6dB)</label>
|
||||
<input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='eqMidRange'
|
||||
onchange='value = document.getElementById(\"eqMidRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/mid/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqMidValue\").innerHTML = value-40 + \"dB\";'>
|
||||
<input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='updatedLabel_EQMID_range_bottom'
|
||||
onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/mid/' + this.value);http.send();updateStrings();">
|
||||
<br>
|
||||
<hr>
|
||||
<br><label for='eqHighRange' class='form-label'>Equalizer for highs (-40dB to 6dB)</label>
|
||||
<input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='eqHighRange'
|
||||
onchange='value = document.getElementById(\"eqHighRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/high/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqHighValue\").innerHTML = value-40 + \"dB\";'>
|
||||
<input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='updatedLabel_EQHIGH_range_bottom'
|
||||
onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/high/' + this.value);http.send();updateStrings();">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -391,12 +383,12 @@
|
||||
<span class='input-group-text'> -> </span>
|
||||
<input type='text' class='form-control' placeholder='New friendly name' aria-label='New friendly name'
|
||||
aria-describedby='frnameChange_BTN_submitName' id='frnameChange_newNameInput'>
|
||||
<button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick=
|
||||
"newNameInput
|
||||
= document.getElementById('frnameChange_newNameInput'); if(newNameInput.value != ''){ http = new
|
||||
XMLHttpRequest();http.open('GET',
|
||||
'/api/v1/system/name/change?friendly_name='+newNameInput.value);http.send();document.getElementById('frnameChange_oldName').innerHTML=newNameInput.value;document.getElementById('title_frname').innerHTML=newNameInput.value;newNameInput.value='';
|
||||
}\">
|
||||
<button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick="
|
||||
newName=document.getElementById('frnameChange_newNameInput').value;oldName=document.getElementById('updatedLabel_FRNAME_oldinputtext').innerHTML;
|
||||
if(oldName != newName) {
|
||||
http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/system/name/change?friendly_name=' + newName);http.send();
|
||||
updateStrings();
|
||||
}">
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
@ -420,7 +412,7 @@
|
||||
<p>After doing this, you have to go down to the restart collapsible. There, restart the NetSpeaker and it should connect
|
||||
to the configured WiFi.</p>
|
||||
<p>If anything is wrong (either SSID or PSK wrong/typo, or the wifi's not available), the NetSpeaker opens an HotSpot
|
||||
with the SSID <code>" + apSSID + "</code> and the PSK <code>" + apPSK + "</code>! </p>
|
||||
with the SSID <code></code> and the PSK <code></code>! </p>
|
||||
<div class='input-group mb-3'>
|
||||
<span class='input-group-text'>SSID</span>
|
||||
<input type='text' class='form-control' placeholder='Type in a new SSID here (optional)'
|
||||
@ -574,17 +566,22 @@
|
||||
const rs_languageLabel1 = document.getElementById("updatedLabel_RS_LANGUAGE_table_top");
|
||||
volumeLabel1 = document.getElementById('updatedLabel_VOLUME_table_top');
|
||||
volumeLabel2 = document.getElementById('updatedLabel_VOLUME_table_bottom');
|
||||
volumeRange1 = document.getElementById('updatedLabel_VOLUME_range_bottom');
|
||||
mutedLabel1 = document.getElementById('updatedLabel_MUTED_table_top');
|
||||
mutedLabel2 = document.getElementById('updatedLabel_MUTED_table_bottom');
|
||||
eqLowLabel1 = document.getElementById('updatedLabel_EQLOW_table_top');
|
||||
eqLowLabel2 = document.getElementById('updatedLabel_EQLOW_table_bottom');
|
||||
eqLowRange1 = document.getElementById('updatedLabel_EQLOW_range_bottom');
|
||||
eqMidLabel1 = document.getElementById('updatedLabel_EQMID_table_top');
|
||||
eqMidLabel2 = document.getElementById('updatedLabel_EQMID_table_bottom');
|
||||
eqMidRange1 = document.getElementById('updatedLabel_EQMID_range_bottom');
|
||||
eqHighLabel1 = document.getElementById('updatedLabel_EQHIGH_table_top');
|
||||
eqHighLabel2 = document.getElementById('updatedLabel_EQHIGH_table_bottom');
|
||||
eqHighRange1 = document.getElementById('updatedLabel_EQHIGH_range_bottom');
|
||||
balanceLabel1 = document.getElementById('updatedLabel_BALANCE_table_top');
|
||||
balanceLabel2 = document.getElementById('updatedLabel_BALANCE_table_bottom');
|
||||
|
||||
balanceRange1 = document.getElementById('updatedLabel_BALANCE_range_bottom');
|
||||
|
||||
|
||||
function updateStrings() {
|
||||
apiBase = "http://" + document.cookie;
|
||||
@ -695,6 +692,8 @@
|
||||
volumeLabel2.innerHTML = volumeValue + "/" + maxVolumeValue;
|
||||
mutedLabel1.innerHTML = mutedValue ? "yes" : "no";
|
||||
mutedLabel2.innerHTML = mutedValue ? "yes" : "no";
|
||||
volumeRange1.max = maxVolumeValue;
|
||||
volumeRange1.value = volumeValue;
|
||||
}
|
||||
}
|
||||
volumeRequest.open("GET", apiBase + volumeApiEndpoint, true);
|
||||
@ -708,12 +707,15 @@
|
||||
var eqLowValue = JSON.parse(this.responseText).equalizer_low;
|
||||
var eqMidValue = JSON.parse(this.responseText).equalizer_mid;
|
||||
var eqHighValue = JSON.parse(this.responseText).equalizer_high;
|
||||
eqLowLabel1.innerHTML = eqLowValue;
|
||||
eqLowLabel2.innerHTML = eqLowValue;
|
||||
eqMidLabel1.innerHTML = eqMidValue;
|
||||
eqMidLabel2.innerHTML = eqMidValue;
|
||||
eqHighLabel1.innerHTML = eqHighValue;
|
||||
eqHighLabel2.innerHTML = eqHighValue;
|
||||
eqLowLabel1.innerHTML = eqLowValue + "dB";
|
||||
eqLowLabel2.innerHTML = eqLowValue + "dB";
|
||||
eqLowRange1.value = eqLowValue + 40;
|
||||
eqMidLabel1.innerHTML = eqMidValue + "dB";
|
||||
eqMidLabel2.innerHTML = eqMidValue + "dB";
|
||||
eqMidRange1.value = eqMidValue + 40;
|
||||
eqHighLabel1.innerHTML = eqHighValue + "dB";
|
||||
eqHighLabel2.innerHTML = eqHighValue + "dB";
|
||||
eqHighRange1.value = eqHighValue + 40;
|
||||
}
|
||||
}
|
||||
eqRequest.open("GET", apiBase + eqApiEndpoint, true);
|
||||
@ -727,6 +729,7 @@
|
||||
var balanceValue = JSON.parse(this.responseText).balance;
|
||||
balanceLabel1.innerHTML = balanceValue;
|
||||
balanceLabel2.innerHTML = balanceValue;
|
||||
balanceRange1.value = balanceValue + 16; // as the slider goes from 0 to 32 (as the API accepts it)
|
||||
}
|
||||
}
|
||||
balanceRequest.open("GET", apiBase + balanceApiEndpoint, true);
|
||||
@ -740,45 +743,46 @@
|
||||
setTimeout(updateStrings, 1000); // to make user see the epic placeholder glow effect of the bootstrap library
|
||||
setInterval(updateStrings, 10000);
|
||||
}
|
||||
|
||||
if (document.cookie == "" || !isValidIP(document.cookie)) {
|
||||
var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
|
||||
selectIPModal.show();
|
||||
window.onload = function(e) {
|
||||
if (document.cookie == "" || !isValidIP(document.cookie)) {
|
||||
var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
|
||||
selectIPModal.show();
|
||||
|
||||
const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
|
||||
const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
|
||||
|
||||
function configButtonEventListener(hideModalOnSuccess) {
|
||||
var ipAddressEntered = document.getElementById('ipAdressInput').value;
|
||||
if(isValidIP(ipAddressEntered)) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
|
||||
document.cookie = ipAddressEntered;
|
||||
setupSite()
|
||||
setTimeout(function(){
|
||||
if(hideModalOnSuccess) selectIPModal.hide();
|
||||
}, 500);
|
||||
} else if (this.readyState != 4) {
|
||||
// just do nothing, wait!
|
||||
} else {
|
||||
appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
|
||||
}
|
||||
};
|
||||
request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
|
||||
request.send()
|
||||
} else {
|
||||
appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
|
||||
function configButtonEventListener(hideModalOnSuccess) {
|
||||
var ipAddressEntered = document.getElementById('ipAdressInput').value;
|
||||
if(isValidIP(ipAddressEntered)) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
|
||||
document.cookie = ipAddressEntered;
|
||||
setupSite()
|
||||
setTimeout(function(){
|
||||
if(hideModalOnSuccess) selectIPModal.hide();
|
||||
}, 500);
|
||||
} else if (this.readyState != 4) {
|
||||
// just do nothing, wait!
|
||||
} else {
|
||||
appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
|
||||
}
|
||||
};
|
||||
request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
|
||||
request.send()
|
||||
} else {
|
||||
appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
|
||||
ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
|
||||
const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
|
||||
ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
|
||||
|
||||
const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
|
||||
ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
|
||||
const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
|
||||
ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
|
||||
|
||||
} else if (isValidIP(document.cookie)) setupSite();
|
||||
} else if (isValidIP(document.cookie)) setupSite();
|
||||
} // end of onload function
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user