Nicer key config and logging

Software/WebConfig/css/style.css

@@ -4,6 +4,15 @@ body, html {
     margin: 0;
 }
 
+#logview {
+    height: 100px;
+    min-width: 100px;
+    font-family: monospace;
+    background-color: #EEE;
+    overflow: scroll;
+    overflow-x: hidden;
+}
+
 .center {
     position: relative;
     display:flex;
@@ -21,6 +30,7 @@ body, html {
     height: 100%;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .connect > button {
@@ -33,6 +43,10 @@ body, html {
     flex-direction: column;
 }
 
+.keySelection {
+    margin-left: 5px;
+}
+
 .colourPicker {
     width: 50px;
     height: 20px;

Software/WebConfig/js/config.js

@@ -23,7 +23,7 @@ var commands = {
 var configDisplay = [
     {id: 'joystickMode', name: 'Input mode',
         options : [{name: 'Keyboard/Mouse', val: 0}, {name: 'Joystick', val: 1}]},
-    {id: 'switches', name: 'Keyboard bindings'},
+    {id: 'switches', name: 'Keyboard bindings', labels: ['BT-A','BT-B','BT-C','BT-D','FX-L','FX-R','START']},
     {id: 'macroClick', name: 'Macro click'},
     {id: 'macroHold', name: 'Macro longpress'},
     {id: 'macroPin', name: 'Macro PIN'},
@@ -74,7 +74,9 @@ var defaultConfig = {
 
 var visibleLog = function(html) {
     console.log(html);
-    document.getElementById('logview').innerHTML += html + '<br/>';
+    var log = document.getElementById('logview');
+    log.innerHTML += html + '<br/>';
+    log.scrollTop = log.scrollHeight;
 }
 
 class BinaryBuffer {
@@ -180,6 +182,7 @@ class ConfigValues {
 
 class Config {
     constructor() {
+        visibleLog("Welcome to the Pocket Voltex Configurator");
         this.optionsDiv = document.getElementById('configOptions');
         this.config = new ConfigValues();
         // DEBUG
@@ -189,6 +192,9 @@ class Config {
     connect() {
         return UsbWrapper.connect(vid, pid)
         .then(selectedDevice => {
+            if(!selectedDevice) {
+                return Promise.reject('No device selected');
+            }
             device = selectedDevice;
             visibleLog("Opening device...");
             return device.open();
@@ -331,5 +337,6 @@ class Config {
 };
 
 window.Config = Config;
+window.visibleLog = visibleLog;
 
 })(window, document);

Software/WebConfig/js/settings.js

@@ -164,6 +164,13 @@ class SettingKeys extends Setting {
         
         this.selects = [];
         for(var i = 0; i < this.switchCount; i++) {
+            var label = null;
+            if(setting.labels) {
+                label = document.createElement("div");
+                label.textContent = setting.labels[i] + ': ';
+                label.className = 'keySelection';
+                entry.appendChild(label);
+            }
             var select = document.createElement("select");
             scancodes.forEach(function(code) {
                 var option = document.createElement("option");
@@ -173,7 +180,11 @@ class SettingKeys extends Setting {
             });
             
             select.onchange = this.fireCallback.bind(this);
-            entry.appendChild(select);
+            if(label) {
+                label.appendChild(select);
+            } else {
+                entry.appendChild(select);
+            }
             this.selects.push(select);
         }
         return entry;

Software/WebConfig/js/updater.js

@@ -66,7 +66,7 @@ function programLatest(device, hex) {
             // pad to 0s when size smaller
             let packet = new Uint8Array(new ArrayBuffer(pageSize));
             packet.set(page);
-            console.log(Math.round(addr / hex.length * 100) + '%');
+            visibleLog(Math.round(addr / hex.length * 100) + '%');
             return device.controlTransferOut({
                 requestType: 'vendor',
                 recipient: 'device',
@@ -76,7 +76,7 @@ function programLatest(device, hex) {
         });
     }
     p = p.then(() => {
-        console.log("Rebooting...");
+        visibleLog("Rebooting...");
         return device.controlTransferOut({
                 requestType: 'vendor',
                 recipient: 'device',