8800-simulator/text-mode.html

<!doctype html>
<!--
   Copyright 2020 wixette@gmail.com

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
<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();"><br>
      <span class="comments">In HEX string, e.g.: 00 01 02 03 0a 0b 0c 0d</span>
    </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 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>
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00			`<!doctype html>`
add LICENCE notice to HTML page 2020-03-06 13:44:13 -05:00			`<!--`
			`Copyright 2020 wixette@gmail.com`

			`Licensed under the Apache License, Version 2.0 (the "License");`
			`you may not use this file except in compliance with the License.`
			`You may obtain a copy of the License at`

			`http://www.apache.org/licenses/LICENSE-2.0`

			`Unless required by applicable law or agreed to in writing, software`
			`distributed under the License is distributed on an "AS IS" BASIS,`
			`WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.`
			`See the License for the specific language governing permissions and`
			`limitations under the License.`
			`-->`
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00			`<html>`
			`<head>`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<meta charset="utf-8">`
			`<style>`
			`body {`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`border: 0;`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`margin: 30px;`
			`font-family: monospace;`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`font-size: 14px;`
			`}`
UI support for loading hex string data 2020-03-06 11:40:54 -05:00			`hr {`
			`border-top: #ccc solid 1px;`
			`height: 0;`
			`margin: 10px 0 10px 0;`
			`}`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`div {`
			`border: 0;`
			`padding: 0;`
			`margin: 0;`
			`}`
			`p, pre {`
			`margin: 0;`
			`padding: 0;`
			`line-height: 20px;`
			`}`
			`.switch {`
			`margin: 0 13px 0 0;`
			`padding: 0;`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`}`
UI support for loading hex string data 2020-03-06 11:40:54 -05:00			`.comments {`
			`font-size: 11px;`
			`color: #666;`
			`line-height: 14px;`
			`}`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`</style>`
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00			`</head>`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<body>`
			`<h2>Text-mode Altair 8800 simulator</h2>`

			`<hr>`

			`<p>`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`<input type="button" value="POWER ON" onclick="powerOn();">`
			`<input type="button" value="POWER OFF" onclick="powerOff();"> `
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<input type="button" value="RUN" onclick="run();">`
			`<input type="button" value="STOP" onclick="stop();">`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`<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();"> `
			`<input type="button" value="DEPOSIT" onclick="deposit();">`
			`<input type="button" value="DEPOSIT NEXT" onclick="depositNext();"> `
			`<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>`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`</p>`

			`<hr>`

UI support for loading hex string data 2020-03-06 11:40:54 -05:00			`<p>`
			`<input id="data" type="text" size="60"> `
update comments for the LOAD DATA box 2020-03-06 13:38:52 -05:00			`<input type="button" value="LOAD DATA" onclick="loadData();"><br>`
			`<span class="comments">In HEX string, e.g.: 00 01 02 03 0a 0b 0c 0d</span>`
UI support for loading hex string data 2020-03-06 11:40:54 -05:00			`</p>`

			`<hr>`

cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<p>LEDs: <!-- ● - on. ○ - off. -->`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`<div id="status-leds">`
			`<p>`
			`INTE <span class="led">○</span> `
			`PROT <span class="led">○</span> `
support poweron and power off 2020-03-06 11:11:13 -05:00			`MEMR <span id="memr-led" class="led">○</span> `
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`INP <span class="led">○</span> `
support poweron and power off 2020-03-06 11:11:13 -05:00			`MI <span id="mi-led" class="led">○</span> `
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`OUT <span class="led">○</span> `
			`HLTA <span class="led">○</span> `
			`STACK <span class="led">○</span> `
support poweron and power off 2020-03-06 11:11:13 -05:00			`WO <span id="wo-led" class="led">○</span> `
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`INT <span class="led">○</span> `
			`</p>`
			`</div>`

			`<div id="wait-leds">`
			`<p>`
support poweron and power off 2020-03-06 11:11:13 -05:00			`WAIT <span id="wait-led" class="led">○</span> `
add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`HLDA <span class="led">○</span> `
			`</p>`
			`</div>`

cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<div id="data-leds">`
			`<p>`
			`D7 D6 D5 D4 D3 D2 D1 D0<br>`
			`<span id="d7" class="led">○</span> `
			`<span id="d6" class="led">○</span> `
			`<span id="d5" class="led">○</span> `
			`<span id="d4" class="led">○</span> `
			`<span id="d3" class="led">○</span> `
			`<span id="d2" class="led">○</span> `
			`<span id="d1" class="led">○</span> `
			`<span id="d0" class="led">○</span> `
			`</p>`
			`</div>`
			`<div id="address-leds">`
			`<p>`
			`A15 A14 A13 A12 A11 A10 A9  A8  A7  A6  A5  A4  A3  A2  A1  A0<br>`
			`<span id="a15" class="led">○</span>  `
			`<span id="a14" class="led">○</span>  `
			`<span id="a13" class="led">○</span>  `
			`<span id="a12" class="led">○</span>  `
			`<span id="a11" class="led">○</span>  `
			`<span id="a10" class="led">○</span>  `
			`<span id="a9" class="led">○</span>  `
			`<span id="a8" class="led">○</span>  `
			`<span id="a7" class="led">○</span>  `
			`<span id="a6" class="led">○</span>  `
			`<span id="a5" class="led">○</span>  `
			`<span id="a4" class="led">○</span>  `
			`<span id="a3" class="led">○</span>  `
			`<span id="a2" class="led">○</span>  `
			`<span id="a1" class="led">○</span>  `
			`<span id="a0" class="led">○</span>  `
			`</p>`
			`</div>`
add status leds and their setting callback 2020-03-06 10:52:53 -05:00
			`<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>`

cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`</p>`

			`<hr>`

			`<p>CPU dump:`
			`<div id="cpu"></div>`
			`</p>`
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<hr>`
connected to the 8080 cpu simulator. also added the code to dump cpu status. 2020-03-06 00:06:47 -05:00
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`<p>Memory dump:`
			`<div id="mem"></div>`
			`</p>`
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00
			`<script src="js/8080.js"></script>`
			`<script src="js/sim8800.js"></script>`
			`<script>`
callbacks to support update LEDs 2020-03-06 10:20:38 -05:00			`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';`
			`}`
			`}`

add status leds and their setting callback 2020-03-06 10:52:53 -05:00			`function setWaitLedCallback(isRunning) {`
			`var ledElem = document.getElementById('wait-led');`
			`ledElem.innerHTML = isRunning ? '&#x25cb' : '&#x25cf';`
			`}`

support poweron and power off 2020-03-06 11:11:13 -05:00			`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';`
			`}`
			`}`

move all DOM Element out of the class 2020-03-06 11:20:04 -05:00			`function dumpCpuCallback(dumpHtml) {`
			`var dumpCpuElem = document.getElementById('cpu');`
			`dumpCpuElem.innerHTML = dumpHtml;`
			`}`

			`function dumpMemCallback(dumpHtml) {`
			`var dumpMemElem = document.getElementById('mem');`
			`dumpMemElem.innerHTML = dumpHtml;`
			`}`

refactor the logic of examine 2020-03-06 12:37:05 -05:00			`function getInputAddressCallback() {`
examine and examineNext logic 2020-03-06 12:26:25 -05:00			`var word = 0;`
			`for (let i = 0; i < 16; i++) {`
			`var switchElem = document.getElementById('s' + i);`
			`if (switchElem.checked) {`
			`word \|= 1 << i;`
			`}`
			`}`
			`return word;`
			`}`

cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`var sim = new Sim8800(256, 1000000,`
callbacks to support update LEDs 2020-03-06 10:20:38 -05:00			`setAddressLedsCallback, setDataLedsCallback,`
support poweron and power off 2020-03-06 11:11:13 -05:00			`setWaitLedCallback, setStatusLedsCallback,`
refactor the logic of examine 2020-03-06 12:37:05 -05:00			`getInputAddressCallback,`
move all DOM Element out of the class 2020-03-06 11:20:04 -05:00			`dumpCpuCallback, dumpMemCallback);`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00
support poweron and power off 2020-03-06 11:11:13 -05:00			`function powerOn() {`
			`sim.powerOn();`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`}`

support poweron and power off 2020-03-06 11:11:13 -05:00			`function powerOff() {`
			`sim.powerOff();`
cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`}`

fix the reset logic 2020-03-06 11:58:08 -05:00			`function reset() {`
			`sim.reset();`
			`}`

UI support for loading hex string data 2020-03-06 11:40:54 -05:00			`function loadData() {`
			`var data = document.getElementById("data").value;`
			`sim.loadDataAsHexString(0, data);`
			`}`

cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`function run() {`
			`sim.start();`
			`}`

UI support for loading hex string data 2020-03-06 11:40:54 -05:00			`function singleStep() {`
			`sim.step(1);`
			`}`

cpu features added. text-mode simulator interface under dev 2020-03-06 09:15:26 -05:00			`function stop() {`
			`sim.stop();`
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00			`}`
examine and examineNext logic 2020-03-06 12:26:25 -05:00
			`function examine() {`
refactor the logic of examine 2020-03-06 12:37:05 -05:00			`sim.examine();`
examine and examineNext logic 2020-03-06 12:26:25 -05:00			`}`

			`function examineNext() {`
			`sim.examineNext();`
			`}`
deposit logic complete 2020-03-06 12:51:01 -05:00
			`function deposit() {`
			`sim.deposit();`
			`}`

			`function depositNext() {`
			`sim.depositNext();`
			`}`
init code for 8800 simulator, with a simple temporary test code in index.html 2020-03-05 23:36:30 -05:00			`</script>`
			`</body>`
			`</html>`