Skip to content

Commit 532f111

Browse files
danoli3danoli3
committed
Shell minimal template updated
-fPIC WASM=2 (fallback js and WASM)
1 parent de7cf6c commit 532f111

File tree

3 files changed

+267
-235
lines changed

3 files changed

+267
-235
lines changed

‎libs/openFrameworksCompiled/project/emscripten/config.emscripten.default.mk

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,9 @@ else
109109
PLATFORM_LDFLAGS += --shell-file $(OF_LIBS_PATH)/openFrameworksCompiled/project/emscripten/template.html
110110
endif
111111

112-
PLATFORM_OPTIMIZATION_LDFLAGS_RELEASE = -O3 -s TOTAL_MEMORY=$(PLATFORM_EMSCRIPTEN_TOTAL_MEMORY) -s WASM=1 -s MAIN_MODULE=1
112+
PLATFORM_OPTIMIZATION_LDFLAGS_RELEASE = -O3 -s TOTAL_MEMORY=$(PLATFORM_EMSCRIPTEN_TOTAL_MEMORY) -s WASM=1 -s MAIN_MODULE=1 -fPIC
113113

114-
PLATFORM_OPTIMIZATION_LDFLAGS_DEBUG = -O1 -g -s ALLOW_MEMORY_GROWTH=1 -s TOTAL_MEMORY=134217728 -s WASM=1 -s MAIN_MODULE=1
114+
PLATFORM_OPTIMIZATION_LDFLAGS_DEBUG = -O1 -g -s ALLOW_MEMORY_GROWTH=1 -s TOTAL_MEMORY=134217728 -s WASM=1 -s MAIN_MODULE=1 -fPIC -s VERBOSE=1
115115

116116
################################################################################
117117
# PLATFORM OPTIMIZATION CFLAGS

‎libs/openFrameworksCompiled/project/emscripten/original_template.html

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!doctype html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6+
<title>openFrameworks</title>
7+
<style>
8+
body {
9+
font-family: helvetica, sans-serif;
10+
margin: 0;
11+
padding: none;
12+
}
13+
14+
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
15+
div.emscripten { text-align: center; }
16+
div.emscripten_border { border: 1px solid black; }
17+
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
18+
canvas.emscripten { border: 0px none; outline: none; }
19+
20+
#logo {
21+
display: inline-block;
22+
margin: 20px 0 20px 20px;
23+
}
24+
25+
.spinner {
26+
height: 30px;
27+
width: 30px;
28+
margin: 0;
29+
margin-top: 20px;
30+
margin-left: 20px;
31+
display: inline-block;
32+
vertical-align: top;
33+
34+
-webkit-animation: rotation .8s linear infinite;
35+
-moz-animation: rotation .8s linear infinite;
36+
-o-animation: rotation .8s linear infinite;
37+
animation: rotation 0.8s linear infinite;
38+
39+
border-left: 5px solid #EE3987;
40+
border-right: 5px solid #EE3987;
41+
border-bottom: 5px solid #EE3987;
42+
border-top: 5px solid #CCCCCC;
43+
44+
border-radius: 100%;
45+
background-color: #EEEEEE;
46+
}
47+
48+
@-webkit-keyframes rotation {
49+
from {-webkit-transform: rotate(0deg);}
50+
to {-webkit-transform: rotate(360deg);}
51+
}
52+
@-moz-keyframes rotation {
53+
from {-moz-transform: rotate(0deg);}
54+
to {-moz-transform: rotate(360deg);}
55+
}
56+
@-o-keyframes rotation {
57+
from {-o-transform: rotate(0deg);}
58+
to {-o-transform: rotate(360deg);}
59+
}
60+
@keyframes rotation {
61+
from {transform: rotate(0deg);}
62+
to {transform: rotate(360deg);}
63+
}
64+
65+
#status {
66+
display: inline-block;
67+
vertical-align: top;
68+
margin-top: 30px;
69+
margin-left: 20px;
70+
font-weight: bold;
71+
color: rgb(120, 120, 120);
72+
}
73+
74+
#progress {
75+
height: 20px;
76+
width: 30px;
77+
}
78+
79+
#controls {
80+
display: inline-block;
81+
float: right;
82+
vertical-align: top;
83+
margin-top: 30px;
84+
margin-right: 20px;
85+
}
86+
87+
#output {
88+
width: 100%;
89+
height: 200px;
90+
margin: 0 auto;
91+
margin-top: 10px;
92+
display: block;
93+
background-color: black;
94+
color: white;
95+
font-family: 'Lucida Console', Monaco, monospace;
96+
outline: none;
97+
}
98+
</style>
99+
<script>
100+
function goEmscriptenFullscreen(resize){
101+
Module.requestFullscreen(0, resize);
102+
}
103+
function tryFullScreen(aspect, resize){
104+
var canvas = document.getElementById("canvas");
105+
if( resize ){
106+
canvas.width=screen.width;
107+
canvas.height=screen.height;
108+
}
109+
if(canvas.requestFullScreen){
110+
if( aspect )goEmscriptenFullscreen(resize);
111+
else canvas.requestFullScreen();
112+
}
113+
else if(canvas.webkitRequestFullScreen){
114+
if( aspect )goEmscriptenFullscreen(resize);
115+
else canvas.webkitRequestFullScreen();
116+
}
117+
else if(canvas.mozRequestFullScreen){
118+
if( aspect )goEmscriptenFullscreen(resize);
119+
else canvas.mozRequestFullScreen();
120+
}
121+
else{
122+
canvas.width=window.innerWidth;
123+
canvas.height=window.innerHeight;
124+
document.getElementById('header').style.display = 'none';
125+
document.getElementById('output').style.display = 'none';
126+
}
127+
}
128+
</script>
129+
</head>
130+
<body>
131+
<div id="header">
132+
<a id="logo" href="http://emscripten.org">
133+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
134+
<svg width="110px" height="58px" viewBox="0 0 110 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
135+
<title>openFrameworks Logo</title>
136+
<defs></defs>
137+
<g id="Page-1" stroke="none" stroke-width="1" fill="#000000" fill-rule="evenodd">
138+
<path id="Oval-1" d="M58,29 C58,13 45,0 29,0 C13,0 0,13 0,29 C0,45 13,58 29,58 C45,58 58,45 58,29 Z"></path>
139+
<rect id="Rectangle-1" x="59" y="0" width="25" height="58"></rect>
140+
<rect id="Rectangle-2" x="85" y="26" width="15" height="15"></rect>
141+
<path id="Path-2" d="M85,0 L110,0 L85,25 L85,0 Z"></path>
142+
</g>
143+
</svg>
144+
</a>
145+
146+
<div class="spinner" id='spinner'></div>
147+
<div class="emscripten" id="status">Downloading...</div>
148+
149+
<span id='controls'>
150+
<span><input type="checkbox" id="resize">Resize canvas</span>
151+
<span><input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer &nbsp;&nbsp;&nbsp;</span>
152+
<span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
153+
document.getElementById('resize').checked)">
154+
</span>
155+
</span>
156+
157+
<div class="emscripten">
158+
<progress value="0" max="100" id="progress" hidden=1></progress>
159+
</div>
160+
161+
<div class="emscripten_border">
162+
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
163+
</div>
164+
<textarea id="output" rows="8"></textarea>
165+
166+
<script type='text/javascript'>
167+
var statusElement = document.getElementById('status');
168+
var progressElement = document.getElementById('progress');
169+
var spinnerElement = document.getElementById('spinner');
170+
171+
var Module = {
172+
print: (function() {
173+
var element = document.getElementById('output');
174+
if (element) element.value = ''; // clear browser cache
175+
return (...args) => {
176+
var text = args.join(' ');
177+
// These replacements are necessary if you render to raw HTML
178+
//text = text.replace(/&/g, "&amp;");
179+
//text = text.replace(/</g, "&lt;");
180+
//text = text.replace(/>/g, "&gt;");
181+
//text = text.replace('\n', '<br>', 'g');
182+
console.log(text);
183+
if (element) {
184+
element.value += text + "\n";
185+
element.scrollTop = element.scrollHeight; // focus on bottom
186+
}
187+
};
188+
})(),
189+
canvas: (() => {
190+
var canvas = document.getElementById('canvas');
191+
192+
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
193+
// application robust, you may want to override this behavior before shipping!
194+
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
195+
canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
196+
197+
return canvas;
198+
})(),
199+
setStatus: (text) => {
200+
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
201+
if (text === Module.setStatus.last.text) return;
202+
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
203+
var now = Date.now();
204+
if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
205+
Module.setStatus.last.time = now;
206+
Module.setStatus.last.text = text;
207+
if (m) {
208+
text = m[1];
209+
progressElement.value = parseInt(m[2])*100;
210+
progressElement.max = parseInt(m[4])*100;
211+
progressElement.hidden = false;
212+
spinnerElement.hidden = false;
213+
} else {
214+
progressElement.value = null;
215+
progressElement.max = null;
216+
progressElement.hidden = true;
217+
if (!text) spinnerElement.style.display = 'none';
218+
}
219+
statusElement.innerHTML = text;
220+
},
221+
totalDependencies: 0,
222+
monitorRunDependencies: (left) => {
223+
this.totalDependencies = Math.max(this.totalDependencies, left);
224+
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
225+
}
226+
};
227+
Module.setStatus('Downloading...');
228+
window.onerror = (event) => {
229+
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
230+
Module.setStatus('Exception thrown, see JavaScript console');
231+
spinnerElement.style.display = 'none';
232+
Module.setStatus = (text) => {
233+
if (text) console.error('[post-exception status] ' + text);
234+
};
235+
};
236+
</script>
237+
<script async type="text/javascript" src="index.js"></script>
238+
{{{ SCRIPT }}}
239+
</body>
240+
</html>
241+

0 commit comments

Comments
 (0)