Added progress bar control (for the PC11 paper tape reader)

modules/pdp11/lib/pc11.js

@@ -89,6 +89,14 @@ PC11.TARGET = {
     MEMORY: 2
 };
 
+PC11.BINDING = {
+    READ_PROGRESS:  "readProgress"
+};
+
+PC11.CSSCLASS = {
+    PROGRESS_BAR:   PDP11.CSSCLASS + "-progress-bar"
+};
+
 /**
  * setBinding(sType, sBinding, control, sValue)
  *
@@ -199,6 +207,10 @@ PC11.prototype.setBinding = function(sType, sBinding, control, sValue)
         };
         return true;
 
+    case PC11.BINDING.READ_PROGRESS:
+        this.bindings[sBinding] = control;
+        return true;
+
     default:
         break;
     }
@@ -601,6 +613,28 @@ PC11.prototype.displayTape = function()
     }
 };
 
+/**
+ * displayProgress(nPercent)
+ *
+ * @this {PC11}
+ * @param {number} nPercent
+ */
+PC11.prototype.displayProgress = function(nPercent)
+{
+    nPercent |= 0;
+    if (nPercent !== this.lastPercent) {
+        var control = this.bindings[PC11.BINDING.READ_PROGRESS];
+        if (control) {
+            var aeControls = Component.getElementsByClass(control, PC11.CSSCLASS.PROGRESS_BAR);
+            var controlBar = aeControls && aeControls[0];
+            if (controlBar && controlBar.style) {
+                controlBar.style.width = nPercent + "%";
+            }
+        }
+        this.lastPercent = nPercent;
+    }
+};
+
 /**
  * parseTape(sTapeName, sTapePath, nTapeTarget, aBytes, addrLoad, addrExec)
  *
@@ -646,6 +680,7 @@ PC11.prototype.parseTape = function(sTapeName, sTapePath, nTapeTarget, aBytes, a
     this.iTapeData = 0;
     this.aTapeData = aBytes;
     this.status("tape attached: " + sTapeName);
+    this.displayProgress(0);
 };
 
 /**
@@ -714,6 +749,7 @@ PC11.prototype.advanceReader = function()
         if (!(this.prs & PDP11.PC11.PRS.DONE)) {
             if (this.iTapeData < this.aTapeData.length) {
                 this.prb = this.aTapeData[this.iTapeData++] & 0xff;
+                this.displayProgress(this.iTapeData / this.aTapeData.length * 100);
                 if (MAXDEBUG) this.println("tape read " + str.toHexByte(this.prb) + " at pos " + str.toHexWord(this.iTapeData));
                 this.prs |= PDP11.PC11.PRS.DONE;
                 this.prs &= ~PDP11.PC11.PRS.BUSY;

modules/shared/templates/components.css

@@ -55,6 +55,30 @@
     line-height: 20px;
     vertical-align: middle;
 }
+.pcjs-progress {
+    height: 20px;
+    width: 300px;
+    margin-top: 8px;
+    border: 1px solid black;
+    position: relative;
+}
+.pcjs-progress-bar {
+    height: 20px;
+    width: 0%; /* this will be updated pragmatically */
+    background-color: gold;
+    position: absolute;
+    top: 0px;
+}
+.pcjs-progress-text {
+    height: 20px;
+    width: 300px;
+    font-size: small;
+    line-height: 20px;
+    text-align: center;
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+}
 .pcjs-register {
     font-family: Monaco, "Lucida Console", monospace;
     font-size: small;

modules/shared/templates/components.xsl

@@ -330,6 +330,7 @@
 				<xsl:when test="@pos = 'left'">float:left;</xsl:when>
 				<xsl:when test="@pos = 'right'">float:right;</xsl:when>
 				<xsl:when test="@pos = 'center'">margin:0 auto;</xsl:when>
+				<xsl:when test="@pos = 'default'">clear:both;</xsl:when>
 				<xsl:when test="@pos">position:<xsl:value-of select="@pos"/>;</xsl:when>
 				<xsl:when test="$left != '' or $top != ''">position:relative;</xsl:when>
 				<xsl:when test="@container">text-align:<xsl:value-of select="@container"/>;</xsl:when>
@@ -416,6 +417,12 @@
 				<xsl:when test="@type = 'led' or @type = 'rled'">
 					<div class="{$APPCLASS}-binding {$CSSCLASS}-{@type}" data-value="{{{$type},{$binding}}}" style="display:inline-block;"><xsl:value-of select="."/></div>
 				</xsl:when>
+				<xsl:when test="@type = 'progress'">
+					<div class="{$APPCLASS}-binding {$CSSCLASS}-{@type}" style="-webkit-user-select:none;{$border}{$width}{$height}{$fontsize}{$style}" data-value="{{{$type},{$binding},{$value}}}">
+						<div class="{$CSSCLASS}-{@type}-text" style="{$width}"><xsl:apply-templates/></div>
+						<div class="{$CSSCLASS}-{@type}-bar"></div>
+					</div>
+				</xsl:when>
 				<xsl:when test="@type = 'separator'">
 					<hr/>
 				</xsl:when>