disassembler.html

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>AppleToo.js</title>
	<script src="appletoo.js"></script>
	<script src="disk2.js"></script>
	<script src="disassembler.js"></script>
	<script src="CPU6502.js"></script>
	<script src="memorymap.js"></script>

	<link rel="stylesheet" href="CodeMirror/lib/codemirror.css">
	<script src="CodeMirror/lib/codemirror.js"></script>
	<script src="CodeMirror/mode/javascript/javascript.js"></script>

	<style type="text/css" media="screen">
		canvas {
			border: 1px solid #DDD;
			margin: 0 auto;
			display: block;
		}
		body {
			background-color: #000000; /*#222;*/
		}
		#control {
			width: 820px; /*Same width as canvas */
			border: 1px solid #DDD;
			margin: 1em auto;
			padding: 10px;
			color: #EEEEEE;
		}
		#main {
			float: left;
		}
		#editor_div {
			float: left;
			width: 350;
			height: auto;
			margin-left:20px;
			background-color: #EEEEEE;
		}
		#hex_field {
			width: 820px;
			height: 100px;
			background-color: #EEEEEE;
		}
		#start_field {
			background-color: #EEEEEE;
		}
		#control_div {
			height: auto;
		}
		.data_table {
			border-collapse: collapse;
			padding: 5px;
		}
		.data_table td {
			font-family: menlo, consolas, monospace;
			padding: 3px;
			border: 1px solid black;
		}

		label {
			display: block;
			margin-top: 5px;
			margin-bottom: 5px;
		}

		.CodeMirror-Lines .highlighted {
			background-color: yellow;
		}

		.CodeMirror-scroll {
			height: 400px;
			overflow-y: hidden;
			overflow-x: hidden;
		}
	</style>

	<script type="text/javascript" charset="utf-8">
		window.onload = function() {
			var appleScreen = document.getElementById("screen");
			a = new AppleToo({compatibility: false});
			appleScreen.width = a.char_w * 40;
			appleScreen.height = a.char_h * 24;
			document.onkeypress = function(e) {
				if (a.is_running() && e.charCode < 0x80) {
					a.write_char_code(e.charCode + 128);
					e.preventDefault();
				}
			};
			document.onkeydown = function(e) {
				if (a.is_running()) {
					var value = 0;
					switch (e.keyCode) {
						case 8:
							value = 0x7f;
							break;
						case 27:
							value = 27;
							break;
						case 37:
							value = 8;
							break;
						case 38:
							value = 11;
							break;
						case 39:
							value = 21;
							break;
						case 40:
							value = 10;
							break;
					}
					if (value != 0){
						a.write_char_code(value + 128);
						e.preventDefault();
					}
				}
			};

			window.d = new DiskII(a);
			a.setPeripheral(d, 1);

			var code_div = document.getElementById("code_div");
			
			mirror = CodeMirror(function (elt) {
				code_div.appendChild(elt);
			}, 
			{
				lineNumbers: true,
				readOnly: true,
				lineNumberFormatter: formatHex
			});

			getRunButton().disabled = true;
			getStopButton().disabled = true;
			getStepButton().disabled = true;

			readMap = new MemoryMap(256*256);
			writeMap = new MemoryMap(256*256);

			a.cpu.add_memory_callback(this, function(addr, val) {
				var map;
				if (typeof val === "undefined") {
					//This is a memory read operation
					map = readMap;
				} else {
					map = writeMap;
				}
				map.increment(addr);
			});
		};

		function getLoadButton() {
			return document.getElementById("load_button");
		}

		function getStepButton() {
			return document.getElementById("step_button");
		}

		function getRunButton() {
			return document.getElementById("run_button");
		}

		function getStopButton() {
			return document.getElementById("stop_button");
		}

		function load() {
			var data = document.getElementById("hex_field").value;
			var hex_location = document.getElementById("start_field").value;

			var parsed_hex_loc = parseInt(hex_location, 16);

			a.load_memory(parsed_hex_loc, data);

			var disassembled_str = "";
			disassemble(data, parsed_hex_loc, function(str) { 
				disassembled_str += (str + "\n")
			});

			mirror.setOption("firstLineNumber", parsed_hex_loc);
			mirror.setValue(disassembled_str);

			getRunButton().disabled = false;
			getStepButton().disabled = false;
			getStopButton().disabled = true;

			readMap.clear();
			writeMap.clear();
		};

		function run(run_in_loop) {
			var pc = document.getElementById("pc_field").value;
			var pc_num = a.cpu.read_word(0xFFFC);

			if (pc.length > 0) {
				pc_num = parseInt(pc, 16);

				if (isNaN(pc_num)) {
					throw new Error(pc + " is not a valid program counter.");
				}
			}

			a.cpu.PC = pc_num;

			if (run_in_loop == true) {
				a.run_loop();

				getRunButton().disabled = true;
				getStepButton().disabled = true;
				getStopButton().disabled = false;
				getLoadButton().disabled = true;

			} else {
				highlight_line();
				a.run_step();
				highlight_line();

				display_registers();
				display_stack();

				getRunButton().disabled = false;
				getStopButton().disabled = true;
				getLoadButton().disabled = false;
			}


		};

		function stop() {
			a.stop();
			var pc_field = document.getElementById("pc_field");
			pc_field.value = "0x" + formatHex(a.cpu.PC);

			getLoadButton().disabled = false;
			getRunButton().disabled = false;
			getStepButton().disabled = false;
			getStopButton().disabled = true;

			readMap.draw(document.getElementById("memory_map_reads"));
			writeMap.draw(document.getElementById("memory_map_writes"));
		};

		highlighted_line = undefined;

		function highlight_line() {

			if (typeof highlighted_line != "undefined") {
				mirror.removeLineClass(highlighted_line, "background", "highlighted");
			}

			highlighted_line = a.cpu.PC - parseInt(document.getElementById("start_field").value, 16);
			var coords = mirror.charCoords({ line: highlighted_line, ch: 0 }, "local");
			
			mirror.addLineClass(highlighted_line, "background", "highlighted");
			mirror.scrollTo(0, coords.top - 30);

			var pc_field = document.getElementById("pc_field");
			pc_field.value = "0x" + formatHex(a.cpu.PC);
		};

		function display_registers() {
			document.getElementById("register_ac").firstChild.nodeValue = "0x" + formatHex(a.cpu.AC);
			document.getElementById("register_xr").firstChild.nodeValue = "0x" + formatHex(a.cpu.XR);
			document.getElementById("register_yr").firstChild.nodeValue = "0x" + formatHex(a.cpu.YR);

			document.getElementById("register_sr").firstChild.nodeValue = "0x" + formatHex(a.cpu.SR);
			document.getElementById("register_sp").firstChild.nodeValue = "0x" + formatHex(a.cpu.SP);
			document.getElementById("register_pc").firstChild.nodeValue = "0x" + formatHex(a.cpu.PC);
		}

		function run_step() {
			run(false);
		};

		function display_stack() {
			var stack = a.stack();
			var table = document.getElementById("stack_table");

			while (table.firstChild) {
				table.removeChild(table.firstChild);
			}

			var tbody = document.createElement("tbody");

			for (var i = 0; i < stack.length; i++) {
				var stack_element = stack[i];

				var tr = document.createElement("tr");
				var addr_cell = document.createElement("td");
				var data_cell = document.createElement("td");

				addr_cell.appendChild(document.createTextNode("0x" + formatHex(stack_element.address)));
				data_cell.appendChild(document.createTextNode("0x" + formatHex(stack_element.word)));

				tr.appendChild(addr_cell);
				tr.appendChild(data_cell);

				tbody.appendChild(tr);
			}

			table.appendChild(tbody);
		};

	</script>
