added python inline mode

Cargo.toml

@@ -21,7 +21,7 @@ byteorder = "1.4.3"
 num-traits = "0.2.16"
 half = { version = "2.3.1", features = ["bytemuck", "num-traits"] }
 log = "0.4.20"
-once_cell = "1.19.0"
+once_cell = { version = "1.19.0", optional = true }
 
 
 egui = "0.27.2"
@@ -32,25 +32,28 @@ egui_plot = "0.27.2"
 npyz = { version = "0.8.3", features = ["npz", "half"] }
 futures-intrusive = "0.5.0"
 include_dir = "0.7.3"
+web-sys = { version = "0.3.69", features = ["GpuColorDict"] }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 pollster = { version = "0.3.0", features = ["macro"] }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 
-rfd = "0.14.1"
+rfd = { version = "0.14.1", features = ["file-handle-inner"] }
 getrandom = { version = "0.2", features = ["js"] }
 wasm-bindgen = "0.2.92"
 console_error_panic_hook = "0.1.7"
 wasm-bindgen-futures = "0.4.42"
 console_log = "1"
 log = "0.4"
 instant = { version = "0.1.12", features = ["wasm-bindgen"] }
-web-sys = { version = "0.3.69" }
 
 [dev-dependencies]
 wasm-bindgen-cli = "0.2.92"
 
+[features]
+colormaps = ["dep:once_cell"]
+
 [lib]
 path = "src/lib.rs"
 crate-type = ["cdylib", "rlib"]
@@ -59,9 +62,6 @@ crate-type = ["cdylib", "rlib"]
 name = "viewer"
 
 [profile.web-release]
-inherits = "release"
-opt-level = "s"
-strip = "debuginfo"
-
-[features]
-colormaps = []
+inherits = "dev"
+# opt-level = "s"
+# strip = "debuginfo"

build_wasm.sh

@@ -1,11 +1,12 @@
 cargo build \
     --no-default-features \
     --target wasm32-unknown-unknown \
+    --features colormaps \
     --lib \
     --profile web-release\
 && wasm-bindgen \
     --out-dir public \
-    --target web\
-    --no-typescript\
+    --no-typescript \
+    --target web \
     target/wasm32-unknown-unknown/web-release/v4dv.wasm \
 

public/index.html

@@ -33,66 +33,77 @@
         }
 
         .lds-ripple {
-        /* change color here */
-        color: #1c4c5b
+            /* change color here */
+            color: #1c4c5b
         }
+
         .lds-ripple,
         .lds-ripple div {
-        box-sizing: border-box;
+            box-sizing: border-box;
         }
+
         .lds-ripple {
-        display: inline-block;
-        position: relative;
-        width: 80px;
-        height: 80px;
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 80px;
         }
+
         .lds-ripple div {
-        position: absolute;
-        border: 4px solid currentColor;
-        opacity: 1;
-        border-radius: 50%;
-        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+            position: absolute;
+            border: 4px solid currentColor;
+            opacity: 1;
+            border-radius: 50%;
+            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
         }
+
         .lds-ripple div:nth-child(2) {
-        animation-delay: -0.5s;
+            animation-delay: -0.5s;
         }
+
         @keyframes lds-ripple {
-        0% {
-            top: 36px;
-            left: 36px;
-            width: 8px;
-            height: 8px;
-            opacity: 0;
-        }
-        4.9% {
-            top: 36px;
-            left: 36px;
-            width: 8px;
-            height: 8px;
-            opacity: 0;
-        }
-        5% {
-            top: 36px;
-            left: 36px;
-            width: 8px;
-            height: 8px;
-            opacity: 1;
-        }
-        100% {
-            top: 0;
-            left: 0;
-            width: 80px;
-            height: 80px;
-            opacity: 0;
-        }
+            0% {
+                top: 36px;
+                left: 36px;
+                width: 8px;
+                height: 8px;
+                opacity: 0;
+            }
+
+            4.9% {
+                top: 36px;
+                left: 36px;
+                width: 8px;
+                height: 8px;
+                opacity: 0;
+            }
+
+            5% {
+                top: 36px;
+                left: 36px;
+                width: 8px;
+                height: 8px;
+                opacity: 1;
+            }
+
+            100% {
+                top: 0;
+                left: 0;
+                width: 80px;
+                height: 80px;
+                opacity: 0;
+            }
         }
     </style>
 
 </head>
 
 <body>
     <div id="spinner" style="display: none;">
-        <div class="lds-ripple"><div></div><div></div></div>
+        <div class="lds-ripple">
+            <div></div>
+            <div></div>
+        </div>
         <p>Loading ...</p>
     </div>
     <div id="loading-error" class="alert" style="display: none;">
