Skip to content

Commit 5a9f4e3

Browse files
emilkTimonPost
emilk
authored and
TimonPost
committed
Run puffin_viewer in the browser
Sometimes works, sometimes doesn't
1 parent 6b68f58 commit 5a9f4e3

File tree

4 files changed

+157
-0
lines changed

4 files changed

+157
-0
lines changed

‎build_web.sh‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#!/bin/bash
2+
set -eu
3+
4+
# ./setup_web.sh # <- call this first!
5+
6+
CRATE_NAME="puffin_viewer"
7+
CRATE_NAME_SNAKE_CASE="${CRATE_NAME//-/_}" # for those who name crates with-kebab-case
8+
9+
# This is required to enable the web_sys clipboard API which egui_web uses
10+
# https://rustwasm.github.io/wasm-bindgen/api/web_sys/struct.Clipboard.html
11+
# https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
12+
export RUSTFLAGS=--cfg=web_sys_unstable_apis
13+
14+
# Clear output from old stuff:
15+
rm -f docs/${CRATE_NAME_SNAKE_CASE}_bg.wasm
16+
17+
echo "Building rust…"
18+
BUILD=release
19+
cargo build --release -p ${CRATE_NAME} --lib --target wasm32-unknown-unknown
20+
21+
echo "Generating JS bindings for wasm…"
22+
TARGET_NAME="${CRATE_NAME_SNAKE_CASE}.wasm"
23+
wasm-bindgen "target/wasm32-unknown-unknown/${BUILD}/${TARGET_NAME}" \
24+
--out-dir docs --no-modules --no-typescript
25+
26+
# to get wasm-opt: apt/brew/dnf install binaryen
27+
# echo "Optimizing wasm…"
28+
# wasm-opt docs/${CRATE_NAME_SNAKE_CASE}_bg.wasm -O2 --fast-math -o docs/${CRATE_NAME_SNAKE_CASE}_bg.wasm # add -g to get debug symbols
29+
30+
echo "Finished: docs/${CRATE_NAME_SNAKE_CASE}.wasm"
31+
32+
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
33+
# Linux, ex: Fedora
34+
xdg-open http://localhost:8888/index.html
35+
elif [[ "$OSTYPE" == "msys" ]]; then
36+
# Windows
37+
start http://localhost:8888/index.html
38+
else
39+
# Darwin/MacOS, or something else
40+
open http://localhost:8888/index.html
41+
fi

‎docs/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4+
5+
<!-- Disable zooming: -->
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7+
8+
<head>
9+
<title>Puffin Viewer</title>
10+
<style>
11+
html {
12+
/* Remove touch delay: */
13+
touch-action: manipulation;
14+
}
15+
16+
body {
17+
/* Background color for what is not covered by the egui canvas,
18+
or where the egui canvas is translucent. */
19+
background: #404040;
20+
}
21+
22+
/* Allow canvas to fill entire web page: */
23+
html,
24+
body {
25+
overflow: hidden;
26+
margin: 0 !important;
27+
padding: 0 !important;
28+
}
29+
30+
/* Position canvas in center-top: */
31+
canvas {
32+
margin-right: auto;
33+
margin-left: auto;
34+
display: block;
35+
position: absolute;
36+
top: 0%;
37+
left: 50%;
38+
transform: translate(-50%, 0%);
39+
}
40+
</style>
41+
<link rel="manifest" href="./manifest.json">
42+
<script>
43+
// register ServiceWorker
44+
window.onload = () => {
45+
'use strict';
46+
47+
if ('serviceWorker' in navigator) {
48+
navigator.serviceWorker
49+
.register('./sw.js');
50+
}
51+
}
52+
</script>
53+
</head>
54+
55+
<body>
56+
<!-- The WASM code will resize this canvas to cover the entire screen -->
57+
<canvas id="the_canvas_id"></canvas>
58+
59+
<script>
60+
// The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
61+
// `WebAssembly.instantiateStreaming` to instantiate the wasm module,
62+
// but this doesn't work with `file://` urls. This example is frequently
63+
// viewed by simply opening `index.html` in a browser (with a `file://`
64+
// url), so it would fail if we were to call this function!
65+
//
66+
// Work around this for now by deleting the function to ensure that the
67+
// `no_modules.js` script doesn't have access to it. You won't need this
68+
// hack when deploying over HTTP.
69+
delete WebAssembly.instantiateStreaming;
70+
</script>
71+
72+
<!-- This is the JS generated by the `wasm-bindgen` CLI tool -->
73+
<script src="puffin_viewer.js"></script>
74+
75+
<script>
76+
// We'll defer our execution until the wasm is ready to go.
77+
// Here we tell bindgen the path to the wasm file so it can start
78+
// initialization and return to us a promise when it's done.
79+
wasm_bindgen("./puffin_viewer_bg.wasm")
80+
.then(on_wasm_loaded)["catch"](console.error);
81+
82+
function on_wasm_loaded() {
83+
// This call installs a bunch of callbacks and then returns.
84+
wasm_bindgen.start("the_canvas_id");
85+
}
86+
</script>
87+
</body>
88+
89+
</html>
90+
91+
<!-- Powered by egui: https://github.com/emilk/egui/ -->

‎setup_web.sh‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#!/bin/bash
2+
set -eu
3+
script_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
4+
cd "$script_path"
5+
6+
# Pre-requisites:
7+
rustup target add wasm32-unknown-unknown
8+
cargo install wasm-bindgen-cli
9+
cargo update -p wasm-bindgen

‎start_server.sh‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
#!/bin/bash
2+
set -eu
3+
script_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
4+
cd "$script_path"
5+
6+
# Starts a local web-server that serves the contents of the `doc/` folder,
7+
# i.e. the web-version of `egui_demo_app`.
8+
9+
echo "ensuring basic-http-server is installed…"
10+
cargo install basic-http-server
11+
12+
echo "starting server…"
13+
echo "serving at http://localhost:8888"
14+
15+
(cd docs && basic-http-server --addr 127.0.0.1:8888 .)
16+
# (cd docs && python3 -m http.server 8888 --bind 127.0.0.1)

0 commit comments

Comments
 (0)