-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (137 loc) · 8.87 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>RISC-V Graphical Datapath Simulator</title>
</head>
<body>
<div class="container-fluid d-flex flex-row p-2" style="height: 100vh;">
<div id="datapath" class="flex-grow-1"> <!-- We'll load the SVG inline here. --> </div>
<div class="d-flex flex-column" style="max-width: 50%">
<ul class="nav nav-tabs flex-row flex-nowrap" id="editor-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="instrMem-tab" data-bs-toggle="tab" data-bs-target="#instrMem-panel"
type="button" role="tab" aria-controls="instrMem-panel" aria-selected="true">
Code
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="regFile-tab" data-bs-toggle="tab" data-bs-target="#regFile-panel"
type="button" role="tab" aria-controls="regFile-panel" aria-selected="false">
Registers
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="dataMem-tab" data-bs-toggle="tab" data-bs-target="#dataMem-panel"
type="button" role="tab" aria-controls="dataMem-panel" aria-selected="false">
Memory
</button>
</li>
<li id="examples" class="nav-item dropdown">
<button class="nav-link dropdown-toggle" href="#" id="examples-button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Load Example
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="examples-button"></ul>
</li>
</ul>
<div class="card p-1 flex-grow-1" style="min-height: 0;"> <!-- min-height: 0; fixes some scroll issues for some reason. -->
<div id="editors" class="tab-content" style="height: 100%">
<div id="instrMem-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="instrMem-tab"><div>
<div class="editor">
<textarea placeholder="Write RISC‑V assembly..."></textarea>
</div>
<div class="view" style="display: none">
<table class="table table-striped table-hover table-bordered address-table">
<thead>
<tr> <th>Address</th> <th>Instruction</th> <th>Code</th> </tr>
</thead>
<tbody></tbody>
</table>
</div>
</div></div>
<div id="regFile-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="regFile-tab"><div>
<div class="d-flex flex-row">
<select id="regFile-radix" class="form-select">
<option value="hex" selected>Hex</option>
<option value="signed">Signed Decimal</option>
<option value="unsigned">Unsigned Decimal</option>
</select>
</div>
<div class="editor" spellcheck="false">
<table class="table table-striped table-hover table-bordered address-table"><tbody></tbody></table>
</div>
<div class="view" style="display: none">
<table class="table table-striped table-hover table-bordered address-table"><tbody></tbody></table>
</div>
</div></div>
<div id="dataMem-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="dataMem-tab"><div>
<div class="d-flex flex-row">
<select id="dataMem-radix" class="form-select">
<option value="hex" selected>Hex</option>
<option value="signed">Signed Decimal</option>
<option value="unsigned">Unsigned Decimal</option>
</select>
<select id="dataMem-word-size" class="form-select">
<option value="8">Byte</option>
<option value="16">Half-Word</option>
<option value="32" selected>Word</option>
</select>
</div>
<div class="editor">
<textarea placeholder="Set initial memory..."></textarea>
</div>
<div class="view" style="display: none">
<table class="table table-striped table-hover table-bordered address-table">
<thead>
<tr> <th>Address</th> <th>Data</th> </tr>
</thead>
<tbody></tbody>
</table>
</div>
</div></div>
</div>
</div>
<div id="controls" class="card"><div class="card-body d-flex flex-row">
<button id="play" class="btn btn-sm" title="Run Simulation">
<i class="fas fa-play text-success"></i>
</button>
<button id="pause" class="btn btn-sm" title="Pause Simulation">
<i class="fas fa-pause text-warning"></i>
</button>
<button id="step" class="btn btn-sm" title="Step Simulation">
<i class="fas fa-step-forward text-success"></i>
</button>
<button id="restart" class="btn btn-sm" title="Restart Simulation">
<i class="fas fa-sync text-danger"></i>
</button>
<div class="flex-grow-1">
<input id="speed" type="range" class="form-range" title="Speed" min="-2" max="4"> <!-- 2 ** x steps per second -->
</div>
<button id="help" class="btn btn-sm" title="Help / About" data-bs-toggle="modal" data-bs-target="#help-modal">
<i class="fas fa-question-circle text-info"></i>
</button>
</div></div>
</div>
</div>
<div class="modal fade" id="help-modal" tabindex="-1" aria-labelledby="help-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="help-modal-label">Help / About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Welcome to the RISC‑V Graphical Datapath Simulator! This is a 32‑bit, single-cycle implementation of RISC‑V.
All the 32-bit integer instructions are supported except the syscall and concurrency related instructions and <code>auipc</code>.
The datapath is closely based on the design described in <i>Computer Organization and Design RISC‑V Edition</i></p>
<p>You can write RISC‑V assembly and set the initial registers and initial data memory, and then step through the demo. You
can input registers and memory as hex, unsigned decimal or signed decimal by using the dropdowns. While the demo is running, you
can use the side pane to view the current memory and registers and labels show the values on each wire. Most components and wires
also have a tooltip which gives more details on their functionality and current value.</p>
<p>You can view the source or contribute on <a href="https://github.com/jesse-r-s-hines/RISC-V-Graphical-Datapath-Simulator" target="_blank">GitHub</a>.</p>
</div>
</div>
</div>
</div>
</body>
</html>