From 3ad4d5726a4e887fbbd3d916ff1d362a5f4621a4 Mon Sep 17 00:00:00 2001
From: tueddy <kaffee>
Date: Tue, 8 Feb 2022 22:56:18 +0100
Subject: [PATCH] improved web-upload progress minor fixes web-uplaod: show
 remaining time while uploading & time elapsed + KB/s when finished webpage:
 syntax fixes, own icon for images/cover image coverimage feature: remove
 filename property (already available) webpage/Info: show IP-address refactor
 print wake-up reason from main.cpp to System_ShowWakeUpReason();

---
 html/management_DE.html | 85 +++++++++++++++++++++++++++++++++--------
 src/AudioPlayer.cpp     | 24 ++++++------
 src/AudioPlayer.h       |  1 -
 src/HTMLmanagement_DE.h | 85 +++++++++++++++++++++++++++++++++--------
 src/System.cpp          | 27 +++++++++++++
 src/System.h            |  3 +-
 src/Web.cpp             | 66 +++++++++++++++++---------------
 src/main.cpp            | 28 +-------------
 8 files changed, 215 insertions(+), 104 deletions(-)

diff --git a/html/management_DE.html b/html/management_DE.html
index b040c9ae..f5b629ef 100644
--- a/html/management_DE.html
+++ b/html/management_DE.html
@@ -4,7 +4,7 @@
     <title>ESPuino-Konfiguration</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" type="image/x-icon" href="https://espuino.de/espuino/favicon.ico">
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon">
     <link rel="stylesheet" href="https://espuino.de/espuino/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
@@ -137,7 +137,7 @@
 <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
     <div class="col-md-12">
     <a class="float-left navbar-brand">
-        <img src="https://www.espuino.de/espuino/Espuino32.png"
+        <img src="/logo"
              width="35" height="35" class="d-inline-block align-top" alt=""/>
         ESPuino
     </a>
@@ -191,7 +191,7 @@
                 <div class="form-group col-md-12">
                     <legend>Steuerung</legend>
                     <div class="form-group col-md-12">
-                        <img src="/cover" class="coverimage-container" id="coverimg">
+                        <img src="/cover" class="coverimage-container" id="coverimg" alt="">
                     </div>
                     <div class="buttons">
                         <button type="button" class="btn btn-default btn-lg" id="nav-btn-first" onclick="sendControl(173)">
@@ -201,7 +201,7 @@
                             <span class="fas fa-backward"></span>
                         </button>
                         <button type="button" class="btn btn-default btn-lg" id="nav-btn-play" onclick="sendControl(170)">
-                            <i id="ico-play-pause" class='fas fa-lg fa-play')></i>
+                            <i id="ico-play-pause" class="fas fa-lg fa-play"></i>
                         </button>
                         <button type="button" class="btn btn-default btn-lg" id="nav-btn-next" onclick="sendControl(172)">
                             <span class="fas fa-forward"></span>
@@ -576,7 +576,6 @@
         "newestOnTop": false,
         "progressBar": false,
         "positionClass": "toast-top-right",
-        "preventDuplicates": false,
         "onclick": null,
         "showDuration": "300",
         "hideDuration": "1000",
@@ -599,8 +598,12 @@
             }).pop();
             if ((/\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|flac|FLAC|m4a|M4A)$/i).test(lastFolder)) {
                 data.instance.set_type(data.instance._model.data[key], 'audio');
+            } else 
+            if ((/\.(png|PNG|jpg|JPG|jpeg|JPEG|bmp|BMP|gif|GIF)$/i).test(lastFolder)) {
+                data.instance.set_type(data.instance._model.data[key], 'image');
+                data.instance.disable_node(data.instance._model.data[key]);
             } else {
-                if (data.instance._model.data[key]['type'] == "file") {
+             if (data.instance._model.data[key]['type'] == "file") {
                     data.instance.disable_node(data.instance._model.data[key]);
                 }
             }
@@ -608,6 +611,7 @@
         });
     }
 
+
     /* File Explorer functions begin*/
     var lastSelectedNodePath = "";
 
