1
0
mirror of https://github.com/pkimpel/retro-b5500.git synced 2026-02-12 03:07:30 +00:00
Files
pkimpel.retro-b5500/webUI/prototypes/B5500CardReaderPrototype.html
paul.kimpel@digm.com 47e5d09ef7 1. Release emulator version 0.07.
2. Implement interrupt and device status latching in B5500CentralControl to support better UI display.
3. Implement B5500CardPunch device.
4. Implement preliminary and experimental B5500DummyPrinter device; correct printer I/O initiation in IOUnit.
5. Correct the way that Printer Finished interrupts are handled in IOUnit and CentralControl.
6. Implement Card Load Select in B5500Console and B5500SyllableDebugger.
7. Fix lack of presence-bit detection in return ops for returned values.
8. Redesign B5500CardReader UI to show last two cards read; change method of emptying the input hopper.
9. Set CHECK option and rework SYSTEM/LOG initialization in B5500ColdLoader.html.
10. Centralize system memory cycle time setting; change from 6us to 4us memory cycle time.
11. Increase Processor timeslice to 16ms and rework Processor.schedule() internals for more accurate performance throttling in browsers with poor setTimeout() granularity.
12. Reduce Processor syllable overhead from 2 cycles to 1.
13. Change B5500SPOUnit method of output to "paper" to work better in Google Chrome.
14. Make documentation and debugging enhancements in B5500IOUnit.
15. Release initial test website HTML and Unisys license PDF.
16. Commit Mark XVI DCMCP transcription as of 2013-06-21.
2013-06-24 05:04:15 +00:00

404 lines
12 KiB
HTML

