-
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
239 lines (210 loc) · 13.8 KB
/
Copy pathindex.html
File metadata and controls
239 lines (210 loc) · 13.8 KB
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/style/style.css">
<link rel="stylesheet" href="./static/style/modal.css">
<link rel="icon" href="./static/icons/favicon.ico">
<link rel="icon" href="./static/icons/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="./static/icons/apple-touch-icon.png" sizes="180x180" type="image/png">
<link rel="manifest" href="./manifest.json">
<title>Johnny Simulator</title>
<meta name="description"
content="Johnny is a simple, educational web-based simulator for a Von Neumann architecture computer, featuring RAM, microcode, and instruction execution. Created by Felix Heidisch (flxcraft).">
</head>
<body onload="initialize()">
<!-- data movement images -->
<img src="./static/img/overlays/db-ram.webp" draggable="false" id="overlay-db-ram" class="overlay"></img>
<img src="./static/img/overlays/ram-db.webp" draggable="false" id="overlay-ram-db" class="overlay"></img>
<img src="./static/img/overlays/db-ins.webp" draggable="false" id="overlay-db-ins" class="overlay"></img>
<img src="./static/img/overlays/db-acc.webp" draggable="false" id="overlay-db-acc" class="overlay"></img>
<img src="./static/img/overlays/acc-db.webp" draggable="false" id="overlay-acc-db" class="overlay"></img>
<img src="./static/img/overlays/ins-mc.webp" draggable="false" id="overlay-ins-mc" class="overlay"></img>
<img src="./static/img/overlays/ins-ab.webp" draggable="false" id="overlay-ins-ab" class="overlay"></img>
<img src="./static/img/overlays/ins-pc.webp" draggable="false" id="overlay-ins-pc" class="overlay"></img>
<img src="./static/img/overlays/pc-ab.webp" draggable="false" id="overlay-pc-ab" class="overlay"></img>
<img src="./static/img/overlays/equal-zero.webp" draggable="false" id="overlay-equal-zero"
class="overlay active"></img>
<img src="./static/img/overlays/control-unit-cover.webp" draggable="false" id="overlay-control-unit-cover"
class="overlay active"></img>
<!-- simulator header with options -->
<div class="header" id="ram-options">
<img src="./static/img/new-ram.png" draggable="false" onclick="resetRamToEmpty()" tabindex="0" alt="New RAM"
class="icon" title="New RAM">
<img src="./static/img/download-ram.png" draggable="false" onclick="downloadRamAsFile()" tabindex="0"
alt="Save RAM" class="icon" title="Save RAM">
<img src="./static/img/upload-ram.png" draggable="false" onclick="uploadRamAsFile()" tabindex="0" alt="Open RAM"
class="icon" title="Open RAM">
</div>
<div class="header" id="ram-control-options">
<img src="./static/img/macro-step.png" draggable="false" onclick="singleMacroStep()" tabindex="0"
alt="Macro Step" class="icon" title="Macro Step">
<img src="./static/img/macro-run.png" draggable="false" onclick="runMacroProgram()" tabindex="0"
alt="Run Program" class="icon" title="Run Program">
<input type="range" min="0" max="1000" step="1" onchange="updateMacroExecutionDelay()" id="macro-run-speed"
title="Execution Speed">
<img src="./static/img/macro-pause.png" draggable="false" onclick="stopMacroProgram()" tabindex="0"
alt="Pause Program" class="icon" title="Pause Program">
<img src="./static/img/macro-reset.png" draggable="false" onclick="resetSimulator()" tabindex="0"
alt="Reset Simulator" class="icon" title="Reset Simulator">
</div>
<div class="header" id="control-unit-toggle">
<img src="./static/img/control-unit-toggle.png" draggable="false" onclick="toggleControlUnit()" tabindex="0"
alt="Control Unit Toggle" class="icon" title="Control Unit Toggle">
</div>
<div class="header control-unit-element hidden" id="mc-options">
<img src="./static/img/micro-step.png" draggable="false" onclick="microStep()" tabindex="0" alt="Micro Step"
class="icon" title="Micro Step">
<img src="./static/img/new-microcode.png" draggable="false" onclick="resetMicrocodeToDefault()" tabindex="0"
alt="New Microcode" class="icon" title="New Microcode">
<img src="./static/img/download-microcode.png" draggable="false" onclick="downloadMicrocodeAsFile()"
tabindex="0" alt="Save Microcode" class="icon" title="Save Microcode">
<img src="./static/img/upload-microcode.png" draggable="false" onclick="uploadMicroCodeAsFile()" tabindex="0"
alt="Open Microcode" class="icon" title="Open Microcode">
</div>
<div class="header control-unit-element hidden" id="mc-record-panel">
<img src="./static/img/record-macro.png" draggable="false" onclick="toggleRecording()" tabindex="0"
alt="Record Macrocode" class="icon" title="Record Instruction">
<div class="input-group">
<input type="number" id="record-start-address" min="0" max="199" step="10" value="110"
placeholder="Start Address..." title="Address of the new Instruction in RAM (must be a multiple of 10)">
<input type="text" id="record-instruction-name" maxlength="5" value="NN" placeholder="Macro Name..."
title="Name of the Instruction (max. 5 characters)">
</div>
</div>
<div class="header" id="simulator-options">
<!-- <img src="./static/img/new-project.png" draggable="false" onclick="javascript:void(0)" tabindex="0" alt="New Project" class="icon"
title="New Project"> -->
<img src="./static/img/download-project.png" draggable="false" onclick="downloadProjectAsFile()" tabindex="0"
alt="Download Project" class="icon" title="Download Project">
<img src="./static/img/upload-project.png" draggable="false" onclick="uploadProjectFromFile()" tabindex="0"
alt="Upload Project" class="icon" title="Upload Project">
<img src="./static/img/settings.png" draggable="false" onclick="toggleSettingsModal()" tabindex="0"
alt="Settings" class="icon" title="Open Settings">
</div>
<!-- manual input fields -->
<form action="javascript:manualAddressBus();">
<input type="number" class="manual-input" id="ab-manual-input" min="0" max="999">
<button type="submit" class="manual-input" id="ab-manual-button" title="Set Address Bus">Manual ab</button>
</form>
<form action="javascript:manualDataBus();">
<input type="number" class="manual-input" id="db-manual-input" min="0" max="19999" step="0.001">
<button type="submit" class="manual-input" id="db-manual-button" title="Set Data Bus">Manual db</button>
</form>
<!-- display fields -->
<p class="field" id="ab-field">000</p>
<p class="field" id="db-field">00.000</p>
<p class="field" id="acc-field">00.000</p>
<p class="field control-unit-element hidden" id="ins-field"><span id="ins-high">00</span>.<span
id="ins-low">000</span></p>
<p class="field control-unit-element hidden" id="pc-field">000</p>
<p class="field control-unit-element hidden" id="mc-field">000</p>
<!-- normal buttons -->
<button class="button" id="ram-db-button" onclick="manualMicroStep(2)"
title="Set Data Bus to value from RAM">ram→db</button>
<button class="button" id="db-ram-button" onclick="manualMicroStep(1)"
title="Set value from Data Bus in RAM">db→ram</button>
<button class="button" id="db-acc-button" onclick="manualMicroStep(18)"
title="Set Accumulator to value from Data Bus">db→acc</button>
<button class="button" id="acc-db-button" onclick="manualMicroStep(15)"
title="Set value from Accumulator in Data Bus">acc→db</button>
<button class="button" id="acc-add-button" onclick="manualMicroStep(13)"
title="Add value from Data Bus to Accumulator">Plus</button>
<button class="button" id="acc-sub-button" onclick="manualMicroStep(14)"
title="Subtract value from Data Bus from Accumulator">Minus</button>
<button class="button" id="acc-inc-button" onclick="manualMicroStep(16)"
title="Increment Accumulator">acc++</button>
<button class="button" id="acc-dec-button" onclick="manualMicroStep(17)"
title="Decrement Accumulator">acc--</button>
<button class="button" id="acc-null-button" onclick="manualMicroStep(12)"
title="Set Accumulator to Zero">acc:=0</button>
<!-- control unit buttons -->
<button class="button control-unit-element hidden" id="db-ins-button" onclick="manualMicroStep(3)"
title="Set Instruction Register to value from Data Bus">db→ins</button>
<button class="button control-unit-element hidden" id="ins-pc-button" onclick="manualMicroStep(11)"
title="Set Program Counter to value from Instruction Register">ins→pc</button>
<button class="button control-unit-element hidden" id="ins-ab-button" onclick="manualMicroStep(4)"
title="Set Address Bus to value from Instruction Register">ins→ab</button>
<button class="button control-unit-element hidden" id="ins-mc-button" onclick="manualMicroStep(5)"
title="Set Microcode to value from Instruction Register">ins→mc</button>
<button class="button control-unit-element hidden" id="pc-ab-button" onclick="manualMicroStep(8)"
title="Set Address Bus to value from Program Counter">pc→ab</button>
<button class="button control-unit-element hidden" id="pc-inc-button" onclick="manualMicroStep(9)"
title="Increment Program Counter">pc++</button>
<button class="button control-unit-element hidden" id="pc-inc-null-button" onclick="manualMicroStep(10)"
title="Increment Program Counter if Accumulator is Zero">=0?pc++</button>
<button class="button control-unit-element hidden" id="mc-null-button" onclick="manualMicroStep(7)"
title="Set Microcode to Zero">mc:=0</button>
<button class="button control-unit-element hidden" id="mc-stop-button" onclick="manualMicroStep(19)"
title="Stop Microcode">STOP</button>
<!-- add row above button -->
<button class="button" id="add-row-above-button" onclick="insertRamRowAbove()" title="Insert RAM row above">Insert
Row</button>
<button class="button" id="delete-row-button" onclick="deleteRamRow()" title="Delete RAM row">Delete Row</button>
<!-- ram table -->
<div id="ram-table-container">
<table id="ram-table">
<!-- RAM rows will be dynamically generated here -->
</table>
</div>
<!-- microcode table -->
<div id="microcode-table-container" class="control-unit-element hidden">
<table id="microcode-table">
<!-- Microcode rows will be dynamically generated here -->
</table>
</div>
<!-- ram input arrow -->
<form action="javascript:manualRamInput()" class="ram-input" id="ram-input-arrow">
<input type="number" id="ram-input" min="0" max="19999" step="0.001">
<select id="ram-input-instruction-select" onchange="instructionSelectOnChange()"></select>
<button id="ram-input-button">Write</button>
</form>
<!-- settings modal -->
<div id="settings-modal" class="modal" onclick="toggleSettingsModal()">
<div class="modal-content" onclick="event.stopPropagation()">
<span class="close-button" onclick="toggleSettingsModal()">×</span>
<h2>Settings<small id="version-tag">Loading...</small></h2>
<div id="settings-container">
<!-- Settings will be dynamically generated here -->
</div>
<p id="license-info">This program is licensed under the <b>GNU Affero General Public License (AGPL)</b>. You
can find the
sourcecode and more information at <a href="https://github.com/flxcraft/johnny"
target="_blank">https://github.com/flxcraft/johnny</a>.</p>
<p>Feel free to report issues or feature requests on the <a href="https://github.com/flxcraft/johnny/issues"
target="_blank">GitHub Issues page</a>.</p>
<div id="version-footer"></div>
</div>
</div>
<!-- microcode edit modal -->
<div id="microcode-edit-modal" class="modal" onclick="closeMicroCodeEditModal()">
<div class="modal-content modal-content-edit" onclick="event.stopPropagation()">
<span class="close-button" onclick="closeMicroCodeEditModal()">×</span>
<h2>Edit Microcode <small>Address <span id="microcode-edit-address"></span></small></h2>
<form action="javascript:saveMicroCodeEdit()" class="edit-form">
<label for="micro-instruction-select">Micro Instruction</label>
<select id="micro-instruction-select"></select>
<div class="modal-actions">
<button type="submit" class="save-button">Update</button>
<button type="button" class="cancel-button" onclick="closeMicroCodeEditModal()">Cancel</button>
</div>
</form>
</div>
</div>
<script src="./version.js"></script>
<script src="./static/script/classes/johnny-project.js"></script>
<script src="./static/script/classes/settings.js"></script>
<script src="./static/script/utils/files.js"></script>
<script src="./static/script/utils/formatter.js"></script>
<script src="./static/script/utils/writing.js"></script>
<script src="./static/script/buttons.js"></script>
<script src="./static/script/macrocode.js"></script>
<script src="./static/script/main.js"></script>
<script src="./static/script/microcode-table.js"></script>
<script src="./static/script/microstep.js"></script>
<script src="./static/script/modal.js"></script>
<script src="./static/script/ram-table.js"></script>
<script src="./static/script/record.js"></script>
</body>
</html>