diff --git a/resources/NotoSans-Regular.ttf b/resources/NotoSans-Regular.ttf
new file mode 100644
index 0000000..91a774a
Binary files /dev/null and b/resources/NotoSans-Regular.ttf differ
diff --git a/resources/RGB-64x32.png b/resources/RGB-64x32.png
new file mode 100644
index 0000000..c49a773
Binary files /dev/null and b/resources/RGB-64x32.png differ
diff --git a/resources/index.html b/resources/index.html
new file mode 100644
index 0000000..f126e79
--- /dev/null
+++ b/resources/index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Topology Explorer - Panel Index</title>
+    <script language="javascript" type="text/javascript">
+
+        var wsUri = "ws://" + location.host + "/ws";
+
+        function init() {
+            setUpWebSocket();
+        }
+
+        function setUpWebSocket() {
+            websocket = new WebSocket(wsUri);
+            websocket.onopen = function (evt) { onOpen(evt) };
+            websocket.onclose = function (evt) { onClose(evt) };
+            websocket.onmessage = function (evt) { onMessage(evt) };
+            websocket.onerror = function (evt) { onError(evt) };
+        }
+
+        function onOpen(evt) {
+            logToScreen("CONNECTED");
+            doSend("SendIndex");
+        }
+
+        function onClose(evt) {
+            logToScreen("DISCONNECTED");
+        }
+
+        function onMessage(evt) {
+            const obj = JSON.parse(evt.data);
+
+            if (obj.hasOwnProperty("ConnectedSignal") && obj["ConnectedSignal"]) {
+                document.location = "/panel";
+            }
+            if (obj.hasOwnProperty("Time")) {
+                document.getElementById("Time").innerHTML = obj["Time"]
+            }
+            if (obj["ZeroconfEntries"] != null) {
+                output = '<table border="0" id="PanelEntries">';
+                output += `<tr class="header">
+                    <td>Model</td>
+                    <td>Serial</td>
+                    <td>IP address</td>
+                    <td>Port</td>
+                    <td>Protocol</td>
+                    <td>Description</td>
+                    <td>skaarOS</td>
+                    <td>Ping</td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                        </tr>`;
+
+                for (var i = 0; i < obj["ZeroconfEntries"].length; i++) {
+                    console.log(obj["ZeroconfEntries"][i]["RawPanelDetails"])
+
+                    output += '<tr' + (obj["ZeroconfEntries"][i]["IsNew"] ? ' class="justAdded"' : '') + '>';
+                    output += '<td>' + obj["ZeroconfEntries"][i]["Model"] + '</td>';
+                    output += '<td>' + obj["ZeroconfEntries"][i]["Serial"] + '</td>';
+                    output += '<td><a href="http://' + obj["ZeroconfEntries"][i]["IPaddr"] + '" target="_blank">' + obj["ZeroconfEntries"][i]["IPaddr"] + '</a></td>';
+                    output += '<td>' + (obj["ZeroconfEntries"][i]["Port"] != -1 ? obj["ZeroconfEntries"][i]["Port"] : '') + '</td>';
+                    output += '<td>' + obj["ZeroconfEntries"][i]["Protocol"] + '</td>';
+                    output += '<td>' + obj["ZeroconfEntries"][i]["Name"] + '</td>';
+                    output += '<td>' + obj["ZeroconfEntries"][i]["SkaarOS"] + '</td>';
+                    output += '<td>' + (obj["ZeroconfEntries"][i]["PingTime"] > -1 ? obj["ZeroconfEntries"][i]["PingTime"] + 'ms' : '') + '</td>';
+                    output += '<td>' + (obj["ZeroconfEntries"][i]["Port"] != -1 ? '<input type="button" value="Connect" onclick="connectTo(\'' + obj["ZeroconfEntries"][i]["IPaddr"] + ':' + obj["ZeroconfEntries"][i]["Port"] + '\');">' : '') + '</td>';
+
+                    output += '<td>' + (obj["ZeroconfEntries"][i]["RawPanelDetails"] != null && obj["ZeroconfEntries"][i]["RawPanelDetails"]["PanelTopologySVG"] ? obj["ZeroconfEntries"][i]["RawPanelDetails"]["PanelTopologySVG"] + '<br/><span style="font-size: 10px;">HWC count: ' + obj["ZeroconfEntries"][i]["RawPanelDetails"]["TotalHWCs"] : "") + '</span></td>';
+                    output += '<td>' + (obj["ZeroconfEntries"][i]["RawPanelDetails"] != null ? renderRWPderivedInfoTable(obj["ZeroconfEntries"][i]["RawPanelDetails"]) : "") + '</td>';
+
+                    output += '</tr>';
+                }
+                output += '</table>';
+                document.getElementById("PanelEntriesDiv").innerHTML = output
+            }
+
+            //websocket.close();
+            logToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span><br/>');
+        }
+
+        function renderRWPderivedInfoTable(rwDetails) {
+            if (rwDetails["ErrorMsg"] != "") {
+                return '<span style="color:red">' + rwDetails["ErrorMsg"] + '</span>';
+            }
+
+            output = '';
+            if (rwDetails["Msg"] != "") {
+                output += rwDetails["Msg"];
+            }
+            output += '<table border="0" class="rpDetails' + (rwDetails["Platform"] == "ibeam" ? " platformBluePill" : " platformOther") + '">';
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Model/Serial/Ver:</td>
+                        <td style="font-size: 10px;` + (rwDetails["SerialModelError"] ? ` color:red;` : ``) + `">` + rwDetails["Model"] + ` / ` + rwDetails["Serial"] + ` / ` + rwDetails["SoftwareVersion"] + `</td>
+                    </tr>`;
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Platform / BP Ready:</td>
+                        <td style="font-size: 10px;">` + (rwDetails["Platform"] ? rwDetails["Platform"] : "-") + ` / ` + (rwDetails["BluePillReady"] ? rwDetails["BluePillReady"] : "-") + `</td>
+                    </tr>`;
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Friendly Name:</td>
+                        <td style="font-size: 10px;">` + rwDetails["FriendlyName"] + `</td>
+                    </tr>`;
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Max Clients / Lock To IPs:</td>
+                        <td style="font-size: 10px;">` + (rwDetails["MaxClients"] ? rwDetails["MaxClients"] : "-") + ` / ` + (rwDetails["LockedToIPs"] ? rwDetails["LockedToIPs"] : "-") + `</td>
+                    </tr>`;
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Current Connections:</td>
+                        <td style="font-size: 10px;">` + (rwDetails["Connections"] ? rwDetails["Connections"] : "-") + `</td>
+                    </tr>`;
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Boots/Session/Uptime/Sleep:</td>
+                        <td style="font-size: 10px;">` + (rwDetails["BootsCount"] ? rwDetails["BootsCount"] : "-") + ` / ` + (rwDetails["SessionUptime"] ? rwDetails["SessionUptime"] : "-") + ` / ` + (rwDetails["TotalUptime"] ? rwDetails["TotalUptime"] : "-") + ` / ` + (rwDetails["ScreenSaveOnTime"] ? rwDetails["ScreenSaveOnTime"] : "-") + `</td>
+                    </tr>`;
+            output += `<tr>
+                        <td class="header" style="font-size: 10px;">Stats retrieval time:</td>
+                        <td style="font-size: 10px;` + (rwDetails["DeltaTime"] >= 20000 ? ` color:red;` : ``) + `">` + (rwDetails["DeltaTime"] ? rwDetails["DeltaTime"] + 'ms' : '') + `</td>
+                    </tr>`;
+            output += '</table>';
+
+            if (rwDetails["BinaryConnection"]) {
+                output += '<span style="background-color: black; color: white; padding: 3px 3px 3px 3px; font-size: 9px; border-radius:4px;">BINARY</span>';
+            } else {
+                output += '<span style="background-color: #666666; color: white; padding: 3px 3px 3px 3px; font-size: 9px; border-radius:4px;">ASCII</span>';
+            }
+
+            return output;
+        }
+
+        function onError(evt) {
+            logToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
+        }
+
+        function connectTo(ipAndPort) {
+            doSend(`{"ConnectTo": "` + ipAndPort + `"}`);
+        }
+
+        function doSend(message) {
+            logToScreen("SENT: " + message);
+            websocket.send(message);
+        }
+
+        function logToScreen(message) {
+            return  // Don't log.
+        }
+
+        window.addEventListener("load", init, false);
+    </script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-size: 12px;
+        }
+
+        table.rpDetails td.header {
+            font-weight: bold;
+        }
+
+        table#PanelEntries {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        table#PanelEntries td {
+            padding-left: 5px;
+            padding-right: 5px;
+            font-size: 12px;
+        }
+
+        .platformOther {
+            background-color: #838383
+        }
+
+        .platformBluePill {
+            background-color: #3e89eb
+        }
+
+        table#PanelEntries tr {
+            background-color: #dddddd;
+        }
+
+        table#PanelEntries tr.justAdded {
+            background-color: #c4e5c4;
+        }
+
+        table#PanelEntries tr.header td {
+            background-color: #cccccc;
+            font-weight: bold;
+        }
+
+        div.container {
+            background-color: #eeeeee;
+            border-radius: 10px;
+            border: 1px solid #666666;
+            padding: 20px 20px 20px 20px;
+        }
+
+        input[type=button] {
+            background: #cccccc;
+            width: auto;
+            cursor: pointer;
+            padding: 4px 4px 4px 4px;
+            border-radius: 6px;
+            border: 2px solid #cccccc;
+        }
+
+        p.tip {
+            font-size: 10px;
+            font-style: italic;
+        }
+
+        a {
+            color: black;
+        }
+    </style>
+</head>
+
+<body>
+    <div
+        style="background-color: #00449c; border-radius: 5px; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;">
+        <a href="/"><img src="logoheader.png" height="30" /></a>
+        <img src="kasperwashere.png" height="30" style="float:right;" />
+    </div>
+    <h2>Panels on Network:</h2>
+
+    <p>Updated: <span id="Time"></span></p>
+
+    <div class="container" id="PanelEntriesDiv">
+
+    </div>
+    <p class="tip">SKAARHOJ devices found on the network.</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/kasperwashere.png b/resources/kasperwashere.png
new file mode 100644
index 0000000..c18c669
Binary files /dev/null and b/resources/kasperwashere.png differ
diff --git a/resources/logoheader.png b/resources/logoheader.png
new file mode 100644
index 0000000..610de05
Binary files /dev/null and b/resources/logoheader.png differ
diff --git a/resources/panel.html b/resources/panel.html
new file mode 100644
index 0000000..623a67e
--- /dev/null
+++ b/resources/panel.html
@@ -0,0 +1,879 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Topology Explorer - Panel View</title>
+    <script language="javascript" type="text/javascript">
+
+        var wsUri = "ws://127.0.0.1:8080/ws";
+
+        /*
+            Don't read this code. It will be your worst nightmare. It was written in the middle of the night, 
+            riding on a bronco with the left hand on the keyboard while sorting paper clips by color. 
+            It works, but it's not pretty, not a rolemodel, not for kids. But it get's the job done which 
+            is to provide a neat little UI for inspecting Raw Panel. And I kinda like it this way.
+
+            So, now you are warned.
+
+            MIT Licensed.
+
+            - kasper
+        */
+
+
+        function init() {
+            setUpWebSocket();
+        }
+
+        function setUpWebSocket() {
+            websocket = new WebSocket(wsUri);
+            websocket.onopen = function (evt) { onOpen(evt) };
+            websocket.onclose = function (evt) { onClose(evt) };
+            websocket.onmessage = function (evt) { onMessage(evt) };
+            websocket.onerror = function (evt) { onError(evt) };
+        }
+
+        function onOpen(evt) {
+            logToScreen("CONNECTED");
+            doSend("SendAll");
+        }
+
+        function onClose(evt) {
+            logToScreen("DISCONNECTED");
+        }
+
+        function onMessage(evt) {
+            const obj = JSON.parse(evt.data);
+
+            if (obj["DisconnectedSignal"]) {
+                document.location = "/";
+            }
+
+            if (obj.hasOwnProperty("Time")) {
+                document.getElementById("Time").innerHTML = obj["Time"]
+            }
+            if (obj.hasOwnProperty("Title")) {
+                document.getElementById("Title").innerHTML = obj["Title"]
+            }
+            if (obj.hasOwnProperty("Model")) {
+                document.getElementById("Model").innerHTML = obj["Model"]
+            }
+            if (obj.hasOwnProperty("Serial")) {
+                document.getElementById("Serial").innerHTML = obj["Serial"]
+            }
+
+            if (obj.hasOwnProperty("SoftwareVersion")) {
+                document.getElementById("SoftwareVersion").innerHTML = obj["SoftwareVersion"]
+            }
+            if (obj.hasOwnProperty("Platform")) {
+                document.getElementById("Platform").innerHTML = obj["Platform"]
+            }
+            if (obj.hasOwnProperty("BluePillReady")) {
+                document.getElementById("BluePillReady").innerHTML = obj["BluePillReady"]
+            }
+            if (obj.hasOwnProperty("MaxClients")) {
+                document.getElementById("MaxClients").innerHTML = obj["MaxClients"]
+            }
+            if (obj.hasOwnProperty("LockedToIPs")) {
+                document.getElementById("LockedToIPs").innerHTML = obj["LockedToIPs"]
+            }
+
+            if (obj.hasOwnProperty("Connections")) {
+                document.getElementById("Connections").innerHTML = obj["Connections"]
+            }
+            if (obj.hasOwnProperty("BootsCount")) {
+                document.getElementById("BootsCount").innerHTML = obj["BootsCount"]
+            }
+            if (obj.hasOwnProperty("TotalUptime")) {
+                document.getElementById("TotalUptime").innerHTML = obj["TotalUptime"];
+            }
+            if (obj.hasOwnProperty("SessionUptime")) {
+                document.getElementById("SessionUptime").innerHTML = obj["SessionUptime"];
+            }
+            if (obj.hasOwnProperty("ScreenSaveOnTime")) {
+                document.getElementById("ScreenSaveOnTime").innerHTML = obj["ScreenSaveOnTime"];
+            }
+
+            if (obj.hasOwnProperty("RDYBSY")) {
+                document.getElementById("RDYBSY").innerHTML = obj["RDYBSY"]
+            }
+            if (obj.hasOwnProperty("Sleeping")) {
+                document.getElementById("Sleeping").innerHTML = obj["Sleeping"]
+            }
+
+            if (obj.hasOwnProperty("CPUState")) {
+                document.getElementById("CPUState").innerHTML = obj["CPUState"]
+            }
+
+            if (obj.hasOwnProperty("ControlBlock")) {
+                document.getElementById("Control").innerHTML = obj["ControlBlock"]
+            }
+            if (obj.hasOwnProperty("SvgIcon")) {
+                document.getElementById("SvgIcon").innerHTML = obj["SvgIcon"]
+            }
+            if (obj.hasOwnProperty("TopologyTable")) {
+                document.getElementById("TopologyTable").innerHTML = obj["TopologyTable"]
+            }
+            if (obj.hasOwnProperty("TopologyJSON")) {
+                document.getElementById("TopologyJSON").innerHTML = obj["TopologyJSON"]
+            }
+
+            if (obj.hasOwnProperty("PanelEvent")) {
+                tableCell = document.getElementById("HWc" + obj["PanelEvent"].HWCID + "_Events");
+                if (tableCell != null) {
+                    tableCell.classList.add('eventReceived');
+                    tableCell.innerHTML = JSON.stringify(obj["PanelEvent"]);
+                }
+
+                objRef = document.getElementById("SVG_HWc" + obj["PanelEvent"].HWCID);
+                if (objRef != null) {
+                    objRef.setAttribute('stroke', 'red');
+                    objRef.setAttribute('stroke-width', '8px');
+                }
+            }
+            if (obj.hasOwnProperty("RWPState")) {
+                setRWPState(obj.RWPState);
+                drawControlBlock();
+            }
+            if (obj.hasOwnProperty("RWPASCIIToPanel")) {
+                document.getElementById("RWPASCIIToPanel").innerHTML = obj["RWPASCIIToPanel"]
+            }
+            if (obj.hasOwnProperty("RWPProtobufToPanel")) {
+                document.getElementById("RWPProtobufToPanel").innerHTML = obj["RWPProtobufToPanel"]
+            }
+            if (obj.hasOwnProperty("RWPJSONToPanel")) {
+                document.getElementById("RWPJSONToPanel").innerHTML = obj["RWPJSONToPanel"]
+            }
+            if (obj.hasOwnProperty("StepDescription")) {
+                document.getElementById("StepDescription").innerHTML = obj["StepDescription"]
+            }
+
+            //websocket.close();
+            logToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span><br/>');
+        }
+
+        function onError(evt) {
+            logToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
+        }
+
+        function doSend(message) {
+            logToScreen("SENT: " + message);
+            websocket.send(message);
+        }
+
+        function logToScreen(message) {
+            return  // Don't log.
+
+            var pre = document.createElement("pre");
+            pre.style.wordWrap = "break-word";
+            pre.innerHTML = message;
+            output = document.getElementById("Log");
+            output.appendChild(pre);
+        }
+
+        window.addEventListener("load", init, false);
+
+
+        // Selecting items on SVG:
+        var SelectedHWCs = [];
+        function clickHWC(e, HWCid) {
+            var shiftClick = e.shiftKey
+            e.preventDefault();
+
+            // Empty selection if shift is held down:
+            if (!shiftClick) {
+                clearSelection(SelectedHWCs);
+                SelectedHWCs = [];
+            }
+
+            if (!isElementInArray(SelectedHWCs, HWCid)) {
+                if (!shiftClick) {
+                    SelectedHWCs = [HWCid];
+                } else {
+                    SelectedHWCs[SelectedHWCs.length] = HWCid;
+                }
+
+                // SVG element paint:
+                objRef = document.getElementById("SVG_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.setAttribute('fill', '#eac720');
+                }
+
+                // HTML table row paint:
+                objRef = document.getElementById("Row_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.classList.add('highlight');
+                }
+
+                // Topology JSON element paint:
+                objRef = document.getElementById("Top_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.classList.add('highlight');
+                }
+            } else {
+                if (!shiftClick) {
+                    SelectedHWCs = [];
+                } else {
+                    removeElementFromArray(SelectedHWCs, HWCid);
+                }
+
+                // SVG element paint:
+                objRef = document.getElementById("SVG_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.setAttribute('fill', '#dddddd');
+                }
+
+                // HTML table row paint:
+                objRef = document.getElementById("Row_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.classList.remove('highlight');
+                }
+
+                // Topology JSON element paint:
+                objRef = document.getElementById("Top_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.classList.remove('highlight');
+                }
+            }
+
+            doSend(`{"RequestControlForHWC": ` + HWCid + `}`);
+        }
+        function clearSelection(selection) {
+            for (var i = 0; i < selection.length; i++) {
+                HWCid = selection[i];
+
+                // SVG element paint:
+                objRef = document.getElementById("SVG_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.setAttribute('fill', '#dddddd');
+                }
+
+                // HTML table row paint:
+                objRef = document.getElementById("Row_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.classList.remove('highlight');
+                }
+
+                // Topology JSON element paint:
+                objRef = document.getElementById("Top_HWc" + HWCid);
+                if (objRef != null) {
+                    objRef.classList.remove('highlight');
+                }
+            }
+        }
+        function removeElementFromArray(arr, elementMatch) {
+            for (var i = 0; i < arr.length; i++) {
+                if (arr[i] == elementMatch) {
+                    arr.remove(i)
+                }
+            }
+            return arr
+        }
+        function isElementInArray(arr, elementMatch) {
+            for (var i = 0; i < arr.length; i++) {
+                if (arr[i] == elementMatch) {
+                    return true
+                }
+            }
+            return false
+        }
+        // Array Remove - By John Resig (MIT Licensed)
+        Array.prototype.remove = function (from, to) {
+            var rest = this.slice((to || from) + 1 || this.length);
+            this.length = from < 0 ? this.length + from : from;
+            return this.push.apply(this, rest);
+        };
+
+
+
+        // FEEDBACK:
+        var RWPState;
+        function setRWPState(rwpstate) {
+            RWPState = rwpstate
+
+            if (!RWPState.hasOwnProperty("HWCIDs")) {
+                RWPState["HWCIDs"] = {}
+            }
+
+            if (!RWPState.hasOwnProperty("HWCMode")) {
+                RWPState["HWCMode"] = {}
+            }
+
+            if (!RWPState.hasOwnProperty("HWCColor")) {
+                RWPState["HWCColor"] = {}
+            }
+
+            if (!RWPState.hasOwnProperty("HWCExtended")) {
+                RWPState["HWCExtended"] = {}
+            }
+
+            if (!RWPState.hasOwnProperty("HWCText")) {
+                RWPState["HWCText"] = { "Formatting": 7 }
+            }
+        }
+
+        function startDemo()    {
+            doSend(JSON.stringify({ "DemoHWCs": SelectedHWCs, "DemoStart": true }));
+        }
+
+        function demoBackward()    {
+            doSend(JSON.stringify({ "DemoBackward": true }));
+        }
+
+        function demoForward()    {
+            doSend(JSON.stringify({ "DemoForward": true }));
+        }
+
+        // Sending the full state as its stored
+        function sendFullState() {
+            RWPState["HWCIDs"] = SelectedHWCs;
+            doSend(JSON.stringify({ "RWPState": RWPState }));
+        }
+
+        // Sending only Mode:
+        function sendMode() {
+            RWPState["HWCIDs"] = SelectedHWCs;
+            doSend(JSON.stringify({ "RWPState": { "HWCIDs": RWPState["HWCIDs"], "HWCMode": RWPState["HWCMode"] } }));
+        }
+
+        // Sending only Color:
+        function sendColor() {
+            RWPState["HWCIDs"] = SelectedHWCs;
+            doSend(JSON.stringify({ "RWPState": { "HWCIDs": RWPState["HWCIDs"], "HWCColor": RWPState["HWCColor"] } }));
+        }
+        function initColorIndex() {
+            if (!RWPState["HWCColor"].hasOwnProperty("ColorIndex") || RWPState["HWCColor"]["ColorIndex"] == null) {
+                RWPState["HWCColor"]["ColorIndex"] = {};
+            }
+            RWPState["HWCColor"]["ColorRGB"] = null;
+        }
+
+        // Sending only Extended:
+        function sendExtended() {
+            RWPState["HWCIDs"] = SelectedHWCs;
+            doSend(JSON.stringify({ "RWPState": { "HWCIDs": RWPState["HWCIDs"], "HWCExtended": RWPState["HWCExtended"] } }));
+        }
+
+        // Sending only Text:
+        function sendText() {
+            RWPState["HWCIDs"] = SelectedHWCs;
+            doSend(JSON.stringify({ "RWPState": { "HWCIDs": RWPState["HWCIDs"], "HWCText": RWPState["HWCText"] } }));
+        }
+
+        // Sending only Image:
+        function sendImage(imgMode) {
+
+            var file = document.getElementById('filename').files[0];
+            var reader = new FileReader();
+            var rawData = new ArrayBuffer();
+            reader.loadend = function () {
+            }
+            reader.onload = function (e) {
+                rawData = e.target.result;
+
+                doSend(JSON.stringify({ "Image_HWCIDs": SelectedHWCs, "ImageMode": imgMode, "ImageData": Array.from(new Uint8Array(rawData)) }));
+            }
+
+            if (file != null) {
+                reader.readAsArrayBuffer(file)
+            } else {
+                doSend(JSON.stringify({ "Image_HWCIDs": SelectedHWCs, "ImageMode": imgMode }));
+            }
+        }
+
+        function rgbToHex(r, g, b) {
+            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        }
+
+        function hexToRgb(hex) {
+            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            if (result) {
+                var r = parseInt(result[1], 16);
+                var g = parseInt(result[2], 16);
+                var b = parseInt(result[3], 16);
+                return [r, g, b];
+            }
+            return null;
+        }
+        function printColor() {
+            if (RWPState["HWCColor"]["ColorRGB"] != null) {
+                return rgbToHex(RWPState["HWCColor"]["ColorRGB"]["Red"], RWPState["HWCColor"]["ColorRGB"]["Green"], RWPState["HWCColor"]["ColorRGB"]["Blue"])
+            } else {
+                return "#......"
+            }
+        }
+        function convertColorInput(colorInHex) {
+            rgb = hexToRgb(colorInHex);
+            if (rgb != null) {
+                RWPState["HWCColor"]["ColorIndex"] = null;
+                RWPState["HWCColor"]["ColorRGB"] = {
+                    "Red": rgb[0],
+                    "Green": rgb[1],
+                    "Blue": rgb[2]
+                };
+                sendColor();
+            }
+        }
+
+        // Draw Control Block:
+        function drawControlBlock() {
+            output = "";
+
+            if (SelectedHWCs.length > 0) {
+                output += '<b>HWC#' + SelectedHWCs.join(",") + ' State</b><br/>';
+
+                // Mode:
+                output += '<hr/>';
+                output += '<b>Mode:</b><br/>';
+                output += 'State:<br/>';
+                output += '<input type="button" value="Off" onclick="RWPState[\'HWCMode\'][\'State\']=0; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["State"] == 0 ? ' class="selected"' : '') + '> ';
+                output += '<input type="button" value="Dimmed" onclick="RWPState[\'HWCMode\'][\'State\']=5; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["State"] == 5 ? ' class="selected"' : '') + '> ';
+                output += '<input type="button" value="On" onclick="RWPState[\'HWCMode\'][\'State\']=4; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["State"] == 4 ? ' class="selected"' : '') + '> ';
+                output += ' - <input type="button" value="Amber (On)" onclick="RWPState[\'HWCMode\'][\'State\']=1; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["State"] == 1 ? ' class="selected"' : '') + '> ';
+                output += '<input type="button" value="Red (On)" onclick="RWPState[\'HWCMode\'][\'State\']=2; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["State"] == 2 ? ' class="selected"' : '') + '> ';
+                output += '<input type="button" value="Green (On)" onclick="RWPState[\'HWCMode\'][\'State\']=3; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["State"] == 3 ? ' class="selected"' : '') + '> ';
+                output += '<br/>'
+
+                output += 'Output bit:<br/>';
+                output += '<input type="button" value="Off" onclick="RWPState[\'HWCMode\'][\'Output\']=false; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"].hasOwnProperty("Output") && !RWPState["HWCMode"]["Output"] ? ' class="selected"' : '') + '> ';
+                output += '<input type="button" value="On" onclick="RWPState[\'HWCMode\'][\'Output\']=true; sendMode(); drawControlBlock(); return false;"' + (RWPState["HWCMode"]["Output"] ? ' class="selected"' : '') + '> ';
+
+                output += '<br/>'
+                output += 'Blink:<br/>';
+                output += '<select onchange="RWPState[\'HWCMode\'][\'BlinkPattern\']=parseInt(this.options[this.selectedIndex].value); sendMode(); drawControlBlock(); return false;">';
+                output += '<option value="0"' + (RWPState["HWCMode"]["BlinkPattern"] == 0 ? ' selected="selected"' : '') + '></option>';
+                output += '<option value="1"' + (RWPState["HWCMode"]["BlinkPattern"] == 1 ? ' selected="selected"' : '') + '>*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-</option>';
+                output += '<option value="2"' + (RWPState["HWCMode"]["BlinkPattern"] == 2 ? ' selected="selected"' : '') + '>**--**--**--**--**--**--**--**--</option>';
+                output += '<option value="4"' + (RWPState["HWCMode"]["BlinkPattern"] == 4 ? ' selected="selected"' : '') + '>****----****----****----****----</option>';
+                output += '<option value="8"' + (RWPState["HWCMode"]["BlinkPattern"] == 8 ? ' selected="selected"' : '') + '>********--------********--------</option>';
+                output += '<option value="3"' + (RWPState["HWCMode"]["BlinkPattern"] == 3 ? ' selected="selected"' : '') + '>***-***-***-***-***-***-***-***-</option>';
+                output += '<option value="6"' + (RWPState["HWCMode"]["BlinkPattern"] == 6 ? ' selected="selected"' : '') + '>******--******--******--******--</option>';
+                output += '<option value="7"' + (RWPState["HWCMode"]["BlinkPattern"] == 7 ? ' selected="selected"' : '') + '>*******-*******-*******-*******-</option>';
+                output += '<option value="5"' + (RWPState["HWCMode"]["BlinkPattern"] == 5 ? ' selected="selected"' : '') + '>*****-*-*****-*-*****-*-*****-*-</option>';
+                output += '<option value="9"' + (RWPState["HWCMode"]["BlinkPattern"] == 9 ? ' selected="selected"' : '') + '>*********-*-*-*-*********-*-*-*-</option>';
+                output += '<option value="10"' + (RWPState["HWCMode"]["BlinkPattern"] == 10 ? ' selected="selected"' : '') + '>**********--**--**********--**--</option>';
+                output += '<option value="11"' + (RWPState["HWCMode"]["BlinkPattern"] == 11 ? ' selected="selected"' : '') + '>***********-***-***********-***-</option>';
+                output += '<option value="13"' + (RWPState["HWCMode"]["BlinkPattern"] == 13 ? ' selected="selected"' : '') + '>*************-*-*************-*-</option>';
+                output += '<option value="12"' + (RWPState["HWCMode"]["BlinkPattern"] == 12 ? ' selected="selected"' : '') + '>************----************----</option>';
+                output += '<option value="14"' + (RWPState["HWCMode"]["BlinkPattern"] == 14 ? ' selected="selected"' : '') + '>**************--**************--</option>';
+                output += '<option value="15"' + (RWPState["HWCMode"]["BlinkPattern"] == 15 ? ' selected="selected"' : '') + '>***************-***************-</option>';
+                output += '</select>';
+
+                ColorArray = [
+                    ["Default", "#999999", 0],
+                    ["Off", "#000000", 1],
+                    ["White", "#ffffff", 2],
+                    ["Warm", "#f4f5aa", 3],
+                    ["Red (B)", "#d93a25", 4],
+                    ["Rose", "#e79590", 5],
+                    ["Pink", "#dd41fd", 6],
+                    ["Purple", "#ad51ff", 7],
+                    ["Amber (B)", "#ff810b", 8],
+                    ["Yellow (B)", "#feff33", 9],
+                    ["Dark Blue", "#2e3eff", 10],
+                    ["Blue", "#5992ff", 11],
+                    ["Ice", "#acd6ff", 12],
+                    ["Cyan", "#80fcff", 13],
+                    ["Spring (B)", "#c4ff29", 14],
+                    ["Green (B)", "#8dfd29", 15],
+                    ["Mint", "#8efe8c", 16],
+                    ["Light Gray", "#cccccc", 17],
+                    ["Dark Gray", "#666666", 18],
+                ];
+
+                output += '<hr/>';
+                output += '<b>Color:</b><br/>';
+
+                for (var i = 0; i < ColorArray.length; i++) {
+                    output += '<input type="button" style="font-size: 11px; padding: 1 1 1 1; width: 60px; background-color: ' + ColorArray[i][1] + '" value="' + ColorArray[i][0] + '" onclick="initColorIndex(); RWPState[\'HWCColor\'][\'ColorIndex\'][\'Index\']=' + ColorArray[i][2] + '; sendColor(); drawControlBlock(); return false;"' + (RWPState["HWCColor"]["ColorIndex"] != null && RWPState["HWCColor"]["ColorIndex"]["Index"] == ColorArray[i][2] ? ' class="selected"' : '') + '> ';
+                }
+
+                output += '<br/>RGB code: <input id="ColorRGBvalue" type="text" value="' + printColor() + '" onchange="convertColorInput(this.value); return false;"><span type="button" id="colorPicker"> <b>[Pick]</b></span>';
+
+                // Extended value:
+                output += '<hr/>';
+                output += '<b>Extended Return Value:</b><br/>';
+                output += '<select onchange="RWPState[\'HWCExtended\'][\'Interpretation\']=parseInt(this.options[this.selectedIndex].value); sendExtended(); drawControlBlock(); return false;">';
+                output += '<option value="0"' + (RWPState["HWCExtended"]["Interpretation"] == 0 ? ' selected="selected"' : '') + '></option>';
+                output += '<option value="1"' + (RWPState["HWCExtended"]["Interpretation"] == 1 ? ' selected="selected"' : '') + '>Strength</option>';
+                output += '<option value="3"' + (RWPState["HWCExtended"]["Interpretation"] == 3 ? ' selected="selected"' : '') + '>Steps</option>';
+                output += '<option value="4"' + (RWPState["HWCExtended"]["Interpretation"] == 4 ? ' selected="selected"' : '') + '>VU meter</option>';
+                output += '<option value="5"' + (RWPState["HWCExtended"]["Interpretation"] == 5 ? ' selected="selected"' : '') + '>Position</option>';
+                output += '</select>';
+                output += '<input type="text" value="' + parseInt(RWPState["HWCExtended"]["Value"] != null ? RWPState["HWCExtended"]["Value"] : 0) + '" onchange="RWPState[\'HWCExtended\'][\'Value\']=parseInt(this.value); sendExtended(); drawControlBlock(); return false;">';
+
+                // Text:
+                output += '<hr/>';
+                output += '<b>Text:</b><br/>';
+                output += 'Title: <input type="text" value="' + (RWPState["HWCText"]["Title"] != null ? RWPState["HWCText"]["Title"] : "") + '" onchange="RWPState[\'HWCText\'][\'Title\']=this.value; sendText(); drawControlBlock(); return false;">';
+                output += '<input type="checkbox" onchange="RWPState[\'HWCText\'][\'SolidHeaderBar\']=this.checked; sendText(); drawControlBlock(); return false;"' + (RWPState["HWCText"]["SolidHeaderBar"] != null && RWPState["HWCText"]["SolidHeaderBar"] ? " checked" : "") + '> Solid header<br/>';
+
+                output += 'Textline 1: <input type="text" value="' + (RWPState["HWCText"]["Textline1"] != null ? RWPState["HWCText"]["Textline1"] : "") + '" onchange="RWPState[\'HWCText\'][\'Textline1\']=this.value; sendText(); drawControlBlock(); return false;"><br/>';
+                output += 'Textline 2: <input type="text" value="' + (RWPState["HWCText"]["Textline2"] != null ? RWPState["HWCText"]["Textline2"] : "") + '" onchange="RWPState[\'HWCText\'][\'Textline2\']=this.value; RWPState[\'HWCText\'][\'PairMode\']=(this.value==\'\'?0:1); sendText(); drawControlBlock(); return false;"><br/>';
+
+                // Images:
+                output += '<hr/>';
+                output += '<b>Images:</b><br/>';
+                output += '<input type="button" value="B/W" onclick="return sendImage(\'bw\');"> ';
+                output += '<input type="button" value="Gray" onclick="return sendImage(\'gray\');"> ';
+                output += '<input type="button" value="Color" onclick="return sendImage(\'color\');"> ';
+
+                output += '<input type="file" id="filename" /> ';
+
+
+                // Full state
+                output += '<hr/><input type="button" value="Send full state" onclick="return sendFullState();">';
+                output += ' - <input type="button" value="Start Demo" onclick="return startDemo();"> <input type="button" value="&lt; Step" onclick="return demoBackward();"> <input type="button" value="Step &gt;" onclick="return demoForward();"> <span id="StepDescription"></span>';
+            }
+
+            document.getElementById("Control").innerHTML = output;
+
+            var picker = new Picker({ parent: document.querySelector('#colorPicker'), color: lastColorSelected, alpha: false, editor: false });
+            picker.onChange = function (color) {
+                lastColorSelected = color.hex.substring(0, 7)
+                convertColorInput(lastColorSelected);
+                document.getElementById("ColorRGBvalue").value = lastColorSelected;
+            };
+
+        }
+        var lastColorSelected = "#000000";
+
+
+        function action_clearAll() {
+            doSend(`{"Command": {"ClearAll":true}}`);
+        }
+        function action_clearLEDs() {
+            doSend(`{"Command": {"ClearLEDs":true}}`);
+        }
+        function action_clearDisplays() {
+            doSend(`{"Command": {"ClearDisplays":true}}`);
+        }
+
+        function action_Sleep(sleep) {
+            doSend(`{"Command": {"SetSleepTimeout":{"Value":` + (sleep * 1000) + `}}}`);
+        }
+        function action_WakeUp() {
+            doSend(`{"Command": {"WakeUp":true}}`);
+        }
+
+        function action_SetBrightness(value) {
+            if (value >= 0) {
+                doSend(`{"Command": {"PanelBrightness":{"OLEDs":` + (value) + `,"LEDs":` + (value) + `}}}`);
+            }
+        }
+        function action_LoadCPU(value) {
+            if (value >= 0) {
+                doSend(`{"Command": {"LoadCPU":{"Level":` + (value) + `}}}`);
+            }
+        }
+
+        function action_FullThrottle() {
+            doSend(`{"FullThrottle": true}`);
+        }
+        function disconnect() {
+            doSend(`{"Disconnect": true}`);
+        }
+    </script>
+    <script src="vanilla-picker.js"></script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-size: 12px;
+        }
+
+        #SvgIcon {}
+
+        table#TopologyTable td {
+            padding-left: 5px;
+            padding-right: 5px;
+            background-color: #dddddd;
+        }
+
+        table#TopologyTable tr.header td {
+            background-color: #cccccc;
+            font-weight: bold;
+        }
+
+        table#TopologyTable tr.highlight td {
+            background-color: #eac720;
+        }
+
+        span.highlight {
+            background-color: #eac720;
+        }
+
+        table#TopologyTable tr.mappedOut td {
+            color: #999999;
+            font-style: italic;
+        }
+
+        td.eventReceived {
+            color: rgb(13, 29, 130);
+        }
+
+        div.container {
+            background-color: #eeeeee;
+            border-radius: 10px;
+            border: 1px solid #666666;
+            padding: 20px 20px 20px 20px;
+        }
+
+        p.tip {
+            font-size: 10px;
+            font-style: italic;
+        }
+
+
+        input,
+        select,
+        textarea {
+            padding: 4px 4px 4px 4px;
+            border-radius: 6px;
+            border: 2px solid #cccccc;
+        }
+
+        input[type=button] {
+            background: #cccccc;
+            width: auto;
+            cursor: pointer;
+        }
+
+        input[type=button].selected {
+            background-color: rgb(11, 200, 11);
+            border: 2px solid black;
+        }
+
+        input[type=button]:hover {
+            border: 2px solid black;
+        }
+
+        div.pre {
+            padding-top: 4px;
+            padding-bottom: 4px;
+            font-family: 'Courier New', Courier, monospace;
+        }
+
+        div#Control {
+            max-width: 600px;
+        }
+
+        div#Commands {
+            max-width: 600px;
+        }
+
+        div#SvgIcon {
+            text-align: center;
+            max-width: 1200px;
+        }
+
+        svg#ctrlimg {
+            max-height: 1000px;
+        }
+
+        table#topTable {
+            border: 1px solid black;
+        }
+
+        table#topTable td {
+            padding-left: 5px;
+            padding-right: 15px;
+        }
+    </style>
+</head>
+
+<body>
+    <div
+        style="background-color: #00449c; border-radius: 5px; padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;">
+        <a href="/"><img src="logoheader.png" height="30"/></a>
+        <img src="kasperwashere.png" height="30" style="float:right;" />
+    </div>
+
+    <h2>Panel Topology Explorer</h2>
+
+    <p>Updated: <span id="Time"></span></p>
+
+    <h3>Panel Info:</h3>
+    <div class="container">
+        <table border="0" cellpadding="0" cellspacing="0" id="topTable">
+            <tr>
+                <td><b>Title:</b></td>
+                <td><span id="Title"></span></td>
+
+                <td><b>S/W version:</b></td>
+                <td><span id="SoftwareVersion"></span></td>
+
+                <td><b>Boot Count:</b></td>
+                <td><span id="BootsCount"></span></td>
+
+                <td><b>Rdy/Bsy:</b></td>
+                <td><span id="RDYBSY"></span></td>
+            </tr>
+            <tr>
+                <td><b>Model:</b></td>
+                <td><span id="Model"></span></td>
+
+                <td><b>Platform:</b></td>
+                <td><span id="Platform"></span></td>
+
+                <td><b>Total Uptime:</b></td>
+                <td><span id="TotalUptime"></span></td>
+
+                <td><b>Sleeping:</b></td>
+                <td><span id="Sleeping"></span></td>
+            </tr>
+            <tr>
+                <td><b>Serial:</b></td>
+                <td><span id="Serial"></span></td>
+
+                <td><b>Blue Pill Ready:</b></td>
+                <td><span id="BluePillReady"></span></td>
+
+                <td><b>Session Uptime:</b></td>
+                <td><span id="SessionUptime"></span></td>
+
+                <td><b>CPU:</b></td>
+                <td><span id="CPUState"></span></td>
+            </tr>
+            <tr>
+                <td><b>Max Clients:</b></td>
+                <td><span id="MaxClients"></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+
+                <td><b>Screen Save On:</b></td>
+                <td><span id="ScreenSaveOnTime"></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+            </tr>
+            <tr>
+                <td><b>Connections:</b></td>
+                <td><span id="Connections"></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+            </tr>
+            <tr>
+                <td><b>Locked to IPs:</b></td>
+                <td><span id="LockedToIPs"></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+
+                <td><b></b></td>
+                <td><span id=""></span></td>
+            </tr>
+        </table>
+        <input type="button" value="Clear All" onclick="action_clearAll(); return false;">
+        <input type="button" value="Clear Disp" onclick="action_clearDisplays(); return false;">
+        <input type="button" value="Clear LEDs" onclick="action_clearLEDs(); return false;">
+        <input type="button" value="Full Throttle" onclick="action_FullThrottle(); return false;">
+        &nbsp;
+        <input type="button" value="Sleep 5s" onclick="action_Sleep(5); return false;">
+        <input type="button" value="Sleep 2m" onclick="action_Sleep(2*60); return false;">
+        <input type="button" value="Sleep 1h" onclick="action_Sleep(60*60); return false;">
+        <input type="button" value="Never" onclick="action_Sleep(0); return false;">
+        <input type="button" value="Wake Up" onclick="action_WakeUp(); return false;">
+        <br />
+
+        <select onchange="action_SetBrightness(this.options[this.selectedIndex].value);">
+            <option value="-1">Brightness:</option>
+            <option value="0">Lowest/Off</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">Medium</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+            <option value="7">7</option>
+            <option value="8">Full</option>
+        </select>
+
+        <select onchange="action_SetDimmedGain(this.options[this.selectedIndex].value);">
+            <option value="-1">Dimmed Gain:</option>
+            <option value="0">Default</option>
+            <option value="2">2/64</option>
+            <option value="4">4/64</option>
+            <option value="8">8/64</option>
+            <option value="12">12/64</option>
+            <option value="16">16/64 (default)</option>
+            <option value="24">24/64</option>
+            <option value="32">32/64</option>
+        </select>
+
+        <select onchange="action_LoadCPU(this.options[this.selectedIndex].value);">
+            <option value="-1">Load CPU Cores:</option>
+            <option value="0">None</option>
+            <option value="1">25%</option>
+            <option value="2">50%</option>
+            <option value="3">75%</option>
+            <option value="4">100%</option>
+        </select>
+
+        <input type="button" value="Disconnect" onclick="disconnect(); return false;" style="background-color: #333333; color: white; float:right;">
+    </div>
+    <p class="tip">Various panel information.</p>
+
+    <!-- I love whoever invented html-tables for positioning. It worked on day one, it works today and never failed in the meantime. Who cares about semantics... - KS -->
+    <table border="0" width="100%">
+        <tr>
+            <td valign="top">
+                <h3>Reference SVG Rendering:</h3>
+                <div id="SvgIcon" class="container"></div>
+                <p class="tip">The SVG image above is the reference rendering of panel based on the SVG base and the
+                    topology components listed below. Click any component to see it highlighted in the table (hold shift
+                    for more).</p>
+            </td>
+            <td valign="top">
+                <h3>Panel Communication:</h3>
+                <div id="Control" class="container"></div>
+                <p class="tip">Use this to send various types of feedback to the connected panel.</p>
+
+                <div id="Commands" class="container">
+                    <b>Raw Panel ASCII Command sequence (v1):</b></br>
+                    <pre id="RWPASCIIToPanel"></pre>
+
+                    <b>Raw Panel ASCII JSON (v2):</b></br>
+                    <div id="RWPJSONToPanel" class="pre"></div>
+
+                    <b>Raw Panel Binary Protobuf command:</b></br>
+                    <div id="RWPProtobufToPanel" class="pre"></div>
+                </div>
+                <p class="tip">These are the various encodings of the sent command.</p>
+            </td>
+        </tr>
+    </table>
+
+    <h3>Topology Summary:</h3>
+    <div id="TopologyTable" class="container"></div>
+    <p class="tip">The topology summary is a friendly overview of the features of individual hardware components (HWCs)
+        on the panel. It's compiled from the topology json structure. Click the rows to highlight the component in both
+        the json-structure and on the controller. Shift click to select more.</p>
+
+
+    <h3>Topology JSON:</h3>
+    <div class="container">
+        <pre id="TopologyJSON"></pre>
+    </div>
+    <p class="tip">The topology json is the authoritative description of the panels hardware components. This includes
+        not only their capabilities in terms of triggers (In) and feedback (Out, Ext, Disp) but also how they should
+        render on a visual representation.</p>
+
+    <h3>Log:</h3>
+    <div id="Log" class="container"></div>
+    <p class="tip">This is a log of the communication between this webpage and the PanelTopology websocket server.</p>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/vanilla-picker.js b/resources/vanilla-picker.js
new file mode 100644
index 0000000..1a500b5
--- /dev/null
+++ b/resources/vanilla-picker.js
@@ -0,0 +1,8 @@
+/*!
+ * vanilla-picker v2.12.1
+ * https://vanilla-picker.js.org
+ *
+ * Copyright 2017-2021 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
+ * Released under the ISC license.
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Picker=t()}(this,function(){"use strict";function u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var e=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e};function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var d=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,i=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){i=!0,o=e}finally{try{!n&&s.return&&s.return()}finally{if(i)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")};String.prototype.startsWith=String.prototype.startsWith||function(e){return 0===this.indexOf(e)},String.prototype.padStart=String.prototype.padStart||function(e,t){for(var r=this;r.length<e;)r=t+r;return r};var t={cb:"0f8ff",tqw:"aebd7",q:"-ffff",qmrn:"7fffd4",zr:"0ffff",bg:"5f5dc",bsq:"e4c4",bck:"---",nch:"ebcd",b:"--ff",bvt:"8a2be2",brwn:"a52a2a",brw:"deb887",ctb:"5f9ea0",hrt:"7fff-",chcT:"d2691e",cr:"7f50",rnw:"6495ed",crns:"8dc",crms:"dc143c",cn:"-ffff",Db:"--8b",Dcn:"-8b8b",Dgnr:"b8860b",Dgr:"a9a9a9",Dgrn:"-64-",Dkhk:"bdb76b",Dmgn:"8b-8b",Dvgr:"556b2f",Drng:"8c-",Drch:"9932cc",Dr:"8b--",Dsmn:"e9967a",Dsgr:"8fbc8f",DsTb:"483d8b",DsTg:"2f4f4f",Dtrq:"-ced1",Dvt:"94-d3",ppnk:"1493",pskb:"-bfff",mgr:"696969",grb:"1e90ff",rbrc:"b22222",rwht:"af0",stg:"228b22",chs:"-ff",gnsb:"dcdcdc",st:"8f8ff",g:"d7-",gnr:"daa520",gr:"808080",grn:"-8-0",grnw:"adff2f",hnw:"0fff0",htpn:"69b4",nnr:"cd5c5c",ng:"4b-82",vr:"0",khk:"0e68c",vnr:"e6e6fa",nrb:"0f5",wngr:"7cfc-",mnch:"acd",Lb:"add8e6",Lcr:"08080",Lcn:"e0ffff",Lgnr:"afad2",Lgr:"d3d3d3",Lgrn:"90ee90",Lpnk:"b6c1",Lsmn:"a07a",Lsgr:"20b2aa",Lskb:"87cefa",LsTg:"778899",Lstb:"b0c4de",Lw:"e0",m:"-ff-",mgrn:"32cd32",nn:"af0e6",mgnt:"-ff",mrn:"8--0",mqm:"66cdaa",mmb:"--cd",mmrc:"ba55d3",mmpr:"9370db",msg:"3cb371",mmsT:"7b68ee","":"-fa9a",mtr:"48d1cc",mmvt:"c71585",mnLb:"191970",ntc:"5fffa",mstr:"e4e1",mccs:"e4b5",vjw:"dead",nv:"--80",c:"df5e6",v:"808-0",vrb:"6b8e23",rng:"a5-",rngr:"45-",rch:"da70d6",pgnr:"eee8aa",pgrn:"98fb98",ptrq:"afeeee",pvtr:"db7093",ppwh:"efd5",pchp:"dab9",pr:"cd853f",pnk:"c0cb",pm:"dda0dd",pwrb:"b0e0e6",prp:"8-080",cc:"663399",r:"--",sbr:"bc8f8f",rb:"4169e1",sbrw:"8b4513",smn:"a8072",nbr:"4a460",sgrn:"2e8b57",ssh:"5ee",snn:"a0522d",svr:"c0c0c0",skb:"87ceeb",sTb:"6a5acd",sTgr:"708090",snw:"afa",n:"-ff7f",stb:"4682b4",tn:"d2b48c",t:"-8080",thst:"d8bfd8",tmT:"6347",trqs:"40e0d0",vt:"ee82ee",whT:"5deb3",wht:"",hts:"5f5f5",w:"-",wgrn:"9acd32"};function i(e,t){t=1<arguments.length&&void 0!==t?t:1;return(0<t?e.toFixed(t).replace(/0+$/,"").replace(/\.$/,""):e.toString())||"0"}var o=(e(h,[{key:"printRGB",value:function(e){var t=(e?this.rgba:this.rgba.slice(0,3)).map(function(e,t){return i(e,3===t?3:0)});return e?"rgba("+t+")":"rgb("+t+")"}},{key:"printHSL",value:function(e){var r=[360,100,100,1],n=["","%","%",""],t=(e?this.hsla:this.hsla.slice(0,3)).map(function(e,t){return i(e*r[t],3===t?3:1)+n[t]});return e?"hsla("+t+")":"hsl("+t+")"}},{key:"printHex",value:function(e){var t=this.hex;return e?t:t.substring(0,7)}},{key:"rgba",get:function(){if(this._rgba)return this._rgba;if(!this._hsla)throw new Error("No color is set");return this._rgba=h.hslToRgb(this._hsla)},set:function(e){3===e.length&&(e[3]=1),this._rgba=e,this._hsla=null}},{key:"rgbString",get:function(){return this.printRGB()}},{key:"rgbaString",get:function(){return this.printRGB(!0)}},{key:"hsla",get:function(){if(this._hsla)return this._hsla;if(!this._rgba)throw new Error("No color is set");return this._hsla=h.rgbToHsl(this._rgba)},set:function(e){3===e.length&&(e[3]=1),this._hsla=e,this._rgba=null}},{key:"hslString",get:function(){return this.printHSL()}},{key:"hslaString",get:function(){return this.printHSL(!0)}},{key:"hex",get:function(){return"#"+this.rgba.map(function(e,t){return(t<3?e:Math.round(255*e)).toString(16)}).map(function(e){return e.padStart(2,"0")}).join("")},set:function(e){this.rgba=h.hexToRgb(e)}}],[{key:"hexToRgb",value:function(e){var t=(e.startsWith("#")?e.slice(1):e).replace(/^(\w{3})$/,"$1F").replace(/^(\w)(\w)(\w)(\w)$/,"$1$1$2$2$3$3$4$4").replace(/^(\w{6})$/,"$1FF");if(!t.match(/^([0-9a-fA-F]{8})$/))throw new Error("Unknown hex color; "+e);t=t.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(e){return parseInt(e,16)});return t[3]=t[3]/255,t}},{key:"nameToRgb",value:function(e){e=e.toLowerCase().replace("at","T").replace(/[aeiouyldf]/g,"").replace("ght","L").replace("rk","D").slice(-5,4),e=t[e];return void 0===e?e:h.hexToRgb(e.replace(/\-/g,"00").padStart(6,"f"))}},{key:"rgbToHsl",value:function(e){var t=d(e,4),r=t[0],n=t[1],i=t[2],o=t[3];r/=255,n/=255,i/=255;var a=Math.max(r,n,i),s=Math.min(r,n,i),p=void 0,e=void 0,t=(a+s)/2;if(a===s)p=e=0;else{var c=a-s,e=.5<t?c/(2-a-s):c/(a+s);switch(a){case r:p=(n-i)/c+(n<i?6:0);break;case n:p=(i-r)/c+2;break;case i:p=(r-n)/c+4}p/=6}return[p,e,t,o]}},{key:"hslToRgb",value:function(e){var t=d(e,4),r=t[0],n=t[1],i=t[2],o=t[3],a=void 0,s=void 0,e=void 0;0===n?a=s=e=i:(a=(t=function(e,t,r){return r<0&&(r+=1),1<r&&--r,r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e})(n=2*i-(i=i<.5?i*(1+n):i+n-i*n),i,r+1/3),s=t(n,i,r),e=t(n,i,r-1/3));e=[255*a,255*s,255*e].map(Math.round);return e[3]=o,e}}]),h);function h(e,t,r,n){u(this,h);var i,o,a,s,p,c,l=this;void 0===e||(Array.isArray(e)?this.rgba=e:void 0===r?(i=e&&""+e)&&((o=i.toLowerCase()).startsWith("hsl")?(a=o.match(/([\-\d\.e]+)/g).map(Number),p=(s=d(a,4))[0],c=s[1],a=s[2],s=s[3],l.hsla=[p/=360,c/=100,a/=100,s=void 0===s?1:s]):o.startsWith("rgb")?(p=o.match(/([\-\d\.e]+)/g).map(Number),a=(c=d(p,4))[0],s=c[1],p=c[2],c=c[3],l.rgba=[a,s,p,c=void 0===c?1:c]):o.startsWith("#")?l.rgba=h.hexToRgb(o):l.rgba=h.nameToRgb(o)||h.hexToRgb(o)):this.rgba=[e,t,r,void 0===n?1:n])}var r=(e(a,[{key:"add",value:function(e,t,r){e.addEventListener(t,r,!1),this._events.push({target:e,type:t,handler:r})}},{key:"remove",value:function(r,n,i){this._events=this._events.filter(function(e){var t=!0;return r&&r!==e.target&&(t=!1),n&&n!==e.type&&(t=!1),(t=i&&i!==e.handler?!1:t)&&a._doRemove(e.target,e.type,e.handler),!t})}},{key:"destroy",value:function(){this._events.forEach(function(e){return a._doRemove(e.target,e.type,e.handler)}),this._events=[]}}],[{key:"_doRemove",value:function(e,t,r){e.removeEventListener(t,r,!1)}}]),a);function a(){u(this,a),this._events=[]}function s(e,o,a){var s=!1;function p(e,t,r){return Math.max(t,Math.min(e,r))}function r(e,t,r){var n,i;(s=r?!0:s)&&(e.preventDefault(),n=(i=o.getBoundingClientRect()).width,r=i.height,e=t.clientX,t=t.clientY,e=p(e-i.left,0,n),i=p(t-i.top,0,r),a(e/n,i/r))}function t(e,t){1===(void 0===e.buttons?e.which:e.buttons)?r(e,e,t):s=!1}function n(e,t){1===e.touches.length?r(e,e.touches[0],t):s=!1}e.add(o,"mousedown",function(e){t(e,!0)}),e.add(o,"touchstart",function(e){n(e,!0)}),e.add(window,"mousemove",t),e.add(o,"touchmove",n),e.add(window,"mouseup",function(e){s=!1}),e.add(o,"touchend",function(e){s=!1}),e.add(o,"touchcancel",function(e){s=!1})}var p="keydown",c="mousedown",l="focusin";function f(e,t){return(t||document).querySelector(e)}function g(e){e.preventDefault(),e.stopPropagation()}function b(e,t,r,n,i){e.add(t,p,function(e){0<=r.indexOf(e.key)&&(i&&g(e),n(e))})}var _=(e(m,[{key:"setOptions",value:function(e){var t,r,n,i=this;e&&(t=this.settings,e instanceof HTMLElement?t.parent=e:(t.parent&&e.parent&&t.parent!==e.parent&&(this._events.remove(t.parent),this._popupInited=!1),function(e,t,r){for(var n in e)r&&0<=r.indexOf(n)||(t[n]=e[n])}(e,t),e.onChange&&(this.onChange=e.onChange),e.onDone&&(this.onDone=e.onDone),e.onOpen&&(this.onOpen=e.onOpen),e.onClose&&(this.onClose=e.onClose),(n=e.color||e.colour)&&this._setColor(n)),(r=t.parent)&&t.popup&&!this._popupInited?(this._events.add(r,"click",n=function(e){return i.openHandler(e)}),b(this._events,r,[" ","Spacebar","Enter"],n),this._popupInited=!0):e.parent&&!t.popup&&this.show())}},{key:"openHandler",value:function(e){var t;this.show()&&(e&&e.preventDefault(),this.settings.parent.style.pointerEvents="none",t=e&&e.type===p?this._domEdit:this.domElement,setTimeout(function(){return t.focus()},100),this.onOpen&&this.onOpen(this.colour))}},{key:"closeHandler",value:function(e){var t,r=e&&e.type,n=!1;e?r===c||r===l?(t=(this.__containedEvent||0)+100,e.timeStamp>t&&(n=!0)):(g(e),n=!0):n=!0,n&&this.hide()&&(this.settings.parent.style.pointerEvents="",r!==c&&this.settings.parent.focus(),this.onClose&&this.onClose(this.colour))}},{key:"movePopup",value:function(e,t){this.closeHandler(),this.setOptions(e),t&&this.openHandler()}},{key:"setColor",value:function(e,t){this._setColor(e,{silent:t})}},{key:"_setColor",value:function(e,t){if(e="string"==typeof e?e.trim():e){t=t||{};var r=void 0;try{r=new o(e)}catch(e){if(t.failSilently)return;throw e}this.settings.alpha||((e=r.hsla)[3]=1,r.hsla=e),this.colour=this.color=r,this._setHSLA(null,null,null,null,t)}}},{key:"setColour",value:function(e,t){this.setColor(e,t)}},{key:"show",value:function(){if(!this.settings.parent)return!1;if(this.domElement){var e=this._toggleDOM(!0);return this._setPosition(),e}var t=this.settings.template||'<div class="picker_wrapper" tabindex="-1"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_editor"><input aria-label="Type a color name or hex value"/></div><div class="picker_sample"></div><div class="picker_done"><button>Ok</button></div><div class="picker_cancel"><button>Cancel</button></div></div>',r=(e=t,(t=document.createElement("div")).innerHTML=e,t.firstElementChild);return this.domElement=r,this._domH=f(".picker_hue",r),this._domSL=f(".picker_sl",r),this._domA=f(".picker_alpha",r),this._domEdit=f(".picker_editor input",r),this._domSample=f(".picker_sample",r),this._domOkay=f(".picker_done button",r),this._domCancel=f(".picker_cancel button",r),r.classList.add("layout_"+this.settings.layout),this.settings.alpha||r.classList.add("no_alpha"),this.settings.editor||r.classList.add("no_editor"),this.settings.cancelButton||r.classList.add("no_cancel"),this._ifPopup(function(){return r.classList.add("popup")}),this._setPosition(),this.colour?this._updateUI():this._setColor(this.settings.defaultColor),this._bindEvents(),!0}},{key:"hide",value:function(){return this._toggleDOM(!1)}},{key:"destroy",value:function(){this._events.destroy(),this.domElement&&this.settings.parent.removeChild(this.domElement)}},{key:"_bindEvents",value:function(){var r=this,n=this,i=this.domElement,o=this._events;function a(e,t,r){o.add(e,t,r)}a(i,"click",function(e){return e.preventDefault()}),s(o,this._domH,function(e,t){return n._setHSLA(e)}),s(o,this._domSL,function(e,t){return n._setHSLA(null,e,1-t)}),this.settings.alpha&&s(o,this._domA,function(e,t){return n._setHSLA(null,null,null,1-t)});var e=this._domEdit;a(e,"input",function(e){n._setColor(this.value,{fromEditor:!0,failSilently:!0})}),a(e,"focus",function(e){this.selectionStart===this.selectionEnd&&this.select()}),this._ifPopup(function(){function e(e){return r.closeHandler(e)}a(window,c,e),a(window,l,e),b(o,i,["Esc","Escape"],e);function t(e){r.__containedEvent=e.timeStamp}a(i,c,t),a(i,l,t),a(r._domCancel,"click",e)});e=function(e){r._ifPopup(function(){return r.closeHandler(e)}),r.onDone&&r.onDone(r.colour)};a(this._domOkay,"click",e),b(o,i,["Enter"],e)}},{key:"_setPosition",value:function(){var r=this.settings.parent,n=this.domElement;r!==n.parentNode&&r.appendChild(n),this._ifPopup(function(e){"static"===getComputedStyle(r).position&&(r.style.position="relative");var t=!0===e?"popup_right":"popup_"+e;["popup_top","popup_bottom","popup_left","popup_right"].forEach(function(e){e===t?n.classList.add(e):n.classList.remove(e)}),n.classList.add(t)})}},{key:"_setHSLA",value:function(e,t,r,n,i){i=i||{};var o=this.colour,a=o.hsla;[e,t,r,n].forEach(function(e,t){!e&&0!==e||(a[t]=e)}),o.hsla=a,this._updateUI(i),this.onChange&&!i.silent&&this.onChange(o)}},{key:"_updateUI",value:function(e){if(this.domElement){e=e||{};var t=this.colour,r=t.hsla,n="hsl("+360*r[0]+", 100%, 50%)",i=t.hslString,o=t.hslaString,a=this._domH,s=this._domSL,p=this._domA,c=f(".picker_selector",a),a=f(".picker_selector",s),p=f(".picker_selector",p);d(0,c,r[0]),this._domSL.style.backgroundColor=this._domH.style.color=n,d(0,a,r[1]),h(0,a,1-r[2]),s.style.color=i,h(0,p,1-r[3]);r=i,i=r.replace("hsl","hsla").replace(")",", 0)");if(this._domA.style.background="linear-gradient("+[r,i]+")"+", linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 2em 2em,\n                   linear-gradient(45deg, lightgrey 25%,       white 25%,       white 75%, lightgrey 75%) 1em 1em / 2em 2em",!e.fromEditor){var e=this.settings.editorFormat,l=this.settings.alpha,u=void 0;switch(e){case"rgb":u=t.printRGB(l);break;case"hsl":u=t.printHSL(l);break;default:u=t.printHex(l)}this._domEdit.value=u}this._domSample.style.color=o}function d(e,t,r){t.style.left=100*r+"%"}function h(e,t,r){t.style.top=100*r+"%"}}},{key:"_ifPopup",value:function(e,t){this.settings.parent&&this.settings.popup?e&&e(this.settings.popup):t&&t()}},{key:"_toggleDOM",value:function(e){var t=this.domElement;if(!t)return!1;var r=e?"":"none",e=t.style.display!==r;return e&&(t.style.display=r),e}}]),m);function m(e){u(this,m),this.settings={popup:"right",layout:"default",alpha:!0,editor:!0,editorFormat:"hex",cancelButton:!1,defaultColor:"#0cf"},this._events=new r,this.onChange=null,this.onDone=null,this.onOpen=null,this.onClose=null,this.setOptions(e)}e=document.createElement("style");return e.textContent='.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}',document.documentElement.firstElementChild.appendChild(e),_.StyleElement=e,_});
\ No newline at end of file

Title:	S/W version:	Boot Count:	Rdy/Bsy:
Model:	Platform:	Total Uptime:	Sleeping:
Serial:	Blue Pill Ready:	Session Uptime:	CPU:
Max Clients:		Screen Save On:
Connections:
Locked to IPs: