-
Notifications
You must be signed in to change notification settings - Fork 4
/
naclsqueak.html
216 lines (187 loc) · 6.9 KB
/
naclsqueak.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
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html>
<head>
<title>Squeak on Native Client!</title>
<script type="text/javascript">
naclsqueakModule = null; // Global application object.
statusText = 'NO-STATUS';
embedded_image_file = false;
req = null;
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
function base64_encode(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
while (i < input.length) {
chr1 = input.charCodeAt(i++) & 0xFF;
chr2 = input.charCodeAt(i++) & 0xFF;
chr3 = input.charCodeAt(i++) & 0xFF;
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}
// When the NaCl module has loaded, hook up an event listener to handle
// messages coming from it via PPB_Messaging.PostMessage() (in C) or
// pp::Instance.PostMessage() (in C++), and indicate success.
function moduleDidLoad() {
naclsqueakModule = document.getElementById('naclsqueak');
naclsqueakModule.addEventListener('message', handleMessage, true);
paintInterval = setInterval('naclsqueakModule.postMessage("paint")', 20);
loadSqueakImage();
updateStatus('SUCCESS');
}
function handleMessage(message_event) {
if (message_event.data.match(/^heading:/)) {
updateStatus(message_event.data.substring(8, message_event.data.length));
} else {
alert(message_eent.data)
}
}
// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round((evt.loaded / evt.total) * 100.0);
updateStatus(percentComplete.toString());
} else {
// Unable to compute progress information since the total size is unknown
}
}
function transferComplete(evt) {
loadSqueakImage2();
}
function transferFailed(evt) {
alert("An error occurred while transferring the file.");
}
function transferCanceled(evt) {
alert("The transfer has been canceled by the user.");
}
function loadSqueakImage2() {
naclsqueakModule.postMessage('setImageSize:' + (req.responseText.length.toString()));
current = 0;
while (current < req.responseText.length) {
naclsqueakModule.postMessage('loadImage:' + base64_encode(req.responseText.substring(current, current + 3000)));
current = Math.min(current + 3000, req.responseText.length);
}
req = null;
}
function loadSqueakImage() {
naclsqueakModule.postMessage('setHeapSize:' + (15*1024*1024));
if (embedded_image_file) {
naclsqueakModule.postMessage('loadImage');
} else {
req = new XMLHttpRequest();
req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
req.open('GET', 'Etoys.image', true);
req.overrideMimeType('text/plain; charset=x-user-defined');
// req.setRequestHeader("If-Modified-Since", "Sun, 23 Oct 2011 00:00:00 GMT");
req.send(null);
}
}
// If the page loads before the Native Client module loads, then set the
// status message indicating that the module is still loading. Otherwise,
// do not change the status message.
function pageDidLoad() {
if (naclsqueakModule == null) {
updateStatus('LOADING...');
} else {
// It's possible that the Native Client module onload event fired
// before the page's onload event. In this case, the status message
// will reflect 'SUCCESS', but won't be displayed. This call will
// display the current message.
updateStatus();
}
}
function postFromButton() {
var inputBox = document.forms.helloForm.inputBox;
naclsqueakModule.postMessage('message:' + inputBox.value);
}
function getSqueakStatus() {
try {
naclsqueakModule.postMessage('getStatus');
} catch(e) {
alert(e.message);
}
}
// Set the global status message. If the element with id 'statusField'
// exists, then set its HTML to the status message as well.
// opt_message The message test. If this is null or undefined, then
// attempt to set the element with id 'statusField' to the value of
// |statusText|.
function updateStatus(opt_message) {
if (opt_message)
statusText = opt_message;
var statusField = document.getElementById('status_field');
if (statusField) {
statusField.innerHTML = statusText;
}
}
</script>
</head>
<body onload="pageDidLoad()">
<h1>Squeak on Native Client!</h1>
<p>
<!-- Load the published .nexe. This includes the 'nacl' attribute which
shows how to load multi-architecture modules. Each entry in the "nexes"
object in the .nmf manifest file is a key-value pair: the key is the
instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
for the desired NaCl module.
To load the debug versions of your .nexes, set the 'nacl' attribute to the
_dbg.nmf version of the manifest file.
Note: Since this NaCl module does not use any real-estate in the browser,
it's width and height are set to 0.
Note: The <EMBED> element is wrapped inside a <DIV>, which has a 'load'
event listener attached. This wrapping method is used instead of attaching
the 'load' event listener directly to the <EMBED> element to ensure that the
listener is active before the NaCl module 'load' event fires.
-->
<div id="listener">
<script type="text/javascript">
document.getElementById('listener')
.addEventListener('load', moduleDidLoad, true);
</script>
<embed name="nacl_module"
id="naclsqueak"
width=800 height=600
src="naclsqueak.nmf"
type="application/x-nacl" />
</div>
</p>
The Car's heading can be changed here.
<form name="helloForm"
action=""
method="get"
>
<input type="text" id="inputBox" name="inputBox" value="2" />
<input type="button" id="headingSubmit" value="Send to Squeak" onclick="postFromButton()" /><p>
The Wheel's heading is shown here.
</form>
<table>
<tr>
<td style="width: 200px; height: 50px;">
<pre id="status_field">NO-STATUS</pre>
</td>
</tr>
</table></body>
List of files:
<ul>
<li> <a href="naclsqueak.html">naclsqueak.html</a>
<li> <a href="naclsqueak.nmf">naclsqueak.nmf</a>
<li> <a href="naclsqueak_x86_32.nexe">naclsqueak_x86_32.nexe</a>
<li> <a href="naclsqueak_x86_64.nexe">naclsqueak_x86_64.nexe</a>
<li> <a href="Etoys.image">Etoys.image</a>
</ul>
</html>