mirror of
https://github.com/sle118/squeezelite-esp32.git
synced 2025-12-09 21:17:18 +03:00
initial work on a wifi/http configuration module
This commit is contained in:
sle118
454
components/wifi-manager/code.js
Normal file
454
components/wifi-manager/code.js
Normal file
@@ -0,0 +1,454 @@
|
||||
// First, checks if it isn't implemented yet.
|
||||
if (!String.prototype.format) {
|
||||
String.prototype.format = function() {
|
||||
var args = arguments;
|
||||
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||
return typeof args[number] != 'undefined'
|
||||
? args[number]
|
||||
: match
|
||||
;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
var apList = null;
|
||||
var selectedSSID = "";
|
||||
var refreshAPInterval = null;
|
||||
var checkStatusInterval = null;
|
||||
var checkConfigInterval = null;
|
||||
|
||||
var StatusIntervalActive = false;
|
||||
var ConfigIntervalActive = false;
|
||||
var RefreshAPIIntervalActive = false;
|
||||
|
||||
|
||||
function stopCheckStatusInterval(){
|
||||
if(checkStatusInterval != null){
|
||||
clearTimeout(checkStatusInterval);
|
||||
checkStatusInterval = null;
|
||||
}
|
||||
StatusIntervalActive = false;
|
||||
}
|
||||
function stopCheckConfigInterval(){
|
||||
if(checkConfigInterval != null){
|
||||
clearTimeout(checkConfigInterval);
|
||||
checkConfigInterval = null;
|
||||
}
|
||||
ConfigIntervalActive=false;
|
||||
}
|
||||
|
||||
function stopRefreshAPInterval(){
|
||||
|
||||
if(refreshAPInterval != null){
|
||||
clearTimeout(refreshAPInterval);
|
||||
refreshAPInterval = null;
|
||||
}
|
||||
RefreshAPIIntervalActive = false;
|
||||
}
|
||||
|
||||
|
||||
function startCheckStatusInterval(){
|
||||
StatusIntervalActive = true;
|
||||
checkStatusInterval = setTimeout(checkStatus, 950);
|
||||
}
|
||||
function startCheckConfigInterval(){
|
||||
ConfigIntervalActive = true;
|
||||
checkConfigInterval = setTimeout(checkConfig, 950);
|
||||
}
|
||||
|
||||
function startRefreshAPInterval(){
|
||||
RefreshAPIIntervalActive = true;
|
||||
refreshAPInterval = setTimeout(refreshAP, 2800);
|
||||
}
|
||||
|
||||
|
||||
function RepeatCheckStatusInterval(){
|
||||
if(StatusIntervalActive)
|
||||
startCheckStatusInterval();
|
||||
}
|
||||
|
||||
function RepeatCheckConfigInterval(){
|
||||
if(ConfigIntervalActive)
|
||||
startCheckConfigInterval();
|
||||
}
|
||||
|
||||
function RepeatRefreshAPInterval(){
|
||||
if(RefreshAPIIntervalActive)
|
||||
startRefreshAPInterval()
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
|
||||
$("#wifi-status").on("click", ".ape", function() {
|
||||
$( "#wifi" ).slideUp( "fast", function() {});
|
||||
$( "#connect-details" ).slideDown( "fast", function() {});
|
||||
});
|
||||
|
||||
$("#manual_add").on("click", ".ape", function() {
|
||||
selectedSSID = $(this).text();
|
||||
$( "#ssid-pwd" ).text(selectedSSID);
|
||||
$( "#wifi" ).slideUp( "fast", function() {});
|
||||
$( "#connect_manual" ).slideDown( "fast", function() {});
|
||||
$( "#connect" ).slideUp( "fast", function() {});
|
||||
|
||||
//update wait screen
|
||||
$( "#loading" ).show();
|
||||
$( "#connect-success" ).hide();
|
||||
$( "#connect-fail" ).hide();
|
||||
});
|
||||
|
||||
$("#wifi-list").on("click", ".ape", function() {
|
||||
selectedSSID = $(this).text();
|
||||
$( "#ssid-pwd" ).text(selectedSSID);
|
||||
$( "#wifi" ).slideUp( "fast", function() {});
|
||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||
$( "#connect" ).slideDown( "fast", function() {});
|
||||
|
||||
//update wait screen
|
||||
$( "#loading" ).show();
|
||||
$( "#connect-success" ).hide();
|
||||
$( "#connect-fail" ).hide();
|
||||
});
|
||||
|
||||
$("#cancel").on("click", function() {
|
||||
selectedSSID = "";
|
||||
$( "#connect" ).slideUp( "fast", function() {});
|
||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||
$( "#wifi" ).slideDown( "fast", function() {});
|
||||
});
|
||||
|
||||
$("#manual_cancel").on("click", function() {
|
||||
selectedSSID = "";
|
||||
$( "#connect" ).slideUp( "fast", function() {});
|
||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||
$( "#wifi" ).slideDown( "fast", function() {});
|
||||
});
|
||||
|
||||
$("#join").on("click", function() {
|
||||
performConnect();
|
||||
});
|
||||
|
||||
$("#manual_join").on("click", function() {
|
||||
performConnect($(this).data('connect'));
|
||||
});
|
||||
|
||||
$("#ok-details").on("click", function() {
|
||||
$( "#connect-details" ).slideUp( "fast", function() {});
|
||||
$( "#wifi" ).slideDown( "fast", function() {});
|
||||
|
||||
});
|
||||
$("#update").on("click", function() {
|
||||
|
||||
performUpdate();
|
||||
});
|
||||
$("#factory").on("click", function() {
|
||||
|
||||
performFactory();
|
||||
});
|
||||
|
||||
$("#ok-credits").on("click", function() {
|
||||
$( "#credits" ).slideUp( "fast", function() {});
|
||||
$( "#app" ).slideDown( "fast", function() {});
|
||||
|
||||
});
|
||||
|
||||
$("#acredits").on("click", function(event) {
|
||||
event.preventDefault();
|
||||
$( "#app" ).slideUp( "fast", function() {});
|
||||
$( "#credits" ).slideDown( "fast", function() {});
|
||||
});
|
||||
|
||||
$("#ok-connect").on("click", function() {
|
||||
$( "#connect-wait" ).slideUp( "fast", function() {});
|
||||
$( "#wifi" ).slideDown( "fast", function() {});
|
||||
});
|
||||
|
||||
$("#disconnect").on("click", function() {
|
||||
$( "#connect-details-wrap" ).addClass('blur');
|
||||
$( "#diag-disconnect" ).slideDown( "fast", function() {});
|
||||
});
|
||||
|
||||
$("#no-disconnect").on("click", function() {
|
||||
$( "#diag-disconnect" ).slideUp( "fast", function() {});
|
||||
$( "#connect-details-wrap" ).removeClass('blur');
|
||||
});
|
||||
|
||||
$("#yes-disconnect").on("click", function() {
|
||||
|
||||
stopCheckStatusInterval();
|
||||
selectedSSID = "";
|
||||
|
||||
$( "#diag-disconnect" ).slideUp( "fast", function() {});
|
||||
$( "#connect-details-wrap" ).removeClass('blur');
|
||||
|
||||
$.ajax({
|
||||
url: '/connect.json',
|
||||
dataType: 'json',
|
||||
method: 'DELETE',
|
||||
cache: false,
|
||||
data: { 'timestamp': Date.now()}
|
||||
});
|
||||
|
||||
startCheckStatusInterval();
|
||||
|
||||
$( "#connect-details" ).slideUp( "fast", function() {});
|
||||
$( "#wifi" ).slideDown( "fast", function() {})
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//first time the page loads: attempt get the connection status and start the wifi scan
|
||||
refreshAP();
|
||||
startCheckStatusInterval();
|
||||
startRefreshAPInterval();
|
||||
startCheckConfigInterval();
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
function performUpdate(){
|
||||
autoexec1 = $("#autoexec1").val();
|
||||
//reset connection
|
||||
//
|
||||
// $( "#ok-connect" ).prop("disabled",true);
|
||||
// $( "#ssid-wait" ).text(selectedSSID);
|
||||
// $( "#connect" ).slideUp( "fast", function() {});
|
||||
// $( "#connect_manual" ).slideUp( "fast", function() {});
|
||||
// $( "#connect-wait" ).slideDown( "fast", function() {});
|
||||
// // todo: should we update the UI here?
|
||||
|
||||
$.ajax({
|
||||
url: '/config.json',
|
||||
dataType: 'json',
|
||||
method: 'POST',
|
||||
cache: false,
|
||||
headers: { 'X-Custom-autoexec1': autoexec1 },
|
||||
data: { 'timestamp': Date.now()}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function performFactory(){
|
||||
|
||||
// $( "#ok-connect" ).prop("disabled",true);
|
||||
// $( "#ssid-wait" ).text(selectedSSID);
|
||||
// $( "#connect" ).slideUp( "fast", function() {});
|
||||
// $( "#connect_manual" ).slideUp( "fast", function() {});
|
||||
// $( "#connect-wait" ).slideDown( "fast", function() {});
|
||||
// // todo: should we update the UI here?
|
||||
|
||||
$.ajax({
|
||||
url: '/factory.json',
|
||||
dataType: 'json',
|
||||
method: 'POST',
|
||||
cache: false,
|
||||
data: { 'timestamp': Date.now()}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function performConnect(conntype){
|
||||
|
||||
//stop the status refresh. This prevents a race condition where a status
|
||||
//request would be refreshed with wrong ip info from a previous connection
|
||||
//and the request would automatically shows as succesful.
|
||||
stopCheckStatusInterval();
|
||||
|
||||
//stop refreshing wifi list
|
||||
stopRefreshAPInterval();
|
||||
|
||||
var pwd;
|
||||
if (conntype == 'manual') {
|
||||
//Grab the manual SSID and PWD
|
||||
selectedSSID=$('#manual_ssid').val();
|
||||
pwd = $("#manual_pwd").val();
|
||||
}else{
|
||||
pwd = $("#pwd").val();
|
||||
}
|
||||
//reset connection
|
||||
$( "#loading" ).show();
|
||||
$( "#connect-success" ).hide();
|
||||
$( "#connect-fail" ).hide();
|
||||
|
||||
$( "#ok-connect" ).prop("disabled",true);
|
||||
$( "#ssid-wait" ).text(selectedSSID);
|
||||
$( "#connect" ).slideUp( "fast", function() {});
|
||||
$( "#connect_manual" ).slideUp( "fast", function() {});
|
||||
$( "#connect-wait" ).slideDown( "fast", function() {});
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: '/connect.json',
|
||||
dataType: 'json',
|
||||
method: 'POST',
|
||||
cache: false,
|
||||
headers: { 'X-Custom-ssid': selectedSSID, 'X-Custom-pwd': pwd },
|
||||
data: { 'timestamp': Date.now()}
|
||||
});
|
||||
|
||||
|
||||
//now we can re-set the intervals regardless of result
|
||||
startCheckStatusInterval();
|
||||
startRefreshAPInterval();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function rssiToIcon(rssi){
|
||||
if(rssi >= -60){
|
||||
return 'w0';
|
||||
}
|
||||
else if(rssi >= -67){
|
||||
return 'w1';
|
||||
}
|
||||
else if(rssi >= -75){
|
||||
return 'w2';
|
||||
}
|
||||
else{
|
||||
return 'w3';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function refreshAP(){
|
||||
$.getJSON( "/ap.json", function( data ) {
|
||||
if(data.length > 0){
|
||||
//sort by signal strength
|
||||
data.sort(function (a, b) {
|
||||
var x = a["rssi"]; var y = b["rssi"];
|
||||
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
|
||||
});
|
||||
apList = data;
|
||||
refreshAPHTML(apList);
|
||||
|
||||
}
|
||||
});
|
||||
RepeatRefreshAPInterval();
|
||||
|
||||
}
|
||||
|
||||
function refreshAPHTML(data){
|
||||
var h = "";
|
||||
data.forEach(function(e, idx, array) {
|
||||
h += '<div class="ape{0}"><div class="{1}"><div class="{2}">{3}</div></div></div>'.format(idx === array.length - 1?'':' brdb', rssiToIcon(e.rssi), e.auth==0?'':'pw',e.ssid);
|
||||
h += "\n";
|
||||
});
|
||||
|
||||
$( "#wifi-list" ).html(h)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function checkStatus(){
|
||||
$.getJSON( "/status.json", function( data ) {
|
||||
if(data.hasOwnProperty('autoexec1') && data['autoexec1'] != ""){
|
||||
$("#autoexec1_current").text(data["autoexec1"]);
|
||||
}
|
||||
if(data.hasOwnProperty('ssid') && data['ssid'] != ""){
|
||||
if(data["ssid"] === selectedSSID){
|
||||
//that's a connection attempt
|
||||
if(data["urc"] === 0){
|
||||
//got connection
|
||||
$("#connected-to span").text(data["ssid"]);
|
||||
$("#connect-details h1").text(data["ssid"]);
|
||||
$("#ip").text(data["ip"]);
|
||||
$("#netmask").text(data["netmask"]);
|
||||
$("#gw").text(data["gw"]);
|
||||
$("#wifi-status").slideDown( "fast", function() {});
|
||||
|
||||
//unlock the wait screen if needed
|
||||
$( "#ok-connect" ).prop("disabled",false);
|
||||
|
||||
//update wait screen
|
||||
$( "#loading" ).hide();
|
||||
$( "#connect-success" ).show();
|
||||
$( "#connect-fail" ).hide();
|
||||
}
|
||||
else if(data["urc"] === 1){
|
||||
//failed attempt
|
||||
$("#connected-to span").text('');
|
||||
$("#connect-details h1").text('');
|
||||
$("#ip").text('0.0.0.0');
|
||||
$("#netmask").text('0.0.0.0');
|
||||
$("#gw").text('0.0.0.0');
|
||||
|
||||
//don't show any connection
|
||||
$("#wifi-status").slideUp( "fast", function() {});
|
||||
|
||||
//unlock the wait screen
|
||||
$( "#ok-connect" ).prop("disabled",false);
|
||||
|
||||
//update wait screen
|
||||
$( "#loading" ).hide();
|
||||
$( "#connect-fail" ).show();
|
||||
$( "#connect-success" ).hide();
|
||||
}
|
||||
}
|
||||
else if(data.hasOwnProperty('urc') && data['urc'] === 0){
|
||||
//ESP32 is already connected to a wifi without having the user do anything
|
||||
if( !($("#wifi-status").is(":visible")) ){
|
||||
$("#connected-to span").text(data["ssid"]);
|
||||
$("#connect-details h1").text(data["ssid"]);
|
||||
$("#ip").text(data["ip"]);
|
||||
$("#netmask").text(data["netmask"]);
|
||||
$("#gw").text(data["gw"]);
|
||||
$("#wifi-status").slideDown( "fast", function() {});
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(data.hasOwnProperty('urc') && data['urc'] === 2){
|
||||
//that's a manual disconnect
|
||||
if($("#wifi-status").is(":visible")){
|
||||
$("#wifi-status").slideUp( "fast", function() {});
|
||||
}
|
||||
}
|
||||
})
|
||||
.fail(function() {
|
||||
//don't do anything, the server might be down while esp32 recalibrates radio
|
||||
});
|
||||
|
||||
RepeatCheckStatusInterval();
|
||||
}
|
||||
|
||||
|
||||
function checkConfig(){
|
||||
var h = "";
|
||||
//{ "autoexec" : 0, "list" : [{ 'autoexec1' : 'squeezelite -o "I2S" -b 500:2000 -d all=info -M esp32' }]}
|
||||
$.getJSON( "/config.json", function( data ) {
|
||||
if(data.hasOwnProperty('autoexec')) {
|
||||
h+= '<div id="autoexec">Autoexec: {0}</div>'.format(data["autoexec"]===1?"Active":"Inactive");
|
||||
}
|
||||
if(data.hasOwnProperty('list')) {
|
||||
data["list"].forEach(function(e, idx, array) {
|
||||
for (const [key, value] of Object.entries(e)) {
|
||||
h+= '<input id="{0}" type="text" maxlength="201" value="{1}"><br>'.format(key,value);
|
||||
}
|
||||
}
|
||||
|
||||
);
|
||||
h += "\n";
|
||||
$( "#command-list" ).html(h);
|
||||
}
|
||||
|
||||
})
|
||||
.fail(function() {
|
||||
//don't do anything, the server might be down while esp32 recalibrates radio
|
||||
});
|
||||
|
||||
RepeatCheckConfigInterval();
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user