mirror of
https://github.com/pkimpel/retro-b5500.git
synced 2026-02-11 19:05:01 +00:00
Commit initial coding for console and SPO; fix minor spacing type in SYMBOL/ALGOL.
This commit is contained in:
266
webUI/B5500Console.css
Normal file
266
webUI/B5500Console.css
Normal file
@@ -0,0 +1,266 @@
|
||||
/***********************************************************************
|
||||
* retro-b5500/emulator B5500Console.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 Console web interface style sheet.
|
||||
************************************************************************
|
||||
* 2012-12-14 P.Kimpel
|
||||
* Original version, from B5500DistributionAndDisplay.css.
|
||||
***********************************************************************/
|
||||
|
||||
BODY {
|
||||
position: relative;
|
||||
margin: 4px}
|
||||
|
||||
DIV#consoleDiv {
|
||||
position: relative;
|
||||
width: 1052px;
|
||||
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;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
border-top: 3px solid #EEEEEE;
|
||||
border-bottom: 3px solid #EEEEEE}
|
||||
|
||||
DIV#B5500Logo {
|
||||
background-color: #EEEEEE;
|
||||
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
position: absolute;
|
||||
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;
|
||||
vertical-align: middle;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px}
|
||||
|
||||
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.yellowLit {
|
||||
background-color: #FFFF00}
|
||||
|
||||
BUTTON.blackBorder {
|
||||
border: 1px solid black}
|
||||
|
||||
BUTTON#HaltBtn {
|
||||
top: 31px;
|
||||
right: 1020px}
|
||||
|
||||
BUTTON#NotReadyBtn {
|
||||
top: 31px;
|
||||
right: 920px}
|
||||
|
||||
BUTTON#LoadSelectBtn {
|
||||
top: 31px;
|
||||
right: 850px}
|
||||
|
||||
BUTTON#LoadBtn {
|
||||
top: 31px;
|
||||
right: 780px}
|
||||
|
||||
BUTTON#MemoryCheckBtn {
|
||||
top: 31px;
|
||||
right: 680px}
|
||||
|
||||
BUTTON#ANormalBtn {
|
||||
top: 31px;
|
||||
right: 610px}
|
||||
|
||||
BUTTON#AControlBtn {
|
||||
top: 31px;
|
||||
right: 540px}
|
||||
|
||||
BUTTON#BNormalBtn {
|
||||
top: 31px;
|
||||
right: 470px}
|
||||
|
||||
BUTTON#BControlBtn {
|
||||
top: 31px;
|
||||
right: 400px}
|
||||
|
||||
BUTTON#PowerOnBtn {
|
||||
top: 31px;
|
||||
right: 300px}
|
||||
|
||||
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 */ }
|
||||
|
||||
.center {
|
||||
text-align: center}
|
||||
|
||||
.data {
|
||||
font-family: Courier New, Courier, monospace;
|
||||
text-align: left}
|
||||
|
||||
.number {
|
||||
font-family: Courier New, Courier, monospace;
|
||||
text-align: right}
|
||||
@@ -5,7 +5,7 @@
|
||||
<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="B5500DistributionAndDisplay.css">
|
||||
<link id=defaultStyleSheet rel=stylesheet type="text/css" href="B5500Console.css">
|
||||
|
||||
<script>
|
||||
var paPanel;
|
||||
@@ -84,57 +84,48 @@ var PowerOffBtn_Click = function() {
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class=consoleBody>
|
||||
<body>
|
||||
|
||||
<div style="position:relative; width:1300px; height:128px">
|
||||
<div id=consoleDiv>
|
||||
<button id=HaltBtn class=blackButton>HALT</button>
|
||||
|
||||
<div id=HaltBtn class=blackButton style="right:1200px">
|
||||
<div class=buttonCaption style="margin-top:1em">HALT</div>
|
||||
<button id=NotReadyBtn class=yellowButton>NOT READY</button>
|
||||
<button id=LoadSelectBtn class=blackButton>LOAD SELECT</button>
|
||||
<button id=LoadBtn class=blackButton>LOAD</button>
|
||||
|
||||
<button id=MemoryCheckBtn class=yellowButton>MEMORY CHECK</button>
|
||||
<button id=ANormalBtn class=yellowButton>A NORMAL</button>
|
||||
<button id=AControlBtn class=yellowButton>A CONTROL</button>
|
||||
<button id=BNormalBtn class=yellowButton>B NORMAL</button>
|
||||
<button id=BControlBtn class=yellowButton>B CONTROL</button>
|
||||
|
||||
<button id=PowerOnBtn class=whiteButton
|
||||
onclick="return PowerOnBtn_Click()">POWER<br>ON</button>
|
||||
<button id=PowerOffBtn class=blackButton
|
||||
onclick="return PowerOffBtn_Click()">POWER OFF</button>
|
||||
|
||||
<div id=BurroughsLogo>
|
||||
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
|
||||
</div>
|
||||
<div id=B5500Logo> B 5500 </div>
|
||||
</div>
|
||||
|
||||
<div id=NotReadyBtn class=yellowButton style="right:1050px">
|
||||
<div class=buttonCaption>NOT READY</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>
|
||||
<div id=LoadSelectBtn class=blackButton style="right:975px">
|
||||
<div class=buttonCaption>LOAD SELECT</div>
|
||||
</div>
|
||||
<div id=LoadBtn class=blackButton style="right:900px">
|
||||
<div class=buttonCaption style="margin-top:1em">LOAD</div>
|
||||
</div>
|
||||
|
||||
<div id=MemoryCheckBtn class=yellowButton style="right:750px">
|
||||
<div class=buttonCaption>MEMORY CHECK</div>
|
||||
</div>
|
||||
<div id=ANormalBtn class=yellowButton style="right:675px">
|
||||
<div class=buttonCaption>A NORMAL</div>
|
||||
</div>
|
||||
<div id=AControlBtn class=yellowButton style="right:600px">
|
||||
<div class=buttonCaption>A CONTROL</div>
|
||||
</div>
|
||||
<div id=BNormalBtn class=yellowButton style="right:525px">
|
||||
<div class=buttonCaption>B NORMAL</div>
|
||||
</div>
|
||||
<div id=BControlBtn class=yellowButton style="right:450px">
|
||||
<div class=buttonCaption>B CONTROL</div>
|
||||
|
||||
</div>
|
||||
<div id=PowerOnBtn class=whiteButton style="right:300px"
|
||||
onclick="return PowerOnBtn_Click()">
|
||||
<div class=buttonCaption>POWER ON</div>
|
||||
</div>
|
||||
<div id=PowerOffBtn class=blackButton style="right:225px"
|
||||
onclick="return PowerOffBtn_Click()">
|
||||
<div class=buttonCaption>POWER OFF</div>
|
||||
</div>
|
||||
|
||||
<div id=BurroughsLogo>
|
||||
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
|
||||
</div>
|
||||
<div id=B5500Logo> B 5500 </div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class=center>(Click the <b>Power On</b> button)</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
140
webUI/B5500ConsoleDemo.html
Normal file
140
webUI/B5500ConsoleDemo.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>B5500 Emulator Operator Console Demo</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="B5500DistributionAndDisplay.css">
|
||||
|
||||
<script>
|
||||
var paPanel;
|
||||
var paState = 0;
|
||||
var paTimer = null;
|
||||
var pbState = 0;
|
||||
var pbTimer = null;
|
||||
|
||||
var PAStateChange = function() {
|
||||
var aNormal = document.getElementById("ANormalBtn");
|
||||
var aControl = document.getElementById("AControlBtn");
|
||||
var delay = Math.random();
|
||||
|
||||
if (paState || !pbState) { // PA will go to Normal State onlyl if PB is already in Normal State
|
||||
paState = 0;
|
||||
aNormal.className = "yellowButton";
|
||||
aControl.className = "yellowButton yellowLit";
|
||||
delay = Math.log(delay+1)*250;
|
||||
} else {
|
||||
paState = 1;
|
||||
aNormal.className = "yellowButton yellowLit";
|
||||
aControl.className = "yellowButton";
|
||||
delay = Math.log(2-delay)*delay*250;
|
||||
}
|
||||
paTimer = setTimeout(PAStateChange, delay);
|
||||
};
|
||||
|
||||
var PBStateChange = function() {
|
||||
var bNormal = document.getElementById("BNormalBtn");
|
||||
var delay = Math.random();
|
||||
|
||||
if (pbState) {
|
||||
pbState = 0;
|
||||
bNormal.className = "yellowButton";
|
||||
delay = Math.log(delay+1)*1000;
|
||||
} else {
|
||||
pbState = 1;
|
||||
bNormal.className = "yellowButton yellowLit";
|
||||
delay = Math.log(2-delay)*delay*delay*1000;
|
||||
}
|
||||
pbTimer = setTimeout(PBStateChange, delay);
|
||||
};
|
||||
|
||||
var PowerOnBtn_Click = function() {
|
||||
document.getElementById("PowerOnBtn").className = "whiteButton whiteLit";
|
||||
document.getElementById("AControlBtn").className = "yellowButton yellowLit";
|
||||
paState = pbState = 0;
|
||||
paTimer = setTimeout(PAStateChange, 3000);
|
||||
pbTimer = setTimeout(PBStateChange, 10000);
|
||||
if (!paPanel) {
|
||||
paPanel = window.open("B5500ProcessorPanel.html", "PAPanel", "resizable=yes,scrollbars=yes,width=1,height=1");
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
var PowerOffBtn_Click = function() {
|
||||
paState = pbSate = 0;
|
||||
document.getElementById("PowerOnBtn").className = "whiteButton";
|
||||
document.getElementById("ANormalBtn").className = "yellowButton";
|
||||
document.getElementById("AControlBtn").className = "yellowButton";
|
||||
document.getElementById("BNormalBtn").className = "yellowButton";
|
||||
if (paPanel) {
|
||||
paPanel.close();
|
||||
paPanel = null;
|
||||
}
|
||||
if (paTimer) {
|
||||
clearTimeout(paTimer);
|
||||
paTimer = null;
|
||||
}
|
||||
if (pbTimer) {
|
||||
clearTimeout(pbTimer);
|
||||
pbTimer = null;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class=consoleBody>
|
||||
|
||||
<div style="position:relative; width:1300px; height:128px">
|
||||
|
||||
<div id=HaltBtn class=blackButton style="right:1200px">
|
||||
<div class=buttonCaption style="margin-top:1em">HALT</div>
|
||||
</div>
|
||||
|
||||
<div id=NotReadyBtn class=yellowButton style="right:1050px">
|
||||
<div class=buttonCaption>NOT READY</div>
|
||||
</div>
|
||||
<div id=LoadSelectBtn class=blackButton style="right:975px">
|
||||
<div class=buttonCaption>LOAD SELECT</div>
|
||||
</div>
|
||||
<div id=LoadBtn class=blackButton style="right:900px">
|
||||
<div class=buttonCaption style="margin-top:1em">LOAD</div>
|
||||
</div>
|
||||
|
||||
<div id=MemoryCheckBtn class=yellowButton style="right:750px">
|
||||
<div class=buttonCaption>MEMORY CHECK</div>
|
||||
</div>
|
||||
<div id=ANormalBtn class=yellowButton style="right:675px">
|
||||
<div class=buttonCaption>A NORMAL</div>
|
||||
</div>
|
||||
<div id=AControlBtn class=yellowButton style="right:600px">
|
||||
<div class=buttonCaption>A CONTROL</div>
|
||||
</div>
|
||||
<div id=BNormalBtn class=yellowButton style="right:525px">
|
||||
<div class=buttonCaption>B NORMAL</div>
|
||||
</div>
|
||||
<div id=BControlBtn class=yellowButton style="right:450px">
|
||||
<div class=buttonCaption>B CONTROL</div>
|
||||
|
||||
</div>
|
||||
<div id=PowerOnBtn class=whiteButton style="right:300px"
|
||||
onclick="return PowerOnBtn_Click()">
|
||||
<div class=buttonCaption>POWER ON</div>
|
||||
</div>
|
||||
<div id=PowerOffBtn class=blackButton style="right:225px"
|
||||
onclick="return PowerOffBtn_Click()">
|
||||
<div class=buttonCaption>POWER OFF</div>
|
||||
</div>
|
||||
|
||||
<div id=BurroughsLogo>
|
||||
<img id=BurroughsLogoImage src="Burroughs-Logo-Neg.jpg">
|
||||
</div>
|
||||
<div id=B5500Logo> B 5500 Demo </div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class=center>(Click the <b>Power On</b> button)</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,7 +16,7 @@ TD {
|
||||
<script src="../emulator/B5500CentralControl.js"></script>
|
||||
|
||||
<script>
|
||||
var displayRefreshPeriod = 50; // milliseconds
|
||||
var displayRefreshPeriod = 1000/60; // milliseconds
|
||||
var nextRefresh = 0;
|
||||
var refreshTimer = null;
|
||||
|
||||
|
||||
BIN
webUI/TeletypeLogo.gif
Normal file
BIN
webUI/TeletypeLogo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user