<!DOCTYPE html>
<head>
<title>B5500 Card Reader Prototype</title>
<meta name="Author" content="Paul Kimpel">
<!-- 2013-06-08 Original version, cloned from tools/B5500LibMaintDecoder.html -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
BODY {
position: relative;
margin: 1ex}
BUTTON.greenButton {
background-color: #060;
color: white;
font-family: Arial Rounded, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
width: 60px;
height: 40px;
border: 1px solid #DDD;
border-radius: 4px}
BUTTON.blackButton {
background-color: black;
color: white;
font-family: Arial Rounded, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
width: 60px;
height: 40px;
border: 1px solid #DDD;
border-radius: 4px}
BUTTON.redButton {
background-color: #900;
color: white;
font-family: Arial Rounded, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
width: 60px;
height: 40px;
border: 1px solid #DDD;
border-radius: 4px}
BUTTON.greenLit {
background-color: green}
BUTTON.redLit {
background-color: #F00}
#CardReaderPanel {
position: absolute;
top: 30px;
left: 1ex;
color: white;
background-color: #666;
width: 700px;
height: 150px;
border: 1px solid black;
border-radius: 8px;
padding: 0;
vertical-align: top}
#CRNotReadyLight {
position: absolute;
top: 8px;
left: 8px}
#CREOFBtn {
position: absolute;
top: 8px;
left: 76px}
#CRStopBtn {
position: absolute;
top: 8px;
left: 144px}
#CRStartBtn {
position: absolute;
top: 8px;
left: 212px;}
#CRFileSelector {
position: absolute;
top: 56px;
left: 8px;
width: 100%;
border: 1px solid white}
#CRProgressBar {
position: absolute;
top: 84px;
left: 8px;
width: 680px;
border: 1px solid white}
#CROutHopperFrame {
position: absolute;
top: 106px;
left: 8px;
width: 680px;
height: 32px;
margin-top: 1px;
border: 1px solid white;
color: black;
background-color: white;
font-family: Lucida Sans Typewriter, Courier New, Courier, monospace;
font-size: 8pt;
font-weight: normal}
</style>
<script>
"use strict";
window.addEventListener("load", function() {
var buffer = "";
var bufferLength = 0;
var bufferOffset = 0;
var eofArmed = 0;
var panel = $$("TextPanel");
var outHopperFrame = $$("CROutHopperFrame");
var outHopper;
//var endOfOutHopper;
var eolRex = /([^\n\r\f]*)((:?\r[\n\f]?)|\n|\f)?/g;
var blankCard = " "; // 80 spaces
var cardsPerMinute = 800;
var readerState = 0;
var readerNotReady = 0;
var readerReady = 1;
function $$(id) {
return document.getElementById(id);
}
function hasClass(e, name) {
/* returns true if element "e" has class "name" in its class list */
var classes = e.className;
if (!e) {
return false;
} else if (classes == name) {
return true;
} else {
return (classes.search("\\b" + name + "\\b") >= 0);
}
}
function addClass(e, name) {
/* Adds a class "name" to the element "e"s class list */
if (!hasClass(e, name)) {
e.className += (" " + name);
}
}
function removeClass(e, name) {
/* Removes the class "name" from the element "e"s class list */
e.className = e.className.replace(new RegExp("\\b" + name + "\\b\\s*", "g"), "");
}
function appendLine(text) {
/* Appends "text"+NL as a new text node to the panel DOM element */
var e = document.createTextNode(text + "\n");
panel.appendChild(e);
}
function clearPanel() {
/* Clears the text panel */
var kid;
while (kid = panel.firstChild) {
panel.removeChild(kid);
}
}
function setReaderReady(ready) {
/* Controls the ready-state of the card reader */
$$("CRFileSelector").disabled = ready;
if (ready) {
readerState = readerReady;
removeClass($$("CRNotReadyLight"), "redLit");
} else {
readerState = readerNotReady;
addClass($$("CRNotReadyLight"), "redLit");
}
}
function armEOF(armed) {
/* Controls the arming/disarming of the EOF signal when starting with
an empty input hopper */
if (armed) {
eofArmed = 1;
addClass($$("CREOFBtn"), "redLit");
} else {
eofArmed = 0;
removeClass($$("CREOFBtn"), "redLit");
}
}
function readACard(ev) {
/* Reads one card image from the buffer, pads or trims the image as
necessary to 80 columns, and displays it */
var bx = bufferOffset;
var card;
var cardLength;
var line;
var match;
if (bx >= bufferLength) {
setReaderReady(false);
$$("CRProgressBar").value = 0;
} else {
eolRex.lastIndex = bx;
match = eolRex.exec(buffer);
if (!match) {
card = blankCard;
line = "";
} else {
bx += match[0].length;
card = match[1];
cardLength = card.length;
if (cardLength < 80) {
line = card;
card += blankCard.substring(0, 80-cardLength);
} else if (cardLength > 80) {
line = card = card.substring(0, 80);
}
}
$$("CRProgressBar").value = bufferLength-bx;
//appendLine(card);
while (outHopper.childNodes.length > 1) {
outHopper.removeChild(outHopper.firstChild);
}
outHopper.appendChild(document.createTextNode("\n"));
outHopper.appendChild(document.createTextNode(line));
if (readerState == readerReady) {
setTimeout(readACard, 60000/cardsPerMinute);
}
}
bufferOffset = bx;
}
function CRStartBtn_onclick(ev) {
/* Handle the click event for the START button */
if (readerState != readerReady) {
if (bufferOffset >= bufferLength) {
//alert("Empty hopper.");
if (eofArmed) {
appendLine("\\\\\\\\\\ [EOF] /////");
armEOF(false);
}
} else {
setReaderReady(true);
setTimeout(readACard, 1000); // delay until the reader can come up to speed...
}
}
}
function CRStopBtn_onclick(ev) {
/* Handle the click event for the STOP button */
if (readerState == readerNotReady) {
armEOF(false);
} else if (readerState == readerReady) {
setReaderReady(false);
}
}
function CREOFBtn_onclick(ev) {
/* Handle the click event for the EOF button */
armEOF(!eofArmed);
}
function CRProgressBar_onclick(ev) {
/* Handle the click event for the "input hopper" progress bar */
if (bufferOffset < bufferLength && readerState == readerNotReady) {
if (confirm("Do you want to clear the reader input hopper?")) {
buffer = "";
bufferLength = 0;
bufferOffset = 0;
$$("CRProgressBar").value = 0;
}
}
}
function fileLoader_onLoad(ev) {
/* Handle the onload event for a Text FileReader */
if (bufferOffset < bufferLength) {
buffer = buffer.substring(bufferOffset);
} else {
clearPanel();
buffer = "";
}
buffer += ev.target.result;
bufferOffset = 0;
bufferLength = buffer.length;
$$("CRProgressBar").value = buffer.length;
$$("CRProgressBar").max = buffer.length;
}
function fileSelector_onChange(ev) {
/* Handle the <input type=file> onchange event when a file is selected */
var f = ev.target.files[0];
var reader = new FileReader();
/********************
alert("File selected: " + f.name +
"\nModified " + f.lastModifiedDate +
"\nType=" + f.type + ", Size=" + f.size + " octets");
********************/
reader.onload = fileLoader_onLoad;
reader.readAsText(f);
}
function checkBrowser() {
/* Checks whether this browser can support the necessary stuff */
var missing = "";
if (!window.File) {missing += ", File"}
if (!window.FileReader) {missing += ", FileReader"}
if (!window.FileList) {missing += ", FileList"}
if (!window.Blob) {missing += ", Blob"}
if (!window.ArrayBuffer) {missing += ", ArrayBuffer"}
if (!window.DataView) {missing += ", DataView"}
if (missing.length == 0) {
return false;
} else {
alert("No can do... your browser does not support the following features:\n" + missing.substring(2));
return true;
}
}
/* Start of window.onload() */
if (checkBrowser()) {
return;
}
armEOF(false);
setReaderReady(false);
$$("CRFileSelector").addEventListener("change", fileSelector_onChange, false);
$$("CRStartBtn").addEventListener("click", CRStartBtn_onclick, false);
$$("CRStopBtn").addEventListener("click", CRStopBtn_onclick, false);
$$("CREOFBtn").addEventListener("click", CREOFBtn_onclick, false);
$$("CRProgressBar").addEventListener("click", CRProgressBar_onclick, false);
outHopperFrame.contentDocument.head.innerHTML += "<style>" +
"BODY {background-color: #F0DCB0} " +
"PRE {margin: 0; font-size: 8pt; font-family: Lucida Sans Typewriter, Courier New, Courier, monospace}" +
"</style>";
outHopper = document.createElement("pre");
outHopperFrame.contentDocument.body.appendChild(outHopper);
//endOfOutHopper = document.createElement("div");
//endOfOutHopper.appendChild(document.createTextNode("\xA0"));
//outHopperFrame.contentDocument.body.appendChild(endOfOutHopper);
}, false);
</script>
</head>
<body>
<div>
retro-B5500 Card Reader Prototype
</div>
<div id=CardReaderPanel>
<button id=CRNotReadyLight class="redButton redLit">NOT READY</button>
<button id=CRStartBtn class="greenButton">START</button>
<button id=CREOFBtn class="redButton">EOF</button>
<button id=CRStopBtn class="redButton">STOP</button>
<input id=CRFileSelector type=file size=90>
<progress id=CRProgressBar min=0 max=100 value=0 title="Click to clear input hopper"></progress>
<iframe id=CROutHopperFrame scrolling=auto></iframe>
</div>
<pre id=TextPanel>
</pre>
</body>
</html>