forked from AlexAltea/unicorn.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
204 lines (196 loc) · 7.66 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Unicorn.js</title>
<!-- External fonts -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<!-- External icons -->
<link href="//cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Style -->
<link href='demos/demo.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Navigation -->
<nav class="navbar" role="navigation">
<a class="navbar-brand" href="./index.html">Unicorn.js</a>
<span class="navbar-sep"></span>
<span class="navbar-demo">Loading...</span>
</nav>
<!-- UI -->
<div id="pane-h" class="split split-horizontal pane">
<div class="toolbar">
Information
</div>
<div style="padding:0px 10px;" >
<p>
Welcome to the Unicorn.js demo!
</p>
<p style="color:#AAA">
<b>Disclaimer</b>: This is an early proof-of-concept. <br> Bugs might (and will) occur.
<p>
Modify registers by double-clicking on their value, entering the new value in hexadecimal and pressing enter.
Run the entire assembly snippet by pressing start.
Edit the assembly by either double-clicking on the instructions, or by pasting your own.
</p>
<p>
Make sure you check out the other demos: <br>
<a role="button" href="demo.html?arch=arm">ARM</a>,
<a role="button" href="demo.html?arch=mips">MIPS</a>,
<a role="button" href="demo.html?arch=sparc">SPARC</a>,
<a role="button" href="demo.html?arch=x86">X86</a>.
</p>
<p>
<b>Pending features</b>:
<ul>
<li>Support for JavaScript callbacks on hooks via <code>uc_hook_add</code> and <code>uc_hook_del</code>.</li>
<li>Support for breakpoints and stepping.</li>
<li>Implement demos for 64-bit archs.</li>
<li>Fixing the memory panel, editing memory and viewing updated bytes.</li>
<li>Improve editor: Support for comments, labels, realtime assembling and more.</li>
<li>Saving sessions in local storage</li>
</ul>
</p>
Finally, feel free to boost my ego:
<p>
<iframe src="https://ghbtns.com/github-btn.html?user=AlexAltea&type=follow&count=false" frameborder="0" scrolling="0" width="132px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=AlexAltea&repo=unicorn.js&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</p>
</div>
</div>
<div id="pane-l" class="split split-horizontal">
<div id="pane-lt" class="split pane">
<!-- Assembler -->
<div class="toolbar">
<div class="toolbar-button" onclick="paneAssembler.emuStart()" title="Run">
<i class="mdi mdi-play"></i>
</div>
<div class="toolbar-button disabled" title="Pause">
<i class="mdi mdi-pause"></i>
</div>
<span class="toolbar-sep"></span>
<div class="toolbar-button disabled" title="Step into">
<i class="mdi mdi-debug-step-into"></i>
</div>
<div class="toolbar-button disabled" title="Step over">
<i class="mdi mdi-debug-step-over"></i>
</div>
<div class="toolbar-button disabled" title="Step out">
<i class="mdi mdi-debug-step-out"></i>
</div>
<span class="toolbar-sep"></span>
<div class="toolbar-button disabled" title="Set breakpoints">
<i class="mdi mdi-checkbox-multiple-blank-circle"></i>
</div>
<div class="toolbar-button disabled" title="Delete all breakpoints">
<i class="mdi mdi-checkbox-multiple-blank-circle-outline"></i>
</div>
<span class="toolbar-sep"></span>
<div class="toolbar-button" onclick="paneAssembler.editCopy()" title="Copy assembly">
<i class="mdi mdi-content-copy"></i>
</div>
<div class="toolbar-button" onclick="paneAssembler.editPaste()" title="Paste assembly">
<i class="mdi mdi-content-paste"></i>
</div>
<div class="toolbar-button" onclick="paneAssembler.editRemove()" title="Remove assembly">
<i class="mdi mdi-eraser"></i>
</div>
</div>
<div class="content">
<table id="assembler">
<tr>
<th width="80px">Address</th>
<th width="150px">Bytes</th>
<th>Assembly</th>
</tr>
</table>
</div>
</div>
<div id="pane-lb" class="split pane">
<div class="toolbar">
Memory
</div>
<div class="content">
<table id="memory">
<tr>
<th width="80px">Address</th>
<th width="354px">Bytes</th>
<th>ASCII</th>
</tr>
</table>
</div>
</div>
</div>
<div id="pane-r" class="split split-horizontal">
<div id="pane-rt" class="split pane">
<div class="toolbar">
Registers
</div>
<div class="content">
<table id="registers">
<tr style="height:0px;">
<th width="60px">Reg</th>
<th width="100px">Value</th>
<th>Number</th>
</tr>
</table>
</div>
</div>
<!--div id="pane-rb" class="split pane">
<div class="toolbar">
Stack
</div>
</div-->
</div>
<!-- External scripts -->
<script src="demos/externals/clipboard.min.js"></script>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<script src="demos/externals/split.min.js"></script>
<!-- Unicorn.js demo -->
<script src="demos/demo.js"></script>
<script>
// Require.JS
requirejs.config({
shim: {
'demos/demo-arm': [
'dist/unicorn-arm.min',
'demos/externals/keystone-arm.min',
'demos/externals/capstone-arm.min'],
'demos/demo-mips': [
'dist/unicorn-mips.min',
'demos/externals/keystone-mips.min',
'demos/externals/capstone-mips.min'],
'demos/demo-sparc': [
'dist/unicorn-sparc.min',
'demos/externals/keystone-sparc.min',
'demos/externals/capstone-sparc.min'],
'demos/demo-x86': [
'dist/unicorn-x86.min',
'demos/externals/keystone-x86.min',
'demos/externals/capstone-x86.min'],
}
});
// Get URL parameters
function gup(name) {
url = location.href;
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(url);
return results == null ? null : results[1];
}
// Get needed scripts from URL anchor-based parameters
var scripts = []
switch (gup('arch')) {
case 'arm': requirejs(['demos/demo-arm']); break;
case 'mips': requirejs(['demos/demo-mips']); break;
case 'sparc': requirejs(['demos/demo-sparc']); break;
case 'x86': requirejs(['demos/demo-x86']); break;
default:
window.location = './index.html';
}
</script>
</body>
</html>