simple serial monitor in httpserver

data/index.html

@@ -60,6 +60,13 @@
         </div>
   </div>
 
+  <div class="terminal">
+    <input type="button" id="clear_term" value="clear" onclick="clearTerminal();">
+    <input type="checkbox" id="scroll" name="scroll" value="scroll">
+    <label for="scroll"> autoscroll </label>
+    <textarea id="term"> waiting for log messages ... </textarea>
+  </div>
+
 </body>
 
 <script src="/input.js"></script>

data/input.js

@@ -1,8 +1,40 @@
-var slider = document.getElementById("range1");
+// var slider = document.getElementById("helligkeit");
-var output = document.getElementById("l_pwm");
+// var output = document.getElementById("l_pwm");
-output.innerHTML = slider.value; // Display the default slider value
+// output.innerHTML = slider.value; // Display the default slider value
 
-// Update the current slider value (each time you drag the slider handle)
+// // Update the current slider value (each time you drag the slider handle)
-slider.oninput = function() {
+// slider.oninput = function() {
-  output.innerHTML = this.value;
+//   output.innerHTML = this.value;
+// }
+
+
+
+let xhr = new XMLHttpRequest();
+              
+xhr.onreadystatechange = function(){
+  if(xhr.readyState == 4) {
+    if (xhr.status == 200){
+      console.log(xhr.responseText);
+      terminal = document.getElementById("term");
+      autoscroll = document.getElementById("scroll");
+      terminal.innerHTML += xhr.responseText + '\n';
+      if(autoscroll.checked)
+        terminal.scrollTop = terminal.scrollHeight;
+    }
+    else {
+      console.log("status:", xhr.status);
+    }
+  }
+}
+
+function reloadTerminal() {
+  xhr.open("GET", "/terminal", true);
+  xhr.send();
+  setTimeout(reloadTerminal, 1000);
+};
+
+reloadTerminal();
+
+function clearTerminal() {
+  document.getElementById("term").innerHTML = '';
 }

data/style.css

@@ -3,7 +3,7 @@ html {
   font-family: sans-serif, Arial, Helvetica;
   background-color: #d4d4d4;
   height: 100%;
-  background-image: url('Background.png');
+  /* background-image: url('Background.png'); */
   background-repeat: repeat;
   background-size: 150% 150%;
 }
@@ -103,4 +103,22 @@ input:checked + .slider:before {
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
+*/
 
+.terminal {
+  margin:5%;
+  padding: 1%;
+  width: 80%;
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
+#term {
+  font-size: large;
+  width: 100%;
+  height: 10em;
+}
+
+#clear_term {
+  margin: 2px;
+}

lib/httpserver/filesys.cpp

@@ -1,12 +1,5 @@
 #include "filesys.h"
 
-// listDir("/");
-// deleteFile("/hello.txt");
-// writeFile("/hello.txt", "Hello ");
-// appendFile("/hello.txt", "World!\n\r");
-// printFile("/hello.txt");
-// listDir("/");
-
 FSInfo fsinfo;
 
 bool mount_fs() {

lib/httpserver/filesys.h

@@ -2,6 +2,8 @@
 
 #include <LittleFS.h>
 
+// some usefull wrappers for Filesystem
+
 bool mount_fs();
 bool format_fs();
 

lib/httpserver/httpserver.h

@@ -38,6 +38,7 @@ public:
             File f = open("/compress.html.gz");
             if (!f) {
                 Serial.println("Failed to open file for reading");
+                send(404, "text/plain", "Failed to open file for reading");
             }
             else
             {
@@ -50,7 +51,7 @@ public:
             File f = open("/comp.html.gz");
             if (!f) {
                 Serial.println("Failed to open file for reading");
-
+                send(404, "text/plain", "Failed to open file for reading");
             }
             else
             {
@@ -58,7 +59,14 @@ public:
                 const String cont = "text/html";
                 streamFile(f, cont);
             }
+        });       
+        
+        on("/terminal", [this]() {
+            String log_msg = "terminal: millis: ";
+            log_msg += millis();
+            send(200, "text/plain", log_msg);
         });
+
         onNotFound([this]() {
             String message = "File Not Found\n\n";
             message += "URI: ";