forked from Wellingborough/LMC
-
Notifications
You must be signed in to change notification settings - Fork 0
/
LMC0.3.html
360 lines (334 loc) · 17.8 KB
/
LMC0.3.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
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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="LMC, Little Man Computer, CPU, Simulator, Simulation, Emulator, Emulation, Central, Processor, Processing, Unit, ALU, MAR, MDR, CU">
<meta name="description" content="Little Man Computer (LMC) Simulator">
<meta name="author" content="Mark Gamble">
<title>Little Man Computer</title>
<!-- A simulator for the Little Man Computer assembler language -->
<!-- Written in HTML, JavaScript and CSS. -->
<!-- I am indebted to Oli Folkerd for Tabulator: -->
<!-- http://tabulator.info -->
<!-- I am also indebted to James Hall of parallax for jsPDF: -->
<!-- https://parall.ax/products/jspdf -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/LMCstyle0.3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.8/css/tabulator_midnight.min.css">
<script src="js/LMCmill0.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.1.8/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js" defer></script>
<script src="https://kit.fontawesome.com/608c27dfa5.js" crossorigin="anonymous"></script>
<script src="js/interface.js" defer></script>
</head>
<!-- This was really helpful: -->
<!-- https://www.w3docs.com/snippets/html/how-to-make-a-div-fill- -->
<!-- the-height-of-the-remaining-space.html -->
<body class="purple" onresize="resizeEvent()" onload="filltable()">
<!-- Should also create a symbol table -->
<div id="div-main" class="box">
<!-- Row 1 -->
<div class="row header" id="div-hdr">
<p>Simulador Little Man Computer</p>
<div style="margin-left: auto;">
<button id="change-theme-btn" class="icon-button" title="Trocar tema"><i class="fa-solid fa-circle-half-stroke fa-lg"></i></button>
<button id="instruction-btn" class="icon-button" title="Conjunto de instruções"><i class="fa-solid fa-microchip fa-lg"></i></button>
<button id="save-btn" class="icon-button" title="Salvar programa em arquivo" onclick="saveCode()"><i class="fa-solid fa-file-arrow-down fa-lg"></i></button>
<button id="hide-load-btn" class="icon-button" title="Carregar programa de arquivo" onclick="document.getElementById('load-btn').click()"><i class="fa-solid fa-file-arrow-up fa-lg"></i></button>
<button id="print-btn" class="icon-button" title="Imprimir programa em PDF" onclick="printCode()"><i class="fa-solid fa-print fa-lg"></i></button>
<button id="about-modal-btn" class="icon-button" title="Sobre"><i class="fa-solid fa-circle-info fa-lg"></i></button>
<button id="settings-modal-btn" class="icon-button" title="Configurações"><i class="fa-solid fa-gear fa-lg"></i></button>
</div>
</div>
<!-- Row 2 -->
<div class="row content" id="div-content" style="display:flex; flex-direction:row; margin:0px; margin-right:10px; width:100%;">
<div class="resize-drag" id="codetableholder" style="display:flex; flex-direction:column; min-width:300px; width:350px; max-width:700px; margin:0px; max-height:90vh;">
<div class="row content" id="code-table" style="flex: 0 1 auto;" ></div>
<div class="footer" id="code-table-buttons" class="footer" style="bottom:0; display:flex; gap:20px; align-items: center; flex: 1;">
<input id="load-btn" type="file" style="display:none;">
<button id="assemble-button" class="button" onclick="assembleCode()">Montar</button>
<button id="clear-button" onclick="clearCode()" class="button">Limpar</button>
</div>
</div>
<div id="rpanrResize" class="resize-drag" > </div>
<div class="col" id="processor-memory-holder" style="display:flex; flex-direction:column; margin:0px; width:100%;">
<div class="row content" id="processor-memory-row" style="flex: 0 1 auto;">
<div class="col-6" id="processor-schematic" ><canvas id="processor-canvas">Your browser does not support the HTML5 canvas</canvas></div>
<div class="col-6" id="memory-table"></div>
</div>
<div class="row" id="cpu-button-holder">
<div class="footer" style="display:inline-flex; gap:20px; flex-wrap: nowrap; justify-content: flex-start; align-items: center;">
<button id="run-btn" class="button" onclick="runCode()">Executar</button>
<button id="stop-btn" class="button" onclick="allStop()">Parar</button>
<button id="resume-btn" class="button" onclick="allAhead()">Resumir</button>
<button id="next-btn" class="button" onclick="stepCode()">Próximo</button>
<p id="state-label" style="margin:0px;">Pronto</p>
</div>
<div class="footer" id="code-table-buttons" class="footer" style="display:inline-flex;">
<button id="clear-memory" class="button" onclick="clearMemory()">Limpar memória</button>
</div>
</div>
<div class="row footer" id="I-O-Console-holder" style="display:flex; flex-direction:row; flex: 0 1 auto; margin:0px; width:100%; height:100%;">
<div style="display:flex; flex-direction:column; margin:0px;">
<div id="input-div">
<span>Entrada:</span>
<input type="number" id="input-text" min="0" max="999" >
<button onclick="processInput()" id="input-button">Enter</button>
</div>
<div class="col-12" id="output-div">
<span>Saída:</span>
<textarea id="output-text" rows="1" readonly="true"></textarea>
</div>
</div>
<div id="log-div"">
<div style="margin:0px; height:100%; width:100%; box-sizing: border-box;">
<span>Console:</span>
<textarea id="log-text" rows="3" readonly="true" disabled></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Settings modal -->
<div class="modal" id="settings-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i class="fa-solid fa-gear fa-2x" style="margin: 8px 8px;"></i>
<button class="icon-button" id="settings-close-btn" style="float: right;"onclick="cancelSettings()"><i class="fa-solid fa-circle-xmark fa-2x"></i></button>
<h4 class="modal-title" style="margin-left: 8px;">Configurações do simulador LMC</h4>
</div>
<div class="modal-body">
<input type="checkbox" name="showDataFlows" value="1" checked id="setting-show-data-flows" style="margin:8px;">
<label for="showDataFlows">Mostrar o fluxo de dados na CPU durante a execução</label><br>
<input type="checkbox" name="showVariableValuesInCode" value="1" checked id="setting-show-variable-values" style="margin:8px;">
<label for="showDataFlows">Mostrar os valores das variáveis na tabela do código durante a execução do programa</label><br>
<input type="checkbox" name="showMemoryAccess" value="1" checked id="setting-show-memory-access" style="margin:8px;">
<label for="showMemoryAccess">Mostrar na memória o local de leitura/escrita durante a execução</label><br><br>
<input type="range" name="executionSpeed" id="setting-speed" min="0" max="4" step="1" value="2" onchange="changeSetting('speed')">
<label for="setting-speed">Velocidade de execução</label><br><br>
<p id="speed-display"><i class="fa-regular fa-hand"></i>Rodar na velocidade média - 0.5 segundos por ciclo</p>
</div>
<div class="modal-footer">
<button id="settings-cancel-btn" class="button" onclick="cancelSettings()">Cancelar</button>
<button id="settings-save-btn" class="button" onclick="saveSettings()">Salvar</button>
</div>
</div>
</div>
</div>
<!-- Examples modal -->
<div class="modal" id="examples-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i class="fa-solid fa-file-code fa-2x" style="margin: 8px 8px;"></i>
<button class="icon-button" id="examples-close-btn" style="float: right;"><i class="fa-solid fa-circle-xmark fa-2x"></i></button>
<h4 class="modal-title" style="margin-left: 8px;">Programas de exemplo do LMC</h4>
</div>
<div class="modal-body">
<p>Selecione um exemplo para carregar:</p>
<div>
<input type="radio" id="example1" name="example_select" value=1 checked>
<label for="example1">Examplo 1 - Soma 2 números</label>
</div>
<div>
<input type="radio" id="example2" name="example_select" value=2>
<label for="example2">Examplo 2 - Saída no padrão de 1s e 0s</label>
</div>
<div>
<input type="radio" id="example3" name="example_select" value=3>
<label for="example3">Examplo 3 - Calcula a raiz quadrada de um número</label>
</div>
<div>
<input type="radio" id="example4" name="example_select" value=4>
<label for="example4">Examplo 4 - Divisão de inteiro</label>
</div>
</div>
<div class="modal-footer" style="margin-top:20px;">
<button id="examples-close-btn" class="button" onclick="closeExamples()">Cancelar</button>
<button id="examples-load-btn" class="button" onclick="loadExample()">Carregar</button>
</div>
</div>
</div>
</div>
<!-- Help modal -->
<div class="modal" id="help-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<i class="fa-solid fa-pen-to-square fa-2x" style="margin: 8px 8px;"></i>
<button class="icon-button" id="help-close-btn" style="float: right;"><i class="fa-solid fa-circle-xmark fa-2x"></i></button>
<h4 class="modal-title" style="margin-left: 8px;">Ajuda do Editor LMC</h4>
</div>
<div class="modal-body">
<p>
O Editor de Código é baseado em um sistema em grade, com colunas para você entrar com os rótulos, operadores e operandos.
A primeira coluna é usada para mostrar qual linha de código está sendo executado quando o programa está rodando.
</p>
<p>
Você pode mover entre as linhas e colunas usando a tecla Tab, ou usando as setas do teclado.
</p>
<p>
Ctrl-Z e Ctrl-Y vão desfazer e refazer a última edição, mas apenas se você não estiver editando uma celula do Editor de Código.
</p>
<p>
Selecione uma linha clicando em qualquer lugar da linha. A linha será destacada.
</p>
<p>
Você pode deletar a linha atual usando a tecla Delete. Todas as linhas subsequentes serão movidas para cima.
</p>
<p>
Pressionando a tecla Ins ou Insert criará uma nova linha acima da linha atual, movendo todas as linhas subsequentes para baixo.
</p>
<p>
Quando você estiver satisfeito com seu código, pressione o botão Montar, e o simulador LMC irá verificar e montar seu código na memória.
Se houver algum erro, uma mensagem irá aparecer na janela do console, indicando a linha e o problema.
</p>
<p>
O botão de Carregar pode ser usado para carregar programas pré-escritos do seu computador.
</p>
<p>
O botão de Salvar irá salvar em um arquivo de texto o programa atual no seu computador.
</p>
<p>
O botão Imprimir irá criar e baixar um arquivo PDF com o programa atual.
</p>
</div>
<div class="modal-footer">
<button id="help-close-btn" class="button" onclick="closeHelp()">Fechar</button>
</div>
</div>
</div>
</div>
<!-- About modal -->
<div class="modal" id="about-modal">
<div class="modal-content">
<div class="header">
<i class="fa-solid fa-circle-info fa-2x" style="margin: 8px 8px;"></i>
<button class="icon-button" id="about-close-btn" style="float: right;"><i class="fa-solid fa-circle-xmark fa-2x"></i></button>
<h4 class="modal-title" style="margin-left: 8px;">Sobre o Little Man Computer</h4>
</div>
<div>
<h3>Uma introdução ao LMC</h3>
<p>
O Little Man Computer (LMC) é um modelo simplificado de um computador, baseado na arquitetura de Von Neumann.
</p>
<h3>O Simulador LMC</h3>
<p>
Esse app web provê um simulador do LMC, para que voc~e possa escrever programas no assembler do LMC e possa montar e executar esses programas.
O simulador irá mostrar o estado de todos os registradores na CPU, e também o estado da memória do LMC.
</p>
<p>
O fluxo de dados da CPU é demonstrado, e você pode pausar e resumir a execução do seu programa a qualquer momento.
</p>
<p>
O editor de código tem colunas individuais para rótulos (labels), operadores (operators) e operandos (operands).
Para aprender mais sobre como o editor funciona, clique no botão "Ajuda" abaixo da janela do código.
Você pode usar Ctrl-Z para desfazer qualquer ação do editor.
</p>
<p>
Há alguns exemplos de programas que você pode testar - apenas clique no botão "Exemplos" abaixo para mais informações.
</p>
</div>
<div class="modal-footer">
<button id="rabout-close-btn" class="button" onclick="closeAbout()">Fechar</button>
<button id="instruction-set-modal-btn" class="button">Conjunto de instruções</button>
<button id="examples-modal-btn" class="button">Exemplos</button>
<button id="help-modal-btn" class="button">Ajuda do editor</button>
</div>
</div>
</div>
<!-- Instruction Set modal -->
<div class="modal" id="instruction-set-modal">
<div class="modal-content">
<div class="header">
<i class="fa-solid fa-table-list fa-2x" style="margin: 8px 8px;"></i>
<button class="icon-button" id="instruction-set-close-btn" style="float: right;"><i class="fa-solid fa-circle-xmark fa-2x"></i></button>
<h4 class="modal-title" style="margin-left: 8px;">Conjunto de instruções do LMC</h4>
</div>
<div>
<table id="instruction-set-table">
<tr>
<th>Instrução</th>
<th>Mnemonico</th>
<th>Código de máquina</th>
<th>Explicação</th>
</tr>
<tr>
<td>Carregar acumulador</td>
<td>LDA</td>
<td>5xx</td>
<td>Carrega o conteúdo de um endereço de memória (xx) no acumulador</td>
</tr>
<tr>
<td>Armazena acumulador</td>
<td>STA</td>
<td>3xx</td>
<td>Armazena o conteúdo do acumulador no endereço de memória (xx)</td>
</tr>
<tr>
<td>Soma</td>
<td>ADD</td>
<td>1xx</td>
<td>Soma o conteúdo do endereço de memória (xx) ao valor do acumulador</td>
</tr>
<tr>
<td>Subtrai</td>
<td>SUB</td>
<td>2xx</td>
<td>Subtrai o conteúdo do endereço de memória (xx) do valor do acumulador</td>
</tr>
<tr>
<td>Entrada</td>
<td>INP</td>
<td>901</td>
<td>Copia o valor da caixa de entrada para o acumulador</td>
</tr>
<tr>
<td>Saída</td>
<td>OUT</td>
<td>902</td>
<td>Copia o valor do acumulador para a caixa de saída</td>
</tr>
<tr>
<td>Ramifica</td>
<td>BRA</td>
<td>6xx</td>
<td>Ramifica (pula) para a instrução no endereço de memória (xx)</td>
</tr>
<tr>
<td>Ramifica se positivo</td>
<td>BRP</td>
<td>8xx</td>
<td>Se o valor no acumulador for positivo (incluindo zero), então ramifica para a instrução no endereço de memória (xx)</td>
</tr>
<tr>
<td>Ramifica se zero</td>
<td>BRZ</td>
<td>7xx</td>
<td>Se o valor no acumulador for zero, então ramifica para a instrução no endereço de memória (xx)</td>
</tr>
<tr>
<td>Parar</td>
<td>HLT</td>
<td>000</td>
<td>Para a execução do programa</td>
</tr>
<tr>
<td>Dado</td>
<td>DAT</td>
<td>valor do dado</td>
<td>Indica que a posição atual de memória contém um dado</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button id="rinstruction-set-close-btn" class="button">Fechar</button>
</div>
</div>
</div>
</body>
</html>