forked from Schweigi/assembler-simulator
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
129 lines (129 loc) · 7.88 KB
/
index.html
File metadata and controls
129 lines (129 loc) · 7.88 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
<!DOCTYPE html>
<html ng-app="ASMSimulator">
<head>
<title>Simple 8-bit Assembler Simulator in Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<script type="text/javascript" src="//use.typekit.net/tor0zlh.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body ng-controller="Ctrl">
<a href="https://github.com/Schweigi/assembler-simulator"><img style="z-index:1001;position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<nav class="navbar navbar-inverse" role="navigation" style="background-color:#428BCA;border:0px;border-radius:0px;">
<div class="container">
<div class="navbar-header">
<div class="btn-group">
<button type="button" class="btn btn-success navbar-btn" ng-click="run()" ng-hide="isRunning"><span class="glyphicon glyphicon-play"></span> Run</button>
<button type="button" class="btn btn-default navbar-btn" ng-click="stop()" ng-show="isRunning"><span class="glyphicon glyphicon-stop"></span> Stop</button>
<button type="button" class="btn btn-default navbar-btn" ng-click="executeStep()" ng-disabled="isRunning"><span class="glyphicon glyphicon-forward"></span> Step</button>
</div>
<button type="button" class="btn btn-default navbar-btn" ng-click="reset()">Reset</button>
</div>
<div class="navbar-header navbar-right">
<a class="navbar-brand" style="color:#FFFFFF">Simple 8-bit Assembler Simulator</a>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-danger" ng-hide="error === ''">{{ error }}</div>
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Code <small>(<a href="./instruction-set.html" target="_blank">Instruction Set</a>)</small></h4>
</div>
<div class="panel-body">
<form role="form">
<textarea class="form-control source-code"
rows="14"
style="margin-bottom:5px;"
tab-support
select-line
ng-model="code"></textarea>
<button type="button" class="btn btn-default" ng-click="assemble()">Assemble</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Output</h4>
</div>
<div class="panel-body source-code">
<div style="float:left;" class="output"
ng-style="($index % 8 === 0 && {'clear': 'left'}) || {'float': 'left'}"
ng-repeat="m in memory.data | startFrom: 232 track by $index">
<span>{{ getChar(m) }}</span>
</div>
</div>
</div>
</div>
<div class="clearfix visible-xs visible-sm"></div>
<div class="col-lg-5 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">CPU & Memory</h4>
</div>
<div class="panel-body">
<p class="text-muted">Registers / Flags</p>
<table class="table table-condensed table-striped">
<thead>
<tr>
<th style="text-align:center">A</th>
<th style="text-align:center">B</th>
<th style="text-align:center">C</th>
<th style="text-align:center">D</th>
<th style="text-align:center">IP</th>
<th style="text-align:center">SP</th>
<th style="text-align:center">Z</th>
<th style="text-align:center">C</th>
<th style="text-align:center">F</th>
</tr>
</thead>
<tbody>
<tr style="text-align:center;" class="source-code">
<td><small>{{ cpu.gpr[0] | number:displayHex }}</small></td>
<td><small>{{ cpu.gpr[1] | number:displayHex }}</small></td>
<td><small>{{ cpu.gpr[2] | number:displayHex }}</small></td>
<td><small>{{ cpu.gpr[3] | number:displayHex }}</small></td>
<td><div style="margin:auto;" class="marker-ip"><small>{{ cpu.ip | number:displayHex }}</small></div></td>
<td><div style="margin:auto;" class="marker-sp"><small>{{ cpu.sp | number:displayHex }}</small></div></td>
<td><small>{{ cpu.zero | flag }}</small></td>
<td><small>{{ cpu.carry | flag }}</small></td>
<td><small>{{ cpu.fault | flag }}</small></td>
</tr>
</tbody>
</table>
<p class="text-muted">RAM</p>
<div style="width:29em;" class="source-code">
<div class="memory-block"
ng-repeat="m in memory.data track by $index"
ng-class="($index >= 232 && 'output-bg' || (mapping[$index] !== undefined && displayInstr && 'instr-bg' || ''))">
<div ng-class="(cpu.ip === $index && 'marker-ip' || (cpu.sp === $index && 'marker-sp' || ''))">
<small>{{ m | number:displayHex }}</small>
</div>
</div>
</div>
<p style="margin-top:5px;">
<small>
<span>Clock speed:</span>
<select ng-model="speed" ng-options="item.speed as item.desc for item in speeds"></select>
<span style="margin-left:5px;">Instructions:</span>
<a ng-click="displayInstr = true" ng-hide="displayInstr">Show</a>
<a ng-click="displayInstr = false" ng-show="displayInstr">Hide</a>
<span style="margin-left:5px;">View:</span>
<a ng-click="displayHex = true" ng-hide="displayHex">Hex</a>
<a ng-click="displayHex = false" ng-show="displayHex">Decimal</a>
</small>
</p>
</div>
</div>
</div>
</div>
<hr style="margin-top:10px;margin-bottom:10px;"/>
<p><small>by Marco Schweighauser (2013) | MIT License</small></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="assets/asmsimulator.js"></script>
</body>
</html>