Added source code, MZ6500 module still not complete

webserver/js/140medley.min.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/140medley.min.js

webserver/js/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){}};

webserver/js/bootstrap.min.js.gz

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/bootstrap.min.js.gz

webserver/js/index.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/index.js

webserver/js/index.js

@@ -0,0 +1,66 @@
+function showIPConfig() 
+{
+    if(document.getElementById("wifiCfg0checked"))
+    {
+        document.getElementById("wifiCfg0checked").style.display = 'compact';
+        document.getElementById("wifiCfg").style.display = 'none';
+
+        if(document.getElementById("wifiCfg3checked"))
+        {
+          document.getElementById("wifiCfg3checked").style.display = 'compact';
+          document.getElementById("wifiCfg3").style.display = 'none';
+        } else
+        {
+          document.getElementById("wifiCfg3checked").style.display = 'none';
+          document.getElementById("wifiCfg3").style.display = 'compact';
+        }
+
+        if(document.getElementById("wifiCfg1checked"))
+        {
+          document.getElementById("wifiCfg1checked").style.display = 'compact';
+        } else
+        {
+          document.getElementById("wifiCfg1").style.display = 'none';
+        }
+    } else
+    {
+      document.getElementById("wifiCfg0").style.display = 'none';
+      document.getElementById("wifiCfgchecked").style.display = 'compact';
+    }
+}
+
+// Method to enable the correct side-bar menu for the underlying host interface.
+function enableIfConfig()
+{
+    // Disable keymap if no host is connected to the SharpKey. KeyInterface is the base class which exists when
+    // no host was detected to invoke a host specific sub-class.
+    if(activeInterface === "KeyInterface ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+    }
+    // Mouse interface active?
+    else if(activeInterface === "Mouse ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+        document.getElementById("mouseCfgAvailable").style.display = 'compact';
+    } else
+    {
+        document.getElementById("keyMapAvailable").style.display = 'compact';
+
+        // Secondary interface available?
+        if(secondaryInterface == "Mouse ")
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'compact';
+        } else
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'none';
+        }
+    }
+}
+
+// On document load, setup the items viewable on the page according to set values.
+document.addEventListener("DOMContentLoaded", function setPageDefaults()
+{
+    showIPConfig();
+    enableIfConfig();
+});

webserver/js/jquery.edittable.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/jquery.edittable.js

webserver/js/jquery.edittable.js

