😁(wasm): update wasm target

W-Mai · Nov 12, 2024 · 60a4908 · 60a4908
1 parent becc11b
commit 60a4908
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 39 deletions.
diff --git a/.github/workflows/rust.yml b/.github/workflows/rust.yml
@@ -96,7 +96,7 @@ jobs:
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
-          toolchain: 1.72.0
+          toolchain: stable
           target: wasm32-unknown-unknown
           override: true
       - name: Download and install Trunk binary

diff --git a/Cargo.toml b/Cargo.toml
@@ -20,6 +20,7 @@ log = "0.4.19"
 levenshtein = "*"
 
 dyn-clone = "1.0.16"
+web-sys = "0.3.72"
 
 # native:
 [target.'cfg(all(not(target_arch = "wasm32"), platform = "macos"))'.dependencies]

diff --git a/index.html b/index.html
@@ -1,32 +1,32 @@
 <!DOCTYPE html>
 <html>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<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>Vegravis</title>
+    <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" />
+    <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 />
+    <base data-trunk-public-url/>
 
     <link data-trunk rel="icon" href="assets/favicon.png">
 
 
-    <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 data-trunk rel="copy-file" href="assets/sw.js"/>
+    <link data-trunk rel="copy-file" href="assets/manifest.json" data-target-path="assets"/>
+    <link data-trunk rel="copy-file" href="assets/icon-1024.png" data-target-path="assets"/>
+    <link data-trunk rel="copy-file" href="assets/icon-256.png" data-target-path="assets"/>
+    <link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" data-target-path="assets"/>
+    <link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" data-target-path="assets"/>
 
 
-    <link rel="manifest" href="manifest.json">
-    <link rel="apple-touch-icon" href="icon_ios_touch_192.png">
+    <link rel="manifest" href="assets/manifest.json">
+    <link rel="apple-touch-icon" href="assets/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">
 
@@ -60,15 +60,16 @@
             width: 100%;
         }
 
-        /* Position canvas in center-top: */
+        /* Make canvas fill entire document: */
         canvas {
             margin-right: auto;
             margin-left: auto;
             display: block;
             position: absolute;
-            top: 0%;
-            left: 50%;
-            transform: translate(-50%, 0%);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
 
         .centered {
@@ -114,27 +115,34 @@
                 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="vegravis_canvas"></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>
+<!-- The WASM code will resize the canvas dynamically -->
+<!-- the id is hardcoded in main.rs . so, make sure both match. -->
+<canvas id="vegravis_canvas"></canvas>
+
+<!-- the loading spinner will be removed in main.rs -->
+<div class="centered" id="loading_text">
+    <p style="font-size:16px">
+        Loading…
+    </p>
+    <div class="lds-dual-ring"></div>
+</div>
+
+<!--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/ -->
+<!-- Powered by egui: https://github.com/emilk/egui/ -->
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
@@ -0,0 +1,3 @@
+[toolchain]
+channel = "1.82"
+components = ["rustc", "cargo", "rust-std", "clippy", "rustfmt"]
diff --git a/src/interfaces.rs b/src/interfaces.rs
@@ -159,6 +159,7 @@ pub trait IVisData: DynClone {
 
 dyn_clone::clone_trait_object!(IVisData);
 
+#[allow(dead_code)]
 pub trait IVisualizer {
     fn new(transform: [[f64; 3]; 3]) -> Self;
     fn plot(

diff --git a/src/main.rs b/src/main.rs
@@ -7,7 +7,10 @@ use vegravis::MainApp;
 fn main() -> Result<(), eframe::Error> {
     env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
     let options = eframe::NativeOptions {
-        viewport: eframe::egui::ViewportBuilder::default().with_inner_size([1440.0, 960.0]),
+        viewport: eframe::egui::ViewportBuilder::default().with_icon(
+            eframe::icon_data::from_png_bytes(&include_bytes!("../assets/icon-256.png")[..])
+                .expect("Failed to load icon"),
+        ),
         ..Default::default()
     };
     eframe::run_native(
@@ -20,19 +23,46 @@ fn main() -> Result<(), eframe::Error> {
 // When compiling to web using trunk:
 #[cfg(target_arch = "wasm32")]
 fn main() {
+    use eframe::wasm_bindgen::JsCast as _;
+
     // Redirect `log` message to `console.log` and friends:
     eframe::WebLogger::init(log::LevelFilter::Debug).ok();
 
     let web_options = eframe::WebOptions::default();
 
     wasm_bindgen_futures::spawn_local(async {
-        eframe::WebRunner::new()
+        let document = web_sys::window()
+            .expect("No window")
+            .document()
+            .expect("No document");
+
+        let canvas = document
+            .get_element_by_id("vegravis_canvas")
+            .expect("Failed to find vegravis_canvas")
+            .dyn_into::<web_sys::HtmlCanvasElement>()
+            .expect("vegravis_canvas was not a HtmlCanvasElement");
+
+        let start_result = eframe::WebRunner::new()
             .start(
-                "vegravis_canvas", // hardcode it
+                canvas,
                 web_options,
-                Box::new(|_cc| Box::<MainApp>::default()),
+                Box::new(|_cc| Ok(Box::<MainApp>::default())),
             )
-            .await
-            .expect("failed to start eframe");
+            .await;
+
+        // Remove the loading text and spinner:
+        if let Some(loading_text) = document.get_element_by_id("loading_text") {
+            match start_result {
+                Ok(_) => {
+                    loading_text.remove();
+                }
+                Err(e) => {
+                    loading_text.set_inner_html(
+                        "<p> The app has crashed. See the developer console for details. </p>",
+                    );
+                    panic!("Failed to start eframe: {e:?}");
+                }
+            }
+        }
     });
 }