-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (116 loc) · 6.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nand2Tetris</title>
</head>
<body>
<h1>Nand2Tetris Hack Computer</h1>
<h3>Javascript Re-Implementation - Pong preloaded!</h3>
<button id="tutorial_button">Show Tutorial</button>
<div id='tutorial' style='display: none;'>
<p>Tutorial (Video link coming soon)</p>
<a href="hack_original/test/test_page.html"> Test Page </a>
<ol>
<li>Just click START, Pong is preloaded! If your computer starts to chug set a higher [Cycles per frame] and lower FPS (see below). If you want to run your own program see below.</li>
<li>Load the Hack Computer Binary file (.hack) at the bottom of the page.</li>
<li>The binary will load automatically into the simulator. If you modify the binary from within the page click the 'Load in ROM' button to re-flash the ROM.</li>
<li> [Optional] Adjust settings: (default values are for the pong.hack program)
<ul>
<li><b>Number of setup cycles</b>: describes how many cpu cycles are run before refreshing the screen for the first time. If set to zero the processor directly starts the screen refresh loop (see below).</li>
<li><b>Cycles per frame</b>: describes how many cpu cycles are run before rendering each frame.</li>
<li><b>FPS</b>: describes how many frames are rendered each second. If FPS==0, then only the setup cycles are performed, so you can use manual refresh. Execution can be advanced with the 'Cycle' or 'Frame' buttons.</li>
<li><b>Ram write process</b>: used for some programs (id est rect.hack or add.hack) that require some values in RAM before the execution to work.</li>
<li> <b>CLICK 'WRITE'</b> </li>
<li>A (rough) estimate of the processor frequency is given by [Cycles per frame]*[FPS]. This does not take into consideration JS overheads.</li>
</ul>
</li>
<li> <b>CLICK 'START'</b> </li>
<li>While running:
<ul>
<li>The keyboard is automatically routed to the KBD register at any moment.</li>
<li><b>STOP</b>: stops the executions, reset the PC and wipes RAM.</li>
<li><b>Reset</b>: just resets the PC.</li>
<li><b>Cycle</b>: advances the cpu by one cycle without refreshing the screen. Better only use when FPS==0.</li>
<li><b>Frame</b>: advances the cpu by [Cycles per frame] cycles and refreshes the screen once. </li>
<li><b>Manual Refresh</b>: refreshes the screen once. </li>
</ul>
</li>
<li>Colors of pixel can be changed!</li>
<li>Have fun! Write me at magi.wanders@gmail.com for any question or suggestion, or directly contribute to the project with code or bug reports, it is all open source!</li>
</ol>
</div>
<br><br>
<button id="settings_button">Show Settings</button>
<div id='settings' style='display: none;margin-left: 50px;margin-top: 10px;padding-left: 5px;background-color: lightgrey;width:400px;'>
<!-- <br> -->
<!-- <button id="benchmark_button">Benchmark</button>
<p id='benchmark_results'>Benchmark Results will appear here.</p> -->
<label for="setup_cycles">Number of setup cycles:</label>
<input type="number" id="setup_cycles" name="setup_cycles" value = 5000000>
<br>
<label for="cycles_per_frame">Number of cycles per frame:</label>
<input type="number" id="cycles_per_frame" name="cycles_per_frame" value = 35000>
<br>
<label for="fps">Frames per second:</label>
<input type="number" id="fps" name="fps" value = 60>
<br>
<br>
<label for="fps">RAM[</label>
<input type="number" id="ram_cell" name="ram_cell" value = 0 style = 'width: 25px;'>
<label for="fps">] = </label>
<input type="number" id="ram_value" name="ram_value" value = 0 style = 'width: 55px;'>
<button id="write_button">Write</button>
<!-- <p>Calculated processor speed: </p> -->
<br>
</div>
<br><br>
<div style="display:inline-block;">Setup cycles: </div> <div id = "setup_cycles_value" style="display:inline-block;">5000000</div>
<br>
<div style="display:inline-block;">Cycles per frame: </div> <div id = "cycles_per_frame_value" style="display:inline-block;">35000</div>
<br>
<div style="display:inline-block;">FPS: </div> <div id = "fps_value" style="display:inline-block;">60</div>
<br><br>
<button id="start_button" style="background: lightgreen;">START</button>
<button id="reset_button">Reset</button>
<button id="cycle_button">Cycle</button>
<button id="frame_button">Frame</button>
<br><br>
<canvas id="screen" width=512 height=256 style="border: 1px solid;"> </canvas>
<br>
<button id="refresh_screen">Manual Refresh</button>
<label for="pixelOFF_color" style='margin-left: 100px;'>Pixel OFF:</label><input type="color" name="pixelOFF_color" id="pixelOFF_color" value="#EDEDED">
<label for="pixelON_color" style='margin-left: 25px;'>Pixel ON:</label><input type="color" name="pixelON_color" id="pixelON_color" value="#000000">
<h3 id='KBD'>KBD=""</h3>
<button id="read_rom_button">Read</button> ROM[
<input type="number" min=0 max=32767 id="read_rom_address">
] = <p style="display: inline-block;" id="read_rom_result">#</p>
<br>
<input type="file" id="rom_file" name="rom_file">
<br><br>
<div class="">
<!-- <button id="compile_button">Compile</button>
<button id="vmtranslate_button">Translate VM</button>
<button id="Assemble_button">Assemble</button> -->
<button id="load_button">Load in ROM</button>
</div>
<br><br>
<div class="">
<!-- <textarea id="jack" name="jack" rows="30" cols="40"></textarea>
<textarea id="vm" name="vm" rows="30" cols="15"></textarea>
<textarea id="asm" name="asm" rows="30" cols="10"></textarea> -->
<textarea id="program" name="program" rows="30" cols="17"></textarea>
</div>
<script src="hack_original/utility/instruction.js"></script>
<script src="hack_original/utility/defaults.js"></script>
<script src="hack_original/cpu/pc.js"></script>
<script src="hack_original/cpu/pc_controller.js"></script>
<script src="hack_original/cpu/alu.js"></script>
<script src="hack_original/cpu/cpu.js"></script>
<script src="hack_original/hack_original.js"></script>
<script src="hack_original/memory.js"></script>
<script src="hack_original/rom.js"></script>
<script src="hack_computer_original.js"></script>
</body>
</html>