new debugger and websockets

Software/data_src/index.htm

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="static/css/tweaks.css">
   <script src="static/js/jquery.min.js"></script>
   <script src="static/js/bootstrap.min.js"></script>
+  <script src="static/js/websocket.js"></script>
   <link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
@@ -523,6 +524,19 @@
         </table>
         </p>
         <hr />
+        <p>
+          <h4>Live Debug</h4>
+            <div class="form-group row">
+              <textarea class="form-control" spellcheck="false" id="livedebug-out" rows="3" readonly></textarea>
+            </div>
+            <div class="form-group row">
+              <div class="col text-center">
+                <button id="btn-ws-start" class="btn btn-outline-primary">Start</button>
+                <button id="btn-ws-stop" class="btn btn-outline-primary ml-2">Stop</button>
+              </div>
+            </div>
+          </p>
+          <hr />
       </div>
       <!-- Div Tab SystemInfo -->
       <!-- Div Tab Firmware Update-->

Software/data_src/static/js/websocket.js

@@ -0,0 +1,68 @@
+var gateway = `ws://${window.location.hostname}/ws`;
+var websocket;
+
+window.addEventListener("load", onLoad);
+
+function initWebSocket() {
+  console.log("Trying to open a WebSocket connection...");
+  websocket = new WebSocket(gateway);
+  websocket.onopen = onOpen;
+  websocket.onclose = onClose;
+  websocket.onmessage = onMessage; // <-- add this line
+}
+
+function initButtons() {
+  document
+    .getElementById("btn-ws-stop")
+    .addEventListener("click", livedebug_stop);
+  document
+    .getElementById("btn-ws-start")
+    .addEventListener("click", livedebug_start);
+}
+
+function onOpen(event) {
+  console.log("Connection opened");
+}
+
+function onClose(event) {
+  console.log("Connection closed");
+  setTimeout(initWebSocket, 2000);
+}
+
+function onMessage(event) {
+  var livedebug_out = document.getElementById("livedebug-out");
+  var textarea_heigth = livedebug_out.scrollHeight;
+  livedebug_out.value += event.data;
+  livedebug_out.scrollTop = livedebug_out.scrollHeight;
+  do_resize(livedebug_out);
+}
+
+function onLoad(event) {
+  initWebSocket();
+  initButtons();
+}
+
+function livedebug_start() {
+  websocket.send("start");
+}
+
+function livedebug_stop() {
+  websocket.send("stop");
+}
+
+function do_resize(textbox) {
+  var maxrows = 15;
+  var minrows = 3;
+  var txt = textbox.value;
+  var cols = textbox.cols;
+
+  var arraytxt = txt.split("\n");
+  var rows = arraytxt.length;
+
+  for (i = 0; i < arraytxt.length; i++)
+    rows += parseInt(arraytxt[i].length / cols);
+
+  if (rows > maxrows) textbox.rows = maxrows;
+  else if (rows < minrows) textbox.rows = minrows;
+  else textbox.rows = rows;
+}