@@ -101,24 +112,57 @@ <h1>An error occured</h1>
     </div>
     <canvas id="window-canvas"></canvas>
     <script type="module">
+        import init, { viewer_inline, viewer_wasm, InlineViewerConfig, Color } from "./v4dv.js";
+
+        document.getElementById("spinner").style.display = "flex";
 
         let canvas = document.getElementById("window-canvas");
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
         canvas.style.width = "100%";
         canvas.style.height = "100%";
 
-        import init, { viewer_wasm } from "./v4dv.js";
-        let init_promise = init();
-        await init_promise;
+        let url = new URL(window.location.href);
+        if (url.searchParams.get("inline") !== null) {
+            console.log("inline mode");
+
+            window.addEventListener(
+                "message",
+                async (event) => {
+                    console.log(event.origin);
+                    if (event.origin == window.origin) {
+                        return;
+                    }
+                    let init_promise = init();
+                    await init_promise;
+                    viewer_inline(
+                        event.data["volume"],
+                        event.data["cmap"],
+                        "window-canvas",
+                        new InlineViewerConfig(
+                            new Color(0., 0., 0., 1.), false, false
+                        )
+                    );
+                    window.removeEventListener("message", this)
+                },
+            );
+            window.parent.postMessage("ready", "*");
+            window.parent = window.top = null;
+        } else {
+            let init_promise = init();
+            await init_promise;
+            viewer_wasm(
+                "window-canvas"
+            );
+        }
+
 
         window.addEventListener('resize', function (event) {
             canvas.width = window.innerWidth;
             canvas.height = window.innerHeight;
             canvas.style.width = "100%";
             canvas.style.height = "100%";
         }, true);
-        viewer_wasm("window-canvas");
 
     </script>
 </body>

src/bin/viewer.rs

@@ -19,29 +19,39 @@ struct Opt {
 
     #[arg(long, default_value_t = false)]
     channel_first: bool,
+
+    #[cfg(not(feature = "colormaps"))]
+    colormap: PathBuf,
 }
 
 #[pollster::main]
-async fn main() {
+async fn main() -> anyhow::Result<()> {
     env_logger::init();
     let opt = Opt::parse();
 
-    let data_file = File::open(&opt.input).unwrap();
+    let data_file = File::open(&opt.input)?;
 
     let window_builder = WindowBuilder::new().with_inner_size(PhysicalSize::new(800, 600));
 
     let volumes = Volume::load_numpy(BufReader::new(data_file), !opt.channel_first)
         .expect("Failed to load volume");
 
+    #[cfg(feature = "colormaps")]
     let cmap = cmap::COLORMAPS.get("viridis").unwrap().clone();
+    #[cfg(not(feature = "colormaps"))]
+    let cmap = cmap::ColorMap::from_npy(File::open(&opt.colormap)?)?;
 
     open_window(
         window_builder,
         volumes,
         cmap,
         RenderConfig {
             no_vsync: opt.no_vsync,
+            background_color: wgpu::Color::BLACK,
+            show_colormap_editor: true,
+            show_volume_info: true,
         },
     )
     .await;
+    Ok(())
 }

src/camera.rs

@@ -1,6 +1,7 @@
 use cgmath::*;
 
 pub type PerspectiveCamera = GenericCamera<PerspectiveProjection>;
+pub type OrthographicCamera = GenericCamera<OrthographicProjection>;
 
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct GenericCamera<P: Projection> {
@@ -52,12 +53,7 @@ pub struct PerspectiveProjection {
 
 impl Projection for PerspectiveProjection {
     fn projection_matrix(&self) -> Matrix4<f32> {
-        build_proj(
-            self.znear,
-            self.zfar,
-            self.fovx,
-            self.fovy,
-        )
+        build_proj(self.znear, self.zfar, self.fovx, self.fovy)
     }
 }
 
@@ -75,7 +71,7 @@ impl PerspectiveProjection {
         let fovyr = fovy.into();
         Self {
             fovy: fovyr,
-            fovx: fovyr*vr,
+            fovx: fovyr * vr,
             znear,
             zfar,
             aspect_ratio: vr,
@@ -136,7 +132,7 @@ pub struct OrthographicProjection {
 
 impl OrthographicProjection {
     #[allow(unused)]
-    pub fn new(viewport: Vector2<u32>, znear: f32, zfar: f32) -> Self {
+    pub fn new(viewport: Vector2<f32>, znear: f32, zfar: f32) -> Self {
         let vr = viewport.x as f32 / viewport.y as f32;
         Self {
             height: viewport.y as f32,