8800-simulator/index.html
2020-03-07 01:51:01 +08:00

278 lines
8.6 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
border: 0;
margin: 30px;
font-family: monospace;
font-size: 14px;
}
hr {
border-top: #ccc solid 1px;
height: 0;
margin: 10px 0 10px 0;
}
div {
border: 0;
padding: 0;
margin: 0;
}
p, pre {
margin: 0;
padding: 0;
line-height: 20px;
}
.switch {
margin: 0 13px 0 0;
padding: 0;
}
.comments {
font-size: 11px;
color: #666;
line-height: 14px;
}
</style>
</head>
<body>
<h2>Text-mode Altair 8800 simulator</h2>
<hr>
<p>
<input type="button" value="POWER ON" onclick="powerOn();">
<input type="button" value="POWER OFF" onclick="powerOff();">&nbsp;
<input type="button" value="RUN" onclick="run();">
<input type="button" value="STOP" onclick="stop();">
<input type="button" value="SINGLE STEP" onclick="singleStep();">
</p>
<p>
<input type="button" value="EXAMINE" onclick="examine();">
<input type="button" value="EXAMINE NEXT" onclick="examineNext();">&nbsp;
<input type="button" value="DEPOSIT" onclick="deposit();">
<input type="button" value="DEPOSIT NEXT" onclick="depositNext();">&nbsp;
<input type="button" value="RESET" onclick="reset();">
<input type="button" value="CLR" disabled>
</p>
<p>
<input type="button" value="PROTECT" disabled>
<input type="button" value="UNPROTECT" disabled>
<input type="button" value="AUX" disabled>
<input type="button" value="AUX" disabled>
</p>
<hr>
<p>
<input id="data" type="text" size="60">&nbsp;
<input type="button" value="LOAD DATA" onclick="loadData();">
</p>
<pre class="comments">
Examples - binary data of some tiny programs:
db ff d3 ff c3 00 00 // Switch echo between A2 and A1.
3e 8c d3 ff 0f c3 02 00 // Pattern shift.</pre>
<hr>
<p>LEDs: <!-- &#x25cf; - on. &#x25cb; - off. -->
<div id="status-leds">
<p>
INTE&nbsp;<span class="led">&#x25cb;</span>&nbsp;
PROT&nbsp;<span class="led">&#x25cb;</span>&nbsp;
MEMR&nbsp;<span id="memr-led" class="led">&#x25cb;</span>&nbsp;
INP&nbsp;<span class="led">&#x25cb;</span>&nbsp;
MI&nbsp;<span id="mi-led" class="led">&#x25cb;</span>&nbsp;
OUT&nbsp;<span class="led">&#x25cb;</span>&nbsp;
HLTA&nbsp;<span class="led">&#x25cb;</span>&nbsp;
STACK&nbsp;<span class="led">&#x25cb;</span>&nbsp;
WO&nbsp;<span id="wo-led" class="led">&#x25cb;</span>&nbsp;
INT&nbsp;<span class="led">&#x25cb;</span>&nbsp;
</p>
</div>
<div id="wait-leds">
<p>
WAIT&nbsp;<span id="wait-led" class="led">&#x25cb;</span>&nbsp;
HLDA&nbsp;<span class="led">&#x25cb;</span>&nbsp;
</p>
</div>
<div id="data-leds">
<p>
D7&nbsp;D6&nbsp;D5&nbsp;D4&nbsp;D3&nbsp;D2&nbsp;D1&nbsp;D0<br>
<span id="d7" class="led">&#x25cb;</span>&nbsp;
<span id="d6" class="led">&#x25cb;</span>&nbsp;
<span id="d5" class="led">&#x25cb;</span>&nbsp;
<span id="d4" class="led">&#x25cb;</span>&nbsp;
<span id="d3" class="led">&#x25cb;</span>&nbsp;
<span id="d2" class="led">&#x25cb;</span>&nbsp;
<span id="d1" class="led">&#x25cb;</span>&nbsp;
<span id="d0" class="led">&#x25cb;</span>&nbsp;
</p>
</div>
<div id="address-leds">
<p>
A15&nbsp;A14&nbsp;A13&nbsp;A12&nbsp;A11&nbsp;A10&nbsp;A9&nbsp;&nbsp;A8&nbsp;&nbsp;A7&nbsp;&nbsp;A6&nbsp;&nbsp;A5&nbsp;&nbsp;A4&nbsp;&nbsp;A3&nbsp;&nbsp;A2&nbsp;&nbsp;A1&nbsp;&nbsp;A0<br>
<span id="a15" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a14" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a13" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a12" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a11" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a10" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a9" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a8" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a7" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a6" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a5" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a4" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a3" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a2" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a1" class="led">&#x25cb;</span>&nbsp;&nbsp;
<span id="a0" class="led">&#x25cb;</span>&nbsp;&nbsp;
</p>
</div>
<div id="switches">
<p>
<input type="checkbox" id="s15" class="switch" value="">
<input type="checkbox" id="s14" class="switch" value="">
<input type="checkbox" id="s13" class="switch" value="">
<input type="checkbox" id="s12" class="switch" value="">
<input type="checkbox" id="s11" class="switch" value="">
<input type="checkbox" id="s10" class="switch" value="">
<input type="checkbox" id="s9" class="switch" value="">
<input type="checkbox" id="s8" class="switch" value="">
<input type="checkbox" id="s7" class="switch" value="">
<input type="checkbox" id="s6" class="switch" value="">
<input type="checkbox" id="s5" class="switch" value="">
<input type="checkbox" id="s4" class="switch" value="">
<input type="checkbox" id="s3" class="switch" value="">
<input type="checkbox" id="s2" class="switch" value="">
<input type="checkbox" id="s1" class="switch" value="">
<input type="checkbox" id="s0" class="switch" value="">
</p>
</div>
</p>
<hr>
<p>CPU dump:
<div id="cpu"></div>
</p>
<hr>
<p>Memory dump:
<div id="mem"></div>
</p>
<script src="js/8080.js"></script>
<script src="js/sim8800.js"></script>
<script>
function setAddressLedsCallback(bits) {
for (let i = 0; i < bits.length; i++) {
var ledElem = document.getElementById('a' + i);
ledElem.innerHTML = bits[i] ? '&#x25cf' : '&#x25cb';
}
}
function setDataLedsCallback(bits) {
for (let i = 0; i < bits.length; i++) {
var ledElem = document.getElementById('d' + i);
ledElem.innerHTML = bits[i] ? '&#x25cf' : '&#x25cb';
}
}
function setWaitLedCallback(isRunning) {
var ledElem = document.getElementById('wait-led');
ledElem.innerHTML = isRunning ? '&#x25cb' : '&#x25cf';
}
function setStatusLedsCallback(isPoweredOn) {
var ledElems = [
document.getElementById('memr-led'),
document.getElementById('mi-led'),
document.getElementById('wo-led')
];
for (let i = 0; i < ledElems.length; i++) {
ledElems[i].innerHTML = isPoweredOn ? '&#x25cf' : '&#x25cb';
}
}
function dumpCpuCallback(dumpHtml) {
var dumpCpuElem = document.getElementById('cpu');
dumpCpuElem.innerHTML = dumpHtml;
}
function dumpMemCallback(dumpHtml) {
var dumpMemElem = document.getElementById('mem');
dumpMemElem.innerHTML = dumpHtml;
}
function getInputAddressCallback() {
var word = 0;
for (let i = 0; i < 16; i++) {
var switchElem = document.getElementById('s' + i);
if (switchElem.checked) {
word |= 1 << i;
}
}
return word;
}
var sim = new Sim8800(256, 1000000,
setAddressLedsCallback, setDataLedsCallback,
setWaitLedCallback, setStatusLedsCallback,
getInputAddressCallback,
dumpCpuCallback, dumpMemCallback);
function powerOn() {
sim.powerOn();
}
function powerOff() {
sim.powerOff();
}
function reset() {
sim.reset();
}
function loadData() {
var data = document.getElementById("data").value;
sim.loadDataAsHexString(0, data);
}
function run() {
sim.start();
}
function singleStep() {
sim.step(1);
}
function stop() {
sim.stop();
}
function examine() {
sim.examine();
}
function examineNext() {
sim.examineNext();
}
function deposit() {
sim.deposit();
}
function depositNext() {
sim.depositNext();
}
</script>
</body>
</html>