First attempt at wasm32 gui build

widberg · Nov 19, 2023 · 441841c · 441841c
1 parent f7812b9
commit 441841c
Show file tree

Hide file tree

Showing 14 changed files with 236 additions and 11 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/bff-cli/src/main.rs b/bff-cli/src/main.rs
@@ -115,7 +115,7 @@ enum Commands {
     Csc {
         input: StdioOrPath,
         output: StdioOrPath,
-        #[arg(short, long, default_value_t = 255)]
+        #[arg(short, long, default_value_t = 255, help = "If the default value of 255 does not work, try 252")]
         key: u8,
     },
     #[clap(alias = "xpsc")]

diff --git a/bff-gui/.cargo/config.toml b/bff-gui/.cargo/config.toml
@@ -0,0 +1,6 @@
+# clipboard api is still unstable, so web-sys requires the below flag to be passed for copy (ctrl + c) to work
+# https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
+# check status at https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+# we don't use `[build]` because of rust analyzer's build cache invalidation https://github.com/emilk/eframe_template/issues/93
+[target.wasm32-unknown-unknown]
+rustflags = ["--cfg=web_sys_unstable_apis"]
diff --git a/bff-gui/Cargo.toml b/bff-gui/Cargo.toml
@@ -21,3 +21,8 @@ serde_json = "1.0.107"
 three-d = "0.16.1"
 three-d-asset = "0.6.0"
 tokio = { version = "1.33.0", features = ["rt-multi-thread", "time"] }
+
+# web:
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen-futures = "0.4"
+
diff --git a/bff-gui/Trunk.toml b/bff-gui/Trunk.toml
@@ -0,0 +1 @@
+[build]
diff --git a/bff-gui/assets/favicon.ico b/bff-gui/assets/favicon.ico
diff --git a/bff-gui/assets/icon-1024.png b/bff-gui/assets/icon-1024.png
diff --git a/bff-gui/assets/icon-256.png b/bff-gui/assets/icon-256.png
diff --git a/bff-gui/assets/icon_ios_touch_192.png b/bff-gui/assets/icon_ios_touch_192.png
diff --git a/bff-gui/assets/manifest.json b/bff-gui/assets/manifest.json
@@ -0,0 +1,28 @@
+{
+  "name": "egui Template PWA",
+  "short_name": "egui-template-pwa",
+  "icons": [
+    {
+      "src": "./icon-256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "./maskable_icon_x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "./icon-1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
+    }
+  ],
+  "lang": "en-US",
+  "id": "/index.html",
+  "start_url": "./index.html",
+  "display": "standalone",
+  "background_color": "white",
+  "theme_color": "white"
+}
diff --git a/bff-gui/assets/maskable_icon_x512.png b/bff-gui/assets/maskable_icon_x512.png
diff --git a/bff-gui/assets/sw.js b/bff-gui/assets/sw.js
@@ -0,0 +1,25 @@
+var cacheName = 'egui-template-pwa';
+var filesToCache = [
+  './',
+  './index.html',
+  './eframe_template.js',
+  './eframe_template_bg.wasm',
+];
+
+/* Start the service worker and cache all of the app's content */
+self.addEventListener('install', function (e) {
+  e.waitUntil(
+    caches.open(cacheName).then(function (cache) {
+      return cache.addAll(filesToCache);
+    })
+  );
+});
+
+/* Serve cached content when offline */
+self.addEventListener('fetch', function (e) {
+  e.respondWith(
+    caches.match(e.request).then(function (response) {
+      return response || fetch(e.request);
+    })
+  );
+});
diff --git a/bff-gui/index.html b/bff-gui/index.html
@@ -0,0 +1,140 @@
+<!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>
+    <!-- change this to your project name -->
+    <title>eframe template</title>
+
+    <!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
+    <link data-trunk rel="rust" data-wasm-opt="2" />
+    <!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
+    <base data-trunk-public-url />
+
+    <link data-trunk rel="icon" href="assets/favicon.ico">
+
+
+    <link data-trunk rel="copy-file" href="assets/sw.js" />
+    <link data-trunk rel="copy-file" href="assets/manifest.json" />
+    <link data-trunk rel="copy-file" href="assets/icon-1024.png" />
+    <link data-trunk rel="copy-file" href="assets/icon-256.png" />
+    <link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" />
+    <link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" />
+
+
+    <link rel="manifest" href="manifest.json">
+    <link rel="apple-touch-icon" href="icon_ios_touch_192.png">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040">
+
+    <style>
+        html {
+            /* Remove touch delay: */
+            touch-action: manipulation;
+        }
+
+        body {
+            /* Light mode background color for what is not covered by the egui canvas,
+            or where the egui canvas is translucent. */
+            background: #909090;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                /* Dark mode background color for what is not covered by the egui canvas,
+                or where the egui canvas is translucent. */
+                background: #404040;
+            }
+        }
+
+        /* Allow canvas to fill entire web page: */
+        html,
+        body {
+            overflow: hidden;
+            margin: 0 !important;
+            padding: 0 !important;
+            height: 100%;
+            width: 100%;
+        }
+
+        /* Position canvas in center-top: */
+        canvas {
+            margin-right: auto;
+            margin-left: auto;
+            display: block;
+            position: absolute;
+            top: 0%;
+            left: 50%;
+            transform: translate(-50%, 0%);
+        }
+
+        .centered {
+            margin-right: auto;
+            margin-left: auto;
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #f0f0f0;
+            font-size: 24px;
+            font-family: Ubuntu-Light, Helvetica, sans-serif;
+            text-align: center;
+        }
+
+        /* ---------------------------------------------- */
+        /* Loading animation from https://loading.io/css/ */
+        .lds-dual-ring {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+        }
+
+        .lds-dual-ring:after {
+            content: " ";
+            display: block;
+            width: 24px;
+            height: 24px;
+            margin: 0px;
+            border-radius: 50%;
+            border: 3px solid #fff;
+            border-color: #fff transparent #fff transparent;
+            animation: lds-dual-ring 1.2s linear infinite;
+        }
+
+        @keyframes lds-dual-ring {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+    </style>
+</head>
+
+<body>
+    <!-- The WASM code will resize the canvas dynamically -->
+    <!-- the id is hardcoded in main.rs . so, make sure both match. -->
+    <canvas id="the_canvas_id"></canvas>
+
+    <!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
+    <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files  -->
+    <script>
+        // We disable caching during development so that we always view the latest version.
+        if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
+            window.addEventListener('load', function () {
+                navigator.serviceWorker.register('sw.js');
+            });
+        }
+    </script>
+</body>
+
+</html>
+
+<!-- Powered by egui: https://github.com/emilk/egui/ -->
diff --git a/bff-gui/src/main.rs b/bff-gui/src/main.rs
@@ -31,16 +31,35 @@ fn main() -> Result<(), eframe::Error> {
         })
     });
 
