kaylee
/
cpu-simulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cpu-simulator/index.html

98 lines
6.8 KiB
HTML
Raw Normal View History

initial spaghetti code
2023-12-15 19:43:36 +00:00
<!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>&lt; step back</button>
&nbsp;
<button id="play" onclick="tick=true; clockTick(1200); runLabel.innerHTML='Run <i>(running)</i>'">Run</button>
&nbsp;
<button onclick="tick=false; runLabel.innerHTML='Run <i>(stopped)</i>'" id="stop">Stop</button>
&nbsp;
<button id="forward" onclick="clockTick(1200,true)">&gt; step forward</button>
&nbsp;
<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'>&nbsp;&nbsp;&nbsp;</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&nbsp;<span id="label_mempage">000</span>&nbsp;of 255</div>
<div class='center_holder' style="margin-top:5px;"><span style="cursor:pointer;" onclick="prevMemPage()">&lt;-</span> &nbsp; <span style="cursor:pointer;" onclick="nextMemPage()">-&gt;</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>