Implemented the other API get functions
This commit is contained in:
parent
3fb4f3df69
commit
0894e053da
GPG Key ID:
327233DA85435270
240
simpledemo.html
240
simpledemo.html
@ -14,7 +14,8 @@
|
||||
<p>Welcome to</p>
|
||||
<h1 id='updatedLabel_FRNAME_title'><span class="placeholder col-3"></span></h1>
|
||||
<p id="title_onIP"><span class="placeholder col-1"></span></p>
|
||||
<p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem' id="updatedLabel_VERSION_title"><span class="placeholder col-2"></span></p>
|
||||
<p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem' id="updatedLabel_VERSION_title"><span
|
||||
class="placeholder col-2"></span></p>
|
||||
|
||||
<hr style='margin: 3em 0em;'>
|
||||
|
||||
@ -35,73 +36,79 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Playing</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_PLAYING_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Volume</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_VOLUME_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Muted</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_MUTED_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer Low</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td></tr>
|
||||
<td class='text-end' id="updatedLabel_EQLOW_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer Mid</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td></tr>
|
||||
<td class='text-end' id="updatedLabel_EQMID_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer High</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_EQHIGH_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Balance (range -16 | +16)</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_BALANCE_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Path to playlist</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_PLPATH_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Index in playlist (starting from 0)</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_PLIDX_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource path</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_PATH_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource type</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_TYPE_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource title</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_TITLE_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource album</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_ALBUM_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource artist</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_ARTIST_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource track number</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_TRACKNR_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource year</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_YEAR_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource genre</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_GENRE_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource copyright</td>
|
||||
<td class='text-end' id="updatedLabel_RS_COPYRIGHT_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource language (for TTS)</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id="updatedLabel_RS_LANGUAGE_table_top"><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -153,7 +160,8 @@
|
||||
<!---- API FUNCTIONS ACCODRION ---->
|
||||
<!---------------------------------->
|
||||
<div class='accordion text-start' id='accordion'>
|
||||
<!--PLAYBACK Collapsible -->
|
||||
|
||||
<!-- PLAYBACK Collapsible -->
|
||||
<div class='accordion-item'>
|
||||
<h2 class='accordion-header'>
|
||||
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
|
||||
@ -169,15 +177,15 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Playing</td>
|
||||
<td class='text-end' id='playbackTable_audioPlayingValue'><span class="placeholder col-4"></span></td>
|
||||
<td class='text-end' id='updatedLabel_PLAYING_table_bottom'><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Volume</td>
|
||||
<td class='text-end' id='playbackTable_volumeValue'><span class="placeholder col-4"></span></td>
|
||||
<td class='text-end' id='updatedLabel_VOLUME_table_bottom'><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Muted</td>
|
||||
<td class='text-end' id='playbackTable_mutedValue'><span class="placeholder col-4"></span></td>
|
||||
<td class='text-end' id='updatedLabel_MUTED_table_bottom'><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -307,7 +315,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Balance (range -16 | +16)</td>
|
||||
<td class='text-end' id='balanceChangeTable_balanceValue'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id='updatedLabel_BALANCE_table_bottom'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -335,15 +343,15 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Equalizer Low (-40dB to 6dB)</td>
|
||||
<td class='text-end' id='eqChangeTable_eqLowValue'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id='updatedLabel_EQLOW_table_bottom'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer Mid (-40dB to 6dB)</td>
|
||||
<td class='text-end' id='eqChangeTable_eqMidValue'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id='updatedLabel_EQMID_table_bottom'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer High (-40dB to 6dB)</td>
|
||||
<td class='text-end' id='eqChangeTable_eqHighValue'><span class="placeholder col-12"></span></td>
|
||||
<td class='text-end' id='updatedLabel_EQHIGH_table_bottom'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -389,7 +397,8 @@
|
||||
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='';
|
||||
}\">
|
||||
Change</button>
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -505,10 +514,10 @@
|
||||
<div class="text-start modal-body">
|
||||
<p>Please give the IP adress of you NetSpeaker here, so that this site can access its API.</p>
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">http://</span>
|
||||
<input type="text" class="form-control" id="ipAdressInput">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">http://</span>
|
||||
<input type="text" class="form-control" id="ipAdressInput">
|
||||
</div>
|
||||
</div>
|
||||
<div id="configWorkingAlertPlaceholder"></div>
|
||||
</div>
|
||||
@ -541,18 +550,55 @@
|
||||
alertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
versionLabel1 = document.getElementById('updatedLabel_VERSION_title');
|
||||
versionLabel2 = document.getElementById('updatedLabel_VERSION_table');
|
||||
frnameLabel1 = document.getElementById('updatedLabel_FRNAME_title');
|
||||
frnameLabel2 = document.getElementById('updatedLabel_FRNAME_table');
|
||||
frnameLabel3 = document.getElementById('updatedLabel_FRNAME_oldinputtext');
|
||||
restoreStateLabel1 = document.getElementById('updatedLabel_RESTORESTATE_table')
|
||||
restorePlayingStateLabel1 = document.getElementById('updatedLabel_RESTOREPLAYING_table')
|
||||
wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
|
||||
const playingLabel1 = document.getElementById("updatedLabel_PLAYING_table_top");
|
||||
const playingLabel2 = document.getElementById("updatedLabel_PLAYING_table_bottom");
|
||||
const rs_plpathLabel1 = document.getElementById("updatedLabel_RS_PLPATH_table_top");
|
||||
const rs_plidxLabel1 = document.getElementById("updatedLabel_RS_PLIDX_table_top");
|
||||
const rs_pathLabel1 = document.getElementById("updatedLabel_RS_PATH_table_top");
|
||||
const rs_typeLabel1 = document.getElementById("updatedLabel_RS_TYPE_table_top");
|
||||
const rs_titleLabel1 = document.getElementById("updatedLabel_RS_TITLE_table_top");
|
||||
const rs_albumLabel1 = document.getElementById("updatedLabel_RS_ALBUM_table_top");
|
||||
const rs_artistLabel1 = document.getElementById("updatedLabel_RS_ARTIST_table_top");
|
||||
const rs_tracknrLabel1 = document.getElementById("updatedLabel_RS_TRACKNR_table_top");
|
||||
const rs_yearLabel1 = document.getElementById("updatedLabel_RS_YEAR_table_top");
|
||||
const rs_genreLabel1 = document.getElementById("updatedLabel_RS_GENRE_table_top");
|
||||
const rs_copyrightLabel1 = document.getElementById("updatedLabel_RS_COPYRIGHT_table_top");
|
||||
const rs_languageLabel1 = document.getElementById("updatedLabel_RS_LANGUAGE_table_top");
|
||||
volumeLabel1 = document.getElementById('updatedLabel_VOLUME_table_top');
|
||||
volumeLabel2 = document.getElementById('updatedLabel_VOLUME_table_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');
|
||||
eqMidLabel1 = document.getElementById('updatedLabel_EQMID_table_top');
|
||||
eqMidLabel2 = document.getElementById('updatedLabel_EQMID_table_bottom');
|
||||
eqHighLabel1 = document.getElementById('updatedLabel_EQHIGH_table_top');
|
||||
eqHighLabel2 = document.getElementById('updatedLabel_EQHIGH_table_bottom');
|
||||
balanceLabel1 = document.getElementById('updatedLabel_BALANCE_table_top');
|
||||
balanceLabel2 = document.getElementById('updatedLabel_BALANCE_table_bottom');
|
||||
|
||||
|
||||
function updateStrings() {
|
||||
apiBase = "http://" + document.cookie;
|
||||
versionApiEndpoint = "/api/v1/system/version";
|
||||
frnameApiEndpoint = "/api/v1/system/name";
|
||||
restoreStateApiEndpoint = "/api/v1/system/restore_state/get";
|
||||
apiBase = "http://" + document.cookie;
|
||||
versionApiEndpoint = "/api/v1/system/version";
|
||||
frnameApiEndpoint = "/api/v1/system/name";
|
||||
restoreStateApiEndpoint = "/api/v1/system/restore_state/get";
|
||||
restorePlayingStateApiEndpoint = "/api/v1/system/restore_playing/get";
|
||||
wifiApiEndpoint = "/api/v1/system/wifi/get_ssid";
|
||||
wifiApiEndpoint = "/api/v1/system/wifi/get_ssid";
|
||||
playbackInfoApiEndpoint = "/api/v1/playback/info";
|
||||
volumeApiEndpoint = "/api/v1/volume/get";
|
||||
eqApiEndpoint = "/api/v1/eq/get";
|
||||
balanceApiEndpoint = "/api/v1/balance/get";
|
||||
|
||||
/* Version string parser */
|
||||
versionLabel1 = document.getElementById('updatedLabel_VERSION_title');
|
||||
versionLabel2 = document.getElementById('updatedLabel_VERSION_table');
|
||||
|
||||
var versionRequest = new XMLHttpRequest();
|
||||
versionRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
@ -566,10 +612,6 @@
|
||||
|
||||
|
||||
/* friendly name parser */
|
||||
frnameLabel1 = document.getElementById('updatedLabel_FRNAME_title');
|
||||
frnameLabel2 = document.getElementById('updatedLabel_FRNAME_table');
|
||||
frnameLabel3 = document.getElementById('updatedLabel_FRNAME_oldinputtext');
|
||||
|
||||
var frnameRequest = new XMLHttpRequest();
|
||||
frnameRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
@ -584,9 +626,6 @@
|
||||
|
||||
|
||||
/* Save & Restore parser */
|
||||
restoreStateLabel1 = document.getElementById('updatedLabel_RESTORESTATE_table')
|
||||
restorePlayingStateLabel1 = document.getElementById('updatedLabel_RESTOREPLAYING_table')
|
||||
|
||||
var restoreStateRequest = new XMLHttpRequest();
|
||||
restoreStateRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
@ -609,8 +648,6 @@
|
||||
|
||||
|
||||
/* WiFi SSID parser */
|
||||
wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
|
||||
|
||||
var wifiRequest = new XMLHttpRequest();
|
||||
wifiRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
@ -622,12 +659,78 @@
|
||||
wifiRequest.send();
|
||||
|
||||
/* Playback info parser */
|
||||
var playbackInfoRequest = new XMLHttpRequest();
|
||||
playbackInfoRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var playbackInfoResponse = JSON.parse(this.responseText);
|
||||
|
||||
playingLabel1.innerHTML = playbackInfoResponse.state == "playing" ? "yes" : "no";
|
||||
playingLabel2.innerHTML = playbackInfoResponse.state == "playing" ? "yes" : "no";
|
||||
rs_plpathLabel1.innerHTML = playbackInfoResponse.resource_playlist_path;
|
||||
rs_plidxLabel1.innerHTML = playbackInfoResponse.resource_playlist_index;
|
||||
rs_pathLabel1.innerHTML = playbackInfoResponse.resource_path;
|
||||
rs_typeLabel1.innerHTML = playbackInfoResponse.resource_type;
|
||||
rs_titleLabel1.innerHTML = playbackInfoResponse.resource_title;
|
||||
rs_albumLabel1.innerHTML = playbackInfoResponse.resource_album;
|
||||
rs_artistLabel1.innerHTML = playbackInfoResponse.resource_artist;
|
||||
rs_tracknrLabel1.innerHTML = playbackInfoResponse.resource_track;
|
||||
rs_yearLabel1.innerHTML = playbackInfoResponse.resource_year;
|
||||
rs_genreLabel1.innerHTML = playbackInfoResponse.resource_genre;
|
||||
rs_copyrightLabel1.innerHTML = playbackInfoResponse.resource_copyright;
|
||||
rs_languageLabel1.innerHTML = playbackInfoResponse.resource_tts_language;
|
||||
}
|
||||
}
|
||||
playbackInfoRequest.open("GET", apiBase + playbackInfoApiEndpoint, true);
|
||||
playbackInfoRequest.send();
|
||||
|
||||
|
||||
/* Volume+Muted parser */
|
||||
var volumeRequest = new XMLHttpRequest();
|
||||
volumeRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var volumeValue = JSON.parse(this.responseText).volume;
|
||||
var maxVolumeValue = JSON.parse(this.responseText).volume_max;
|
||||
var mutedValue = JSON.parse(this.responseText).muted;
|
||||
volumeLabel1.innerHTML = volumeValue + "/" + maxVolumeValue;
|
||||
volumeLabel2.innerHTML = volumeValue + "/" + maxVolumeValue;
|
||||
mutedLabel1.innerHTML = mutedValue ? "yes" : "no";
|
||||
mutedLabel2.innerHTML = mutedValue ? "yes" : "no";
|
||||
}
|
||||
}
|
||||
volumeRequest.open("GET", apiBase + volumeApiEndpoint, true);
|
||||
volumeRequest.send();
|
||||
|
||||
/* Volume parser */
|
||||
|
||||
/* Equalizer parser */
|
||||
var eqRequest = new XMLHttpRequest();
|
||||
eqRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
eqRequest.open("GET", apiBase + eqApiEndpoint, true);
|
||||
eqRequest.send();
|
||||
|
||||
|
||||
/* Balance parser */
|
||||
var balanceRequest = new XMLHttpRequest();
|
||||
balanceRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var balanceValue = JSON.parse(this.responseText).balance;
|
||||
balanceLabel1.innerHTML = balanceValue;
|
||||
balanceLabel2.innerHTML = balanceValue;
|
||||
}
|
||||
}
|
||||
balanceRequest.open("GET", apiBase + balanceApiEndpoint, true);
|
||||
balanceRequest.send();
|
||||
|
||||
}
|
||||
|
||||
@ -678,4 +781,39 @@
|
||||
} else if (isValidIP(document.cookie)) setupSite();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
|
||||
<!-- An uncomplete list of XML IDs used in this piece of HTML:
|
||||
updatedLabel_PLAYING_table_top
|
||||
updatedLabel_PLAYING_table_bottom
|
||||
|
||||
updatedLabel_VOLUME_table_top
|
||||
updatedLabel_VOLUME_table_bottom
|
||||
|
||||
updatedLabel_MUTED_table_top
|
||||
updatedLabel_MUTED_table_bottom
|
||||
|
||||
updatedLabel_BALANCE_table_top
|
||||
updatedLabel_BALANCE_table_bottom
|
||||
|
||||
updatedLabel_EQLOW_table_top
|
||||
updatedLabel_EQLOW_table_bottom
|
||||
updatedLabel_EQMID_table_top
|
||||
updatedLabel_EQMID_table_bottom
|
||||
updatedLabel_EQHIGH_table_top
|
||||
updatedLabel_EQHIGH_table_bottom
|
||||
|
||||
updatedLabel_RS_PLPATH_table_top
|
||||
updatedLabel_RS_PLIDX_table_top
|
||||
updatedLabel_RS_PATH_table_top
|
||||
updatedLabel_RS_TYPE_table_top
|
||||
updatedLabel_RS_TITLE_table_top
|
||||
updatedLabel_RS_ALBUM_table_top
|
||||
updatedLabel_RS_ARTIST_table_top
|
||||
updatedLabel_RS_TRACKNR_table_top
|
||||
updatedLabel_RS_YEAR_table_top
|
||||
updatedLabel_RS_GENRE_table_top
|
||||
updatedLabel_RS_COPYRIGHT_table_top
|
||||
updatedLabel_RS_LANGUAGE_table_top
|
||||
-->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user