add status leds and their setting callback

This commit is contained in:
wixette 2020-03-06 23:52:53 +08:00
parent 55f1cebc6e
commit 83f24f3694
2 changed files with 93 additions and 2 deletions

View File

@ -4,8 +4,24 @@
<meta charset="utf-8">
<style>
body {
border: 0;
margin: 30px;
font-family: monospace;
font-size: 14px;
}
div {
border: 0;
padding: 0;
margin: 0;
}
p, pre {
margin: 0;
padding: 0;
line-height: 20px;
}
.switch {
margin: 0 13px 0 0;
padding: 0;
}
</style>
</head>
@ -15,15 +31,52 @@
<hr>
<p>
<input type="button" value="INIT" onclick="init();">
<input type="button" value="TEST" onclick="test();">
<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>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 class="led">&#x25cf;</span>&nbsp;
INP&nbsp;<span class="led">&#x25cb;</span>&nbsp;
MI&nbsp;<span class="led">&#x25cf;</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 class="led">&#x25cf;</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">&#x25cf;</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>
@ -58,6 +111,28 @@
<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>
@ -89,10 +164,16 @@
}
}
function setWaitLedCallback(isRunning) {
var ledElem = document.getElementById('wait-led');
ledElem.innerHTML = isRunning ? '&#x25cb' : '&#x25cf';
}
var dumpCpuElem = document.getElementById('cpu');
var dumpMemElem = document.getElementById('mem');
var sim = new Sim8800(256, 1000000,
setAddressLedsCallback, setDataLedsCallback,
setWaitLedCallback,
dumpCpuElem, dumpMemElem);
function init() {

View File

@ -28,6 +28,8 @@ class Sim8800 {
* callback to set address LEDs.
* @param {function(Array<number>)?} setDataLedsCallback The
* callback to set data LEDs.
* @param {function(boolean)?} setWaitLedCallback The callback to
* set the WAIT LED.
* @param {Element?} dumpCpuElem The DOM element used to render
* dumped CPU status. null to disable the feature.
* @param {Element?} dumpMemElem The DOM element used to render
@ -35,11 +37,13 @@ class Sim8800 {
*/
constructor(memSize, clockRate,
setAddressLedsCallback, setDataLedsCallback,
setWaitLedCallback,
dumpCpuElem, dumpMemElem) {
this.clockRate = clockRate;
this.mem = new Array(memSize);
this.setAddressLedsCallback = setAddressLedsCallback;
this.setDataLedsCallback = setDataLedsCallback;
this.setWaitLedCallback = setWaitLedCallback;
this.dumpCpuElem = dumpCpuElem;
this.dumpMemElem = dumpMemElem;
this.running = false;
@ -294,6 +298,9 @@ class Sim8800 {
*/
stop() {
this.running = false;
if (this.setWaitLedCallback) {
this.setWaitLedCallback(this.running);
}
}
/**
@ -301,6 +308,9 @@ class Sim8800 {
*/
start() {
this.running = true;
if (this.setWaitLedCallback) {
this.setWaitLedCallback(this.running);
}
window.setTimeout(this.getClockTickerCallback(), 1);
}
};