github.com/pkimpel.retro-b5500
1
0
Fork 0
mirror of https://github.com/pkimpel/retro-b5500.git synced 2026-02-11 10:55:09 +00:00
Code Releases Activity

Reorganize webUI folder; implement SPO UI using a <textarea>.

Browse Source
This commit is contained in:
paul
2012-12-16 20:23:04 +00:00
parent 925bc93e59
commit dbc4bcaf56
17 changed files with 272 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
webUI/B5500Console.css
View File

@@ -20,22 +20,6 @@ DIV#consoleDiv {
height: 72px;
padding: 32px;
background-color: #666666}
DIV#SPODiv {
position: relative;
width: 1052px;
margin-top: 1em;
text-align: center}
DIV#SPOInnerDiv {
position: relative;
background-color: #FDA;
margin-left: auto;
margin-right: auto;
border-radius: 32px;
padding: 2em;
text-align: left;
width: 800px}
DIV#BurroughsLogo {
background-color: black;
@@ -57,57 +41,6 @@ DIV#B5500Logo {
top: 72px;
right: 32px}
DIV.blackButton {
background-color: black;
color: white;
font-size: 10px;
position: absolute;
top: 32px;
width: 48px;
height: 32px;
text-align: center;
padding: 2px;
border: 1px solid #DDDDDD;
border-radius: 4px}
DIV.whiteButton {
background-color: #CCCCCC;
color: black;
font-size: 10px;
position: absolute;
top: 32px;
width: 48px;
height: 32px;
text-align: center;
padding: 2px;
border: 1px solid #DDDDDD;
border-radius: 4px}
DIV.whiteLit {
background-color: white}
DIV.yellowButton {
background-color: #999900;
color: black;
font-size: 10px;
position: absolute;
top: 32px;
width: 48px;
height: 32px;
text-align: center;
padding: 2px;
border: 2px solid #DDDDDD;
border-radius: 4px}
DIV.yellowLit {
background-color: #FFFF00}
DIV.buttonCaption {
font-family: Arial Rounded, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
margin-top: 0.25em}
IMG#BurroughsLogoImage {
width: 150px;
text-align: center;
@@ -116,11 +49,6 @@ IMG#BurroughsLogoImage {
padding-bottom: 3px;
padding-left: 8px;
padding-right: 8px}
IMG#TeletypeLogo {
position: absolute;
top: 32px;
right: 64px}
BUTTON.whiteButton {
position: absolute;
@@ -158,6 +86,9 @@ BUTTON.yellowButton {
border: 1px solid #DDD;
border-radius: 4px}
BUTTON.whiteLit {
background-color: white}
BUTTON.yellowLit {
background-color: #FFFF00}
@@ -166,93 +97,47 @@ BUTTON.blackBorder {
BUTTON#HaltBtn {
top: 31px;
right: 1020px}
left: 32px}
BUTTON#NotReadyBtn {
top: 31px;
right: 920px}
left: 132px}
BUTTON#LoadSelectBtn {
top: 31px;
right: 850px}
left: 202px}
BUTTON#LoadBtn {
top: 31px;
right: 780px}
left: 272px}
BUTTON#MemoryCheckBtn {
top: 31px;
right: 680px}
left: 372px}
BUTTON#ANormalBtn {
top: 31px;
right: 610px}
left: 442px}
BUTTON#AControlBtn {
top: 31px;
right: 540px}
left: 512px}
BUTTON#BNormalBtn {
top: 31px;
right: 470px}
left: 582px}
BUTTON#BControlBtn {
top: 31px;
right: 400px}
left: 652px}
BUTTON#PowerOnBtn {
top: 31px;
right: 300px}
left: 752px}
BUTTON#PowerOffBtn {
top: 31px;
right: 230px}
BUTTON#SPOReadyBtn {
bottom: 256px;
right: 120px}
BUTTON#SPOPowerBtn {
bottom: 256px;
right: 44px}
BUTTON#SPORemoteBtn {
bottom: 200px;
right: 120px}
BUTTON#SPOLocalBtn {
bottom: 200px;
right: 44px}
BUTTON#SPOInputRequestBtn {
bottom: 144px;
right: 120px}
BUTTON#SPOEndOfMessageBtn {
bottom: 144px;
right: 44px}
BUTTON#SPOBlank1Btn {
bottom: 88px;
right: 120px}
BUTTON#SPOErrorBtn {
bottom: 88px;
right: 44px}
BUTTON#SPOBlank2Btn {
bottom: 32px;
right: 120px}
BUTTON#SPOBlank3Btn {
bottom: 32px;
right: 44px}
TEXTAREA#SPOUT {
width: 620px;
/*
font-family: Lucida Sans Typewriter, Courier New, Courier, monospace;
font-size: 10pt */ }
left: 822px}
.center {
text-align: center}