@@ -0,0 +1,340 @@
+/*! editTable v0.2.0 by Alessandro Benoit */
+(function ($, window, i) {
+
+    'use strict';
+
+    $.fn.editTable = function (options) {
+
+        // Settings
+        var s = $.extend({
+                data: [['']],
+                tableClass: 'inputtable',
+                jsonData: false,
+                headerCols: false,
+                maxRows: 999,
+                first_row: true,
+                row_template: false,
+                field_templates: false,
+                validate_field: function (col_id, value, col_type, $element) {
+                    return true;
+                }
+            }, options),
+            $el = $(this),
+            defaultTableContent = '<thead><tr></tr></thead><tbody></tbody>',
+            $table = $('<table/>', {
+                class: s.tableClass + ((s.first_row) ? ' wh' : ''),
+                html: defaultTableContent
+            }),
+            addRowCallBack = null,
+            defaultth = '<th><a class="addcol fa fa-plus" style="color: green" href="#"></a> <a class="delcol fa fa-minus" style="color: red" href="#"></a></th>',
+            colnumber,
+            rownumber,
+            reset,
+            is_validated = true;
+
+        // Increment for IDs
+        i = i + 1;
+
+        // Build cell
+        function buildCell(content, type) {
+            content = (content === 0) ? "0" : (content || '');
+            // Custom type
+            if (type && 'text' !== type){
+                var field = s.field_templates[type];
+                return '<td>' + field.setValue(field.html, content)[0].outerHTML + '</td>';
+            }
+            // Default
+            return '<td><input type="text" value="' + content.toString().replace(/"/g, "&quot;") + '" /></td>';
+        }
+
+        // Build row
+        function buildRow(data, len) {
+
+            var rowcontent = '', b;
+
+            data = data || '';
+
+            if (!s.row_template) {
+                // Without row template
+                for (b = 0; b < (len || data.length); b += 1) {
+                    rowcontent += buildCell(data[b]);
+                }
+            } else {
+                // With row template
+                for (b = 0; b < s.row_template.length; b += 1) {
+                    // For each field in the row
+                    rowcontent += buildCell(data[b], s.row_template[b]);
+                }
+            }
+
+            return $('<tr/>', {
+                html: rowcontent + '<td> <a class="addrow fa fa-plus" style="color: green" href="#"></a> / <a class="delrow fa fa-minus" style="color: red" href="#"></a></td>'
+            });
+
+        }
+
+        // Check button status (enable/disabled)
+        function checkButtons() {
+            if (colnumber < 2) {
+                $table.find('.delcol').addClass('disabled');
+            }
+            if (rownumber < 2) {
+                $table.find('.delrow').addClass('disabled');
+            }
+            if (s.maxRows && rownumber === s.maxRows) {
+                $table.find('.addrow').addClass('disabled');
+            }
+        }
+
+        // Extension method to change or set the table header. This method should be called before fillTableData.
+        function setTableHeader(header) {
+            s.headerCols = header;
+        }
+
+        // Extension method to change or set the table column types. This method should be called before fillTableData.
+        function setTableType(types) {
+            s.row_template = types;
+        }
+
+        // Fill table with data
+        function fillTableData(data) {
+
+            var a, crow = Math.min(s.maxRows, data.length);
+
+            // Clear table
+            $table.html(defaultTableContent);
+
+            // If headers or row_template are set
+            if (s.headerCols || s.row_template) {
+
+                // Fixed columns
+                var col = s.headerCols || s.row_template;
+
+                // Table headers
+                for (a = 0; a < col.length; a += 1) {
+                    var col_title = s.headerCols[a] || '';
+                    $table.find('thead tr').append('<th>' + col_title + '</th>');
+                }
+                $table.find('thead tr').append('<th><span class="fa fa-table"></span></th>');
+
+                // Table content
+                for (a = 0; a < crow; a += 1) {
+                    // For each row in data
+                    buildRow(data[a], col.length).appendTo($table.find('tbody'));
+                }
+
+            } else if ( data[0] ) {
+
+                // Variable columns
+                for (a = 0; a < data[0].length; a += 1) {
+                    $table.find('thead tr').append(defaultth);
+                }
+
+                for (a = 0; a < crow; a += 1) {
+                    buildRow(data[a]).appendTo($table.find('tbody'));
+                }
+
+            }
+
+            // Append missing th
+            //$table.find('thead tr').append('<th></th>');
+
+            // Count rows and columns
+            colnumber = $table.find('thead th').length - 1;
+            rownumber = $table.find('tbody tr').length;
+
+            checkButtons();
+        }
+
+        // Export data
+        function exportData() {
+            var row = 0, data = [], value;
+
+            is_validated = true;
+
+            $table.find('tbody tr').each(function () {
+
+                row += 1;
+                data[row] = [];
+
+                $(this).find('td:not(:last-child)').each(function (i, v) {
+                    if ( s.row_template && 'text' !== s.row_template[i] ){
+                        var field = s.field_templates[s.row_template[i]],
+                            el = $(this).find($(field.html).prop('tagName'));
+                        
+                        value = field.getValue(el);
+                        if ( !s.validate_field(i, value, s.row_template[i], el) ){
+                            is_validated = false;
+                        }
+                        data[row].push(value);
+                    } else {
+                        value = $(this).find('input[type="text"]').val();
+                        if ( !s.validate_field(i, value, 'text', v) ){
+                            is_validated = false;
+                        }
+                        data[row].push(value);
+                    }
+                });
+                
+            });
+
+            // Remove undefined
+            data.splice(0, 1);
+
+            return data;
+        }
+
+        // Fill the table with data from textarea or given properties
+        if ($el.is('textarea')) {
+
+            try {
+                reset = JSON.parse($el.val());
+            } catch (e) {
+                reset = s.data;
+            }
+
+            $el.after($table);
+
+            // If inside a form set the textarea content on submit
+            if ($table.parents('form').length > 0) {
+                $table.parents('form').submit(function () {
+                    $el.val(JSON.stringify(exportData()));
+                });
+            }
+
+        } else {
+            reset = (JSON.parse(s.jsonData) || s.data);
+            $el.append($table);
+        }
+
+        fillTableData(reset);
+
+        // Add column
+        $table.on('click', '.addcol', function () {
+
+            var colid = parseInt($(this).closest('tr').children().index($(this).parent('th')), 10);
+
+            colnumber += 1;
+
+            $table.find('thead tr').find('th:eq(' + colid + ')').after(defaultth);
+
+            $table.find('tbody tr').each(function () {
+                $(this).find('td:eq(' + colid + ')').after(buildCell());
+            });
+
+            $table.find('.delcol').removeClass('disabled');
+
+            return false;
+        });
+
+        // Remove column
+        $table.on('click', '.delcol', function () {
+
+            if ($(this).hasClass('disabled')) {
+                return false;
+            }
+
+            var colid = parseInt($(this).closest('tr').children().index($(this).parent('th')), 10);
+
+            colnumber -= 1;
+
+            checkButtons();
+
+            $(this).parent('th').remove();
+
+            $table.find('tbody tr').each(function () {
+                $(this).find('td:eq(' + colid + ')').remove();
+            });
+
+            return false;
+        });
+
+        // Add row
+        $table.on('click', '.addrow', function () {
+
+            if ($(this).hasClass('disabled')) {
+                return false;
+            }
+
+            rownumber += 1;
+
+            $(this).closest('tr').after(buildRow(0, colnumber));
+
+            $table.find('.delrow').removeClass('disabled');
+
+            checkButtons();
+
+            // Addition, raise callback after row has been added.
+            if(addRowCallBack)
+            {
+                addRowCallBack(rownumber, $(this).closest('tr').next('tr'), $table);
+            }
+
+            return false;
+        });
+
+        // Delete row
+        $table.on('click', '.delrow', function () {
+
+            if ($(this).hasClass('disabled')) {
+                return false;
+            }
+
+            rownumber -= 1;
+
+            checkButtons();
+
+            $(this).closest('tr').remove();
+
+            $table.find('.addrow').removeClass('disabled');
+
+            return false;
+        });
+
+        // Select all content on click
+        $table.on('click', 'input', function () {
+            $(this).select();
+        });
+
+        // Return functions
+        return {
+            // Get an array of data
+            getData: function () {
+                return exportData();
+            },
+            // Get the JSON rappresentation of data
+            getJsonData: function () {
+                return JSON.stringify(exportData());
+            },
+            // Load an array of data
+            loadData: function (data) {
+                reset = data;
+                fillTableData(data);
+            },
+            // Load a JSON rappresentation of data
+            loadJsonData: function (data) {
+                reset = JSON.parse(data);
+                fillTableData(JSON.parse(data));
+            },
+            // Extension method to change or set the table header. This method should be called before fillTableData.
+            setHeaders: function (headers) {
+                setTableHeader(headers);
+            },
+            // Extension method to change or set the table column types. This method should be called before fillTableData.
+            setTypes: function (types) {
+                setTableType(types);
+            },
+            // Reset data to the first instance
+            reset: function () {
+                fillTableData(reset);
+            },
+            isValidated: function () {
+                return is_validated;
+            },
+            addRowCallBack: function (func) {
+                addRowCallBack = func;
+            }
+        };
+    };
+
+})(jQuery, this, 0);

webserver/js/jquery.edittable.min.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/jquery.edittable.min.js

webserver/js/jquery.edittable.min.js

@@ -0,0 +1,2 @@
+/*! editTable v0.2.0 by Alessandro Benoit */
+(function(e,t,n){"use strict";e.fn.editTable=function(t){function p(e,t){e=e===0?"0":e||"";if(t&&"text"!==t){var n=r.field_templates[t];return"<td>"+n.setValue(n.html,e)[0].outerHTML+"</td>"}return'<td><input type="text" value="'+e.toString().replace(/"/g,"&quot;")+'" /></td>'}function d(t,n){var i="",s;t=t||"";if(!r.row_template){for(s=0;s<(n||t.length);s+=1){i+=p(t[s])}}else{for(s=0;s<r.row_template.length;s+=1){i+=p(t[s],r.row_template[s])}}return e("<tr/>",{html:i+'<td><a class="addrow icon-button" href="#">+</a> <a class="delrow icon-button" href="#">-</a></td>'})}function v(){if(f<2){u.find(".delcol").addClass("disabled")}if(l<2){u.find(".delrow").addClass("disabled")}if(r.maxRows&&l===r.maxRows){u.find(".addrow").addClass("disabled")}}function m(e){var t,n=Math.min(r.maxRows,e.length);u.html(o);if(r.headerCols||r.row_template){var i=r.headerCols||r.row_template;for(t=0;t<i.length;t+=1){var s=r.headerCols[t]||"";u.find("thead tr").append("<th>"+s+"</th>")}for(t=0;t<n;t+=1){d(e[t],i.length).appendTo(u.find("tbody"))}}else if(e[0]){for(t=0;t<e[0].length;t+=1){u.find("thead tr").append(a)}for(t=0;t<n;t+=1){d(e[t]).appendTo(u.find("tbody"))}}u.find("thead tr").append("<th></th>");f=u.find("thead th").length-1;l=u.find("tbody tr").length;v()}function g(){var t=0,n=[],i;h=true;u.find("tbody tr").each(function(){t+=1;n[t]=[];e(this).find("td:not(:last-child)").each(function(s,o){if(r.row_template&&"text"!==r.row_template[s]){var u=r.field_templates[r.row_template[s]],a=e(this).find(e(u.html).prop("tagName"));i=u.getValue(a);if(!r.validate_field(s,i,r.row_template[s],a)){h=false}n[t].push(i)}else{i=e(this).find('input[type="text"]').val();if(!r.validate_field(s,i,"text",o)){h=false}n[t].push(i)}})});n.splice(0,1);return n}var r=e.extend({data:[[""]],tableClass:"inputtable",jsonData:false,headerCols:false,maxRows:999,first_row:true,row_template:false,field_templates:false,validate_field:function(e,t,n,r){return true}},t),s=e(this),o="<thead><tr></tr></thead><tbody></tbody>",u=e("<table/>",{"class":r.tableClass+(r.first_row?" wh":""),html:o}),a='<th><a class="addcol icon-button" href="#">+</a> <a class="delcol icon-button" href="#">-</a></th>',f,l,c,h=true;n=n+1;if(s.is("textarea")){try{c=JSON.parse(s.val())}catch(y){c=r.data}s.after(u);if(u.parents("form").length>0){u.parents("form").submit(function(){s.val(JSON.stringify(g()))})}}else{c=JSON.parse(r.jsonData)||r.data;s.append(u)}m(c);u.on("click",".addcol",function(){var t=parseInt(e(this).closest("tr").children().index(e(this).parent("th")),10);f+=1;u.find("thead tr").find("th:eq("+t+")").after(a);u.find("tbody tr").each(function(){e(this).find("td:eq("+t+")").after(p())});u.find(".delcol").removeClass("disabled");return false});u.on("click",".delcol",function(){if(e(this).hasClass("disabled")){return false}var t=parseInt(e(this).closest("tr").children().index(e(this).parent("th")),10);f-=1;v();e(this).parent("th").remove();u.find("tbody tr").each(function(){e(this).find("td:eq("+t+")").remove()});return false});u.on("click",".addrow",function(){if(e(this).hasClass("disabled")){return false}l+=1;e(this).closest("tr").after(d(0,f));u.find(".delrow").removeClass("disabled");v();return false});u.on("click",".delrow",function(){if(e(this).hasClass("disabled")){return false}l-=1;v();e(this).closest("tr").remove();u.find(".addrow").removeClass("disabled");return false});u.on("click","input",function(){e(this).select()});return{getData:function(){return g()},getJsonData:function(){return JSON.stringify(g())},loadData:function(e){m(e)},loadJsonData:function(e){m(JSON.parse(e))},reset:function(){m(c)},isValidated:function(){return h}}}})(jQuery,this,0)

webserver/js/jquery.min.js.gz

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/jquery.min.js.gz

webserver/js/js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js

webserver/js/keymap.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/keymap.js

webserver/js/keymap.js

@@ -0,0 +1,653 @@
+// Method to display a message in a message field. The existing html is saved and replaced
+// with the new html. After a timeout period the original html is restored.
+//
+$origMessage = null;
+$origId = null;
+$msgTimerId = null;
+function showMessage(timeout, id, message)
+{
+    // Is this a new message whilst one is active?
+    if($origMessage !== null)
+    {
+        // Cancel timer and restore original message.
+        clearTimeout($msgTimerId);
+        $('#' + $origId).html($origMessage);
+    }
+
+    // Store original message and Id so that on timer expiry it can be replaced..
+    $origMessage = $('#' + id).html();
+    $origId = id;
+
+    // Change HTML and set timer to restore it.
+    $('#' + id).html(message);
+    $msgTimerId = setTimeout(function(msgFieldId) 
+               {
+                    $('#' + msgFieldId).html($origMessage);
+                    $origMessage = null;
+               }, timeout, id);
+}
+
+// Ajax download function, from user:leo on stackexchange, customised for this application.
+//
+function downloadFile()
+{
+    var req = new XMLHttpRequest();
+    var downloadUrl = "/keymap";
+    req.open("GET", downloadUrl, true);
+    req.responseType = "blob";
+    
+    req.onload = function (event)
+    {
+        var blob = req.response;
+        var fileName = null;
+        var contentType = req.getResponseHeader("content-type");
+    
+        // IE/EDGE seems not returning some response header
+        if (req.getResponseHeader("content-disposition")) 
+        {
+            var contentDisposition = req.getResponseHeader("content-disposition");
+            fileName = contentDisposition.substring(contentDisposition.indexOf("=")+1);
+        } else 
+        {
+            fileName = "unnamed." + contentType.substring(contentType.indexOf("/")+1);
+        }
+      
+        if (window.navigator.msSaveOrOpenBlob)
+        {
+            // Internet Explorer
+            window.navigator.msSaveOrOpenBlob(new Blob([blob], {type: contentType}), fileName);
+        } else 
+        {
+            var el = document.getElementById("keymapDownloadLink");
+            el.href = window.URL.createObjectURL(blob);
+            el.download = fileName;
+            el.click();
+        }
+    };
+    showMessage(1000, 'keymapMsg', "<p style=\"color:orange;\">Downloading keymap file, please wait...</p>");
+    req.send();
+}
+
+// Listener for the Download button click. Once clicked commence download via ajax function.
+//
+document.getElementById('keymapDownload').onclick = function keymapFileDownload(e)
+{
+    downloadFile();
+}
+
+
+// Listener for an event change on the INPUT file tag 'keymapUpload'. Once pressed and a filename available, this method
+// commences transmission via a POST method to the SharpKey server.
+document.getElementById('keymapUpload').onchange = function keymapFileUpload(e)
+{
+    var fileInput = document.getElementById("keymapUpload").files;
+
+    // Reset the last status. Used to track state change.
+    lastStatus = 0;
+
+    // Client side checks, no point initiating an upload if the file isnt valid!
+    if (fileInput.length == 0)
+    {
+        alert("No file selected!");
+
+    // Sane size check, a keymap entry is 6-12 bytes long, so a 1000 rows should be the max size.
+    } else if (fileInput[0].size > 12*1024)
+    {
+        alert("File size must be less than 12KB!");
+    } else 
+    {
+        var xhttp;
+        if(window.XMLHttpRequest)
+        {
+            xhttp = new XMLHttpRequest();
+        } else
+         {
+            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+
+        // Install listeners to handle state change.
+        xhttp.onreadystatechange = function() 
+        {
+            if (xhttp.readyState == 4) 
+            {
+                lastStatus = xhttp.status;
+                if (xhttp.status == 200) 
+                {
+                    showMessage(5000, 'keymapMsg', "<p style=\"color:green;\">Upload complete. Please press <b>Reboot</b> to activate new key map.</p>");
+                } else if (xhttp.status == 500) 
+                {
+                    showMessage(5000, 'keymapMsg', "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>");
+                }
+                else if (xhttp.status == 0) 
+                {
+                    showMessage(5000, 'keymapMsg', "<p style=\"color:red;\">Error: Server closed the connection abrubtly, status unknown! - Please retry or press Reboot</p>");
+                } else 
+                {
+                    showMessage(5000, 'keymapMsg', "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>");
+                }
+            }
+        };
+        showMessage(10000, 'keymapMsg', "<p style=\"color:orange;\">Uploading keymap file, please wait...</p>");
+        xhttp.open("POST", "/keymap", true);
+        xhttp.send(fileInput[0]);
+    }
+}
+
+
+// Method to enable the correct side-bar menu for the underlying host interface.
+function enableIfConfig()
+{
+    // Disable keymap if no host is connected to the SharpKey. KeyInterface is the base class which exists when
+    // no host was detected to invoke a host specific sub-class.
+    if(activeInterface === "KeyInterface ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+    }
+    // Mouse interface active?
+    else if(activeInterface === "Mouse ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+        document.getElementById("mouseCfgAvailable").style.display = 'compact';
+    } else
+    {
+        document.getElementById("keyMapAvailable").style.display = 'compact';
+
+        // Secondary interface available?
+        if(secondaryInterface == "Mouse ")
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'compact';
+        } else
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'none';
+        }
+    }
+}
+
+// Method to validate a hex input field. Basically call hexConvert and it will return a
+// valid number, 0 if invalid or 255 if out of range.
+function validateHexInput(event) 
+{
+    event.target.value=hexConvert(event.target.value, false);
+    return true;
+};
+
+// Use variables to remember last popover and value as the popover mechanism, probably due to race states, isnt uniform.
+// Also use the shown/hidden events and toggle as hide doesnt trigger reliably.
+var $currentPopover = null;
+var $currentPopoverVal = -1;
+var $currentClass = null;
+var $currentSelectCount = 0;
+var $currentTimerId = null;
+var $currentDataSetModified = false;
+
+function updateButtons()
+{
+    if($currentSelectCount == 2)
+    {
+        $('#keymapSwap').removeAttr('disabled');
+    } else
+    {
+        $('#keymapSwap').attr('disabled', 'disabled');
+    }
+    if($currentSelectCount > 0)
+    {
+        $('#keymapDelete').removeAttr('disabled');
+    } else
+    {
+        $('#keymapDelete').attr('disabled', 'disabled');
+    }
+    if($currentDataSetModified == true)
+    {
+        $('#keymapSave').removeAttr('disabled');
+        $('#keymapReload').removeAttr('disabled');
+    } else
+    {
+        $('#keymapSave').attr('disabled', 'disabled');
+        $('#keymapReload').attr('disabled', 'disabled');
+    }
+}
+
+function addPopover(field, tableRow)
+{
+
+    // Popover auto-hide timer alarm.
+    const popoverAlarm = {
+
+        setup: function(timerId, timeout) {
+            if (timerId != null) {
+                timerId = this.cancel(timerId);
+            }
+
+            timerId = setTimeout(function() {
+
+               if($currentPopover) {
+                 $currentPopover.popover('toggle');
+               }
+            }, timeout);
+
+            return(timerId);
+        },
+
+        cancel: function(timerId) {
+            clearTimeout(timerId);
+            timerId = null;
+            return(timerId);
+        },
+    };
+
+    // Setup popover menus on each custom field to aid with conversion of a feature into a hex number.
+    $(field).popover({
+                        html: true,
+                        title: function () {
+   
+                            return $('#popover-' + field.className).find('.head').html();
+                        },
+                        content: function () {
+                            return $('#popover-' + field.className).find('.content').html();
+                        }
+           })
+           .on("show.bs.popover", function(e)
+           {
+               var className = this.getAttribute('class');
+               var $target = $(e.target);
+
+               // Detect a class change, user has gone from one column to another, need to close out current
+               // popover ready for initialisation of new.
+               if($currentClass != null && $currentClass != className)
+               {
+                   if($currentPopover)
+                   {
+                       if($currentTimerId != 0)
+                       {
+                           $currentTimerId = popoverAlarm.cancel($currentTimerId);
+                       }
+
+                       if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) {
+                           $currentPopover.popover('toggle');
+                       }
+                       $currentPopover = null;
+                   }
+               }
+               $currentClass = className;
+
+               if($currentPopover)
+               {
+                   $currentPopoverVal = 0;
+                   $('#popover-' + field.className).find('input').each( function( index ) {
+
+                       if($(this).attr("checked") === "checked")
+                       {
+                           $currentPopoverVal += parseInt(this.getAttribute('data-value'), 10);
+                       }
+                   });
+               } else
+               {
+                   $currentPopoverVal = -1;
+               }
+
+               // Go through all the checkboxes and setup the initial value.
+               $('#popover-' + field.className).find('input').each( function( index ) {
+                   if((e.target.value & this.getAttribute('data-value')) == this.getAttribute('data-value'))
+                   {
+                       $(this).attr('checked', true);
+                   } else
+                   {
+                       $(this).attr('checked', false);
+                   }
+               });
+           })
+           .on("shown.bs.popover", function(e)
+           {
+               var $target = $(e.target);
+
+               if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) {
+                 $currentPopover.popover('toggle');
+               }
+               $currentPopover = $target;
+               
+               // Setup an alarm to remove a visible popover if not clicked closed.    
+               $currentTimerId = popoverAlarm.setup($currentTimerId, 5000);
+           })
+           .on("hidden.bs.popover", function(e)
+           {
+               var $target = $(e.target);
+
+               if ($currentPopover && ($currentPopover.get(0) == $target.get(0))) {
+                 if($currentPopoverVal == -1)
+                 {
+                     $currentPopoverVal = 0;
+                     $('#popover-' + field.className).find('input').each( function( index ) {
+
+                         if($(this).attr("checked") === "checked")
+                         {
+                             $currentPopoverVal += parseInt(this.getAttribute('data-value'), 10);
+                         }
+                     });
+                 }
+
+                 if(e.target.value != hexConvert($currentPopoverVal, false))
+                 {
+                     e.target.value = hexConvert($currentPopoverVal, false);
+                     $currentDataSetModified = true;
+                     updateButtons();
+                 }
+                 $currentPopover = null;
+                 // Cancel the alarm on the hidden popover.
+                 $currentTimerId = popoverAlarm.cancel($currentTimerId);
+               }
+               $currentPopoverVal = -1;
+           })
+
+           .on("hide.bs.popover", function(e)
+           {
+             //  $currentTimerId = popoverAlarm.cancel($currentTimerId);
+           })
+           .on("click", function(e)
+           {
+               console.log('click: ' + e.target.value);
+           })
+           .on("change", function(e)
+           {
+               if(e.target.className === 'checkbox')
+               {
+                   if($(e.target).attr('checked') == 'checked')
+                   {
+                       $currentSelectCount += 1;
+                       //$(e.target).attr("checked", true);
+                   }
+                   else if($(e.target).attr('checked') != 'checked')
+                   {
+                       $currentSelectCount -= 1;
+                       //$(e.target).attr("checked", false);
+                   }
+               } else
+               {
+                   if(e.target.value != hexConvert($currentPopoverVal, false))
+                   {
+                       e.target.value = hexConvert(e.target.value, false);
+                       $currentDataSetModified = true;
+                   }
+               }
+               updateButtons();
+           })
+
+           .blur(function () {
+           });
+    // End popover definition
+    
+    // Only attach popover handlers to classes in the first row, subsequent rows will use the same popover.
+    //
+    if(tableRow == 1)
+    {
+        var search = '#popover-' + field.className;
+        $(search + ' input').each(function () {
+
+            $('body').on('click', '#' + this.id, function(e) {
+
+                $currentTimerId = popoverAlarm.setup($currentTimerId, 5000);
+
+                $(search + ' input').each(function() {
+                    if(this.id === e.target.id)
+                    {
+                        $(this).attr("checked", e.target.checked ? true : false);
+                    }
+                });
+            });
+        });
+    }
+}
+
+// Method to convert a string/numeric into a hex number and range check it to be within and 8bit unsigned range.
+function hexConvert(inVal, invert)
+{
+    if(isNaN(inVal) == true && isNaN('0x' + inVal) == false)
+    {
+        inVal = parseInt(inVal, 16);
+    }
+    else if(isNaN(inVal) == false && typeof inVal == 'string' && inVal.length > 0)
+    {
+        if(inVal.toUpperCase().indexOf("0X") == 0)
+        {
+            inVal = parseInt(inVal, 16);
+        } else
+        {
+            inVal = parseInt(inVal, 10);
+        }
+    }
+    else if(isNaN(inVal) == true || inVal.length == 0)
+    {
+        inVal = 0;
+    }
+    if(inVal < 0)
+    {
+        inVal = 0;
+    }
+    else if(inVal > 255)
+    {
+        inVal = 255;
+    }
+    if(invert == true)
+    {
+        inVal = (~inVal) & 0xFF;
+    }
+    return('0x' + (inVal).toString(16).toUpperCase());
+}
+
+// Method to swap 2 tables rows. This is necessary as the keymap table has top down priority in mapping.
+function swapKeyMapData()
+{
+    // Locals.
+    var firstRow = null;
+    var secondRow = null;
+
+    // Get row numbers of the rows to be swapped.
+    var rowcnt = 1;
+    $('.inputtable tr .checkbox').each(function() {
+        if(firstRow == null && this.checked == true)
+        {
+            firstRow = rowcnt;
+        } else
+        if(firstRow != null && secondRow == null && this.checked == true)
+        {
+            secondRow = rowcnt;
+        }
+        rowcnt++;
+    });
+
+    // If rows were matched (should be due to count) then perform swap.
+    if(firstRow != null && secondRow != null)
+    {
+        $('.inputtable > tbody > tr:nth-child(' + firstRow + ')').replaceWith($('.inputtable > tbody > tr:nth-child(' + secondRow + ')').after($('.inputtable > tbody > tr:nth-child(' + firstRow + ')').clone(true)));
+    }
+   
+    // Update the modified state and update button state.
+    $currentDataSetModified = true;
+    updateButtons();
+
+    return true;
+}
+
+// Method to delete 1 or multiple rows. An individual row can be deleted by the +/- buttons but multiple requires selection and then running through the table, deleting the selected rows.
+function deleteKeyMapData()
+{
+    // Locals.
+    var toDeleteRows = [];
+
+    // Get row numbers of the rows to be swapped.
+    var rowcnt = 1;
+    $('.inputtable tr .checkbox').each(function() {
+        if(this.checked == true)
+        {
+            toDeleteRows.push(rowcnt);
+        } 
+        rowcnt++;
+    });
+
+    // Iterate through the array of rows to delete and actually perform the deletion.
+    // We work in reverse order, ie. deleting the last row first due to the index changing if we delete first to last.
+    for(var idx = toDeleteRows.length; idx > 0; idx--)
+    {
+        $('.inputtable > tbody > tr:nth-child(' + toDeleteRows[idx-1] + ')').remove();
+    }
+
+    // Reset the select counter and update button state.
+    $currentSelectCount = 0;
+    $currentDataSetModified = true;
+    updateButtons();
+
+    return true;
+}
+
+// Method to save the current keymap table data to the interface.
+function saveKeyMapData()
+{
+    var data = keymapTable.getData();
+
+    // Reset the last status. Used to track state change.
+    lastStatus = 0;
+
+    // Client side checks, no point initiating an upload if the file isnt valid!
+    if(data.length == 0)
+    {
+        alert("No data to save!!");
+
+    } else 
+    {
+        var xhttp;
+        if(window.XMLHttpRequest)
+        {
+            xhttp = new XMLHttpRequest();
+        } else
+         {
+            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+
+        // Install listeners to handle state change.
+        xhttp.onreadystatechange = function() 
+        {
+            if (xhttp.readyState == 4) 
+            {
+                lastStatus = xhttp.status;
+                if (xhttp.status == 200) 
+                {
+                    showMessage(5000, 'keymapEditorMsg', "<p style=\"color:green;\">Upload complete. Please press <b>Reboot</b> to activate new key map.</p>");
+                   
+                    // Reset the data modified flag and update button state.
+                    $currentDataSetModified = false;
+                    updateButtons();
+                } else if (xhttp.status == 500) 
+                {
+                    showMessage(5000, 'keymapEditorMsg', "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>");
+                }
+                else if (xhttp.status == 0) 
+                {
+                    showMessage(5000, 'keymapEditorMsg', "<p style=\"color:red;\">Error: Server closed the connection abrubtly, status unknown! - Please retry Save</p>");
+                } else 
+                {
+                    showMessage(5000, 'keymapEditorMsg', "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>");
+                }
+            }
+        };
+        showMessage(5000, 'keymapEditorMsg', "<p style=\"color:orange;\">Uploading keymap data, please wait...</p>");
+        xhttp.open("POST", "/keymap/table", true);
+        xhttp.send(JSON.stringify(data));
+    }
+   
+    return true;
+}
+
+// Method to reload the initial table data set.
+function reloadKeyMapData()
+{
+    // Request reload of the initial data.
+    keymapTable.reset();
+
+    // Re-install the listeners as the old dataset was deleted.
+    setupTableListeners();
+
+    // Complete message.
+    showMessage(5000, 'keymapEditorMsg', "<p style=\"color:green;\">Reload complete, data reset to initial values.</p>");
+    
+    // Reset the select counter and update button state.
+    $currentSelectCount = 0;
+    $currentDataSetModified = false;
+    updateButtons();
+    return true;
+}
+
+// Callback function triggered after a row has been added to the edittable. Use the event to add popover listeners to the new fields.
+//
+function tableRowAdded(row, rowHandle, tableHandle)
+{
+    $(rowHandle).children().children().each(function() {
+        if(this.className !== "")
+        {
+            addPopover(this, 0);
+        }
+    });
+}
+
+// Method to install listeners on the table data for popover aids.
+//
+function setupTableListeners()
+{
+    // Setup a popover on each input field where a modal exists. 
+    $('.inputtable >tbody > tr').each(function (tridx) {
+
+        // We seperate out the Row from the input as we want to watch every input but only setup 1 popover per input type.
+        $(this).find('input').each(function (inpidx) {
+            if(this.className !== "")
+            {
+                addPopover(this, tridx);
+            }
+        });
+    });
+    //
+    // Setup a callback on new rows added to table.
+    keymapTable.addRowCallBack(tableRowAdded);
+}
+
+$(document).ready(function() {
+
+    // Load up the table headers, types and data. This is done with JQuery fetch as it is easier. The SharpKey is synchronous
+    // but fetch order can vary so we nest the requests to ensure all headers and types are in place before the data.
+    fetch('/data/keymap/table/headers')
+      .then((response) => {
+          return(response.json());
+      })
+      .then((headers) => {
+          keymapTable.setHeaders(headers);
+
+          fetch('/data/keymap/table/types')
+            .then((response) => {
+                return(response.json());
+            })
+            .then((types) => {
+                keymapTable.setTypes(types);
+
+                fetch('/data/keymap/table/data')
+                  .then((response) => {
+                      return(response.json());
+                  })
+                  .then((data) => {
+                      keymapTable.loadData(data);
+                      setupTableListeners();
+                  });
+            });
+      });
+
+    // Disable buttons, enabled when user action requires them.
+    $('#keymapSwap').attr('disabled', 'disabled');
+    $('#keymapDelete').attr('disabled', 'disabled');
+    $('#keymapSave').attr('disabled', 'disabled');
+    $('#keymapReload').attr('disabled', 'disabled');
+
+    // Add listeners to the buttons.
+    $('#keymapSwap').on('click', function() { swapKeyMapData(); });
+    $('#keymapDelete').on('click', function() { deleteKeyMapData(); });
+    $('#keymapSave').on('click', function() { saveKeyMapData(); });
+    $('#keymapReload').on('click', function() { reloadKeyMapData(); });
+   
+    // Setup the menu options according to underlying interface.
+    enableIfConfig();
+});

webserver/js/mouse.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/mouse.js

webserver/js/mouse.js

@@ -0,0 +1,141 @@
+// Method to display a message in a message field. The existing html is saved and replaced
+// with the new html. After a timeout period the original html is restored.
+//
+$origMessage = null;
+$origId = null;
+$msgTimerId = null;
+function showMessage(timeout, id, message)
+{
+    // Is this a new message whilst one is active?
+    if($origMessage !== null)
+    {
+        // Cancel timer and restore original message.
+        clearTimeout($msgTimerId);
+        $('#' + $origId).html($origMessage);
+    }
+
+    // Store original message and Id so that on timer expiry it can be replaced..
+    $origMessage = $('#' + id).html();
+    $origId = id;
+
+    // Change HTML and set timer to restore it.
+    $('#' + id).html(message);
+    $msgTimerId = setTimeout(function(msgFieldId) 
+               {
+                    $('#' + msgFieldId).html($origMessage);
+                    $origMessage = null;
+               }, timeout, id);
+}
+
+// Method to enable the correct side-bar menu for the underlying host interface.
+function enableIfConfig()
+{
+    // Disable keymap if no host is connected to the SharpKey. KeyInterface is the base class which exists when
+    // no host was detected to invoke a host specific sub-class.
+    if(activeInterface === "KeyInterface ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+    }
+    // Mouse interface active?
+    else if(activeInterface === "Mouse ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+        document.getElementById("mouseCfgAvailable").style.display = 'compact';
+    } else
+    {
+        document.getElementById("keyMapAvailable").style.display = 'compact';
+
+        // Secondary interface available?
+        if(secondaryInterface == "Mouse ")
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'compact';
+        } else
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'none';
+        }
+    }
+}
+
+// Method to convert a string/numeric into a hex number and range check it to be within and 8bit unsigned range.
+function hexConvert(inVal, invert)
+{
+    if(isNaN(inVal) == true && isNaN('0x' + inVal) == false)
+    {
+        inVal = parseInt(inVal, 16);
+    }
+    else if(isNaN(inVal) == false && typeof inVal == 'string' && inVal.length > 0)
+    {
+        if(inVal.toUpperCase().indexOf("0X") == 0)
+        {
+            inVal = parseInt(inVal, 16);
+        } else
+        {
+            inVal = parseInt(inVal, 10);
+        }
+    }
+    else if(isNaN(inVal) == true || inVal.length == 0)
+    {
+        inVal = 0;
+    }
+    if(inVal < 0)
+    {
+        inVal = 0;
+    }
+    else if(inVal > 255)
+    {
+        inVal = 255;
+    }
+    if(invert == true)
+    {
+        inVal = (~inVal) & 0xFF;
+    }
+    return('0x' + (inVal).toString(16).toUpperCase());
+}
+
+$(document).ready(function() {
+
+    // Setup the menu options according to underlying interface.
+    enableIfConfig();
+
+    // AJAX code to post in a controlled manner so that we can receive back an error/success message to the commit.
+    $("#mouseHostCfgSave").submit( function(e)
+    {
+        var form = $(this);
+        var actionUrl = form.attr('action');
+
+        // Prevent default submit action, we want to manually submit and be able to receive a response for errors/success.
+        e.preventDefault();
+        
+        $.ajax(
+        {
+            type: "POST",
+            url: actionUrl,
+            data: form.serialize(), // serializes the form's elements.
+            success: function(data)
+                     {
+                         // Show the message then revert back to original text.
+                         showMessage(10000, "mouseHostCfgMsg", data);
+                     }
+         });
+    });
+    $("#mousePS2CfgSave").submit( function(e)
+    {
+        var form = $(this);
+        var actionUrl = form.attr('action');
+
+        // Prevent default submit action, we want to manually submit and be able to receive a response for errors/success.
+        e.preventDefault();
+        
+        $.ajax(
+        {
+            type: "POST",
+            url: actionUrl,
+            data: form.serialize(), // serializes the form's elements.
+            success: function(data)
+                     {
+                         // Show the message then revert back to original text.
+                         showMessage(10000, "mousePS2CfgMsg", data);
+                     }
+         });
+    });
+});

webserver/js/ota.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/ota.js

webserver/js/ota.js

@@ -0,0 +1,300 @@
+var lastStatus = 0;
+
+// Method to display a message in a message field. The existing html is saved and replaced
+// with the new html. After a timeout period the original html is restored.
+//
+$origMessage = null;
+$origId = null;
+$msgTimerId = null;
+function showMessage(timeout, id, message)
+{
+    // Is this a new message whilst one is active?
+    if($origMessage !== null)
+    {
+        // Cancel timer and restore original message.
+        clearTimeout($msgTimerId);
+        $('#' + $origId).html($origMessage);
+    }
+
+    // Store original message and Id so that on timer expiry it can be replaced..
+    $origMessage = $('#' + id).html();
+    $origId = id;
+
+    // Change HTML and set timer to restore it.
+    $('#' + id).html(message);
+    $msgTimerId = setTimeout(function(msgFieldId) 
+               {
+                    $('#' + msgFieldId).html($origMessage);
+                    $origMessage = null;
+               }, timeout, id);
+}
+
+// Clear the file input array.
+function clearFileInput(ctrl)
+{
+    try {
+        ctrl.value = null;
+    } catch(ex) { }
+    if (ctrl.value) {
+        ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
+    }
+}
+
+// Firmware handlers.
+document.getElementById('firmwareUpload').onchange = function getFirmwareFileName(e)
+{
+    var default_path = document.getElementById("firmwareUpload").files[0].name;
+
+    // Put the name of the file into the table cell.
+    document.getElementById('firmwareName').innerHTML = "<b>&#61;&gt;</b>" + default_path;
+    document.getElementById('firmwareUpgrade').value = document.getElementById('firmwareUpload').files[0].name;
+
+    // Disable select and enable upgrade/cancel.
+    document.getElementById('firmwareUploadLabel').style.display = 'none';
+    document.getElementById('firmwareUpgrade').disabled = false;
+    document.getElementById('firmwareUpgrade').style.display = 'block';
+    document.getElementById('firmwareCancel').disabled = false;
+    document.getElementById('firmwareCancel').style.display = 'block';
+    document.getElementById('firmwareMsg').innerHTML = "Press <b>Upgrade</b> to upload and flash the firmware into the SharpKey or <b>Cancel</b> to cancel and re-select file.";
+}
+document.getElementById('firmwareCancel').onclick = function cancelFirmwareUpload(e)
+{
+    var default_path = document.getElementById("firmwareUpload").files[0].name;
+
+    // Reset the selected filename.
+    document.getElementById('firmwareName').innerHTML = "";
+    document.getElementById('firmwareUpgrade').value = [];
+    clearFileInput(document.getElementById('firmwareUpload'));
+
+    // Enable select and disable upgrade/cancel.
+    document.getElementById('firmwareUploadLabel').style.display = 'block';
+    document.getElementById('firmwareUpgrade').disabled = true;
+    document.getElementById('firmwareUpgrade').style.display = 'none';
+    document.getElementById('firmwareCancel').disabled = true;
+    document.getElementById('firmwareCancel').style.display = 'none';
+    document.getElementById('firmwareMsg').innerHTML = "Select a firmware image file with which to upgrade the SharpKey Operating System.";
+}
+
+// Firmware upgrade handler.
+function firmwareUpdateProgress(e)
+{
+    if (e.lengthComputable)
+    {
+        var percentage = Math.round((e.loaded/e.total)*100);
+        document.getElementById('firmwareProgressBar').style.width = percentage + '%';
+    }
+    else 
+    {
+        document.getElementById('firmwareProgressBar').innerHTML = "Unable to compute progress information since the total size is unknown";
+    }
+}
+document.getElementById('firmwareUpgrade').onclick = function firmwareUpload()
+{
+    var fileInput = document.getElementById("firmwareUpload").files;
+
+    // Reset the last status. Used to track state change.
+    lastStatus = 0;
+
+    // Client side checks, no point initiating a firmware update if the file isnt valid!
+    if (fileInput.length == 0)
+    {
+        alert("No file selected!");
+    } else if (fileInput[0].size > 1664*1024)
+    {
+        alert("File size must be less than 1.6MB!");
+    } else 
+    {
+        document.getElementById("firmwareUpload").disabled = true;
+        document.getElementById("firmwareUploadLabel").style.display = 'none';
+        document.getElementById("firmwareUpgrade").disabled = true;
+        document.getElementById("firmwareUpgrade").style.display = 'none';
+        document.getElementById("firmwareCancel").style.display = 'none';
+        document.getElementById("firmwareProgress").style.display = 'block';
+
+        var xhttp;
+        if(window.XMLHttpRequest)
+        {
+            xhttp = new XMLHttpRequest();
+        } else
+         {
+            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+
+        // Install listeners to 
+        xhttp.upload.addEventListener("progress", firmwareUpdateProgress, false);
+        xhttp.onreadystatechange = function() 
+        {
+            if (xhttp.readyState == 4) 
+            {
+                lastStatus = xhttp.status;
+                if (xhttp.status == 200) 
+                {
+                    document.getElementById('firmwareMsg').innerHTML = "<p style=\"color:green;\">Transfer complete, firmware successfully flashed onto the SharpKey. Please press <b>Reboot</b> to activate.</p>";
+                    document.getElementById("firmwareProgress").style.display = 'none';
+                    document.getElementById('firmwareName').style.display = 'none';
+                } else if (xhttp.status == 500) 
+                {
+                    document.getElementById('firmwareMsg').innerHTML = "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>";
+                }
+                else if (xhttp.status == 0) 
+                {
+                    document.getElementById('firmwareMsg').innerHTML = "<p style=\"color:red;\">Error: Server closed the connection abrubtly, flash status unknown! - Press Reboot</p>";
+                } else 
+                {
+                    document.getElementById('firmwareMsg').innerHTML = "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>";
+                }
+            }
+        };
+        document.getElementById('firmwareMsg').innerHTML = "<p style=\"color:orange;\">Uploading and flashing the new firmware, please wait...</p>";
+        xhttp.open("POST", "/ota/firmware", true);
+        xhttp.send(fileInput[0]);
+    }
+}
+
+// Filepack handlers.
+document.getElementById('filepackUpload').onchange = function getFilepackFileName(e)
+{
+    var default_path = document.getElementById("filepackUpload").files[0].name;
+
+    // Put the name of the file into the table cell.
+    document.getElementById('filepackName').innerHTML = "<b>&#61;&gt;</b>" + default_path;
+    document.getElementById('filepackUpgrade').value = document.getElementById('filepackUpload').files[0].name;
+
+    // Disable select and enable upgrade/cancel.
+    document.getElementById('filepackUploadLabel').style.display = 'none';
+    document.getElementById('filepackUpgrade').disabled = false;
+    document.getElementById('filepackUpgrade').style.display = 'block';
+    document.getElementById('filepackCancel').disabled = false;
+    document.getElementById('filepackCancel').style.display = 'block';
+    document.getElementById('filepackWarning').style.display = 'block';
+    document.getElementById('filepackMsg').innerHTML = "Press <b>Upgrade</b> to upload and flash the filepack onto the SharpKey filesystem or <b>Cancel</b> to cancel and re-select file.";
+}
+document.getElementById('filepackCancel').onclick = function cancelFilepackUpload(e)
+{
+    var default_path = document.getElementById("filepackUpload").files[0].name;
+
+    // Reset the selected filename.
+    document.getElementById('filepackName').innerHTML = "";
+    clearFileInput(document.getElementById('filepackUpload'));
+
+    // Enable select and disable upgrade/cancel.
+    document.getElementById('filepackUploadLabel').style.display = 'block';
+    document.getElementById('filepackUpgrade').disabled = true;
+    document.getElementById('filepackUpgrade').style.display = 'none';
+    document.getElementById('filepackCancel').disabled = true;
+    document.getElementById('filepackCancel').style.display = 'none';
+    document.getElementById('filepackWarning').style.display = 'none';
+    document.getElementById('filepackMsg').innerHTML = "Select a filepack image file with which to upgrade the SharpKey filesystem.";
+}
+
+// Filepack upgrade handler.
+function filepackUpdateProgress(e)
+{
+    if (e.lengthComputable)
+    {
+        var percentage = Math.round((e.loaded/e.total)*100);
+        document.getElementById('filepackProgressBar').style.width = percentage + '%';
+    }
+    else 
+    {
+        document.getElementById('filepackProgressBar').innerHTML = "Unable to compute progress information since the total size is unknown";
+    }
+}
+document.getElementById('filepackUpgrade').onclick = function filepackUpload()
+{
+    var fileInput = document.getElementById("filepackUpload").files;
+
+    // Reset the last status. Used to track state change.
+    lastStatus = 0;
+
+    // Client side checks, no point initiating a filepack update if the file isnt valid!
+    if (fileInput.length == 0)
+    {
+        alert("No file selected!");
+    } else if (fileInput[0].size > 640*1024)
+    {
+        alert("File size must be less than 640K!");
+    } else 
+    {
+        document.getElementById("filepackUpload").disabled = true;
+        document.getElementById("filepackUploadLabel").style.display = 'none';
+        document.getElementById("filepackUpgrade").disabled = true;
+        document.getElementById("filepackUpgrade").style.display = 'none';
+        document.getElementById("filepackCancel").style.display = 'none';
+        document.getElementById("filepackProgress").style.display = 'block';
+
+        var xhttp;
+        if(window.XMLHttpRequest)
+        {
+            xhttp = new XMLHttpRequest();
+        } else
+         {
+            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+
+        // Install listeners to 
+        xhttp.upload.addEventListener("progress", filepackUpdateProgress, false);
+        xhttp.onreadystatechange = function() 
+        {
+            if (xhttp.readyState == 4) 
+            {
+                lastStatus = xhttp.status;
+                if (xhttp.status == 200) 
+                {
+                    document.getElementById('filepackMsg').innerHTML = "<p style=\"color:green;\">Transfer complete, filepack successfully flashed onto SharpKey filesystem. Please press <b>Reboot</b> to activate.</p>";
+                    document.getElementById("filepackProgress").style.display = 'none';
+                    document.getElementById('filepackName').style.display = 'none';
+                } else if (xhttp.status == 500) 
+                {
+                    document.getElementById('filepackMsg').innerHTML = "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>";
+                }
+                else if (xhttp.status == 0) 
+                {
+                    document.getElementById('filepackMsg').innerHTML = "<p style=\"color:red;\">Error: Server closed the connection abrubtly, flash status unknown! - Press Reboot</p>";
+                } else 
+                {
+                    document.getElementById('filepackMsg').innerHTML = "<p style=\"color:red;\">Error: " + xhttp.responseText + " - Press Reboot</p>";
+                }
+            }
+        };
+        document.getElementById('filepackMsg').innerHTML = "<p style=\"color:orange;\">Uploading and flashing the new filepack, please wait...</p>";
+        xhttp.open("POST", "/ota/filepack", true);
+        xhttp.send(fileInput[0]);
+    }
+}
+
+
+// Method to enable the correct side-bar menu for the underlying host interface.
+function enableIfConfig()
+{
+    // Disable keymap if no host is connected to the SharpKey. KeyInterface is the base class which exists when
+    // no host was detected to invoke a host specific sub-class.
+    if(activeInterface === "KeyInterface ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+    }
+    // Mouse interface active?
+    else if(activeInterface === "Mouse ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+        document.getElementById("mouseCfgAvailable").style.display = 'compact';
+    } else
+    {
+        document.getElementById("keyMapAvailable").style.display = 'compact';
+
+        // Secondary interface available?
+        if(secondaryInterface == "Mouse ")
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'compact';
+        } else
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'none';
+        }
+    }
+}
+
+// On document load, setup the items viewable on the page according to set values.
+document.addEventListener("DOMContentLoaded", function setPageDefaults()
+{
+    enableIfConfig();
+});

webserver/js/wifimanager.js

@@ -1 +0,0 @@
-../../../sharpkey/webserver/js/wifimanager.js

webserver/js/wifimanager.js

@@ -0,0 +1,178 @@
+// Method to display a message in a message field. The existing html is saved and replaced
+// with the new html. After a timeout period the original html is restored.
+//
+$origMessage = null;
+$origId = null;
+$msgTimerId = null;
+function showMessage(timeout, id, message)
+{
+    // Is this a new message whilst one is active?
+    if($origMessage !== null)
+    {
+        // Cancel timer and restore original message.
+        clearTimeout($msgTimerId);
+        $('#' + $origId).html($origMessage);
+    }
+
+    // Store original message and Id so that on timer expiry it can be replaced..
+    $origMessage = $('#' + id).html();
+    $origId = id;
+
+    // Change HTML and set timer to restore it.
+    $('#' + id).html(message);
+    $msgTimerId = setTimeout(function(msgFieldId) 
+               {
+                    $('#' + msgFieldId).html($origMessage);
+                    $origMessage = null;
+               }, timeout, id);
+}
+
+
+function showWiFiAPInput()
+{
+    document.getElementById('inputWiFiClient').style.display = 'none';
+    document.getElementById('inputWiFiAP').style.display = 'block';
+    document.getElementById("errorMsgAP").innerHTML = "";
+}
+
+function showWiFiClientInput()
+{
+    document.getElementById('inputWiFiClient').style.display = 'block';
+    document.getElementById('inputWiFiAP').style.display = 'none';
+    document.getElementById("errorMsgClient").innerHTML = "";
+}
+
+function hideFixedIPInput()
+{
+    document.getElementById('rowClientIP').style.display = 'none';
+    document.getElementById('rowClientNETMASK').style.display = 'none';
+    document.getElementById('rowClientGATEWAY').style.display = 'none';
+    document.getElementById('dhcpInput').style.display = 'block';
+    document.getElementById("errorMsgClient").innerHTML = "";
+}
+
+function showFixedIPInput()
+{
+    document.getElementById('rowClientIP').style.display = 'table-row';
+    document.getElementById('rowClientNETMASK').style.display = 'table-row';
+    document.getElementById('rowClientGATEWAY').style.display = 'table-row';
+    document.getElementById('dhcpInput').style.display = 'none';
+    document.getElementById("errorMsgClient").innerHTML = "";
+}
+
+function showIPConfig() 
+{
+    if(document.getElementById("wifiCfg0checked"))
+    {
+        document.getElementById("wifiCfg0checked").style.display = 'compact';
+        document.getElementById("wifiCfg").style.display = 'none';
+
+        if(document.getElementById("wifiCfg3checked"))
+        {
+          document.getElementById("wifiCfg3checked").style.display = 'compact';
+          document.getElementById("wifiCfg3").style.display = 'none';
+        } else
+        {
+          document.getElementById("wifiCfg3checked").style.display = 'none';
+          document.getElementById("wifiCfg3").style.display = 'compact';
+        }
+
+        if(document.getElementById("wifiCfg1checked"))
+        {
+          document.getElementById("wifiCfg1checked").style.display = 'compact';
+        } else
+        {
+          document.getElementById("wifiCfg1").style.display = 'none';
+        }
+    } else
+    {
+      document.getElementById("wifiCfg0").style.display = 'none';
+      document.getElementById("wifiCfgchecked").style.display = 'compact';
+    }
+}
+
+
+// Method to enable the correct side-bar menu for the underlying host interface.
+function enableIfConfig()
+{
+    // Disable keymap if no host is connected to the SharpKey. KeyInterface is the base class which exists when
+    // no host was detected to invoke a host specific sub-class.
+    if(activeInterface === "KeyInterface ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+    }
+    // Mouse interface active?
+    else if(activeInterface === "Mouse ")
+    {
+        document.getElementById("keyMapAvailable").style.display = 'none';
+        document.getElementById("mouseCfgAvailable").style.display = 'compact';
+    } else
+    {
+        document.getElementById("keyMapAvailable").style.display = 'compact';
+
+        // Secondary interface available?
+        if(secondaryInterface == "Mouse ")
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'compact';
+        } else
+        {
+            document.getElementById("mouseCfgAvailable").style.display = 'none';
+        }
+    }
+}
+
+// On document load, setup the items viewable on the page according to set values.
+document.addEventListener("DOMContentLoaded", function setPageDefaults()
+{
+    document.getElementById('wifiModeAccessPoint').onclick = showWiFiAPInput;
+    document.getElementById('wifiModeClient').onclick = showWiFiClientInput;
+    document.getElementById('dhcpModeEnabled').onclick = hideFixedIPInput;
+    document.getElementById('dhcpModeDisabled').onclick = showFixedIPInput;
+
+    // Setup AP/Client display.
+    if(document.getElementById('wifiModeClient').checked)
+    {
+        showWiFiClientInput();
+    } else
+    {
+        showWiFiAPInput();
+    }
+    if(document.getElementById('dhcpModeEnabled').checked)
+    {
+        hideFixedIPInput();
+    } else
+    {
+        showFixedIPInput();
+    }
+
+    // AJAX code to post in a controlled manner so that we can receive back an error/success message to the commit.
+    $("#wifiman").submit( function(e)
+    {
+        var form = $(this);
+        var actionUrl = form.attr('action');
+    
+        // Prevent default submit action, we want to manually submit and be able to receive a response for errors/success.
+        e.preventDefault();
+        
+        // Clear message window before making a POST, allows for a new message if one is provided or blank if it isnt.
+        document.getElementById("errorMsgClient").innerHTML = "";
+        document.getElementById("errorMsgAP").innerHTML = "";
+    
+        $.ajax(
+        {
+            type: "POST",
+            url: actionUrl,
+            data: form.serialize(), // serializes the form's elements.
+            success: function(data)
+                     {
+                         // JQuery not rendering HTML correcly so revert to DOM.
+                         document.getElementById("errorMsgClient").innerHTML = data;
+                         document.getElementById("errorMsgAP").innerHTML = data;
+                         //form.find('#errorMsg').html(data);
+                     }
+         });
+    });
+
+    showIPConfig();
+    enableIfConfig();
+});