Skip to content

Commit 0e5338c

Browse files
Totto16Totto16
committed
feat: add better shell file for emscripten
1 parent 53c9961 commit 0e5338c

File tree

2 files changed

+215
-1
lines changed

2 files changed

+215
-1
lines changed

‎platforms/emscripten/shell_file.html‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
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>Emscripten-Generated Code</title>
7+
<style>
8+
.emscripten {
9+
padding-right: 0;
10+
margin-left: auto;
11+
margin-right: auto;
12+
display: block;
13+
}
14+
textarea.emscripten {
15+
font-family: monospace;
16+
width: 80%;
17+
}
18+
div.emscripten {
19+
text-align: center;
20+
}
21+
div.emscripten_border {
22+
border: 1px solid black;
23+
}
24+
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
25+
canvas.emscripten {
26+
border: 0px none;
27+
background-color: black;
28+
}
29+
30+
.spinner {
31+
height: 50px;
32+
width: 50px;
33+
margin: 0px auto;
34+
-webkit-animation: rotation 0.8s linear infinite;
35+
-moz-animation: rotation 0.8s linear infinite;
36+
-o-animation: rotation 0.8s linear infinite;
37+
animation: rotation 0.8s linear infinite;
38+
border-left: 10px solid rgb(0, 150, 240);
39+
border-right: 10px solid rgb(0, 150, 240);
40+
border-bottom: 10px solid rgb(0, 150, 240);
41+
border-top: 10px solid rgb(100, 0, 200);
42+
border-radius: 100%;
43+
background-color: rgb(200, 100, 250);
44+
}
45+
@-webkit-keyframes rotation {
46+
from {
47+
-webkit-transform: rotate(0deg);
48+
}
49+
to {
50+
-webkit-transform: rotate(360deg);
51+
}
52+
}
53+
@-moz-keyframes rotation {
54+
from {
55+
-moz-transform: rotate(0deg);
56+
}
57+
to {
58+
-moz-transform: rotate(360deg);
59+
}
60+
}
61+
@-o-keyframes rotation {
62+
from {
63+
-o-transform: rotate(0deg);
64+
}
65+
to {
66+
-o-transform: rotate(360deg);
67+
}
68+
}
69+
@keyframes rotation {
70+
from {
71+
transform: rotate(0deg);
72+
}
73+
to {
74+
transform: rotate(360deg);
75+
}
76+
}
77+
</style>
78+
</head>
79+
<body>
80+
<hr />
81+
<figure style="overflow: visible" id="spinner">
82+
<div class="spinner"></div>
83+
<center style="margin-top: 0.5em">
84+
<strong>emscripten</strong>
85+
</center>
86+
</figure>
87+
<div class="emscripten" id="status">Downloading...</div>
88+
<div class="emscripten">
89+
<progress value="0" max="100" id="progress" hidden="1"></progress>
90+
</div>
91+
<div class="emscripten_border">
92+
<canvas
93+
class="emscripten"
94+
id="canvas"
95+
oncontextmenu="event.preventDefault()"
96+
tabindex="-1"
97+
></canvas>
98+
</div>
99+
<hr />
100+
<div class="emscripten">
101+
<input type="checkbox" id="resize" />Resize canvas
102+
<input type="checkbox" id="pointerLock" checked />Lock/hide mouse
103+
pointer &nbsp;&nbsp;&nbsp;
104+
<input
105+
type="button"
106+
value="Fullscreen"
107+
onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
108+
document.getElementById('resize').checked)"
109+
/>
110+
</div>
111+
112+
<hr />
113+
<textarea class="emscripten" id="output" rows="8"></textarea>
114+
<hr />
115+
<script type="text/javascript">
116+
var statusElement = document.getElementById('status')
117+
var progressElement = document.getElementById('progress')
118+
var spinnerElement = document.getElementById('spinner')
119+
120+
var Module = {
121+
print: (function () {
122+
var element = document.getElementById('output')
123+
if (element) element.value = '' // clear browser cache
124+
return (...args) => {
125+
var text = args.join(' ')
126+
// These replacements are necessary if you render to raw HTML
127+
//text = text.replace(/&/g, "&amp;");
128+
//text = text.replace(/</g, "&lt;");
129+
//text = text.replace(/>/g, "&gt;");
130+
//text = text.replace('\n', '<br>', 'g');
131+
console.log(text)
132+
if (element) {
133+
element.value += text + '\n'
134+
element.scrollTop = element.scrollHeight // focus on bottom
135+
}
136+
}
137+
})(),
138+
canvas: (() => {
139+
var canvas = document.getElementById('canvas')
140+
141+
// As a default initial behavior, pop up an alert when webgl context is lost. To make your
142+
// application robust, you may want to override this behavior before shipping!
143+
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
144+
canvas.addEventListener(
145+
'webglcontextlost',
146+
(e) => {
147+
alert(
148+
'WebGL context lost. You will need to reload the page.'
149+
)
150+
e.preventDefault()
151+
},
152+
false
153+
)
154+
155+
return canvas
156+
})(),
157+
setStatus: (text) => {
158+
Module.setStatus.last ??= { time: Date.now(), text: '' }
159+
if (text === Module.setStatus.last.text) return
160+
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/)
161+
var now = Date.now()
162+
if (m && now - Module.setStatus.last.time < 30) return // if this is a progress update, skip it if too soon
163+
Module.setStatus.last.time = now
164+
Module.setStatus.last.text = text
165+
if (m) {
166+
text = m[1]
167+
progressElement.value = parseInt(m[2]) * 100
168+
progressElement.max = parseInt(m[4]) * 100
169+
progressElement.hidden = false
170+
spinnerElement.hidden = false
171+
} else {
172+
progressElement.value = null
173+
progressElement.max = null
174+
progressElement.hidden = true
175+
if (!text) spinnerElement.hidden = true
176+
}
177+
statusElement.innerHTML = text
178+
},
179+
totalDependencies: 0,
180+
monitorRunDependencies: (left) => {
181+
this.totalDependencies = Math.max(
182+
this.totalDependencies,
183+
left
184+
)
185+
Module.setStatus(
186+
left
187+
? 'Preparing... (' +
188+
(this.totalDependencies - left) +
189+
'/' +
190+
this.totalDependencies +
191+
')'
192+
: 'All downloads complete.'
193+
)
194+
},
195+
locateFile: function (url) {
196+
return url
197+
},
198+
}
199+
Module.setStatus('Downloading...')
200+
window.onerror = () => {
201+
Module.setStatus('Exception thrown, see JavaScript console')
202+
spinnerElement.style.display = 'none'
203+
Module.setStatus = (text) => {
204+
if (text) console.error('[post-exception status] ' + text)
205+
}
206+
}
207+
</script>
208+
{{{ SCRIPT }}}
209+
</body>
210+
</html>

‎src/executables/meson.build‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ if build_application
5757
APP_ROMFS = APP_ROMFS + '/'
5858
endif
5959

60-
emscripten_link_args += ['--preload-file', APP_ROMFS + '@/assets/']
60+
emscripten_link_args += [
61+
'--preload-file', APP_ROMFS + '@/assets/',
62+
# based on: https://github.com/emscripten-core/emscripten/blob/main/src/shell_minimal.html
63+
'--shell-file', meson.project_source_root() / 'platforms' / 'emscripten' / 'shell_file.html',
64+
]
6165

6266
endif
6367

0 commit comments

Comments
 (0)