Added round LEDs to the UI (initially just for the VT100)

modules/pc8080/lib/keyboard.js

@@ -245,6 +245,16 @@ Keyboard.ALTCODES[Keyboard.ASCII.A] = Keyboard.KEYCODE.LEFT;
 Keyboard.ALTCODES[Keyboard.ASCII.D] = Keyboard.KEYCODE.RIGHT;
 Keyboard.ALTCODES[Keyboard.ASCII.L] = Keyboard.KEYCODE.SPACE;
 
+Keyboard.LEDSTATES = {
+    'l1':       0x01,
+    'l2':       0x02,
+    'l3':       0x04,
+    'l4':       0x08,
+    'locked':   0x10,
+    'local':    0x20,
+    'online':   0x40
+};
+
 /**
  * getSoftCode(keyCode)
  *
@@ -310,6 +320,12 @@ Keyboard.prototype.setBinding = function(sHTMLType, sBinding, control, sValue)
     var id = sHTMLType + '-' + sBinding;
 
     if (this.bindings[id] === undefined) {
+
+        if (sHTMLType == "led" && Keyboard.LEDSTATES[sBinding]) {
+            this.bindings[id] = control;
+            return true;
+        }
+
         switch (sBinding) {
         case "kbd":
             /*
@@ -356,6 +372,39 @@ Keyboard.prototype.setBinding = function(sHTMLType, sBinding, control, sValue)
     return false;
 };
 
+/**
+ * setLED(control, f)
+ *
+ * @this {Keyboard}
+ * @param {Object} control is an HTML control DOM object
+ * @param {boolean} f is true if the LED represented by control should be "on", false if "off"
+ */
+Keyboard.prototype.setLED = function(control, f)
+{
+    /*
+     * TODO: Add support for user-definable LED colors
+     */
+    control.style.backgroundColor = (f? "#ff0000" : "#000000");
+};
+
+/**
+ * updateLEDs(bitState)
+ *
+ * @this {Keyboard}
+ * @param {number} [bitState] is the bit in bitsStateSim that may have changed, if known; undefined if not
+ */
+Keyboard.prototype.updateLEDs = function(bitState)
+{
+    var control;
+    for (var sBinding in Keyboard.LEDSTATES) {
+        var id = "led-" + sBinding;
+        var bitLED = Keyboard.LEDSTATES[sBinding];
+        if ((!bitState || bitState == bitLED) && (control = this.bindings[id])) {
+            this.setLED(control, !!bitLED);     // !!(this.bKeyboardState & bitLED)
+        }
+    }
+};
+
 /**
  * initBus(cmp, bus, cpu, dbg)
  *

modules/pc8080/lib/video.js

@@ -242,6 +242,8 @@ function Video(parmsVideo, canvas, context, textarea, container)
         });
     }
 
+    this.ledBindings = {};
+
     if (DEBUG) this.nCyclesPrev = 0;
 }
 
@@ -404,12 +406,17 @@ Video.prototype.initBus = function(cmp, bus, cpu, dbg)
     this.initBuffers();
 
     /*
-     * If we have an associated keyboard, then ensure that the keyboard will be notified whenever the canvas
-     * gets focus and receives input.
+     * If we have an associated keyboard, then ensure that the keyboard will be notified
+     * whenever the canvas gets focus and receives input.
      */
     this.kbd = cmp.getMachineComponent("Keyboard");
-    if (this.kbd && this.canvasScreen) {
-        this.kbd.setBinding(this.textareaScreen? "textarea" : "canvas", "kbd", this.inputScreen);
+    if (this.kbd) {
+        for (var s in this.ledBindings) {
+            this.kbd.setBinding("led", s, this.ledBindings[s]);
+        }
+        if (this.canvasScreen) {
+            this.kbd.setBinding(this.textareaScreen? "textarea" : "canvas", "kbd", this.inputScreen);
+        }
     }
 
     if (!this.sFontROM) this.setReady();
@@ -666,6 +673,14 @@ Video.prototype.setBinding = function(sHTMLType, sBinding, control, sValue)
 {
     var video = this;
 
+    /*
+     * TODO: A more general-purpose binding mechanism would be nice someday....
+     */
+    if (sHTMLType == "led" || sHTMLType == "rled") {
+        this.ledBindings[sBinding] = control;
+        return true;
+    }
+
     switch (sBinding) {
     case "fullScreen":
         this.bindings[sBinding] = control;

modules/pcx86/lib/keyboard.js

@@ -1867,6 +1867,9 @@ Keyboard.prototype.injectKeysFromBuffer = function(msDelay)
  */
 Keyboard.prototype.setLED = function(control, f)
 {
+    /*
+     * TODO: Add support for user-definable LED colors
+     */
     control.style.backgroundColor = (f? "#00ff00" : "#000000");
 };
 

modules/pcx86/lib/video.js

@@ -2955,8 +2955,8 @@ Video.prototype.initBus = function(cmp, bus, cpu, dbg)
     }
 
     /*
-     * If we have an associated keyboard, then ensure that the keyboard will be notified whenever the canvas
-     * gets focus and receives input.
+     * If we have an associated keyboard, then ensure that the keyboard will be notified
+     * whenever the canvas gets focus and receives input.
      */
     this.kbd = cmp.getMachineComponent("Keyboard");
     if (this.kbd && this.canvasScreen) {
@@ -3006,7 +3006,9 @@ Video.prototype.setBinding = function(sHTMLType, sBinding, control, sValue)
 
         /*
          * We now save every binding that comes in, so that if there are bindings for "caps-lock' and the like,
-         * we can forward them to the Keyboard.
+         * we can forward them to the Keyboard.  TODO: Perhaps we should limit this to sHTMLType == "led", and collect
+         * them in a separate object (eg, ledBindings), so that initBus() can safely enumerate JUST the LEDs.  This
+         * is what we do in PC8080.  Be aware that's there's also sHTMLType == "rled" now, too.
          */
         this.bindings[sBinding] = control;
 

modules/shared/templates/components.css

@@ -111,6 +111,17 @@
     line-height: 19px; /* the equivalent of "vertical-align: middle" for single-line elements */
     background-color: #000000;
 }
+.pcjs-rled {
+    float: left;
+    width: 8px;
+    height: 8px;
+    margin: 4px;
+    border: 1px solid black;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 19px; /* the equivalent of "vertical-align: middle" for single-line elements */
+    background-color: #000000;
+}
 .pcjs-screen {
     clear: both;
     height: auto;

modules/shared/templates/components.xsl

@@ -411,7 +411,7 @@
 						</fieldset>
 					</form>
 				</xsl:when>
-				<xsl:when test="@type = 'led'">
+				<xsl:when test="@type = 'led' or @type = 'rled'">
 					<div class="{$APPCLASS}-binding {$CSSCLASS}-{@type}" data-value="{{{$type},{$binding}}}"><xsl:value-of select="."/></div>
 				</xsl:when>
 				<xsl:when test="@type = 'separator'">