@@ -733,23 +737,64 @@
             contentType: false,
             processData:false,
 			xhr: function() {
+                var lastNow = new Date().getTime();
+                startTime = new Date().getTime();
+                var lastKBytes = 0;
+                bytesTotal = 0;
 				var xhr = new window.XMLHttpRequest();
 
 				xhr.upload.addEventListener("progress", function(evt) {
 				  if (evt.lengthComputable) {
+                    var now = new Date().getTime();  
+                    bytesTotal = evt.total;
 					var percentComplete = evt.loaded / evt.total;
 					percentComplete = parseInt(percentComplete * 100);
-                    console.log(percentComplete);
+                    kbytes = evt.loaded / 1024;
+                    var uploadedkBytes = kbytes - lastKBytes;
+                    var elapsed = (now - lastNow) / 1000;
+                    elapsed_total = (now - startTime) / 1000;
+                    var kbps = elapsed ? uploadedkBytes / elapsed : 0;
+                    lastKBytes = kbytes;
+                    lastNow = now;
+
+                    var seconds_elapsed =  (now - startTime) / 1000;
+                    var bytes_per_second =  seconds_elapsed ? evt.loaded / seconds_elapsed : 0;
+                    var Kbytes_per_second = bytes_per_second / 1024;
+                    var remaining_bytes =   evt.total - evt.loaded;                    
+                    var seconds_remaining = seconds_elapsed ? (remaining_bytes / bytes_per_second) : 'wird berechnet..' ;
+
                     var percent = percentComplete + '%';
-                    $("#explorerUploadProgress").css('width', percent).text(percent);
+                    console.log("Percent: " + percent + ", " + Kbytes_per_second.toFixed(2) + " KB/s");
+                    var progressText = percent;
+                    if (seconds_remaining > 60) {
+                        progressText = progressText + ", " + (seconds_remaining / 60).toFixed(0) + " Min. verbleibend..";
+                    } else
+                    if (seconds_remaining <= 0) {
+                        progressText = progressText + " (" + Kbytes_per_second.toFixed(2) + " KB/s)";
+                    } else
+                     if (seconds_remaining < 2) {
+                        progressText = progressText + ", wenige Sek. verbleibend..";
+                    } else {
+                        progressText = progressText + ", " + seconds_remaining.toFixed(0) + " Sek. verbleibend..";
+                    }
+                    $("#explorerUploadProgress").css('width', percent).text(progressText);
 				  }
 				}, false);
 
 				return xhr;
 			},
 			success: function(data, textStatus, jqXHR) {
-                console.log("Upload success!");
-                $("#explorerUploadProgress").text("Upload success!");
+                var now = new Date().getTime();  
+                var elapsed_time = (now - startTime);
+                var seconds_elapsed =  elapsed_time / 1000;
+                var bytes_per_second =  seconds_elapsed ? bytesTotal / seconds_elapsed : 0;
+                var Kbytes_per_second = bytes_per_second / 1024 ;
+                var minutes = Math.floor(seconds_elapsed / 60);
+                var seconds = seconds_elapsed - (minutes * 60);
+                var timeText = minutes.toString().padStart(2, '0') + ':' + seconds.toFixed(0).toString().padStart(2, '0');
+                console.log("Upload success (" + timeText + ", " + Kbytes_per_second.toFixed(2) + " KB/s): " + textStatus);
+                var progressText = "Upload abgeschlossen (" + timeText + ", " + Kbytes_per_second.toFixed(2) + "  KB/s).";
+                $("#explorerUploadProgress").text(progressText);
                 document.getElementById('uploaded_file').value = '';
                 document.getElementById('uploaded_file_text').innerHTML = '';
 
@@ -758,11 +803,14 @@
 					deleteChildrenNodes(sel);
 					addFileDirectory(sel, data);
 					ref.open_node(sel);
-
-
 				});
 
-			}
+			},
+            error: function(request, status, error) {
+                console.log("Upload ERROR!");
+                $("#explorerUploadProgress").text("Upload-Fehler: " + status);
+                toastr.error("Upload-Fehler: " + status);
+            }
         });
 	});
 
@@ -846,6 +894,8 @@
 			type = "folder";
 		} else if ((/\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|m4a|M4A|flac|FLAC)$/i).test(data.name)) {
 			type = "audio";
+		} else if ((/\.(png|PNG|jpg|JPG|jpeg|JPEG|bmp|BMP|gif|GIF)$/i).test(data.name)) {
+			type = "image";
 		} else {
 			type = "file";
 		}
@@ -893,6 +943,9 @@
 						'audio': {
 							'icon': "fa fa-file-audio"
 						},
+						'image': {
+							'icon': "fa fa-file-image"
+						},
 						'default': {
 							'icon': "fa fa-folder"
 						}