</head>

<body>
	<div id="main">
		<canvas id="screen"></canvas>
		<div id="control">
			<label for="hex">Data</label>
			<textarea name="hex" id="hex_field"></textarea><br/>
			<label for="location">Start Address</label>
			<input type="text" name="location" id="start_field" value="0xC000"></input><br/>
			<label for="pc">Program Counter (Leave blank for reset vector) </label>
			<input type="text" name="pc" id="pc_field" value=""></input></br>
			<br/>
			<input type="submit" value="Load" onclick="load();" id="load_button"></input>
			<input type="submit" value="Run" onclick="run(true);" id="run_button"></input>
			<input type="submit" value="Stop" onclick="stop();" id="stop_button"></input>
		</div>
	</div>
	<div id="editor_div">
		<input type="submit" value="Step" onclick="run_step();" id="step_button"></input>
		<label for="code">Disassembled Code</label>
		<div id="code_div" name="code"></div>
		<div id="control_div">
			<label for="register_table">Registers</label>
			<table id="registers" class="data_table" name="register_table">
				<tr>
					<td>AC:</td>
					<td id="register_ac">0x00</td>
					<td>XR:</td>
					<td id="register_xr">0x00</td>
					<td>YR:</td>
					<td id="register_yr">0x00</td>
				</tr>
				<tr>
					<td>SR:</td>
					<td id="register_sr">0x00</td>
					<td>SP:</td>
					<td id="register_sp">0x00</td>
					<td>PC:</td>
					<td id="register_pc">0x00</td>
				</tr>
			</table>
			<label for="stack_table">Stack</label>
			<table id="stack_table" class="data_table" name="stack_table">
			</table>
			<label for="memory_map_writes">Memory Map (Writes)</label>
			<canvas name="memory_map_writes" id="memory_map_writes"></canvas>
			<label for="memory_map_reads">Memory Map (Reads)</label>
			<canvas name="memory_map_reads" id="memory_map_reads"></canvas>
		</div>
	</div>
</body>
</html>