21
webUI/B5500Console.html
View File

@@ -81,6 +81,10 @@ var PowerOffBtn_Click = function() {
}
return true;
};
window.onload = function() {
var spoWin = window.open("B5500SPOUnit.html", "SPOWin", "scrollbars,resizable");
};
</script>
</head>
@@ -110,22 +114,5 @@ var PowerOffBtn_Click = function() {
<div id=B5500Logo> B 5500 </div>
</div>
<div id=SPODiv>
<div id=SPOInnerDiv>
<img id=TeletypeLogo src="TeletypeLogo.gif">
<textarea id=SPOUT rows=30 cols=73 ></textarea>
<button id=SPOReadyBtn class="yellowButton blackBorder yellowLit">READY</button>
<button id=SPOPowerBtn class=blackButton>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<br>REQUEST</button>
<button id=SPOEndOfMessageBtn class="yellowButton blackBorder">END OF<br>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>

131
webUI/B5500SPOUnit.css Normal file
View File

@@ -0,0 +1,131 @@
/***********************************************************************
* retro-b5500/emulator B5500SPOUnit.css
************************************************************************
* Copyright (c) 2012, Nigel Williams and Paul Kimpel.
* Licensed under the MIT License, see http://www.opensource.org/licenses/mit-license.php
************************************************************************
* B5500 emulator SPO web interface style sheet.
************************************************************************
* 2012-12-16 P.Kimpel
* Original version, from B5500ConsoleUnit.css.
***********************************************************************/
BODY {
position: relative;
background-color: black;
margin: 4px}
DIV#SPODiv {
position: relative;
width: 800px;
background-color: #FDA;
border-radius: 32px;
padding: 2em;
text-align: left}
IMG#TeletypeLogo {
position: absolute;
top: 32px;
right: 64px}
BUTTON.whiteButton {
position: absolute;
background-color: #CCC;
color: black;
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 {
position: absolute;
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.yellowButton {
position: absolute;
background-color: #990;
color: black;
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.whiteLit {
background-color: white}
BUTTON.yellowLit {
background-color: #FFFF00}
BUTTON.blackBorder {
border: 1px solid black}
BUTTON#SPOReadyBtn {
bottom: 256px;
right: 120px}
BUTTON#SPOPowerBtn {
bottom: 256px;
right: 44px}
BUTTON#SPORemoteBtn {
bottom: 200px;
right: 120px}
BUTTON#SPOLocalBtn {
bottom: 200px;
right: 44px}
BUTTON#SPOInputRequestBtn {
bottom: 144px;
right: 120px}
BUTTON#SPOEndOfMessageBtn {
bottom: 144px;
right: 44px}
BUTTON#SPOBlank1Btn {
bottom: 88px;
right: 120px}
BUTTON#SPOErrorBtn {
bottom: 88px;
right: 44px}
BUTTON#SPOBlank2Btn {
bottom: 32px;
right: 120px}
BUTTON#SPOBlank3Btn {
bottom: 32px;
right: 44px}
TEXTAREA#SPOUT {
width: 620px;
/*
font-family: Lucida Sans Typewriter, Courier New, Courier, monospace;
font-size: 10pt */ }
.center {
text-align: center}
.data {
font-family: Courier New, Courier, monospace;
text-align: left}
.number {
font-family: Courier New, Courier, monospace;
text-align: right}

