98 lines
6.8 KiB
HTML
Executable File
98 lines
6.8 KiB
HTML
Executable File
<!doctype html>
|
|
<html style="overflow:hidden;">
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
|
|
<title>CPU sim</title>
|
|
<script src="js/opcodes.js"></script>
|
|
<script src="js/index.js"></script>
|
|
<script src="js/assembler.js"></script>
|
|
</head>
|
|
<body>
|
|
<iframe id="ALUframe" src="/cpu/build/editor/?item=CPU_ALU" style="display:none"></iframe>
|
|
<iframe id="MUX1frame" src="/cpu/build/editor/?item=CPU_MUX" style="display:none"></iframe>
|
|
<iframe id="MUX2frame" src="/cpu/build/editor/?item=CPU_MUX" style="display:none"></iframe>
|
|
<canvas id="sim">
|
|
</canvas>
|
|
<div id="sidebar">
|
|
<h2 id="runLabel">Run</h2>
|
|
<br>
|
|
<div class="center_holder">
|
|
<button disabled>< step back</button>
|
|
|
|
<button id="play" onclick="tick=true; clockTick(1200); runLabel.innerHTML='Run <i>(running)</i>'">Run</button>
|
|
|
|
<button onclick="tick=false; runLabel.innerHTML='Run <i>(stopped)</i>'" id="stop">Stop</button>
|
|
|
|
<button id="forward" onclick="clockTick(1200,true)">> step forward</button>
|
|
|
|
<button id="reset" onclick="resetAll();runLabel.innerHTML='Run';clearInterval(clockTimer)">Reset</button>
|
|
</div>
|
|
<h2>Program</h2>
|
|
<br>
|
|
<div class="center_holder">
|
|
<textarea spellcheck=false id="program"></textarea>
|
|
</div>
|
|
<div id="label_error" style="color:red" class="hidden">Invalid assembly code.</div>
|
|
<div class="right_holder">
|
|
<button id="compile" onclick="runLabel.innerHTML='Run';compile()">Load Program</button>
|
|
</div>
|
|
<br>
|
|
<hr>
|
|
<br>
|
|
<h2>Input</h2>
|
|
<div class="center_holder">
|
|
<input id="input" style="width:90%;margin-top:10px;"></input>
|
|
</div>
|
|
<h2>Output</h2>
|
|
<div class="center_holder">
|
|
<style>
|
|
input:disabled {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
</style>
|
|
<input disabled id="output" style="width:90%;margin-top:10px;"></input>
|
|
</div>
|
|
<br>
|
|
<input type="checkbox" checked id="ascii" />ASCII?</input>
|
|
<br><br>
|
|
<br>
|
|
<hr>
|
|
<br>
|
|
<h2>Memory</h2>
|
|
<div class="center_holder">
|
|
<style>
|
|
.nonzero { color: white; }
|
|
.hidden {visibility:hidden;}
|
|
</style>
|
|
<table id="memory">
|
|
<tr class='label'><td class='label'> </td><td>x00</td><td>x01</td><td>x02</td><td>x03</td><td>x04</td><td>x05</td><td>x06</td><td>x07</td><td>x08</td><td>x09</td><td>x0A</td><td>x0B</td><td>x0C</td><td>x0D</td><td>x0E</td><td>x0F</td></tr>
|
|
<tr><td class='label'>x00</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x10</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x20</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x30</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x40</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x50</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x60</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x70</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x80</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>x90</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>xA0</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>xB0</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>xC0</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>xD0</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>xE0</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
<tr><td class='label'>xF0</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td><td>000</td>
|
|
</table>
|
|
</div>
|
|
<div class='center_holder' style="margin-top:5px;">
|
|
page <span id="label_mempage">000</span> of 255</div>
|
|
<div class='center_holder' style="margin-top:5px;"><span style="cursor:pointer;" onclick="prevMemPage()"><-</span> <span style="cursor:pointer;" onclick="nextMemPage()">-></span></div>
|
|
|
|
</div>
|
|
<!-- make wget download these -->
|
|
<div style="display: none"><a href="cheat/">1</a><a href="uncheat/">2</a><a href="build/multiplexer/">3</a><a href="build/alu/">4</a></div>
|
|
</body>
|
|
</html>
|