Network WIP

2025-12-06 19:47:02 +03:00 · 2022-01-20 13:43:23 -05:00
parent 052600a45a
commit 15c0e47ae3
72 changed files with 1676 additions and 2212 deletions
--- a/components/wifi-manager/network_manager.c
+++ b/components/wifi-manager/network_manager.c
@@ -75,7 +75,7 @@ int get_root_id(const state_t *  state);
 const state_t* get_root( const state_t* const state);
 static void network_task(void* pvParameters);

-void network_start_stop_dhcp(esp_netif_t* netif, bool start) {
+void network_start_stop_dhcp_client(esp_netif_t* netif, bool start) {
    tcpip_adapter_dhcp_status_t status;
    esp_err_t err = ESP_OK;
    ESP_LOGD(TAG, "Checking if DHCP client for STA interface is running");
@@ -95,13 +95,19 @@ void network_start_stop_dhcp(esp_netif_t* netif, bool start) {
        }
        else {
            ESP_LOGI(TAG, "Stopping DHCP client");
-            ESP_ERROR_CHECK_WITHOUT_ABORT(esp_netif_dhcpc_stop(netif));
+            err = esp_netif_dhcpc_stop(netif);
+            if(err!=ESP_OK){
+                ESP_LOGE(TAG,"Error stopping DHCP Client : %s",esp_err_to_name(err));
+            }
        }
        break;
        case ESP_NETIF_DHCP_STOPPED:
        if(start){
            ESP_LOGI(TAG, "Starting DHCP client");
-            ESP_ERROR_CHECK_WITHOUT_ABORT(esp_netif_dhcpc_start(netif));
+            err = esp_netif_dhcpc_start(netif);
+            if(err!=ESP_OK){
+                ESP_LOGE(TAG,"Error stopping DHCP Client : %s",esp_err_to_name(err));
+            }
        }
        else {
            ESP_LOGI(TAG, "DHCP client already started");
@@ -110,11 +116,17 @@ void network_start_stop_dhcp(esp_netif_t* netif, bool start) {
        case ESP_NETIF_DHCP_INIT:
        if(start){
            ESP_LOGI(TAG, "Starting DHCP client");
-            ESP_ERROR_CHECK_WITHOUT_ABORT(esp_netif_dhcpc_start(netif));
+            err = esp_netif_dhcpc_start(netif);
+            if(err!=ESP_OK){
+                ESP_LOGE(TAG,"Error stopping DHCP Client : %s",esp_err_to_name(err));
+            }
        }
        else {
            ESP_LOGI(TAG, "Stopping DHCP client");
-            ESP_ERROR_CHECK_WITHOUT_ABORT(esp_netif_dhcpc_stop(netif));
+            err = esp_netif_dhcpc_stop(netif);
+            if(err!=ESP_OK){
+                ESP_LOGE(TAG,"Error stopping DHCP Client : %s",esp_err_to_name(err));
+            }
        }
        break;

@@ -537,9 +549,8 @@ void network_async_lost_connection(wifi_event_sta_disconnected_t* disconnected_e
    memset(&msg,0x00,sizeof(msg));
    msg.trigger = EN_LOST_CONNECTION;
    ESP_LOGD(TAG, "Posting event %s", event_to_string(msg.trigger));
-    msg.disconnected_event = malloc_init_external(sizeof(wifi_event_sta_disconnected_t));
+    msg.disconnected_event =  clone_obj_psram(disconnected_event,sizeof(wifi_event_sta_disconnected_t));
    if(msg.disconnected_event){
-        memcpy(msg.disconnected_event, disconnected_event,sizeof(wifi_event_sta_disconnected_t));
        xQueueSendToBack(network_queue, &msg, portMAX_DELAY);
    }
    else {
@@ -659,6 +670,11 @@ esp_err_t network_get_hostname(const char** hostname) {
 }

 void network_set_timer(uint16_t duration, const char * tag) {
+    if(NM.timer_tag){
+        ESP_LOGD(TAG,"Cancelling timer %s",NM.timer_tag);
+        FREE_AND_NULL(NM.timer_tag);
+        NM.timer_tag = NULL;
+    }
    if (duration > 0) {
        if (!NM.state_timer) {
            ESP_LOGD(TAG, "Starting new pulse check timer with period of %u ms.", duration);
@@ -672,6 +688,10 @@ void network_set_timer(uint16_t duration, const char * tag) {
        ESP_LOGD(TAG, "Stopping timer");
        xTimerStop(NM.state_timer, portMAX_DELAY);
    }
+    if(tag){
+        ESP_LOGD(TAG, "Setting timer tag to %s", tag);
+        NM.timer_tag = strdup_psram(tag);
+    }
 }
 void network_ip_event_handler(void* arg, esp_event_base_t event_base, int32_t event_id, void* event_data) {
    ip_event_got_ip_t* s = NULL;
--- a/components/wifi-manager/network_manager.h
+++ b/components/wifi-manager/network_manager.h
@@ -78,6 +78,7 @@ typedef struct
 	esp_netif_t *wifi_ap_netif;
    uint16_t sta_polling_min_ms;
    uint16_t sta_polling_max_ms;
+    uint16_t ap_duration_ms;
    uint16_t eth_link_down_reboot_ms;
    uint16_t dhcp_timeout;
    uint16_t wifi_dhcp_fail_ms;    
@@ -312,7 +313,7 @@ bool network_is_wifi_prioritized();
 void network_set_timer(uint16_t duration, const char * tag);
 void network_set_hostname(esp_netif_t * netif);
 esp_err_t network_get_ip_info_for_netif(esp_netif_t* netif, tcpip_adapter_ip_info_t* ipInfo);
-void network_start_stop_dhcp(esp_netif_t* netif, bool start);
+void network_start_stop_dhcp_client(esp_netif_t* netif, bool start);
 void network_start_stop_dhcps(esp_netif_t* netif, bool start);
 void network_prioritize_wifi(bool activate);
 #define ADD_ROOT_FORWARD_DECLARATION(name, ...) ADD_STATE_FORWARD_DECLARATION_(name)
--- a/components/wifi-manager/network_manager_handlers.c
+++ b/components/wifi-manager/network_manager_handlers.c
@@ -225,30 +225,19 @@ static state_machine_result_t NETWORK_INSTANTIATED_STATE_handler(state_machine_t
    State_Machine->State = &network_states[NETWORK_INSTANTIATED_STATE];
    State_Machine->Event = EN_START;
      char * valuestr=NULL;
-    valuestr=config_alloc_get_default(NVS_TYPE_STR,"pollmx","600",0);
-    if (valuestr) {
-        nm->sta_polling_max_ms = atoi(valuestr)*1000;
-        ESP_LOGD(TAG, "sta_polling_max_ms set to %d", nm->sta_polling_max_ms);
-        FREE_AND_NULL(valuestr);
-    }   
-    valuestr=config_alloc_get_default(NVS_TYPE_STR,"pollmin","15",0);
-    if (valuestr) {
-        nm->sta_polling_min_ms = atoi(valuestr)*1000;
-        ESP_LOGD(TAG, "sta_polling_min_ms set to %d", nm->sta_polling_min_ms);
-        FREE_AND_NULL(valuestr);
-    }
-    valuestr=config_alloc_get_default(NVS_TYPE_STR,"ethtmout","30",0);
-    if (valuestr) {
-        nm->eth_link_down_reboot_ms = atoi(valuestr)*1000;
-        ESP_LOGD(TAG, "ethtmout set to %d", nm->eth_link_down_reboot_ms);
-        FREE_AND_NULL(valuestr);
-    }
-    valuestr=config_alloc_get_default(NVS_TYPE_STR,"dhcp_tmout","30",0);
-    if(valuestr){
-        nm->dhcp_timeout = atoi(valuestr)*1000;
-        ESP_LOGD(TAG, "dhcp_timeout set to %d", nm->dhcp_timeout);
-        FREE_AND_NULL(valuestr);
-    }
+
+    config_get_uint16t_from_str("pollmx",&nm->sta_polling_max_ms,600);
+    nm->sta_polling_max_ms = nm->sta_polling_max_ms * 1000;
+    config_get_uint16t_from_str("apdelay",&nm->ap_duration_ms,20);
+    nm->ap_duration_ms = nm->ap_duration_ms * 1000;
+    config_get_uint16t_from_str("pollmin",&nm->sta_polling_min_ms,15);
+    nm->sta_polling_min_ms = nm->sta_polling_min_ms*1000;
+    config_get_uint16t_from_str("ethtmout",&nm->eth_link_down_reboot_ms,30);
+    nm->eth_link_down_reboot_ms = nm->eth_link_down_reboot_ms*1000;
+    config_get_uint16t_from_str("dhcp_tmout",&nm->dhcp_timeout,30);
+    nm->dhcp_timeout = nm->dhcp_timeout*1000;
+    ESP_LOGI(TAG,"Network manager configuration: polling max %d, polling min %d, ap delay %d, dhcp timeout %d, eth timeout %d",
+        nm->sta_polling_max_ms,nm->sta_polling_min_ms,nm->ap_duration_ms,nm->dhcp_timeout, nm->eth_link_down_reboot_ms);
    HANDLE_GLOBAL_EVENT(State_Machine);
    if (State_Machine->Event == EN_START) {
        result= local_traverse_state(State_Machine, &network_states[NETWORK_INITIALIZING_STATE],__FUNCTION__);
@@ -400,6 +389,7 @@ static state_machine_result_t NETWORK_ETH_ACTIVE_STATE_handler(state_machine_t*
        case EN_SCAN:
            ESP_LOGW(TAG,"Wifi  scan cannot be executed in this state");
            network_wifi_built_known_ap_list();
+            result = EVENT_HANDLED;
            break;
        case EN_DELETE: {
            ESP_LOGD(TAG, "WiFi disconnected by user");
@@ -429,7 +419,7 @@ static state_machine_result_t NETWORK_ETH_ACTIVE_STATE_exit_handler(state_machin
 static state_machine_result_t ETH_CONNECTING_NEW_STATE_entry_handler(state_machine_t* const State_Machine) {
    network_t* const nm = (network_t *)State_Machine;
    network_handler_entry_print(State_Machine,true);
-    network_start_stop_dhcp(nm->wifi_netif, true);
+    network_start_stop_dhcp_client(nm->wifi_netif, true);
    network_wifi_connect(nm->event_parameters->ssid,nm->event_parameters->password);
    FREE_AND_NULL(nm->event_parameters->ssid);
    FREE_AND_NULL(nm->event_parameters->password);
@@ -707,7 +697,7 @@ static state_machine_result_t WIFI_CONFIGURING_STATE_exit_handler(state_machine_
 static state_machine_result_t WIFI_CONFIGURING_CONNECT_STATE_entry_handler(state_machine_t* const State_Machine) {
    network_t* const nm = (network_t *)State_Machine;
    network_handler_entry_print(State_Machine,true);
-    network_start_stop_dhcp(nm->wifi_netif, true);
+    network_start_stop_dhcp_client(nm->wifi_netif, true);
    network_wifi_connect(nm->event_parameters->ssid,nm->event_parameters->password);
    FREE_AND_NULL(nm->event_parameters->ssid);
    FREE_AND_NULL(nm->event_parameters->password);
@@ -723,7 +713,7 @@ static state_machine_result_t WIFI_CONFIGURING_CONNECT_STATE_handler(state_machi
    switch (State_Machine->Event) {
        case EN_CONNECTED:
            result=EVENT_HANDLED;
-            ESP_LOGD(TAG,"Wifi was connected. Waiting for IP address");
+            ESP_LOGI(TAG,"Wifi was connected. Waiting for IP address");
            network_set_timer(nm->dhcp_timeout,"DHCP Timeout");
            break;
        case EN_GOT_IP:
@@ -731,6 +721,16 @@ static state_machine_result_t WIFI_CONFIGURING_CONNECT_STATE_handler(state_machi
            result= local_traverse_state(State_Machine, &Wifi_Configuring_State[WIFI_CONFIGURING_CONNECT_SUCCESS_STATE],__FUNCTION__);
            break;
        case EN_LOST_CONNECTION:
+            if(nm->event_parameters->disconnected_event->reason == WIFI_REASON_ASSOC_LEAVE) {
+                ESP_LOGI(TAG,"Wifi was disconnected from previous access point. Waiting to connect.");
+            }
+            else {
+                network_status_update_ip_info(UPDATE_FAILED_ATTEMPT);
+                result = local_traverse_state(State_Machine, &Wifi_Configuring_State[WIFI_CONFIGURING_STATE],__FUNCTION__);
+            }
+            break;
+        case EN_TIMER:
+            ESP_LOGW(TAG,"Connection timeout.  (%s)",STR_OR_ALT(nm->timer_tag, "Unknown"));
            network_status_update_ip_info(UPDATE_FAILED_ATTEMPT);
            result = local_traverse_state(State_Machine, &Wifi_Configuring_State[WIFI_CONFIGURING_STATE],__FUNCTION__);
            break;
@@ -764,43 +764,13 @@ static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_STATE_entry_handl
 static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_STATE_handler(state_machine_t* const State_Machine) {
    network_handler_print(State_Machine,true);
    state_machine_result_t result = EVENT_HANDLED;
+    network_t* const nm = (network_t *)State_Machine;
    switch (State_Machine->Event) {
         case EN_UPDATE_STATUS:
            network_status_update_basic_info();
-            result= local_traverse_state(State_Machine, &Wifi_Configuring_State[WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE],__FUNCTION__);
+            network_set_timer(nm->ap_duration_ms,"Access point teardown"); // set a timer to tear down the AP mode
            break;
-        default:
-            result= EVENT_UN_HANDLED;
-    }
-    // Process global handler at the end, since we want to overwrite
-    // UPDATE_STATUS with our own logic above
-    HANDLE_GLOBAL_EVENT(State_Machine);
-    network_handler_print(State_Machine,false);
-    return result;
-}
-static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_STATE_exit_handler(state_machine_t* const State_Machine) {
-    network_exit_handler_print(State_Machine,true);
-    network_exit_handler_print(State_Machine,false);
-    return EVENT_HANDLED;
-}
-
-
-
-/********************************************************************************************* 
- * WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE
- */
-static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE_entry_handler(state_machine_t* const State_Machine) {
-    network_handler_entry_print(State_Machine,true);
-    ESP_LOGD(TAG, "Waiting for next status update event to turn off AP.");
-    NETWORK_EXECUTE_CB(State_Machine);
-    network_handler_entry_print(State_Machine,false);
-    return EVENT_HANDLED;
-}
-static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE_handler(state_machine_t* const State_Machine) {
-    network_handler_print(State_Machine,true);
-    state_machine_result_t result = EVENT_HANDLED;
-    switch (State_Machine->Event) {
-         case EN_UPDATE_STATUS:
+        case EN_TIMER:
            network_status_update_basic_info();
            result= local_traverse_state(State_Machine, &Wifi_Active_State[WIFI_CONNECTED_STATE],__FUNCTION__);
            break;
@@ -813,20 +783,23 @@ static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE_han
    network_handler_print(State_Machine,false);
    return result;
 }
-static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE_exit_handler(state_machine_t* const State_Machine) {
+static state_machine_result_t WIFI_CONFIGURING_CONNECT_SUCCESS_STATE_exit_handler(state_machine_t* const State_Machine) {
    network_exit_handler_print(State_Machine,true);
+    network_set_timer(0,NULL);
    network_exit_handler_print(State_Machine,false);
    return EVENT_HANDLED;
 }


+
+
 /********************************************************************************************* 
 * WIFI_CONNECTING_STATE
 */
 static state_machine_result_t WIFI_CONNECTING_STATE_entry_handler(state_machine_t* const State_Machine) {
    network_t* const nm = (network_t *)State_Machine;
    network_handler_entry_print(State_Machine,true);
-    network_start_stop_dhcp(nm->wifi_netif, true);
+    network_start_stop_dhcp_client(nm->wifi_netif, true);
    network_connect_active_ssid(State_Machine);
    nm->STA_duration = nm->sta_polling_min_ms;
    /* create timer for background STA connection */
@@ -868,7 +841,7 @@ static state_machine_result_t WIFI_CONNECTING_STATE_exit_handler(state_machine_t
 static state_machine_result_t WIFI_CONNECTING_NEW_STATE_entry_handler(state_machine_t* const State_Machine) {
    network_t* const nm = (network_t *)State_Machine;
    network_handler_entry_print(State_Machine,true);
-    network_start_stop_dhcp(nm->wifi_netif, true);
+    network_start_stop_dhcp_client(nm->wifi_netif, true);
    network_wifi_connect(nm->event_parameters->ssid,nm->event_parameters->password);
    FREE_AND_NULL(nm->event_parameters->ssid);
    FREE_AND_NULL(nm->event_parameters->password);
--- a/components/wifi-manager/network_services.h
+++ b/components/wifi-manager/network_services.h
@@ -36,8 +36,7 @@ extern "C" {
 #define ALL_WIFI_CONFIGURING_STATE(PARENT, LEVEL)\
    ADD_LEAF(WIFI_CONFIGURING_STATE,PARENT,LEVEL)\
    ADD_LEAF(WIFI_CONFIGURING_CONNECT_STATE,PARENT,LEVEL)\
-    ADD_LEAF(WIFI_CONFIGURING_CONNECT_SUCCESS_STATE,PARENT,LEVEL)\
-    ADD_LEAF(WIFI_CONFIGURING_CONNECT_SUCCESS_GOTOSTA_STATE,PARENT,LEVEL)
+    ADD_LEAF(WIFI_CONFIGURING_CONNECT_SUCCESS_STATE,PARENT,LEVEL)

 typedef enum {
    ALL_NM_STATE
--- a/components/wifi-manager/network_status.c
+++ b/components/wifi-manager/network_status.c
@@ -205,7 +205,7 @@ cJSON* network_status_update_string(cJSON** root, const char* key, const char* v
        if (cjsonvalue && strcasecmp(cJSON_GetStringValue(cjsonvalue), value) != 0) {
            ESP_LOGD(TAG, "Value %s changed from %s to %s", key, cJSON_GetStringValue(cjsonvalue), value);
            cJSON_SetValuestring(cjsonvalue, value);
-        } else {
+        } else if(!cjsonvalue){
            cJSON_AddItemToObject(*root, key, cJSON_CreateString(value));
        }
        network_status_unlock_json_buffer();
@@ -338,8 +338,8 @@ void network_status_update_ip_info(update_reason_code_t update_reason_code) {
        ip_info_cjson = network_status_get_basic_info(&ip_info_cjson);
        ip_info_cjson = network_status_update_number(&ip_info_cjson, "urc", update_reason_code);
        ESP_LOGD(TAG,"Updating ip info with reason code %d. Checking if Wifi interface is connected",update_reason_code);
-        if (network_is_interface_connected(network_wifi_get_interface())) {
-            
+        if (network_is_interface_connected(network_wifi_get_interface()) || update_reason_code == UPDATE_FAILED_ATTEMPT ) {
+            network_status_update_string(ip_info_cjson, "if", "wifi");
            esp_netif_get_ip_info(network_wifi_get_interface(), &ip_info);
            network_status_update_address(ip_info_cjson, &ip_info);
            if (!network_wifi_is_ap_mode()) {
@@ -351,24 +351,15 @@ void network_status_update_ip_info(update_reason_code_t update_reason_code) {
            }

        } else {
-            cJSON_DeleteItemFromObjectCaseSensitive(ip_info_cjson, "ip");
-            cJSON_DeleteItemFromObjectCaseSensitive(ip_info_cjson, "netmask");
-            cJSON_DeleteItemFromObjectCaseSensitive(ip_info_cjson, "gw");
            cJSON_DeleteItemFromObjectCaseSensitive(ip_info_cjson, "rssi");
            cJSON_DeleteItemFromObjectCaseSensitive(ip_info_cjson, "ssid");
        }
        ESP_LOGD(TAG,"Checking if ethernet interface is connected");
        if (network_is_interface_connected(network_ethernet_get_interface())) {
-            cJSON* ethernet_ip = cJSON_GetObjectItem(ip_info_cjson, "eth");
-            if (!ethernet_ip) {
-                ethernet_ip = cJSON_CreateObject();
-                cJSON_AddItemToObject(ip_info_cjson, "eth", ethernet_ip);
-            }
+            network_status_update_string(ip_info_cjson, "if", "eth");
            esp_netif_get_ip_info(network_ethernet_get_interface(), &ip_info);
-            network_status_update_address(ethernet_ip, &ip_info);
-        } else {
-            cJSON_DeleteItemFromObjectCaseSensitive(ip_info_cjson, "eth");
-        }
+            network_status_update_address(ip_info_cjson, &ip_info);
+        } 
        network_status_unlock_json_buffer();
    } else {
        ESP_LOGW(TAG, "Unable to lock status json buffer. ");
--- a/components/wifi-manager/network_wifi.c
+++ b/components/wifi-manager/network_wifi.c
@@ -65,7 +65,7 @@ typedef struct known_access_point {
    uint32_t phy_11g : 1;      /**< bit: 1 flag to identify if 11g mode is enabled or not */
    uint32_t phy_11n : 1;      /**< bit: 2 flag to identify if 11n mode is enabled or not */
    uint32_t phy_lr : 1;       /**< bit: 3 flag to identify if low rate is enabled or not */
-    time_t next_try;
+    time_t last_try;
    SLIST_ENTRY(known_access_point)
    next;  //!< next callback
 } known_access_point_t;
@@ -129,6 +129,14 @@ size_t network_wifi_get_known_count() {
    }
    return count;
 }
+size_t network_wifi_get_known_count_in_range() {
+    size_t count = 0;
+    known_access_point_t* it;
+    SLIST_FOREACH(it, &s_ap_list, next) {
+        if(it->found) count++;
+    }
+    return count;
+}
 esp_err_t network_wifi_add_ap(known_access_point_t* item) {
    known_access_point_t* last = SLIST_FIRST(&s_ap_list);
    if (last == NULL) {
@@ -238,6 +246,30 @@ void network_wifi_set_found_ap() {
        }
    }
 }
+bool network_wifi_known_ap_in_range(){
+    known_access_point_t* it;
+    SLIST_FOREACH(it, &s_ap_list, next) {
+        if (it->found) {
+            return true;
+        }
+    }
+    return false;
+}
+const char * network_wifi_get_next_ap_in_range(){
+    known_access_point_t* it;
+    time_t last_try_min=(esp_timer_get_time() / 1000);
+    SLIST_FOREACH(it, &s_ap_list, next) {
+        if (it->found && it->last_try < last_try_min) {
+            last_try_min = it->last_try;
+        }
+    }
+    SLIST_FOREACH(it, &s_ap_list, next) {
+        if (it->found && it->last_try == last_try_min) {
+            return it->ssid;
+        }
+    }
+    return NULL;
+}

 esp_err_t network_wifi_alloc_ap_json(known_access_point_t* item, char** json_string) {
    esp_err_t err = ESP_OK;
@@ -735,7 +767,7 @@ static void network_wifi_event_handler(void* arg, esp_event_base_t event_base, i
            //		    		reason of disconnection
            wifi_event_sta_disconnected_t* s = (wifi_event_sta_disconnected_t*)event_data;
            char* bssid = network_manager_alloc_get_mac_string(s->bssid);
-            ESP_LOGD(TAG, "WIFI_EVENT_STA_DISCONNECTED. From BSSID: %s, reason code: %d (%s)", STR_OR_BLANK(bssid), s->reason, get_disconnect_code_desc(s->reason));
+            ESP_LOGW(TAG, "WIFI_EVENT_STA_DISCONNECTED. From BSSID: %s, reason code: %d (%s)", STR_OR_BLANK(bssid), s->reason, get_disconnect_code_desc(s->reason));
            FREE_AND_NULL(bssid);
            if (s->reason == WIFI_REASON_ROAMING) {
                ESP_LOGI(TAG, "WiFi Roaming to new access point");
@@ -1137,9 +1169,17 @@ esp_err_t network_wifi_connect(const char* ssid, const char* password) {
    }
    return err;
 }
+esp_err_t network_wifi_connect_next_in_range(){
+    const char * ssid = network_wifi_get_next_ap_in_range();
+    if(ssid){
+        return network_wifi_connect_ssid(ssid);
+    }
+    return ESP_FAIL;
+}
 esp_err_t network_wifi_connect_ssid(const char* ssid) {
    known_access_point_t* item = network_wifi_get_ap_entry(ssid);
    if (item) {
+        item->last_try = (esp_timer_get_time() / 1000);
        return network_wifi_connect(item->ssid, item->password);
    }
    return ESP_FAIL;
--- a/components/wifi-manager/network_wifi.h
+++ b/components/wifi-manager/network_wifi.h
@@ -66,8 +66,9 @@ esp_err_t network_wifi_connect_active_ssid();
 esp_err_t network_wifi_erase_known_ap();
 esp_err_t network_wifi_set_sta_mode();
 size_t network_wifi_get_known_count();
+size_t network_wifi_get_known_count_in_range();
 esp_err_t network_wifi_built_known_ap_list();
-
+esp_err_t network_wifi_connect_next_in_range();
 const wifi_sta_config_t* network_wifi_load_active_config();
 #ifdef __cplusplus
 }
--- a/components/wifi-manager/webapp/.babelrc
+++ b/components/wifi-manager/webapp/.babelrc
@@ -13,7 +13,7 @@
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-transform-runtime"],

  ],
 }
--- a/components/wifi-manager/webapp/.eslintcache
+++ b/components/wifi-manager/webapp/.eslintcache
--- a/components/wifi-manager/webapp/dist/css/index.5712d0365318b239ca44.css
+++ b/components/wifi-manager/webapp/dist/css/index.5712d0365318b239ca44.css
--- a/components/wifi-manager/webapp/dist/css/index.5712d0365318b239ca44.css.gz
+++ b/components/wifi-manager/webapp/dist/css/index.5712d0365318b239ca44.css.gz
--- a/components/wifi-manager/webapp/dist/css/index.5712d0365318b239ca44.css.map
+++ b/components/wifi-manager/webapp/dist/css/index.5712d0365318b239ca44.css.map
--- a/components/wifi-manager/webapp/webpack/dist/favicon-32x32.png
+++ b/components/wifi-manager/webapp/webpack/dist/favicon-32x32.png
--- a/components/wifi-manager/webapp/dist/index.html
+++ b/components/wifi-manager/webapp/dist/index.html
--- a/components/wifi-manager/webapp/dist/index.html.gz
+++ b/components/wifi-manager/webapp/dist/index.html.gz
--- a/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js
+++ b/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js
--- a/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js.LICENSE.txt
+++ b/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js.LICENSE.txt
@@ -0,0 +1,73 @@
+/*!
+  * Bootstrap v4.6.1 (https://getbootstrap.com/)
+  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license   Licensed under MIT license
+ *            See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
+ * @version   v4.2.8+1e68dce6
+ */
+
+/*!
+ * Sizzle CSS Selector Engine v2.3.6
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2021-02-16
+ */
+
+/*!
+ * jQuery JavaScript Library v3.6.0
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2021-03-02T17:08Z
+ */
+
+/*! < A task is querying the state of itself, so must be running. */
+
+/*! < The task being queried is in a read or pending ready list. */
+
+/*! < The task being queried is in the Blocked state. */
+
+/*! < The task being queried is in the Suspended state, or is in the Blocked state with an infinite time out. */
+
+/*! https://mths.be/he v1.2.0 by @mathias | MIT license */
+
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.16.1
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
--- a/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js.gz
+++ b/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js.gz
--- a/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js.map
+++ b/components/wifi-manager/webapp/dist/js/index.41c7e6.bundle.js.map
--- a/components/wifi-manager/webapp/dist/src/index.d.ts
+++ b/components/wifi-manager/webapp/dist/src/index.d.ts
@@ -0,0 +1,4 @@
+import 'bootstrap';
+import './sass/main.scss';
+import './assets/images/favicon-32x32.png';
+import './js/custom.js';
--- a/components/wifi-manager/webapp/dist/src/test.d.ts
+++ b/components/wifi-manager/webapp/dist/src/test.d.ts
@@ -0,0 +1,4 @@
+import 'bootstrap';
+import './sass/main.scss';
+import './js/test.js';
+import 'remixicon/fonts/remixicon.css';
--- a/components/wifi-manager/webapp/mock/commands.json
+++ b/components/wifi-manager/webapp/mock/commands.json
@@ -1,19 +1,5 @@
 {
 	"commands":	[{
-			"help":	"WiFi",
-			"hascb":	true,
-			"argtable":	[{
-					"datatype":	"Fast|Comprehensive",
-					"glossary":	"Sets the WiFi Scan Mode. Use Comprehensive where more than one AP has the same name on different channels. This will ensure that the AP with the strongest signal is chosen.",
-					"longopts":	"scanmode",
-					"checkbox":	false,
-					"hasvalue":	true,
-					"mincount":	0,
-					"maxcount":	1
-				}],
-			"hint":	" [--scanmode=Fast|Comprehensive]",
-			"name":	"cfg-syst-wifi"
-		}, {
 			"help":	"Get the current size of free heap memory",
 			"hascb":	false,
 			"name":	"free"
@@ -21,9 +7,18 @@
 			"help":	"Services",
 			"hascb":	true,
 			"argtable":	[{
+					"glossary":	"Spotify (cspot)",
+					"longopts":	"cspot",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
 					"glossary":	"Bluetooth Speaker",
 					"longopts":	"BT_Speaker",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -31,6 +26,7 @@
 					"glossary":	"AirPlay",
 					"longopts":	"AirPlay",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -40,11 +36,20 @@
 					"longopts":	"telnet",
 					"shortopts":	"t",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
+				}, {
+					"glossary":	"System Statistics. Use only for troubleshooting",
+					"longopts":	"stats",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
 				}],
-			"hint":	" [--BT_Speaker] [--AirPlay] [-t Disabled|Telnet Only|Telnet and Serial]",
+			"hint":	" [--cspot] [--BT_Speaker] [--AirPlay] [-t Disabled|Telnet Only|Telnet and Serial] [--stats]",
 			"name":	"cfg-syst-services"
 		}, {
 			"help":	"Get minimum size of free heap memory found during execution",
@@ -54,16 +59,17 @@
 			"help":	"Device Name",
 			"hascb":	true,
 			"argtable":	[{
-					"datatype":	"Bureau-OLED",
+					"datatype":	"squeezelite-1fe714",
 					"glossary":	"New Name",
 					"longopts":	"name",
 					"shortopts":	"n",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
 				}],
-			"hint":	" [-n Bureau-OLED]",
+			"hint":	" [-n squeezelite-1fe714]",
 			"name":	"cfg-syst-name"
 		}, {
 			"help":	"Get version of chip and SDK",
@@ -81,6 +87,21 @@
 			"help":	"Reboot system to Squeezelite",
 			"hascb":	false,
 			"name":	"restart_ota"
+		}, {
+			"help":	"Preset Options",
+			"hascb":	true,
+			"argtable":	[{
+					"datatype":	"SqueezeAMP|T-WATCH2020 by LilyGo",
+					"glossary":	"Known Board Name.\nFor known boards, several systems parameters will be updated",
+					"longopts":	"model_config",
+					"checkbox":	false,
+					"remark":	false,
+					"hasvalue":	true,
+					"mincount":	1,
+					"maxcount":	1
+				}],
+			"hint":	" --model_config=SqueezeAMP|T-WATCH2020 by LilyGo",
+			"name":	"cfg-hw-preset"
 		}, {
 			"help":	"General Audio Options",
 			"hascb":	true,
@@ -90,6 +111,7 @@
 					"longopts":	"jack_behavior",
 					"shortopts":	"j",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -105,6 +127,7 @@
 					"longopts":	"sink_name",
 					"shortopts":	"n",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -114,6 +137,7 @@
 					"longopts":	"pin_code",
 					"shortopts":	"p",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -124,10 +148,11 @@
 			"help":	"DAC Options",
 			"hascb":	true,
 			"argtable":	[{
-					"datatype":	"TAS57xx|TAS5713|AC101|WM8978|I2S",
+					"datatype":	"TAS57xx|TAS5713|AC101|WM8978|ES8388|",
 					"glossary":	"DAC Model Name",
 					"longopts":	"model_name",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -136,30 +161,34 @@
 					"glossary":	"Clock GPIO. e.g. 33",
 					"longopts":	"clock",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
-					"mincount":	1,
+					"mincount":	0,
 					"maxcount":	1
 				}, {
 					"datatype":	"<n>",
 					"glossary":	"Word Select GPIO. e.g. 25",
 					"longopts":	"wordselect",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
-					"mincount":	1,
+					"mincount":	0,
 					"maxcount":	1
 				}, {
 					"datatype":	"<n>",
 					"glossary":	"Data GPIO. e.g. 32",
 					"longopts":	"data",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
-					"mincount":	1,
+					"mincount":	0,
 					"maxcount":	1
 				}, {
 					"datatype":	"<n>",
 					"glossary":	"Mute GPIO. e.g. 14",
 					"longopts":	"mute_gpio",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -167,6 +196,7 @@
 					"glossary":	"Mute GPIO level. Checked=HIGH, Unchecked=LOW",
 					"longopts":	"mute_level",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -175,6 +205,7 @@
 					"glossary":	"SDA GPIO. e.g. 27",
 					"longopts":	"dac_sda",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -183,6 +214,7 @@
 					"glossary":	"SCL GPIO. e.g. 26",
 					"longopts":	"dac_scl",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -191,6 +223,7 @@
 					"glossary":	"I2C device address. e.g. 106",
 					"longopts":	"dac_i2c",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -198,11 +231,12 @@
 					"glossary":	"Clear configuration",
 					"longopts":	"clear",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
 				}],
-			"hint":	" --model_name=TAS57xx|TAS5713|AC101|WM8978|I2S --clock=<n> --wordselect=<n> --data=<n> [--mute_gpio=<n>] [--mute_level] [--dac_sda=<n>] [--dac_scl=<n>] [--dac_i2c=<n>] [--clear]",
+			"hint":	" --model_name=TAS57xx|TAS5713|AC101|WM8978|ES8388| [--clock=<n>] [--wordselect=<n>] [--data=<n>] [--mute_gpio=<n>] [--mute_level] [--dac_sda=<n>] [--dac_scl=<n>] [--dac_i2c=<n>] [--clear]",
 			"name":	"cfg-hw-dac"
 		}, {
 			"help":	"SPDIF Options",
@@ -212,6 +246,7 @@
 					"glossary":	"Clock GPIO. e.g. 33",
 					"longopts":	"clock",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -220,6 +255,7 @@
 					"glossary":	"Word Select GPIO. e.g. 25",
 					"longopts":	"wordselect",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -228,6 +264,7 @@
 					"glossary":	"Data GPIO. e.g. 32",
 					"longopts":	"data",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -235,12 +272,103 @@
 					"glossary":	"Clear configuration",
 					"longopts":	"clear",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
 				}],
 			"hint":	" --clock=<n> --wordselect=<n> --data=<n> [--clear]",
 			"name":	"cfg-hw-spdif"
+		}, {
+			"help":	"Rotary Control",
+			"hascb":	true,
+			"argtable":	[{
+					"datatype":	"remark",
+					"glossary":	"One rotary encoder is supported, quadrature shift with press. Such encoders usually have 2 pins for encoders (A and B), and common C that must be set to ground and an optional SW pin for press. A, B and SW must be pulled up, so automatic pull-up is provided by ESP32, but you can add your own resistors. A bit of filtering on A and B (~470nF) helps for debouncing which is not made by software.\r\nEncoder is normally hard-coded to respectively knob left, right and push on LMS and to volume down/up/play toggle on BT and AirPlay.",
+					"checkbox":	false,
+					"remark":	true,
+					"hasvalue":	false,
+					"mincount":	1,
+					"maxcount":	1
+				}, {
+					"datatype":	"gpio",
+					"glossary":	"A/DT gpio",
+					"longopts":	"A",
+					"checkbox":	false,
+					"remark":	false,
+					"hasvalue":	true,
+					"mincount":	1,
+					"maxcount":	1
+				}, {
+					"datatype":	"gpio",
+					"glossary":	"B/CLK gpio",
+					"longopts":	"B",
+					"checkbox":	false,
+					"remark":	false,
+					"hasvalue":	true,
+					"mincount":	1,
+					"maxcount":	1
+				}, {
+					"datatype":	"gpio",
+					"glossary":	"Switch gpio",
+					"longopts":	"SW",
+					"checkbox":	false,
+					"remark":	false,
+					"hasvalue":	true,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"glossary":	"Force Volume down/up/play toggle all the time (even in LMS). ",
+					"longopts":	"volume_lock",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"glossary":	"Enable alternate mode mode on long-press. In that mode, left is previous, right is next and press is toggle. Every long press on SW alternates between modes (the main mode actual behavior depends on 'volume').",
+					"longopts":	"longpress",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"glossary":	"Single knob full navigation. Left, Right and Press is navigation, with Press always going to lower submenu item. Longpress is 'Play', Double press is 'Back', a quick left-right movement on the encoder is 'Pause'",
+					"longopts":	"knobonly",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"datatype":	"ms",
+					"glossary":	"The speed of double click (or left-right) when knob only option is enabled. Be aware that the longer you set double click speed, the less responsive the interface will be. ",
+					"longopts":	"timer",
+					"checkbox":	false,
+					"remark":	false,
+					"hasvalue":	true,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"glossary":	"Clear configuration",
+					"longopts":	"clear",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"glossary":	"Send button events as raw values to LMS. No remapping is possible when this is enabled",
+					"longopts":	"raw_mode",
+					"checkbox":	true,
+					"remark":	false,
+					"hasvalue":	false,
+					"mincount":	0,
+					"maxcount":	1
+				}],
+			"hint":	" remark --A=gpio --B=gpio [--SW=gpio] [--volume_lock] [--longpress] [--knobonly] [--timer=ms] [--clear] [--raw_mode]",
+			"name":	"cfg-hw-rotary"
 		}, {
 			"help":	"I2C Bus Parameters",
 			"hascb":	true,
@@ -250,6 +378,7 @@
 					"longopts":	"port",
 					"shortopts":	"p",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -259,6 +388,7 @@
 					"longopts":	"speed",
 					"shortopts":	"f",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -268,6 +398,7 @@
 					"longopts":	"sda",
 					"shortopts":	"d",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -277,6 +408,7 @@
 					"longopts":	"scl",
 					"shortopts":	"c",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -284,6 +416,7 @@
 					"glossary":	"Clear configuration",
 					"longopts":	"clear",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -295,10 +428,21 @@
 			"hascb":	true,
 			"argtable":	[{
 					"datatype":	"<n>",
-					"glossary":	"Data GPIO",
+					"glossary":	"Data OUT GPIO",
 					"longopts":	"data",
 					"shortopts":	"d",
 					"checkbox":	false,
+					"remark":	false,
+					"hasvalue":	true,
+					"mincount":	0,
+					"maxcount":	1
+				}, {
+					"datatype":	"<n>",
+					"glossary":	"Data IN GPIO",
+					"longopts":	"miso",
+					"shortopts":	"d",
+					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -308,6 +452,7 @@
 					"longopts":	"clk",
 					"shortopts":	"k",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -317,6 +462,7 @@
 					"longopts":	"dc",
 					"shortopts":	"c",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -326,6 +472,7 @@
 					"longopts":	"host",
 					"shortopts":	"h",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -333,11 +480,12 @@
 					"glossary":	"Clear configuration",
 					"longopts":	"clear",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
 				}],
-			"hint":	" [-d <n>] [-k <n>] [-c <n>] [-h 1|2] [--clear]",
+			"hint":	" [-d <n>] [-d <n>] [-k <n>] [-c <n>] [-h 1|2] [--clear]",
 			"name":	"cfg-hw-spi"
 		}, {
 			"help":	"Scan I2C bus for devices",
@@ -352,6 +500,7 @@
 					"longopts":	"chip",
 					"shortopts":	"c",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -361,6 +510,7 @@
 					"longopts":	"register",
 					"shortopts":	"r",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -370,6 +520,7 @@
 					"longopts":	"length",
 					"shortopts":	"l",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -385,6 +536,7 @@
 					"longopts":	"chip",
 					"shortopts":	"c",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -394,6 +546,7 @@
 					"longopts":	"port",
 					"shortopts":	"p",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -403,6 +556,7 @@
 					"longopts":	"register",
 					"shortopts":	"r",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -410,6 +564,7 @@
 					"datatype":	"<data>",
 					"glossary":	"Specify the data to write to that data address",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	256
@@ -425,6 +580,7 @@
 					"longopts":	"chip",
 					"shortopts":	"c",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -434,6 +590,7 @@
 					"longopts":	"size",
 					"shortopts":	"s",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -449,6 +606,7 @@
 					"longopts":	"type",
 					"shortopts":	"t",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -458,15 +616,17 @@
 					"longopts":	"driver",
 					"shortopts":	"d",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
 				}, {
-					"datatype":	"1|4",
+					"datatype":	"-1|1|4",
 					"glossary":	"Bit Depth (only for SSD1326 displays)",
 					"longopts":	"depth",
 					"shortopts":	"p",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -476,6 +636,7 @@
 					"longopts":	"address",
 					"shortopts":	"a",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -485,6 +646,7 @@
 					"longopts":	"width",
 					"shortopts":	"w",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -494,6 +656,7 @@
 					"longopts":	"height",
 					"shortopts":	"h",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	1,
 					"maxcount":	1
@@ -502,6 +665,7 @@
 					"longopts":	"rotate",
 					"shortopts":	"r",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -509,6 +673,7 @@
 					"glossary":	"Flip horizontally",
 					"longopts":	"hf",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -516,6 +681,7 @@
 					"glossary":	"Flip vertically",
 					"longopts":	"vf",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
@@ -525,6 +691,7 @@
 					"longopts":	"speed",
 					"shortopts":	"s",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -534,6 +701,7 @@
 					"longopts":	"cs",
 					"shortopts":	"b",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -543,6 +711,7 @@
 					"longopts":	"back",
 					"shortopts":	"b",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -551,6 +720,7 @@
 					"glossary":	"Reset GPIO",
 					"longopts":	"reset",
 					"checkbox":	false,
+					"remark":	false,
 					"hasvalue":	true,
 					"mincount":	0,
 					"maxcount":	1
@@ -558,24 +728,27 @@
 					"glossary":	"clear configuration and return",
 					"longopts":	"clear",
 					"checkbox":	true,
+					"remark":	false,
 					"hasvalue":	false,
 					"mincount":	0,
 					"maxcount":	1
 				}],
-			"hint":	" [-r] [-t <I2C|SPI>] [-d <SH1106|SSD1306|SSD1322|SSD1326|SSD1327|SSD1675|SSD1351|ST7735|ST7789|ILI9341|>] [-p 1|4] [-a <n>] -w <n> -h <n> [--hf] [--vf] [-s <n>] [-b <n>] [-b <n>] [--reset=<n>] [--clear]",
+			"hint":	" [-r] [-t <I2C|SPI>] [-d <SH1106|SSD1306|SSD1322|SSD1326|SSD1327|SSD1675|SSD1351|ST7735|ST7789|ILI9341|>] [-p -1|1|4] [-a <n>] -w <n> -h <n> [--hf] [--vf] [-s <n>] [-b <n>] [-b <n>] [--reset=<n>] [--clear]",
 			"name":	"cfg-hw-display"
 		}],
 	"values":	{
-		"cfg-syst-wifi":	{
-			"scanmode":	"Fast"
-		},
 		"cfg-syst-services":	{
 			"BT_Speaker":	true,
 			"AirPlay":	true,
-			"telnet":	"Telnet Only"
+			"cspot":	true,
+			"stats":	false,
+			"telnet":	"Telnet and Serial"
 		},
 		"cfg-syst-name":	{
-			"name":	"Bureau-OLED"
+			"name":	"squeezelite-1fe714"
+		},
+		"cfg-hw-preset":	{
+			"model_config":	""
 		},
 		"cfg-audio-general":	{
 			"jack_behavior":	"Subwoofer"
@@ -585,30 +758,23 @@
 			"pin_code":	"0000"
 		},
 		"cfg-hw-dac":	{
-			"clock":	33,
-			"wordselect":	25,
-			"data":	32,
-			"model_name":	"I2S"
+			"dac_sda":	33,
+			"dac_scl":	32,
+			"model_name":	"AC101"
 		},
 		"cfg-hw-spdif":	{
 		},
+		"cfg-hw-rotary":	{
+		},
 		"cfg-hw-i2c":	{
 			"speed":	400000
 		},
 		"cfg-hw-spi":	{
-			"data":	4,
-			"clk":	5,
-			"dc":	18,
+			"data":	13,
+			"clk":	14,
 			"host":	1
 		},
 		"cfg-hw-display":	{
-			"width":	256,
-			"height":	64,
-			"reset":	21,
-			"driver":	"SSD1322",
-			"cs":	19,
-			"speed":	16000000,
-			"type":	"SPI",
 			"rotate":	false,
 			"hf":	false,
 			"vf":	false
--- a/components/wifi-manager/webapp/mock/config.json
+++ b/components/wifi-manager/webapp/mock/config.json
@@ -269,11 +269,6 @@
 			"value": "N",
 			"chg": false
 		},
-		"wifi_smode": {
-			"type": 33,
-			"value": "a",
-			"chg": false
-		},
 		"disable_ps": {
 			"type": 33,
 			"value": "n",
@@ -343,6 +338,12 @@
 			"type": 33,
 			"value": "https://api.github.com/repos/sle118/squeezelite-esp32/releases",
 			"chg": false
+		},
+		"enable_cspot": {
+			"type": 33,
+			"value": "Y",
+			"chg": false
 		}
+		
  	}
 }
--- a/components/wifi-manager/webapp/mock/status.json
+++ b/components/wifi-manager/webapp/mock/status.json
@@ -18,9 +18,10 @@
 	"lms_cport": 9090,
 	"lms_port": 9100,
 	"lms_ip": "127.0.0.1",
+	"if": "eth",
 	"platform_name": "SqueezeAmp",
 	"mock_plugin_has_proxy": "x",
 	"mock_fail_fw_update":"",
 	"mock_fail_recovery":"",
 	"mock_old_recovery":""
-}
+}
--- a/components/wifi-manager/webapp/mock/statusdefinition.json
+++ b/components/wifi-manager/webapp/mock/statusdefinition.json
@@ -3,7 +3,9 @@
 		"Wifi Connection OK": 0,
 		"Wifi Failed Connect Attempt": 1,
 		"WiFi User Disconnect": 2,
-		"WiFi Lost Connection": 3
+		"WiFi Lost Connection": 3,
+		"Wifi update failed attempt and restore" : 4,
+		"Ethernet Connected": 5		
 	},
 	"bt_status": {
 		"Idle": 0,
--- a/components/wifi-manager/webapp/package.json
+++ b/components/wifi-manager/webapp/package.json
@@ -6,117 +6,66 @@
  "author": "Andy K., Sebastien",
  "license": "MIT",
  "scripts": {
-    "dev": "webpack-dev-server --open --config webpack/webpack.dev.js",
-    "build": "webpack --config webpack/webpack.prod.js",
-    "prod": "webpack-dev-server --open --config webpack/webpack.prod.js"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.0.6",
-    "@types/bootstrap": "^4.3.1",
-    "animate.css": "^3.7.2",
-    "bootstrap": "^4.5.3",
-    "bootswatch": "^4.4.1",
-    "commander": "^6.2.0",
-    "expose-loader": "^1.0.3",
-    "hamburgers": "^1.1.3",
-    "jquery": "^3.3.1",
-    "line-awesome": "^1.3.0",
-    "lodash": "^4.17.15",
-    "perfect-scrollbar": "^1.5.0",
-    "popper": "^1.0.1",
-    "react": "^17.0.1",
-    "remixicon": "^2.5.0",
-    "string-argv": "^0.3.1",
-    "stylelint-config-standard": "^20.0.0",
-    "svgo": "^1.3.2",
-    "webpack-icons-installer": "^2.0.0"
+    "prod": "webpack serve --open  --mode=production",
+    "build": "webpack  --mode=production ",
+    "watch": "webpack --progress --watch  --mode=development ",
+    "dev": "webpack serve --open  --mode=development"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.10",
-    "@babel/preset-typescript": "^7.8.3",
-    "@fullhuman/postcss-purgecss": "^1.3.0",
-    "@types/lodash": "^4.14.149",
-    "autoprefixer": "^9.7.4",
-    "babel-eslint": "^10.0.3",
+    "@babel/plugin-transform-runtime": "^7.16.8",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.16.7",
+    "@squoosh/lib": "^0.4.0",
+    "autoprefixer": "^10.2.4",
+    "babel": "^6.23.0",
    "babel-loader": "^8.2.2",
-    "babel-preset-minify": "^0.5.1",
-    "body-parser": "^1.19.0",
-    "browser-sync": "^2.26.7",
-    "browser-sync-webpack-plugin": "^2.2.2",
-    "browserlist": "^1.0.1",
-    "clean-webpack-plugin": "^2.0.0",
-    "compression-webpack-plugin": "^2.0.0",
-    "cross-env": "^5.2.1",
-    "css-loader": "^0.28.11",
-    "cssnano": "^4.1.10",
-    "eslint": "^7.0.0",
-    "eslint-config-google": "^0.9.1",
-    "eslint-webpack-plugin": "^2.4.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "favicons-webpack-plugin": "0.0.9",
-    "file-loader": "^1.1.11",
-    "glob": "^7.1.6",
-    "glob-all": "^3.2.1",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.0.7",
-    "image-webpack-loader": "^7.0.1",
-    "imagemin-mozjpeg": "^8.0.0",
-    "imagemin-webpack-plugin": "^2.4.2",
-    "img-loader": "^3.0.1",
-    "install": "^0.10.4",
-    "less": "^3.13.0",
-    "lodash-webpack-plugin": "^0.11.5",
-    "mini-css-extract-plugin": "^0.5.0",
-    "miragejs": "^0.1.41",
-    "node-sass": "^4.13.1",
-    "offline-plugin": "^5.0.7",
-    "on-build-webpack": "^0.1.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "preload-webpack-plugin": "^2.3.0",
-    "purgecss-webpack-plugin": "^3.1.3",
-    "purify-css": "^1.2.5",
-    "purifycss-webpack": "^0.7.0",
-    "raw-loader": "^2.0.0",
-    "resolve-url-loader": "^3.1.1",
-    "sass-loader": "^6.0.7",
-    "script-ext-html-webpack-plugin": "^2.1.4",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.20.3",
-    "stylelint": "^13.2.0",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-webpack-plugin": "^1.2.3",
-    "svg-sprite-loader": "^5.2.1",
-    "svg-transform-loader": "^2.0.13",
-    "svgo-loader": "^2.2.1",
-    "terser-webpack-plugin": "^1.4.3",
-    "ts-loader": "^6.2.1",
-    "tslint": "^5.20.1",
-    "tslint-webpack-plugin": "^2.1.0",
-    "typescript": "^3.7.5",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.44.2",
-    "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2",
-    "xml-loader": "^1.2.1"
+    "bootswatch": "^5.1.3",
+    "clean-webpack-plugin": "^3.0.0",
+    "commander": "^8.3.0",
+    "compression-webpack-plugin": "^7.1.2",
+    "copy-webpack-plugin": "^10.2.0",
+    "css-loader": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^1.2.0",
+    "ejs-loader": "^0.5.0",
+    "es6-promise": "^4.2.8",
+    "file-loader": "^6.2.0",
+    "glob": "^7.2.0",
+    "google-fonts-webpack-plugin": "^0.4.4",
+    "html-loader": "^1.3.2",
+    "html-minimizer-webpack-plugin": "^3.5.0",
+    "html-webpack-plugin": "^4.5.2",
+    "image-minimizer-webpack-plugin": "^3.2.3",
+    "imagemin": "^8.0.1",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^10.0.1",
+    "lodash": "^4.17.21",
+    "lodash-webpack-plugin": "^0.11.6",
+    "mini-css-extract-plugin": "^1.3.5",
+    "node-sass": "^5.0.0",
+    "postcss": "^8.2.4",
+    "postcss-loader": "^4.2.0",
+    "remixicon": "^2.5.0",
+    "sass-loader": "^10.1.1",
+    "string-argv": "^0.3.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4",
+    "webpack": "^5.19.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.4.0",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.16.7",
+    "bootstrap": "^4.6.0",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1"
  },
  "keywords": [
    "webppack4",
--- a/components/wifi-manager/webapp/package_old.json
+++ b/components/wifi-manager/webapp/package_old.json
@@ -0,0 +1,141 @@
+{
+  "name": "squeezelite-esp32",
+  "version": "0.5.0",
+  "main": "src/index.html",
+  "repository": "git@github.com:sle118/squeezelite-esp32.git",
+  "author": "Andy K., Sebastien",
+  "license": "MIT",
+  "scripts": {
+    "dev": "webpack-dev-server --open --config webpack/webpack.dev.js",
+    "build": "webpack --config webpack/webpack.prod.js",
+    "prod": "webpack-dev-server --open --config webpack/webpack.prod.js"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.2",
+    "@types/bootstrap": "^5.1.8",
+    "animate.css": "^4.1.1",
+    "bootstrap": "^5.1.3",
+    "bootswatch": "^5.1.3",
+    "commander": "^8.3.0",
+    "expose-loader": "^3.1.0",
+    "hamburgers": "^1.1.3",
+    "jquery": "^3.6.0",
+    "line-awesome": "^1.3.0",
+    "lodash": "^4.17.21",
+    "perfect-scrollbar": "^1.5.3",
+    "popper": "^1.0.1",
+    "react": "^17.0.2",
+    "remixicon": "^2.5.0",
+    "string-argv": "^0.3.1",
+    "stylelint-config-standard": "^24.0.0",
+    "svgo": "^2.8.0",
+    "underscore": "^1.13.2",
+    "webpack-icons-installer": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.8",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-typescript": "^7.16.7",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
+    "@types/lodash": "^4.14.178",
+    "autoprefixer": "^10.4.2",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.2.3",
+    "babel-preset-minify": "^0.5.1",
+    "body-parser": "^1.19.1",
+    "browser-sync": "^2.27.7",
+    "browser-sync-webpack-plugin": "^2.3.0",
+    "browserlist": "^1.0.1",
+    "compression-webpack-plugin": "^9.2.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.5.1",
+    "cssnano": "^5.0.15",
+    "eslint": "^8.6.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "favicons-webpack-plugin": "5.0.2",
+    "file-loader": "^6.2.0",
+    "glob": "^7.2.0",
+    "glob-all": "^3.2.1",
+    "hook-shell-script-webpack-plugin": "^0.1.4",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "image-minimizer-webpack-plugin": "^3.2.2",
+    "image-webpack-loader": "^8.1.0",
+    "imagemin": "^8.0.1",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^10.0.1",
+    "imagemin-webpack-plugin": "^2.4.2",
+    "img-loader": "^4.0.0",
+    "install": "^0.13.0",
+    "less": "^4.1.2",
+    "lodash-webpack-plugin": "^0.11.6",
+    "mini-css-extract-plugin": "^2.4.6",
+    "miragejs": "^0.1.43",
+    "node-sass": "^7.0.1",
+    "offline-plugin": "^5.0.7",
+    "on-build-webpack": "^0.1.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss-loader": "^6.2.1",
+    "preload-webpack-plugin": "^2.3.0",
+    "promise": "^8.1.0",
+    "purgecss-webpack-plugin": "^4.1.3",
+    "purify-css": "^1.2.5",
+    "purifycss-webpack": "^0.7.0",
+    "raw-loader": "^4.0.2",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.4.0",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.2.0",
+    "stylelint-config-recommended": "^6.0.0",
+    "stylelint-webpack-plugin": "^3.1.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svg-transform-loader": "^2.0.13",
+    "svgo-loader": "^3.0.0",
+    "terser-webpack-plugin": "^5.3.0",
+    "ts-loader": "^9.2.6",
+    "tslint": "^5.20.1",
+    "tslint-webpack-plugin": "^2.1.1",
+    "typescript": "^4.5.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.65.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3",
+    "webpack-merge": "^5.8.0",
+    "xml-loader": "^1.2.1"
+  },
+  "keywords": [
+    "webppack4",
+    "sass",
+    "bootstrap4",
+    "jquery",
+    "popperjs",
+    "livereload",
+    "dev-server",
+    "font-awesome",
+    "es-lint",
+    "typescript",
+    "line-awesome"
+  ]
+}
--- a/components/wifi-manager/webapp/src/index.ejs
+++ b/components/wifi-manager/webapp/src/index.ejs
@@ -5,18 +5,13 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+	<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">	
 	<title>SqueezeESP32</title>

 </head>

 <body class="d-flex flex-column">
-	<div style="display:none">
-		<% if (htmlWebpackPlugin.files.sprites) { %>
-			<% for (var spriteFileName in htmlWebpackPlugin.files.sprites) { %>
-				<%= htmlWebpackPlugin.files.sprites[spriteFileName] %>
-					<% } %>
-						<% } %>
-	</div>
 	<header class="navbar navbar-expand-sm navbar-dark  bg-primary sticky-top border-bottom border-dark" id="mainnav">
 		<a class="navbar-brand" id="navtitle" href="#">SqueezeESP32</a>
 		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
@@ -24,57 +19,34 @@
 			<span class="navbar-toggler-icon"></span>
 		</button>
 		<div class="collapse navbar-collapse" id="navbarSupportedContent">
-			<ul class="nav navbar-nav mr-auto">
-				<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-wifi">WiFi</a></li>
-				<li class="nav-item omsg"><a class="nav-link" data-toggle="tab" href="#tab-syslog">Status<span
+			<ul class="nav navbar-nav mr-auto" role="tablist">
+				<li class="nav-item"><a class="nav-link active" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-wifi">WiFi</a></li>
+				<li class="nav-item omsg"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-syslog">Status<span
 							class="badge badge-pill badge-success" id="msgcnt"></span></a></li>
-				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" href="#tab-cfg-audio">Audio</a></li>
-				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" href="#tab-cfg-syst">System</a></li>
-				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" href="#tab-cfg-hw">Hardware</a></li>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-cfg-fw">Updates</a></li>
+				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-audio">Audio</a></li>
+				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-syst">System</a></li>
+				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-hw">Hardware</a></li>
+				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-cfg-fw">Updates</a></li>
 				<div class="dropdown-divider"></div>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-nvs">NVS Editor</a></li>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-commands">Advanced</a></li>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-credits">Credits</a></li>
+				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-nvs">NVS Editor</a></li>
+				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-commands">Advanced</a></li>
+				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-credits">Credits</a></li>
 			</ul>

 		</div>
 		<div class="info navbar-right" style="display: inline-flex;">
-			<svg class="recovery_element " style="fill:orange; width:1.5rem; height: 1.5rem;">
-				<use xlink:href="#device-recover-fill"></use>
-			</svg>
-
-			<svg style="fill:white; width:1.5rem; height: 1.5rem;">
-				<use id="battery" xlink:href="#battery-fill"></use>
-			</svg>
-			<svg id="o_jack" style="fill:white; width:1.5rem; height: 1.5rem;">
-				<use xlink:href="#headphone-fill"></use>
-			</svg>
-			<svg style="fill:white; width:1.5rem; height: 1.5rem;">
-				<use id="o_bt" xlink:href="#bluetooth-fill"></use>
-			</svg>
-			<span data-toggle="tooltip" id="o_type" data-placement="top" title=""><svg
-					xmlns="http://www.w3.org/2000/svg" id="output" width="24" height="24" viewBox="0 0 24 24">
-					<g id="o_i2s" display="none">
-						<path
-							d="M2 7L2 8L2 9L2 10L2 11L2 12L2 13L2 14L2 15L2 16L2 17L3 17L3 16L3 15L3 14L3 13L3 12L3 11L3 10L3 9L3 8L2 7M6 7L6 8L6 9L7 9L7 8L8 8L9 8L10 8L10 9L11 9L11 10L11 11L10 11L10 12L9 12L9 13L8 13L8 14L7 14L7 15L6 15L6 16L6 17L7 17L8 17L9 17L10 17L11 17L12 17L12 16L11 16L10 16L9 16L8 16L8 15L9 15L9 14L10 14L10 13L11 13L11 12L12 12L12 11L12 10L12 9L12 8L11 8L11 7L10 7L9 7L8 7L6 7M16 7L16 8L15 8L15 9L15 10L15 11L16 11L16 12L17 12L18 12L18 13L19 13L20 13L21 13L21 14L21 15L20 15L20 16L19 16L18 16L17 16L16 16L16 15L15 15L15 16L15 17L16 17L17 17L18 17L19 17L20 17L21 17L21 16L22 16L22 15L22 14L22 13L21 13L21 12L20 12L20 11L19 11L18 11L17 11L16 11L16 10L16 9L17 9L17 8L18 8L19 8L20 8L21 8L21 9L22 9L22 8L22 7L21 7L20 7L19 7L18 7L16 7z" />
-					</g>
-					<g id="o_spdif" display="none">
-						<path
-							d="M3 1L3 2L2 2L2 3L2 4L2 5L3 5L3 6L4 6L5 6L5 7L6 7L7 7L8 7L8 8L8 9L7 9L7 10L6 10L5 10L4 10L3 10L3 9L2 9L2 10L2 11L3 11L4 11L5 11L6 11L7 11L8 11L8 10L9 10L9 9L9 8L9 7L8 7L8 6L7 6L7 5L6 5L5 5L4 5L3 5L3 4L3 3L4 3L4 2L5 2L6 2L7 2L8 2L8 3L9 3L9 2L9 1L8 1L7 1L6 1L5 1L3 1M13 1L13 2L13 3L13 4L12 4L12 5L12 6L12 7L12 8L11 8L11 9L11 10L11 11L10 11L10 12L10 13L11 13L11 12L11 11L12 11L12 10L12 9L12 8L13 8L13 7L13 6L13 5L14 5L14 4L14 3L14 2L15 2L15 1L13 1M16 1L16 2L16 3L16 4L16 5L16 6L16 7L16 8L16 9L16 10L16 11L17 11L17 10L17 9L17 8L17 7L18 7L19 7L20 7L21 7L21 6L22 6L22 5L22 4L22 3L22 2L21 2L21 1L20 1L19 1L18 1L16 1z" />
-						<path style="fill:#272B30;"
-							d="M17 2L17 3L17 4L17 5L17 6L18 6L19 6L20 6L20 5L21 5L21 4L21 3L20 3L20 2L19 2L17 2z" />
-						<path
-							d="M2 13L2 14L2 15L2 16L2 17L2 18L2 19L2 20L2 21L2 22L2 23L3 23L4 23L5 23L6 23L7 23L8 23L8 22L9 22L9 21L10 21L10 20L10 19L10 18L10 17L10 16L10 15L9 15L9 14L8 14L7 14L7 13L6 13L5 13L4 13L2 13M13 13L13 14L13 15L13 16L13 17L13 18L13 19L13 20L13 21L13 22L13 23L14 23L14 22L14 21L14 20L14 19L14 18L14 17L14 16L14 15L14 14L13 13M17 13L17 14L17 15L17 16L17 17L17 18L17 19L17 20L17 21L17 22L17 23L18 23L18 22L18 21L18 20L18 19L18 18L19 18L20 18L21 18L22 18L22 17L21 17L20 17L19 17L18 17L18 16L18 15L18 14L19 14L20 14L21 14L22 14L22 13L21 13L20 13L19 13L17 13z" />
-						<path style="fill:#272B30;"
-							d="M3 14L3 15L3 16L3 17L3 18L3 19L3 20L3 21L3 22L4 22L5 22L6 22L7 22L7 21L8 21L8 20L9 20L9 19L9 18L9 17L9 16L8 16L8 15L7 15L7 14L6 14L5 14L3 14z" />
-					</g>
-				</svg></span>
-			<svg style="fill:white; width:1.5rem; height: 1.5rem;">
-				<use id="wifiStsIcon" xlink:href="#signal-wifi-fill"></use>
-			</svg>
-
-
+			<span class="recovery_element material-icons "  style="color:orange; display: none" >system_update_alt</span>
+			<span id="battery" class="material-icons" style="fill:white; display: none">battery_full</span>
+			<span id="o_jack" class="material-icons" style="fill:white; display: none">headphones</span>
+			<span id="s_airplay" class="material-icons"  style="fill:white; display: none">airplay</span>
+			<em id="s_cspot" class="fab fa-spotify" style="fill:white; display: inline"></em>
+			<span data-toggle="tooltip" id="o_type" data-placement="top" title="">
+				<span id="o_bt" class="material-icons" style="fill:white; display: none" >bluetooth</span>
+				<span id="o_spdif" class="material-icons" style="fill:white; display: none" >graphic_eq</span>
+				<span id="o_i2s" class="material-icons" style="fill:white; display: none" >speaker</span>
+			</span>
+			<span id="ethernet" class="material-icons if_eth" style="fill:white; display: none" >cable</span>
+			<span id="wifiStsIcon" class="material-icons if_wifi" style="fill:white; display: none">signal_wifi_statusbar_4_bar</span>

 		</div>
 	</header>
@@ -108,7 +80,7 @@
 		
 		<div id="myTabContent" class="tab-content">

-			<div class="tab-pane fade" id="tab-cfg-hw"></div>
+			<div class="tab-pane fade" id="tab-cfg-hw">			</div>
 			<div class="tab-pane fade" id="tab-cfg-syst"></div>
 			<div class="tab-pane fade" id="tab-cfg-gen"></div>
 			<div class="tab-pane fade" id="tab-cfg-fw">
@@ -159,7 +131,7 @@
 							</div>
 							
 							<div class="col-auto">
-								<button class="btn-warning ota_element" type="submit" onclick="handleReboot('recovery');" >Recovery</button>
+								<button id="btn_reboot_recovery" class="btn-warning ota_element" type="submit" >Recovery</button>
 							</div>
 						</div>

@@ -179,8 +151,7 @@
 							</div>
 							<div class="modal-footer  ">
 								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-								<button type="button" class="btn btn-warning" data-dismiss="modal"
-									onclick="hFlash();">Ok</button>
+								<button id="btn_flash" type="button" class="btn btn-warning" data-dismiss="modal" >Ok</button>
 							</div>
 						</div>
 					</div>
@@ -218,13 +189,12 @@
 				</tbody>
 			</table>
 			<div class="buttons">
-				<button button id="reboot-button"  class="btn btn-primary" style="float:right" type="submit" onclick="handleReboot('reboot');" >Reboot</button>
+				<button button id="btn_reboot"  class="btn btn-primary" style="float:right" type="submit"  >Reboot</button>
 				
 				<input id="save-nvs" type="button" class="btn btn-success" value="Commit">
 				<input id="save-as-nvs" type="button" class="btn btn-success" value="Download config">
 				<input id="load-nvs" type="button" class="btn btn-success" value="Load File">
-				<input aria-describedby="fileHelp" onchange="onChooseFile(event, onFileLoad.bind(this))"
-					id="nvsfilename" type="file" style="display:none">
+				<input aria-describedby="fileHelp" id="nvsfilename" type="file" style="display:none">
 			</div>
 		</div>

@@ -274,10 +244,8 @@
 									onclick="hideSurrounding(this)"><span aria-hidden="true">×</span></button></div>
 							<div class="toast-body" id="msg_cfg-audio-tmpl"></div>
 						</div>
-						<button id="save-autoexec1" type="submit" class="btn btn-info" cmdname="cfg-audio-tmpl"
-							onclick="saveAutoexec1(false)">Save</button>
-						<button id="commit-autoexec1" type="submit" class="btn btn-warning" cmdname="cfg-audio-tmpl"
-							onclick="saveAutoexec1(true)">Apply</button>
+						<button id="save-autoexec1" type="submit" class="btn btn-info" cmdname="cfg-audio-tmpl">Save</button>
+						<button id="commit-autoexec1" type="submit" class="btn btn-warning" cmdname="cfg-audio-tmpl">Apply</button>
 					</fieldset>
 				</div>
 			</div>
@@ -285,7 +253,11 @@
 		<div class="tab-pane fade active show" id="tab-wifi">
 			<div class="card text-white  mb-3">
 				<div class="card-header">WiFi Status</div>
-				<div class="card-body">
+				<div class="card-body if_eth" style="display: none">
+					<h2>Connected to Ethernet</h2>
+					<p>WiFi is inactive while connected to a wired network.
+				</div>
+				<div class="card-body if_wifi" style="display: none" >
 					<table class="table table-hover">
 						<thead>
 							<tr>
@@ -316,8 +288,7 @@
 							</div>
 							<div class="modal-footer connecting-success connecting-status">
 								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-								<button type="button" class="btn btn-warning" data-dismiss="modal"
-									onclick="handleDisconnect();">Ok</button>
+								<button id="btn_disconnect" type="button" class="btn btn-warning" data-dismiss="modal">Ok</button>
 							</div>
 						</div>
 					</div>
@@ -367,8 +338,7 @@
 									class="btn btn-secondary connecting-init connecting-fail connecting"
 									data-dismiss="modal">Close</button>
 								<button type="button" id="btnJoin"
-									class="btn btn-primary connecting-init connecting-fail"
-									onclick="handleConnect();">Join</button>
+									class="btn btn-primary connecting-init connecting-fail">Join</button>
 								<button type="button" class="connecting btn btn-primary" disabled>
 									<span class="spinner-border spinner-border-sm" role="status"
 										aria-hidden="true"></span>
@@ -498,9 +468,9 @@
 	<footer>
 		<div class="fixed-bottom d-flex justify-content-between  border-top border-dark p-3 bg-primary">
 			<span class="text-center" id="foot-fw"></span><button class="btn-warning ota_element " id="reboot_nav"
-				type="submit" onclick="handleReboot('reboot');" style="display: none;">Reboot</button>
-			<button class="btn-warning recovery_element" id="reboot_ota_nav" type="submit" onclick="handleReboot('reboot_ota');"
-				style="display: none;">Exit Recovery</button><span class="text-center" id="foot-wifi"></span>
+				type="submit" style="display: none;">Reboot</button>
+			<button class="btn-warning recovery_element" id="reboot_ota_nav" type="submit" 
+				style="display: none;">Exit Recovery</button><span class="text-center" id="foot-if"></span>
 		</div>

 	</footer>
--- a/components/wifi-manager/webapp/src/index.ts
+++ b/components/wifi-manager/webapp/src/index.ts
@@ -1,24 +1,6 @@
 //import $ from "jquery";
+//import * as _ from 'lodash';
 import 'bootstrap';
-import '../src/sass/main.scss';
-import '../node_modules/remixicon/icons/Device/signal-wifi-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-3-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-2-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-1-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-line.svg';
-import '../node_modules/remixicon/icons/Device/battery-line.svg';
-import '../node_modules/remixicon/icons/Device/battery-low-line.svg';
-import '../node_modules/remixicon/icons/Device/battery-fill.svg';
-
-import '../node_modules/remixicon/icons/Media/headphone-fill.svg';
-import '../node_modules/remixicon/icons/Device/device-recover-fill.svg';
-import '../node_modules/remixicon/icons/Device/bluetooth-fill.svg';
-import '../node_modules/remixicon/icons/Device/bluetooth-connect-fill.svg';
-import '../node_modules/remixicon/icons/Media/stop-circle-fill.svg';
-import '../node_modules/remixicon/icons/Media/play-circle-fill.svg';
-import '../node_modules/remixicon/icons/Media/pause-circle-fill.svg';
-import '../node_modules/remixicon/icons/System/lock-fill.svg';
-import '../node_modules/remixicon/icons/System/lock-unlock-fill.svg';
+import './sass/main.scss';
 import './assets/images/favicon-32x32.png';
 import './js/custom.js'; 
-// <%= `<svg><use xlink:href="#${htmlWebpackPlugin.files.sprites.svg.defs.symbol[s].id}"></use></svg>` %>
--- a/components/wifi-manager/webapp/src/js/custom.js
+++ b/components/wifi-manager/webapp/src/js/custom.js
@@ -14,7 +14,7 @@ if (!String.prototype.format) {
 if (!String.prototype.encodeHTML) {
  Object.assign(String.prototype, {
    encodeHTML() {
-      return he.encode(this).replace(/\n/g, '<br />')
+      return he.encode(this).replace(/\n/g, '<br />');
    },
  });
 }
@@ -24,7 +24,9 @@ Object.assign(Date.prototype, {
    return this.toLocaleString(undefined, opt);
  },
 });
-
+function isEnabled(val){
+  return val.match("[Yy1]");
+}

 const nvsTypes = {
  NVS_TYPE_U8: 0x01,
@@ -70,7 +72,12 @@ const btIcons = {
  stop:  'stop-circle-fill',
  '': '',
 };
-
+const batIcons = [
+  { icon: "battery_0_bar", ranges: [ {f: 5.8, t: 6.8},{f: 8.8, t: 10.2}    ]},
+  { icon: "battery_2_bar", ranges: [ {f: 6.8, t: 7.4},{f: 10.2, t: 11.1}    ]},
+  { icon: "battery_3_bar", ranges: [ {f: 7.4, t: 7.5},{f: 11.1, t: 11.25}    ]},
+  { icon: "battery_4_bar", ranges: [ {f: 7.5, t: 7.8},{f: 11.25, t: 11.7}    ]}
+];
 const btStateIcons = [
  { desc: 'Idle', sub: ['bt_neutral'] },
  { desc: 'Discovering', sub: ['bt_disconnected'] },
@@ -90,11 +97,12 @@ const pillcolors = {
  MESSAGING_ERROR: 'badge-danger',
 };
 const connectReturnCode = {
-  UPDATE_CONNECTION_OK : 0, 
-	UPDATE_FAILED_ATTEMPT : 1,
-	UPDATE_USER_DISCONNECT : 2,
-  UPDATE_LOST_CONNECTION : 3,
-  UPDATE_FAILED_ATTEMPT_AND_RESTORE : 4
+  OK : 0, 
+	FAIL : 1,
+	DISC : 2,
+  LOST : 3,
+  RESTORE : 4,
+  ETH : 5
 }
 const taskStates = {
  0: 'eRunning',
@@ -120,6 +128,9 @@ let flash_state=flash_status_codes.FLASH_NONE;
 let flash_ota_dsc='';
 let flash_ota_pct=0;
 let older_recovery=false;
+let presetsloaded=false;
+let is_i2c_locked=false;
+
 function isFlashExecuting(data){
  return (flash_state!=flash_status_codes.UPLOADING ) && (data.ota_dsc!='' || data.ota_pct>0);
 }
@@ -382,25 +393,16 @@ function handlebtstate(data) {
  
 }
 function handleTemplateTypeRadio(outtype) {
+  $('#o_type').children('span').css({ display : 'none' });
  if (outtype === 'bt') {
-    $('#bt').prop('checked', true);
-    $('#o_bt').attr('display', 'inline');
-    $('#o_spdif').attr('display', 'none');
-    $('#o_i2s').attr('display', 'none');
    output = 'bt';
  } else if (outtype === 'spdif') {
-    $('#spdif').prop('checked', true);
-    $('#o_bt').attr('display', 'none');
-    $('#o_spdif').attr('display', 'inline');
-    $('#o_i2s').attr('display', 'none');
    output = 'spdif';
  } else {
-    $('#i2s').prop('checked', true);
-    $('#o_bt').attr('display', 'none');
-    $('#o_spdif').attr('display', 'none');
-    $('#o_i2s').attr('display', 'inline');
    output = 'i2s';
  }
+  $('#'+output).prop('checked', true);
+  $('#o_'+output).css({ display : 'inline' });
 }

 function handleExceptionResponse(xhr, _ajaxOptions, thrownError) {
@@ -465,8 +467,9 @@ let versionName='Squeezelite-ESP32';
 let prevmessage='';
 let project_name=versionName;
 let platform_name=versionName;
+let preset_name='';
 let btSinkNamesOptSel='#cfg-audio-bt_source-sink_name';
-let ConnectedToSSID={};
+let ConnectedTo={};
 let ConnectingToSSID={};
 let lmsBaseUrl;
 let prevLMSIP='';
@@ -546,47 +549,36 @@ function getConfigJson(slimMode) {
  return config;
 }

-// eslint-disable-next-line no-unused-vars
-function onFileLoad(elementId, event) {
-  let data = {};
-  try {
-    data = JSON.parse(elementId.srcElement.result);
-  } catch (e) {
-    alert('Parsing failed!\r\n ' + e);
-  }
-  $('input.nvs').each(function(_index, entry) {
-    if (data[entry.id]) {
-      if (data[entry.id] !== entry.value) {
-        console.log(
-          'Changed ' + entry.id + ' ' + entry.value + '==>' + data[entry.id]
-        );
-        $(this).val(data[entry.id]);
+
+
+// pull json file from https://gist.githubusercontent.com/sle118/dae585e157b733a639c12dc70f0910c5/raw/b462691f69e2ad31ac95c547af6ec97afb0f53db/squeezelite-esp32-presets.json and
+// load the names into cfg-hw-preset-model_name
+function loadPresets() {
+  if(presetsloaded) return;
+  presetsloaded = true;
+  $.getJSON(
+    'https://gist.githubusercontent.com/sle118/dae585e157b733a639c12dc70f0910c5/raw/b462691f69e2ad31ac95c547af6ec97afb0f53db/squeezelite-esp32-presets.json',
+    function(data) {
+      $.each(data, function(key, val) {
+          $('#cfg-hw-preset-model_config').append(`<option value="${JSON.stringify(val).replace(/\"/g, '\'')}">${val.name}</option>`);
+      });
+      if(preset_name !== ''){
+        ('#prev_preset').show().val(preset_name);
      }
+      console.log('update prev_preset in case of a change');
    }
-  });
+
+  ).fail(function(jqxhr, textStatus, error) {
+    const err = textStatus + ', ' + error;
+    console.log('Request Failed: ' + err);
+    $('hw-preset-section').hide();
+  }
+  );
 }

-// eslint-disable-next-line no-unused-vars
-function onChooseFile(event, onLoadFileHandler) {
-  if (typeof window.FileReader !== 'function') {
-    throw "The file API isn't supported on this browser.";
-  }
-  const input = event.target;
-  if (!input) {
-    throw 'The browser does not properly implement the event object';
-  }
-  if (!input.files) {
-    throw 'This browser does not support the `files` property of the file input.';
-  }
-  if (!input.files[0]) {
-    return undefined;
-  }
-  const file = input.files[0];
-  let fr = new FileReader();
-  fr.onload = onLoadFileHandler;
-  fr.readAsText(file);
-  input.value = '';
-}
+        
+
+
 function delayReboot(duration, cmdname, ota = 'reboot') {
  const url = '/'+ota+'.json';
  $('tbody#tasks').empty();
@@ -672,14 +664,14 @@ window.saveAutoexec1 = function(apply) {
    error: handleExceptionResponse,
    complete: function(response) {
      if (
-        response.responseText.result &&
+        response.responseText &&
        JSON.parse(response.responseText).result === 'OK'
      ) {
        showCmdMessage('cfg-audio-tmpl', 'MESSAGING_INFO', 'Done.\n', true);
        if (apply) {
          delayReboot(1500, 'cfg-audio-tmpl');
        }
-      } else if (response.responseText.result) {
+      } else if (JSON.parse(response.responseText).result) {
        showCmdMessage(
          'cfg-audio-tmpl',
          'MESSAGING_WARNING',
@@ -798,6 +790,51 @@ $(document).ready(function() {
  $('#load-nvs').on('click', function() {
    $('#nvsfilename').trigger('click');
  });
+  $('#nvsfilename').on('change', function() {
+    if (typeof window.FileReader !== 'function') {
+      throw "The file API isn't supported on this browser.";
+    }
+    if (!this.files) {
+      throw 'This browser does not support the `files` property of the file input.';
+    }
+    if (!this.files[0]) {
+      return undefined;
+    }
+    
+    const file = this.files[0];
+    let fr = new FileReader();
+    fr.onload = function(e){
+      let data = {};
+      try {
+        data = JSON.parse(e.target.result);
+      } catch (ex) {
+        alert('Parsing failed!\r\n ' + ex);
+      }
+      $('input.nvs').each(function(_index, entry) {
+        $(this).parent().removeClass('bg-warning').removeClass('bg-success');
+        if (data[entry.id]) {
+          if (data[entry.id] !== entry.value) {
+            console.log(
+              'Changed ' + entry.id + ' ' + entry.value + '==>' + data[entry.id]
+            );
+            $(this).parent().addClass('bg-warning');
+            $(this).val(data[entry.id]);
+          }
+          else {
+            $(this).parent().addClass('bg-success');
+          }
+        }
+      });
+      var changed = $("input.nvs").children('.bg-warning');
+      if(changed) {
+        alert('Highlighted values were changed. Press Commit to change on the device');
+      }
+    }
+    fr.readAsText(file);
+    this.value = null;
+    
+  }
+  );
  $('#clear-syslog').on('click', function() {
    messagecount = 0;
    messageseverity = 'MESSAGING_INFO';
@@ -807,7 +844,7 @@ $(document).ready(function() {
  
  $('#wifiTable').on('click','tr', function() {
    ConnectingToSSID.Action=ConnectingToActions.CONN;
-    if($(this).children('td:eq(1)').text() == ConnectedToSSID.ssid){
+    if($(this).children('td:eq(1)').text() == ConnectedTo.ssid){
      ConnectingToSSID.Action=ConnectingToActions.STS;
       return;
     }
@@ -853,6 +890,39 @@ $(document).ready(function() {
      $('*[href*="-nvs"]').hide();
    }
  });
+ $('#btn-save-cfg-hw-preset').on('click', function(){
+  runCommand(this,false);
+ });
+ $('#btn-commit-cfg-hw-preset').on('click', function(){
+  runCommand(this,true);
+ });
+ $('#btn_reboot_recovery').on('click',function(){
+  handleReboot('recovery');
+ });
+ $('#btn_reboot').on('click',function(){
+  handleReboot('reboot');
+ });
+ $('#btn_flash').on('click',function(){
+  hFlash();
+ });
+ $('#save-autoexec1').on('click',function(){
+  saveAutoexec1(false);
+ });
+ $('#commit-autoexec1').on('click',function(){
+  saveAutoexec1(true);
+ });
+ $('#btn_disconnect').on('click',function(){
+  handleDisconnect();
+ });
+ $('#btnJoin').on('click',function(){
+  handleConnect();
+ });
+ $('#reboot_nav').on('click',function(){
+  handleReboot('reboot');
+ });
+ $('#reboot_ota_nav').on('click',function(){
+  handleReboot('reboot_ota');
+ });
 
  $('#save-as-nvs').on('click', function() {
    const config = getConfigJson(true);
@@ -1061,6 +1131,7 @@ $(document).ready(function() {

  // start timers
  startCheckStatusInterval();
+  
 });

 // eslint-disable-next-line no-unused-vars
@@ -1085,19 +1156,20 @@ window.setURL = function(button) {

 function rssiToIcon(rssi) {
  if (rssi >= -55) {
-    return `signal-wifi-fill`;
+    return `signal_wifi_statusbar_4_bar`;
  } else if (rssi >= -60) {
-    return `signal-wifi-3-fill`;
+    return `network_wifi_3_bar`;
  } else if (rssi >= -65) {
-    return `signal-wifi-2-fill`;
+    return `network_wifi_2_bar`;
  } else if (rssi >= -70) {
-    return `signal-wifi-1-fill`;
+    return `network_wifi_1_bar`;
  } else {   
-    return `signal-wifi-line`;
+    return `signal_wifi_statusbar_null`;
  }
 }

 function refreshAP() {
+    if( ConnectedTo.urc === connectReturnCode.ETH) return;
    $.getJSON('/scan.json', async function() {
    await sleep(2000);
    $.getJSON('/ap.json', function(data) {
@@ -1118,13 +1190,9 @@ function refreshAP() {
 }
 function formatAP(ssid, rssi, auth){
  return `<tr data-toggle="modal" data-target="#WifiConnectDialog"><td></td><td>${ssid}</td><td>
-  
-  	<svg style="fill:white; width:1.5rem; height: 1.5rem;">
-				<use xlink:href="#${rssiToIcon(rssi)}"></use>
-			</svg>
-  </td><td>
- 
-  <svg style="fill:white; width:1.5rem; height: 1.5rem;">
+  <span class="material-icons" style="fill:white; display: inline" >${rssiToIcon(rssi)}</span>
+  	</td><td>
+   <svg style="fill:white; width:1.5rem; height: 1.5rem;">
  <use xlink:href="#lock${(auth == 0 ? '-unlock':'')}-fill"></use>
 </svg>

@@ -1132,6 +1200,7 @@ function formatAP(ssid, rssi, auth){
 }
 function refreshAPHTML2(data) {
  let h = '';
+  $('#tab-wifi').show();
  $('#wifiTable tr td:first-of-type').text('');
  $('#wifiTable tr').removeClass('table-success table-warning');
  if(data){
@@ -1144,20 +1213,30 @@ function refreshAPHTML2(data) {
    $('#wifiTable').append(formatAP('Manual add', 0,0));
    $('#wifiTable tr:last').addClass('table-light text-dark').addClass('manual_add');
  }
-  if(ConnectedToSSID.ssid && ( ConnectedToSSID.urc === connectReturnCode.UPDATE_CONNECTION_OK || ConnectedToSSID.urc === connectReturnCode.UPDATE_FAILED_ATTEMPT_AND_RESTORE )){
-    const wifiSelector=`#wifiTable td:contains("${ConnectedToSSID.ssid}")`;
-    if($(wifiSelector).filter(function() {return $(this).text() === ConnectedToSSID.ssid;  }).length==0){
-      $('#wifiTable').prepend(`${formatAP(ConnectedToSSID.ssid, ConnectedToSSID.rssi ?? 0, 0)}`);
+  if(ConnectedTo.ssid && ( ConnectedTo.urc === connectReturnCode.OK || ConnectedTo.urc === connectReturnCode.RESTORE )){
+    const wifiSelector=`#wifiTable td:contains("${ConnectedTo.ssid}")`;
+    if($(wifiSelector).filter(function() {return $(this).text() === ConnectedTo.ssid;  }).length==0){
+      $('#wifiTable').prepend(`${formatAP(ConnectedTo.ssid, ConnectedTo.rssi ?? 0, 0)}`);
    }
-    $(wifiSelector).filter(function() {return $(this).text() === ConnectedToSSID.ssid;  }).siblings().first().html('&check;').parent().addClass((ConnectedToSSID.urc === connectReturnCode.UPDATE_CONNECTION_OK?'table-success':'table-warning'));
-    $('span#foot-wifi').html(`SSID: <strong>${ConnectedToSSID.ssid}</strong>, IP: <strong>${ConnectedToSSID.ip}</strong>`);    
-    $('#wifiStsIcon').attr('xlink:href',rssiToIcon(ConnectedToSSID.rssi));
+    $(wifiSelector).filter(function() {return $(this).text() === ConnectedTo.ssid;  }).siblings().first().html('&check;').parent().addClass((ConnectedTo.urc === connectReturnCode.OK?'table-success':'table-warning'));
+    $('span#foot-if').html(`SSID: <strong>${ConnectedTo.ssid}</strong>, IP: <strong>${ConnectedTo.ip}</strong>`);    
+    $('#wifiStsIcon').html(rssiToIcon(ConnectedTo.rssi));
+    $(".if_eth").hide();
+    $('.if_wifi').show();
  }
-  else {
-    $('span#foot-wifi').html('');
+  else if(ConnectedTo.urc !== connectReturnCode.ETH){
+    $('span#foot-if').html('');
  }
  
 }
+function refreshETH() {
+  
+  $(".if_eth").show();
+  $('.if_wifi').hide();
+  if(ConnectedTo.urc === connectReturnCode.ETH ){
+    $('span#foot-if').html(`Network: Ethernet, IP: <strong>${ConnectedTo.ip}</strong>`);    
+  }
+}
 function showTask(task) {
  console.debug(
    this.toLocaleString() +
@@ -1342,25 +1421,25 @@ function hasConnectionChanged(data){
 // netmask: "255.255.255.0"
 // ssid: "MyTestSSID"

-  return (data.urc !== ConnectedToSSID.urc || 
-    data.ssid !== ConnectedToSSID.ssid || 
-    data.gw !== ConnectedToSSID.gw  ||
-    data.netmask !== ConnectedToSSID.netmask ||
-    data.ip !== ConnectedToSSID.ip || data.rssi !== ConnectedToSSID.rssi )
+  return (data.urc !== ConnectedTo.urc || 
+    data.ssid !== ConnectedTo.ssid || 
+    data.gw !== ConnectedTo.gw  ||
+    data.netmask !== ConnectedTo.netmask ||
+    data.ip !== ConnectedTo.ip || data.rssi !== ConnectedTo.rssi )
 }
 function handleWifiDialog(data){
  if($('#WifiConnectDialog').is(':visible')){
-    if(ConnectedToSSID.ip) {
-      $('#ipAddress').text(ConnectedToSSID.ip);
+    if(ConnectedTo.ip) {
+      $('#ipAddress').text(ConnectedTo.ip);
    }
-    if(ConnectedToSSID.ssid) {
-      $('#connectedToSSID' ).text(ConnectedToSSID.ssid);
+    if(ConnectedTo.ssid) {
+      $('#connectedToSSID' ).text(ConnectedTo.ssid);
    }    
-    if(ConnectedToSSID.gw) {
-      $('#gateway' ).text(ConnectedToSSID.gw);
+    if(ConnectedTo.gw) {
+      $('#gateway' ).text(ConnectedTo.gw);
    }        
-    if(ConnectedToSSID.netmask) {
-      $('#netmask' ).text(ConnectedToSSID.netmask);
+    if(ConnectedTo.netmask) {
+      $('#netmask' ).text(ConnectedTo.netmask);
    }            
    if(ConnectingToSSID.Action===undefined || (ConnectingToSSID.Action && ConnectingToSSID.Action == ConnectingToActions.STS)) {
      $("*[class*='connecting']").hide();
@@ -1378,30 +1457,30 @@ function handleWifiDialog(data){
    }
    else {
      switch (data.urc) {
-        case connectReturnCode.UPDATE_CONNECTION_OK:
+        case connectReturnCode.OK:
          if(data.ssid && data.ssid===ConnectingToSSID.ssid){
            $("*[class*='connecting']").hide();
            $('.connecting-success').show();            
            ConnectingToSSID.Action = ConnectingToActions.STS;
          }
          break;
-          case connectReturnCode.UPDATE_FAILED_ATTEMPT:
+          case connectReturnCode.FAIL:
          // 
          if(ConnectingToSSID.Action !=ConnectingToActions.STS && ConnectingToSSID.ssid == data.ssid ){
            $("*[class*='connecting']").hide();
            $('.connecting-fail').show();
          }
          break;
-          case connectReturnCode.UPDATE_LOST_CONNECTION:
+          case connectReturnCode.LOST:
    
          break;            
-          case connectReturnCode.UPDATE_FAILED_ATTEMPT_AND_RESTORE:
+          case connectReturnCode.RESTORE:
            if(ConnectingToSSID.Action !=ConnectingToActions.STS && ConnectingToSSID.ssid != data.ssid ){
              $("*[class*='connecting']").hide();
              $('.connecting-fail').show();
            }
          break;
-        case connectReturnCode.UPDATE_USER_DISCONNECT:
+        case connectReturnCode.DISC:
            // that's a manual disconnect
            // if ($('#wifi-status').is(':visible')) {
            //   $('#wifi-status').slideUp('fast', function() {});
@@ -1416,14 +1495,22 @@ function handleWifiDialog(data){

  }
 }
-function handleWifiStatus(data) {
+function handleNetworkStatus(data) {
  if(hasConnectionChanged(data)){
-    ConnectedToSSID=data;
-    refreshAPHTML2();
+    ConnectedTo=data;
+    if(ConnectedTo.urc == connectReturnCode.ETH ){
+      refreshETH();
+    } 
+    else {
+      refreshAPHTML2();
+    }
+
  }
  handleWifiDialog(data);
 }

+
+
 function batteryToIcon(voltage) {
        /* Assuming Li-ion 18650s as a power source, 3.9V per cell, or above is treated
 				as full charge (>75% of capacity).  3.4V is empty. The gauge is loosely
@@ -1431,25 +1518,17 @@ function batteryToIcon(voltage) {
 					https://learn.adafruit.com/li-ion-and-lipoly-batteries/voltages
 				using the 0.2C discharge profile for the rest of the values.
 			*/
-  if (voltage > 0) {
-    if (inRange(voltage, 5.8, 6.8) || inRange(voltage, 8.8, 10.2)) {
-      return `battery-low-line`;
-    } else if (inRange(voltage, 6.8, 7.4) || inRange(voltage, 10.2, 11.1)) {
-      return `battery-low-line`;
-    } else if (
-      inRange(voltage, 7.4, 7.5) ||
-      inRange(voltage, 11.1, 11.25)
-    ) {
-      return `battery-low-line`;
-    } else if (
-      inRange(voltage, 7.5, 7.8) ||
-      inRange(voltage, 11.25, 11.7)
-    ) {
-      return `battery-fill`;
-    } else {
-      return `battery-line`;
+
+  for (const iconEntry of batIcons) {
+    for (const entryRanges of iconEntry.ranges ) {
+      if(inRange(voltage,entryRanges.f, entryRanges.t)){
+        return iconEntry.icon;
+      }
    }
  }
+  
+    
+  return "battery_full";
 }
 function checkStatus() {
  RepeatCheckStatusInterval();
@@ -1460,7 +1539,7 @@ function checkStatus() {
  getMessages();
  $.getJSON('/status.json', function(data) {
    handleRecoveryMode(data);
-    handleWifiStatus(data);
+    handleNetworkStatus(data);
    handlebtstate(data);
    handle_flash_state({
      ota_pct: (data.ota_pct ?? -1),
@@ -1481,7 +1560,7 @@ function checkStatus() {
      $('span#flash-status').html('');
    }
    if (data.Voltage) {
-     $('#battery').attr('xlink:href', `#${batteryToIcon(data.Voltage)}`);
+     $('#battery').html( `${batteryToIcon(data.Voltage)}`);
     $('#battery').show();
    } else {
      $('#battery').hide();
@@ -1491,6 +1570,13 @@ function checkStatus() {
      prevmessage = data.message;
      showLocalMessage(data.message, 'MESSAGING_INFO')
    }
+    is_i2c_locked = data.is_i2c_locked;
+    if(is_i2c_locked){
+      $('flds-cfg-hw-preset').hide();
+    }
+    else {
+      $('flds-cfg-hw-preset').show();
+    }
    $("button[onclick*='handleReboot']").removeClass('rebooting');

    if (typeof lmsBaseUrl == "undefined" || data.lms_ip != prevLMSIP && data.lms_ip && data.lms_port) {
@@ -1511,7 +1597,7 @@ function checkStatus() {
      });
    }
    
-    $('#o_jack').attr('display', Number(data.Jack) ? 'inline' : 'none');
+    $('#o_jack').css({ display : Number(data.Jack) ? 'inline' : 'none' });
    blockAjax = false;
  }).fail(function(xhr, ajaxOptions, thrownError) {
    handleExceptionResponse(xhr, ajaxOptions, thrownError);
@@ -1595,12 +1681,10 @@ window.runCommand = function(button, reboot) {
      }
    },
    success: function(response) {
-      // var returnedResponse = JSON.parse(response.responseText);
      $('.orec').show();
-      console.log(response.responseText);
+      console.log(response);
      if (
-        response.responseText &&
-        JSON.parse(response.responseText).Result === 'Success' &&
+        JSON.parse(response).Result === 'Success' &&
        reboot
      ) {
        delayReboot(2500, button.attributes.cmdname.value);
@@ -1769,6 +1853,7 @@ function getCommands() {
        });
      }
    });
+    loadPresets();
  }).fail(function(xhr, ajaxOptions, thrownError) {
    if(xhr.status==404){
      $('.orec').hide();
@@ -1817,6 +1902,17 @@ function getConfig() {
        } else if (key === 'rel_api') {
           releaseURL = val;
        }
+        else if (key === 'enable_airplay') {
+          $("#s_airplay").css({ display : isEnabled(val) ? 'inline' : 'none' })
+        }
+        else if (key === 'enable_cspot') {
+          $("#s_cspot").css({ display : isEnabled(val) ? 'inline' : 'none' })
+        }
+        else if (key == 'preset_name') {
+          preset_name = val;
+        }
+        
+        
        $('tbody#nvsTable').append(
          '<tr>' +
            '<td>' +
--- a/components/wifi-manager/webapp/src/js/test.js
+++ b/components/wifi-manager/webapp/src/js/test.js
@@ -2,7 +2,7 @@ let sd = {};
 let rf=false;
 function getStatus() {
        const config = {};
-        window.$(`#valuesTable input:text,  #valuesTable input:checked`).each(function(_index, entry) {
+        $(`#valuesTable input:text,  #valuesTable input:checked`).each(function(_index, entry) {
            switch (entry.attributes.dtype.value) {
                case 'string':
                    config[entry.name] = entry.value;
@@ -42,11 +42,11 @@ function getStatus() {

    }

-    window.refreshStatus = function() {
+    var refreshStatus = function() {
        if(Object.keys(sd).length>0){
            if(rf) return;
            rf=true;
-            window.$.getJSON('/status.json', function(data) {
+            $.getJSON('/status.json', function(data) {
                for (const property in data) {
                    const val = data[property];
                    let input = $(`#val_${property}, #valuesTable input[name="${property}"]`) ;
@@ -64,7 +64,7 @@ function getStatus() {
                    else {
                        
                        if(sd[property]){
-                            window.$('#valuesTable').append(
+                            $('#valuesTable').append(
                                `<tr><td>${property}</td>
                                <td >
                                ${getRadioButton(property)}
@@ -72,8 +72,8 @@ function getStatus() {
                            $(`#${property}_${val ?? 0}`).prop('checked',true);
                        }
                        else {
-                            window.$('#valuesTable').append(`<tr><td>${property}</td><td><input type='text' class='value form-control nvs' id="val_${property}" name='${property}' dtype='${typeof(val)}' ></input></td></tr>`);
-                            window.$(`#val_${property}`).val(val);
+                            $('#valuesTable').append(`<tr><td>${property}</td><td><input type='text' class='value form-control nvs' id="val_${property}" name='${property}' dtype='${typeof(val)}' ></input></td></tr>`);
+                            $(`#val_${property}`).val(val);
                        }


@@ -90,7 +90,7 @@ function getStatus() {

        }
        else {
-            window.$.getJSON('/statusdefinition.json', function(data) {
+            $.getJSON('/statusdefinition.json', function(data) {
                sd=data;
            })
            .fail(function() {
@@ -106,7 +106,7 @@ function getStatus() {
                timestamp: Date.now(),
                status:  getStatus()
            };
-            window.$.ajax({
+            $.ajax({
                url: '/status.json',
                dataType: 'text',
                method: 'POST',
@@ -117,15 +117,15 @@ function getStatus() {
            console.log('sent config JSON with data:', JSON.stringify(data));
    }

-    window.$(document).ready(function() {
-        window.$('#save_status').on('click', function() {
+    $(document).ready(function() {
+        $('#save_status').on('click', function() {
            pushStatus();
        });            
-        window.$( "#valuesTable" ).change(function() {
+        $( "#valuesTable" ).change(function() {
            pushStatus();
        });            
        
-        setInterval(window.refreshStatus, 1000);
+        setInterval(refreshStatus, 1000);
        $('svg >> symbol').each(function() { 
            $('#allIcons').append( `<svg style="fill:white; width:1.5rem; height: 1.5rem;">
            <use xlink:href="#${this.id}"></use>
--- a/components/wifi-manager/webapp/src/sass/layout/_features.scss
+++ b/components/wifi-manager/webapp/src/sass/layout/_features.scss
@@ -1,34 +0,0 @@
-// .features:hover {
-//   cursor: pointer;
-//   animation: jello-horizontal 1.2s;
-// }
-
-// @keyframes jello-horizontal {
-//   0% {
-//     transform: scale3d(1, 1, 1);
-//   }
-
-//   30% {
-//     transform: scale3d(1.25, .75, 1);
-//   }
-
-//   40% {
-//     transform: scale3d(.75, 1.25, 1);
-//   }
-
-//   50% {
-//     transform: scale3d(1.15, .85, 1);
-//   }
-
-//   65% {
-//     transform: scale3d(.95, 1.05, 1);
-//   }
-
-//   75% {
-//     transform: scale3d(1.05, .95, 1);
-//   }
-
-//   100% {
-//     transform: scale3d(1, 1, 1);
-//   }
-// }
--- a/components/wifi-manager/webapp/src/sass/main.scss
+++ b/components/wifi-manager/webapp/src/sass/main.scss
@@ -1,5 +1,9 @@
-@import 'themes/darkly';
+@import "~bootswatch/dist/darkly/variables";
+@import "~bootstrap/scss/bootstrap";
+@import "~bootswatch/dist/darkly/bootswatch";
@import "utils/style";
-@import "utils/mixins";
-@import "setup/normalize";
-@import "layout/features";
+
+
+
+
+ 
--- a/components/wifi-manager/webapp/src/sass/setup/_normalize.scss
+++ b/components/wifi-manager/webapp/src/sass/setup/_normalize.scss
@@ -1,348 +0,0 @@
-// /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-// /* Document
-//    ========================================================================== */
-
-// /**
-//  * 1. Correct the line height in all browsers.
-//  * 2. Prevent adjustments of font size after orientation changes in iOS.
-//  */
-
-// html {
-//   line-height: 1.15; /* 1 */
-//   -webkit-text-size-adjust: 100%; /* 2 */
-// }
-
-// /* Sections
-//    ========================================================================== */
-
-// /**
-//  * Remove the margin in all browsers.
-//  */
-
-// body {
-//   margin: 0;
-// }
-
-// /**
-//  * Render the `main` element consistently in IE.
-//  */
-
-// main {
-//   display: block;
-// }
-
-// /**
-//  * Correct the font size and margin on `h1` elements within `section` and
-//  * `article` contexts in Chrome, Firefox, and Safari.
-//  */
-
-// h1 {
-//   font-size: 2em;
-//   margin: .67em 0;
-// }
-
-// /* Grouping content
-//    ========================================================================== */
-
-// /**
-//  * 1. Add the correct box sizing in Firefox.
-//  * 2. Show the overflow in Edge and IE.
-//  */
-
-// hr {
-//   box-sizing: content-box; /* 1 */
-//   height: 0; /* 1 */
-//   overflow: visible; /* 2 */
-// }
-
-// /**
-//  * 1. Correct the inheritance and scaling of font size in all browsers.
-//  * 2. Correct the odd `em` font sizing in all browsers.
-//  */
-
-// pre {
-//   font-family: monospace; /* 1 */
-//   font-size: 1em; /* 2 */
-// }
-
-// /* Text-level semantics
-//    ========================================================================== */
-
-// /**
-//  * Remove the gray background on active links in IE 10.
-//  */
-
-// a {
-//   background-color: transparent;
-// }
-
-// /**
-//  * 1. Remove the bottom border in Chrome 57-
-//  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-//  */
-
-// abbr[title] {
-//   border-bottom: none; /* 1 */
-//   text-decoration: underline; /* 2 */
-// }
-
-// /**
-//  * Add the correct font weight in Chrome, Edge, and Safari.
-//  */
-
-// b,
-// strong {
-//   font-weight: bolder;
-// }
-
-// /**
-//  * 1. Correct the inheritance and scaling of font size in all browsers.
-//  * 2. Correct the odd `em` font sizing in all browsers.
-//  */
-
-// code,
-// kbd,
-// samp {
-//   font-family: monospace; /* 1 */
-//   font-size: 1em; /* 2 */
-// }
-
-// /**
-//  * Add the correct font size in all browsers.
-//  */
-
-// small {
-//   font-size: 80%;
-// }
-
-// /**
-//  * Prevent `sub` and `sup` elements from affecting the line height in
-//  * all browsers.
-//  */
-
-// sub,
-// sup {
-//   font-size: 75%;
-//   line-height: 0;
-//   position: relative;
-//   vertical-align: baseline;
-// }
-
-// sub {
-//   bottom: -.25em;
-// }
-
-// sup {
-//   top: -.5em;
-// }
-
-// /* Embedded content
-//    ========================================================================== */
-
-// /**
-//  * Remove the border on images inside links in IE 10.
-//  */
-
-// img {
-//   border-style: none;
-// }
-
-// /* Forms
-//    ========================================================================== */
-
-// /**
-//  * 1. Change the font styles in all browsers.
-//  * 2. Remove the margin in Firefox and Safari.
-//  */
-
-// button,
-// input,
-// optgroup,
-// select,
-// textarea {
-//   font-family: inherit; /* 1 */
-//   font-size: 100%; /* 1 */
-//   line-height: 1.15; /* 1 */
-//   margin: 0; /* 2 */
-// }
-
-// /**
-//  * Show the overflow in IE.
-//  * 1. Show the overflow in Edge.
-//  */
-
-// button,
-// input { /* 1 */
-//   overflow: visible;
-// }
-
-// /**
-//  * Remove the inheritance of text transform in Edge, Firefox, and IE.
-//  * 1. Remove the inheritance of text transform in Firefox.
-//  */
-
-// button,
-// select { /* 1 */
-//   text-transform: none;
-// }
-
-// /**
-//  * Correct the inability to style clickable types in iOS and Safari.
-//  */
-
-// button,
-// [type="button"],
-// [type="reset"],
-// [type="submit"] {
-//   -webkit-appearance: button;
-// }
-
-// /**
-//  * Remove the inner border and padding in Firefox.
-//  */
-
-// button::-moz-focus-inner,
-// [type="button"]::-moz-focus-inner,
-// [type="reset"]::-moz-focus-inner,
-// [type="submit"]::-moz-focus-inner {
-//   border-style: none;
-//   padding: 0;
-// }
-
-// /**
-//  * Restore the focus styles unset by the previous rule.
-//  */
-
-// button:-moz-focusring,
-// [type="button"]:-moz-focusring,
-// [type="reset"]:-moz-focusring,
-// [type="submit"]:-moz-focusring {
-//   outline: 1px dotted ButtonText;
-// }
-
-// /**
-//  * Correct the padding in Firefox.
-//  */
-
-// fieldset {
-//   padding: .35em .75em .625em;
-// }
-
-// /**
-//  * 1. Correct the text wrapping in Edge and IE.
-//  * 2. Correct the color inheritance from `fieldset` elements in IE.
-//  * 3. Remove the padding so developers are not caught out when they zero out
-//  *    `fieldset` elements in all browsers.
-//  */
-
-// legend {
-//   box-sizing: border-box; /* 1 */
-//   color: inherit; /* 2 */
-//   display: table; /* 1 */
-//   max-width: 100%; /* 1 */
-//   padding: 0; /* 3 */
-//   white-space: normal; /* 1 */
-// }
-
-// /**
-//  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-//  */
-
-// progress {
-//   vertical-align: baseline;
-// }
-
-// /**
-//  * Remove the default vertical scrollbar in IE 10+.
-//  */
-
-// textarea {
-//   overflow: auto;
-// }
-
-// /**
-//  * 1. Add the correct box sizing in IE 10.
-//  * 2. Remove the padding in IE 10.
-//  */
-
-// [type="checkbox"],
-// [type="radio"] {
-//   box-sizing: border-box; /* 1 */
-//   padding: 0; /* 2 */
-// }
-
-// /**
-//  * Correct the cursor style of increment and decrement buttons in Chrome.
-//  */
-
-// [type="number"]::-webkit-inner-spin-button,
-// [type="number"]::-webkit-outer-spin-button {
-//   height: auto;
-// }
-
-// /**
-//  * 1. Correct the odd appearance in Chrome and Safari.
-//  * 2. Correct the outline style in Safari.
-//  */
-
-// [type="search"] {
-//   -webkit-appearance: textfield; /* 1 */
-//   outline-offset: -2px; /* 2 */
-// }
-
-// /**
-//  * Remove the inner padding in Chrome and Safari on macOS.
-//  */
-
-// [type="search"]::-webkit-search-decoration {
-//   -webkit-appearance: none;
-// }
-
-// /**
-//  * 1. Correct the inability to style clickable types in iOS and Safari.
-//  * 2. Change font properties to `inherit` in Safari.
-//  */
-
-// ::-webkit-file-upload-button {
-//   -webkit-appearance: button; /* 1 */
-//   font: inherit; /* 2 */
-// }
-
-// /* Interactive
-//    ========================================================================== */
-
-// /*
-//  * Add the correct display in Edge, IE 10+, and Firefox.
-//  */
-
-// details {
-//   display: block;
-// }
-
-// /*
-//  * Add the correct display in all browsers.
-//  */
-
-// summary {
-//   display: list-item;
-// }
-
-// /* Misc
-//    ========================================================================== */
-
-// /**
-//  * Add the correct display in IE 10+.
-//  */
-
-// template {
-//   display: none;
-// }
-
-// /**
-//  * Add the correct display in IE 10.
-//  */
-
-// [hidden] {
-//   display: none;
-// }
--- a/components/wifi-manager/webapp/src/sass/themes/_darkly.scss
+++ b/components/wifi-manager/webapp/src/sass/themes/_darkly.scss
@@ -1,3 +0,0 @@
-@import "~bootswatch/dist/darkly/variables";
-@import "~bootstrap/scss/bootstrap";
-@import "~bootswatch/dist/darkly/bootswatch";
--- a/components/wifi-manager/webapp/src/sass/utils/_mixins.scss
+++ b/components/wifi-manager/webapp/src/sass/utils/_mixins.scss
@@ -1,24 +0,0 @@
-
-// /* Device = Most of the Smartphones Mobiles (Portrait) */
-// $screen-xxs-min: 320px;
-// $screen-xxs-max: 480px;
-
-// /* Device = Low Resolution Tablets, Mobiles (Landscape) */
-// $screen-xs-min: 481px;
-// $screen-xs-max: 767px;
-
-// /* Device = Tablets, Ipads (portrait) */
-// $screen-sm-min: 768px;
-// $screen-sm-max: 1024px;
-
-// /* Device = Laptops, Desktops */
-// $screen-md-min: 1025px;
-// $screen-md-max: 1280px;
-
-// /* Device = Desktops */
-// $screen-lg-min: 1281px;
-// $screen-lg-max: 1440px;
-
-// /* Higher Resolution Screens */
-// $screen-xlg-min: 1441px;
-// $screen-xlg-max: 2560px;
--- a/components/wifi-manager/webapp/src/sass/utils/_style.css
+++ b/components/wifi-manager/webapp/src/sass/utils/_style.css
@@ -6,7 +6,7 @@ body {
 .border-bottom  {
    border-width:3px !important;
 }
-
+.xl { font-size: 1.5em; line-height: 1em; vertical-align: -.075em; }
 .border-top {
    border-width:3px !important;
 }
@@ -22,397 +22,3 @@ td.value {
 #boot-div {
    float: right;
 }
-/* body {
-    border: 0;
-    margin: 0;
-    margin-bottom:50px;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-bottom: 45px;
-}
-a {
-    color: #fff;
-    transition: color .2s ease-out;
-    text-decoration: none
-}
-a:hover {
-    color: #99f;
-    text-decoration: none
-}
-.glyphicon {
-    font-size: 18px;
-}
-input:focus,
-select:focus,
-textarea:focus,
-button:focus {
-    outline: none;
-}
-.blur {
-    -webkit-filter: blur(2px);
-    -moz-filter: blur(2px);
-    -ms-filter: blur(2px);
-    -o-filter: blur(2px);
-    filter: blur(2px);
-}
-.ape {
-    padding: 10px 0px 10px 10px;
-    background-color: #444;
-}
-.ape:hover {
-    cursor: pointer;
-}
-header {
-    border-bottom: 1px solid #000;
-    border-top: 1px solid #000;
-}
-section {
-    border-bottom: 1px solid #000;
-    border-top: 1px solid #000;
-}
-h1 {
-    margin: 0;
-    margin-top: 20px;
-    padding: 10px;
-    text-transform: uppercase;
-    color: #888;
-    font-size: 1.6em
-}
-h2 {
-    margin: 0;
-    margin-top: 20px;
-    padding: 10px;
-    text-transform: uppercase;
-    color: #888;
-    font-size: 1.0em
-}
-h3 {
-    margin: 0;
-    text-align: center;
-    padding: 20px 0px 20px 0px;
-}
-.gr {
-    color: green;
-}
-.rd {
-    color: red;
-}
-#wifi-status {
-    display: none;
-}
-#connect {
-    display: none;
-}
-#connect_manual {
-    display: none;
-}
-#manual_ssid {
-    border: none;
-    width: 80%;
-    padding: 10px 0px 10px 10px;
-    display: block
-}
-#manual_pwd {
-    border: none;
-    width: 80%;
-    padding: 10px 0px 10px 10px;
-    display: block
-}
-#pwd {
-    border: none;
-    width: 80%;
-    padding: 10px 0px 10px 10px;
-    display: block
-}
-.buttons {
-    padding: 15px;
-}
-#join {
-    float: right;
-}
-#manual_join {
-    float: right;
-}
-#yes-disconnect {
-    display: inline-block;
-}
-#no-disconnect {
-    display: inline-block;
-}
-.tctr {
-    text-align: center;
-}
-#connect-wait {
-    display: none;
-}
-#connect-success {
-    display: none;
-}
-#connect-fail {
-    display: none;
-}
-#connect-details {
-    display: none;
-}
-#diag-disconnect {
-    display: none;
-}
-.fr {
-    float: right;
-    margin-right: 20px;
-} */
-/* .w0 {
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAABzUlEQVRIS+WUTShEURTH3zyRhjQ+8hWxmCJMoSzEwsbCgi1LZRYW9pONptiwka9iI81CWFpYaEqNMkVKmpWN1IhYKN9ZDL/z3p3mxZh5g9X4168799xz/vPefedeLeuVC+3gdTgc07CsmCQ2DI2gg21Jci30wSpGt/CeghickTsHPVACDkgqp67rPgpO4E0ZZMIj7OHhxSvPtEyomcVDeFXJv+EZNvEsNa01rZfAuSUhThR2wU+ObJkbyhRNMMDaDIThBqy1MdZ3wAPawqfFC2Lj0Ab5kpBGxdAJs9TeW72ITUhCPZMjFYwwbwXpnkwlDzOIx50yXwP5c0MeggHGanNqSDqqBqQ7/Kxvg2zHAfMN8IE8uZhYO6eBnBXGKnOakLWfaQZ9jMRjSPXhZUuC5A9JjVFpKkeNSVVA0Tq8KJN0yFl4gilqbW2tm+SQKoybXIG8jcT34RSsh1Byt6iVg2ZLlRCg6JpROqEDpFheXZ5S9rcLFsl5YJwHad+MVA5y13w5lRY5oRsKjdm/Vz/7LR86zG+5wr+9NX+iOowjEO+aELEic+lv1ILppeUPosRst6QduTANgnE2mC+BnYswI1VwfYzCCL9dZij7pWkf6UeSTYAuE/QAAAAASUVORK5CYII=') no-repeat left top;
-    height: 24px;
-}
-.w1 {
-    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNkRpr/UAAAHiSURBVEhL5dRPKINxHMfxPVskpA35F3FYEVasHBYHFwcHrhyVZ8vBfblIceEi/4qLtINwdHCQUpQVKcnJRYqIg/J3OYz399nv0YPNtuzEt149+31/v+/n4fGYLVHpup4Rnyregd+K27TIghe63+8fx7wySqsPdbAj3qzha0MOV6ETiwTd4u0HUZxydgrtKISGj0xreG4gEAgycIRXFZCOR2yTQZSebeaa4Q1s7iOiDv/GM1bJLDJv0EHjzHLAdIFNjHBGHpkbxUo9utmbQBg3sM5G2d+AR24w82XznN4QmpGjXrCExRkXfJhk9t6aRW9YDtSwOFDNE9ZNyFLzKRczOegh406FL8ElG8JDM8S1Qtaq7KhEO0Y0TVtHGHusVxCEDy5oMLNqyVrgWm5kqaYw3mdVdmqQsENE8JbAPbY43yszMqiyHOr66QayL5XH0DJeVEgyUTxhjNmPR/vtBpZyc3hHDZohV5DfRvq7OMYtrDdZY7YwFpG8yhBi6JrrMFogww7IT1mOVsxy5oHrNIqRVpWgDtnGKn7log35xurfVxfPW/7QYT57Ybz7mapqgk9gvjU79ApiW5mpRkIvLTe4oJfyK5lKOQndgvG/wXoOSb8I061Svj4G0M9nZ6z198tmeweYtIrMYP17VAAAAABJRU5ErkJggg==') no-repeat left top;
-    height: 24px;
-}
-.w2 {
-    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNkRpr/UAAAHkSURBVEhL3dRLKERRGMDxuSPSkLzyilgo8iiUhVjYWFiwZancmSzsZSPFho28io1kISwtLKQURZGSrGykiFgo7yyG/zdzznRm5iK5Sk79uvd85/u++5hzx2Pb9q9yDLrJMWhIRB1sv98/ghlliFAXyuGFU21IbECSi9CKORrd4O0TQZyQO45mZMJCpKfZ3BcIBPooOMSravAdD9ikB63sJN1XN69kcQ8vKvknnrBMzyx9gRYCp0aCdo51DJIjr6wU2UoF2lkbxS6uYdYGWV9DtVxgMmbxjFg/apEM/ZQfyUADxqi9M3sRG5CEEib7KnjMvAaye2IbfUVupoMet6r5PDL0YjXBBY4Fai5kRxVCdscg66uQ17HDfAl9kDuXJzB3Thk5sxzzZa6DumHknN3QS+IBPvvh5ZVskN8ZU5+gz3XAlELRIp5Vk6/It/CIYWrjXm3URCkleUsV6iaXkKeR+DaOYH6EkrtCrXxoUf2iJoY8LFB0xXEA9ZBieXS5S3m/jZgi557jBGT7xvWKCxhyIP81ka/SgQ9NSDViURyDbvpTo82yrAPscl4HKxR1aRTT+BhvyhaxtPCSO6OKphfGBc6JZYaX3BnpNN1AUC7AfBrJoRUXR67X6+1BN+fp4dD/Hx7PO4o9VGuAapKIAAAAAElFTkSuQmCC') no-repeat left top;
-    height: 24px;
-}
-.w3 {
-    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAACAElEQVRIS7XUP0gbYRjH8VSpiBZJWvEflXYQKtqACg6ig4uDg651LPQSHLpLlyDoUhdpVdBFxEG0YwcHCQgRFJSCFKcuUohY6iC0VYtD9PuE9w3vXZ74h16HD3fv733e53KX9y7ied5/pYZhUkPHQ3TBSyQS7zFvTBC9RivKoK3NCwZS3IxBLNLoBFc3yOEbtR/Qj8d4gEJPt3lVMpkcY8E+Lk2D+/iDTXrQyquwfW3zdiZ38dcU/4tzrNHzib3AAMGhU2BlsYFxauSRtaDWaMMwc1PYwU+4a3PMryMuF5gJTH4ne4dOVMLeZSkx9GCatb/cXmQpKXjOYM+EB4w7ILsn2Og28mNe0ePUNF9CzE7GCZc5NpmxkB31FLI7xpn/DHkc24xXMQb55XIH7s55Qc0Cx0YZ29A2LJyzG95S+AU3/fHySNLUjwTWl9tzG7iqWbSCC9PkNvIunGGStUWP1jcwWijOmIW2yTHkbiTfwle4L6HUfmKtvGi+fr6BowHLLPrBMYVuyGK5dfmV8nx7MUvNb44fIdu3qFdR4KiDfGsKb6WiCn145GQ+ahgmNQyTGpYwxPOWP3qHc/mE+76apaih4hmND2B3TYasJlCjUkPFS5oeORfIkhVtSY0aKqI0TSP/bjCew10+hPf6D+r5fIziDefRwFxJahgmNQyPF7kGEsc1es+A2E4AAAAASUVORK5CYII=') no-repeat left top;
-    height: 24px;
-} */
-/* .pw {
-    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAABIUlEQVRIS+3VsU7CUBTGcYhBJCwqwcmEJ2DkCQgzb8ADmLgYWXTzMVjcGNjYGEAXgoSRhTg5OroYIyFY/h+hWGwvtzQ0LpzkF8i5l/uRQ2kTjuPEKrC5T79vzHWJO4wxwzeGuMY5AitsQBFvmEObvNQboQBfhQk4gQ5wD+zgBrcYrHrSwzE2KkxAHVrQWB6QgiqJLB7xA+2pYaNsAWm8QAsa0Sn+1gU+oT1NHGFdtoAcJtBCSw1DuaPqQiNdly0gj1doQaMwleavPc+IJUDffKeADO7Rxxe08A4dEOQD2qPXJ1xh+VuYAirQVaNGFFPov2MM0OXm/UAUZRwCtjoEWP1vQBXuLTgKPYRKMAacoY0oIboDNLB8+PgC4hLY3B8nsQCQEf56jLJoQAAAAABJRU5ErkJggg==') no-repeat left top;
-    height: 24px;
-} */
-/* SpinKit is licensed under the MIT License. Copyright (c) 2015 Tobias Ahlin */
-/* .spinner {
-    width: 40px;
-    height: 40px;
-  
-    position: relative;
-    margin: 100px auto;
-  }
-  
-  .double-bounce1, .double-bounce2 {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: #333;
-    opacity: 0.6;
-    position: absolute;
-    top: 0;
-    left: 0;
-    
-    -webkit-animation: bounce 2.0s infinite ease-in-out;
-    animation: bounce 2.0s infinite ease-in-out;
-  }
-  
-  .double-bounce2 {
-    -webkit-animation-delay: -1.0s;
-    animation-delay: -1.0s;
-  }
-  
-  @-webkit-keyframes bounce {
-    0%, 100% { -webkit-transform: scale(0.0) }
-    50% { -webkit-transform: scale(1.0) }
-  }
-  
-  @keyframes bounce {
-    0%, 100% { 
-      transform: scale(0.0);
-      -webkit-transform: scale(0.0);
-    } 50% { 
-      transform: scale(1.0);
-      -webkit-transform: scale(1.0);
-    }
-  } */
-/* end of SpinKit */
-
-/* daduke stuff */
-/* input[type='text'], input[type='password'], textarea, select, option {
-  background: #999;
-  border: 0;
-  padding: 4px;
-}
-
-.custom-switch {
-    margin-left: 8px;
-}
-
-.custom-switch, .custom-radio {
-  padding-left: 2.25rem;
-  padding-bottom: 1rem;
-}
-
-.custom-checkbox > .custom-control-label {
-  padding-top: 0.5rem;
-  padding-left: 2rem;
-  padding-bottom: 0.1rem;
-}
-
-.custom-switch .custom-control-label::before {
-  left: -2.25rem;
-  height: 2rem;
-  width: 3.5rem;
-  pointer-events: all;
-  border-radius: 1rem;
-  background-color: #f00;
-} */
-/* 
-.custom-switch .custom-control-label::after {
-  top: calc(0.25rem + 2px);
-  left: calc(-2.25rem + 2px);
-  width: calc(2rem - 4px);
-  height: calc(2rem - 4px);
-  background-color: #adb5bd;
-  border-radius: 2rem;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .custom-switch .custom-control-label::after {
-    transition: none;
-  }
-} */
-/* 
-.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
-  background-color: #0f0;
-}
-
-.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #fff;
-  -webkit-transform: translateX(1.5rem); 
-  transform: translateX(1.5rem); 
-}
-
-textarea#autoexec1, textarea#fwurl, div#upload {
-    width: 80%;
-}
-
-table tr.MESSAGING_INFO {
-    background: #123;
-}
-
-table tr.MESSAGING_WARNING {
-    background: #330;
-}
-
-table tr.MESSAGING_ERROR {
-    background: #300;
-}
-
-input, textarea {
-    border-radius: 3px;
-    border: 1px solid transparent;
-    border-top: none;
-    border-bottom: 1px solid #DDD;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
-}
-
-#otadiv {
-	display: none;
-}
-
-#btsinkdiv {
-	display: none;
-}
-
-.tooltip-inner {
-    font-family: monospace, monospace;
-    font-size: 70%;
-}
-
-#progress {
-    width: 60%;
-}
-
-.progress-bar {
-    color: #fff;
-    background-color: #037AF0;
-}
-
-span#flash-status {
-    padding-left: 15px;
-    font-size: 120%;
-} */
-
-/* #info {
-    padding-top: 7px;
-    float: right;
-    display: grid;
-} */
-
-/* svg#battery {
-    fill: #ddd;
-}
-
-svg#output {
-    fill: #ddd;
-    padding-right: 4px;
-}
-
-svg#jack {
-    fill: #ddd;
-    padding-right: 4px;
-} */
-/* 
-ul#navbar {
-    border-bottom: 0px;
-}
-.navbar-nav {
-    float: left;
-    margin: 0;
-    padding-top: 1rem;
-
-}
-#content {
-    border-top: 1px solid black;
-} */
-
-/* .footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: #555;
-  color: white;
-  text-align: center;
-} */
-/* 
-.sl {
-    background-color: #053c1e;
-}
-.recovery {
-    background-color: #3c0505;
-}
-
-
-
-
-div#message {
-    display: none;
-    color: #000;
-    background: #f00;
-    position:fixed;
-    padding: 8px;
-    top: 20%;
-    left: 50%;
-    width:20em;
-    height:4em;
-    text-align: center;
-    margin-left: -10em; 
-    margin-top: -2em; 
-    border-radius: 8px;
-    box-shadow: 0px 5px 2px -5px rgba(255, 255, 255, 0.5) inset, 0px 10px 20px -5px rgba(255, 255, 255, 0.1) inset, 0 0px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 1px rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.3);
-    z-index: 20;
-} */
-/* 
- */
-/* 
-#searchfw {
-    float: right;
-    display: none;
-} */
-
-/* button#updateAP {
-    float: right;
-    display: inline;
-} */
--- a/components/wifi-manager/webapp/src/test.ejs
+++ b/components/wifi-manager/webapp/src/test.ejs
@@ -16,7 +16,18 @@
                    <% } %>
                        <% } %>
    </div>
-    <div id="allIcons"></div>
+    <div id="allIcons"><i class="recovery_element ri-device-recover-fill ri-xl" style="color:orange; " ></i>
+        <i  class="ri-battery-fill  ri-xl"  style="fill:white; " ></i>
+        <i  class= "ri-headphone-fill  ri-xl"  style="fill:white; "></i>
+        <i  class= "ri-bluetooth-fill ri-xl"   style="fill:white; " ></i>
+        <i  class= "ri-speaker-fill ri-xl" style="fill:white; " ></i>
+        <i   class= "ri-voiceprint ri-xl" style="fill:white; " ></i>
+        <i   class= "ri-signal-wifi-fill ri-xl" style="fill:white; " ></i>
+        <i   class= "ri-signal-wifi-3-fill ri-xl" style="fill:white; " ></i>
+        <i   class= "ri-signal-wifi-2-fill ri-xl" style="fill:white; " ></i>
+        <i   class= "ri-signal-wifi-1-fill ri-xl" style="fill:white; " ></i>
+        <i   class= "ri-signal-wifi-line ri-xl" style="fill:white; " ></i>
+    </div> 
    
    <div class="card border-primary mb-3">
        <div class="card-header">Status Variables</div>
--- a/components/wifi-manager/webapp/src/test.ts
+++ b/components/wifi-manager/webapp/src/test.ts
@@ -1,23 +1,5 @@
 import 'bootstrap';
-import '../src/sass/main.scss';
+import './sass/main.scss';
 import './js/test.js';
-import '../node_modules/remixicon/icons/Device/signal-wifi-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-3-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-2-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-1-fill.svg';
-import '../node_modules/remixicon/icons/Device/signal-wifi-line.svg';
-import '../node_modules/remixicon/icons/Device/battery-line.svg';
-import '../node_modules/remixicon/icons/Device/battery-low-line.svg';
-import '../node_modules/remixicon/icons/Device/battery-fill.svg';
+import 'remixicon/fonts/remixicon.css';  

-import '../node_modules/remixicon/icons/Media/headphone-fill.svg';
-import '../node_modules/remixicon/icons/Device/device-recover-fill.svg';
-import '../node_modules/remixicon/icons/Device/bluetooth-fill.svg';
-import '../node_modules/remixicon/icons/Device/bluetooth-connect-fill.svg';
-import '../node_modules/remixicon/icons/Media/stop-circle-fill.svg';
-import '../node_modules/remixicon/icons/Media/stop-circle-line.svg';
-import '../node_modules/remixicon/icons/Logos/google-play-fill.svg';
-import '../node_modules/remixicon/icons/Media/pause-fill.svg';
-import '../node_modules/remixicon/icons/Media/stop-fill.svg';
-import '../node_modules/remixicon/icons/System/lock-fill.svg';
-import '../node_modules/remixicon/icons/System/lock-unlock-fill.svg';
--- a/components/wifi-manager/webapp/tsconfig.json
+++ b/components/wifi-manager/webapp/tsconfig.json
@@ -1,7 +1,9 @@
 {
  "compilerOptions": {
    "baseUrl": "./",
-    "paths": { "*": ["types/*"] },
+    "paths": { 
+      "@/*": [  "src/*"],
+      "@node_modules/*" : ["./node_modules/*"]},
    "outDir": "./dist/",
    "noImplicitAny": true,
    "sourceMap": true,
@@ -9,7 +11,10 @@
    "target": "es2018",
    "composite": true,
 //    "jsx": "react",
-    "allowJs": true
+    "allowJs": true,
+    "allowSyntheticDefaultImports" : true,
+    "esModuleInterop" : true
+
  },
  "exclude": [
    "./node_modules"
--- a/components/wifi-manager/webapp/webapp.cmake
+++ b/components/wifi-manager/webapp/webapp.cmake
@@ -1,5 +1,5 @@
-target_add_binary_data( __idf_wifi-manager ./webapp/webpack/dist/favicon-32x32.png BINARY)
-target_add_binary_data( __idf_wifi-manager ./webapp/webpack/dist/index.html.gz BINARY)
-target_add_binary_data( __idf_wifi-manager ./webapp/webpack/dist/js/index.1be2f3.bundle.js.gz BINARY)
-target_add_binary_data( __idf_wifi-manager ./webapp/webpack/dist/js/node-modules.1be2f3.bundle.js.gz BINARY)
-target_add_binary_data( __idf_wifi-manager ./webapp/webpack/dist/js/runtime.1be2f3.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.5712d0365318b239ca44.css.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/favicon-32x32.png BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.41c7e6.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
--- a/components/wifi-manager/webapp/webpack.c
+++ b/components/wifi-manager/webapp/webpack.c
@@ -1,34 +1,34 @@
 // Automatically generated. Do not edit manually!.
 #include <inttypes.h>
+extern const uint8_t _index_5712d0365318b239ca44_css_gz_start[] asm("_binary_index_5712d0365318b239ca44_css_gz_start");
+extern const uint8_t _index_5712d0365318b239ca44_css_gz_end[] asm("_binary_index_5712d0365318b239ca44_css_gz_end");
 extern const uint8_t _favicon_32x32_png_start[] asm("_binary_favicon_32x32_png_start");
 extern const uint8_t _favicon_32x32_png_end[] asm("_binary_favicon_32x32_png_end");
 extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
 extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
-extern const uint8_t _index_1be2f3_bundle_js_gz_start[] asm("_binary_index_1be2f3_bundle_js_gz_start");
-extern const uint8_t _index_1be2f3_bundle_js_gz_end[] asm("_binary_index_1be2f3_bundle_js_gz_end");
-extern const uint8_t _node_modules_1be2f3_bundle_js_gz_start[] asm("_binary_node_modules_1be2f3_bundle_js_gz_start");
-extern const uint8_t _node_modules_1be2f3_bundle_js_gz_end[] asm("_binary_node_modules_1be2f3_bundle_js_gz_end");
-extern const uint8_t _runtime_1be2f3_bundle_js_gz_start[] asm("_binary_runtime_1be2f3_bundle_js_gz_start");
-extern const uint8_t _runtime_1be2f3_bundle_js_gz_end[] asm("_binary_runtime_1be2f3_bundle_js_gz_end");
+extern const uint8_t _index_41c7e6_bundle_js_gz_start[] asm("_binary_index_41c7e6_bundle_js_gz_start");
+extern const uint8_t _index_41c7e6_bundle_js_gz_end[] asm("_binary_index_41c7e6_bundle_js_gz_end");
+extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
+extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
 const char * resource_lookups[] = {
+	"/css/index.5712d0365318b239ca44.css.gz",
 	"/favicon-32x32.png",
 	"/index.html.gz",
-	"/js/index.1be2f3.bundle.js.gz",
-	"/js/node-modules.1be2f3.bundle.js.gz",
-	"/js/runtime.1be2f3.bundle.js.gz",
+	"/js/index.41c7e6.bundle.js.gz",
+	"/index.html.gz",
 ""
 };
 const uint8_t * resource_map_start[] = {
+	_index_5712d0365318b239ca44_css_gz_start,
 	_favicon_32x32_png_start,
 	_index_html_gz_start,
-	_index_1be2f3_bundle_js_gz_start,
-	_node_modules_1be2f3_bundle_js_gz_start,
-	_runtime_1be2f3_bundle_js_gz_start
+	_index_41c7e6_bundle_js_gz_start,
+	_index_html_gz_start
 };
 const uint8_t * resource_map_end[] = {
+	_index_5712d0365318b239ca44_css_gz_end,
 	_favicon_32x32_png_end,
 	_index_html_gz_end,
-	_index_1be2f3_bundle_js_gz_end,
-	_node_modules_1be2f3_bundle_js_gz_end,
-	_runtime_1be2f3_bundle_js_gz_end
+	_index_41c7e6_bundle_js_gz_end,
+	_index_html_gz_end
 };
--- a/components/wifi-manager/webapp/webpack.config.js
+++ b/components/wifi-manager/webapp/webpack.config.js
@@ -0,0 +1,362 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CompressionPlugin = require("compression-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const webpack = require("webpack");
+const path = require("path");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const globSync = require("glob").sync;
+const glob = require('glob');
+const { merge } = require('webpack-merge');
+const devserver = require('./webpack/webpack.dev.js');
+const fs = require('fs');
+const zlib = require("zlib");
+
+class BuildEventsHook {
+  constructor(name, fn, stage = 'afterEmit') {
+    this.name = name;
+    this.stage = stage;
+    this.function = fn;
+  }
+  apply(compiler) {
+    compiler.hooks[this.stage].tap(this.name, this.function);
+  }
+}
+
+
+module.exports = (env, options) => (
+  merge(options.mode === "production" ? {} : devserver,
+    {
+      entry: 
+      {
+          index: './src/index.ts'
+      },
+      devtool: "source-map",
+      module: {
+        rules: [
+          {
+            test: /\.ejs$/,
+            loader: 'ejs-loader',
+            options: {
+              variable: 'data',
+              interpolate : '\\{\\{(.+?)\\}\\}',
+              evaluate : '\\[\\[(.+?)\\]\\]'
+            }
+          },          
+          {
+            test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name].[ext]',
+                  outputPath: 'fonts/'
+                }
+              }
+            ]
+          }, 
+          {
+            test: /\.scss$|\.css$/,
+            use: [
+              // options.mode !== "production"
+              //   ? "style-loader": 
+                {
+                  loader: MiniCssExtractPlugin.loader,
+                  options: {
+                    publicPath: "../",
+                  },
+                },
+              "css-loader",
+              {
+                loader: "postcss-loader",
+                options: {
+                  postcssOptions: {
+                    plugins: [["autoprefixer"]],
+                  },
+                },
+              },
+              "sass-loader",
+            ],
+          },
+          {
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            use: {
+              loader: "babel-loader",
+              options: {
+                presets: ["@babel/preset-env"],
+              },
+            },
+          },
+          {
+            test: /\.(jpe?g|png|gif|svg)$/i,
+            type: "asset",
+          }, 
+          // {
+          //   test: /\.html$/i,
+          //   type: "asset/resource",
+          // },
+        {
+          test: /\.html$/i,
+          loader: "html-loader",
+          options: {
+            minimize: true,
+            
+          }
+        },
+          //          {
+          //   test: /\.html$/i,
+          //   use: [
+          //     "html-loader",
+          //     {
+          //       loader: 'markup-inline-loader',
+          //       options: {
+          //         svgo: {
+          //           plugins: [
+          //             {
+          //               removeTitle: true,
+          //             },
+          //             {
+          //               removeUselessStrokeAndFill: false,
+          //             },
+          //             {
+          //               removeUnknownsAndDefaults: false,
+          //             },
+          //           ],
+          //         },
+          //       },
+          //     },
+          //   ]
+          // },
+          {
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/,
+          },
+        ],
+      },
+      plugins: [
+      
+        new HtmlWebpackPlugin({
+          title: 'SqueezeESP32',
+          template: './src/index.ejs',
+          filename: 'index.html',
+          inject: 'body',
+          minify: {
+            html5                          : true,
+            collapseWhitespace             : true,
+            minifyCSS                      : true,
+            minifyJS                       : true,
+            minifyURLs                     : false,
+            removeAttributeQuotes          : true,
+            removeComments                 : true, // false for Vue SSR to find app placeholder
+            removeEmptyAttributes          : true,
+            removeOptionalTags             : true,
+            removeRedundantAttributes      : true,
+            removeScriptTypeAttributes     : true,
+            removeStyleLinkTypeAttributese : true,
+            useShortDoctype                : true
+          },
+          favicon: "./src/assets/images/favicon-32x32.png",
+          excludeChunks: ['test'],
+      }),
+      // new CompressionPlugin({
+      //   test: /\.(js|css|html|svg)$/,
+      //   //filename: '[path].br[query]',
+      //   filename: "[path][base].br",
+      //   algorithm: 'brotliCompress',
+      //   compressionOptions: { level: 11 },
+      //   threshold: 100,
+      //   minRatio: 0.8,
+      //   deleteOriginalAssets: false
+      // }),
+      new CompressionPlugin({
+          //filename: '[path].gz[query]',
+          test: /\.js$|\.css$|\.html$/,
+          filename: "[path][base].gz",
+
+          algorithm: 'gzip',
+          
+          threshold: 100,
+          minRatio: 0.8,
+      }),
+        new MiniCssExtractPlugin({
+          filename: "css/[name].[contenthash].css",
+        }),
+        new webpack.ProvidePlugin({
+          $: "jquery",
+          jQuery: "jquery",
+          "window.jQuery": "jquery",
+          Popper: ["popper.js", "default"],
+          Util: "exports-loader?Util!bootstrap/js/dist/util",
+          Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
+        }),
+        new BuildEventsHook('Update C App', 
+          function (stats, arguments) {
+            if (options.mode !== "production") return;
+            fs.appendFileSync('./dist/index.html.gz', 
+              zlib.gzipSync(fs.readFileSync('./dist/index.html'), 
+              {
+                chunckSize: 65536,
+                level: zlib.constants.Z_BEST_COMPRESSION
+             }));
+            
+            var getDirectories = function (src, callback) {
+              var searchPath = path.posix.relative(process.cwd(), path.posix.join(__dirname, src, '/**/*(*.gz|favicon-32x32.png)'));
+              console.log(`Post build: Getting file list from ${searchPath}`);
+              glob(searchPath, callback);
+            };
+            var cleanUpPath = path.posix.relative(process.cwd(), path.posix.join(__dirname, '../../../build/*.S'));
+            console.log(`Post build: Cleaning up previous builds in ${cleanUpPath}`);
+            glob(cleanUpPath, function (err, list) {
+              if (err) {
+                console.error('Error', err);
+              } else {
+                list.forEach(fileName => {
+                  try {
+                    console.log(`Post build: Purging old binary file ${fileName} from C project.`);
+                    fs.unlinkSync(fileName)
+                    //file removed
+                  } catch (ferr) {
+                    console.error(ferr)
+                  }
+                });
+              }
+            },
+            'afterEmit'
+            );
+            console.log('Generating C include files from webpack build output');
+            getDirectories('./dist', function (err, list) {
+              if (err) {
+                console.log('Error', err);
+              } else {
+                const regex = /^(.*\/)([^\/]*)$/
+                const relativeRegex = /((\w+(?<!dist)\/){0,1}[^\/]*)$/
+                let exportDefHead =
+`/***********************************
+webpack_headers
+${arguments[1]}
+***********************************/
+#pragma once
+#include <inttypes.h>
+extern const char * resource_lookups[];
+extern const uint8_t * resource_map_start[];
+extern const uint8_t * resource_map_end[];`;
+                let exportDef = '// Automatically generated. Do not edit manually!.\n' +
+                  '#include <inttypes.h>\n';
+                let lookupDef = 'const char * resource_lookups[] = {\n';
+                let lookupMapStart = 'const uint8_t * resource_map_start[] = {\n';
+                let lookupMapEnd = 'const uint8_t * resource_map_end[] = {\n';
+                let cMake = '';
+                list.push('./dist/index.html.gz');
+                list.forEach(fileName => {
+
+                  let exportName = fileName.match(regex)[2].replace(/[\. \-]/gm, '_');
+                  let relativeName = fileName.match(relativeRegex)[1];
+                  exportDef += `extern const uint8_t _${exportName}_start[] asm("_binary_${exportName}_start");\nextern const uint8_t _${exportName}_end[] asm("_binary_${exportName}_end");\n`;
+                  lookupDef += '\t"/' + relativeName + '",\n';
+                  lookupMapStart += '\t_' + exportName + '_start,\n';
+                  lookupMapEnd += '\t_' + exportName + '_end,\n';
+                  cMake += `target_add_binary_data( __idf_wifi-manager ${path.posix.relative(path.posix.resolve(process.cwd(),'..','..'),fileName)
+                } BINARY)\n`;
+                });
+
+                lookupDef += '""\n};\n';
+                lookupMapStart = lookupMapStart.substring(0, lookupMapStart.length - 2) + '\n};\n';
+                lookupMapEnd = lookupMapEnd.substring(0, lookupMapEnd.length - 2) + '\n};\n';
+                try {
+                  fs.writeFileSync('webapp.cmake', cMake);
+                  fs.writeFileSync('webpack.c', exportDef + lookupDef + lookupMapStart + lookupMapEnd);
+                  fs.writeFileSync('webpack.h', exportDefHead);
+                  //file written successfully
+                } catch (e) {
+                  console.error(e);
+                }
+              }
+            });
+            console.log('Post build completed.');
+
+          })
+      ],
+      optimization: {
+        minimize: true,
+        minimizer: [
+         
+          new TerserPlugin(),
+          new HtmlMinimizerPlugin(),
+          new CssMinimizerPlugin(),
+          new ImageMinimizerPlugin({
+            minimizer: {
+              implementation: ImageMinimizerPlugin.imageminMinify,
+              options: {
+                // Lossless optimization with custom option
+                // Feel free to experiment with options for better result for you
+                plugins: [
+                  ["gifsicle", { interlaced: true }],
+                  ["jpegtran", { progressive: true }],
+                  ["optipng", { optimizationLevel: 5 }],
+                  // Svgo configuration here https://github.com/svg/svgo#configuration
+                  [
+                    "svgo",
+                    {
+                      plugins: [
+                       {
+                          name: 'preset-default',
+                         params: {
+                          overrides: {
+                            // customize default plugin options
+                            inlineStyles: {
+                              onlyMatchedOnce: false,
+                            },
+                  
+                            // or disable plugins
+                            removeDoctype: false,
+                          },
+                        },
+                      }
+                      ],
+                    },
+                  ],
+                ],
+              },
+            },
+          }),  
+          //new BundleAnalyzerPlugin()
+
+        ],
+        // runtimeChunk: 'single',
+        // splitChunks: {
+        //     chunks: 'all',
+        //     // maxInitialRequests: Infinity,
+        //     // minSize: 0,
+        //     cacheGroups: {
+        //         vendor: {
+        //             test: /node_modules/, // you may add "vendor.js" here if you want to
+        //             name: "node-modules",
+        //             chunks: "initial",
+        //             enforce: true
+        //         },
+        //     }
+        //   }
+      },
+      //   output: {
+      //     filename: "[name].js",
+      //     path: path.resolve(__dirname, "dist"),
+      //     publicPath: "",
+      //   },
+      resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.ejs' ],
+      },
+      output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: './js/[name].[fullhash:6].bundle.js',
+        clean: true
+      },
+    }
+  )
+);
--- a/components/wifi-manager/webapp/webpack.h
+++ b/components/wifi-manager/webapp/webpack.h
@@ -1,72 +1,9 @@
 /***********************************
 webpack_headers
-Hash: 1be2f373b8e586c66ebe
-Version: webpack 4.46.0
-Time: 59080ms
-Built at: 12/28/2021 5:04:54 PM
-                                Asset       Size  Chunks                                Chunk Names
-          ./js/index.1be2f3.bundle.js    232 KiB       0  [emitted] [immutable]         index
-       ./js/index.1be2f3.bundle.js.br   32.6 KiB          [emitted]                     
-       ./js/index.1be2f3.bundle.js.gz     42 KiB          [emitted]                     
-   ./js/node-modules.1be2f3.bundle.js    266 KiB       1  [emitted] [immutable]  [big]  node-modules
-./js/node-modules.1be2f3.bundle.js.br   76.3 KiB          [emitted]                     
-./js/node-modules.1be2f3.bundle.js.gz   88.7 KiB          [emitted]                     
-        ./js/runtime.1be2f3.bundle.js   1.46 KiB       2  [emitted] [immutable]         runtime
-     ./js/runtime.1be2f3.bundle.js.br  644 bytes          [emitted]                     
-     ./js/runtime.1be2f3.bundle.js.gz  722 bytes          [emitted]                     
-                    favicon-32x32.png  634 bytes          [emitted]                     
-                           index.html   21.7 KiB          [emitted]                     
-                        index.html.br   4.76 KiB          [emitted]                     
-                        index.html.gz   5.75 KiB          [emitted]                     
-                           sprite.svg    4.4 KiB          [emitted]                     
-                        sprite.svg.br  903 bytes          [emitted]                     
-Entrypoint index [big] = ./js/runtime.1be2f3.bundle.js ./js/node-modules.1be2f3.bundle.js ./js/index.1be2f3.bundle.js
- [6] ./node_modules/bootstrap/dist/js/bootstrap-exposed.js 437 bytes {1} [built]
-[11] ./src/sass/main.scss 1.55 KiB {0} [built]
-[16] ./node_modules/remixicon/icons/Device/signal-wifi-fill.svg 286 bytes {1} [built]
-[17] ./node_modules/remixicon/icons/Device/signal-wifi-3-fill.svg 290 bytes {1} [built]
-[18] ./node_modules/remixicon/icons/Device/signal-wifi-2-fill.svg 290 bytes {1} [built]
-[19] ./node_modules/remixicon/icons/Device/signal-wifi-1-fill.svg 290 bytes {1} [built]
-[20] ./node_modules/remixicon/icons/Device/signal-wifi-line.svg 286 bytes {1} [built]
-[21] ./node_modules/remixicon/icons/Device/battery-line.svg 278 bytes {1} [built]
-[22] ./node_modules/remixicon/icons/Device/battery-low-line.svg 286 bytes {1} [built]
-[23] ./node_modules/remixicon/icons/Device/battery-fill.svg 278 bytes {1} [built]
-[24] ./node_modules/remixicon/icons/Media/headphone-fill.svg 281 bytes {1} [built]
-[25] ./node_modules/remixicon/icons/Device/device-recover-fill.svg 292 bytes {1} [built]
-[26] ./node_modules/remixicon/icons/Device/bluetooth-fill.svg 282 bytes {1} [built]
-[27] ./node_modules/remixicon/icons/Device/bluetooth-connect-fill.svg 298 bytes {1} [built]
-[38] ./src/index.ts + 1 modules 62.6 KiB {0} [built]
-     | ./src/index.ts 1.4 KiB [built]
-     | ./src/js/custom.js 61 KiB [built]
-    + 24 hidden modules
-
-WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
-This can impact web performance.
-Assets: 
-  ./js/node-modules.1be2f3.bundle.js (266 KiB)
-
-WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
-Entrypoints:
-  index (499 KiB)
-      ./js/runtime.1be2f3.bundle.js
-      ./js/node-modules.1be2f3.bundle.js
-      ./js/index.1be2f3.bundle.js
-
-
-WARNING in webpack performance recommendations: 
-You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
-For more info visit https://webpack.js.org/guides/code-splitting/
-Child html-webpack-plugin for "index.html":
-         Asset     Size  Chunks  Chunk Names
-    index.html  560 KiB       0  
-    Entrypoint undefined = index.html
-    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 23.9 KiB {0} [built]
-    [1] ./node_modules/lodash/lodash.js 531 KiB {0} [built]
-    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
-    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
+dist/css/index.5712d0365318b239ca44.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.41c7e6.bundle.js.gz
 ***********************************/
 #pragma once
 #include <inttypes.h>
 extern const char * resource_lookups[];
 extern const uint8_t * resource_map_start[];
-extern const uint8_t * resource_map_end[];
+extern const uint8_t * resource_map_end[];
--- a/components/wifi-manager/webapp/webpack/dist/index.html
+++ b/components/wifi-manager/webapp/webpack/dist/index.html
--- a/components/wifi-manager/webapp/webpack/dist/index.html.br
+++ b/components/wifi-manager/webapp/webpack/dist/index.html.br
--- a/components/wifi-manager/webapp/webpack/dist/index.html.gz
+++ b/components/wifi-manager/webapp/webpack/dist/index.html.gz
--- a/components/wifi-manager/webapp/webpack/dist/js/index.1be2f3.bundle.js
+++ b/components/wifi-manager/webapp/webpack/dist/js/index.1be2f3.bundle.js
--- a/components/wifi-manager/webapp/webpack/dist/js/index.1be2f3.bundle.js.br
+++ b/components/wifi-manager/webapp/webpack/dist/js/index.1be2f3.bundle.js.br
--- a/components/wifi-manager/webapp/webpack/dist/js/index.1be2f3.bundle.js.gz
+++ b/components/wifi-manager/webapp/webpack/dist/js/index.1be2f3.bundle.js.gz
--- a/components/wifi-manager/webapp/webpack/dist/js/node-modules.1be2f3.bundle.js
+++ b/components/wifi-manager/webapp/webpack/dist/js/node-modules.1be2f3.bundle.js
--- a/components/wifi-manager/webapp/webpack/dist/js/node-modules.1be2f3.bundle.js.br
+++ b/components/wifi-manager/webapp/webpack/dist/js/node-modules.1be2f3.bundle.js.br
--- a/components/wifi-manager/webapp/webpack/dist/js/node-modules.1be2f3.bundle.js.gz
+++ b/components/wifi-manager/webapp/webpack/dist/js/node-modules.1be2f3.bundle.js.gz
--- a/components/wifi-manager/webapp/webpack/dist/js/runtime.1be2f3.bundle.js
+++ b/components/wifi-manager/webapp/webpack/dist/js/runtime.1be2f3.bundle.js
@@ -1 +0,0 @@
-!function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f++){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={2:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="";var f=window.webpackJsonp=window.webpackJsonp||[],i=f.push.bind(f);f.push=r,f=f.slice();for(var a=0;a<f.length;a++)r(f[a]);var p=i;t()}([]);
--- a/components/wifi-manager/webapp/webpack/dist/js/runtime.1be2f3.bundle.js.br
+++ b/components/wifi-manager/webapp/webpack/dist/js/runtime.1be2f3.bundle.js.br
--- a/components/wifi-manager/webapp/webpack/dist/js/runtime.1be2f3.bundle.js.gz
+++ b/components/wifi-manager/webapp/webpack/dist/js/runtime.1be2f3.bundle.js.gz
--- a/components/wifi-manager/webapp/webpack/dist/sprite.svg
+++ b/components/wifi-manager/webapp/webpack/dist/sprite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><defs><symbol viewBox="0 0 24 24" id="battery-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 7v10h14V7H4zM3 5h16a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm18 4h2v6h-2V9z"/></symbol><symbol viewBox="0 0 24 24" id="lock-unlock-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 10h13a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V11a1 1 0 011-1h1V9a7 7 0 0113.262-3.131l-1.789.894A5 5 0 007 9v1zm3 5v2h4v-2h-4z"/></symbol><symbol viewBox="0 0 24 24" id="battery-low-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 7v10h14V7H4zM3 5h16a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm2 3h4v8H5V8zm16 1h2v6h-2V9z"/></symbol><symbol viewBox="0 0 24 24" id="bluetooth-connect-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M14.341 12.03l4.343 4.343-5.656 5.656h-2v-6.686l-4.364 4.364-1.415-1.414 5.779-5.778v-.97l-5.779-5.78 1.415-1.414 4.364 4.364V2.029h2l5.656 5.657-4.343 4.343zm-1.313 1.514v5.657l2.828-2.828-2.828-2.829zm0-3.03l2.828-2.828-2.828-2.828v5.657zM19.5 13.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm-13 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></symbol><symbol viewBox="0 0 24 24" id="bluetooth-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M14.341 12.03l4.343 4.343-5.656 5.656h-2v-6.686l-4.364 4.364-1.415-1.414 5.779-5.778v-.97l-5.779-5.78 1.415-1.414 4.364 4.364V2.029h2l5.656 5.657-4.343 4.343zm-1.313 1.514v5.657l2.828-2.828-2.828-2.829zm0-3.03l2.828-2.828-2.828-2.828v5.657z"/></symbol><symbol viewBox="0 0 24 24" id="device-recover-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 2a1 1 0 011 1v18a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1h14zm-7 5a5 5 0 10.955 9.909L12 15a3 3 0 010-6c1.598 0 3 1.34 3 3h-2.5l2.128 4.254A5 5 0 0012 7z"/></symbol><symbol viewBox="0 0 24 24" id="headphone-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 12h3a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-7C2 6.477 6.477 2 12 2s10 4.477 10 10v7a2 2 0 01-2 2h-3a2 2 0 01-2-2v-5a2 2 0 012-2h3a8 8 0 10-16 0z"/></symbol><symbol viewBox="0 0 24 24" id="lock-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 10h1a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V11a1 1 0 011-1h1V9a7 7 0 1114 0v1zm-2 0V9A5 5 0 007 9v1h10zm-6 4v4h2v-4h-2z"/></symbol><symbol viewBox="0 0 24 24" id="battery-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 5h16a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm18 4h2v6h-2V9z"/></symbol><symbol viewBox="0 0 24 24" id="pause-circle-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM9 9v6h2V9H9zm4 0v6h2V9h-2z"/></symbol><symbol viewBox="0 0 24 24" id="play-circle-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 00-.622.332v6.506a.4.4 0 00.622.332l4.879-3.252a.4.4 0 000-.666l-4.88-3.252z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-1-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392l5.108 6.324A7.965 7.965 0 0112 13c1.181 0 2.303.256 3.312.716L20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-2-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392l3.178 3.935A10.953 10.953 0 0112 10c1.898 0 3.683.48 5.241 1.327L20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-3-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392l1.904 2.357C7.4 8.637 9.625 8 12 8s4.6.637 6.516 1.749L20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392L12 17.817 20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="stop-circle-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM9 9v6h6V9H9z"/></symbol></defs></svg>
--- a/components/wifi-manager/webapp/webpack/dist/sprite.svg.br
+++ b/components/wifi-manager/webapp/webpack/dist/sprite.svg.br
--- a/components/wifi-manager/webapp/webpack/webpack.common.js
+++ b/components/wifi-manager/webapp/webpack/webpack.common.js
@@ -1,251 +0,0 @@
-/* eslint-disable  */
-// Common Config is used in Development and Production Mode.
-const path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-const webpack = require('webpack');
-const HtmlWebPackPlugin = require('html-webpack-plugin');
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
-const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
-const StylelintPlugin = require('stylelint-webpack-plugin');
-const ESLintPlugin = require('eslint-webpack-plugin');
-const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
-// Linting
-const TSLintPlugin = require('tslint-webpack-plugin');
-const ImageminPlugin = require('imagemin-webpack-plugin').default;
-const imageminMozjpeg = require('imagemin-mozjpeg');
-
-
-module.exports = {
-    entry: {
-        index: './src/index.ts'
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: './js/[name].[hash:6].bundle.js'
-    },
-    module: {
-        rules: [
-            // Raw Loader
-            {
-                test: /\.txt$/,
-                use: 'raw-loader'
-            },
-            //  HTML Loader
-            {
-                test: /\.html$/,
-                use: [
-                    {
-                        loader: 'html-loader',
-                        options: {minimize: true}
-                    }
-                ]
-            },
-            //  CSS/SCSS Loader & Minimizer
-            {
-                test: /\.(sa|sc|c)ss$/,
-                use: [
-                  "style-loader",
-                  "css-loader",
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                          postcssOptions: {
-                            parser: "sugarss",
-                          },
-                      },
-                    },
-                    {
-                        loader: 'resolve-url-loader',
-                        options: {}
-                    },
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            sourceMap: true,
-                            sourceMapContents: false
-
-                        }
-                    }
-                ],
-                
-            },
-            {
-              test: /\.svg$/,
-              use: [
-                { 
-                  loader: 'svg-sprite-loader',
-                  options: { 
-                    extract: true,
-                } },
-                'svg-transform-loader',
-                {
-                  loader: 'svgo-loader',
-                  options: {
-                    plugins: [
-                      {removeTitle: true},
-                      {convertColors: {shorthex: false}},
-                      {convertPathData: false},
-                      {convertPathData:true}
-                    ]
-                  }
-                }
-              ]
-            },
-            // Image Loader
-            {
-                test: /\.(png|jpeg|jpg|webp|gif|ico)/i,
-                use: [
-                    {
-                        loader: 'url-loader',
-                        options: {
-                           // publicPath: '../',
-                            //name: './assets/images/' + '[name].[ext]',
-                            limit: 10000,
-                            //limit:false,
-                            //publicPath: '../'
-                        }
-
-                    },
-                ]
-            },
-            // Babel Loader
-            {
-                test: /\.ts(x?)$/,
-                exclude: /node_modules/,
-                loader: 'babel-loader'
-            },
-            {
-                test: /\.m?js$/,
-                exclude: /(node_modules|bower_components)/,
-                use: {
-                  loader: 'babel-loader',
-                  options: {
-                    presets: ['@babel/preset-env'],
-                    plugins: [
-                        '@babel/plugin-proposal-object-rest-spread',    
-                        '@babel/plugin-proposal-nullish-coalescing-operator',
-                        '@babel/plugin-proposal-optional-chaining',
-                        '@babel/plugin-proposal-class-properties'
-                    ]
-                  }
-                },
-            },
-            // XML Loader
-            {
-                test: /\.xml$/,
-                use: [
-                    'xml-loader'
-                ]
-            }, 
-            {
-                test: require.resolve("bootstrap"),
-                loader: "expose-loader",
-                options: {
-                  exposes: ["bootstrap"],
-                },
-              },          
-              {
-                test: require.resolve("jquery"),
-                loader: "expose-loader",
-                options: {
-                  exposes: ["$", "jQuery"],
-                },
-              },              
-              {
-                test: require.resolve("underscore"),
-                loader: "expose-loader",
-                options: {
-                  exposes: [
-                    "_.map|map",
-                    {
-                      globalName: "_.reduce",
-                      moduleLocalName: "reduce",
-                    },
-                    {
-                      globalName: ["_", "filter"],
-                      moduleLocalName: "filter",
-                    },
-                  ],
-                },
-              },
-            
-        ]
-    },
-    resolve: {
-                 extensions: ['.js', '.jsx', '.tsx', '.ts', '.json'],
-                 alias: {
-                  riSvg: 'remixicon/icons/'
-                }
-    },
-
-    plugins: [
-      new CleanWebpackPlugin(),
-      new ImageminPlugin({
-          test: /\.(jpe?g|png|gif|svg)$/i,
-          // lossLess gif compressor
-          gifsicle: {
-              optimizationLevel: 9
-          },
-          // lossy png compressor, remove for default lossLess
-          pngquant: ({
-              quality: '75'
-          }),
-          // lossy jpg compressor
-          plugins: [imageminMozjpeg({
-              quality: '75'
-          })],
-          destination: './webpack',
-      }),       
-        new ESLintPlugin({
-            cache: true,
-            ignore: true,
-            useEslintrc: true,
-          }),
-        new HtmlWebPackPlugin({
-            title: 'SqueezeESP32',
-            template: './src/index.ejs',
-            filename: 'index.html',
-            inject: 'body',
-            minify: {
-              html5                          : true,
-              collapseWhitespace             : true,
-              minifyCSS                      : true,
-              minifyJS                       : true,
-              minifyURLs                     : false,
-              removeAttributeQuotes          : true,
-              removeComments                 : true, // false for Vue SSR to find app placeholder
-              removeEmptyAttributes          : true,
-              removeOptionalTags             : true,
-              removeRedundantAttributes      : true,
-              removeScriptTypeAttributes     : true,
-              removeStyleLinkTypeAttributese : true,
-              useShortDoctype                : true
-            },
-            favicon: "./src/assets/images/favicon-32x32.png",
-            
-            excludeChunks: ['test'],
-        }),
-        
-        new ScriptExtHtmlWebpackPlugin({
-            defaultAttribute: 'defer'
-        }),
-
-        // // Load Lodash Features Separately https://www.npmjs.com/package/lodash-webpack-plugin
-        new LodashModuleReplacementPlugin({
-            'collections': true,
-            'paths': true,
-        }),
-        new TSLintPlugin({
-          files: ['./src/ts/*.ts']
-      }),        
-         new StylelintPlugin( {
-            files: ['./src/sass/*.s?(a|c)ss'],
-            configFile: './config/.stylelintrc',
-            emitError: true,
-            emitWarning: true,
-            failOnError: false,
-            fix: true
-        }),
-        new SpriteLoaderPlugin({plainSprite: true})
-    ],
-};
--- a/components/wifi-manager/webapp/webpack/webpack.dev.js
+++ b/components/wifi-manager/webapp/webpack/webpack.dev.js
@@ -1,12 +1,8 @@
 /* eslint-disable  */
 var path = require('path');
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
 const bodyParser = require('body-parser')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { config } = require('process');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
-const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const { Command } = require('commander');
 let  cmdLines= { };
 var { parseArgsStringToArgv } = require('string-argv');
@@ -90,6 +86,7 @@ for(const cmdIdx in data.commands.commands){
        (arg.longopts?'--'+arg.longopts:'') + 
        (arg.hasvalue?`${(arg.shortopts || arg.longopts?' ':'')}<${arg.datatype.replace(/[<>]/gm,'')}>`:''));
        //console.log(`   Option: ${optstr}, Glossary: ${arg.glossary}`);
+        if(arg.remark) continue;
        if(arg.mincount>0){
            cmdLines[cmd.name].cmd.requiredOption( optstr,arg.glossary);
        }
@@ -105,15 +102,16 @@ const connectReturnCode = {
      UPDATE_LOST_CONNECTION : 3,
      UPDATE_FAILED_ATTEMPT_AND_RESTORE : 4
  }
-module.exports = merge(common, {
-    mode: 'development',
-    devtool: 'inline-source-map',
+module.exports ={
    entry: {
-        test: './src/test.ts'
-    },    
+        test: './src/test.ts',
+    },
    devServer: {
-        contentBase: path.join(__dirname, 'dist'),
+
+        contentBase: path.resolve(__dirname, './dist'),
        publicPath: '/',
+        open: true,
+        compress: true,
        port: 9100,
        host: '127.0.0.1',//your ip address
        disableHostCheck: true,
@@ -230,25 +228,25 @@ module.exports = merge(common, {
            app.post('/config.json', function(req, res) { 
                var fwurl='';
                console.log(`Processing config.json with request body: ${req.body}`);
-                console.log(data.config);
+                console.log(data.config.config);
                for (const property in req.body.config) {
                    console.log(`${property}: ${req.body.config[property].value}`);
                    if(property=='fwurl'){
                        fwurl=req.body.config[property].value;
                    }
                    else {
-                        if(data.config[property]=== undefined){
+                        if(data.config.config[property]=== undefined){
                            console.log(`Added config value ${property} [${req.body.config[property].value}]`);
-                            data.config[property] = {value: req.body.config[property].value};
+                            data.config.config[property] = {value: req.body.config[property].value};
                        }
-                        else if (data.config[property].value!=req.body.config[property].value){
-                            console.log(`Updated config value ${property}\nFrom: ${data.config[property].value}\nTo: ${req.body.config[property].value}]`);
-                            data.config[property].value=req.body.config[property].value;
+                        else if (data.config.config[property].value!=req.body.config[property].value){
+                            console.log(`Updated config value ${property}\n     From: ${data.config.config[property].value}\n     To: ${req.body.config[property].value}]`);
+                            data.config.config[property].value=req.body.config[property].value;
                        }
                    }

                  }
-                res.json( {} ); 
+                res.json( {"result" : "OK" }); 
                if(fwurl!=='' ){
                    const ota_msg_list= ((data.status.mock_fail_fw_update ?? '')!=='')?data.messages_ota_fail:data.messages_ota;
                    if(data.status.recovery!=1) {
@@ -288,7 +286,7 @@ module.exports = merge(common, {
                        data.status[property]=req.body.status[property];
                    }
                }
-                res.json( {} ); 
+                res.json( {"result" : "OK" } ); 
            });            
            app.post('/connect.json', function(req, res) { 
                setTimeout(function(r){
@@ -306,15 +304,15 @@ module.exports = merge(common, {
                    data.status.urc=connectReturnCode.UPDATE_CONNECTION_OK;
                }
                }, 1000, req);
-                res.json( {} );
+                res.json( {"result" : "OK" } );
             });
            app.post('/reboot_ota.json', function(req, res) { 
                data.status.recovery=0;
                requeueMessages();
-                res.json( {} ); 
+                res.json( {"result" : "OK" } ); 
            });
            app.post('/reboot.json', function(req, res) { 
-                res.json( {} ); 
+                res.json( {"result" : "OK" } ); 
                requeueMessages();
            });
            app.post('/recovery.json', function(req, res) { 
@@ -324,7 +322,7 @@ module.exports = merge(common, {
                else {
                    data.status.recovery=1;
                    requeueMessages();
-                    res.json( { } ); 
+                    res.json( {"result" : "OK" } ); 
                }                
            });
            app.post('/flash.json', function(req, res) { 
@@ -342,7 +340,7 @@ module.exports = merge(common, {
                            requeueMessages();
                            
                        }   
-                        res.json({});                  
+                        res.json({"result" : "OK" });                  
                    }
                    
                }
@@ -352,22 +350,20 @@ module.exports = merge(common, {
            });                  
            app.delete('/connect.json', function(req, res) { 
                data.status.ssid='';
-                res.json( {} ); });
-            app.get('/reboot', function(req, res) { res.json( {} ); });
+                res.json({"result" : "OK" }); });
+            app.get('/reboot', function(req, res) { res.json({"result" : "OK" }); });
        },
    },
    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].css',
-            chunkFilename: 'css/[id].css' ,
-        }),
+
        new HtmlWebPackPlugin({
            title: 'SqueezeESP32-test',
            template: './src/test.ejs',
            filename: 'test',
            minify: false,
-            excludeChunks: ['index'],
+            inject: 'body',
+            excludeChunks: ['index','main'],
        })

    ],
-});
+}
--- a/components/wifi-manager/webapp/webpack/webpack.prod.js
+++ b/components/wifi-manager/webapp/webpack/webpack.prod.js
@@ -1,188 +0,0 @@
-/* eslint-disable  */
-// Merges webpack.common config with this production config
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-
-// Optimisations and Compression
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
-
-const fs = require('fs');
-const glob = require('glob');
-var WebpackOnBuildPlugin = require('on-build-webpack');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const path = require('path')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const PurgecssPlugin = require('purgecss-webpack-plugin')
-
-// Optional
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
-const PATHS = {
-    src: path.join(__dirname, 'src')
-  }
-module.exports = merge(common, {
-    mode: 'production',
-    stats: 'errors-only',
-    optimization: {
-        minimizer: [
-            new TerserPlugin({
-                test: /\.js(\?.*)?$/i,
-                exclude: /node_modules/,
-                cache: true,
-                parallel: 4,
-                sourceMap: true,
-            }),
-            new OptimizeCSSAssetsPlugin({})
-        ],
-        runtimeChunk: 'single',
-        splitChunks: {
-            chunks: 'all',
-            // maxInitialRequests: Infinity,
-            // minSize: 0,
-            cacheGroups: {
-                vendor: {
-                    test: /node_modules/, // you may add "vendor.js" here if you want to
-                    name: "node-modules",
-                    chunks: "initial",
-                    enforce: true
-                },
-            }
-        },
-    },
-    plugins: [
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].[hash:6].css',
-            chunkFilename: 'css/[name].[contenthash].css',
-
-        }),
-        new ExtractTextPlugin('[name].css?[hash]'),
-    new PurgecssPlugin({
-      paths: glob.sync(`${PATHS.src}/*`),
-      whitelist: ['whitelisted']
-    }),
-        new CleanWebpackPlugin(),
-        new CompressionPlugin({
-            test: /\.(js|css|html|svg)$/,
-            filename: '[path].br[query]',
-            algorithm: 'brotliCompress',
-            compressionOptions: { level: 11 },
-            threshold: 100,
-            minRatio: 0.8,
-            deleteOriginalAssets: false
-        }),
-        new CompressionPlugin({
-            filename: '[path].gz[query]',
-            algorithm: 'gzip',
-            test: /\.js$|\.css$|\.html$/,
-            threshold: 100,
-            minRatio: 0.8,
-        }),
-
-        // new FaviconsWebpackPlugin({
-        //     // Your source logo
-        //     logo: './src/assets/images/200px-ControllerAppIcon.png',
-        //     // // The prefix for all image files (might be a folder or a name)
-        //     //prefix: 'assets/icons_[hash:6]/',
-        //     prefix: 'icons_[hash:6]/',
-        //     // // Emit all stats of the generated icons
-        //     //emitStats: false,
-        //     // // The name of the json containing all favicon information
-        //     // statsFilename: 'iconstats-[hash].json',
-        //     // // Generate a cache file with control hashes and
-        //     // // don't rebuild the favicons until those hashes change
-        //     persistentCache: true,
-        //     // // Inject the html into the html-webpack-plugin
-        //     inject: true,
-        //     // // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
-        //     background: '#fff',
-        //     // // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
-        //      icons: {
-        //     //   android: false,
-        //     //   appleIcon: false,
-        //        favicons: true
-        //     //   firefox: true,
-        //     //   windows: false
-        //     }
-        // }),
-        new WebpackOnBuildPlugin(function(stats) {
-
-            var getDirectories = function (src, callback) {
-                glob(`${src}/**/*(*.gz|favicon-32x32.png)`, callback);
-                };
-            console.log('Cleaning up previous builds');
-            glob(`../../../build/*.S`, function (err, list) {                  
-                if (err) {
-                    console.error('Error', err);
-                } else {
-                    list.forEach(fileName=>{
-                        try {
-                            console.log(`Purging old binary file ${fileName} from C project.`);
-                            fs.unlinkSync(fileName)
-                            //file removed
-                            } catch(ferr) {
-                            console.error(ferr)
-                            }
-                    });
-                }
-            }
-            );
-            console.log('Generating C include files from webpack build output');
-            getDirectories('./webpack/dist', function (err, list) {
-                if (err) {
-                    console.log('Error', err);
-                } else {
-                    const regex = /^(.*\/)([^\/]*)$/
-                    const relativeRegex = /((\w+(?<!dist)\/){0,1}[^\/]*)$/
-                    const makePathRegex = /([^\.].*)$/
-                    let exportDefHead=
-                    '/***********************************\n'+
-                    'webpack_headers\n'+
-                    stats+'\n'+
-                    '***********************************/\n'+
-                    '#pragma once\n'+
-                    '#include <inttypes.h>\n'+
-                    'extern const char * resource_lookups[];\n'+
-                    'extern const uint8_t * resource_map_start[];\n'+
-                    'extern const uint8_t * resource_map_end[];\n';
-                    let exportDef=  '// Automatically generated. Do not edit manually!.\n'+
-                                    '#include <inttypes.h>\n';
-                    let lookupDef='const char * resource_lookups[] = {\n';
-                    let lookupMapStart='const uint8_t * resource_map_start[] = {\n';
-                    let lookupMapEnd='const uint8_t * resource_map_end[] = {\n';
-                    let cMake='';
-                    list.forEach(fileName=>{
-                            let exportName=fileName.match(regex)[2].replace(/[\. \-]/gm,'_');
-                            let relativeName=fileName.match(relativeRegex)[1];
-                            exportDef+=	'extern const uint8_t _'+exportName+'_start[] asm("_binary_'+exportName+'_start");\n'+
-                                    'extern const uint8_t _'+exportName+'_end[] asm("_binary_'+exportName+'_end");\n';
-                            lookupDef+='\t"/'+relativeName+'",\n';
-                            lookupMapStart+='\t_'+ exportName+'_start,\n';
-                            lookupMapEnd+= '\t_'+ exportName+'_end,\n';
-                            cMake+='target_add_binary_data( __idf_wifi-manager ./webapp'+fileName.match(makePathRegex)[1]+' BINARY)\n';
-                    });
-
-                    lookupDef+='""\n};\n';
-                    lookupMapStart=lookupMapStart.substring(0,lookupMapStart.length-2)+'\n};\n';
-                    lookupMapEnd=lookupMapEnd.substring(0,lookupMapEnd.length-2)+'\n};\n';
-                    try {
-                        fs.writeFileSync('webapp.cmake', cMake);
-                        fs.writeFileSync('webpack.c', exportDef+lookupDef+lookupMapStart+lookupMapEnd);
-                        fs.writeFileSync('webpack.h', exportDefHead);
-                        //file written successfully
-                        } catch (e) {
-                        console.error(e);
-                        }        
-                }
-            });
-            console.log('Post build completed.');
-
-        })
-        //,        new BundleAnalyzerPlugin()               
-    ]
-});
-
				`@@ -1 +0,0 @@`
				!function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a\|\|[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f++){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={2:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)\|\|Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="";var f=window.webpackJsonp=window.webpackJsonp\|\|[],i=f.push.bind(f);f.push=r,f=f.slice();for(var a=0;a<f.length;a++)r(f[a]);var p=i;t()}([]);
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg"><defs><symbol viewBox="0 0 24 24" id="battery-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 7v10h14V7H4zM3 5h16a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm18 4h2v6h-2V9z"/></symbol><symbol viewBox="0 0 24 24" id="lock-unlock-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 10h13a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V11a1 1 0 011-1h1V9a7 7 0 0113.262-3.131l-1.789.894A5 5 0 007 9v1zm3 5v2h4v-2h-4z"/></symbol><symbol viewBox="0 0 24 24" id="battery-low-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 7v10h14V7H4zM3 5h16a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm2 3h4v8H5V8zm16 1h2v6h-2V9z"/></symbol><symbol viewBox="0 0 24 24" id="bluetooth-connect-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M14.341 12.03l4.343 4.343-5.656 5.656h-2v-6.686l-4.364 4.364-1.415-1.414 5.779-5.778v-.97l-5.779-5.78 1.415-1.414 4.364 4.364V2.029h2l5.656 5.657-4.343 4.343zm-1.313 1.514v5.657l2.828-2.828-2.828-2.829zm0-3.03l2.828-2.828-2.828-2.828v5.657zM19.5 13.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm-13 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></symbol><symbol viewBox="0 0 24 24" id="bluetooth-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M14.341 12.03l4.343 4.343-5.656 5.656h-2v-6.686l-4.364 4.364-1.415-1.414 5.779-5.778v-.97l-5.779-5.78 1.415-1.414 4.364 4.364V2.029h2l5.656 5.657-4.343 4.343zm-1.313 1.514v5.657l2.828-2.828-2.828-2.829zm0-3.03l2.828-2.828-2.828-2.828v5.657z"/></symbol><symbol viewBox="0 0 24 24" id="device-recover-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 2a1 1 0 011 1v18a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1h14zm-7 5a5 5 0 10.955 9.909L12 15a3 3 0 010-6c1.598 0 3 1.34 3 3h-2.5l2.128 4.254A5 5 0 0012 7z"/></symbol><symbol viewBox="0 0 24 24" id="headphone-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 12h3a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-7C2 6.477 6.477 2 12 2s10 4.477 10 10v7a2 2 0 01-2 2h-3a2 2 0 01-2-2v-5a2 2 0 012-2h3a8 8 0 10-16 0z"/></symbol><symbol viewBox="0 0 24 24" id="lock-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 10h1a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V11a1 1 0 011-1h1V9a7 7 0 1114 0v1zm-2 0V9A5 5 0 007 9v1h10zm-6 4v4h2v-4h-2z"/></symbol><symbol viewBox="0 0 24 24" id="battery-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 5h16a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm18 4h2v6h-2V9z"/></symbol><symbol viewBox="0 0 24 24" id="pause-circle-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM9 9v6h2V9H9zm4 0v6h2V9h-2z"/></symbol><symbol viewBox="0 0 24 24" id="play-circle-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 00-.622.332v6.506a.4.4 0 00.622.332l4.879-3.252a.4.4 0 000-.666l-4.88-3.252z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-1-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392l5.108 6.324A7.965 7.965 0 0112 13c1.181 0 2.303.256 3.312.716L20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-2-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392l3.178 3.935A10.953 10.953 0 0112 10c1.898 0 3.683.48 5.241 1.327L20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-3-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392l1.904 2.357C7.4 8.637 9.625 8 12 8s4.6.637 6.516 1.749L20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3z"/></symbol><symbol viewBox="0 0 24 24" id="signal-wifi-line"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c4.284 0 8.22 1.497 11.31 3.996L12 21 .69 6.997A17.917 17.917 0 0112 3zm0 2c-3.028 0-5.923.842-8.42 2.392L12 17.817 20.42 7.39A15.928 15.928 0 0012 5z"/></symbol><symbol viewBox="0 0 24 24" id="stop-circle-fill"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM9 9v6h6V9H9z"/></symbol></defs></svg>