Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer Masterarbeit zur Erlangung des Master of Advanced Studies ZFH in Informatik vorgelegt von Christian Kaegi geboren am 05.01.1969 von Bauma, Kanton Zürich eingereicht Dipl. Ing. Walter Eich Stetten, 28.8.2015 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Inhaltsverzeichnis 1. Zusammenfassung 9 2. Einleitung 11 2.1 Ausgangslage 11 2.2 Motivation 12 2.3 Fragestellungen 12 2.4 Abgrenzung 12 2.5 Zielsetzung 12 3. Von der abstrakten Theorie zur erleb- und fassbaren Simulation 13 3.1 Problemanalyse 13 3.1.1 Definition der Zielgruppe 13 3.1.2 Personas 14 3.1.3 Beispiele von existierenden Lösungen und Lösungsansätzen 15 3.1.3.1 Little Man Computer 15 3.1.3.2 Der Bonsai-Modellrechner 16 3.1.3.3 Der Murmelrechner 17 3.1.3.4 Paper Processor 18 3.1.3.5 WDR-1-Bit-Computer 19 3.1.3.6 Ein 8-Bit Computer Marke Eigenbau 19 3.1.3.7 Ein einfacher 4-Bit Computer für den Klassenraum 20 3.1.3.8 Visuelle Simulation einer 6502 CPU auf Transistorebene 21 3.1.3.9 Simulationen mit Logisim 22 3.1.3.10 Weitere Simulationsprogramme 22 3.1.4 Fazit 23 3.2 Lösungsansatz 24 3.3 Die Komponenten 25 3.3.1 Befehls-, Daten- und Adressbus 26 3.3.2 Logikgatter 26 3.3.3 Speicher 27 3.3.4 Auswahlschaltungen 30 3.3.5 Arithmetik 32 3.3.6 Taktgeber 36 3.4 Simulation in Logisim bauen 36 3.4.1 Befehlssatz 38 3.4.1.1 Erläuterung der Befehle 40 3.4.1.2 Zeichencode 41 3.5 Anforderungen an das Simulationsprogramm 43 3.6 Technologie-Evaluation 44 3.6.1 Zielplattform 44 3.6.2 Java 44 3.6.3 Actionscript 44 3.6.4 Javascript/HTML 45 3.6.5 Dart 46 3.6.6 Haxe 46 3.6.7 Entscheid 47 3.7 Design und Implementierung 48 3.7.1 Wichtige Elemente der Companion-Website 49 3.7.2 User Interface 51 3.7.2.1 Grafikelemente 52 3.7.2.2 Grafiken in Adobe Illustrator erstellen 52 „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 2 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 3.7.2.3 Zusätzliche Grafikebenen 54 3.7.2.4 Navigation 55 3.7.3 Software Design 55 3.7.3.1 MVC Framework 55 3.7.4 Vorgehensweise bei der Implementierung 57 3.8 Tests und Validierung 57 3.9 Ergebnisse und Zusammenfassung 58 3.9.1 Plattformunterschiede 58 3.9.1.1 Flash 58 3.9.1.2 Neko 59 3.9.1.3 Mac OS 59 3.9.1.4 HTML5 59 3.9.1.5 iOS 60 3.9.1.6 Android 60 3.9.2 Vergleich der Ergebnisse 61 3.10 Fazit und Ausblick 62 3.10.1 Zielerreichung 62 3.10.2 Technische Hürden 62 3.10.3 Ausblick 64 3.11 Persönliches Fazit 65 4. Schlussfolgerungen 66 5. Quellen 67 6. Selbständigkeitserklärung 71 „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 3 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Abbildungsverzeichnis Abb. 1: (Quelle: fotolia.de, [3]) 14 Abb. 2: (Quelle: fotolia.de, [4]) 14 Abb. 3: (Quelle: fotolia.de, [5]) 14 Abb. 4: Little Man Computer Simulation (Quelle: https://community.dur.ac.uk/m.j.r.bordewich/ LMC.html, besucht: 10.5.2015) 15 Abb. 5: Bonsai Simulationsprogramm (Quelle: http://www.inf-schule.de/infschule/softwarewerkzeuge/ bonsai, besucht 10.5.2015) 16 Abb. 6: Bonsai-Lerncomputer (Quelle: http://www.inf-schule.de/rechner/bonsai/einfuehrung/ausblick, besucht 10.5.2015) 17 Abb. 7: Akteure für das Rollenspiel (Quelle: http://www.inf-schule.de/rechner/bonsai/murmelrechner/ einfachermurmelrechner/akteure, besucht: 10.5.2015) 17 Abb. 8: Paper Processor (Quelle: https://sites.google.com/site/kotukotuzimiti/, besucht 10.9.2015) 18 Abb. 9: Instructionset für den Paper Processor (Quelle: https://sites.google.com/site/kotukotuzimiti/, besucht 10.5.2015) 19 Abb. 10: WDR-1-Bit-Computer (Quelle: http://wdr-1-bit-computer.talentraspel.de, besucht 18.5.2015) 19 Abb. 11: 8-Bit Computer Marke Eigenbau (Quelle: http://www.instructables.com/id/ How-to-Build-an-8-Bit-Computer/, besucht 18.5.2015) 20 Abb. 12: CHUMP lab kit (Quelle: http://repository.cmu.edu/cgi/viewcontent.cgi?article=1595&context=- compsci, besucht 16.5.2015) 20 Abb. 13: Visual Transistor-level Simulation of the 6502 CPU (Quelle: http://www.visual6502.org, besucht 18.5.2015) 21 Abb. 14: Tetris-Simulation in Logisim (Quelle: https://www.youtube.com/watch?v=YCBa1NH4ORE, besucht 9.5.2015) 22 Abb. 15: Struktur eines Computers mit 6 Ebenen (Quelle: [31], S.22) 23 Abb. 16: Architektur des geplanten Simulationsprogramms 25 Abb. 17: Typen von Logikgattern und Symbolik (Quelle: https://de.wikipedia.org/wiki/Logikgatter, besucht 04.07.2015) 26 Abb. 18: NAND-Gatter (erstellt in Logisim) 26 Abb. 19: Gatter und die entsprechenden Umsetzungen mit NAND-Gattern (erstellt in Logisim) 27 Abb. 20: 1-Bit Speicher (erstellt in Logisim, ([37], S.24)) 28 Abb. 21: 4-Bit Speicher (erstellt in Logisim, ([37], S.40)) 28 „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 4 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Abb. 22: 4-Bit Register (erstellt in Logisim, ([37], S. 40)) 29 Abb. 23: 4-Bit RAM (erstellt in Logisim, ([37], S. 52)) 29 Abb. 24: 4-Bit Enabler (erstellt in Logisim, ([37], S. 40)) 30 Abb. 25: 4x2 Multiplexer (erstellt in Logisim) 31 Abb. 26: 4x2 Multiplexer, 4 Datenbits (erstellt in Logisim) 31 Abb. 27: 2x4 Dekoder (erstellt in Logisim, ([37], S. 48)) 32 Abb. 28: Komparator (erstellt in Logisim, [38]) 32 Abb. 29: 4-Bit Zähler (erstellt in Logisim, [38]) 33 Abb. 30: Halbaddierer (erstellt in Logisim, ([37], S. 79)) 34 Abb. 31: Volladdierer (erstellt in Logisim, ([37], S. 79)) 34 Abb. 32: 4-Bit Addierer (erstellt in Logisim, ([37], S. 79)) 35 Abb. 33: ALU „Arithmetic Logic Unit“ (erstellt in Logisim, [34]) 35 Abb. 34: Taktsignal (Quelle: http://de.f-alpha.net/elektronik/digitale-elektronik/flip-flop/los-gehts/ experiment-8-master-slave/, besucht 19.6.2015) 36 Abb. 35: Fehler auf den Leitungen (erstellt in Logisim) 37 Abb. 36: Fertige Vorlage für das Simulationsprogram (erstellt in Logisim) 38 Abb. 37: Programm in hexadezimaler Form für Logisim (erstellt in Textmate) 40 Abb. 38: ASCII-Tabelle (Quelle: http://worldpowersystems.com/J/codes/X3.4-1963/page5.JPG, besucht 21.6.2015) 42 Abb. 39: Ebenen rsp. Detailstufen nach dem Babuschka-Prinzip, hier am Beispiel von Akkumulator und ALU 48 Abb. 40: Navigation: Top-Down und Bottom-Up 49 Abb. 41: Punkte malen 50 Abb. 42: Palette mit Kopierpapier (Quelle: http://www.papierexpert.de/shop-c13-Kleinmengen-unter- Palette, besucht 19.6.2015) 50 Abb. 43: Wireframe für iPad 51 Abb. 44: Eine frühe Version, erstellt in Adobe Illustrator 52 Abb. 45: Links mit Anti-Aliasing, rechts mit Kantenglättung 53 Abb. 46: Pixelgenaue Grafik - kristallklar und scharf: das Anti-Aliasing ist weg 53 Abb. 47: Anzeige des Datenflusses und Ausblenden gerade nicht beteiligter Komponenten 54 „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 5 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Abb. 48: Die fertige Hauptnavigation 55 Abb. 49: PureMVC - Konzeptionelles Diagramm (Quelle: [83]) 56 Abb. 50: Kompiler-Anweisung: Skalierungsfaktor für iOS auf 2 setzen, für alle restlichen Zielplattformen auf 1 lassen 58 Abb. 51: Mac OS: Text wird nicht innerhalb des Textrahmens umgebrochen 59 Abb. 52: Zum Vergleich: In Flash stimmt der Text- umbruch, die « und » Zeichen sind ebenfalls vorhanden 59 Abb. 53: iPad: Änderung der Hintergrundfarbe und Textfarbe im Textfeld lässt den Text verschwinden 60 Abb. 54: Bei den anderen Plattformen funktioniert die Änderung der Textfeldfarben 60 Abb. 55: Lösung des Textfeld-Hintergrundfarbe-Problems: Vermeidung rsp. Nutzung einer zusätzlichen Bitmapgrafik 60 Abb. 56: Nach dem Konvertieren von Haxe zu iOS ist der Programmcode nicht mehr wirklich lesbar 63 Abb. 57: Code-Ausschnitt der automatisch erstellten Javascript-Datei 64 „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 6 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Tabellenverzeichnis Tab. 1: Beispiel eines Rechenverfahrens für den Murmelrechner 18 Tab. 2: Zuweisung der untersuchten Lösungen zu den 6 Ebenen des Computers 23 Tab. 3: Logikgatter im Vergleich 27 Tab. 4: Beispiel von Programmzeilen 39 Tab. 5: Beispiel von Programmzeilen, zusätzlich mit Assemblerbefehlen 39 Tab. 6: Bedeutungen des Opcodes 40 Tab. 7: Bedeutung des Daten- und Adressteils in Zusammenhang mit dem Opcode 41 Tab. 8: Eigener Zeichencode 42 Tab. 9: WELCOME! mit eigens erstelltem Zeichencode 42 Tab. 10: Vergleich der Technologien nach der Evaluation 47 Tab. 11: Übersicht: auf welchen Plattformen läuft der kompilierte Haxe-Code? 58 Tab. 12: Vergleich der Ergebnisse der Applikation auf den verschiedenen Zielplattformen 61 „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 7 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Abkürzungen Abkürzung Erklärung API Application Programming Interface GUI Graphical User Interface IDE Integrated Development Environment MVC Model-View-Controller NDK Native Development Kit PNG Portable Network Graphics RAM Random Access Memory ROM Read Only Memory SDK Software Development Kit SVG Scalable Vector Graphics SWF Small Web Format UI User Interface VM Virtual Machine „Simulationsprogramm zur Visualisierung der Vorgänge in einem Computer“ Seite 8 von 71 ZHAW - Masterarbeit - Christian Kaegi - 28.8.2015 - v2.0.3 Zusammenfassung 1. Zusammenfassung Unser Alltag ist geprägt von Informations- und Kommunikationstechnologie: Nebst Computer und Smart- phone sind es aber auch weniger offensichtliche Geräte, die wir täglich nutzen: die Kaffeemaschine, der RFID- Chip im Autoschlüssel, die Informationsanzeige am Bahnhof etc.