Added whole Instruction step and a basic how to
This commit is contained in:
357
out/index.html
357
out/index.html
@ -4,9 +4,9 @@
|
||||
<!-- Basic Page Needs
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<meta charset="utf-8" />
|
||||
<title>Zähler</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
<title>Johnny Simulator</title>
|
||||
<meta name="description" content="Web based Johhny-Simulator" />
|
||||
<meta name="author" content="Christian" />
|
||||
|
||||
<!-- Mobile Specific Metas
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
@ -17,6 +17,7 @@
|
||||
<link rel="stylesheet" href="css/normalize.css" />
|
||||
<link rel="stylesheet" href="css/skeleton.css" />
|
||||
<link rel="stylesheet" href="css/colors-light.css">
|
||||
<link rel="stylesheet" href="css/pc.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
|
||||
<!-- Favicon
|
||||
@ -27,11 +28,359 @@
|
||||
<body>
|
||||
<!-- Primary Page Layout
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<div id="elm"></div>
|
||||
<div id="elm">
|
||||
<div class="noscript">Sorry, but this app needs Javascript to run :/</div>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<section class="container fullheight">
|
||||
<div id="langPicker">
|
||||
<button id="langPickerDE">German</button>
|
||||
<button id="langPickerEN">English</button>
|
||||
</div>
|
||||
<div id="langDE" class="hidden">
|
||||
<h1>Wie diese App funktioniert</h1>
|
||||
<p>
|
||||
Hallo, schön dass du dir diese Seite anschaust.<br>
|
||||
Damit du besser verstehst, wie diese Anwendung funktioniert, hier einmal die Basics:
|
||||
</p>
|
||||
|
||||
<h2>Kontrollknöpfe</h2>
|
||||
<p>
|
||||
Ganz oben findest du eine Reihe mit Kontrollknöpfen. Jeder Knopf hat seine eigene Funktion.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<b>µCycle</b>
|
||||
Mit diesem Knopf kannst du einen einzelnen Schritt im µCode ausführen.
|
||||
</li>
|
||||
<li>
|
||||
<b>Instruction</b>
|
||||
Hiermit kannst du eine ganze Instruction ausführen lassen und musst nicht durch jeden µCode Schritt einzeln durchdrücken.
|
||||
</li>
|
||||
<li>
|
||||
<b>Reset PC</b>
|
||||
Damit kannst du den PC zurücksetzten. Dabei bleibt der RAM und der µCode erhalten.
|
||||
</li>
|
||||
<li>
|
||||
<b>Autoscroll</b>
|
||||
Nachdem im RAM oder im µCode ein anderer Eintrag ausgewählt wurde, kann automatisch zum Eintrag gescrollt werden
|
||||
</li>
|
||||
<li>
|
||||
<b>Load Example</b>
|
||||
Mit diesem Knopf kannst du ein Beispielprogramm in den PC laden. Dabei wird dein momentanes Programm überschrieben.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Bausteine</h2>
|
||||
<p>
|
||||
Der Computer ist in mehrere Bausteine aufgeteilt. Jeder Baustein hat eine eigene spezielle Funktion. Ein echter Computer ist natürlich deutlich komplizierter, aber so ist der PC deutlich verständlicher.
|
||||
</p>
|
||||
|
||||
<h3>RAM</h3>
|
||||
<p>
|
||||
Im Arbeitsspeicher wird das Programm gespeichert. Jeder Eintrag ist dabei in ein Low-Byte und ein High-Byte unterteilt. Dadurch kann man in einem Eintrag die Instruktion und Addresse einfacher unterscheiden.<br>
|
||||
<a href="#befehl">Siehe Befehle</a>
|
||||
</p>
|
||||
|
||||
<h3>Control Unit</h3>
|
||||
<p>
|
||||
Wie der Name es schon sagt, steuert und verwaltet die Control Unit alle Vorgänge im Computer. Das passiert dadurch, dass eine Instruktion in viele kleine µCodes aufgeteilt wird.
|
||||
</p><p>
|
||||
Diese µCodes sind in der Tabelle aufgeführt. Jede Instruktion besteht hier aus bis zu 10 µCodes. <br>
|
||||
Bei einem Befehl z.B. <code>001 00000</code> ist die Instruktion in den ersten drei Stellen zu finden. Dieser Wert wird dann mit 10 multipliziert und in den µCode Counter geladen. <br>
|
||||
In diesem Fall stände dann <code>0010</code> im Counter.<br>
|
||||
In der Tabelle sind dann alle Befehle für die Instruktion <code>001</code> zu finden.
|
||||
</p>
|
||||
<h3>ALU</h3>
|
||||
<p>
|
||||
Die Arithmetik Logic Unit ist hier sehr einfach aufgebaut.
|
||||
</p>
|
||||
<p>
|
||||
Sie kann den Akkumulator nur erhöhen oder erniedrigen. Dafür können Werte aber direkt vom Datenbus geladen werden.
|
||||
</p>
|
||||
<h3>Datenbus</h3>
|
||||
<p>
|
||||
Über den Datenbus können Daten und Befehle zwischen RAM, Control Unit und ALU übertragen werden.
|
||||
</p>
|
||||
<h3>Addressbus</h3>
|
||||
<p>
|
||||
Über diesen Bus kann die Control Unit steuern, welcher Wert im RAM ausgewählt wird.<br>
|
||||
Bei normalen Rechnern sind hier natürlich noch deutlich mehr Werte angeschlossen.
|
||||
</p>
|
||||
|
||||
<a id="befehl"></a>
|
||||
<h2>Befehle</h2>
|
||||
<p>
|
||||
Ein Befehl besteht aus einer Instruktion und einem Argument. Deshalb sind im RAM und im Instruction Register alle Werte separiert.
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
0 0 0 0 0 0 0 0
|
||||
Instr Argument
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<h2>µCodes</h2>
|
||||
<p>
|
||||
Eine Instruktion kann nicht direkt ausgeführt werden. Deshalb wird sie durch mehrere kleine Befehle, sog. µCodes zusammengesetzt.
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>µCode</th>
|
||||
<th>Beschreibung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ProgCounter -> AddrBus</td>
|
||||
<td>Lade den Wert des Programm Counters in den Adressbus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>InstrReg -> ProgCounter</td>
|
||||
<td>Lade das Argument des Instruktionsregisters in den Programm Counter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ProgCounter ++</td>
|
||||
<td>Erhöhe den Wert des Programm Counter um 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc == 0 => InstReg -> ProgCounter</td>
|
||||
<td>Wenn der Wert des Akkumulators 0 ist, dann lade das Arggument des Instruktionsregisters in den Programm Counter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ram -> DataBus</td>
|
||||
<td>Schreibe den aktuellen Wert aus den RAM auf den Datembus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataBus -> Ram</td>
|
||||
<td>Schreibe den Wert des Datenbus in die momentane Stelle des RAM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataBus -> InstReg</td>
|
||||
<td>Lade den Befehl vom Datenbus in das Instruktionsregister</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataBus -> Acc</td>
|
||||
<td>Lade den Wert vom Datenbus in den Akkumulator der ALU</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc -> DataBus</td>
|
||||
<td>Schreibe den Wert vom Akkumulator auf den Datenbus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc ++</td>
|
||||
<td>Erhöhe den Wert des Akkumulators um 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc --</td>
|
||||
<td>Verringere den Wert des Akkumulators um 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>InstReg -> µCounter</td>
|
||||
<td>Nehme das Argument des Befehls im Instruktionsregister, füge am Ende eine 0 an und Lade ihn in den µCounter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>InstReg -> AddrBus</td>
|
||||
<td>Lade das Argument im Instruktionsregister in den Addressbus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>µCounter = 0</td>
|
||||
<td>Setzte den µCounter zurück</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Source</h1>
|
||||
<p>
|
||||
Im Moment ist dieser Code noch nicht ordentlich genug, dass es Sinn hat ihn zu veröffentlichen.
|
||||
</p>
|
||||
<p>
|
||||
Dieses Projekt ist angelehnt an den <a href="https://sourceforge.net/projects/johnnysimulator/" target="_blank">Johnny-Simulator</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div id="langEN">
|
||||
<h1>How this App works</h1>
|
||||
<p>
|
||||
Hello. In order for you to understand what this App does, I want to show you some basics of this app.
|
||||
</p>
|
||||
|
||||
<h2>Control Buttons</h2>
|
||||
<p>
|
||||
At the top of the application you can see a row of control buttons:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<b>µCycle</b>
|
||||
With this button you can execute a single µCode Step.
|
||||
</li>
|
||||
<li>
|
||||
<b>Instruction</b>
|
||||
This button executes a whole instruction at a time. This way you don't have to press µCycle all the time.
|
||||
</li>
|
||||
<li>
|
||||
<b>Reset PC</b>
|
||||
With this, you can reset the pc. Please note that ram und µCodes are not reset.
|
||||
</li>
|
||||
<li>
|
||||
<b>Autoscroll</b>
|
||||
After a value in RAM or in the µCodes is selected you can automatically scroll to them
|
||||
</li>
|
||||
<li>
|
||||
<b>Load Example</b>
|
||||
Click this button and select an example you want to load. This will overwrite the whole pc including ram and µCode
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Blocks</h2>
|
||||
<p>
|
||||
This computer is made up by multiple blocks like any other neumann-maschiene. Every block has it's own unique set of functions. A normal computer is much more complex than this, but the principle is the same.
|
||||
</p>
|
||||
|
||||
<h3>RAM</h3>
|
||||
<p>
|
||||
The current programm is stored in the RAM. Every entry is seperated as mentioned in <a href="#entry">entry</a>.
|
||||
</p>
|
||||
|
||||
<h3>Control Unit</h3>
|
||||
<p>
|
||||
As the name suggests, the control unit manages everything that is done. To know what needs to be done it has a list of µCodes that gets executed when a instruction is requested.
|
||||
</p><p>
|
||||
These µCodes can be found in the table. Every instruction consists of up to 10 µCodes. <br>
|
||||
When a entry is executed, the first three digits (the instruction) gets multiplied by 10. This now is written into the µCounter and the µCodes for it get's executed.
|
||||
</p><p>
|
||||
Example:<br>
|
||||
When the entry <code>001 00000</code> gets executed, the µCounter would be set to <code>0010</code>. Now every µCode starting at location <code>0010</code> in the µCodes gets executed.
|
||||
</p>
|
||||
<h3>ALU</h3>
|
||||
<p>
|
||||
The Arithmetic Logic Unit is pretty simple in this case.
|
||||
</p>
|
||||
<p>
|
||||
The ALU can only increment or decrement the accumulator. But it can read numbers from databus.
|
||||
</p>
|
||||
<h3>Databus</h3>
|
||||
<p>
|
||||
Via the Databus values and entrys can be transported between RAM, Control Unit and ALU.
|
||||
</p>
|
||||
<h3>Addressbus</h3>
|
||||
<p>
|
||||
With the addressbus the Control Unit can control which value is selected in RAM. On a normal computer there are a lot mor things attached to this bus.
|
||||
</p>
|
||||
|
||||
<a id="entry"></a>
|
||||
<h2>Entry</h2>
|
||||
<p>
|
||||
Each entry consits of a instruction and an argument. That's why the entrys in RAM and in µCodes are displayed seperatly.
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
0 0 0 0 0 0 0 0
|
||||
Instr Argument
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<h2>µCodes</h2>
|
||||
<p>
|
||||
Every instruction consists of a list of µCodes. Here is an explanaition for all of them:
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>µCode</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>ProgCounter -> AddrBus</td>
|
||||
<td>Load the value from programm counter to addressbus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>InstrReg -> ProgCounter</td>
|
||||
<td>Load the argument from instruction register to programm counter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ProgCounter ++</td>
|
||||
<td>Increment programm counter by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc == 0 => InstReg -> ProgCounter</td>
|
||||
<td>If the accumulator is 0 then write the argument from instruction register to programm counter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ram -> DataBus</td>
|
||||
<td>Load selected value from RAM to databus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataBus -> Ram</td>
|
||||
<td>Write value from databus to selected value in RAM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataBus -> InstReg</td>
|
||||
<td>Write entry from databus to instruction register</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DataBus -> Acc</td>
|
||||
<td>Write value from databus to accumulator</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc -> DataBus</td>
|
||||
<td>Load value from accumulator to databus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc ++</td>
|
||||
<td>Increment accumulator by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Acc --</td>
|
||||
<td>Decrement accumulator by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>InstReg -> µCounter</td>
|
||||
<td>Take the instruction from instruction register, add a 0 at the tail and write it to µCounter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>InstReg -> AddrBus</td>
|
||||
<td>Write the argument from instruction register to addressbus</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>µCounter = 0</td>
|
||||
<td>Set µCounter to 0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Source</h1>
|
||||
<p>
|
||||
At the moment the code for this project isn't good enough to share it online.
|
||||
</p>
|
||||
<p>
|
||||
This project is my take on <a href="https://sourceforge.net/projects/johnnysimulator/" target="_blank">Johnny-Simulator</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>
|
||||
Made with ☕
|
||||
by <a href="https://github.com/ChrisgammaDE" target="_blank">Christian</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://yokta.de/i/impressum.html" target="_blank">Impressum</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- End Document
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<script src="elm.js"></script>
|
||||
<script src="pc.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user