mock: start mocking real dashboard settings

Signed-off-by: Sean Cross <sean@xobs.io>
2023-12-03 17:54:18 +08:00
parent 0a3b6fe96e
commit efe0397fab
20 changed files with 1742 additions and 26 deletions
--- a/README.md
+++ b/README.md
@@ -10,4 +10,6 @@ npm install

 ## Usage

-This repository installs things within the `node_modules` directory. To run commands, prefix them with `npx`. For example, to run the Typescript compiler, run `npx tsc`. Or to run the Speedy Web Compiler, run `npx swc`.
+This repository installs things within the `node_modules` directory. To run commands, prefix them with `npx`. For example, to run the Typescript compiler, run `npx tsc`. Or to run Webpack, run `npx webpack`.
+
+You will likely be using `npm run build` to build software, and `npm run start` to start interactive development.
--- a/mock/webpack.farpatch.ts
+++ b/mock/webpack.farpatch.ts
@@ -1,10 +1,207 @@
 import { Request, Application, Response } from 'express';

-export function getVoltages(request: Request, response: Response) {
-  // ...
-  response.send('these are some voltages');
+var CONNECTED: boolean = false;
+var SSID: string = '';
+var TASKS = [
+  { 'id': 1, 'name': "ipc0", 'prio': 24, 'state': 'eSuspended', 'stack_hwm': 1244, 'core': '0', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 2, 'name': "ipc1", 'prio': 24, 'state': 'eSuspended', 'stack_hwm': 1236, 'core': '1', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 3, 'name': "esp_timer", 'prio': 22, 'state': 'eSuspended', 'stack_hwm': 2572, 'core': '0', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 5, 'name': "IDLE0", 'prio': 0, 'state': 'eReady', 'stack_hwm': 2340, 'core': '0', 'cpu': 98, 'pc': 0x400559e0 },
+  { 'id': 6, 'name': "IDLE1", 'prio': 0, 'state': 'eReady', 'stack_hwm': 2336, 'core': '1', 'cpu': 99, 'pc': 0x4037d30a },
+  { 'id': 7, 'name': "Tmr Svc", 'prio': 1, 'state': 'eBlocked', 'stack_hwm': 1164, 'core': '0', 'cpu': 0, 'pc': 0x40380e79 },
+  { 'id': 8, 'name': "dbg_log_main", 'prio': 4, 'state': 'eBlocked', 'stack_hwm': 1296, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 9, 'name': "wifi_manager", 'prio': 5, 'state': 'eBlocked', 'stack_hwm': 1400, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 10, 'name': "tiT", 'prio': 18, 'state': 'eBlocked', 'stack_hwm': 844, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 11, 'name': "sys_evt", 'prio': 20, 'state': 'eBlocked', 'stack_hwm': 760, 'core': '0', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 12, 'name': "wifi", 'prio': 23, 'state': 'eBlocked', 'stack_hwm': 3484, 'core': '0', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 13, 'name': "httpd", 'prio': 5, 'state': 'eRunning', 'stack_hwm': 1392, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 14, 'name': "mdns", 'prio': 1, 'state': 'eBlocked', 'stack_hwm': 2108, 'core': '0', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 15, 'name': "uart_rx_task", 'prio': 1, 'state': 'eBlocked', 'stack_hwm': 1456, 'core': '1', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 16, 'name': "net_uart_task", 'prio': 1, 'state': 'eBlocked', 'stack_hwm': 3848, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 17, 'name': "gdb_net", 'prio': 1, 'state': 'eBlocked', 'stack_hwm': 592, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+  { 'id': 18, 'name': "tftpOTATask", 'prio': 4, 'state': 'eBlocked', 'stack_hwm': 1520, 'core': 'ANY', 'cpu': 0, 'pc': 0x400559e0 },
+];
+
+const GET_ENDPOINTS: { [key: string]: (request: Request, response: Response) => any } = {
+  'voltages': getVoltages,
+  'target': getTarget,
+  'version': getVersion,
+  'network': getNetworkStatus,
+  'tasks': getTasks,
+  'serial': getSerialPort,
+  'update': getUpdate,
+  'system': getSystem,
+  'ap': getAccessPoints,
+};
+
+const POST_ENDPOINTS: { [key: string]: (request: Request, response: Response) => any } = {
+  'connect': postConnect,
+};
+
+const DELETE_ENDPOINTS: { [key: string]: (request: Request, response: Response) => any } = {
+  'connect': deleteConnect,
+};
+
+function getTasks(_request: Request, response: Response) {
+  response.send(TASKS);
+}
+
+function getVoltages(_request: Request, response: Response) {
+  var voltages: { [key: string]: number } = {
+    '3.3V': 3.3,
+    'Target': 1.8,
+    'USB': 5.02,
+    'Debug': 5.01,
+    'EXT': 3.7,
+  };
+  response.send(voltages);
+}
+
+function getTarget(_request: Request, response: Response) {
+  var target = {
+    'name': 'nrf52840',
+    'ram': 256 * 1024,
+    'flash': 1024 * 1024,
+    'cpu': 'ARM Cortex-M4F',
+  }
+  var targets = [
+    'nrf52840',
+    'mdf',
+  ];
+  response.send({
+    'current': target,
+    'available': targets,
+  });
+}
+
+
+function getSerialPort(request: Request, response: Response) {
+  var serialPorts = {
+    'uart': {
+      'name': 'serial',
+      'baud_rate': 115200,
+      'parity': 'none',
+      'stop_bits': 1,
+      'data_bits': 8,
+      'flow_control': 'none',
+    },
+    'swo': {
+      'name': 'swo',
+      'baud_rate': 0,
+      'parity': 'none',
+      'stop_bits': 1,
+      'data_bits': 8,
+      'flow_control': 'none',
+    },
+    'uuart': {
+      'name': 'uuart',
+      'baud_rate': 0,
+      'parity': 'none',
+      'stop_bits': 1,
+      'data_bits': 8,
+      'flow_control': 'none',
+    },
+  }
+  response.send(serialPorts);
+}
+
+function getUpdate(request: Request, response: Response) {
+  response.send({
+    'current_partition': {
+      'addr': 0x00010000,
+      'index': 2,
+    },
+    'next_partition': {
+      'addr': 0x00380000,
+      'index': -1,
+    },
+  });
+}
+
+function getSystem(request: Request, response: Response) {
+  response.send({
+    'heap': 149552,
+    'uptime': 1551000,
+  });
+}
+
+function getVersion(_request: Request, response: Response) {
+  response.send({
+    'farpatch': '0.1.0',
+    'bmp': '0.1.0',
+    'hardware': 'DVT5',
+  });
+}
+
+function getNetworkStatus(request: Request, response: Response) {
+  if (CONNECTED) {
+    response.send({ "ssid": SSID, "ip": "10.0.237.133", "netmask": "255.255.255.0", "gw": "10.0.237.1", "urc": 0 });
+  } else {
+    response.send({ "ssid": "", "ip": "0", "netmask": "0", "gw": "0", "urc": 2 });
+  }
+}
+
+function getAccessPoints(_request: Request, response: Response) {
+  response.send([{ "ssid": "Omicron Persei 8", "chan": 6, "rssi": -50, "auth": 3 },
+  { "ssid": "Parelivingroom", "chan": 1, "rssi": -71, "auth": 4 },
+  { "ssid": "HappyWifiHappyLife", "chan": 8, "rssi": -71, "auth": 3 },
+  { "ssid": "SINGTEL-AV4U", "chan": 1, "rssi": -77, "auth": 3 },
+  { "ssid": "TP Living Room", "chan": 9, "rssi": -77, "auth": 3 },
+  { "ssid": "Brett_Home", "chan": 1, "rssi": -80, "auth": 3 },
+  { "ssid": "黄 Fam", "chan": 6, "rssi": -80, "auth": 3 }]);
+}
+
+function postConnect(request: Request, response: Response) {
+  var ssid = request.headers['x-custom-ssid'];
+  var password = request.headers['x-custom-pwd'];
+
+  if (!ssid || !password) {
+    response.status(400).send({ 'error': 'Missing SSID or password' });
+    return;
+  }
+  response.send('{}');
+  CONNECTED = true;
+  if (typeof ssid === 'string') {
+    SSID = ssid;
+  } else {
+    SSID = ssid[0];
+  }
+}
+
+function deleteConnect(_request: Request, response: Response) {
+  console.log("Deleting connection");
+  response.send('{}');
+  CONNECTED = false;
+  SSID = '';
+}
+
+function reportEndpoints(_request: Request, response: Response) {
+  var getEndpointsArray = [];
+  for (var endpoint in GET_ENDPOINTS) {
+    getEndpointsArray.push('/fp/' + endpoint);
+  }
+
+  var postEndpointsArray = [];
+  for (var endpoint in POST_ENDPOINTS) {
+    postEndpointsArray.push('/fp/' + endpoint);
+  }
+  response.send({
+    'endpoints': {
+      'get': getEndpointsArray,
+      'post': postEndpointsArray,
+    }
+  });
 }

 export function installMiddlewares(app: Application) {
-  app.get('/voltages', getVoltages);
+  app.get('/fp/', reportEndpoints);
+  for (var endpoint in GET_ENDPOINTS) {
+    app.get('/fp/' + endpoint, GET_ENDPOINTS[endpoint]);
+  }
+  for (var endpoint in POST_ENDPOINTS) {
+    app.post('/fp/' + endpoint, POST_ENDPOINTS[endpoint]);
+  }
+  for (var endpoint in DELETE_ENDPOINTS) {
+    app.delete('/fp/' + endpoint, DELETE_ENDPOINTS[endpoint]);
+  }
 }
--- a/src/interface/dashboard.ts
+++ b/src/interface/dashboard.ts
@@ -16,32 +16,11 @@ class DashboardItem {
    var itemTitle = document.createElement("span");
    itemTitle.classList.add("dashboard-item-title");
    itemTitle.innerText = this.name;
-    // itemTitle.setAttribute("aria-hidden", "true");
-    // itemTitle.classList.add("las");
-    // itemTitle.classList.add("la-3x");
-    // itemTitle.classList.add("la-" + this.id);
-    // itemTitle.classList.add("icon");

    var itemValue: HTMLElement = document.createElement("span");
    itemValue.classList.add("dashboard-item-value");
    itemValue.innerHTML = this.value;

-    // // var label: HTMLElement = document.createElement("label");
-    // // label.setAttribute("for", this.id);
-    // // label.setAttribute("id", this.id);
-    // // label.setAttribute("aria-hidden", "true");
-    // // label.innerText = this.name;
-
-    // var input: HTMLElement = document.createElement("input");
-    // input.setAttribute("name", this.id);
-    // input.setAttribute("aria-labelledby", this.id);
-    // input.setAttribute("type", "range");
-    // input.setAttribute("value", this.value);
-    // input.setAttribute("max", "10");
-    // input.setAttribute("style", "--track-fill: 30%");
-
-    // inputStack.appendChild(label);
-    // inputStack.appendChild(input);
    field.appendChild(itemTitle);
    field.appendChild(itemValue);

@@ -132,10 +111,12 @@ export class DashboardWidget implements FarpatchWidget {

    console.log("Initialized Dashboard Widget");
  }
+
  onFocus(element: HTMLElement): void {
    console.log("Displaying Dashboard Widget");
    element.appendChild(this.view);
  }
+
  onBlur(element: HTMLElement): void {
    console.log("Archiving Dashboard Widget");
    element.removeChild(this.view);
--- a/static/old/140medley.min.js
+++ b/static/old/140medley.min.js
@@ -0,0 +1,2 @@
+var t=function(a,b){return function(c,d){return a.replace(/#{([^}]*)}/g,function(a,f){return Function("x","with(x)return "+f).call(c,d||b||{})})}},s=function(a,b){return b?{get:function(c){return a[c]&&b.parse(a[c])},set:function(c,d){a[c]=b.stringify(d)}}:{}}(this.localStorage||{},JSON),p=function(a,b,c,d){c=c||document;d=c[b="on"+b];a=c[b]=function(e){d=d&&d(e=e||c.event);return(a=a&&b(e))?b:d};c=this},m=function(a,b,c){b=document;c=b.createElement("p");c.innerHTML=a;for(a=b.createDocumentFragment();b=
+c.firstChild;)a.appendChild(b);return a},$=function(a,b){a=a.match(/^(\W)?(.*)/);return(b||document)["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2])},j=function(a){for(a=0;a<4;a++)try{return a?new ActiveXObject([,"Msxml2","Msxml3","Microsoft"][a]+".XMLHTTP"):new XMLHttpRequest}catch(b){}};
--- a/static/old/code.js
+++ b/static/old/code.js
@@ -0,0 +1,321 @@
+// First, checks if it isn't implemented yet.
+if (!String.prototype.format) {
+	String.prototype.format = function () {
+		var args = arguments;
+		return this.replace(/{(\d+)}/g, function (match, number) {
+			return typeof args[number] != 'undefined'
+				? args[number]
+				: match
+				;
+		});
+	};
+}
+
+var apList = null;
+var selectedSSID = "";
+var refreshAPInterval = null;
+var checkStatusInterval = null;
+
+function stopCheckStatusInterval() {
+	if (checkStatusInterval != null) {
+		clearInterval(checkStatusInterval);
+		checkStatusInterval = null;
+	}
+}
+
+function stopRefreshAPInterval() {
+	if (refreshAPInterval != null) {
+		clearInterval(refreshAPInterval);
+		refreshAPInterval = null;
+	}
+}
+
+function startCheckStatusInterval() {
+	checkStatusInterval = setInterval(checkStatus, 950);
+}
+
+function startRefreshAPInterval() {
+	refreshAPInterval = setInterval(refreshAP, 2800);
+}
+
+$(document).ready(function () {
+	$("#wifi-status").on("click", ".ape", function () {
+		$("#wifi").slideUp("fast", function () { });
+		$("#connect-details").slideDown("fast", function () { });
+	});
+
+	$("#manual_add").on("click", ".ape", function () {
+		selectedSSID = $(this).text();
+		$("#ssid-pwd").text(selectedSSID);
+		$("#wifi").slideUp("fast", function () { });
+		$("#connect_manual").slideDown("fast", function () { });
+		$("#connect").slideUp("fast", function () { });
+
+		//update wait screen
+		$("#loading").show();
+		$("#connect-success").hide();
+		$("#connect-fail").hide();
+	});
+
+	$("#wifi-list").on("click", ".ape", function () {
+		selectedSSID = $(this).text();
+		$("#ssid-pwd").text(selectedSSID);
+		$("#wifi").slideUp("fast", function () { });
+		$("#connect_manual").slideUp("fast", function () { });
+		$("#connect").slideDown("fast", function () { });
+
+		//update wait screen
+		$("#loading").show();
+		$("#connect-success").hide();
+		$("#connect-fail").hide();
+	});
+
+	$("#cancel").on("click", function () {
+		selectedSSID = "";
+		$("#connect").slideUp("fast", function () { });
+		$("#connect_manual").slideUp("fast", function () { });
+		$("#wifi").slideDown("fast", function () { });
+	});
+
+	$("#manual_cancel").on("click", function () {
+		selectedSSID = "";
+		$("#connect").slideUp("fast", function () { });
+		$("#connect_manual").slideUp("fast", function () { });
+		$("#wifi").slideDown("fast", function () { });
+	});
+
+	$("#join").on("click", function () {
+		performConnect();
+	});
+
+	$("#manual_join").on("click", function () {
+		performConnect($(this).data('connect'));
+	});
+
+	$("#ok-details").on("click", function () {
+		$("#connect-details").slideUp("fast", function () { });
+		$("#wifi").slideDown("fast", function () { });
+
+	});
+
+	$("#ok-credits").on("click", function () {
+		$("#credits").slideUp("fast", function () { });
+		$("#app").slideDown("fast", function () { });
+
+	});
+
+	$("#acredits").on("click", function (event) {
+		event.preventDefault();
+		$("#app").slideUp("fast", function () { });
+		$("#credits").slideDown("fast", function () { });
+	});
+
+	$("#ok-connect").on("click", function () {
+		$("#connect-wait").slideUp("fast", function () { });
+		$("#wifi").slideDown("fast", function () { });
+	});
+
+	$("#disconnect").on("click", function () {
+		$("#connect-details-wrap").addClass('blur');
+		$("#diag-disconnect").slideDown("fast", function () { });
+	});
+
+	$("#no-disconnect").on("click", function () {
+		$("#diag-disconnect").slideUp("fast", function () { });
+		$("#connect-details-wrap").removeClass('blur');
+	});
+
+	$("#yes-disconnect").on("click", function () {
+
+		stopCheckStatusInterval();
+		selectedSSID = "";
+
+		$("#diag-disconnect").slideUp("fast", function () { });
+		$("#connect-details-wrap").removeClass('blur');
+
+		$.ajax({
+			url: '/fp/connect',
+			dataType: 'json',
+			method: 'DELETE',
+			cache: false,
+			data: { 'timestamp': Date.now() }
+		});
+
+		startCheckStatusInterval();
+
+		$("#connect-details").slideUp("fast", function () { });
+		$("#wifi").slideDown("fast", function () { })
+	});
+
+	//first time the page loads: attempt get the connection status and start the wifi scan
+	refreshAP();
+	startCheckStatusInterval();
+	startRefreshAPInterval();
+});
+
+
+
+
+function performConnect(conntype) {
+
+	//stop the status refresh. This prevents a race condition where a status 
+	//request would be refreshed with wrong ip info from a previous connection
+	//and the request would automatically shows as succesful.
+	stopCheckStatusInterval();
+
+	//stop refreshing wifi list
+	stopRefreshAPInterval();
+
+	var pwd;
+	if (conntype == 'manual') {
+		//Grab the manual SSID and PWD
+		selectedSSID = $('#manual_ssid').val();
+		pwd = $("#manual_pwd").val();
+	} else {
+		pwd = $("#pwd").val();
+	}
+	//reset connection 
+	$("#loading").show();
+	$("#connect-success").hide();
+	$("#connect-fail").hide();
+
+	$("#ok-connect").prop("disabled", true);
+	$("#ssid-wait").text(selectedSSID);
+	$("#connect").slideUp("fast", function () { });
+	$("#connect_manual").slideUp("fast", function () { });
+	$("#connect-wait").slideDown("fast", function () { });
+
+
+	$.ajax({
+		url: '/fp/connect',
+		dataType: 'json',
+		method: 'POST',
+		cache: false,
+		headers: { 'X-Custom-ssid': selectedSSID, 'X-Custom-pwd': pwd },
+		data: { 'timestamp': Date.now() }
+	});
+
+
+	//now we can re-set the intervals regardless of result
+	startCheckStatusInterval();
+	startRefreshAPInterval();
+
+}
+
+
+
+function rssiToIcon(rssi) {
+	if (rssi >= -60) {
+		return 'w0';
+	}
+	else if (rssi >= -67) {
+		return 'w1';
+	}
+	else if (rssi >= -75) {
+		return 'w2';
+	}
+	else {
+		return 'w3';
+	}
+}
+
+
+function refreshAP() {
+	$.getJSON("/fp/ap", function (data) {
+		if (data.length > 0) {
+			//sort by signal strength
+			data.sort(function (a, b) {
+				var x = a["rssi"]; var y = b["rssi"];
+				return ((x < y) ? 1 : ((x > y) ? -1 : 0));
+			});
+			apList = data;
+			refreshAPHTML(apList);
+
+		}
+	});
+}
+
+function refreshAPHTML(data) {
+	var h = "";
+	data.forEach(function (e, idx, array) {
+		h += '<div class="ape{0}"><div class="{1}"><div class="{2}">{3}</div></div></div>'.format(idx === array.length - 1 ? '' : ' brdb', rssiToIcon(e.rssi), e.auth == 0 ? '' : 'pw', e.ssid);
+		h += "\n";
+	});
+
+	$("#wifi-list").html(h)
+}
+
+
+
+
+function checkStatus() {
+	$.getJSON("/fp/network", function (data) {
+		if (data.hasOwnProperty('ssid') && data['ssid'] != "") {
+			if (data["ssid"] === selectedSSID) {
+				//that's a connection attempt
+				if (data["urc"] === 0) {
+					//got connection
+					$("#connected-to span").text(data["ssid"]);
+					$("#connect-details h1").text(data["ssid"]);
+					$("#ip").text(data["ip"]);
+					$("#netmask").text(data["netmask"]);
+					$("#gw").text(data["gw"]);
+					$("#wifi-status").slideDown("fast", function () { });
+
+					//unlock the wait screen if needed
+					$("#ok-connect").prop("disabled", false);
+
+					//update wait screen
+					$("#loading").hide();
+					$("#connect-success").show();
+					$("#connect-fail").hide();
+
+					// Redirect to the main page after 5 seconds
+					window.setTimeout(function () {
+						// Move to a new location or you can do something else
+						window.location.href = "http://" + data["ip"];
+					}, 5000);
+				}
+				else if (data["urc"] === 1) {
+					//failed attempt
+					$("#connected-to span").text('');
+					$("#connect-details h1").text('');
+					$("#ip").text('0.0.0.0');
+					$("#netmask").text('0.0.0.0');
+					$("#gw").text('0.0.0.0');
+
+					//don't show any connection
+					$("#wifi-status").slideUp("fast", function () { });
+
+					//unlock the wait screen
+					$("#ok-connect").prop("disabled", false);
+
+					//update wait screen
+					$("#loading").hide();
+					$("#connect-fail").show();
+					$("#connect-success").hide();
+				}
+			}
+			else if (data.hasOwnProperty('urc') && data['urc'] === 0) {
+				//ESP32 is already connected to a wifi without having the user do anything
+				if (!($("#wifi-status").is(":visible"))) {
+					$("#connected-to span").text(data["ssid"]);
+					$("#connect-details h1").text(data["ssid"]);
+					$("#ip").text(data["ip"]);
+					$("#netmask").text(data["netmask"]);
+					$("#gw").text(data["gw"]);
+					$("#wifi-status").slideDown("fast", function () { });
+				}
+			}
+		}
+		else if (data.hasOwnProperty('urc') && data['urc'] === 2) {
+			//that's a manual disconnect
+			if ($("#wifi-status").is(":visible")) {
+				$("#wifi-status").slideUp("fast", function () { });
+			}
+		}
+	})
+		.fail(function () {
+			//don't do anything, the server might be down while esp32 recalibrates radio
+		});
+}
--- a/static/old/debug.html
+++ b/static/old/debug.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="xterm.css" />
+  <script src="xterm.js"></script>
+  <script src="xterm-addon-fit.js"></script>
+  <script src="jquery.js"></script>
+</head>
+<style>
+  body {
+    font-family: sans;
+  }
+</style>
+
+<body>
+  <div id="terminal" style="height: 90vh"></div>
+  <div id="status">Connecting...</div>
+  <script>
+    var line_items = [];
+    var idx = -1;
+
+    var term = new Terminal({ cursorBlink: true, convertEol: true });
+    var fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+
+    var socket;
+    var firstConnection = true;
+
+    function createSocket() {
+      if (socket && !socket.replacementCreated) {
+        socket.close();
+      }
+      socket = new WebSocket("ws://" + window.location.host + "/ws/debug");
+      socket.binaryType = 'arraybuffer';
+      socket.replacementCreated = false;
+      socket.ontimeout = function () {
+        if (socket.readyState == WebSocket.OPEN) {
+          socket.send('');
+        }
+      };
+
+      socket.onmessage = function (event) {
+        term.write(new Uint8Array(event.data));
+      };
+
+      socket.onerror = function (event) {
+        socket.close();
+      }
+
+      socket.onclose = function (event) {
+        socket.onerror = undefined;
+        socket.onclose = undefined;
+        if (event.wasClean) {
+          $("#status").text("Connection closed");
+        } else {
+          $("#status").text("Reconnecting...");
+        }
+        clearInterval(socket.intervalId);
+        if (!socket.replacementCreated) {
+          socket.replacementCreated = true;
+          createSocket();
+        } else {
+          console.log("a replacement socket was already being created -- skipping");
+        }
+      };
+
+      socket.onopen = function (event) {
+        $("#status").text("Connected");
+        if (firstConnection) {
+          term.write("\x1B[1;3;31m[Websocket] Connection established\x1B[0m\r\n");
+        } else {
+          term.write("[Websocket] Connection reestablished\n");
+        }
+        firstConnection = false;
+      };
+      socket.intervalId = setInterval(socket.ontimeout, 2000, socket);
+    }
+    createSocket();
+
+    term.open(document.getElementById('terminal'));
+
+    fitAddon.activate(term)
+    fitAddon.fit()
+    term.focus()
+
+    window.addEventListener('resize', () => { fitAddon.fit() });
+
+  </script>
+</body>
+
+</html>
--- a/static/old/favicon.ico
+++ b/static/old/favicon.ico
--- a/static/old/flash/140medley.min.js
+++ b/static/old/flash/140medley.min.js
@@ -0,0 +1,2 @@
+var t=function(a,b){return function(c,d){return a.replace(/#{([^}]*)}/g,function(a,f){return Function("x","with(x)return "+f).call(c,d||b||{})})}},s=function(a,b){return b?{get:function(c){return a[c]&&b.parse(a[c])},set:function(c,d){a[c]=b.stringify(d)}}:{}}(this.localStorage||{},JSON),p=function(a,b,c,d){c=c||document;d=c[b="on"+b];a=c[b]=function(e){d=d&&d(e=e||c.event);return(a=a&&b(e))?b:d};c=this},m=function(a,b,c){b=document;c=b.createElement("p");c.innerHTML=a;for(a=b.createDocumentFragment();b=
+c.firstChild;)a.appendChild(b);return a},$=function(a,b){a=a.match(/^(\W)?(.*)/);return(b||document)["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2])},j=function(a){for(a=0;a<4;a++)try{return a?new ActiveXObject([,"Msxml2","Msxml3","Microsoft"][a]+".XMLHTTP"):new XMLHttpRequest}catch(b){}};
--- a/static/old/flash/index.html
+++ b/static/old/flash/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Update firmware</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<script type="text/javascript" src="../jquery.js"></script>
+	<script type="text/javascript">
+
+
+		var xhr = new XMLHttpRequest();
+
+		function doReboot() {
+			xhr.open("GET", "/flash/reboot");
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
+					window.setTimeout(function () {
+						location.reload(true);
+					}, 3000);
+				}
+			}
+			xhr.send();
+		}
+
+		function setProgress(amt) {
+			$("#progressbarinner")[0].style.width = String(amt * 200) + "px";
+		}
+
+		function doUpgrade() {
+			var f = $("#file")[0].files[0];
+			if (typeof f == 'undefined') {
+				$("#remark")[0].innerHTML = "Can't read file!";
+				return
+			}
+			xhr.onreadystatechange = function () {
+				console.log("Ready state changed: " + xhr.readyState);
+				if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
+					setProgress(1);
+					let response = JSON.parse(xhr.responseText);
+					if (!response["success"]) {
+						$("#remark")[0].innerHTML = "Error: " + xhr.responseText;
+					} else {
+						$("#remark")[0].innerHTML = "Uploading done. Rebooting.";
+						doReboot();
+					}
+				}
+			}
+			if (typeof xhr.upload.onprogress != 'undefined') {
+				xhr.upload.onprogress = function (e) {
+					console.log("Upload progress: " + e.loaded + " / " + e.total);
+					setProgress(e.loaded / e.total);
+				}
+			}
+			xhr.open("POST", "/flash/upload");
+
+			xhr.send(f);
+			return false;
+		}
+
+
+		window.onload = function (e) {
+			xhr.open("GET", "/flash/init");
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
+					var txt = "Please upload " + xhr.responseText + " or ota file.";
+					$("#remark")[0].innerHTML = txt;
+					setProgress(0);
+				}
+			}
+			xhr.send();
+		}
+
+	</script>
+</head>
+
+<body>
+	<div id="main">
+		<h1>Update firmware</h1>
+		<div id="remark">Loading...</div>
+		<input type="file" id="file" />
+		<input type="submit" value="Update!" onclick="doUpgrade()" />
+		<div id="progressbar">
+			<div id="progressbarinner"></div>
+		</div>
+	</div>
+</body>
--- a/static/old/flash/style.css
+++ b/static/old/flash/style.css
@@ -0,0 +1,34 @@
+
+body {
+	background-color: #404040;
+	font-family: sans-serif;
+}
+
+#main {
+	background-color: #d0d0FF;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+	border: 2px solid #000000;
+	width: 800px;
+	margin: 0 auto;
+	padding: 20px
+}
+
+#progressbar {
+	margin: 10px;
+	padding: 0;
+	border: 1px solid #000000;
+	height: 20px;
+	width: 200px;
+	background-color: #808080;
+}
+
+#progressbarinner {
+	width: 10px;
+	height: 20px;
+	border: none;
+	background-color: #00ff00;
+}
+
+
--- a/static/old/index.html
+++ b/static/old/index.html
@@ -0,0 +1,207 @@
+<!doctype html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="xterm.css" />
+  <script src="xterm.js"></script>
+  <script src="xterm-addon-fit.js"></script>
+</head>
+<style>
+  body {
+    font-family: sans;
+  }
+</style>
+
+<body>
+  <div id="terminal" style="height: 90vh"></div>
+  <input type="text" id="line" style="width: 50%"></input>
+
+  <select id="eol">
+    <option value="cr">CR</option>
+    <option value="lf">LF</option>
+    <option value="crlf">CR/LF</option>
+    <option value="none">None</option>
+    <option value="hex">Hex</option>
+  </select>
+
+
+  <button id="sendbtn" type="button">SEND</button>
+  <button id="sendbrk" type="button">BRK</button>
+  <input type="checkbox" id="echo" checked>Echo</input>
+  <button type="button" id="setbaud">SET BAUD</button>
+  <button type="button" id="clear">CLEAR</button>
+  <br>
+  Baud: <span id="curbaud">-</span>
+
+  <script>
+    var line_items = [];
+    var idx = -1;
+
+    function parseHexString(str) {
+      str = str.replace("0x", "")
+      str = str.replace(" ", "")
+
+      var result = [];
+      // Ignore any trailing single digit; I don't know what your needs
+      // are for this case, so you may want to throw an error or convert
+      // the lone digit depending on your needs.
+      while (str.length >= 2) {
+        result.push(parseInt(str.substring(0, 2), 16));
+        str = str.substring(2, str.length);
+      }
+
+      return result;
+    }
+
+    let xhr = new XMLHttpRequest();
+
+    // 2. Configure it: GET-request for the URL /article/.../load
+    xhr.open('GET', '/uart/baud');
+    // 3. Send the request over the network
+    xhr.send();
+
+    // 4. This will be called after the response is received
+    xhr.onload = function () {
+      if (xhr.status != 200) { // analyze HTTP status of the response
+        alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
+      } else { // show the result
+        let d = xhr.response
+        d = JSON.parse(d)
+        document.querySelector("#curbaud").textContent = d["baudrate"]
+      }
+    };
+
+    function sendBreak() {
+      let xhr = new XMLHttpRequest();
+      xhr.open('GET', '/uart/break');
+      // 3. Send the request over the network
+      xhr.send();
+    }
+
+    function setBaud(baud) {
+      let xhr = new XMLHttpRequest();
+      // 2. Configure it: GET-request for the URL /article/.../load
+      xhr.open('GET', '/uart/baud?set=' + baud);
+      // 3. Send the request over the network
+      xhr.send();
+
+      xhr.onload = function () {
+
+        let d = xhr.response
+        d = JSON.parse(d)
+        document.querySelector("#curbaud").textContent = d["baudrate"]
+
+      };
+
+    }
+
+    function sendLine() {
+      var line = document.querySelector("#line").value
+      var type = document.querySelector("#eol").value
+      var echo = document.querySelector("#echo").checked
+      //console.log(type)
+
+      if (!line_items.includes(line)) {
+        line_items.push(line)
+        idx = line_items.length - 1
+      }
+
+      if (type == "cr") line += "\r"
+      else if (type == "lf") line += "\n"
+      else if (type == "crlf") line += "\r\n"
+      else if (type == "hex") {
+        line = parseHexString(line)
+      }
+      if (echo)
+        term.write(line)
+
+      socket.send(line)
+
+    }
+    document.querySelector("#setbaud").onclick = event => {
+      let baud = window.prompt("Enter baud rate", "115200")
+      if (baud) {
+        baud = parseInt(baud);
+        setBaud(baud);
+      }
+    }
+    document.querySelector("#clear").onclick = event => {
+      term.clear();
+    }
+    document.querySelector("#sendbtn").onclick = event => {
+      sendLine();
+    }
+    document.querySelector("#sendbrk").onclick = event => {
+      sendBreak();
+    }
+    document.querySelector("#line").addEventListener("keydown", event => {
+      //console.log(event.key)
+      if (event.key == "ArrowUp") {
+        console.log(idx)
+        if (line_items.length - 1 == idx) idx--;
+
+        event.srcElement.value = line_items[idx]
+        if (idx > 0) idx--;
+
+      }
+      if (event.key == "ArrowDown") {
+        console.log(idx)
+
+        if (idx < line_items.length - 1) {
+          idx++;
+        }
+        event.srcElement.value = line_items[idx]
+      }
+
+      if (event.key !== "Enter") return;
+
+      sendLine();
+
+      event.preventDefault(); // No need to `return false;`.
+    });
+
+    var term = new Terminal({ cursorBlink: true, convertEol: true });
+    var fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    var socket;
+
+    function createSocket() {
+      socket = new WebSocket("ws://" + window.location.host + "/ws/uart");
+      socket.binaryType = 'arraybuffer';
+      socket.onopen = function (e) {
+        term.write("\x1B[1;3;31m[Websocket] Connection established\x1B[0m\r\n");
+      };
+
+      socket.onmessage = function (event) {
+        term.write(new Uint8Array(event.data));
+      };
+
+      socket.onclose = function (event) {
+        if (event.wasClean) {
+          term.write("[Websocket] Connection closed");
+        } else {
+          // e.g. server process killed or network down
+          // event.code is usually 1006 in this case
+          term.write("[Websocket] Connection died");
+        }
+        createSocket();
+      };
+    }
+
+    createSocket();
+
+    term.open(document.getElementById('terminal'));
+
+    term.onData(chunk => {
+      socket.send(chunk)
+    })
+    fitAddon.activate(term)
+    fitAddon.fit()
+    term.focus()
+
+    window.addEventListener('resize', () => { fitAddon.fit() });
+
+  </script>
+</body>
+
+</html>
--- a/static/old/index.js
+++ b/static/old/index.js
@@ -0,0 +1,4 @@
+import { Terminal } from './xterm.js';
+import { FitAddon } from './xterm-addon-fit.js';
+
+
--- a/static/old/jquery.js
+++ b/static/old/jquery.js
--- a/static/old/rtt.html
+++ b/static/old/rtt.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="xterm.css" />
+  <script src="xterm.js"></script>
+  <script src="xterm-addon-fit.js"></script>
+  <script src="jquery.js"></script>
+</head>
+<style>
+  body {
+    font-family: sans;
+  }
+</style>
+
+<body>
+  <div id="terminal" style="height: 90vh"></div>
+  <input type="text" id="line" style="width: 50%"></input>
+
+  <select id="eol">
+    <option value="cr">CR</option>
+    <option value="lf">LF</option>
+    <option value="crlf">CR/LF</option>
+    <option value="none">None</option>
+    <option value="hex">Hex</option>
+  </select>
+
+
+  <button id="sendbtn" type="button">SEND</button>
+  <input type="checkbox" id="echo" checked>Echo</input>
+  <button type="button" id="clear">CLEAR</button>
+  <br>
+  <span id="status">Connecting...</span>
+
+  <script>
+    var line_items = [];
+    var idx = -1;
+
+    function parseHexString(str) {
+      str = str.replace("0x", "");
+      str = str.replace(" ", "");
+
+      var result = [];
+      while (str.length >= 2) {
+        result.push(parseInt(str.substring(0, 2), 16));
+        str = str.substring(2, str.length);
+      }
+      return result;
+    }
+
+    function sendLine() {
+      var line = document.querySelector("#line").value;
+      var type = document.querySelector("#eol").value;
+      var echo = document.querySelector("#echo").checked;
+
+      if (!line_items.includes(line)) {
+        line_items.push(line)
+        idx = line_items.length - 1
+      }
+
+      if (type == "cr") line += "\r"
+      else if (type == "lf") line += "\n"
+      else if (type == "crlf") line += "\r\n"
+      else if (type == "hex") {
+        line = parseHexString(line)
+      }
+      if (echo)
+        term.write(line)
+
+      socket.send(line)
+
+    }
+    document.querySelector("#clear").onclick = event => {
+      term.clear();
+    }
+    document.querySelector("#sendbtn").onclick = event => {
+      sendLine();
+    }
+    document.querySelector("#line").addEventListener("keydown", event => {
+      if (event.key == "ArrowUp") {
+        console.log(idx)
+        if (line_items.length - 1 == idx) idx--;
+
+        event.srcElement.value = line_items[idx]
+        if (idx > 0) idx--;
+
+      }
+      if (event.key == "ArrowDown") {
+        console.log(idx)
+
+        if (idx < line_items.length - 1) {
+          idx++;
+        }
+        event.srcElement.value = line_items[idx]
+      }
+
+      if (event.key !== "Enter") return;
+
+      sendLine();
+
+      event.preventDefault(); // No need to `return false;`.
+    });
+
+    var term = new Terminal({ cursorBlink: true, convertEol: true });
+    var fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    var socket;
+
+    function createSocket() {
+      if (socket && !socket.replacementCreated) {
+        socket.close();
+      }
+
+      socket = new WebSocket("ws://" + window.location.host + "/ws/rtt");
+      socket.binaryType = 'arraybuffer';
+      socket.replacementCreated = false;
+
+      socket.ontimeout = function () {
+        if (socket.readyState == WebSocket.OPEN) {
+          socket.send('');
+        }
+      };
+
+      socket.onopen = function (event) {
+        $("#status").text("Connected");
+        if (firstConnection) {
+          term.write("\x1B[1;3;31m[Websocket] Connection established\x1B[0m\r\n");
+        } else {
+          term.write("[Websocket] Connection reestablished\n");
+        }
+        firstConnection = false;
+      };
+
+      socket.onmessage = function (event) {
+        term.write(new Uint8Array(event.data));
+      };
+
+      socket.onerror = function (event) {
+        socket.close();
+      }
+
+      socket.onclose = function (event) {
+        socket.onerror = undefined;
+        socket.onclose = undefined;
+        if (event.wasClean) {
+          $("#status").text("Connection closed");
+        } else {
+          $("#status").text("Reconnecting...");
+        }
+        clearInterval(socket.intervalId);
+        if (!socket.replacementCreated) {
+          socket.replacementCreated = true;
+          createSocket();
+        } else {
+          console.log("a replacement socket was already being created -- skipping");
+        }
+      };
+
+      socket.intervalId = setInterval(socket.ontimeout, 2000, socket);
+    }
+
+    createSocket();
+
+    term.open(document.getElementById('terminal'));
+
+    term.onData(chunk => {
+      socket.send(chunk)
+    })
+    fitAddon.activate(term)
+    fitAddon.fit()
+    term.focus()
+
+    window.addEventListener('resize', () => { fitAddon.fit() });
+
+  </script>
+</body>
+
+</html>
--- a/static/old/status.html
+++ b/static/old/status.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <script>
+        var refreshIntervalMsecs = 1000;
+        var timeoutMsecs = 2000;
+
+        function createXHR() {
+            var xhr = new XMLHttpRequest();
+            xhr.timeout = timeoutMsecs;
+            xhr.ontimeout = function () {
+                console.log("Timed out!");
+                createXHR().send();
+            };
+
+            xhr.open('GET', '/status');
+            xhr.onload = function () {
+                if (xhr.readyState === xhr.DONE) {
+                    if (xhr.status == 200) {
+                        document.getElementById("status").innerText = xhr.response;
+                    }
+                    window.setTimeout(function () { createXHR().send(); }, refreshIntervalMsecs);
+                }
+            };
+            return xhr;
+        }
+        createXHR().send();
+    </script>
+</head>
+
+<body>
+    <pre><code id="status"></code></div>
+</body>
+</html>
--- a/static/old/style.css
+++ b/static/old/style.css
@@ -0,0 +1,250 @@
+body {
+    background-color: #eee;
+    border: 0;
+    margin: 0;
+    font: 1.1em tahoma, arial, sans-serif;
+}
+a {
+    color: darkblue;
+    transition: color .2s ease-out;
+    text-decoration: none
+}
+a:hover {
+    color: red;
+}
+input {
+    display: none;
+    font: 1.1em tahoma, arial, sans-serif;
+}
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+    outline: none;
+}
+input[type="button"] {
+    width: 100px;
+    padding: 5px;
+    text-align: center;
+    display: block;
+}
+p {
+    padding: 10px;
+}
+#credits {
+    display: none;
+}
+#app {} #app-wrap {} #disconnect {
+    width: 150px;
+}
+.diag-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    display: none;
+}
+.diag-box-win {
+    position: absolute;
+    left: 10%;
+    width: 80%;
+    text-align: center;
+    border: 2px outset #888;
+    background-color: #fff;
+    border-radius: 10px;
+    top: 20%;
+}
+.blur {
+    -webkit-filter: blur(2px);
+    -moz-filter: blur(2px);
+    -ms-filter: blur(2px);
+    -o-filter: blur(2px);
+    filter: blur(2px);
+}
+.ape {
+    margin-left: 20px;
+    padding: 10px 0px 10px 10px;
+}
+.ape:hover {
+    cursor: pointer;
+}
+.brdb {
+    border-bottom: 1px solid #888;
+}
+header {
+    background-color: #fff;
+    border-bottom: 1px solid #888;
+}
+section {
+    background-color: #fff;
+    border-bottom: 1px solid #888;
+    border-top: 1px solid #888;
+}
+h1 {
+    display: block;
+    text-align: center;
+    margin: 0;
+    padding: 15px;
+    font-size: 1.4em
+}
+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%;
+    margin-left: 35px;
+    padding: 10px 0px 10px 10px;
+    display: block
+}
+#manual_pwd {
+    border: none;
+    width: 80%;
+    margin-left: 35px;
+    padding: 10px 0px 10px 10px;
+    display: block
+}
+#pwd {
+    border: none;
+    width: 80%;
+    margin-left: 35px;
+    padding: 10px 0px 10px 10px;
+    display: block
+}
+.buttons {
+    padding: 15px;
+}
+#join {
+    float: right;
+}
+#manual_join {
+    float: right;
+}
+#yes-disconnect {
+    display: inline-block;
+    margin-left: 20px;
+}
+#no-disconnect {
+    display: inline-block;
+}
+.ctr {
+    margin: 0 auto;
+}
+.tctr {
+    text-align: center;
+}
+#connect-wait {
+    display: none;
+}
+#connect-success {
+    display: none;
+}
+#connect-fail {
+    display: none;
+}
+#connect-details {
+    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 right top;
+    height: 24px;
+    margin-right: 20px;
+}
+.w1 {
+    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNkRpr/UAAAHiSURBVEhL5dRPKINxHMfxPVskpA35F3FYEVasHBYHFwcHrhyVZ8vBfblIceEi/4qLtINwdHCQUpQVKcnJRYqIg/J3OYz399nv0YPNtuzEt149+31/v+/n4fGYLVHpup4Rnyregd+K27TIghe63+8fx7wySqsPdbAj3qzha0MOV6ETiwTd4u0HUZxydgrtKISGj0xreG4gEAgycIRXFZCOR2yTQZSebeaa4Q1s7iOiDv/GM1bJLDJv0EHjzHLAdIFNjHBGHpkbxUo9utmbQBg3sM5G2d+AR24w82XznN4QmpGjXrCExRkXfJhk9t6aRW9YDtSwOFDNE9ZNyFLzKRczOegh406FL8ElG8JDM8S1Qtaq7KhEO0Y0TVtHGHusVxCEDy5oMLNqyVrgWm5kqaYw3mdVdmqQsENE8JbAPbY43yszMqiyHOr66QayL5XH0DJeVEgyUTxhjNmPR/vtBpZyc3hHDZohV5DfRvq7OMYtrDdZY7YwFpG8yhBi6JrrMFogww7IT1mOVsxy5oHrNIqRVpWgDtnGKn7log35xurfVxfPW/7QYT57Ybz7mapqgk9gvjU79ApiW5mpRkIvLTe4oJfyK5lKOQndgvG/wXoOSb8I061Svj4G0M9nZ6z198tmeweYtIrMYP17VAAAAABJRU5ErkJggg==') no-repeat right top;
+    height: 24px;
+    margin-right: 20px;
+}
+.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 right top;
+    height: 24px;
+    margin-right: 20px;
+}
+.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 right top;
+    height: 24px;
+    margin-right: 20px;
+}
+.pw {
+    background:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAABIUlEQVRIS+3VsU7CUBTGcYhBJCwqwcmEJ2DkCQgzb8ADmLgYWXTzMVjcGNjYGEAXgoSRhTg5OroYIyFY/h+hWGwvtzQ0LpzkF8i5l/uRQ2kTjuPEKrC5T79vzHWJO4wxwzeGuMY5AitsQBFvmEObvNQboQBfhQk4gQ5wD+zgBrcYrHrSwzE2KkxAHVrQWB6QgiqJLB7xA+2pYaNsAWm8QAsa0Sn+1gU+oT1NHGFdtoAcJtBCSw1DuaPqQiNdly0gj1doQaMwleavPc+IJUDffKeADO7Rxxe08A4dEOQD2qPXJ1xh+VuYAirQVaNGFFPov2MM0OXm/UAUZRwCtjoEWP1vQBXuLTgKPYRKMAacoY0oIboDNLB8+PgC4hLY3B8nsQCQEf56jLJoQAAAAABJRU5ErkJggg==') no-repeat right top;
+    height: 24px;
+    margin-right: 20px;
+    height: 24px;
+    margin-right: 30px;
+}
+/* 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: sk-bounce 2.0s infinite ease-in-out;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+}
+.double-bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+@-webkit-keyframes sk-bounce {
+    0%, 100% {
+        -webkit-transform: scale(0.0)
+    }
+    50% {
+        -webkit-transform: scale(1.0)
+    }
+}
+@keyframes sk-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 */
--- a/static/old/wifi.html
+++ b/static/old/wifi.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<script src="jquery.js"></script>
+		<link rel="stylesheet" href="style.css">
+		<script src="code.js"></script>
+		<title>esp32-wifi-manager</title>
+	</head>
+	<body>
+		<div id="app">
+			<div id="app-wrap">
+				<div id="wifi">
+					<header>
+						<h1>Wi-Fi</h1>
+					</header>
+					<div id="wifi-status">
+						<h2>Connected to:</h2>
+						<section id="connected-to">
+							<div class="ape"><div class="w0"><div class="pw"><span></span></div></div></div>
+						</section>
+					</div>
+					<h2>Manual connect</h2>
+					<section id="manual_add">
+					<div class="ape">ADD (HIDDEN) SSID<div>
+					</section>
+					<h2>or choose a network...</h2>
+					<section id="wifi-list">
+					</section>
+					<div id="pwrdby"><em>Powered by </em><a id="acredits" href="#"><strong>esp32-wifi-manager</strong></a>.</div>
+				</div>
+				<div id="connect_manual">
+					<header>
+						<h1>Enter Details</h1>
+					</header>
+					<h2>Manual Connection</span></h2>
+					<section>
+						<input id="manual_ssid" type="text" placeholder="SSID" value="">
+						<input id="manual_pwd" type="password" placeholder="Password" value="">
+					</section>
+					<div class="buttons">
+							<input id="manual_join" type="button" value="Join" data-connect="manual" />
+							<input id="manual_cancel" type="button" value="Cancel"/>
+					</div>
+				</div>
+				<div id="connect">
+					<header>
+						<h1>Enter Password</h1>
+					</header>
+					<h2>Password for <span id="ssid-pwd"></span></h2>
+					<section>
+						<input id="pwd" type="password" placeholder="Password" value="">
+					</section>
+					<div class="buttons">
+							<input id="join" type="button" value="Join" />
+							<input id="cancel" type="button" value="Cancel"/>
+					</div>
+				</div>
+				<div id="connect-wait">
+					<header>
+						<h1>Please wait...</h1>
+					</header>
+					<h2>Connecting to <span id="ssid-wait"></span></h2>
+					<section>
+						<div id="loading">
+							<div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>
+							<p class="tctr">You may lose wifi access while the esp32 recalibrates its radio. Please wait until your device automatically reconnects. This can take up to 30s.</p>
+						</div>
+						<div id="connect-success">
+							<h3 class="gr">Success!</h3>
+						</div>
+						<div id="connect-fail">
+							<h3 class="rd">Connection failed</h3>
+							<p class="tctr">Please double-check wifi password if any and make sure the access point has good signal.</p>
+						</div>
+					</section>
+					<div class="buttons">
+						<input id="ok-connect" type="button" value="OK" class="ctr" />
+					</div>
+				</div>
+				<div id="connect-details">
+					<div id="connect-details-wrap">
+						<header>
+							<h1></h1>
+						</header>
+						<h2></h2>
+						<section>
+							<div class="buttons">
+								<input id="disconnect" type="button" value="Disconnect" class="ctr"/>
+							</div>
+						</section>
+						<h2>IP Address</h2>
+						<section>
+							<div class="ape brdb">IP Address:<div id="ip" class="fr"></div></div>
+							<div class="ape brdb">Subnet Mask:<div id="netmask" class="fr"></div></div>
+							<div class="ape">Default Gateway:<div id="gw" class="fr"></div></div>
+						</section>
+						<div class="buttons">
+							<input id="ok-details" type="button" value="OK" class="ctr" />
+						</div>
+					</div>					
+					<div id="diag-disconnect" class="diag-box">
+						<div class="diag-box-win">
+							<p>Are you sure you would like to disconnect from this wifi?</p>
+							<div class="buttons">
+								<input id="no-disconnect" type="button" value="No" />
+								<input id="yes-disconnect" type="button" value="Yes" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="credits">
+			<header>
+				<h1>About this app...</h1>
+			</header>
+			<h2></h2>
+			<section>
+				<p><strong>esp32-wifi-manager</strong>, &copy; 2017-2019, Tony Pottier<br />Licender under the MIT License.</p>
+				<p>
+					This app would not be possible without the following libraries:
+				</p>
+				<ul>
+					<li>SpinKit, &copy;  2015, Tobias Ahlin. Licensed under the MIT License.</li>
+					<li>jQuery, The jQuery Foundation. Licensed under the MIT License.</li>
+					<li>cJSON, &copy; 2009-2017, Dave Gamble and cJSON contributors. Licensed under the MIT License.</li>
+				</ul>
+			</section>
+			<div class="buttons">
+				<input id="ok-credits" type="button" value="OK" class="ctr" />
+			</div>
+		</div>
+	</body>
+<html>
--- a/static/old/xterm-addon-fit.js
+++ b/static/old/xterm-addon-fit.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.FitAddon=t():e.FitAddon=t()}(self,(function(){return(()=>{"use strict";var e={775:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.FitAddon=void 0;var r=function(){function e(){}return e.prototype.activate=function(e){this._terminal=e},e.prototype.dispose=function(){},e.prototype.fit=function(){var e=this.proposeDimensions();if(e&&this._terminal){var t=this._terminal._core;this._terminal.rows===e.rows&&this._terminal.cols===e.cols||(t._renderService.clear(),this._terminal.resize(e.cols,e.rows))}},e.prototype.proposeDimensions=function(){if(this._terminal&&this._terminal.element&&this._terminal.element.parentElement){var e=this._terminal._core;if(0!==e._renderService.dimensions.actualCellWidth&&0!==e._renderService.dimensions.actualCellHeight){var t=window.getComputedStyle(this._terminal.element.parentElement),r=parseInt(t.getPropertyValue("height")),i=Math.max(0,parseInt(t.getPropertyValue("width"))),n=window.getComputedStyle(this._terminal.element),o=r-(parseInt(n.getPropertyValue("padding-top"))+parseInt(n.getPropertyValue("padding-bottom"))),a=i-(parseInt(n.getPropertyValue("padding-right"))+parseInt(n.getPropertyValue("padding-left")))-e.viewport.scrollBarWidth;return{cols:Math.max(2,Math.floor(a/e._renderService.dimensions.actualCellWidth)),rows:Math.max(1,Math.floor(o/e._renderService.dimensions.actualCellHeight))}}}},e}();t.FitAddon=r}},t={};return function r(i){if(t[i])return t[i].exports;var n=t[i]={exports:{}};return e[i](n,n.exports,r),n.exports}(775)})()}));
+//# sourceMappingURL=xterm-addon-fit.js.map
--- a/static/old/xterm.css
+++ b/static/old/xterm.css
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * 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.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm {
+    cursor: text;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer,
+.xterm .xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    opacity: 0.5;
+}
+
+.xterm-underline {
+    text-decoration: underline;
+}
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration {
+	z-index: 6;
+	position: absolute;
+}
--- a/static/old/xterm.js
+++ b/static/old/xterm.js