diff --git a/Firmware/PocketVoltex/Config.c b/Firmware/PocketVoltex/Config.c
index 2259150..419fc54 100644
--- a/Firmware/PocketVoltex/Config.c
+++ b/Firmware/PocketVoltex/Config.c
@@ -57,8 +57,21 @@ void SetConfig(sdvx_config_t* config) {
 }
 
 command_response_t HandleConfig(uint8_t* buffer) {
-    if(buffer[0] == MAGIC_RESET_NUMBER) {
-        return REBOOT;
+    command_t *command = (command_t*)buffer;
+    switch(command->command) {
+        case VERSION:
+            command->data.version.version = FIRMWARE_VERSION;
+            command->data.version.serial = 0xDEAD; // TODO set properly later
+            return RESPOND;
+        case GETCONFIG:
+            memcpy(&command->data.config, &sdvxConfig, CONFIG_BYTES);
+            return RESPOND;
+        case SETCONFIG:
+            SetConfig(&command->data.config);
+            return IGNORE;
+        case RESET:
+            return REBOOT;
+        default:
+            return IGNORE;
     }
-    return IGNORE;
 }
\ No newline at end of file
diff --git a/Software/WebConfig/css/style.css b/Software/WebConfig/css/style.css
index 22166a0..76dd0cc 100644
--- a/Software/WebConfig/css/style.css
+++ b/Software/WebConfig/css/style.css
@@ -1,17 +1,14 @@
-.hidden {
-    display: none;
-}
-
-.disabled {
-    opacity: 0.4;
+.center {
+    position: relative;
+    display:flex;
+    align-items:center;
+    flex-direction: column;
 }
 
 .configBox {
     background-image: url("../img/topdown-small.png");
     width: 800px;
     height: 571px;
-    margin-left:auto;
-    margin-right:auto;
 }
 
 .connect {
@@ -25,4 +22,38 @@
 
 .connect > button {
     font-size: 40pt;
+}
+
+.configOptions {
+    margin-left: 180px;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 400px;
+    width: 600px;
+}
+
+.configOptions > div, .configOptions > p {
+    width: 50%;
+}
+
+.colourPicker {
+    width: 50px;
+    height: 20px;
+}
+
+.pinEntry {
+    width: 40px;
+}
+
+.nestedSetting {
+    margin-left: 10px;
+}
+
+.hidden {
+    display: none;
+}
+
+.disabled {
+    opacity: 0.4;
 }
\ No newline at end of file
diff --git a/Software/WebConfig/index.html b/Software/WebConfig/index.html
index c40b243..3585e83 100644
--- a/Software/WebConfig/index.html
+++ b/Software/WebConfig/index.html
@@ -6,11 +6,14 @@
         <link rel="stylesheet" href="css/style.css">
         <script type="text/javascript" src="js/usbWrapper.js"></script>
         <script type="text/javascript" src="js/config.js"></script>
+        <script type="text/javascript" src="js/jscolor.min.js"></script>
         <script type="text/javascript">
             window.addEventListener("load", function() {
                 if(UsbWrapper.hasUSB) {
                     document.getElementById("compat-failure").classList.add("hidden");
-                    document.getElementsByClassName("configBox")[0].classList.remove("hidden");
+                    //document.getElementById("configBox").classList.remove("hidden");
+                    
+                    config = new Config();
                 }
             });
         </script>
@@ -19,11 +22,17 @@
         <div id="compat-failure">
         This configurator requires Javascript, Windows 8+ (or OSX/Linux) and a WebUSB capable browser (Chrome 55+). If you lack these, give the exe config app a go.
         </div>
-        <div id="configBox" class="configBox hidden disabled">
+        <div class="center">
+            <div>
+                <!--<div id="configBox" class="configBox hidden disabled">
+                </div>-->
+                <div id="connect" class="connect">
+                    <button id="connectBtn" onclick="config.connect()">Connect</button>
+                </div>
+                <div id="configOptions" class="configOptions">
+                </div>
+                <div id="logview"></div>
+            </div>
         </div>
-        <div id="connect" class="connect">
-            <button id="connectBtn" onclick="Config.connect()">Connect</button>
-        </div>
-        <div id="logview"></div>
     </body>
 </html>
diff --git a/Software/WebConfig/js/config.js b/Software/WebConfig/js/config.js
index 1403d86..b079e19 100644
--- a/Software/WebConfig/js/config.js
+++ b/Software/WebConfig/js/config.js
@@ -8,6 +8,7 @@ var UsbWrapper = window.UsbWrapper;
 var device;
 
 var SWITCH_COUNT = 8;
+var BRIGHTNESS_MAX = 127;
 var CONFIG_OUT_EPADDR = 1;
 var CONFIG_IN_EPADDR  = 2;
 var packetSize = 64;
@@ -19,11 +20,52 @@ var commands = {
     RESET :     42
 };
 
+var configDisplay = [
+    {id: 'joystickMode', name: 'Input mode', display : 'radio',
+        options : [{name: 'Keyboard/Mouse', val: 0}, {name: 'Joystick', val: 1}]},
+    {id: 'macroClick', name: 'Macro click', display : 'key'},
+    {id: 'macroHold', name: 'Macro longpress', display : 'bool'},
+    {id: 'macroPin', name: 'Macro PIN', display : 'pin'},
+    {id: 'lightsOn', name: 'Enable LEDs', display : 'bool', children: [
+        {id: 'hidLights', name: 'HID Lights', display : 'bool'},
+        {id: 'keyLights', name: 'Key lights', display : 'bool', children: [        
+            {id: 'btColour', name: 'BT colour', display: 'rgb'},
+            {id: 'fxColour', name: 'FX colour', display: 'rgb'},
+        ]},
+        {id: 'knobLights', name: 'Knob lights', display : 'bool', children: [
+            {id: 'knobL', name: 'VOL-L colour', display : 'rgb'},
+            {id: 'knobR', name: 'VOL-R colour', display : 'rgb'},
+        ]},
+        {id: 'lightPattern', name: 'Lights pattern', display : 'radio',
+            options : [{name: 'Solid', val: 2}, {name: 'Follower', val: 3}, {name: 'Breathe', val: 4}]},
+        {id: 'breatheColour', name: 'Solid/Breathe colour', display : 'rgb'},
+    ]},
+];
+
+// to match with firmware
+var settingOrder = [
+    'switches',
+    'btColour',
+    'fxColour',
+    'breatheColour',
+    'knobL',
+    'knobR',
+    'lightsOn',
+    'hidLights',
+    'keyLights',
+    'knobLights',
+    'lightPattern',
+    'macroClick',
+    'macroHold',
+    'macroPin',
+    'joystickMode'
+];
+
 var defaultConfig = {
     switches   : [],
     ledsOn     : true,
     //macroClick : KP_PLUS,
-    macroPin   : [1,2,3,4]
+    macroPin   : [1,2,3,4],
 }
 
 var visibleLog = function(html) {
@@ -31,60 +73,289 @@ var visibleLog = function(html) {
     document.getElementById('logview').innerHTML += html + '<br/>';
 }
 
-var ConfigValues = function(view) {
-    // skip the returned command byte
-    var offset = 1;
-    
-    this.switches = this.getKeys(view, offset, SWITCH_COUNT);
-    offset += SWITCH_COUNT;
-    this.btColour = this.getColour(view, offset);
-    offset += 3;
-    this.fxColour = this.getColour(view, offset);
-    offset += 3;
-    this.knobColours = [];
-    for(var i = 0; i < 2; i++) {
-        this.knobColours[i] = this.getColour(view, offset);
-        offset += 3;
+class BinaryBuffer {
+    constructor(view) {
+        this.view = view;
+        this.offset = 0;
     }
     
-    this.lightsOn = !!(view.getUint8(offset++));
-    this.hidLights = !!(view.getUint8(offset++));
-    this.keyLights = !!(view.getUint8(offset++));
-    this.knobLights = !!(view.getUint8(offset++));
-    this.lightPattern = view.getUint8(offset++);
-    this.macroClick = this.getKey(view, offset++);
-    this.macroPin = this.getArray(view, offset, 4);
-    offset += 4;
-    this.joystickMode = !!(view.getUint8(offset++));
-}
-
-ConfigValues.prototype.getArray = function(view, offset, size) {
-    var ret = [];
-    for(var i = 0; i < size; i++) {
-        ret[i] = view.getUint8(offset+i);
+    read(size) {
+        let ret;
+        if(size == 1) {
+            ret = this.view.getUint8(this.offset);
+        } else {
+            ret = [];
+            for(var i = 0; i < size; i++) {
+                ret[i] = this.view.getUint8(this.offset+i);
+            }
+        }
+        this.offset += size;
+        return ret;
     }
-    return ret;
-};
-
-ConfigValues.prototype.getColour = function(view, offset) {
-    return 'rgb(' + this.getArray(view, offset, 3).join() + ')';
-};
-
-ConfigValues.prototype.getKeys = function(view, offset, size) {
-    var keys = [];
-    for(let i = 0; i < size; i++) {
-        keys[i] = this.getKey(view, offset++);
+    
+    write(data) {
+        if(Array.isArray(data)) {
+            for(let i = 0; i < data.length; i++) {
+                this.view[this.offset+i] = data[i];
+            }
+            this.offset += data.length;
+        } else {
+            this.view[this.offset++] = data;
+        }
+    }
+    
+    rewind() {
+        this.offset = 0;
     }
-    return keys;
 }
 
-ConfigValues.prototype.getKey = function(view, offset) {
-    var key = view.getUint8(offset);
-    return scancodes.find(code => {return code.value == key});
+class Setting {
+    setCallback(callback) {
+        this.callback = callback;
+    }
+    
+    fireCallback() {
+        if(this.callback)
+            this.callback(this);
+    }
 }
 
-var Config = new function() {
-    this.connect = () => {
+// All settings must have createUI, read and write.
+// When the UI changes, call fireCallback to update the device config
+class SettingBool extends Setting {
+    read(reader) {
+        this.box.checked = !!reader.read(1);
+    }
+    
+    write(reader) {
+        reader.write(this.box.checked ? 1 : 0);
+    }
+    
+    createUI(setting) {
+        var container = document.createElement('div');
+        var check = document.createElement('input');
+        check.type = 'checkbox';
+        check.id = 'check-' + setting.id;
+        check.onclick = this.fireCallback.bind(this);
+        this.box = check;
+        
+        var label = document.createElement('label');
+        label.htmlFor = check.id;
+        label.textContent = setting.name;
+        
+        container.appendChild(check);
+        container.appendChild(label);
+        return container;
+    }
+}
+
+class SettingRGB extends Setting {
+    read(reader) {
+        var rgb = [];
+        for(var i = 0; i < 3; i++)
+            rgb[i] = (reader.read(1) / BRIGHTNESS_MAX) * 255;
+        this.picker.fromRGB(rgb[0], rgb[1], rgb[2]);
+    }
+    
+    write(reader) {
+        for(var i = 0; i < 3; i++)
+            reader.write((this.picker.rgb[i] / 255) * BRIGHTNESS_MAX);
+    }
+    
+    createUI(setting) {
+        var label = document.createElement('p');
+        label.textContent = setting.name + ':';
+        
+        var colourPicker = document.createElement('input');
+        colourPicker.className = 'colourPicker jscolor {valueElement:null}';
+        colourPicker.onchange = this.fireCallback.bind(this);
+        this.picker = new jscolor(colourPicker)
+        
+        label.appendChild(colourPicker);
+        return label;
+    }
+}
+
+class SettingRadio extends Setting {
+    read(buffer) {
+        var val = buffer.read(1);
+        
+        for(var i = 0; i < this.options.length; i++) {
+            let opt = this.options[i];
+            if(opt.val == val) {
+                opt.radio.checked = true;
+                return;
+            }
+        }
+        // sane default
+        this.options[0].radio.checked = true;
+    }
+    
+    write(buffer) {
+        for(var i = 0; i < this.options.length; i++) {
+            let opt = this.options[i];
+            if(opt.radio.checked) {
+                buffer.write(opt.val);
+                return;
+            }
+        }
+        // sane default
+        buffer.write(this.options[0].val);
+    }
+    
+    createUI(setting) {
+        this.options = setting.options;
+        var container = document.createElement('div');
+        container.textContent = setting.name + ':';
+        
+        var radioDiv = document.createElement('div');
+        radioDiv.className = 'nestedSetting';
+
+        for(var i = 0; i < setting.options.length; i++) {
+            var opt = setting.options[i];
+            
+            var radio = document.createElement('input');
+            radio.type = 'radio';
+            radio.id = setting.id + '-' + i;
+            radio.name = setting.id;
+            radio.onclick = this.fireCallback.bind(this);
+            opt.radio = radio;
+            
+            var label = document.createElement('label');
+            label.htmlFor = radio.id;
+            label.textContent = opt.name;
+            
+            var radioContainer = document.createElement('p');
+            radioContainer.appendChild(radio);
+            radioContainer.appendChild(label);
+            radioDiv.appendChild(radioContainer);
+        }
+        
+        container.appendChild(radioDiv);
+        return container;
+    }
+}
+
+class SettingKeys extends Setting {
+    constructor(switchCount) {
+        super();
+        this.switchCount = switchCount;
+    }
+    
+    read(reader) {
+        this.keys = reader.read(this.switchCount);
+    }
+    
+    write(reader) {
+        reader.write(this.keys);
+    }
+    
+    createUI(setting) {
+        var entry = document.createElement('p');
+        entry.textContent = setting.name + ':';
+        
+        var select = document.createElement("select");
+        scancodes.forEach(function(code) {
+            var option = document.createElement("option");
+            option.value = code.value;
+            option.textContent = code.name;
+            select.appendChild(option);
+        });
+        
+        entry.appendChild(select);
+        return entry;
+    }
+}
+
+class SettingPin extends Setting {
+    createUI(setting) {
+        var entry = document.createElement('p');
+        entry.textContent = setting.name + ':';
+        
+        var input = document.createElement('input');
+        input.type = 'password';
+        input.className = 'pinEntry';
+        input.textContent = '0000';
+        
+        entry.appendChild(input);
+        return entry;
+    }
+}
+
+class ConfigValues {
+    constructor() {
+        this.switches      = new SettingKeys(SWITCH_COUNT);
+        this.btColour      = new SettingRGB();
+        this.fxColour      = new SettingRGB();
+        this.breatheColour = new SettingRGB();
+        this.knobL         = new SettingRGB();
+        this.knobR         = new SettingRGB();
+        this.lightsOn      = new SettingBool();
+        this.hidLights     = new SettingBool();
+        this.keyLights     = new SettingBool();
+        this.knobLights    = new SettingBool();
+        this.lightPattern  = new SettingRadio();
+        this.macroClick    = new SettingKeys(1);
+        this.macroHold     = new SettingBool();
+        this.macroPin      = new SettingKeys(4);
+        this.joystickMode  = new SettingBool();
+    }
+    
+    read(view, writeCallback) {
+        var buffer = new BinaryBuffer(view);
+        // skip the returned command byte
+        buffer.read(1);
+        
+        settingOrder.forEach(setting => {
+            this[setting].read(buffer);
+            this[setting].setCallback(writeCallback);
+        });
+    }
+
+    write(view) {
+        var buffer = new BinaryBuffer(view);
+        buffer.write(commands.SETCONFIG);
+        
+        settingOrder.forEach(setting => {
+            this[setting].write(buffer);
+        });
+    }
+
+    getArray(view, offset, size) {
+        var ret = [];
+        for(var i = 0; i < size; i++) {
+            ret[i] = view.getUint8(offset+i);
+        }
+        return ret;
+    };
+
+    getColour(view, offset) {
+        return 'rgb(' + this.getArray(view, offset, 3).join() + ')';
+    };
+
+    getKeys(view, offset, size) {
+        var keys = [];
+        for(let i = 0; i < size; i++) {
+            keys[i] = this.getKey(view, offset++);
+        }
+        return keys;
+    }
+
+    getKey(view, offset) {
+        var key = view.getUint8(offset);
+        return scancodes.find(code => {return code.value == key});
+    }
+}
+
+class Config {
+    constructor() {
+        this.optionsDiv = document.getElementById('configOptions');
+        this.config = new ConfigValues();
+        // DEBUG
+        //this.enableUI();
+    }
+    
+    connect() {
         return UsbWrapper.connect(vid, pid)
         .then(selectedDevice => {
             device = selectedDevice;
@@ -105,22 +376,18 @@ var Config = new function() {
         })
         .then(version => {
             console.log("Found Pocket Voltex v" + version/10.0);
+            this.enableUI();
             return this.readConfig();
         })
-        .then(result => {console.log(result);})
-        .then( () => {
-            if(device && device.opened)
-                device.close();
-        })
         .catch(error => {
             //alert(error);
             visibleLog(error);
             if(device && device.opened)
                 device.close();
         });
-    };
+    }
     
-    this.readVersion = () => {
+    readVersion() {
         if(!device || !device.opened)
             return Promise.reject("Device not opened");
         
@@ -134,9 +401,9 @@ var Config = new function() {
             // version int exists at offset 1
             return result.data.getUint16(1, true);
         })
-    };
+    }
     
-    this.readConfig = () => {
+    readConfig() {
         if(!device || !device.opened)
             return Promise.reject("Device not opened");
         var data = new Uint8Array(packetSize);
@@ -145,25 +412,67 @@ var Config = new function() {
         .then(() => device.transferIn(CONFIG_IN_EPADDR, packetSize))
         .then(result => {
             console.log("Got config response of len", result.data.buffer.byteLength);
-            return new ConfigValues(result.data);
+            this.config.read(result.data, this.writeConfig.bind(this));
         });
-    };
+    }
     
-    this.close = () => {
+    writeConfig() {
+        if(!device || !device.opened)
+            return Promise.reject("Device not opened");
+        
+        console.log("Writing config");
+        var data = new Uint8Array(packetSize);
+        this.config.write(data);
+        return device.transferOut(CONFIG_OUT_EPADDR, data);
+    }
+    
+    close() {
         if(!device || !device.opened)
             return Promise.reject("Device not opened");
         visibleLog("Closing device...");
         return device.close();
-    };
+    }
     
-    this.rebootToBootloader = () => {
+    rebootToBootloader() {
         if(!device || !device.opened)
             return Promise.reject("Device not opened");
         var data = new Uint8Array(packetSize);
         data[0] = commands.RESET;
-        return device.transferOut(1, data);
+        return device.transferOut(CONFIG_OUT_EPADDR, data);
     };
-}
+    
+    populateSettings(parent, settings) {
+        settings.forEach(setting => {
+            var settingObj = this.config[setting.id];
+            var container = settingObj.createUI(setting);
+            settingObj.setCallback(this.writeConfig.bind(this));
+            
+            if(setting.children) {
+                var newParent = document.createElement('div');
+                newParent.className = 'nestedSetting';
+                
+                this.populateSettings(newParent, setting.children);
+                container.appendChild(newParent);
+            }
+            parent.appendChild(container);
+        });
+    }
+    
+    enableUI() {
+        //document.getElementById('configBox').classList.remove('hidden', 'disabled');
+        document.getElementById('connect').classList.add('hidden');
+        this.populateSettings(this.optionsDiv, configDisplay);
+    }
+    
+    createSetting(parent, setting) {
+        var func = this.settingsMap[setting.display];
+        if(func) {
+            func(parent, setting);
+        } else {
+            console.log('Unknown setting type', setting.display);
+        }
+    }
+};
 
 window.Config = Config;
 
@@ -265,142 +574,4 @@ var scancodes = [
   {name: "NUM .", value: 0x63}
 ];
 
-//{name: "NON US BACKSLASH AND PIPE", value: 0x64},
-//{name: "APPLICATION", value: 0x65},
-//{name: "POWER", value: 0x66},
-//{name: "KEYPAD EQUAL SIGN", value: 0x67},
-//{name: "F13", value: 0x68},
-//{name: "F14", value: 0x69},
-//{name: "F15", value: 0x6A},
-//{name: "F16", value: 0x6B},
-//{name: "F17", value: 0x6C},
-//{name: "F18", value: 0x6D},
-//{name: "F19", value: 0x6E},
-//{name: "F20", value: 0x6F},
-//{name: "F21", value: 0x70},
-//{name: "F22", value: 0x71},
-//{name: "F23", value: 0x72},
-//{name: "F24", value: 0x73},
-//{name: "EXECUTE", value: 0x74},
-//{name: "HELP", value: 0x75},
-//{name: "MENU", value: 0x76},
-//{name: "SELECT", value: 0x77},
-//{name: "STOP", value: 0x78},
-//{name: "AGAIN", value: 0x79},
-//{name: "UNDO", value: 0x7A},
-//{name: "CUT", value: 0x7B},
-//{name: "COPY", value: 0x7C},
-//{name: "PASTE", value: 0x7D},
-//{name: "FIND", value: 0x7E},
-//{name: "MUTE", value: 0x7F},
-//{name: "VOLUME UP", value: 0x80},
-//{name: "VOLUME DOWN", value: 0x81},
-//{name: "LOCKING CAPS LOCK", value: 0x82},
-//{name: "LOCKING NUM LOCK", value: 0x83},
-//{name: "LOCKING SCROLL LOCK", value: 0x84},
-//{name: "KEYPAD COMMA", value: 0x85},
-//{name: "KEYPAD EQUAL SIGN AS400", value: 0x86},
-//{name: "INTERNATIONAL1", value: 0x87},
-//{name: "INTERNATIONAL2", value: 0x88},
-//{name: "INTERNATIONAL3", value: 0x89},
-//{name: "INTERNATIONAL4", value: 0x8A},
-//{name: "INTERNATIONAL5", value: 0x8B},
-//{name: "INTERNATIONAL6", value: 0x8C},
-//{name: "INTERNATIONAL7", value: 0x8D},
-//{name: "INTERNATIONAL8", value: 0x8E},
-//{name: "INTERNATIONAL9", value: 0x8F},
-//{name: "LANG1", value: 0x90},
-//{name: "LANG2", value: 0x91},
-//{name: "LANG3", value: 0x92},
-//{name: "LANG4", value: 0x93},
-//{name: "LANG5", value: 0x94},
-//{name: "LANG6", value: 0x95},
-//{name: "LANG7", value: 0x96},
-//{name: "LANG8", value: 0x97},
-//{name: "LANG9", value: 0x98},
-//{name: "ALTERNATE ERASE", value: 0x99},
-//{name: "SYSREQ", value: 0x9A},
-//{name: "CANCEL", value: 0x9B},
-//{name: "CLEAR", value: 0x9C},
-//{name: "PRIOR", value: 0x9D},
-//{name: "RETURN", value: 0x9E},
-//{name: "SEPARATOR", value: 0x9F},
-//{name: "OUT", value: 0xA0},
-//{name: "OPER", value: 0xA1},
-//{name: "CLEAR AND AGAIN", value: 0xA2},
-//{name: "CRSEL AND PROPS", value: 0xA3},
-//{name: "EXSEL", value: 0xA4},
-//{name: "KEYPAD 00", value: 0xB0},
-//{name: "KEYPAD 000", value: 0xB1},
-//{name: "THOUSANDS SEPARATOR", value: 0xB2},
-//{name: "DECIMAL SEPARATOR", value: 0xB3},
-//{name: "CURRENCY UNIT", value: 0xB4},
-//{name: "CURRENCY SUB UNIT", value: 0xB5},
-//{name: "KEYPAD OPENING PARENTHESIS", value: 0xB6},
-//{name: "KEYPAD CLOSING PARENTHESIS", value: 0xB7},
-//{name: "KEYPAD OPENING BRACE", value: 0xB8},
-//{name: "KEYPAD CLOSING BRACE", value: 0xB9},
-//{name: "KEYPAD TAB", value: 0xBA},
-//{name: "KEYPAD BACKSPACE", value: 0xBB},
-//{name: "KEYPAD A", value: 0xBC},
-//{name: "KEYPAD B", value: 0xBD},
-//{name: "KEYPAD C", value: 0xBE},
-//{name: "KEYPAD D", value: 0xBF},
-//{name: "KEYPAD E", value: 0xC0},
-//{name: "KEYPAD F", value: 0xC1},
-//{name: "KEYPAD XOR", value: 0xC2},
-//{name: "KEYPAD CARET", value: 0xC3},
-//{name: "KEYPAD PERCENTAGE", value: 0xC4},
-//{name: "KEYPAD LESS THAN SIGN", value: 0xC5},
-//{name: "KEYPAD GREATER THAN SIGN", value: 0xC6},
-//{name: "KEYPAD AMP", value: 0xC7},
-//{name: "KEYPAD AMP AMP", value: 0xC8},
-//{name: "KEYPAD PIPE", value: 0xC9},
-//{name: "KEYPAD PIPE PIPE", value: 0xCA},
-//{name: "KEYPAD COLON", value: 0xCB},
-//{name: "KEYPAD HASHMARK", value: 0xCC},
-//{name: "KEYPAD SPACE", value: 0xCD},
-//{name: "KEYPAD AT", value: 0xCE},
-//{name: "KEYPAD EXCLAMATION SIGN", value: 0xCF},
-//{name: "KEYPAD MEMORY STORE", value: 0xD0},
-//{name: "KEYPAD MEMORY RECALL", value: 0xD1},
-//{name: "KEYPAD MEMORY CLEAR", value: 0xD2},
-//{name: "KEYPAD MEMORY ADD", value: 0xD3},
-//{name: "KEYPAD MEMORY SUBTRACT", value: 0xD4},
-//{name: "KEYPAD MEMORY MULTIPLY", value: 0xD5},
-//{name: "KEYPAD MEMORY DIVIDE", value: 0xD6},
-//{name: "KEYPAD PLUS AND MINUS", value: 0xD7},
-//{name: "KEYPAD CLEAR", value: 0xD8},
-//{name: "KEYPAD CLEAR ENTRY", value: 0xD9},
-//{name: "KEYPAD BINARY", value: 0xDA},
-//{name: "KEYPAD OCTAL", value: 0xDB},
-//{name: "KEYPAD DECIMAL", value: 0xDC},
-//{name: "KEYPAD HEXADECIMAL", value: 0xDD},
-//{name: "LEFT CONTROL", value: 0xE0},
-//{name: "LEFT SHIFT", value: 0xE1},
-//{name: "LEFT ALT", value: 0xE2},
-//{name: "LEFT GUI", value: 0xE3},
-//{name: "RIGHT CONTROL", value: 0xE4},
-//{name: "RIGHT SHIFT", value: 0xE5},
-//{name: "RIGHT ALT", value: 0xE6},
-//{name: "RIGHT GUI", value: 0xE7},
-//{name: "MEDIA PLAY", value: 0xE8},
-//{name: "MEDIA STOP", value: 0xE9},
-//{name: "MEDIA PREVIOUS TRACK", value: 0xEA},
-//{name: "MEDIA NEXT TRACK", value: 0xEB},
-//{name: "MEDIA EJECT", value: 0xEC},
-//{name: "MEDIA VOLUME UP", value: 0xED},
-//{name: "MEDIA VOLUME DOWN", value: 0xEE},
-//{name: "MEDIA MUTE", value: 0xEF},
-//{name: "MEDIA WWW", value: 0xF0},
-//{name: "MEDIA BACKWARD", value: 0xF1},
-//{name: "MEDIA FORWARD", value: 0xF2},
-//{name: "MEDIA CANCEL", value: 0xF3},
-//{name: "MEDIA SEARCH", value: 0xF4},
-//{name: "MEDIA SLEEP", value: 0xF8},
-//{name: "MEDIA LOCK", value: 0xF9},
-//{name: "MEDIA RELOAD", value: 0xFA},
-//{name: "MEDIA CALCULATOR", value: 0xFB}
-//{name: "NON_US_HASHMARK_AND_TILDE", value: 0x32},
-
 })(window, document);
\ No newline at end of file
diff --git a/Software/WebConfig/js/jscolor.min.js b/Software/WebConfig/js/jscolor.min.js
new file mode 100644
index 0000000..2a7a788
--- /dev/null
+++ b/Software/WebConfig/js/jscolor.min.js
@@ -0,0 +1,10 @@
+/**
+ * jscolor - JavaScript Color Picker
+ *
+ * @link    http://jscolor.com
+ * @license For open source use: GPLv3
+ *          For commercial use: JSColor Commercial License
+ * @author  Jan Odvarko
+ *
+ * See usage examples at http://jscolor.com/examples/
+ */"use strict";window.jscolor||(window.jscolor=function(){var e={register:function(){e.attachDOMReadyEvent(e.init),e.attachEvent(document,"mousedown",e.onDocumentMouseDown),e.attachEvent(document,"touchstart",e.onDocumentTouchStart),e.attachEvent(window,"resize",e.onWindowResize)},init:function(){e.jscolor.lookupClass&&e.jscolor.installByClassName(e.jscolor.lookupClass)},tryInstallOnElements:function(t,n){var r=new RegExp("(^|\\s)("+n+")(\\s*(\\{[^}]*\\})|\\s|$)","i");for(var i=0;i<t.length;i+=1){if(t[i].type!==undefined&&t[i].type.toLowerCase()=="color"&&e.isColorAttrSupported)continue;var s;if(!t[i].jscolor&&t[i].className&&(s=t[i].className.match(r))){var o=t[i],u=null,a=e.getDataAttr(o,"jscolor");a!==null?u=a:s[4]&&(u=s[4]);var f={};if(u)try{f=(new Function("return ("+u+")"))()}catch(l){e.warn("Error parsing jscolor options: "+l+":\n"+u)}o.jscolor=new e.jscolor(o,f)}}},isColorAttrSupported:function(){var e=document.createElement("input");if(e.setAttribute){e.setAttribute("type","color");if(e.type.toLowerCase()=="color")return!0}return!1}(),isCanvasSupported:function(){var e=document.createElement("canvas");return!!e.getContext&&!!e.getContext("2d")}(),fetchElement:function(e){return typeof e=="string"?document.getElementById(e):e},isElementType:function(e,t){return e.nodeName.toLowerCase()===t.toLowerCase()},getDataAttr:function(e,t){var n="data-"+t,r=e.getAttribute(n);return r!==null?r:null},attachEvent:function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on"+t,n)},detachEvent:function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent&&e.detachEvent("on"+t,n)},_attachedGroupEvents:{},attachGroupEvent:function(t,n,r,i){e._attachedGroupEvents.hasOwnProperty(t)||(e._attachedGroupEvents[t]=[]),e._attachedGroupEvents[t].push([n,r,i]),e.attachEvent(n,r,i)},detachGroupEvents:function(t){if(e._attachedGroupEvents.hasOwnProperty(t)){for(var n=0;n<e._attachedGroupEvents[t].length;n+=1){var r=e._attachedGroupEvents[t][n];e.detachEvent(r[0],r[1],r[2])}delete e._attachedGroupEvents[t]}},attachDOMReadyEvent:function(e){var t=!1,n=function(){t||(t=!0,e())};if(document.readyState==="complete"){setTimeout(n,1);return}if(document.addEventListener)document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",n,!1);else if(document.attachEvent){document.attachEvent("onreadystatechange",function(){document.readyState==="complete"&&(document.detachEvent("onreadystatechange",arguments.callee),n())}),window.attachEvent("onload",n);if(document.documentElement.doScroll&&window==window.top){var r=function(){if(!document.body)return;try{document.documentElement.doScroll("left"),n()}catch(e){setTimeout(r,1)}};r()}}},warn:function(e){window.console&&window.console.warn&&window.console.warn(e)},preventDefault:function(e){e.preventDefault&&e.preventDefault(),e.returnValue=!1},captureTarget:function(t){t.setCapture&&(e._capturedTarget=t,e._capturedTarget.setCapture())},releaseTarget:function(){e._capturedTarget&&(e._capturedTarget.releaseCapture(),e._capturedTarget=null)},fireEvent:function(e,t){if(!e)return;if(document.createEvent){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}else if(document.createEventObject){var n=document.createEventObject();e.fireEvent("on"+t,n)}else e["on"+t]&&e["on"+t]()},classNameToList:function(e){return e.replace(/^\s+|\s+$/g,"").split(/\s+/)},hasClass:function(e,t){return t?-1!=(" "+e.className.replace(/\s+/g," ")+" ").indexOf(" "+t+" "):!1},setClass:function(t,n){var r=e.classNameToList(n);for(var i=0;i<r.length;i+=1)e.hasClass(t,r[i])||(t.className+=(t.className?" ":"")+r[i])},unsetClass:function(t,n){var r=e.classNameToList(n);for(var i=0;i<r.length;i+=1){var s=new RegExp("^\\s*"+r[i]+"\\s*|"+"\\s*"+r[i]+"\\s*$|"+"\\s+"+r[i]+"(\\s+)","g");t.className=t.className.replace(s,"$1")}},getStyle:function(e){return window.getComputedStyle?window.getComputedStyle(e):e.currentStyle},setStyle:function(){var e=document.createElement("div"),t=function(t){for(var n=0;n<t.length;n+=1)if(t[n]in e.style)return t[n]},n={borderRadius:t(["borderRadius","MozBorderRadius","webkitBorderRadius"]),boxShadow:t(["boxShadow","MozBoxShadow","webkitBoxShadow"])};return function(e,t,r){switch(t.toLowerCase()){case"opacity":var i=Math.round(parseFloat(r)*100);e.style.opacity=r,e.style.filter="alpha(opacity="+i+")";break;default:e.style[n[t]]=r}}}(),setBorderRadius:function(t,n){e.setStyle(t,"borderRadius",n||"0")},setBoxShadow:function(t,n){e.setStyle(t,"boxShadow",n||"none")},getElementPos:function(t,n){var r=0,i=0,s=t.getBoundingClientRect();r=s.left,i=s.top;if(!n){var o=e.getViewPos();r+=o[0],i+=o[1]}return[r,i]},getElementSize:function(e){return[e.offsetWidth,e.offsetHeight]},getAbsPointerPos:function(e){e||(e=window.event);var t=0,n=0;return typeof e.changedTouches!="undefined"&&e.changedTouches.length?(t=e.changedTouches[0].clientX,n=e.changedTouches[0].clientY):typeof e.clientX=="number"&&(t=e.clientX,n=e.clientY),{x:t,y:n}},getRelPointerPos:function(e){e||(e=window.event);var t=e.target||e.srcElement,n=t.getBoundingClientRect(),r=0,i=0,s=0,o=0;return typeof e.changedTouches!="undefined"&&e.changedTouches.length?(s=e.changedTouches[0].clientX,o=e.changedTouches[0].clientY):typeof e.clientX=="number"&&(s=e.clientX,o=e.clientY),r=s-n.left,i=o-n.top,{x:r,y:i}},getViewPos:function(){var e=document.documentElement;return[(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0),(window.pageYOffset||e.scrollTop)-(e.clientTop||0)]},getViewSize:function(){var e=document.documentElement;return[window.innerWidth||e.clientWidth,window.innerHeight||e.clientHeight]},redrawPosition:function(){if(e.picker&&e.picker.owner){var t=e.picker.owner,n,r;t.fixed?(n=e.getElementPos(t.targetElement,!0),r=[0,0]):(n=e.getElementPos(t.targetElement),r=e.getViewPos());var i=e.getElementSize(t.targetElement),s=e.getViewSize(),o=e.getPickerOuterDims(t),u,a,f;switch(t.position.toLowerCase()){case"left":u=1,a=0,f=-1;break;case"right":u=1,a=0,f=1;break;case"top":u=0,a=1,f=-1;break;default:u=0,a=1,f=1}var l=(i[a]+o[a])/2;if(!t.smartPosition)var c=[n[u],n[a]+i[a]-l+l*f];else var c=[-r[u]+n[u]+o[u]>s[u]?-r[u]+n[u]+i[u]/2>s[u]/2&&n[u]+i[u]-o[u]>=0?n[u]+i[u]-o[u]:n[u]:n[u],-r[a]+n[a]+i[a]+o[a]-l+l*f>s[a]?-r[a]+n[a]+i[a]/2>s[a]/2&&n[a]+i[a]-l-l*f>=0?n[a]+i[a]-l-l*f:n[a]+i[a]-l+l*f:n[a]+i[a]-l+l*f>=0?n[a]+i[a]-l+l*f:n[a]+i[a]-l-l*f];var h=c[u],p=c[a],d=t.fixed?"fixed":"absolute",v=(c[0]+o[0]>n[0]||c[0]<n[0]+i[0])&&c[1]+o[1]<n[1]+i[1];e._drawPosition(t,h,p,d,v)}},_drawPosition:function(t,n,r,i,s){var o=s?0:t.shadowBlur;e.picker.wrap.style.position=i,e.picker.wrap.style.left=n+"px",e.picker.wrap.style.top=r+"px",e.setBoxShadow(e.picker.boxS,t.shadow?new e.BoxShadow(0,o,t.shadowBlur,0,t.shadowColor):null)},getPickerDims:function(t){var n=!!e.getSliderComponent(t),r=[2*t.insetWidth+2*t.padding+t.width+(n?2*t.insetWidth+e.getPadToSliderPadding(t)+t.sliderSize:0),2*t.insetWidth+2*t.padding+t.height+(t.closable?2*t.insetWidth+t.padding+t.buttonHeight:0)];return r},getPickerOuterDims:function(t){var n=e.getPickerDims(t);return[n[0]+2*t.borderWidth,n[1]+2*t.borderWidth]},getPadToSliderPadding:function(e){return Math.max(e.padding,1.5*(2*e.pointerBorderWidth+e.pointerThickness))},getPadYComponent:function(e){switch(e.mode.charAt(1).toLowerCase()){case"v":return"v"}return"s"},getSliderComponent:function(e){if(e.mode.length>2)switch(e.mode.charAt(2).toLowerCase()){case"s":return"s";case"v":return"v"}return null},onDocumentMouseDown:function(t){t||(t=window.event);var n=t.target||t.srcElement;n._jscLinkedInstance?n._jscLinkedInstance.showOnClick&&n._jscLinkedInstance.show():n._jscControlName?e.onControlPointerStart(t,n,n._jscControlName,"mouse"):e.picker&&e.picker.owner&&e.picker.owner.hide()},onDocumentTouchStart:function(t){t||(t=window.event);var n=t.target||t.srcElement;n._jscLinkedInstance?n._jscLinkedInstance.showOnClick&&n._jscLinkedInstance.show():n._jscControlName?e.onControlPointerStart(t,n,n._jscControlName,"touch"):e.picker&&e.picker.owner&&e.picker.owner.hide()},onWindowResize:function(t){e.redrawPosition()},onParentScroll:function(t){e.picker&&e.picker.owner&&e.picker.owner.hide()},_pointerMoveEvent:{mouse:"mousemove",touch:"touchmove"},_pointerEndEvent:{mouse:"mouseup",touch:"touchend"},_pointerOrigin:null,_capturedTarget:null,onControlPointerStart:function(t,n,r,i){var s=n._jscInstance;e.preventDefault(t),e.captureTarget(n);var o=function(s,o){e.attachGroupEvent("drag",s,e._pointerMoveEvent[i],e.onDocumentPointerMove(t,n,r,i,o)),e.attachGroupEvent("drag",s,e._pointerEndEvent[i],e.onDocumentPointerEnd(t,n,r,i))};o(document,[0,0]);if(window.parent&&window.frameElement){var u=window.frameElement.getBoundingClientRect(),a=[-u.left,-u.top];o(window.parent.window.document,a)}var f=e.getAbsPointerPos(t),l=e.getRelPointerPos(t);e._pointerOrigin={x:f.x-l.x,y:f.y-l.y};switch(r){case"pad":switch(e.getSliderComponent(s)){case"s":s.hsv[1]===0&&s.fromHSV(null,100,null);break;case"v":s.hsv[2]===0&&s.fromHSV(null,null,100)}e.setPad(s,t,0,0);break;case"sld":e.setSld(s,t,0)}e.dispatchFineChange(s)},onDocumentPointerMove:function(t,n,r,i,s){return function(t){var i=n._jscInstance;switch(r){case"pad":t||(t=window.event),e.setPad(i,t,s[0],s[1]),e.dispatchFineChange(i);break;case"sld":t||(t=window.event),e.setSld(i,t,s[1]),e.dispatchFineChange(i)}}},onDocumentPointerEnd:function(t,n,r,i){return function(t){var r=n._jscInstance;e.detachGroupEvents("drag"),e.releaseTarget(),e.dispatchChange(r)}},dispatchChange:function(t){t.valueElement&&e.isElementType(t.valueElement,"input")&&e.fireEvent(t.valueElement,"change")},dispatchFineChange:function(e){if(e.onFineChange){var t;typeof e.onFineChange=="string"?t=new Function(e.onFineChange):t=e.onFineChange,t.call(e)}},setPad:function(t,n,r,i){var s=e.getAbsPointerPos(n),o=r+s.x-e._pointerOrigin.x-t.padding-t.insetWidth,u=i+s.y-e._pointerOrigin.y-t.padding-t.insetWidth,a=o*(360/(t.width-1)),f=100-u*(100/(t.height-1));switch(e.getPadYComponent(t)){case"s":t.fromHSV(a,f,null,e.leaveSld);break;case"v":t.fromHSV(a,null,f,e.leaveSld)}},setSld:function(t,n,r){var i=e.getAbsPointerPos(n),s=r+i.y-e._pointerOrigin.y-t.padding-t.insetWidth,o=100-s*(100/(t.height-1));switch(e.getSliderComponent(t)){case"s":t.fromHSV(null,o,null,e.leavePad);break;case"v":t.fromHSV(null,null,o,e.leavePad)}},_vmlNS:"jsc_vml_",_vmlCSS:"jsc_vml_css_",_vmlReady:!1,initVML:function(){if(!e._vmlReady){var t=document;t.namespaces[e._vmlNS]||t.namespaces.add(e._vmlNS,"urn:schemas-microsoft-com:vml");if(!t.styleSheets[e._vmlCSS]){var n=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","rect","roundrect","oval","arc","image"],r=t.createStyleSheet();r.owningElement.id=e._vmlCSS;for(var i=0;i<n.length;i+=1)r.addRule(e._vmlNS+"\\:"+n[i],"behavior:url(#default#VML);")}e._vmlReady=!0}},createPalette:function(){var t={elm:null,draw:null};if(e.isCanvasSupported){var n=document.createElement("canvas"),r=n.getContext("2d"),i=function(e,t,i){n.width=e,n.height=t,r.clearRect(0,0,n.width,n.height);var s=r.createLinearGradient(0,0,n.width,0);s.addColorStop(0,"#F00"),s.addColorStop(1/6,"#FF0"),s.addColorStop(2/6,"#0F0"),s.addColorStop(.5,"#0FF"),s.addColorStop(4/6,"#00F"),s.addColorStop(5/6,"#F0F"),s.addColorStop(1,"#F00"),r.fillStyle=s,r.fillRect(0,0,n.width,n.height);var o=r.createLinearGradient(0,0,0,n.height);switch(i.toLowerCase()){case"s":o.addColorStop(0,"rgba(255,255,255,0)"),o.addColorStop(1,"rgba(255,255,255,1)");break;case"v":o.addColorStop(0,"rgba(0,0,0,0)"),o.addColorStop(1,"rgba(0,0,0,1)")}r.fillStyle=o,r.fillRect(0,0,n.width,n.height)};t.elm=n,t.draw=i}else{e.initVML();var s=document.createElement("div");s.style.position="relative",s.style.overflow="hidden";var o=document.createElement(e._vmlNS+":fill");o.type="gradient",o.method="linear",o.angle="90",o.colors="16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0";var u=document.createElement(e._vmlNS+":rect");u.style.position="absolute",u.style.left="-1px",u.style.top="-1px",u.stroked=!1,u.appendChild(o),s.appendChild(u);var a=document.createElement(e._vmlNS+":fill");a.type="gradient",a.method="linear",a.angle="180",a.opacity="0";var f=document.createElement(e._vmlNS+":rect");f.style.position="absolute",f.style.left="-1px",f.style.top="-1px",f.stroked=!1,f.appendChild(a),s.appendChild(f);var i=function(e,t,n){s.style.width=e+"px",s.style.height=t+"px",u.style.width=f.style.width=e+1+"px",u.style.height=f.style.height=t+1+"px",o.color="#F00",o.color2="#F00";switch(n.toLowerCase()){case"s":a.color=a.color2="#FFF";break;case"v":a.color=a.color2="#000"}};t.elm=s,t.draw=i}return t},createSliderGradient:function(){var t={elm:null,draw:null};if(e.isCanvasSupported){var n=document.createElement("canvas"),r=n.getContext("2d"),i=function(e,t,i,s){n.width=e,n.height=t,r.clearRect(0,0,n.width,n.height);var o=r.createLinearGradient(0,0,0,n.height);o.addColorStop(0,i),o.addColorStop(1,s),r.fillStyle=o,r.fillRect(0,0,n.width,n.height)};t.elm=n,t.draw=i}else{e.initVML();var s=document.createElement("div");s.style.position="relative",s.style.overflow="hidden";var o=document.createElement(e._vmlNS+":fill");o.type="gradient",o.method="linear",o.angle="180";var u=document.createElement(e._vmlNS+":rect");u.style.position="absolute",u.style.left="-1px",u.style.top="-1px",u.stroked=!1,u.appendChild(o),s.appendChild(u);var i=function(e,t,n,r){s.style.width=e+"px",s.style.height=t+"px",u.style.width=e+1+"px",u.style.height=t+1+"px",o.color=n,o.color2=r};t.elm=s,t.draw=i}return t},leaveValue:1,leaveStyle:2,leavePad:4,leaveSld:8,BoxShadow:function(){var e=function(e,t,n,r,i,s){this.hShadow=e,this.vShadow=t,this.blur=n,this.spread=r,this.color=i,this.inset=!!s};return e.prototype.toString=function(){var e=[Math.round(this.hShadow)+"px",Math.round(this.vShadow)+"px",Math.round(this.blur)+"px",Math.round(this.spread)+"px",this.color];return this.inset&&e.push("inset"),e.join(" ")},e}(),jscolor:function(t,n){function i(e,t,n){e/=255,t/=255,n/=255;var r=Math.min(Math.min(e,t),n),i=Math.max(Math.max(e,t),n),s=i-r;if(s===0)return[null,0,100*i];var o=e===r?3+(n-t)/s:t===r?5+(e-n)/s:1+(t-e)/s;return[60*(o===6?0:o),100*(s/i),100*i]}function s(e,t,n){var r=255*(n/100);if(e===null)return[r,r,r];e/=60,t/=100;var i=Math.floor(e),s=i%2?e-i:1-(e-i),o=r*(1-t),u=r*(1-t*s);switch(i){case 6:case 0:return[r,u,o];case 1:return[u,r,o];case 2:return[o,r,u];case 3:return[o,u,r];case 4:return[u,o,r];case 5:return[r,o,u]}}function o(){e.unsetClass(d.targetElement,d.activeClass),e.picker.wrap.parentNode.removeChild(e.picker.wrap),delete e.picker.owner}function u(){function l(){var e=d.insetColor.split(/\s+/),n=e.length<2?e[0]:e[1]+" "+e[0]+" "+e[0]+" "+e[1];t.btn.style.borderColor=n}d._processParentElementsInDOM(),e.picker||(e.picker={owner:null,wrap:document.createElement("div"),box:document.createElement("div"),boxS:document.createElement("div"),boxB:document.createElement("div"),pad:document.createElement("div"),padB:document.createElement("div"),padM:document.createElement("div"),padPal:e.createPalette(),cross:document.createElement("div"),crossBY:document.createElement("div"),crossBX:document.createElement("div"),crossLY:document.createElement("div"),crossLX:document.createElement("div"),sld:document.createElement("div"),sldB:document.createElement("div"),sldM:document.createElement("div"),sldGrad:e.createSliderGradient(),sldPtrS:document.createElement("div"),sldPtrIB:document.createElement("div"),sldPtrMB:document.createElement("div"),sldPtrOB:document.createElement("div"),btn:document.createElement("div"),btnT:document.createElement("span")},e.picker.pad.appendChild(e.picker.padPal.elm),e.picker.padB.appendChild(e.picker.pad),e.picker.cross.appendChild(e.picker.crossBY),e.picker.cross.appendChild(e.picker.crossBX),e.picker.cross.appendChild(e.picker.crossLY),e.picker.cross.appendChild(e.picker.crossLX),e.picker.padB.appendChild(e.picker.cross),e.picker.box.appendChild(e.picker.padB),e.picker.box.appendChild(e.picker.padM),e.picker.sld.appendChild(e.picker.sldGrad.elm),e.picker.sldB.appendChild(e.picker.sld),e.picker.sldB.appendChild(e.picker.sldPtrOB),e.picker.sldPtrOB.appendChild(e.picker.sldPtrMB),e.picker.sldPtrMB.appendChild(e.picker.sldPtrIB),e.picker.sldPtrIB.appendChild(e.picker.sldPtrS),e.picker.box.appendChild(e.picker.sldB),e.picker.box.appendChild(e.picker.sldM),e.picker.btn.appendChild(e.picker.btnT),e.picker.box.appendChild(e.picker.btn),e.picker.boxB.appendChild(e.picker.box),e.picker.wrap.appendChild(e.picker.boxS),e.picker.wrap.appendChild(e.picker.boxB));var t=e.picker,n=!!e.getSliderComponent(d),r=e.getPickerDims(d),i=2*d.pointerBorderWidth+d.pointerThickness+2*d.crossSize,s=e.getPadToSliderPadding(d),o=Math.min(d.borderRadius,Math.round(d.padding*Math.PI)),u="crosshair";t.wrap.style.clear="both",t.wrap.style.width=r[0]+2*d.borderWidth+"px",t.wrap.style.height=r[1]+2*d.borderWidth+"px",t.wrap.style.zIndex=d.zIndex,t.box.style.width=r[0]+"px",t.box.style.height=r[1]+"px",t.boxS.style.position="absolute",t.boxS.style.left="0",t.boxS.style.top="0",t.boxS.style.width="100%",t.boxS.style.height="100%",e.setBorderRadius(t.boxS,o+"px"),t.boxB.style.position="relative",t.boxB.style.border=d.borderWidth+"px solid",t.boxB.style.borderColor=d.borderColor,t.boxB.style.background=d.backgroundColor,e.setBorderRadius(t.boxB,o+"px"),t.padM.style.background=t.sldM.style.background="#FFF",e.setStyle(t.padM,"opacity","0"),e.setStyle(t.sldM,"opacity","0"),t.pad.style.position="relative",t.pad.style.width=d.width+"px",t.pad.style.height=d.height+"px",t.padPal.draw(d.width,d.height,e.getPadYComponent(d)),t.padB.style.position="absolute",t.padB.style.left=d.padding+"px",t.padB.style.top=d.padding+"px",t.padB.style.border=d.insetWidth+"px solid",t.padB.style.borderColor=d.insetColor,t.padM._jscInstance=d,t.padM._jscControlName="pad",t.padM.style.position="absolute",t.padM.style.left="0",t.padM.style.top="0",t.padM.style.width=d.padding+2*d.insetWidth+d.width+s/2+"px",t.padM.style.height=r[1]+"px",t.padM.style.cursor=u,t.cross.style.position="absolute",t.cross.style.left=t.cross.style.top="0",t.cross.style.width=t.cross.style.height=i+"px",t.crossBY.style.position=t.crossBX.style.position="absolute",t.crossBY.style.background=t.crossBX.style.background=d.pointerBorderColor,t.crossBY.style.width=t.crossBX.style.height=2*d.pointerBorderWidth+d.pointerThickness+"px",t.crossBY.style.height=t.crossBX.style.width=i+"px",t.crossBY.style.left=t.crossBX.style.top=Math.floor(i/2)-Math.floor(d.pointerThickness/2)-d.pointerBorderWidth+"px",t.crossBY.style.top=t.crossBX.style.left="0",t.crossLY.style.position=t.crossLX.style.position="absolute",t.crossLY.style.background=t.crossLX.style.background=d.pointerColor,t.crossLY.style.height=t.crossLX.style.width=i-2*d.pointerBorderWidth+"px",t.crossLY.style.width=t.crossLX.style.height=d.pointerThickness+"px",t.crossLY.style.left=t.crossLX.style.top=Math.floor(i/2)-Math.floor(d.pointerThickness/2)+"px",t.crossLY.style.top=t.crossLX.style.left=d.pointerBorderWidth+"px",t.sld.style.overflow="hidden",t.sld.style.width=d.sliderSize+"px",t.sld.style.height=d.height+"px",t.sldGrad.draw(d.sliderSize,d.height,"#000","#000"),t.sldB.style.display=n?"block":"none",t.sldB.style.position="absolute",t.sldB.style.right=d.padding+"px",t.sldB.style.top=d.padding+"px",t.sldB.style.border=d.insetWidth+"px solid",t.sldB.style.borderColor=d.insetColor,t.sldM._jscInstance=d,t.sldM._jscControlName="sld",t.sldM.style.display=n?"block":"none",t.sldM.style.position="absolute",t.sldM.style.right="0",t.sldM.style.top="0",t.sldM.style.width=d.sliderSize+s/2+d.padding+2*d.insetWidth+"px",t.sldM.style.height=r[1]+"px",t.sldM.style.cursor="default",t.sldPtrIB.style.border=t.sldPtrOB.style.border=d.pointerBorderWidth+"px solid "+d.pointerBorderColor,t.sldPtrOB.style.position="absolute",t.sldPtrOB.style.left=-(2*d.pointerBorderWidth+d.pointerThickness)+"px",t.sldPtrOB.style.top="0",t.sldPtrMB.style.border=d.pointerThickness+"px solid "+d.pointerColor,t.sldPtrS.style.width=d.sliderSize+"px",t.sldPtrS.style.height=m+"px",t.btn.style.display=d.closable?"block":"none",t.btn.style.position="absolute",t.btn.style.left=d.padding+"px",t.btn.style.bottom=d.padding+"px",t.btn.style.padding="0 15px",t.btn.style.height=d.buttonHeight+"px",t.btn.style.border=d.insetWidth+"px solid",l(),t.btn.style.color=d.buttonColor,t.btn.style.font="12px sans-serif",t.btn.style.textAlign="center";try{t.btn.style.cursor="pointer"}catch(c){t.btn.style.cursor="hand"}t.btn.onmousedown=function(){d.hide()},t.btnT.style.lineHeight=d.buttonHeight+"px",t.btnT.innerHTML="",t.btnT.appendChild(document.createTextNode(d.closeText)),a(),f(),e.picker.owner&&e.picker.owner!==d&&e.unsetClass(e.picker.owner.targetElement,d.activeClass),e.picker.owner=d,e.isElementType(v,"body")?e.redrawPosition():e._drawPosition(d,0,0,"relative",!1),t.wrap.parentNode!=v&&v.appendChild(t.wrap),e.setClass(d.targetElement,d.activeClass)}function a(){switch(e.getPadYComponent(d)){case"s":var t=1;break;case"v":var t=2}var n=Math.round(d.hsv[0]/360*(d.width-1)),r=Math.round((1-d.hsv[t]/100)*(d.height-1)),i=2*d.pointerBorderWidth+d.pointerThickness+2*d.crossSize,o=-Math.floor(i/2);e.picker.cross.style.left=n+o+"px",e.picker.cross.style.top=r+o+"px";switch(e.getSliderComponent(d)){case"s":var u=s(d.hsv[0],100,d.hsv[2]),a=s(d.hsv[0],0,d.hsv[2]),f="rgb("+Math.round(u[0])+","+Math.round(u[1])+","+Math.round(u[2])+")",l="rgb("+Math.round(a[0])+","+Math.round(a[1])+","+Math.round(a[2])+")";e.picker.sldGrad.draw(d.sliderSize,d.height,f,l);break;case"v":var c=s(d.hsv[0],d.hsv[1],100),f="rgb("+Math.round(c[0])+","+Math.round(c[1])+","+Math.round(c[2])+")",l="#000";e.picker.sldGrad.draw(d.sliderSize,d.height,f,l)}}function f(){var t=e.getSliderComponent(d);if(t){switch(t){case"s":var n=1;break;case"v":var n=2}var r=Math.round((1-d.hsv[n]/100)*(d.height-1));e.picker.sldPtrOB.style.top=r-(2*d.pointerBorderWidth+d.pointerThickness)-Math.floor(m/2)+"px"}}function l(){return e.picker&&e.picker.owner===d}function c(){d.importColor()}this.value=null,this.valueElement=t,this.styleElement=t,this.required=!0,this.refine=!0,this.hash=!1,this.uppercase=!0,this.onFineChange=null,this.activeClass="jscolor-active",this.minS=0,this.maxS=100,this.minV=0,this.maxV=100,this.hsv=[0,0,100],this.rgb=[255,255,255],this.width=181,this.height=101,this.showOnClick=!0,this.mode="HSV",this.position="bottom",this.smartPosition=!0,this.sliderSize=16,this.crossSize=8,this.closable=!1,this.closeText="Close",this.buttonColor="#000000",this.buttonHeight=18,this.padding=12,this.backgroundColor="#FFFFFF",this.borderWidth=1,this.borderColor="#BBBBBB",this.borderRadius=8,this.insetWidth=1,this.insetColor="#BBBBBB",this.shadow=!0,this.shadowBlur=15,this.shadowColor="rgba(0,0,0,0.2)",this.pointerColor="#4C4C4C",this.pointerBorderColor="#FFFFFF",this.pointerBorderWidth=1,this.pointerThickness=2,this.zIndex=1e3,this.container=null;for(var r in n)n.hasOwnProperty(r)&&(this[r]=n[r]);this.hide=function(){l()&&o()},this.show=function(){u()},this.redraw=function(){l()&&u()},this.importColor=function(){this.valueElement?e.isElementType(this.valueElement,"input")?this.refine?!this.required&&/^\s*$/.test(this.valueElement.value)?(this.valueElement.value="",this.styleElement&&(this.styleElement.style.backgroundImage=this.styleElement._jscOrigStyle.backgroundImage,this.styleElement.style.backgroundColor=this.styleElement._jscOrigStyle.backgroundColor,this.styleElement.style.color=this.styleElement._jscOrigStyle.color),this.exportColor(e.leaveValue|e.leaveStyle)):this.fromString(this.valueElement.value)||this.exportColor():this.fromString(this.valueElement.value,e.leaveValue)||(this.styleElement&&(this.styleElement.style.backgroundImage=this.styleElement._jscOrigStyle.backgroundImage,this.styleElement.style.backgroundColor=this.styleElement._jscOrigStyle.backgroundColor,this.styleElement.style.color=this.styleElement._jscOrigStyle.color),this.exportColor(e.leaveValue|e.leaveStyle)):this.exportColor():this.exportColor()},this.exportColor=function(t){if(!(t&e.leaveValue)&&this.valueElement){var n=this.toString();this.uppercase&&(n=n.toUpperCase()),this.hash&&(n="#"+n),e.isElementType(this.valueElement,"input")?this.valueElement.value=n:this.valueElement.innerHTML=n}t&e.leaveStyle||this.styleElement&&(this.styleElement.style.backgroundImage="none",this.styleElement.style.backgroundColor="#"+this.toString(),this.styleElement.style.color=this.isLight()?"#000":"#FFF"),!(t&e.leavePad)&&l()&&a(),!(t&e.leaveSld)&&l()&&f()},this.fromHSV=function(e,t,n,r){if(e!==null){if(isNaN(e))return!1;e=Math.max(0,Math.min(360,e))}if(t!==null){if(isNaN(t))return!1;t=Math.max(0,Math.min(100,this.maxS,t),this.minS)}if(n!==null){if(isNaN(n))return!1;n=Math.max(0,Math.min(100,this.maxV,n),this.minV)}this.rgb=s(e===null?this.hsv[0]:this.hsv[0]=e,t===null?this.hsv[1]:this.hsv[1]=t,n===null?this.hsv[2]:this.hsv[2]=n),this.exportColor(r)},this.fromRGB=function(e,t,n,r){if(e!==null){if(isNaN(e))return!1;e=Math.max(0,Math.min(255,e))}if(t!==null){if(isNaN(t))return!1;t=Math.max(0,Math.min(255,t))}if(n!==null){if(isNaN(n))return!1;n=Math.max(0,Math.min(255,n))}var o=i(e===null?this.rgb[0]:e,t===null?this.rgb[1]:t,n===null?this.rgb[2]:n);o[0]!==null&&(this.hsv[0]=Math.max(0,Math.min(360,o[0]))),o[2]!==0&&(this.hsv[1]=o[1]===null?null:Math.max(0,this.minS,Math.min(100,this.maxS,o[1]))),this.hsv[2]=o[2]===null?null:Math.max(0,this.minV,Math.min(100,this.maxV,o[2]));var u=s(this.hsv[0],this.hsv[1],this.hsv[2]);this.rgb[0]=u[0],this.rgb[1]=u[1],this.rgb[2]=u[2],this.exportColor(r)},this.fromString=function(e,t){var n;if(n=e.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i))return n[1].length===6?this.fromRGB(parseInt(n[1].substr(0,2),16),parseInt(n[1].substr(2,2),16),parseInt(n[1].substr(4,2),16),t):this.fromRGB(parseInt(n[1].charAt(0)+n[1].charAt(0),16),parseInt(n[1].charAt(1)+n[1].charAt(1),16),parseInt(n[1].charAt(2)+n[1].charAt(2),16),t),!0;if(n=e.match(/^\W*rgba?\(([^)]*)\)\W*$/i)){var r=n[1].split(","),i=/^\s*(\d*)(\.\d+)?\s*$/,s,o,u;if(r.length>=3&&(s=r[0].match(i))&&(o=r[1].match(i))&&(u=r[2].match(i))){var a=parseFloat((s[1]||"0")+(s[2]||"")),f=parseFloat((o[1]||"0")+(o[2]||"")),l=parseFloat((u[1]||"0")+(u[2]||""));return this.fromRGB(a,f,l,t),!0}}return!1},this.toString=function(){return(256|Math.round(this.rgb[0])).toString(16).substr(1)+(256|Math.round(this.rgb[1])).toString(16).substr(1)+(256|Math.round(this.rgb[2])).toString(16).substr(1)},this.toHEXString=function(){return"#"+this.toString().toUpperCase()},this.toRGBString=function(){return"rgb("+Math.round(this.rgb[0])+","+Math.round(this.rgb[1])+","+Math.round(this.rgb[2])+")"},this.isLight=function(){return.213*this.rgb[0]+.715*this.rgb[1]+.072*this.rgb[2]>127.5},this._processParentElementsInDOM=function(){if(this._linkedElementsProcessed)return;this._linkedElementsProcessed=!0;var t=this.targetElement;do{var n=e.getStyle(t);n&&n.position.toLowerCase()==="fixed"&&(this.fixed=!0),t!==this.targetElement&&(t._jscEventsAttached||(e.attachEvent(t,"scroll",e.onParentScroll),t._jscEventsAttached=!0))}while((t=t.parentNode)&&!e.isElementType(t,"body"))};if(typeof t=="string"){var h=t,p=document.getElementById(h);p?this.targetElement=p:e.warn("Could not find target element with ID '"+h+"'")}else t?this.targetElement=t:e.warn("Invalid target element: '"+t+"'");if(this.targetElement._jscLinkedInstance){e.warn("Cannot link jscolor twice to the same element. Skipping.");return}this.targetElement._jscLinkedInstance=this,this.valueElement=e.fetchElement(this.valueElement),this.styleElement=e.fetchElement(this.styleElement);var d=this,v=this.container?e.fetchElement(this.container):document.getElementsByTagName("body")[0],m=3;if(e.isElementType(this.targetElement,"button"))if(this.targetElement.onclick){var g=this.targetElement.onclick;this.targetElement.onclick=function(e){return g.call(this,e),!1}}else this.targetElement.onclick=function(){return!1};if(this.valueElement&&e.isElementType(this.valueElement,"input")){var y=function(){d.fromString(d.valueElement.value,e.leaveValue),e.dispatchFineChange(d)};e.attachEvent(this.valueElement,"keyup",y),e.attachEvent(this.valueElement,"input",y),e.attachEvent(this.valueElement,"blur",c),this.valueElement.setAttribute("autocomplete","off")}this.styleElement&&(this.styleElement._jscOrigStyle={backgroundImage:this.styleElement.style.backgroundImage,backgroundColor:this.styleElement.style.backgroundColor,color:this.styleElement.style.color}),this.value?this.fromString(this.value)||this.exportColor():this.importColor()}};return e.jscolor.lookupClass="jscolor",e.jscolor.installByClassName=function(t){var n=document.getElementsByTagName("input"),r=document.getElementsByTagName("button");e.tryInstallOnElements(n,t),e.tryInstallOnElements(r,t)},e.register(),e.jscolor}());
\ No newline at end of file
diff --git a/Software/WebConfig/js/usbWrapper.js b/Software/WebConfig/js/usbWrapper.js
index 8726ce8..932909b 100644
--- a/Software/WebConfig/js/usbWrapper.js
+++ b/Software/WebConfig/js/usbWrapper.js
@@ -1,3 +1,6 @@
+// Perhaps at some point I will release an Electron app, too
+// This will facilitate that.
+
 (function(window, document, navigator) {
 "use strict";