e4bbc1067a
- Make canvas support check message visible
- Make it obvious status can be closed by clicking
- Don't use status to display non-critical errors
- Fix setting total memory
(cherry picked from commit 1f7d4c4d0e)
398 lines
11 KiB
HTML
398 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>$GODOT_HEAD_TITLE</title>
|
|
$GODOT_HEAD_INCLUDE
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
border: 0 none;
|
|
padding: 0;
|
|
text-align: center;
|
|
background-color: black;
|
|
font-family: $GODOT_STYLE_FONT_FAMILY;
|
|
}
|
|
|
|
|
|
/* Godot Engine default theme style
|
|
* ================================ */
|
|
|
|
.godot {
|
|
color: #e0e0e0;
|
|
background-color: #3b3943;
|
|
background-image: linear-gradient(to bottom, #403e48, #35333c);
|
|
border: 1px solid #45434e;
|
|
box-shadow: 0 0 1px 1px #2f2d35;
|
|
}
|
|
|
|
button.godot {
|
|
font-family: $GODOT_STYLE_FONT_FAMILY; /* override user agent style */
|
|
padding: 1px 5px;
|
|
background-color: #37353f;
|
|
background-image: linear-gradient(to bottom, #413e49, #3a3842);
|
|
border: 1px solid #514f5d;
|
|
border-radius: 1px;
|
|
box-shadow: 0 0 1px 1px #2a2930;
|
|
}
|
|
|
|
button.godot:hover {
|
|
color: #f0f0f0;
|
|
background-color: #44414e;
|
|
background-image: linear-gradient(to bottom, #494652, #423f4c);
|
|
border: 1px solid #5a5667;
|
|
box-shadow: 0 0 1px 1px #26252b;
|
|
}
|
|
|
|
button.godot:active {
|
|
color: #fff;
|
|
background-color: #3e3b46;
|
|
background-image: linear-gradient(to bottom, #36343d, #413e49);
|
|
border: 1px solid #4f4c59;
|
|
box-shadow: 0 0 1px 1px #26252b;
|
|
}
|
|
|
|
button.godot:disabled {
|
|
color: rgba(230, 230, 230, 0.2);
|
|
background-color: #3d3d3d;
|
|
background-image: linear-gradient(to bottom, #434343, #393939);
|
|
border: 1px solid #474747;
|
|
box-shadow: 0 0 1px 1px #2d2b33;
|
|
}
|
|
|
|
|
|
/* Canvas / wrapper
|
|
* ================ */
|
|
|
|
#container {
|
|
display: inline-block; /* scale with canvas */
|
|
vertical-align: top; /* prevent extra height */
|
|
position: relative; /* root for absolutely positioned overlay */
|
|
margin: 0;
|
|
border: 0 none;
|
|
padding: 0;
|
|
background-color: #111;
|
|
}
|
|
|
|
#canvas {
|
|
display: block;
|
|
margin: 0 auto;
|
|
/* canvas must have border and padding set to zero to
|
|
* calculate cursor coordinates correctly */
|
|
border: 0 none;
|
|
padding: 0;
|
|
color: white;
|
|
}
|
|
|
|
|
|
/* Status display
|
|
* ============== */
|
|
|
|
#status-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* don't consume click events - make children visible explicitly */
|
|
visibility: hidden;
|
|
}
|
|
|
|
#status {
|
|
cursor: pointer;
|
|
visibility: visible;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
|
|
/* On-hover controls
|
|
* ================= */
|
|
|
|
#controls {
|
|
visibility: hidden;
|
|
opacity: 0.0;
|
|
transition: opacity 500ms ease-in-out 200ms;
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 16px;
|
|
padding: 3px 5px;
|
|
font-size: small;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
#container:hover > #controls {
|
|
opacity: 1.0;
|
|
transition: opacity 60ms ease-in-out;
|
|
}
|
|
|
|
#controls > button,
|
|
#controls > label {
|
|
vertical-align: middle;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
#controls > label > input[type="checkbox"] {
|
|
/* override user agent style */
|
|
margin-left: 0;
|
|
}
|
|
|
|
label > input {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#display-output { display: none; }
|
|
|
|
|
|
/* Debug output
|
|
* ============ */
|
|
|
|
#output {
|
|
display: none;
|
|
margin: 6px auto;
|
|
border: 2px groove grey;
|
|
padding: 4px;
|
|
outline: none;
|
|
text-align: left;
|
|
white-space: pre-wrap;
|
|
font-size: small;
|
|
color: #eee;
|
|
background-color: black;
|
|
font-family: "Lucida Console", Monaco, monospace;
|
|
}
|
|
|
|
|
|
/* Export style include
|
|
* ==================== */
|
|
|
|
$GODOT_STYLE_INCLUDE
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<canvas id="canvas" width="$GODOT_CANVAS_WIDTH" height="$GODOT_CANVAS_HEIGHT" onclick="canvas.ownerDocument.defaultView.focus();" oncontextmenu="event.preventDefault();">
|
|
HTML5 canvas appears to be unsupported in the current browser.<br />Please try updating or use a different browser.
|
|
</canvas>
|
|
<div id="status-container">
|
|
<span id="status" class="godot" onclick="this.style.visibility='hidden';">Loading page...</span>
|
|
</div>
|
|
<div id="controls" class="godot">
|
|
<label id="display-output"><input id="output-toggle" type="checkbox" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />display output</label>
|
|
<!-- hidden until implemented
|
|
<label><input id="lock-cursor" type="checkbox" autocomplete="off" />lock cursor</label>
|
|
<label><input id="resize-canvas" type="checkbox" autocomplete="off" />resize canvas</label>
|
|
-->
|
|
<button id="fullscreen" class="godot" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.goFullscreen();">fullscreen</button>
|
|
</div>
|
|
</div>
|
|
<!-- Firefox adds extra space to textarea, but shouldn't matter too much https://bugzilla.mozilla.org/show_bug.cgi?id=33654 -->
|
|
<textarea id="output" rows="10" cols="100" readonly="readonly" style="resize:none"></textarea>
|
|
|
|
<script type="text/javascript">//<![CDATA[
|
|
var Presentation = (function() {
|
|
var statusElement = document.getElementById("status");
|
|
var outputElement = document.getElementById("output");
|
|
var doneLoading = false;
|
|
|
|
function onLoaded() {
|
|
doneLoading = true;
|
|
var fullscreenButtonElement = document.getElementById("fullscreen");
|
|
fullscreenButtonElement.disabled = false;
|
|
}
|
|
|
|
var presentation = {
|
|
statusElement: statusElement,
|
|
outputElement: outputElement,
|
|
postRun: [],
|
|
setOutputVisible: function setOutputVisible(visible) {
|
|
outputElement.style.display = (visible?"block":"none");
|
|
},
|
|
setStatusVisible: function setStatusVisible(visible) {
|
|
statusElement.style.visibility = (visible?"visible":"hidden");
|
|
},
|
|
setStatus: function setStatus(text) {
|
|
if (!text) {
|
|
// emscripten sets empty string as status after "Running..."
|
|
// per timeout, but another status may have been set by then
|
|
if (Presentation.setStatus.lastText === "Running...") {
|
|
Presentation.setStatusVisible(false);
|
|
onLoaded();
|
|
}
|
|
} else {
|
|
Presentation.setStatus.lastText = text;
|
|
statusElement.innerHTML = text;
|
|
Presentation.setStatusVisible(true);
|
|
}
|
|
},
|
|
goFullscreen: function goFullscreen() {
|
|
if (doneLoading) Module.requestFullScreen(false, false);
|
|
}
|
|
};
|
|
|
|
window.onerror = function(event) { presentation.setStatus("Failure during start-up, see JavaScript console") };
|
|
|
|
if ($GODOT_CONTROLS_ENABLED) { // controls enabled
|
|
(function() {
|
|
var controlsElement = document.getElementById("controls");
|
|
controlsElement.style.visibility="visible";
|
|
})();
|
|
}
|
|
|
|
if ($GODOT_DEBUG_ENABLED) { // debugging enabled
|
|
(function() {
|
|
var outputToggleLabel = document.getElementById("display-output");
|
|
var outputToggle = document.getElementById("output-toggle");
|
|
|
|
outputElement.value = ""; // clear browser cache
|
|
outputElement.style.display = "block";
|
|
outputToggle.checked = true;
|
|
outputToggleLabel.style.display = "inline";
|
|
|
|
presentation.print = function print(text) {
|
|
if (outputElement.value.length !== 0)
|
|
outputElement.value += "\n";
|
|
outputElement.value += text;
|
|
outputElement.scrollTop = outputElement.scrollHeight; // focus on bottom
|
|
};
|
|
})();
|
|
|
|
presentation.postRun.push(function() {
|
|
window.onerror = function(event) { presentation.print("**EXCEPTION**:", event) };
|
|
});
|
|
|
|
} else {
|
|
presentation.postRun.push(function() { window.onerror = null; });
|
|
}
|
|
|
|
return presentation;
|
|
})();
|
|
|
|
// Emscripten interface
|
|
var Module = (function() {
|
|
var print = (function() {
|
|
if (typeof Presentation.print === "function") {
|
|
return function print(text) {
|
|
if (arguments.length > 1)
|
|
text = Array.prototype.slice.call(arguments).join(" ");
|
|
console.log(text);
|
|
Presentation.print(text);
|
|
};
|
|
} else {
|
|
return function print(text) {
|
|
if (arguments.length > 1)
|
|
text = Array.prototype.slice.call(arguments).join(" ");
|
|
console.log(text);
|
|
};
|
|
}
|
|
})();
|
|
|
|
var postRun = [];
|
|
if (typeof Presentation !== "undefined" && Presentation.postRun instanceof Array) {
|
|
postRun = Presentation.postRun;
|
|
}
|
|
|
|
var canvas = (function() {
|
|
var canvasElement = document.getElementById("canvas");
|
|
|
|
// As a default initial behavior, pop up an alert when WebGL context is lost. To make your
|
|
// application robust, you may want to override this behavior before shipping!
|
|
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
|
|
canvasElement.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
|
|
|
|
return canvasElement;
|
|
})();
|
|
|
|
var setStatus = (function() {
|
|
if (typeof Presentation.setStatus === "function")
|
|
return function setStatus(text) {
|
|
if (!Module.setStatus.last)
|
|
Module.setStatus.last = { time: Date.now(), text: "" };
|
|
if (text === Module.setStatus.text)
|
|
return;
|
|
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
|
var now = Date.now();
|
|
if (m) {
|
|
if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
|
|
return;
|
|
text = m[1];
|
|
}
|
|
Presentation.setStatus(text);
|
|
};
|
|
else
|
|
return function setStatus(text) {
|
|
if (!Module.setStatus.last)
|
|
Module.setStatus.last = { time: Date.now(), text: "" };
|
|
if (text === Module.setStatus.text)
|
|
return;
|
|
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
|
|
var now = Date.now();
|
|
if (m) {
|
|
if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
|
|
return;
|
|
text = m[1];
|
|
}
|
|
};
|
|
})();
|
|
|
|
return {
|
|
TOTAL_MEMORY: $GODOT_TMEM,
|
|
preRun: [],
|
|
postRun: postRun,
|
|
print: print,
|
|
printErr: function printErr(text) {
|
|
if (arguments.length > 1)
|
|
text = Array.prototype.slice.call(arguments).join(" ");
|
|
if (0) { // XXX disabled for safety `if (typeof dump == "function")`
|
|
dump(text + "\n"); // fast, straight to the real console
|
|
} else {
|
|
console.error(text);
|
|
}
|
|
},
|
|
canvas: canvas,
|
|
setStatus: setStatus,
|
|
totalDependencies: 0,
|
|
monitorRunDependencies: function monitorRunDependencies(left) {
|
|
this.totalDependencies = Math.max(this.totalDependencies, left);
|
|
Module.setStatus(left ? "Preparing... (" + (this.totalDependencies-left) + "/" + this.totalDependencies + ")" : "All downloads complete.");
|
|
}
|
|
};
|
|
})();
|
|
|
|
Presentation.setStatus("Downloading...");
|
|
|
|
//]]></script>
|
|
<script type="text/javascript" src="$GODOT_FS"></script>
|
|
<script>
|
|
(function() {
|
|
var script = document.createElement('script');
|
|
script.src = "$GODOT_ASM";
|
|
script.onload = function() {
|
|
setTimeout(function() {
|
|
(function() {
|
|
var memoryInitializer = '$GODOT_MEM';
|
|
if (typeof Module.locateFile === 'function') {
|
|
memoryInitializer = Module.locateFile(memoryInitializer);
|
|
} else if (Module.memoryInitializerPrefixURL) {
|
|
memoryInitializer = Module.memoryInitializerPrefixURL + memoryInitializer;
|
|
}
|
|
var xhr = Module.memoryInitializerRequest = new XMLHttpRequest();
|
|
xhr.open('GET', memoryInitializer, true);
|
|
xhr.responseType = 'arraybuffer';
|
|
xhr.send(null);
|
|
})();
|
|
|
|
var script = document.createElement('script');
|
|
script.src = "$GODOT_JS";
|
|
document.body.appendChild(script);
|
|
}, 1); // delaying even 1ms is enough to allow compilation memory to be reclaimed
|
|
};
|
|
document.body.appendChild(script);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|