@@ -1040,7 +1093,7 @@
                   toastr.success("Aktion erfolgreich ausgeführt." );
               }
           } if ("pong" in socketMsg) {
-              if (socketMsg.pong == 'pong') {
+            if (socketMsg.pong == 'pong') {
                   pong();
               }
             } if ("volume" in socketMsg) {
@@ -1050,9 +1103,9 @@
 
                 var btnTrackPlayPause = document.getElementById('nav-btn-play');
                 if (socketMsg.trackinfo.pausePlay) {
-                    btnTrackPlayPause.innerHTML = '<i id="ico-play-pause" class="fas fa-lg fa-play")></i>';
+                    btnTrackPlayPause.innerHTML = '<i id="ico-play-pause" class="fas fa-lg fa-play"></i>';
                 } else {
-                    btnTrackPlayPause.innerHTML = '<i id="ico-play-pause" class="fas fa-lg fa-pause")></i>';
+                    btnTrackPlayPause.innerHTML = '<i id="ico-play-pause" class="fas fa-lg fa-pause"></i>';
                 }
 
                 var btnTrackFirst = document.getElementById('nav-btn-first');
diff --git a/src/AudioPlayer.cpp b/src/AudioPlayer.cpp
index cdd7ad69..16ca4d30 100644
--- a/src/AudioPlayer.cpp
+++ b/src/AudioPlayer.cpp
@@ -100,8 +100,9 @@ void AudioPlayer_Init(void) {
     // Adjust volume depending on headphone is connected and volume-adjustment is enabled
     AudioPlayer_SetupVolume();
 
-    // delete cover image
-    gPlayProperties.coverFileName = NULL;
+    // clear cover image
+    gPlayProperties.coverFilePos = 0;
+
     if (System_GetOperationMode() == OPMODE_NORMAL) {       // Don't start audio-task in BT-mode!
         xTaskCreatePinnedToCore(
             AudioPlayer_Task,      /* Function to implement the task */
@@ -365,8 +366,8 @@ void AudioPlayer_Task(void *parameter) {
                         gPlayProperties.title = NULL;
                     }
                     Web_SendWebsocketData(0, 30);
-                    // delete cover image
-					gPlayProperties.coverFileName = NULL;
+                    // clear cover image
+                    gPlayProperties.coverFilePos = 0;
                     Web_SendWebsocketData(0, 40);
                     continue;
 
@@ -459,8 +460,8 @@ void AudioPlayer_Task(void *parameter) {
                             free(gPlayProperties.title);
                             gPlayProperties.title = NULL;
                         }
-                        // delete cover image
-						gPlayProperties.coverFileName = NULL;
+                        // clear cover image
+                        gPlayProperties.coverFilePos = 0;
                         Web_SendWebsocketData(0, 40);
                         audioReturnCode = audio->connecttoFS(gFSystem, *(gPlayProperties.playlist + gPlayProperties.currentTrackNumber));
                         // consider track as finished, when audio lib call was not successful
@@ -599,8 +600,8 @@ void AudioPlayer_Task(void *parameter) {
                     free(gPlayProperties.title);
                     gPlayProperties.title = NULL;
                 }
-                // delete cover image
-                gPlayProperties.coverFileName = NULL;
+                // clear cover image
+                gPlayProperties.coverFilePos = 0;
                 Web_SendWebsocketData(0, 40);
                 audioReturnCode = audio->connecttohost(*(gPlayProperties.playlist + gPlayProperties.currentTrackNumber));
                 gPlayProperties.playlistFinished = false;
@@ -618,8 +619,8 @@ void AudioPlayer_Task(void *parameter) {
                         free(gPlayProperties.title);
                         gPlayProperties.title = NULL;
                     }
-                    // delete cover image
-                    gPlayProperties.coverFileName = NULL;
+                    // clear cover image
+                    gPlayProperties.coverFilePos = 0;
                     Web_SendWebsocketData(0, 40);
                     audioReturnCode = audio->connecttoFS(gFSystem, *(gPlayProperties.playlist + gPlayProperties.currentTrackNumber));
                     // consider track as finished, when audio lib call was not successful
@@ -1189,8 +1190,7 @@ void audio_lasthost(const char *info) { //stream URL played
 
 // id3 tag: save cover image
 void audio_id3image(File& file, const size_t pos, const size_t size) {
-    // save cover image file and position/size for later use
-    gPlayProperties.coverFileName = (char *)(file.name());
+    // save cover image position and size for later use
     gPlayProperties.coverFilePos = pos;
     gPlayProperties.coverFileSize = size;
     // websocket notify cover image has changed
diff --git a/src/AudioPlayer.h b/src/AudioPlayer.h
index 63c97a4c..f7ae12e6 100644
--- a/src/AudioPlayer.h
+++ b/src/AudioPlayer.h
@@ -25,7 +25,6 @@ typedef struct { // Bit field
     bool tellIpAddress:                 1;      // If true current IP-address is spoken
     bool currentSpeechActive:           1;      // If speech-play is active
     bool lastSpeechActive:              1;      // If speech-play was active
-    char *coverFileName;                        // current coverfile
     size_t coverFilePos;                        // current cover file position
     size_t coverFileSize;                       // current cover file size
 } playProps;
diff --git a/src/HTMLmanagement_DE.h b/src/HTMLmanagement_DE.h
index 82e4e245..2ed3e5d1 100644
--- a/src/HTMLmanagement_DE.h
+++ b/src/HTMLmanagement_DE.h
@@ -4,7 +4,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
     <title>ESPuino-Konfiguration</title>\
     <meta charset=\"utf-8\">\
     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
-    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"https://espuino.de/espuino/favicon.ico\">\
+    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon\">\
     <link rel=\"stylesheet\" href=\"https://espuino.de/espuino/css/bootstrap.min.css\">\
     <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css\"/>\
     <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css\"/>\
@@ -137,7 +137,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 <nav class=\"navbar navbar-expand-sm bg-primary navbar-dark\">\
     <div class=\"col-md-12\">\
     <a class=\"float-left navbar-brand\">\
-        <img src=\"https://www.espuino.de/espuino/Espuino32.png\"\
+        <img src=\"/logo\"\
              width=\"35\" height=\"35\" class=\"d-inline-block align-top\" alt=\"\"/>\
         ESPuino\
     </a>\
@@ -191,7 +191,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                 <div class=\"form-group col-md-12\">\
                     <legend>Steuerung</legend>\
                     <div class=\"form-group col-md-12\">\
-                        <img src=\"/cover\" class=\"coverimage-container\" id=\"coverimg\">\
+                        <img src=\"/cover\" class=\"coverimage-container\" id=\"coverimg\" alt=\"\">\
                     </div>\
                     <div class=\"buttons\">\
                         <button type=\"button\" class=\"btn btn-default btn-lg\" id=\"nav-btn-first\" onclick=\"sendControl(173)\">\
@@ -201,7 +201,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                             <span class=\"fas fa-backward\"></span>\
                         </button>\
                         <button type=\"button\" class=\"btn btn-default btn-lg\" id=\"nav-btn-play\" onclick=\"sendControl(170)\">\
-                            <i id=\"ico-play-pause\" class='fas fa-lg fa-play')></i>\
+                            <i id=\"ico-play-pause\" class=\"fas fa-lg fa-play\"></i>\
                         </button>\
                         <button type=\"button\" class=\"btn btn-default btn-lg\" id=\"nav-btn-next\" onclick=\"sendControl(172)\">\
                             <span class=\"fas fa-forward\"></span>\
@@ -576,7 +576,6 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
         \"newestOnTop\": false,\
         \"progressBar\": false,\
         \"positionClass\": \"toast-top-right\",\
-        \"preventDuplicates\": false,\
         \"onclick\": null,\
         \"showDuration\": \"300\",\
         \"hideDuration\": \"1000\",\
@@ -599,14 +598,19 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             }).pop();\
             if ((/\\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|flac|FLAC|m4a|M4A)$/i).test(lastFolder)) {\
                 data.instance.set_type(data.instance._model.data[key], 'audio');\
+            } else \
+            if ((/\\.(png|PNG|jpg|JPG|jpeg|JPEG|bmp|BMP|gif|GIF)$/i).test(lastFolder)) {\
+                data.instance.set_type(data.instance._model.data[key], 'image');\
+                data.instance.disable_node(data.instance._model.data[key]);\
             } else {\
-                if (data.instance._model.data[key]['type'] == \"file\") {\
+             if (data.instance._model.data[key]['type'] == \"file\") {\
                     data.instance.disable_node(data.instance._model.data[key]);\
                 }\
             }\
             data.instance.rename_node(data.instance._model.data[key], lastFolder);\
         });\
     }\
+\
 \
     /* File Explorer functions begin*/\
     var lastSelectedNodePath = \"\";\
@@ -733,23 +737,64 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
             contentType: false,\
             processData:false,\
 			xhr: function() {\
+                var lastNow = new Date().getTime();\
+                startTime = new Date().getTime();\
+                var lastKBytes = 0;\
+                bytesTotal = 0;\
 				var xhr = new window.XMLHttpRequest();\
 \
 				xhr.upload.addEventListener(\"progress\", function(evt) {\
 				  if (evt.lengthComputable) {\
+                    var now = new Date().getTime();  \
+                    bytesTotal = evt.total;\
 					var percentComplete = evt.loaded / evt.total;\
 					percentComplete = parseInt(percentComplete * 100);\
-                    console.log(percentComplete);\
+                    kbytes = evt.loaded / 1024;\
+                    var uploadedkBytes = kbytes - lastKBytes;\
+                    var elapsed = (now - lastNow) / 1000;\
+                    elapsed_total = (now - startTime) / 1000;\
+                    var kbps = elapsed ? uploadedkBytes / elapsed : 0;\
+                    lastKBytes = kbytes;\
+                    lastNow = now;\
+\
+                    var seconds_elapsed =  (now - startTime) / 1000;\
+                    var bytes_per_second =  seconds_elapsed ? evt.loaded / seconds_elapsed : 0;\
+                    var Kbytes_per_second = bytes_per_second / 1024;\
+                    var remaining_bytes =   evt.total - evt.loaded;                    \
+                    var seconds_remaining = seconds_elapsed ? (remaining_bytes / bytes_per_second) : 'wird berechnet..' ;\
+\
                     var percent = percentComplete + '%';\
-                    $(\"#explorerUploadProgress\").css('width', percent).text(percent);\
+                    console.log(\"Percent: \" + percent + \", \" + Kbytes_per_second.toFixed(2) + \" KB/s\");\
+                    var progressText = percent;\
+                    if (seconds_remaining > 60) {\
+                        progressText = progressText + \", \" + (seconds_remaining / 60).toFixed(0) + \" Min. verbleibend..\";\
+                    } else\
+                    if (seconds_remaining <= 0) {\
+                        progressText = progressText + \" (\" + Kbytes_per_second.toFixed(2) + \" KB/s)\";\
+                    } else\
+                     if (seconds_remaining < 2) {\
+                        progressText = progressText + \", wenige Sek. verbleibend..\";\
+                    } else {\
+                        progressText = progressText + \", \" + seconds_remaining.toFixed(0) + \" Sek. verbleibend..\";\
+                    }\
+                    $(\"#explorerUploadProgress\").css('width', percent).text(progressText);\
 				  }\
 				}, false);\
 \
 				return xhr;\
 			},\
 			success: function(data, textStatus, jqXHR) {\
-                console.log(\"Upload success!\");\
-                $(\"#explorerUploadProgress\").text(\"Upload success!\");\
+                var now = new Date().getTime();  \
+                var elapsed_time = (now - startTime);\
+                var seconds_elapsed =  elapsed_time / 1000;\
+                var bytes_per_second =  seconds_elapsed ? bytesTotal / seconds_elapsed : 0;\
+                var Kbytes_per_second = bytes_per_second / 1024 ;\
+                var minutes = Math.floor(seconds_elapsed / 60);\
+                var seconds = seconds_elapsed - (minutes * 60);\
+                var timeText = minutes.toString().padStart(2, '0') + ':' + seconds.toFixed(0).toString().padStart(2, '0');\
+                console.log(\"Upload success (\" + timeText + \", \" + Kbytes_per_second.toFixed(2) + \" KB/s): \" + textStatus);\
+                var progressText = \"Upload abgeschlossen (\" + timeText + \", \" + Kbytes_per_second.toFixed(2) + \"  KB/s).\";\
+                $(\"#explorerUploadProgress\").text(progressText);\
                 document.getElementById('uploaded_file').value = '';\
                 document.getElementById('uploaded_file_text').innerHTML = '';\
 \
@@ -758,11 +803,14 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 					deleteChildrenNodes(sel);\
 					addFileDirectory(sel, data);\
 					ref.open_node(sel);\
-\
-\
 				});\
 \
-			}\
+			},\
+            error: function(request, status, error) {\
+                console.log(\"Upload ERROR!\");\
+                $(\"#explorerUploadProgress\").text(\"Upload-Fehler: \" + status);\
+                toastr.error(\"Upload-Fehler: \" + status);\
+            }\
         });\
 	});\
 \
@@ -846,6 +894,8 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 			type = \"folder\";\
 		} else if ((/\\.(mp3|MP3|ogg|wav|WAV|OGG|wma|WMA|acc|ACC|m4a|M4A|flac|FLAC)$/i).test(data.name)) {\
 			type = \"audio\";\
+		} else if ((/\\.(png|PNG|jpg|JPG|jpeg|JPEG|bmp|BMP|gif|GIF)$/i).test(data.name)) {\
+			type = \"image\";\
 		} else {\
 			type = \"file\";\
 		}\
@@ -893,6 +943,9 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 						'audio': {\
 							'icon': \"fa fa-file-audio\"\
 						},\
+						'image': {\
+							'icon': \"fa fa-file-image\"\
+						},\
 						'default': {\
 							'icon': \"fa fa-folder\"\
 						}\
@@ -1040,7 +1093,7 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
                   toastr.success(\"Aktion erfolgreich ausgeführt.\" );\
               }\
           } if (\"pong\" in socketMsg) {\
-              if (socketMsg.pong == 'pong') {\
+            if (socketMsg.pong == 'pong') {\
                   pong();\
               }\
             } if (\"volume\" in socketMsg) {\
@@ -1050,9 +1103,9 @@ static const char management_HTML[] PROGMEM = "<!DOCTYPE html>\
 \
                 var btnTrackPlayPause = document.getElementById('nav-btn-play');\
                 if (socketMsg.trackinfo.pausePlay) {\
-                    btnTrackPlayPause.innerHTML = '<i id=\"ico-play-pause\" class=\"fas fa-lg fa-play\")></i>';\
+                    btnTrackPlayPause.innerHTML = '<i id=\"ico-play-pause\" class=\"fas fa-lg fa-play\"></i>';\
                 } else {\
-                    btnTrackPlayPause.innerHTML = '<i id=\"ico-play-pause\" class=\"fas fa-lg fa-pause\")></i>';\
+                    btnTrackPlayPause.innerHTML = '<i id=\"ico-play-pause\" class=\"fas fa-lg fa-pause\"></i>';\
                 }\
 \
                 var btnTrackFirst = document.getElementById('nav-btn-first');\
diff --git a/src/System.cpp b/src/System.cpp
index 7696cb89..fab95792 100644
--- a/src/System.cpp
+++ b/src/System.cpp
@@ -254,6 +254,33 @@ void System_ShowUpgradeWarning(void) {
     }
 }
 
+// Print the wake-up reason why ESP32 is awake now
+void System_ShowWakeUpReason() {
+    esp_sleep_wakeup_cause_t wakeup_reason;
+    wakeup_reason = esp_sleep_get_wakeup_cause();
+
+    switch (wakeup_reason) {
+        case ESP_SLEEP_WAKEUP_EXT0:
+            Serial.println(F("Wakeup caused by push button"));
+            break;
+        case ESP_SLEEP_WAKEUP_EXT1:
+            Serial.println(F("Wakeup caused by low power card detection"));
+            break;
+        case ESP_SLEEP_WAKEUP_TIMER:
+            Serial.println(F("Wakeup caused by timer"));
+            break;
+        case ESP_SLEEP_WAKEUP_TOUCHPAD:
+            Serial.println(F("Wakeup caused by touchpad"));
+            break;
+        case ESP_SLEEP_WAKEUP_ULP:
+            Serial.println(F("Wakeup caused by ULP program"));
+            break;
+        default:
+            Serial.printf("Wakeup was not caused by deep sleep: %d\n", wakeup_reason);
+            break;
+    }
+}
+
 #ifdef ENABLE_ESPUINO_DEBUG
     void System_esp_print_tasks(void) {
         char *pbuffer = (char *)calloc(2048, 1);
diff --git a/src/System.h b/src/System.h
index dd8d4972..4e8ab04b 100644
--- a/src/System.h
+++ b/src/System.h
@@ -24,4 +24,5 @@ void System_SetOperationMode(uint8_t opMode);
 uint8_t System_GetOperationMode(void);
 uint8_t System_GetOperationModeFromNvs(void);
 void System_ShowUpgradeWarning(void);
-void System_esp_print_tasks(void);
\ No newline at end of file
+void System_esp_print_tasks(void);
+void System_ShowWakeUpReason();
\ No newline at end of file
diff --git a/src/Web.cpp b/src/Web.cpp
index 0236cc91..eba127cc 100644
--- a/src/Web.cpp
+++ b/src/Web.cpp
@@ -25,6 +25,7 @@
 #include "Wlan.h"
 #include "revision.h"
 
+
 // Only enable measurements if valid GPIO is used
 #ifdef MEASURE_BATTERY_VOLTAGE
     #if (VOLTAGE_READ_PIN >= 0 && VOLTAGE_READ_PIN <= 39)
@@ -168,39 +169,36 @@ void webserverStart(void) {
             request->send(200, "text/plain; charset=utf-8", Log_GetRingBuffer());
         });
 
-        // heap/psram-info
+        // software/wifi/heap/psram-info
         wServer.on(
             "/info", HTTP_GET, [](AsyncWebServerRequest *request) {
+                String info = "ESPuino " + (String) softwareRevision;
+                info += "\nESP-IDF version: " + String(ESP.getSdkVersion());
                 #if (LANGUAGE == DE)
-                    String info = "Freier Heap: " + String(ESP.getFreeHeap()) + " Bytes";
+                    info += "Freier Heap: " + String(ESP.getFreeHeap()) + " Bytes";
                     info += "\nGroesster freier Heap-Block: " + String((uint32_t)heap_caps_get_largest_free_block(MALLOC_CAP_8BIT)) + " Bytes";
                     info += "\nFreier PSRAM: ";
                     info += (!psramInit()) ? "nicht verfuegbar" : String(ESP.getFreePsram());
                     if (Wlan_IsConnected()) {
+                        IPAddress myIP = WiFi.localIP();
+                        info += "\nAktuelle IP: " + String(myIP[0]) + '.' + String(myIP[1]) + '.' + String(myIP[2]) + '.' + String(myIP[3]);
                         info += "\nWLAN-Signalstaerke: " + String((int8_t)Wlan_GetRssi()) + " dBm";
                     }
-                    info += "\nESP-IDF-version (major): ";
-                    info += ESP_IDF_VERSION_MAJOR;
-                    info += "\nESP-IDF-version (minor): ";
-                    info += ESP_IDF_VERSION_MINOR;
                 #else
-                    String info = "Free heap: " + String(ESP.getFreeHeap()) + " bytes";
+                    info += "Free heap: " + String(ESP.getFreeHeap()) + " bytes";
                     info += "\nLargest free heap-block: " + String((uint32_t)heap_caps_get_largest_free_block(MALLOC_CAP_8BIT)) + " bytes";
                     info += "\nFree PSRAM: ";
                     info += (!psramInit()) ? "not available" : String(ESP.getFreePsram());
                     if (Wlan_IsConnected()) {
+                        IPAddress myIP = WiFi.localIP();
+                        info += "\nCurrent IP: " + String(myIP[0]) + '.' + String(myIP[1]) + '.' + String(myIP[2]) + '.' + String(myIP[3]);
                         info += "\nWiFi signal-strength: " + String((int8_t)Wlan_GetRssi()) + " dBm";
                     }
-                    info += "ESP-IDF major: ";
-                    info += ESP_IDF_VERSION_MAJOR;
-                    info += "\nESP-IDF minor: ";
-                    info += ESP_IDF_VERSION_MINOR;
                 #endif
                 #ifdef ENABLE_BATTERY_MEASUREMENTS
                     snprintf(Log_Buffer, Log_BufferLength, "\n%s: %.2f V", (char *) FPSTR(currentVoltageMsg), Battery_GetVoltage());
                     info += (String) Log_Buffer;
                 #endif
-                info += "\n" + (String) softwareRevision;
                 request->send_P(200, "text/plain", info.c_str());
             });
 
@@ -576,6 +574,9 @@ void Web_SendWebsocketData(uint32_t client, uint8_t code) {
         object["rfidId"] = gCurrentRfidTagId;
     } else if (code == 20) {
         object["pong"] = "pong";
+        object["rssi"] = Wlan_GetRssi();
+        // todo: battery percent + loading status +++
+        //object["battery"] = Battery_GetVoltage();
     } else if (code == 30) {
         JsonObject entry = object.createNestedObject("trackinfo");
         entry["pausePlay"] = gPlayProperties.pausePlay;
@@ -1176,7 +1177,8 @@ bool Web_DumpNvsToSd(const char *_namespace, const char *_destFile) {
 
 // handle album cover image request
 static void handleCoverImageRequest(AsyncWebServerRequest *request) {
-    if (!gPlayProperties.coverFileName) {
+     
+    if (!gPlayProperties.coverFilePos) {
         // empty image:
         // request->send(200, "image/svg+xml", "<?xml version=\"1.0\"?><svg xmlns=\"http://www.w3.org/2000/svg\"/>");
         if (gPlayProperties.playMode == WEBSTREAM) {
@@ -1187,13 +1189,15 @@ static void handleCoverImageRequest(AsyncWebServerRequest *request) {
         } else {
             // no cover -> send placeholder icon for playing music from SD-card (fa-music)
             snprintf(Log_Buffer, Log_BufferLength, "no cover image for SD-card audio");
-            Log_Println(Log_Buffer, LOGLEVEL_NOTICE);
+            Log_Println(Log_Buffer, LOGLEVEL_DEBUG);
             request->send(200, "image/svg+xml", FPSTR("<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" transform=\"scale (0.6)\" xmlns=\"http://www.w3.org/2000/svg\"><path d\=\"M1664 224v1120q0 50-34 89t-86 60.5-103.5 32-96.5 10.5-96.5-10.5-103.5-32-86-60.5-34-89 34-89 86-60.5 103.5-32 96.5-10.5q105 0 192 39v-537l-768 237v709q0 50-34 89t-86 60.5-103.5 32-96.5 10.5-96.5-10.5-103.5-32-86-60.5-34-89 34-89 86-60.5 103.5-32 96.5-10.5q105 0 192 39v-967q0-31 19-56.5t49-35.5l832-256q12-4 28-4 40 0 68 28t28 68z\"/></svg\>"));
         }
         return;
     }
+    char *coverFileName = *(gPlayProperties.playlist + gPlayProperties.currentTrackNumber); 
+    Serial.println(coverFileName);
 
-    File coverFile = gFSystem.open(gPlayProperties.coverFileName, FILE_READ);
+    File coverFile = gFSystem.open(coverFileName, FILE_READ);
     // seek to start position, skip 1 byte encoding
     coverFile.seek(gPlayProperties.coverFilePos + 1);
     // mime-type (null terminated)
@@ -1203,7 +1207,7 @@ static void handleCoverImageRequest(AsyncWebServerRequest *request) {
         if (uint8_t(mimeType[i]) == 0)
             break;
     }
-    snprintf(Log_Buffer, Log_BufferLength, "serve cover image (%s): %s", (char *) mimeType, gPlayProperties.coverFileName);
+    snprintf(Log_Buffer, Log_BufferLength, "serve cover image (%s): %s", (char *) mimeType, coverFileName);
     Log_Println(Log_Buffer, LOGLEVEL_NOTICE);
 
     // skip image type (1 Byte)
@@ -1215,22 +1219,22 @@ static void handleCoverImageRequest(AsyncWebServerRequest *request) {
     }
 
     int imageSize = gPlayProperties.coverFileSize;
-    AsyncWebServerResponse *response = request->beginResponse(
-        mimeType,
-        imageSize,
-        [coverFile](uint8_t *buffer, size_t maxLen, size_t total) -> size_t {
-            File file = coverFile; // local copy of file pointer
-            int bytes = file.read(buffer, maxLen);
-            // close file at the end
-            if (!file.available()) {
-                file.close();
-                    Log_Println("cover image serving finished, close file", LOGLEVEL_DEBUG);
-            }
-            // do not consume too much cpu time
-            vTaskDelay(portTICK_RATE_MS * 50u);
-            return max(0, bytes); // return 0 even when no bytes were loaded
+    AsyncWebServerResponse *response = request->beginChunkedResponse(mimeType, [coverFile,imageSize](uint8_t *buffer, size_t maxLen, size_t index) -> size_t {
+
+        if (maxLen > 1024) {
+            maxLen = 1024;
+        }
+    
+        File file = coverFile; // local copy of file pointer
+        size_t leftToWrite = imageSize - index;
+        if(! leftToWrite) {
+            return 0;//end of transfer
         }
-    );
+        size_t willWrite = (leftToWrite > maxLen)?maxLen:leftToWrite;
+        file.read(buffer, willWrite);
+        index += willWrite;
+        return willWrite;
+    });
     response->addHeader("Cache Control","no-cache, must-revalidate");
     request->send(response);
 }
diff --git a/src/main.cpp b/src/main.cpp
index e9ad590b..6f243365 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -100,32 +100,6 @@
     }
 #endif
 
-// Print the wake-up reason why ESP32 is awake now
-void printWakeUpReason() {
-    esp_sleep_wakeup_cause_t wakeup_reason;
-    wakeup_reason = esp_sleep_get_wakeup_cause();
-
-    switch (wakeup_reason) {
-        case ESP_SLEEP_WAKEUP_EXT0:
-            Serial.println(F("Wakeup caused by push button"));
-            break;
-        case ESP_SLEEP_WAKEUP_EXT1:
-            Serial.println(F("Wakeup caused by low power card detection"));
-            break;
-        case ESP_SLEEP_WAKEUP_TIMER:
-            Serial.println(F("Wakeup caused by timer"));
-            break;
-        case ESP_SLEEP_WAKEUP_TOUCHPAD:
-            Serial.println(F("Wakeup caused by touchpad"));
-            break;
-        case ESP_SLEEP_WAKEUP_ULP:
-            Serial.println(F("Wakeup caused by ULP program"));
-            break;
-        default:
-            Serial.printf("Wakeup was not caused by deep sleep: %d\n", wakeup_reason);
-            break;
-    }
-}
 
 void setup() {
     Log_Init();
@@ -205,7 +179,7 @@ void setup() {
     Serial.println("ESP-IDF version: " + String(ESP.getSdkVersion()));
 
     // print wake-up reason
-    printWakeUpReason();
+    System_ShowWakeUpReason();
 	// print SD card info
     SdCard_PrintInfo();