-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathPicoBlaze.html
413 lines (413 loc) · 17.8 KB
/
PicoBlaze.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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!doctype html>
<html lang="en">
<head>
<title>PicoBlaze Simulator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="An on-line assembler and emulator for Xilinx PicoBlaze, runnable in a modern browser (starting with Firefox 52). This version has a back-end."
/>
<meta name="author" content="Teo Samarzija" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<script id="objectAssignPolyfill"></script>
<script id="symbolPolyfill"></script>
<script id="fetchPolyfill"></script>
<script id="BabelJS"></script>
<script id="BabelPolyfill"></script>
<script>
var URL_of_JSON_with_examples =
"https://flatassembler.github.io/PicoBlaze/examples.json",
URL_prefix_of_the_examples =
"https://raw.githubusercontent.com/FlatAssembler/PicoBlaze_Simulator_in_JS/master/";
</script>
<script src="list_of_directives.js" type="text/javascript"></script>
<script src="headerScript.js" type="text/javascript"></script>
<script src="TreeNode.js" type="text/javascript"></script>
<script src="tokenizer.js" type="text/javascript"></script>
<script src="parser.js" type="text/javascript"></script>
<script src="preprocessor.js" type="text/javascript"></script>
<script src="assembler.js" type="text/javascript"></script>
<script src="simulator.js" type="text/javascript"></script>
<script defer src="sharer.js" type="text/javascript"></script>
<script defer src="viewer.js" type="text/javascript"></script>
</head>
<body>
<svg id="emptySVG" style="display: none"></svg>
<div id="ribbon">
<a
href="https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS.git"
target="_blank"
>Fork me on GitHub!</a
>
</div>
<header>
<h1>PicoBlaze Simulator</h1>
<span id="authors"
><b>Front-end</b> made by
<a href="https://github.com/FlatAssembler">Teo Samaržija</a> and
<a href="https://github.com/agustiza">Agustín Izaguirre</a
>.<br />
<b>Back-end</b> made by
<a href="https://github.com/abdrd">Abidin Durdu</a>.</span
>
</header>
<main>
<div id="lineNumbers">1.</div>
<pre id="assemblyCode" contenteditable="true">
;Insert PicoBlaze assembly here...
</pre
>
<section id="divWithExamples">
<h2 id="examplesSpan">
Example
<img
style="vertical-align: bottom"
src="https://icons.getbootstrap.com/assets/icons/code-square.svg"
alt="program"
/>s:
</h2>
<div id="examples">
<span id="fetchingExamples">
Fetching the examples from GitHub...
</span>
</div>
</section>
<section id="buttons">
<button id="highlightButton">
Highlight
<img
style="vertical-align: bottom"
src="https://icons.getbootstrap.com/assets/icons/code-square.svg"
alt="Assembly"
/>
</button>
<button id="shareButton">
<img
src="https://icons.getbootstrap.com/assets/icons/cloud-upload.svg"
alt="Share"
style="vertical-align: bottom"
/>
</button>
<button id="assembleButton">Assemble</button>
</section>
<section id="whyClickAssemble">
Please click the
<a href="#assembleButton">"<i>Assemble</i>" button</a> before
proceeding, or else you will be simulating PicoBlaze that constantly
loops <code>load s0, s0</code> (which is <code>00000</code> in
hexadecimal).
</section>
<section id="divWithMachineCode">
<div id="warningAboutJavaScript">
Your browser doesn't seem to support modern JavaScript, needed for
this web-app!<br />
I would recommend you to use
<a href="https://www.torproject.org/">The TOR Browser</a>. Modern
JavaScript executes the fastest in it, as fast as in
<a href="https://www.mozilla.org/en-US/">Firefox</a>, but TOR Browser
protects privacy significantly more.<br />Please consider that, if too
few people use tools for protecting privacy on the Internet, using
them is considered suspicious. Participating in a system that does not
respect privacy is putting everybody in danger of mass surveillance
and predictive policing. Even if you think you have nothing to hide,
please think of others (and learn about senseless laws and red flags
that apply to you).<br />
My
<a href="https://flatassembler.github.io/compiler.html"
>web-app that converts arithmetic expressions to x86 assembly</a
>
can run in ancient browsers, in case you want to try it.<br />
Or, you can try
<a href="javascript:void(0)" onclick="downloadBabel()"
>polyfilling your browser with BabelJS</a
>.
</div>
</section>
<script>
function downloadBabel() {
document.getElementById("objectAssignPolyfill").src =
"https://cdn.jsdelivr.net/npm/object-assign-polyfill/index.min.js";
document.getElementById("symbolPolyfill").src =
"https://cdn.jsdelivr.net/npm/symbol-es6/symbol-es6.min.js";
document.getElementById("BabelPolyfill").src =
"https://unpkg.com/@babel/polyfill/dist/polyfill.js";
/*
Do not include the minified file, because Babel Minifier
transpiles "RegExp('x','y')" into "/x/y", which is a syntax
error in Internet Explorer 11!
*/
document.getElementById("BabelJS").src =
"https://unpkg.com/@babel/standalone/babel.min.js";
document.getElementById("fetchPolyfill").src =
"https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js";
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].type == "text/javascript") {
var newScriptTag = document.createElement("script");
newScriptTag.type = "text/babel";
newScriptTag.src = scripts[i].src;
newScriptTag.setAttribute("async", false);
newScriptTag.innerHTML = scripts[i].innerHTML;
document.body.appendChild(newScriptTag);
}
}
}
</script>
<section id="simulationButtons">
<button id="playPauseButton">
<img
src="play.svg"
alt="play"
id="playImage"
style="display: inline"
/>
<img
src="pause.svg"
alt="pause"
id="pauseImage"
style="display: none"
/>
<span class="tooltip">Play/Pause</span>
<!--Didn't know modern browsers don't display alts automatically
when you hover over an image.-->
</button>
<button id="fastForwardButton">
<img src="fastForward.svg" alt="Fast Forward" />
<span class="tooltip">Fast Forward</span>
</button>
<button id="singleStepButton">
<img src="singleStep.svg" alt="Single Step" />
<span class="tooltip">Single Step</span>
</button>
<button id="stopButton">
<img src="stop.svg" alt="Stop" />
<span class="tooltip">Stop</span>
</button>
</section>
<section id="graphicalResults"></section>
<button id="UART_enable_button">
<span id="enable_or_disable_UART">Enable</span>
<abbr title="Universal Asynchronous Receiver-Transmitter">UART</abbr>
<img
src="https://icons.getbootstrap.com/assets/icons/terminal.svg"
alt="terminal"
/>
</button>
<section id="UART_IO">
<label for="UART_INPUT"
>UART input (<i>enter <b>before</b> starting</i>):</label
>
<textarea id="UART_INPUT"></textarea>
<label>UART output:</label>
<pre id="UART_OUTPUT"></pre>
</section>
<section id="simulationResults"></section>
</main>
<footer>
Not affiliated with
<a
href="https://www.xilinx.com/products/intellectual-property/picoblaze.html"
>Xilinx PicoBlaze</a
>. If you want to contribute,
<a href="https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS"
>fork me on GitHub</a
>
(it is
<a
href="https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS/blob/master/LICENSE"
>MIT-licenced</a
>). Exceptionally helpful would be contributions to
<a href="https://github.com/FlatAssembler/PicoBlaze_Simulator_for_Android"
>the Android version of this simulator</a
>, as I am not an experienced Android developer. If you would like to know
more about me, visit my
<a href="https://flatassembler.github.io/">homepage</a>.<del
>The documentation for this simulator is available in
<a href="PicoBlaze.rtf"
>this <abbr title="Rich Text Format">RTF</abbr></a
>
(saved from Microsoft Office Word 2007, some other formats are available
on GitHub as well). For now, the documentation is only available in
Croatian. If you are willing to spend your time translating it to
English (better than machine translation), contact me on GitHub or
<a href="javascript:void(0)" onclick="sendMail('Teo')"
>send me an e-mail</a
>.</del
>
(UPDATE: My professor told me I might get into legal trouble with the
copyright laws unless I delete the documentation from GitHub, so I deleted
it.) There is <del>also</del>
<a href="PicoBlaze.ppt">a PowerPoint presentation about this program</a>.
Also, maybe it would be a good idea to implement some back-end on
<a href="https://picoblaze-simulator.sourceforge.io/">SourceForge</a> so
that people can comment on and share PicoBlaze programs, given that
SourceForge lets us run PHP on their servers for free. (UPDATE: Abidin
Durdu has done that. However, it can probably be improved.)<br /><br />
<span id="Bachelor_thesis"
>IMPORTANT: Don't take this to be an example of a good Bachelor thesis.
In fact, this is an example of what <b>not</b> to do for a Bachelor
thesis. As this is something I have put a lot of effort into and got a C
(<i lang="hr">dobar 3</i>), whereas most of my classmates put
significantly less effort into their Bachelor thesis and the average
mark for a Bachelor thesis at my school is somewhere between A and B (<i
lang="hr"
>vrlo dobar 4</i
>
- <i lang="hr">odličan 5</i>). Kind of weird that academia
doesn't value this type of work, when it was my Computer Architecture
professor who suggested me to make it... for use within academia (so
that the students can do the laboratory exercises without having access
to a real PicoBlaze, in case physical laboratory exercises are cancelled
due to the pandemic). But that's the reality. The ability to deliver a
non-trivial piece of software which actually works and which
<a
href="https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS/issues/9#issue-1859685751"
>attracts contributors from other countries</a
>, even if academia depends on that piece of software, is not valued in
academia. In academia, comprehensive documentation is valued over
working software (exactly the opposite of agile development). Actually,
it's not even comprehensive documentation, it's the sciency style of the
documentation that is being valued more than working software.<br /><br />
PicoBlaze is really a small blaze (flame, fire, 🔥), it gives you
burns when you write (✍️) a Bachelor (🏫) thesis
(🗎) about it. 😓!</span
><br /><br />
EPILOGUE:
<a
href="https://repozitorij.etfos.hr/islandora/object/etfos:4489/datastream/PDF/download"
>The documentation for this PicoBlaze Simulator is now available on
DABAR in the PDF format</a
>
(I hope that linking to it isn't illegal). I was planning to learn some
PHP and make it possible for users to share their own PicoBlaze assembly
programs (in other words, to make a back-end). However, my mental health
has deteriorated once again (I am having panic attacks almost every day
now), so I am unlikely to be able to do that any time soon. Alprazolam
does help, but it does not do miracles.<br /><br />
UPDATE on 05/07/2024: I have made
<a href="https://youtu.be/ckAvsglxTVc"
>a YouTube video about this program</a
>.
<script>
//Copied from: https://flatassembler.github.io/compiler
//I have written that many years ago...
function sendMail(whom) {
var sifrirano;
if (whom == "Tomasz")
sifrirano = [
6, 2, 36, 28, 1, 42, 17, 21, 23, 50, 54, 9, 21, 17, 19, 35, 17,
22, 8, 16, 60, 0, 6, 75, 28, 53, 17
];
else if (whom == "Teo")
sifrirano = [
27, 0, 36, 75, 1, 49, 8, 21, 23, 8, 57, 15, 21, 37, 21, 61, 29, 4,
9, 92, 51, 10, 25
];
var tmp = sifrirano[0];
sifrirano[0] = sifrirano[2];
sifrirano[2] = tmp;
tmp = sifrirano[17];
sifrirano[17] = sifrirano[16];
sifrirano[16] = tmp;
var hash2;
if (whom == "Teo") hash2 = 554;
else if (whom == "Tomasz") hash2 = 603;
var kljuc = prompt(
"Spambot protection problem: What is the name of the fictional character who had a spell casted on him so that he couldn't grow up, and he had to fight against the pirates? His nickname is 'Pan'.",
"His name without 'Pan'."
);
var desifrirano = [];
for (var i = 0; i < sifrirano.length; i++)
desifrirano.push(sifrirano[i] ^ kljuc.charCodeAt(i % kljuc.length));
var hash1 = 0;
for (var i = 0; i < desifrirano.length; i++)
hash1 = (hash1 * 128 + desifrirano[i]) % 907;
if (hash1 == hash2) {
var email = "";
for (var i = 0; i < desifrirano.length; i++)
email += String.fromCharCode(desifrirano[i]);
window.location.assign("mailto:" + email);
} else alert("Unfortunately, you didn't give the expected answer.");
}
</script>
</footer>
<script src="footerScript.js" type="text/javascript"></script>
<div id="MIT_licence">
<div id="licence_message">
By using this web-app, you agree to
<a
href="https://sourceforge.net/p/picoblaze-simulator/code/ci/master/tree/LICENSE"
>this licence</a
>
and to the use of cookies. If you are worried about being tracked using
cookies, consult your browser manual on how to delete the cookies. Or,
better yet, use a browser which automatically deletes the cookies when
they are no longer needed, such as
<a href="https://sourceforge.net/projects/tor-browser.mirror/"
>TOR Browser</a
>.<span id="use_Firefox"
><br /><br />
For the best experience, I recommend using a modern
<a href="https://en.wikipedia.org/wiki/Gecko_(software)">Gecko</a
>-based browser (<a href="https://firefox.com/">Firefox</a> 52 or
newer,
<a href="https://sourceforge.net/projects/tor-browser.mirror/"
>TOR Browser</a
>, <a href="http://kmeleonbrowser.org/">K-Meleon</a>...). While I try
my best to make this web-app work in all modern browsers, it's better
if the user uses the same browser as the developer. You might also
consider that
<a
href="https://www.reddit.com/r/firefox/comments/18icm8l/why_does_firefox_52_seem_to_run_javascript_faster/?utm_source=share&utm_medium=web2x&context=3"
>this web-app runs around twice as fast in Firefox 52 than in
Firefox 120</a
>.</span
>
</div>
<button
id="closing_the_licence"
onclick="document.getElementById('MIT_licence').remove(); document.cookie='cookie_banner_closed=1'"
>
<img
src="https://icons.getbootstrap.com/assets/icons/check-lg.svg"
alt="Agree!"
/>
</button>
<script type="text/javascript">
if (
navigator.userAgent.indexOf("Gecko") != -1 &&
navigator.userAgent.indexOf("like Gecko") == -1
)
document.getElementById("use_Firefox").remove();
if (document.cookie.indexOf("cookie_banner_closed") != -1)
document.getElementById("MIT_licence").remove();
</script>
</div>
<div id="uploadSuccessfulMessage">
<div id="titleBar">Success!</div>
<div id="messageAccompanyingTheURL">
Your assembly language program was successfully uploaded to the
database. Here is the URL by which you and other people can access it:
</div>
<div id="shareURL">
https://picoblaze-simulator.sourceforge.io/PicoBlaze.html?id=placeholder
</div>
<button
onclick="document.getElementById('uploadSuccessfulMessage').style.display='none'"
id="closeButton"
>
<img
src="https://icons.getbootstrap.com/assets/icons/x-lg.svg"
alt="Close"
/>
</button>
<button onclick="copyShareURLToClipboard()" id="copyButton">
<img
src="https://icons.getbootstrap.com/assets/icons/copy.svg"
alt="Copy to clipboard"
/>
</button>
</div>
</body>
</html>