-    let options = eframe::NativeOptions {
-        drag_and_drop_support: true,
-        renderer: eframe::Renderer::Glow,
-        icon_data: Some(
-            eframe::IconData::try_from_png_bytes(include_bytes!("../resources/bff.png")).unwrap(),
-        ),
-        initial_window_size: Some(WINDOW_SIZE),
-        ..Default::default()
-    };
-    eframe::run_native(TITLE, options, Box::new(|cc| Box::new(Gui::new(cc))))
+    #[cfg(not(target_arch = "wasm32"))]
+    {
+        let options = eframe::NativeOptions {
+            drag_and_drop_support: true,
+            renderer: eframe::Renderer::Glow,
+            icon_data: Some(
+                eframe::IconData::try_from_png_bytes(include_bytes!("../resources/bff.png")).unwrap(),
+            ),
+            initial_window_size: Some(WINDOW_SIZE),
+            ..Default::default()
+        };
+        eframe::run_native(TITLE, options, Box::new(|cc| Box::new(Gui::new(cc))))
+    }
+
+    #[cfg(target_arch = "wasm32")]
+    {
+        let web_options = eframe::WebOptions::default();
+
+        wasm_bindgen_futures::spawn_local(async {
+            eframe::WebRunner::new()
+                .start(
+                    "the_canvas_id", // hardcode it
+                    web_options,
+                    Box::new(|cc| Box::new(Gui::new(cc))),
+                )
+                .await
+                .expect("failed to start eframe");
+        });
+    }
 }
 
 fn setup_custom_font(ctx: &egui::Context) {