From 2be19f2e500c95d22973a51bf656f2a9cc8fb74d Mon Sep 17 00:00:00 2001
From: Will Toohey <will@mon.im>
Date: Tue, 30 May 2017 16:03:14 +1000
Subject: [PATCH] Nicer key config and logging

---
 Software/WebConfig/css/style.css  | 14 ++++++++++++++
 Software/WebConfig/js/config.js   | 11 +++++++++--
 Software/WebConfig/js/settings.js | 13 ++++++++++++-
 Software/WebConfig/js/updater.js  |  4 ++--
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/Software/WebConfig/css/style.css b/Software/WebConfig/css/style.css
index 6f039cf..5b0ffb4 100644
--- a/Software/WebConfig/css/style.css
+++ b/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;
diff --git a/Software/WebConfig/js/config.js b/Software/WebConfig/js/config.js
index 71197bc..547a0fa 100644
--- a/Software/WebConfig/js/config.js
+++ b/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);
\ No newline at end of file
diff --git a/Software/WebConfig/js/settings.js b/Software/WebConfig/js/settings.js
index fdf9638..d8aa581 100644
--- a/Software/WebConfig/js/settings.js
+++ b/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;
diff --git a/Software/WebConfig/js/updater.js b/Software/WebConfig/js/updater.js
index 60411b9..a8e74e4 100644
--- a/Software/WebConfig/js/updater.js
+++ b/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',