119
webUI/B5500SPOUnit.html Normal file
View File

@@ -0,0 +1,119 @@
<!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, 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 ta = $$("SPOUT");
if (col == 72) { // delay to fake the output of a carriage-return
setTimeout(function() {printChar(buffer, length, index, col+1, finished)}, 100);
} else if (col > 72) { // actually output the CR/LF
ta.value = ta.value + "\n";
ta.scrollTop = ta.scrollHeight;
if (index < length) { // more characters to print after the CR/LF
setTimeout(function() {printChar(buffer, length, index, 0, finished)}, 100);
} else { // message text is exhausted
finished();
}
} else { // print the character
if (index < length) {
ta.value = ta.value.substring(-32768) + String.fromCharCode(buffer[index]);
ta.scrollTop = ta.scrollHeight;
setTimeout(function() {printChar(buffer, length, index+1, col+1, finished)}, 100);
} else { // set up for the final CR/LF
setTimeout(function() {printChar(buffer, length, index, 72, finished)}, 100);
}
}
};
var print = function(buffer, length, finished) {
/* Prints the contents of the "buffer" for "length" characters */
printChar(buffer, length, 0, 0, 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";
for (x=1; x<30; x++) {
printText("");
}
printText("B5500 SPO Printing Test");
printText("");
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("What hath Barton wrought...");
printText("");
};
</script>
</head>
<body>
<div id=SPODiv>
<textarea id=SPOUT rows=30 cols=73></textarea>
<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>
</body>
</html>

BIN
webUI/Burroughs-Logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.3 KiB

0
webUI/B5500-Logo.jpg → webUI/prototypes/B5500-Logo.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

2
webUI/B5500ConsoleDemo.html → webUI/prototypes/B5500ConsoleDemo.html
View File

@@ -128,7 +128,7 @@ var PowerOffBtn_Click = function() {
</div>
<div id=BurroughsLogo>
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
<img id=BurroughsLogoImage src="../Burroughs-Logo-Neg.jpg">
</div>
<div id=B5500Logo> B 5500 Demo </div>

0
webUI/B5500DDPanel.js → webUI/prototypes/B5500DDPanel.js vendored
View File

0
webUI/B5500DistributionAndDisplay.css → webUI/prototypes/B5500DistributionAndDisplay.css
View File

0
webUI/B5500ProcessorPanel.html → webUI/prototypes/B5500ProcessorPanel.html
View File

0
webUI/B5500ProcessorPanel.js → webUI/prototypes/B5500ProcessorPanel.js vendored
View File

0
webUI/PanelTest.html → webUI/prototypes/PanelTest.html
View File

0
webUI/B5500SyllableDebugger.css → webUI/tools/B5500SyllableDebugger.css
View File

2
webUI/B5500SyllableDebugger.html → webUI/tools/B5500SyllableDebugger.html
View File

@@ -410,7 +410,7 @@ window.onload = function() {
<div id=LogoDiv>
<div id=BurroughsLogo>
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
<img id=BurroughsLogoImage src="../Burroughs-Logo-Neg.jpg">
</div>
<div id=B5500Logo>B 5500
</div>

2
webUI/B5500TestArithmetics.html → webUI/tools/B5500TestArithmetics.html
View File

@@ -199,7 +199,7 @@ window.onload = function() {
<div style="position:absolute; background-color:#666; width:230px; height: 136px; right:0; top:0">
<div id=BurroughsLogo>
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
<img id=BurroughsLogoImage src="../Burroughs-Logo-Neg.jpg">
</div>
<div id=B5500Logo>B 5500
</div>

0
webUI/B5500TestLoader.html → webUI/tools/B5500TestLoader.html
View File

2
webUI/B5500Testbed.html → webUI/tools/B5500Testbed.html
View File

@@ -93,7 +93,7 @@ window.onload = function() {
</div>
<div id=BurroughsLogo>
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
<img id=BurroughsLogoImage src="../Burroughs-Logo-Neg.jpg">
</div>
<div id=B5500Logo> B 5500 </div>