1
0
mirror of https://github.com/pkimpel/retro-b5500.git synced 2026-05-01 05:59:39 +00:00
Files
pkimpel.retro-b5500/webUI/B5500SPOUnit.html

152 lines
6.5 KiB
HTML

<!DOCTYPE html>
<head>
<title>B5500 Emulator SPO Unit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Nigel Williams & Paul Kimpel">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link id=defaultStyleSheet rel=stylesheet type="text/css" href="B5500SPOUnit.css">
<script>
var $$ = function(e) {return document.getElementById(e)};
var msgTank = [];
var printFinished = function() {
if (msgTank.length > 1) {
msgTank = msgTank.slice(1);
print(msgTank[0], msgTank[0].length, printFinished);
} else {
msgTank = [];
//alert("Printing finished");
}
};
var printChar = function(buffer, length, index, col, scheduled, finished) {
/* Prints one character to the SPO. If more characters remain to be printed,
schedules itself 100 ms later to print the next one, otherwise calls finished().
If the column counter exceeds 72, a CR/LF are output. A CR/LF are also output
at the end of the message */
var body = $$("SPOUT").contentDocument.body;
var c;
var nextTime = scheduled + 100;
var delay = nextTime - new Date().getTime();
var line = body.lastChild;
if (col == 72) { // delay to fake the output of a carriage-return
setTimeout(function() {printChar(buffer, length, index, col+1, nextTime, finished)}, delay);
} else if (col > 72) { // actually output the CR/LF
line = document.createElement("br");
body.appendChild(line);
line.scrollIntoView();
if (index < length) { // more characters to print after the CR/LF
setTimeout(function() {printChar(buffer, length, index, 0, nextTime, finished)}, delay);
} else { // message text is exhausted
finished();
}
} else { // print the character
if (index < length) {
c = String.fromCharCode(buffer[index])
if (line && line.nodeName == "#text") {
line.nodeValue += c;
} else {
line = document.createTextNode(c);
body.appendChild(line);
$$("SPOUT").contentDocument.defaultView.scrollBy(0, 12);
}
setTimeout(function() {printChar(buffer, length, index+1, col+1, nextTime, finished)}, delay);
} else { // set up for the final CR/LF
setTimeout(function() {printChar(buffer, length, index, 72, nextTime, finished)}, delay);
}
}
};
var print = function(buffer, length, finished) {
/* Prints the contents of the "buffer" for "length" characters */
var body = $$("SPOUT").contentDocument.body;
var count = body.childNodes.length;
while (count-- > 500) {
body.removeChild(body.firstChild);
}
printChar(buffer, length, 0, 0, new Date().getTime(), finished);
};
var printText = function(msg) {
var buf = new Uint8Array(msg.length);
var length = msg.length;
var x;
for (x=0; x<length; x++) {
buf[x] = msg.charCodeAt(x);
}
msgTank.push(buf);
if (msgTank.length <= 1) {
print(buf, length, printFinished);
}
};
window.onload = function() {
var d = $$("SPODiv");
var x;
window.resizeBy(d.scrollWidth-document.body.scrollWidth,
d.scrollHeight-document.body.scrollHeight);
window.moveTo((screen.availWidth-window.outerWidth)/2, (screen.availHeight-window.outerHeight)/2);
$$("SPOReadyBtn").className = "yellowButton blackBorder yellowLit";
$$("SPORemoteBtn").className = "yellowButton blackBorder yellowLit";
// Since we are not loading a document into the IFRAME, we must specify the body styles for it here.
$$("SPOUT").contentDocument.body.style.backgroundColor = "#FFE";
$$("SPOUT").contentDocument.body.style.fontFamily = "Lucida Sans Typewriter, Courier New, Courier, monospace";
$$("SPOUT").contentDocument.body.style.fontSize = "10pt";
$$("SPOUT").contentDocument.body.style.whiteSpace = "pre";
// Scroll to the bottom of the IFRAME viewport
$$("SPOUT").contentDocument.body.innerHTML =
"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>" +
"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>";
printText("*** B5500 SPO Printing Test ***");
printText(" ");
printText("What hath Barton wrought?");
printText("");
printText("123456789.123456789.123456789.123456789.123456789.123456789.123456789.1");
printText("123456789.123456789.123456789.123456789.123456789.123456789.123456789.12");
printText("123456789.123456789.123456789.123456789.123456789.123456789.123456789.123");
printText("");
printText(" 10 20 30 40 50 60 70 80 90 100");
printText("123456789.123456789.123456789.123456789.123456789.123456789.123456789.123456789.123456789.123456789.");
printText("~");
printText("SPODiv.scrollWidth = " + d.scrollWidth);
printText("SPODiv.scrollHeight = " + d.scrollHeight);
printText("window.innerWidth = " + window.innerWidth);
printText("window.innerHeight = " + window.innerHeight);
};
</script>
</head>
<body>
<div id=SPODiv>
<iframe id=SPOUT scrolling=auto></iframe>
<div id=SPOControlsDiv>
<img id=TeletypeLogo src="TeletypeLogo.gif">
<button id=SPOReadyBtn class="yellowButton blackBorder">READY</button>
<button id=SPOPowerBtn class="blackButton blackBorder">POWER</button>
<button id=SPORemoteBtn class="yellowButton blackBorder">REMOTE</button>
<button id=SPOLocalBtn class="yellowButton blackBorder">LOCAL</button>
<button id=SPOInputRequestBtn class="yellowButton blackBorder">INPUT REQUEST</button>
<button id=SPOEndOfMessageBtn class="yellowButton blackBorder">END OF MESSAGE</button>
<button id=SPOBlank1Btn class="yellowButton blackBorder"></button>
<button id=SPOErrorBtn class="yellowButton blackBorder">ERROR</button>
<button id=SPOBlank2Btn class="yellowButton blackBorder"></button>
<button id=SPOBlank3Btn class="yellowButton blackBorder"></button>
</div>
</div>
</body>
</html>