index.html: catch and display errors

This commit is contained in:
Emil Ernerfeldt 2022-01-31 19:16:50 +01:00
parent 871a200ecf
commit 7eddd20a01

View file

@ -46,7 +46,7 @@
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
} }
.loading { .centered {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
display: block; display: block;
@ -54,9 +54,10 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: white; color: #f0f0f0;
font-size: 24px; font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif; font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
} }
/* ---------------------------------------------- */ /* ---------------------------------------------- */
@ -94,8 +95,10 @@
<body> <body>
<!-- The WASM code will resize the canvas dynamically --> <!-- The WASM code will resize the canvas dynamically -->
<canvas id="the_canvas_id"></canvas> <canvas id="the_canvas_id"></canvas>
<div class="loading" id="loading"> <div class="centered" id="center_text">
Loading…&nbsp;&nbsp; <p style="font-size:16px">
Loading…
</p>
<div class="lds-dual-ring"></div> <div class="lds-dual-ring"></div>
</div> </div>
@ -121,7 +124,7 @@
// initialization and return to us a promise when it's done. // initialization and return to us a promise when it's done.
wasm_bindgen("./egui_demo_app_bg.wasm") wasm_bindgen("./egui_demo_app_bg.wasm")
.then(on_wasm_loaded) .then(on_wasm_loaded)
.catch(console.error); .catch(on_wasm_error);
function on_wasm_loaded() { function on_wasm_loaded() {
console.log("loaded wasm, starting egui app…"); console.log("loaded wasm, starting egui app…");
@ -130,7 +133,21 @@
wasm_bindgen.start("the_canvas_id"); wasm_bindgen.start("the_canvas_id");
console.log("egui app started."); console.log("egui app started.");
document.getElementById("loading").remove(); document.getElementById("center_text").remove();
}
function on_wasm_error(error) {
console.error("Failed to start egui: " + error);
document.getElementById("center_text").innerHTML = `
<p>
An error occurred loading egui
</p>
<p style="font-family:Courier New">
${error}
</p>
<p style="font-size:14px">
Make sure you use a modern browser with WebGL and WASM enabled.
</p>`;
} }
</script> </script>
</body> </body>