Add example_web app

2026-06-27 07:03:14 -04:00 · 2020-11-17 23:24:14 +01:00
parent 7e9b5de250
commit 0cb3bb791b
14 changed files with 272 additions and 64 deletions
--- a/docs/example.html
+++ b/docs/example.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<!-- Disable zooming: -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+<head>
+    <title>Egui – An experimental immediate mode GUI written in Rust</title>
+    <style>
+        html {
+            /* Remove touch delay: */
+            touch-action: manipulation;
+        }
+
+        body {
+            background: #101010;
+        }
+
+        /* Allow canvas to fill entire web page: */
+        html,
+        body {
+            overflow: hidden;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+    </style>
+</head>
+
+<body>
+    <!--
+        THis is where the app will show up.
+        The WASM code will resize this to cover the entire screen.
+    -->
+    <canvas id="the_canvas_id"></canvas>
+
+    <script>
+        // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
+        // `WebAssembly.instantiateStreaming` to instantiate the wasm module,
+        // but this doesn't work with `file://` urls. This example is frequently
+        // viewed by simply opening `index.html` in a browser (with a `file://`
+        // url), so it would fail if we were to call this function!
+        //
+        // Work around this for now by deleting the function to ensure that the
+        // `no_modules.js` script doesn't have access to it. You won't need this
+        // hack when deploying over HTTP.
+        delete WebAssembly.instantiateStreaming;
+    </script>
+
+    <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
+    <script src="example_web.js"></script>
+
+    <script>
+        // We'll defer our execution until the wasm is ready to go.
+        // Here we tell bindgen the path to the wasm file so it can start
+        // initialization and return to us a promise when it's done.
+        wasm_bindgen("./example_web_bg.wasm")
+            .then(on_wasm_loaded)["catch"](console.error);
+
+        function on_wasm_loaded() {
+            // This call installs a bunch of callbacks and then return
+            wasm_bindgen.start("the_canvas_id");
+        }
+    </script>
+</body>
+
+</html>