diff --git a/controller/imager/mqtt.py b/controller/imager/mqtt.py
index 2d5cbe9c2..40e08c6b0 100644
--- a/controller/imager/mqtt.py
+++ b/controller/imager/mqtt.py
@@ -365,6 +365,17 @@ def run(self) -> None:
                 f'{{"status":"Image {index + 1}/{self._routine.settings.total_images} '
                 + f'saved to {filename}"}}',
             )
+            self._mqtt_client.publish(
+                "status/imager",
+                json.dumps(
+                    {
+                        "type": "progress",
+                        "path": filename_path,
+                        "current": index + 1,
+                        "total": self._routine.settings.total_images,
+                    }
+                ),
+            )
 
     def stop(self) -> None:
         """Stop the thread.
diff --git a/docs/BUGFIX_CHANGELOG.md b/docs/BUGFIX_CHANGELOG.md
new file mode 100644
index 000000000..6e77adbb7
--- /dev/null
+++ b/docs/BUGFIX_CHANGELOG.md
@@ -0,0 +1,960 @@
+# Bug Fix Change Log
+
+This document tracks bug fixes made to the PlanktoScope Update Dashboard branch.
+Each fix includes the original code so changes can be reverted if needed.
+
+---
+
+## Fix #1: H.264 Video Stream Corruption (RPi5)
+
+**Date:** 2026-01-23
+**File:** `controller/camera/hardware.py`
+**Lines:** 21, 287-301
+**Issue:** Severe video corruption/pixelization in live stream on Raspberry Pi 5
+
+### Problem Description
+
+The video stream displayed severe H.264 decoding artifacts on RPi5 - blocky, pixelated corruption affecting the entire frame. This has been present since the beginning on RPi5.
+
+**Root Cause:** The RPi5 preview resolution `2028x1520` is NOT 16-pixel aligned
+- 2028 / 16 = 126.75 
+- H.264 requires 16-pixel macroblock alignment
+- The code comment on line 17 mentions this: "anything <= 1920x1080 divisible by 16 (required by H.264 macroblock alignment)"
+
+The RPi4 resolution (1440x1080) is properly aligned, which is why it works there.
+
+### Screenshot of Issue
+
+See: `/Users/adam/Documents/Update_dashboard/divx.jpg`
+
+### Part A: Resolution Fix (Line 21)
+
+**Original Code:**
+```python
+preview_size = (1440, 1080) if (get_platform() == Platform.VC4) else (2028, 1520)
+```
+
+**New Code:**
+```python
+preview_size = (1440, 1080) if (get_platform() == Platform.VC4) else (1920, 1440)
+```
+
+**Why 1920x1440:**
+- 1920 / 16 = 120 (aligned!)
+- 1440 / 16 = 90 (aligned!)
+- Maintains 4:3 aspect ratio
+- Well-supported, commonly used resolution
+
+### Part B: Encoder Settings (Lines 287-301)
+
+Also added encoder improvements for network resilience:
+
+**Original Code:**
+```python
+        encoder = encoders.H264Encoder(
+            # picamera2-manual.pdf 7.1.1. H264Encoder
+            # the bitrate (in bits per second) to use. The default value None will cause the encoder to
+            # choose an appropriate bitrate according to the Quality when it starts.
+            # bitrate=None,
+            # picamera2-manual.pdf 7.1.1. H264Encoder
+            # whether to repeat the stream's sequence headers with every Intra frame (I-frame). This can
+            # be sometimes be useful when streaming video over a network, when the client may not receive the start of the
+            # stream where the sequence headers would normally be located.
+            # repeat=False,
+            # picamera2-manual.pdf 7.1.1. H264Encoder
+            # iperiod (default None) - the number of frames from one I-frame to the next. The value None leaves this at the
+            # discretion of the hardware, which defaults to 60 frames.
+            # iperiod=None
+        )
+```
+
+**New Code:**
+```python
+        encoder = encoders.H264Encoder(
+            # FIX: Use baseline profile to disable B-frames (WebRTC doesn't support B-frames)
+            # See: https://github.com/bluenviron/mediamtx/issues/3022
+            # See: https://github.com/raspberrypi/picamera2/issues/785
+            profile="baseline",
+            # picamera2-manual.pdf 7.1.1. H264Encoder
+            # whether to repeat the stream's sequence headers with every Intra frame (I-frame). This can
+            # sometimes be useful when streaming video over a network, when the client may not receive the start of the
+            # stream where the sequence headers would normally be located.
+            repeat=True,  # FIX: Repeat headers for network resilience
+            # picamera2-manual.pdf 7.1.1. H264Encoder
+            # iperiod (default None) - the number of frames from one I-frame to the next. The value None leaves this at the
+            # discretion of the hardware, which defaults to 60 frames.
+            iperiod=15,  # FIX: I-frame every 15 frames for faster recovery
+        )
+```
+
+### Part C: MediaMTX Buffer Fix
+
+**File:** `os/mediamtx/mediamtx.yml`
+
+Added `writeQueueSize: 1024` to prevent packet drops on RPi5 software encoder.
+
+**Original:** (no writeQueueSize setting)
+
+**New:**
+```yaml
+writeQueueSize: 1024
+```
+
+### Research Notes
+
+- **Root cause:** WebRTC doesn't support H.264 B-frames, causing stream corruption
+- **Solution:** Use `profile="baseline"` which disables B-frames
+- **References:**
+  - [MediaMTX B-frames issue](https://github.com/bluenviron/mediamtx/issues/3022)
+  - [picamera2 baseline profile](https://github.com/raspberrypi/picamera2/issues/785)
+  - [picamera2 RPi5 H264 issues](https://github.com/raspberrypi/picamera2/issues/1135)
+
+**Note:** Explicit bitrate (8 Mbps) and iperiod=1 were tried but made things worse.
+
+### How to Revert
+
+**Part A (Resolution):** Change line 21 back to:
+```python
+preview_size = (1440, 1080) if (get_platform() == Platform.VC4) else (2028, 1520)
+```
+
+**Part B (Encoder):** Remove `profile="baseline"`, `repeat=True`, and `iperiod=15` parameters from H264Encoder().
+
+**Part C (MediaMTX):** Remove `writeQueueSize: 1024` from mediamtx.yml.
+
+### Expected Outcome
+
+- Resolution alignment (16-pixel) eliminates macroblock alignment corruption
+- `profile="baseline"` disables B-frames which WebRTC cannot decode
+- `repeat=True` provides header resilience for network issues
+- `iperiod=15` provides reasonable keyframe frequency
+- `writeQueueSize: 1024` prevents packet drops from buffer overflow
+
+---
+
+## Fix #2: Calibration Settings Not Persisting
+
+**Date:** 2026-01-23
+**File:** `node-red/settings.cjs`
+**Lines:** 341-345
+**Issue:** Calibration settings reset on system restart
+
+### Problem Description
+
+Node-RED context storage uses `localfilesystem` module which flushes to disk every 30 seconds by default. If Node-RED restarts before flush completes, calibration data is lost.
+
+### Original Code (for revert)
+
+```javascript
+    contextStorage: {
+       default: {
+           module:"localfilesystem"
+       },
+    },
+```
+
+### New Code
+
+```javascript
+    contextStorage: {
+       default: {
+           module: "localfilesystem",
+           config: {
+               flushInterval: 5,  // FIX: Flush every 5 seconds instead of default 30 to prevent calibration data loss on restart
+           }
+       },
+    },
+```
+
+### How to Revert
+
+Remove the `config` object with `flushInterval` from the contextStorage setting.
+
+### Expected Outcome
+
+- Calibration settings will be saved to disk every 5 seconds instead of 30
+- Much less likely to lose data on restart
+- Trade-off: Slightly more disk I/O (negligible impact)
+
+### Calibration Data Stored
+
+The following global context variables are persisted:
+- `calibration_pixel_size` - pixel size in µm/pixel
+- `calibration_scale_factor`, `calibration_sensor_width`, `calibration_stream_width`
+- `calibration_known_distance`, `calibration_measured_distance`
+- `calibration_markerA_x`, `calibration_markerA_y`, `calibration_markerB_x`, `calibration_markerB_y`
+- `calibration_wbg_red`, `calibration_wbg_blue` - white balance gains
+- `calibration_nb_step` - pump steps per mL
+
+**Status:** Applied and deployed to PlanktoScope (2026-01-24)
+**Deployment:** `scp node-red/settings.cjs` to `/home/pi/PlanktoScope/node-red/settings.cjs`
+**Service restart required:** `sudo systemctl restart nodered`
+
+---
+
+## Enhancement #1: Segmentation Mask Cyan Opacity Effect
+
+**Date:** 2026-01-23
+**Files:**
+- `frontend/src/pages/preview/SegmentationOverlay.jsx`
+- `frontend/src/pages/preview/segmentation/index.jsx`
+- `frontend/src/pages/preview/index.jsx`
+
+**Issue:** Segmentation masks used varying hue colors and 50% opacity, making them less visually appealing
+
+### Problem Description
+
+The segmentation mask overlays used a rainbow of colors based on object index (`hsl(index * 137.5, 70%, 50%)`) with 50% opacity. This was inconsistent and didn't highlight detected objects as clearly.
+
+### Original Code (for revert)
+
+```javascript
+const hue = (index * 137.5) % 360
+const color = `hsl(${hue}, 70%, 50%)`
+// ...
+ctx.globalAlpha = 0.5
+```
+
+### New Code
+
+```javascript
+// Cyan color for segmentation overlay (matching the cool opacity effect Thibaut likes)
+const maskColor = "rgb(0, 220, 220)"  // Cyan fill color
+const bboxColor = "rgb(0, 128, 128)"  // Darker teal for bounding box
+// ...
+ctx.globalAlpha = 0.35  // Subtle transparency to see underlying image
+```
+
+### How to Revert
+
+Replace the `maskColor` and `bboxColor` constants with the original hue-based color generation, and change `globalAlpha` back to `0.5`.
+
+### Expected Outcome
+
+- Consistent cyan/teal color scheme for all detected objects
+- Subtle 35% opacity allows underlying image details to show through
+- Darker teal bounding box provides clear boundary without being harsh
+- Matches the professional microscopy overlay aesthetic
+
+**Status:** Applied
+
+---
+
+## Enhancement #2: Blur Metric Visualization on Segmentation Page
+
+**Date:** 2026-01-24
+**Files:**
+- `frontend/src/pages/preview/segmentation/index.jsx`
+- `frontend/src/pages/preview/segmentation/styles.module.css`
+
+**Issue:** Need blur visualization (sparkline + heatmap) for focus quality monitoring during live segmentation
+
+### Changes Made
+
+**Part A: Added blur state and visualization to `segmentation/index.jsx`:**
+- Added `blurHistory` state for sparkline (last 60 values)
+- Added `blurGrid` state for heatmap data
+- Added `showHeatmap` toggle state
+- Added `blurStats()` computed function for min/avg/max
+- Added `sparklinePath()` function for SVG rendering
+- Added `drawHeatmap()` function for heatmap canvas
+- Added `toggleHeatmap()` and `clearHeatmap()` helper functions
+- Updated message handler to capture `blur_grid` from MQTT
+- Replaced simple focus indicator with full blur panel UI
+- Added heatmap canvas overlay to image wrapper
+
+**Part B: Added CSS styles to `segmentation/styles.module.css`:**
+- `.blur_panel` - container for blur visualization
+- `.blur_value` - numeric focus value display
+- `.sparkline_container` / `.sparkline` - SVG sparkline styling
+- `.blur_stats` - min/avg/max display
+- `.heatmap_btn` / `.heatmap_active` - toggle button
+- `.heatmap_canvas` - heatmap overlay positioning
+
+### How to Revert
+
+**Part A:** Remove the following from `segmentation/index.jsx`:
+- `BLUR_HISTORY_SIZE` constant
+- `blurHistory`, `blurGrid`, `showHeatmap` state signals
+- `heatmapCanvasRef` ref
+- `blurStats()`, `sparklinePath()`, `drawHeatmap()`, `clearHeatmap()`, `toggleHeatmap()` functions
+- Blur-related message handler updates (setBlurHistory, setBlurGrid)
+- Reset statements in handleToggle (setBlurHistory, setBlurGrid)
+- Replace the `blur_panel` div with original focus indicator:
+```jsx
+<div class={styles.focus_indicator}>
+  <span class={styles.stat_label}>Focus</span>
+  <span class={styles.focus_status} style={{ color: focusStatus().color }}>
+    <span class={styles.focus_icon}>{focusStatus().icon}</span>
+    {focusStatus().label}
+  </span>
+</div>
+```
+- Remove heatmap canvas from image wrapper, restore to:
+```jsx
+<canvas ref={canvasRef} class={styles.overlay_canvas} />
+```
+
+**Part B:** Remove CSS classes from `.blur_panel` through `.heatmap_canvas` from `styles.module.css`
+
+### Expected Outcome
+
+- Real-time sparkline showing blur trend over last 60 frames
+- Numeric blur value with color coding (red < 25, yellow 25-50, green > 50)
+- Min/avg/max statistics displayed compactly
+- Toggleable heatmap overlay showing regional blur, still needs work (red=blurry, green=sharp)
+
+### Note on Previous Issue
+
+An earlier attempt to add this to `preview/index.jsx` caused pump control issues (pump wouldn't stop). The issue was likely caused by using `createEffect` with refs. This implementation avoids that by drawing heatmap directly in `onImageLoad` callback.
+
+**Status:** Applied and deployed to PlanktoScope (2026-01-24)
+**Deployment:** `scp -r frontend/dist/* pi@planktoscope-butter-earth.local:/home/pi/PlanktoScope/frontend/dist/`
+
+---
+
+## Fix #3: Video Stream Not Working Over WiFi Hotspot
+
+**Date:** 2026-01-25
+**File:** `/usr/local/etc/mediamtx.yml` (on device), `os/mediamtx/mediamtx.yml` (in repo)
+**Issue:** Video streams work over ethernet but fail when connected via WiFi hotspot
+
+### Problem Description
+
+When connecting to the PlanktoScope via WiFi hotspot (192.168.4.1), the UI loads correctly but the video stream does not display. The same stream works perfectly when connected via ethernet (10.0.0.160).
+
+**Symptoms:**
+- UI accessible at http://192.168.4.1
+- Video stream never loads (blank/spinning)
+- No errors in browser console (connection just hangs)
+- Stream works fine over ethernet
+
+### Root Cause Analysis
+
+**Finding:** WebRTC ICE candidate gathering fails on hotspot network due to unreachable STUN servers.
+
+The MediaMTX configuration relied on public STUN servers for WebRTC ICE candidate discovery:
+```yaml
+webrtcICEServers2:
+  - url: stun:stun.cloudflare.com:3478
+  - url: stun:stun.services.mozilla.com:3478
+  - url: stun:stun.fbsbx.com:3478
+```
+
+When connected via hotspot:
+1. The hotspot network (192.168.4.0/24) typically has no internet access
+2. WebRTC tries to reach STUN servers to gather ICE candidates
+3. STUN servers are unreachable → ICE gathering times out
+4. WebRTC connection never establishes
+5. Video stream fails
+
+Over ethernet, the RPi has internet access, so STUN works and streaming succeeds.
+
+### Diagnostic Commands Used
+
+```bash
+# Confirmed MediaMTX listening on all interfaces
+ss -tlnp | grep 8889
+# Output: LISTEN 0 4096 *:8889 *:*
+
+# Confirmed HTTP endpoint accessible on hotspot IP
+curl -v http://192.168.4.1:8889/cam/
+# Output: HTTP/1.1 200 OK
+
+# Confirmed both interfaces active
+ip addr show wlan0  # 192.168.4.1/24
+ip addr show eth0   # 10.0.0.160/24
+```
+
+### Original Code (for revert)
+
+```yaml
+# https://github.com/bluenviron/mediamtx/blob/v1.15.6/mediamtx.yml
+
+# https://mediamtx.org/docs/usage/webrtc-specific-features#solving-webrtc-connectivity-issues
+# webrtcAdditionalHosts:
+#   [
+#     localhost,
+#     planktoscope.local,
+#     pkscope.local,
+#     192.168.4.1,
+#     planktoscope-sponge-care,
+#     planktoscope-sponge-care.local,
+#     home.pkscope,
+#   ]
+
+# ICE servers...
+webrtcICEServers2:
+  - url: stun:stun.cloudflare.com:3478
+  - url: stun:stun.services.mozilla.com:3478
+  - url: stun:stun.fbsbx.com:3478
+```
+
+### New Code
+
+```yaml
+# https://github.com/bluenviron/mediamtx/blob/v1.15.6/mediamtx.yml
+
+# https://mediamtx.org/docs/usage/webrtc-specific-features#solving-webrtc-connectivity-issues
+# FIX: Enable webrtcAdditionalHosts for local network streaming without STUN dependency
+webrtcAdditionalHosts:
+  - localhost
+  - planktoscope.local
+  - pkscope.local
+  - 192.168.4.1
+  - 10.0.0.160
+  - planktoscope-butter-earth
+  - planktoscope-butter-earth.local
+  - home.pkscope
+
+# ICE servers. Needed only when local listeners can't be reached by clients.
+# STUN servers allows to obtain and share the public IP of the server.
+# TURN/TURNS servers forces all traffic through them.
+webrtcICEServers2:
+  - url: stun:stun.cloudflare.com:3478
+  - url: stun:stun.services.mozilla.com:3478
+  - url: stun:stun.fbsbx.com:3478
+```
+
+### How the Fix Works
+
+The `webrtcAdditionalHosts` setting tells MediaMTX to explicitly include these IPs/hostnames as valid ICE candidates. This allows WebRTC clients to:
+1. Receive `192.168.4.1` as a direct host candidate
+2. Connect directly to the local IP without needing STUN
+3. Establish the WebRTC connection even without internet access
+
+### How to Revert
+
+Comment out the `webrtcAdditionalHosts` section:
+```yaml
+# webrtcAdditionalHosts:
+#   - localhost
+#   - planktoscope.local
+#   ...
+```
+
+### Deployment
+
+```bash
+# On device - edit the config
+sudo nano /usr/local/etc/mediamtx.yml
+# Add/uncomment webrtcAdditionalHosts as shown above
+
+# Restart MediaMTX
+sudo systemctl restart mediamtx
+
+# Verify
+sudo systemctl status mediamtx
+```
+
+### Expected Outcome
+
+- Video stream works when connected via WiFi hotspot (192.168.4.1)
+- Video stream continues to work via ethernet (10.0.0.160)
+- No dependency on external STUN servers for local connections
+
+### References
+
+- [MediaMTX WebRTC Connectivity Guide](https://mediamtx.org/docs/usage/webrtc-specific-features#solving-webrtc-connectivity-issues)
+- [MediaMTX webrtcAdditionalHosts documentation](https://github.com/bluenviron/mediamtx/blob/main/mediamtx.yml)
+
+**Status:** Applied (2026-01-25)
+**Deployment:** Edit `/usr/local/etc/mediamtx.yml` on device, then `sudo systemctl restart mediamtx`
+
+---
+
+## Fix #4: White Balance and LED Intensity Not Persisting
+
+**Date:** 2026-01-25
+**Files:**
+- `node-red/projects/dashboard/flows.json`
+- `default-configs/v3.0.hardware.json`
+
+**Issue:** White balance (red/blue gains) and LED intensity calibration settings don't persist across restarts
+
+### Problem Description
+
+When users calibrate white balance through the UI, the settings are applied but lost after a system restart. Similarly, LED intensity settings don't persist.
+
+**Root Cause:**
+
+1. **Missing save mechanism:** The Node-RED function nodes stored values in global context but never wrote them to `hardware.json`
+2. **Missing restore mechanism:** On startup, there was no flow to load calibration values from `hardware.json` into Node-RED global context
+3. **Disconnect:** The camera controller reads from `hardware.json`, but Node-RED only saved to its own context storage
+
+### Changes Made
+
+#### Part A: White Balance Save (Function node `d8f732f8fe251222`)
+
+**Original Code:**
+```javascript
+if (msg.topic) {
+    global.set("calibration_wbg_red", msg.payload.settings.white_balance_gain.red);
+    global.set("calibration_wbg_blue", msg.payload.settings.white_balance_gain.blue);
+}
+return msg;
+```
+
+**New Code:**
+```javascript
+if (msg.topic && msg.payload.settings && msg.payload.settings.white_balance_gain) {
+    var red = msg.payload.settings.white_balance_gain.red;
+    var blue = msg.payload.settings.white_balance_gain.blue;
+
+    // Save to Node-RED context
+    global.set("calibration_wbg_red", red);
+    global.set("calibration_wbg_blue", blue);
+
+    // Update hardware_conf and save to hardware.json
+    // Values divided by 100 (UI sends 199, hardware.json needs 1.99)
+    var hardware_conf = global.get("hardware_conf") || {};
+    hardware_conf.red_gain = red / 100;
+    hardware_conf.blue_gain = blue / 100;
+    global.set("hardware_conf", hardware_conf);
+
+    // Return message to trigger file write
+    return { payload: hardware_conf, _saveToFile: true };
+}
+return null;
+```
+
+Added nodes: `wb_json_stringify` (JSON) → `wb_save_hardware_config` (file write)
+
+#### Part B: LED Intensity Save (Function node `0283e992ff5da0f6`)
+
+**Original Code:**
+```javascript
+if (msg.topic) {
+    global.set("led_intensity", msg.payload.value);
+}
+return msg;
+```
+
+**New Code:**
+```javascript
+if (msg.topic && msg.payload.value !== undefined) {
+    var intensity = msg.payload.value;
+
+    // Save to Node-RED context
+    global.set("led_intensity", intensity);
+
+    // Update hardware_conf and save to hardware.json
+    var hardware_conf = global.get("hardware_conf") || {};
+    hardware_conf.led_intensity = intensity;
+    global.set("hardware_conf", hardware_conf);
+
+    // Return message to trigger file write
+    return { payload: hardware_conf, _saveToFile: true };
+}
+return null;
+```
+
+Added nodes: `led_json_stringify` (JSON) → `led_save_hardware_config` (file write)
+
+#### Part C: Startup Restore Flow (New nodes in Setup tab)
+
+Added a startup flow that runs on Node-RED startup:
+1. `startup_load_calibration_inject` - Inject node (runs once, 1s delay)
+2. `startup_load_hardware_file` - File in node (reads `/home/pi/PlanktoScope/hardware.json`)
+3. `startup_parse_hardware_json` - JSON node (parses file contents)
+4. `startup_restore_calibration` - Function node (restores values to global context)
+
+```javascript
+// Restore function logic:
+// Store the full hardware_conf in global context
+global.set("hardware_conf", msg.payload);
+
+// Convert from hardware.json format (1.99) to UI format (199)
+if (msg.payload.red_gain !== undefined) {
+    global.set("calibration_wbg_red", Math.round(msg.payload.red_gain * 100));
+}
+if (msg.payload.blue_gain !== undefined) {
+    global.set("calibration_wbg_blue", Math.round(msg.payload.blue_gain * 100));
+}
+if (msg.payload.led_intensity !== undefined) {
+    global.set("led_intensity", msg.payload.led_intensity);
+}
+```
+
+#### Part D: Default Config Update
+
+Added `led_intensity` to `default-configs/v3.0.hardware.json`:
+```json
+{
+  ...
+  "led_intensity": 1.0,
+  ...
+}
+```
+
+### Data Flow
+
+**On calibration change:**
+```
+UI → MQTT → Function node → Updates global context
+                         → Updates hardware_conf object
+                         → JSON stringify → Write to hardware.json
+```
+
+**On startup:**
+```
+Inject (once) → Read hardware.json → Parse JSON → Restore to global context
+                                                → calibration_wbg_red
+                                                → calibration_wbg_blue
+                                                → led_intensity
+                                                → hardware_conf
+```
+
+**Camera controller startup:**
+```
+Python controller → Reads hardware.json → Gets red_gain, blue_gain → Applies to camera
+```
+
+### Value Conversion
+
+| Location | Red Gain Example | Blue Gain Example |
+|----------|------------------|-------------------|
+| UI/MQTT | 199 | 165 |
+| hardware.json | 1.99 | 1.65 |
+| Camera controller | 1.99 | 1.65 |
+
+Conversion: `hardware.json value = UI value / 100`
+
+### How to Revert
+
+1. Restore original function node code (remove hardware_conf updates and file write logic)
+2. Remove the added JSON and file nodes (wb_json_stringify, wb_save_hardware_config, led_json_stringify, led_save_hardware_config)
+3. Remove the startup flow nodes (startup_load_calibration_inject, startup_load_hardware_file, startup_parse_hardware_json, startup_restore_calibration)
+4. Remove `led_intensity` from default-configs/v3.0.hardware.json
+
+### Deployment
+
+```bash
+# Deploy Node-RED flows (from local machine)
+scp node-red/projects/dashboard/flows.json pi@10.0.0.160:/home/pi/PlanktoScope/node-red/projects/dashboard/
+
+# Restart Node-RED (on device)
+sudo systemctl restart nodered
+
+# Verify startup restore worked (check logs)
+sudo journalctl -u nodered -n 20 --no-pager | grep "Restore calibration"
+
+# Test:
+# 1. Calibrate white balance through UI
+# 2. Check hardware.json was updated: cat /home/pi/PlanktoScope/hardware.json
+# 3. Restart Node-RED: sudo systemctl restart nodered
+# 4. Verify settings persisted in hardware.json and UI
+```
+
+### Expected Outcome
+
+- White balance settings (red/blue gains) persist across restarts
+- LED intensity settings persist across restarts
+- Settings are stored in `/home/pi/PlanktoScope/hardware.json`
+- Camera controller reads correct values on startup
+- UI displays correct values after restart
+
+**Status:** Applied and deployed to PlanktoScope (2026-01-26)
+**Verified:** Startup restore flow logged successful restoration of calibration values
+
+---
+
+## Fix #5: Motion Blur Due to Pump Synchronization Race Condition
+
+**Date:** 2026-01-26
+**File:** `controller/imager/main.py`
+**Lines:** ~438-445
+**Issue:** Intermittent motion blur in captured images (1 in every 2-3 frames blurry)
+
+### Problem Description
+
+During stop-flow acquisition, approximately 1 in every 2-3 captured images showed motion blur, even with a 1-second stabilization delay configured. The blur appeared as horizontal smearing of objects, indicating the sample was still moving during capture.
+
+**Root Cause:** Race condition in MQTT pump synchronization.
+
+When starting a new pump cycle, the sequence was:
+1. Acquire lock
+2. Clear `_done` event
+3. Subscribe to `status/pump` MQTT topic
+4. Publish pump command
+5. Wait for `_done` event
+
+The bug: Step 3 (subscribe) would receive **stale "Done" messages** from the previous pump cycle still in the MQTT queue. This triggered `_done.set()` before the new pump actually finished, causing the wait to return immediately.
+
+**Evidence from logs:**
+```
+23:24:07.366 - Subscribe to status/pump (new cycle)
+23:24:07.366 - Pump Done (STALE message from previous cycle!)
+23:24:07.371 - "The pump has stopped" (processing stale message)
+23:24:07.372 - Pump Started (but done event already set!)
+23:24:08.371 - Capture (while pump still running - should be ~08.87!)
+```
+
+### Original Code (for revert)
+
+In `_receive_messages()` method:
+```python
+            if self._mqtt.msg["payload"]["status"] not in {"Done", "Interrupted"}:
+                loguru.logger.debug(f"Ignoring pump status update: {self._mqtt.msg['payload']}")
+                self._mqtt.read_message()
+                continue
+
+            loguru.logger.debug(f"The pump has stopped: {self._mqtt.msg['payload']}")
+```
+
+### New Code
+
+```python
+            if self._mqtt.msg["payload"]["status"] not in {"Done", "Interrupted"}:
+                loguru.logger.debug(f"Ignoring pump status update: {self._mqtt.msg['payload']}")
+                self._mqtt.read_message()
+                continue
+
+            # FIX: Only process Done if we are actually waiting for it
+            # This prevents stale Done messages from triggering early return
+            if self._done.is_set():
+                loguru.logger.debug(f"Ignoring stale pump Done (not waiting): {self._mqtt.msg['payload']}")
+                self._mqtt.read_message()
+                continue
+
+            loguru.logger.debug(f"The pump has stopped: {self._mqtt.msg['payload']}")
+```
+
+### How the Fix Works
+
+1. When a "Done" message arrives, check if `_done.is_set()`
+2. If `_done` is already set, we're not waiting for a Done - it's a stale message from a previous pump cycle
+3. Stale messages are logged and ignored instead of triggering the done event
+4. Only fresh "Done" messages (when `_done` is cleared) are processed
+
+This ensures that only the "Done" message corresponding to the current pump cycle triggers the wait to complete.
+
+### How to Revert
+
+Remove the `time.sleep(0.15)` and second `self._done.clear()` lines from the `run_discrete()` method in `_PumpClient` class.
+
+### Expected Outcome
+
+- All captured images are sharp (taken after proper stabilization)
+- Consistent timing between captures (~2.5s for 1.5s pump + 1.0s stabilization)
+- No more intermittent motion blur
+
+**Status:** Applied and deployed to PlanktoScope (2026-01-26)
+
+---
+
+## Fix #6: Static Object Detection Not Filtering Debris
+
+**Date:** 2026-01-26
+**File:** `segmenter/planktoscope/segmenter/live.py`
+**Lines:** 101, 292, 621
+**Issue:** Debris stuck on flow cell glass not being filtered during live segmentation
+
+### Problem Description
+
+Objects stuck on the glass (debris) were appearing repeatedly in segmentation results instead of being filtered out. The static object removal feature existed but had two problems:
+
+1. **Disabled by default:** `remove_static` defaulted to `False`
+2. **Detection too strict:** 60px grid with 3-frame threshold missed slowly drifting debris due to detection jitter
+
+### Original Code (for revert)
+
+**Line 101:**
+```python
+self.__static_threshold = 3  # Number of consecutive frames to consider static
+```
+
+**Line 292:**
+```python
+grid_size = 60  # Larger grid tolerates detection variation in big objects
+```
+
+**Line 621:**
+```python
+self.__remove_static = last_message.get("remove_static", False)
+```
+
+### New Code
+
+**Line 101:**
+```python
+self.__static_threshold = 2  # FIX: Reduced from 3 to 2 for faster debris detection
+```
+
+**Line 292:**
+```python
+grid_size = 100  # FIX: Larger grid (was 60) tolerates detection jitter for stuck objects
+```
+
+**Line 621:**
+```python
+self.__remove_static = last_message.get("remove_static", True)
+```
+
+### Rationale for Changes
+
+| Parameter | Before | After | Reason |
+|-----------|--------|-------|--------|
+| `remove_static` default | `False` | `True` | Feature should be on by default since debris is common |
+| `grid_size` | 60px | 100px | Larger grid tolerates detection variation where object center jitters between frames |
+| `static_threshold` | 3 frames | 2 frames | Faster detection - debris stuck for 2 frames is clearly not a moving organism |
+
+### How Static Detection Works
+
+1. Image divided into grid cells (now 100×100 pixels)
+2. Each object's centroid maps to a grid cell: `(int(cx/100), int(cy/100))`
+3. Dictionary tracks consecutive frame counts per cell
+4. Objects in cells with count ≥ 2 are filtered as "static debris"
+5. Counters reset when cell becomes empty
+
+### How to Revert
+
+Restore the original values:
+- Line 101: Change `2` back to `3`
+- Line 292: Change `100` back to `60`
+- Line 621: Change `True` back to `False`
+
+### Expected Outcome
+
+- Debris stuck on glass is filtered after appearing in same position for 2 frames
+- Static removal enabled by default for all live segmentation sessions
+- Larger grid tolerance handles detection variation without losing accuracy
+
+**Status:** Applied and deployed to PlanktoScope (2026-01-26)
+
+---
+
+## Fix #7: Stabilization Time Too Short
+
+**Date:** 2026-01-26
+**File:** `node-red/projects/dashboard/flows.json`
+**Node ID:** `bb2825f419cc6526` (function node "start acquisition")
+**Issue:** Default 0.5 second stabilization insufficient for sample to fully settle
+
+### Problem Description
+
+The stabilization time (delay between pump stop and image capture) was hardcoded to 0.5 seconds. This was often insufficient for all particles to settle after pump motion, contributing to motion blur.
+
+### Original Code (for revert)
+
+```javascript
+msg.payload = {
+    action: "image",
+    pump_direction: "FORWARD",
+    volume: acq_interframe_volume,
+    nb_frame: acq_nb_frame,
+    sleep: 0.5
+};
+```
+
+### New Code
+
+```javascript
+msg.payload = {
+    action: "image",
+    pump_direction: "FORWARD",
+    volume: acq_interframe_volume,
+    nb_frame: acq_nb_frame,
+    sleep: 1.0
+};
+```
+
+### Rationale
+
+- 0.5 seconds: Particles still settling, turbulence from pump motion
+- 1.0 seconds: Sufficient time for most particles to fully settle
+- Trade-off: Slightly longer acquisition time (adds 0.5s per frame)
+
+### How to Revert
+
+In Node-RED flows.json, find node `bb2825f419cc6526` and change `sleep: 1.0` back to `sleep: 0.5`.
+
+### Expected Outcome
+
+- All particles fully settled before capture
+- Reduced motion blur from residual fluid motion
+- Acquisition time increases by ~0.5 seconds per frame
+
+**Status:** Applied and deployed to PlanktoScope (2026-01-26)
+
+---
+
+## Fix #6: Live Segmentation Pixel Size Inconsistency
+
+**Date:** 2026-01-26
+**File:** `segmenter/planktoscope/segmenter/live.py`
+**Lines:** 54, 101, 114-141
+
+**Issue:** Live segmenter used hardcoded pixel size (0.75 µm/pixel) instead of reading from calibration config
+
+### Problem Description
+
+The live segmentation module had the pixel size hardcoded to 0.75 µm/pixel. This caused inconsistencies when users calibrated their PlanktoScope to a different pixel size via the calibration dashboard (`/calibration_pixel_size`). The min ESD filter would use the wrong conversion factor, potentially filtering out objects incorrectly.
+
+**Root Cause:** The `__pixel_size_um` value was set to a constant `0.75` instead of reading from `/home/pi/PlanktoScope/hardware.json` like the rest of the system.
+
+### Original Code (for revert)
+
+```python
+# Line 98
+self.__pixel_size_um = 0.75  # Micrometers per pixel (typical PlanktoScope value)
+```
+
+### New Code
+
+```python
+# Line 54 - Added constant
+HARDWARE_CONFIG_PATH = "/home/pi/PlanktoScope/hardware.json"
+
+# Line 101 - Changed initialization
+self.__pixel_size_um = self._load_pixel_size()  # Load from hardware config
+
+# Lines 114-141 - Added method
+def _load_pixel_size(self):
+    """Load pixel size from hardware config file.
+
+    Reads process_pixel_fixed from /home/pi/PlanktoScope/hardware.json.
+    This ensures consistency with the calibration value set in the dashboard.
+
+    Returns:
+        float: Pixel size in micrometers per pixel. Defaults to 0.75 if not found.
+    """
+    default_pixel_size = 0.75
+    try:
+        with open(HARDWARE_CONFIG_PATH, "r") as f:
+            config = json.load(f)
+            pixel_size = config.get("process_pixel_fixed", default_pixel_size)
+            logger.info(f"Loaded pixel size from hardware config: {pixel_size} µm/pixel")
+            return float(pixel_size)
+    except FileNotFoundError:
+        logger.warning(
+            f"Hardware config not found at {HARDWARE_CONFIG_PATH}, "
+            f"using default pixel size: {default_pixel_size} µm/pixel"
+        )
+        return default_pixel_size
+    except (json.JSONDecodeError, ValueError) as e:
+        logger.error(
+            f"Error reading hardware config: {e}, "
+            f"using default pixel size: {default_pixel_size} µm/pixel"
+        )
+        return default_pixel_size
+```
+
+### How to Revert
+
+Replace line 101 with:
+```python
+self.__pixel_size_um = 0.75  # Micrometers per pixel (typical PlanktoScope value)
+```
+
+And remove the `_load_pixel_size` method and `HARDWARE_CONFIG_PATH` constant.
+
+### Expected Outcome
+
+- Live segmentation uses the same pixel size as set in the calibration dashboard
+- Min ESD filter correctly converts micrometers to pixels
+- Consistent object detection between live preview and post-acquisition segmentation
+
+**Status:** Applied (2026-01-26)
+
+---
diff --git a/docs/CHANGELOG_PR_DOCUMENTATION.md b/docs/CHANGELOG_PR_DOCUMENTATION.md
new file mode 100644
index 000000000..20d4d3ef7
--- /dev/null
+++ b/docs/CHANGELOG_PR_DOCUMENTATION.md
@@ -0,0 +1,755 @@
+# PlanktoScope Update Dashboard - Release Documentation
+
+
+**Date:** 2026-01-26 (Updated)
+**Base Repository/Branch:** PlanktoScope Dashboard 2.0 - update-dashboard
+**Author:** Adam Larson
+
+---
+
+
+This release implements two major feature enhancements requested via GitHub issues, along with critical bug fixes identified during deployment testing on Raspberry Pi 5 hardware. The changes enable real-time plankton detection during sample acquisition and provide quantitative focus quality metrics for quality assurance.
+
+### Changes Overview
+
+| Category | Description | Priority | Status |
+|----------|-------------|----------|--------|
+| **PR #1** | Live Segmentation Feature | High | Complete |
+| **PR #2** | Blur/Focus Quality Metric | High | Complete |
+| **Bug Fix #1** | H.264 Video Stream Corruption (RPi5) | High | Complete |
+| **Bug Fix #2** | Calibration Settings Persistence (flushInterval) | High | Complete |
+| **Bug Fix #3** | Video Stream Not Working Over WiFi Hotspot | High | Complete |
+| **Bug Fix #4** | White Balance & LED Intensity Not Persisting | High | Complete |
+| **Bug Fix #5** | Motion Blur from Pump Sync Race Condition | High | Complete |
+| **Bug Fix #6** | Static Object Detection Improvements | Medium | Complete |
+| **Bug Fix #7** | Stabilization Time Increased | Medium | Complete |
+
+---
+
+## PR #1: Live Segmentation Feature
+
+### Problem 
+
+Operators had no real-time feedback during sample acquisition. They could only assess sample quality and object detection after the acquisition completed, leading to wasted time on poorly focused or improperly positioned samples.
+
+### Solution Implemented
+
+A real-time segmentation system that processes each captured frame during acquisition, overlays detected objects on a live preview, and provides immediate visual feedback to operators.
+
+### Architecture
+
+```
+┌─────────────────────────┐     MQTT: segmenter/live        ┌────────────────────────┐
+│   Frontend (SolidJS)    │ ──────────────────────────────> │   LiveSegmenterProcess │
+│   - Visualization Page  │                                 │   (Python/OpenCV)      │
+│   - Canvas Overlay      │ <────────────────────────────── │                        │
+│   - Controls UI         │   MQTT: status/segmenter/live   │   Subscribes to:       │
+└─────────────────────────┘                                 │   status/imager        │
+                                                            └────────────────────────┘
+```
+
+### Files Added
+
+#### 1. `segmenter/planktoscope/segmenter/live.py` (NEW - 450 lines)
+
+**Purpose:** Backend process for real-time frame segmentation.
+
+**Key Implementation Details:**
+
+```python
+class LiveSegmenterProcess(multiprocessing.Process):
+    """
+    Runs as a separate process to avoid blocking the main segmenter.
+    Subscribes to imager capture events and processes each frame.
+    """
+```
+
+**Core Methods:**
+
+| Method | Purpose |
+|--------|---------|
+| `segment_single_frame(img)` | Main entry point - segments one frame, returns objects + blur |
+| `_create_simple_mask(img)` | Binary mask using adaptive threshold + morphological ops |
+| `_load_pixel_size()` | Loads `process_pixel_fixed` from `/home/pi/PlanktoScope/hardware.json` |
+| `_esd_um_to_min_area(esd_um)` | Converts µm filter to pixel area using loaded calibration |
+| `_encode_mask_png(mask)` | Base64 PNG encoding with alpha transparency |
+| `_is_static_object(bbox)` | Grid-based debris detection (100px cells, 2-frame threshold) |
+
+**Pixel Size Calibration:**
+
+The live segmenter reads pixel size from `/home/pi/PlanktoScope/hardware.json` (`process_pixel_fixed` field) to ensure consistency with the calibration dashboard. Falls back to 0.75 µm/pixel if config unavailable.
+
+**Improved Static Object Detection Algorithm:**
+
+The system tracks object positions across frames to identify debris stuck on the flow cell glass:
+
+1. Image divided into 100×100 pixel grid cells
+2. Each object's centroid maps to a grid cell
+3. Dictionary tracks consecutive frame counts per cell
+4. Objects in cells with count ≥2 are filtered as "static"
+5. Counters reset when cell becomes empty
+
+**Rationale for Parameters:**
+- **100px grid size:** Tolerates detection jitter while distinguishing separate objects
+- **2-frame threshold:** Faster debris detection (objects stuck on glass are truly stationary)
+
+**Performance Limits:**
+- Maximum 300 objects per frame (prevents UI lag)
+- Maximum 100 masks encoded (masks are memory-intensive)
+- JPEG quality 80% for reasonable bandwidth
+
+---
+
+#### 2. `segmenter/main.py` (MODIFIED)
+
+**Change:** Added live segmenter process initialization.
+
+```python
+# ADDED: Import and start live segmenter
+import planktoscope.segmenter.live
+
+live_segmenter_thread = planktoscope.segmenter.live.LiveSegmenterProcess(
+    shutdown_event, "/home/pi/data"
+)
+live_segmenter_thread.start()
+```
+
+**Rationale:** Separate process ensures live preview doesn't impact main segmentation performance during post-acquisition batch processing.
+
+---
+
+#### 3. `frontend/src/pages/preview/segmentation/index.jsx` (NEW - 482 lines)
+
+**Purpose:** Live Segmentation Visualization page embedded in Node-RED dashboard.
+
+**State Management:**
+```javascript
+const [liveSegmentEnabled, setLiveSegmentEnabled] = createSignal(false)
+const [overlayMode, setOverlayMode] = createSignal("bbox")  // bbox | mask | both
+const [minSizeUm, setMinSizeUm] = createSignal(20)          // µm minimum ESD
+const [removeStatic, setRemoveStatic] = createSignal(true)  // debris filter
+const [objects, setObjects] = createSignal([])              // detected objects
+```
+
+**Overlay Rendering:**
+```javascript
+function drawOverlays() {
+    // Scale from original image coordinates to display coordinates
+    const scaleX = displayWidth / imageRef.naturalWidth
+    const scaleY = displayHeight / imageRef.naturalHeight
+
+    objects().forEach((obj) => {
+        const [x, y, w, h] = obj.bbox
+        // Draw cyan bounding box and/or semi-transparent mask
+    })
+}
+```
+
+**Design Decision - Cyan Color Scheme:**
+- Bounding box: `rgb(0, 128, 128)` (teal)
+- Mask fill: `rgb(0, 220, 220)` (cyan) at 35% opacity
+- Rationale: High contrast against biological samples, professional microscopy aesthetic Thibaut likes 
+
+---
+
+#### 4. `frontend/src/pages/preview/segmentation/styles.module.css` (NEW - 352 lines)
+
+CSS module providing dark theme styling consistent with Node-RED dashboard.
+
+---
+
+#### 5. `lib/scope.js` (MODIFIED)
+
+**Added Functions:**
+```javascript
+export async function startLiveSegmentation(config) {
+    // config: { overlay: "bbox", min_esd_um: 20, remove_static: true }
+    await request("segmenter/live", { action: "start", ...config })
+}
+
+export async function stopLiveSegmentation() {
+    await request("segmenter/live", { action: "stop" })
+}
+```
+
+---
+
+### MQTT Interface
+
+| Topic | Direction | Payload |
+|-------|-----------|---------|
+| `segmenter/live` | Frontend → Backend | `{"action": "start", "overlay": "bbox", "min_esd_um": 20, "remove_static": true}` |
+| `segmenter/live` | Frontend → Backend | `{"action": "stop"}` |
+| `status/segmenter/live` | Backend → Frontend | `{"status": "Enabled", "overlay": "bbox"}` |
+| `status/segmenter/live` | Backend → Frontend | `{"objects": [...], "frame_blur": 45.2, "image": "base64...", "image_width": 4056, "image_height": 3040}` |
+
+---
+
+## PR #2: Blur/Focus Quality Metric
+
+### Problem Statement
+
+Operators needed quantitative feedback on image focus quality to:
+1. Assess sample positioning in real-time
+2. Identify focus drift during long acquisitions
+3. Filter poor-quality images in post-processing
+
+### Solution Implemented
+
+A Laplacian variance-based blur metric with real-time visualization including sparkline trending and optional spatial heatmap overlay.
+
+### Technical Background
+
+**Laplacian Variance Method:**
+
+The Laplacian operator detects edges by computing the second derivative of image intensity. Sharp images have strong edges (high variance), while blurry images have weak edges (low variance).
+
+```python
+def calculate_blur(img):
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) if len(img.shape) == 3 else img
+    return cv2.Laplacian(gray, cv2.CV_64F).var()
+```
+
+**Calibration for PlanktoScope Optics:**
+
+Empirical testing with the PlanktoScope optical system established these thresholds:
+
+| Blur Value | Quality | Visual Indicator |
+|------------|---------|------------------|
+| < 25 | Poor | Red |
+| 25 - 50 | Acceptable | Yellow |
+| > 50 | Good | Green |
+
+**Rationale:** These thresholds were calibrated against manual focus assessment by trained operators using the specific optical configuration (IMX477 sensor, 25mm/12mm lens configuration).
+
+### Files Modified
+
+#### 1. `segmenter/planktoscope/segmenter/operations.py` (MODIFIED)
+
+**Added Functions:**
+
+```python
+def calculate_blur(img):
+    """Calculate blur metric using Laplacian variance.
+
+    Args:
+        img: BGR or grayscale image
+    Returns:
+        float: Higher = sharper, Lower = blurrier
+    """
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) if len(img.shape) == 3 else img
+    return cv2.Laplacian(gray, cv2.CV_64F).var()
+
+
+def calculate_regional_blur(img, grid_rows=4, grid_cols=4):
+    """Calculate blur for each region of the image.
+
+    Returns 4x4 grid of blur values for spatial focus assessment.
+    Useful for identifying tilt or uneven focus plane.
+    """
+    # Divides image into grid, computes Laplacian variance per cell
+    # Returns: list[list[float]] shape [grid_rows][grid_cols]
+```
+
+**Regional Blur Rationale:**
+
+A 4×4 grid provides sufficient spatial resolution to detect:
+- Sample tilt (gradient across image)
+- Partial occlusion
+- Debris on optical path
+- Non-uniform illumination effects
+
+---
+
+#### 2. `segmenter/planktoscope/segmenter/live.py` (MODIFIED)
+
+**Integration:**
+
+```python
+# In segment_single_frame():
+frame_blur = planktoscope.segmenter.operations.calculate_blur(img)
+blur_grid = planktoscope.segmenter.operations.calculate_regional_blur(img, 4, 4)
+
+return {
+    "objects": objects,
+    "frame_blur": float(frame_blur),
+    "blur_grid": blur_grid,  # 4x4 regional heatmap data
+    # ...
+}
+```
+
+---
+
+#### 3. `frontend/src/pages/preview/segmentation/index.jsx` (MODIFIED)
+
+**Added State:**
+```javascript
+const [blurHistory, setBlurHistory] = createSignal([])  // Last 60 values
+const [blurGrid, setBlurGrid] = createSignal(null)       // 4x4 regional data
+const [showHeatmap, setShowHeatmap] = createSignal(false)
+```
+
+**Sparkline Implementation:**
+```javascript
+const sparklinePath = () => {
+    const history = blurHistory()
+    if (history.length < 2) return ""
+
+    // SVG path generation for 140x40 sparkline
+    const points = history.map((value, index) => {
+        const x = padding + (index / (BLUR_HISTORY_SIZE - 1)) * (width - 2 * padding)
+        const y = height - padding - ((value - min) / range) * (height - 2 * padding)
+        return `${x},${y}`
+    })
+    return `M ${points.join(" L ")}`
+}
+```
+
+**Heatmap Rendering:**
+```javascript
+function drawHeatmap() {
+    // Color mapping: red (blurry) → yellow → green (sharp)
+    const hue = normalized * 120  // 0=red, 60=yellow, 120=green
+    ctx.fillStyle = `hsla(${hue}, 80%, 50%, 0.35)`
+}
+```
+
+**UI Layout:**
+
+The blur visualization appears as a floating overlay panel in the bottom-right corner of the segmentation preview, containing:
+- Current blur value (large, color-coded)
+- Sparkline (last 60 frames)
+- Min/Avg/Max statistics
+- Heatmap toggle button
+
+---
+
+### EcoTaxa Integration
+
+Per-object blur is exported to the TSV file for post-acquisition quality filtering:
+
+```
+object_blur_laplacian	45.23
+```
+
+This enables researchers to filter the dataset by focus quality during analysis.
+
+---
+
+## Bug Fix: H.264 Video Stream Corruption (RPi5)
+
+### Problem Statement
+
+Severe video corruption manifested as blocky pixelization artifacts on Raspberry Pi 5 hardware. The live preview stream was unustable, displaying what appeared to be DivX-era compression artifacts.
+
+### Root Cause Analysis
+
+**Finding 1: Resolution Misalignment**
+
+The original RPi5 preview resolution `2028×1520` violates H.264 macroblock alignment requirements:
+- H.264 requires dimensions divisible by 16 (macroblock size)
+- 2028 ÷ 16 = 126.75 ❌
+- 1520 ÷ 16 = 95 ✓
+
+The RPi4 resolution `1440×1080` was properly aligned
+
+**Finding 2: B-Frame Incompatibility**
+
+Research identified that WebRTC (used by MediaMTX for browser streaming) does not support H.264 B-frames:
+- Default H.264 profile uses B-frames for compression efficiency
+- WebRTC decoders cannot process B-frames correctly
+- Results in frame reordering artifacts
+
+**References:**
+- https://github.com/bluenviron/mediamtx/issues/3022
+- https://github.com/raspberrypi/picamera2/issues/785
+
+### Changes Applied
+
+#### 1. `controller/camera/hardware.py`
+
+**Resolution Fix (Line 21):**
+
+| Before | After |
+|--------|-------|
+| `(2028, 1520)` | `(1920, 1440)` |
+
+**Rationale for 1920×1440:**
+- 1920 ÷ 16 = 120 ✓
+- 1440 ÷ 16 = 90 ✓
+- Maintains 4:3 aspect ratio
+- Standard resolution with broad decoder support
+
+**Encoder Configuration (Lines 287-301):**
+
+```python
+# BEFORE
+encoder = encoders.H264Encoder()
+
+# AFTER
+encoder = encoders.H264Encoder(
+    profile="baseline",  # Disables B-frames
+    repeat=True,         # Repeat SPS/PPS headers
+    iperiod=15,          # I-frame every 15 frames
+)
+```
+
+**Parameter Rationale:**
+
+| Parameter | Value | Purpose |
+|-----------|-------|---------|
+| `profile="baseline"` | Baseline H.264 | Disables B-frames for WebRTC compatibility |
+| `repeat=True` | Enable | Repeat sequence headers with each I-frame for network resilience |
+| `iperiod=15` | 15 frames | Balance between compression and error recovery |
+
+---
+
+#### 2. `os/mediamtx/mediamtx.yml`
+
+**Added:**
+```yaml
+writeQueueSize: 1024
+```
+
+**Rationale:** The RPi5 software encoder can produce data faster than the default buffer allows, causing packet drops. Increased buffer prevents overflow.
+
+---
+
+### Outcome
+
+**Status: Partial Success**
+
+The changes significantly reduced but did not completely eliminate stream artifacts. Remaining issues are likely related to:
+- RPi5 software encoder limitations (no hardware H.264)
+- Network latency variations
+- Browser decoder variations
+
+**Recommendation:** Consider hardware-accelerated encoding solutions or alternative streaming protocols (MJPEG) for production deployment.
+
+---
+
+## Bug Fix: Calibration Settings Persistence
+
+### Problem Statement
+
+Calibration settings (pixel size, white balance gains, pump steps/mL) were lost on system restart, requiring operators to recalibrate after each power cycle.
+
+### Root Cause
+
+Node-RED's `localfilesystem` context storage module flushes to disk every 30 seconds by default. If the system restarts within this window, unsaved calibration data is lost.
+
+### Solution
+
+#### `node-red/settings.cjs` (Lines 341-345)
+
+```javascript
+// BEFORE
+contextStorage: {
+   default: {
+       module: "localfilesystem"
+   },
+},
+
+// AFTER
+contextStorage: {
+   default: {
+       module: "localfilesystem",
+       config: {
+           flushInterval: 5,  // Flush every 5 seconds
+       }
+   },
+},
+```
+
+### Calibration Data Protected
+
+| Variable | Description |
+|----------|-------------|
+| `calibration_pixel_size` | µm/pixel from ruler calibration |
+| `calibration_scale_factor` | Sensor to stream scale ratio |
+| `calibration_wbg_red` | White balance red gain |
+| `calibration_wbg_blue` | White balance blue gain |
+| `calibration_nb_step` | Pump steps per mL |
+| `calibration_markerA_*` | Calibration marker positions |
+| `calibration_markerB_*` | Calibration marker positions |
+
+### Trade-offs
+
+| Consideration | Impact |
+|---------------|--------|
+| Increased disk I/O | Negligible (writes small JSON every 5s) |
+| SD card wear | Minimal (< 1KB per write) |
+| Data loss window | Reduced from 30s to 5s |
+
+---
+
+## Bug Fix #3: Video Stream Not Working Over WiFi Hotspot
+
+### Problem Statement
+
+Video streams work over ethernet but fail when connecting via the PlanktoScope's WiFi hotspot. The UI loads correctly but the video stream shows a spinning wheel indefinitely.
+
+### Root Cause
+
+WebRTC ICE candidate gathering fails on the hotspot network because:
+1. MediaMTX relied on public STUN servers (Cloudflare, Mozilla, Meta) for ICE candidate discovery
+2. The hotspot network (192.168.4.0/24) typically has no internet access
+3. STUN servers are unreachable → ICE gathering times out → WebRTC connection fails
+
+### Solution
+
+Enabled `webrtcAdditionalHosts` in MediaMTX configuration to explicitly advertise local IPs as valid ICE candidates, bypassing the need for STUN:
+
+```yaml
+webrtcAdditionalHosts:
+  - localhost
+  - planktoscope.local
+  - pkscope.local
+  - 192.168.4.1
+  - 10.0.0.160
+  - planktoscope-butter-earth
+  - planktoscope-butter-earth.local
+  - home.pkscope
+```
+
+### Files Modified
+
+| File | Change |
+|------|--------|
+| `os/mediamtx/mediamtx.yml` | Added `webrtcAdditionalHosts` configuration |
+| `/usr/local/etc/mediamtx.yml` (on device) | Same configuration applied |
+
+---
+
+## Bug Fix #4: White Balance and LED Intensity Not Persisting
+
+### Problem Statement
+
+White balance (red/blue gains) and LED intensity calibration settings were lost after system restart, even though the flushInterval fix (Bug Fix #2) was applied.
+
+### Root Cause
+
+The flushInterval fix only addressed Node-RED context storage. However:
+1. **No save mechanism:** Function nodes stored values in Node-RED context but never wrote to `hardware.json`
+2. **No restore mechanism:** On startup, no flow loaded values from `hardware.json` into Node-RED context
+3. **Disconnect:** Camera controller reads from `hardware.json`, but Node-RED only saved to its own context
+
+### Solution
+
+Implemented a complete persistence pipeline:
+
+1. **Save on change:** Modified function nodes to write calibration values to `hardware.json` when changed
+2. **Restore on startup:** Added startup flow to load values from `hardware.json` into Node-RED context
+3. **Value conversion:** Handle the conversion between UI format (199) and hardware.json format (1.99)
+
+### Files Modified
+
+| File | Change |
+|------|--------|
+| `node-red/projects/dashboard/flows.json` | Modified WB/LED function nodes, added save nodes, added startup restore flow |
+| `default-configs/v3.0.hardware.json` | Added `led_intensity` field |
+
+### Data Flow
+
+```
+On Change:  UI → MQTT → Function → Update global context → Write hardware.json
+On Startup: Inject → Read hardware.json → Parse → Restore global context
+```
+
+---
+
+## Deployment Summary
+
+### Files Added (New)
+
+| File | Lines | Purpose |
+|------|-------|---------|
+| `segmenter/planktoscope/segmenter/live.py` | ~450 | Live segmentation backend |
+| `frontend/src/pages/preview/segmentation/index.jsx` | ~482 | Visualization page |
+| `frontend/src/pages/preview/segmentation/styles.module.css` | ~352 | Styling |
+| `frontend/src/pages/preview/SegmentationOverlay.jsx` | ~368 | Overlay component |
+| `frontend/src/pages/preview/SegmentationOverlay.module.css` | ~102 | Overlay styling |
+
+### Files Modified
+
+| File | Changes |
+|------|---------|
+| `segmenter/main.py` | Added live segmenter process start |
+| `segmenter/planktoscope/segmenter/operations.py` | Added `calculate_blur()`, `calculate_regional_blur()` |
+| `segmenter/planktoscope/segmenter/__init__.py` | Added `segment_single_frame()` helper |
+| `lib/scope.js` | Added `startLiveSegmentation()`, `stopLiveSegmentation()` |
+| `controller/camera/hardware.py` | Resolution fix, encoder parameters |
+| `os/mediamtx/mediamtx.yml` | Added `writeQueueSize: 1024`, added `webrtcAdditionalHosts` |
+| `node-red/settings.cjs` | Added `flushInterval: 5` |
+| `node-red/projects/dashboard/flows.json` | Added WB/LED persistence, startup restore flow |
+| `default-configs/v3.0.hardware.json` | Added `led_intensity` field |
+
+### Deployment Commands
+
+```bash
+# Frontend deployment
+cd frontend && npx vite build
+scp -r dist/* pi@planktoscope.local:/home/pi/PlanktoScope/frontend/dist/
+
+# Backend deployment
+scp segmenter/planktoscope/segmenter/live.py pi@planktoscope.local:/home/pi/PlanktoScope/segmenter/planktoscope/segmenter/
+scp segmenter/planktoscope/segmenter/operations.py pi@planktoscope.local:/home/pi/PlanktoScope/segmenter/planktoscope/segmenter/
+
+# Node-RED settings
+scp node-red/settings.cjs pi@planktoscope.local:/home/pi/PlanktoScope/node-red/
+sudo systemctl restart nodered
+
+# Restart segmenter
+sudo systemctl restart segmenter
+```
+
+---
+
+## Testing Checklist
+
+### Live Segmentation
+- [ ] Enable live segmentation on Visualization page
+- [ ] Start acquisition and verify objects appear with overlays
+- [ ] Test overlay modes: bbox, mask, both
+- [ ] Adjust minimum size filter, verify small objects filtered
+- [ ] Enable "Remove Static", verify debris filtered after 3 frames
+- [ ] Verify object count updates in real-time
+
+### Blur Metric
+- [ ] Verify focus value displayed during acquisition
+- [ ] Confirm color coding: red (<25), yellow (25-50), green (>50)
+- [ ] Verify sparkline shows trending history
+- [ ] Toggle heatmap overlay, verify regional display
+- [ ] Check EcoTaxa TSV contains `object_blur_laplacian` column
+
+### Video Stream (RPi5)
+- [ ] Verify preview stream displays without severe corruption
+- [ ] Test stream recovery after network interruption
+
+### Video Stream Over WiFi Hotspot
+- [ ] Connect to PlanktoScope WiFi hotspot
+- [ ] Access UI at http://192.168.4.1
+- [ ] Verify video stream loads and displays
+- [ ] Test stream while disconnected from ethernet (hotspot only)
+
+### Calibration Persistence (Node-RED Context)
+- [ ] Perform calibration (pixel size or white balance)
+- [ ] Restart Node-RED service
+- [ ] Verify calibration values persisted
+
+### White Balance & LED Intensity Persistence (hardware.json)
+- [ ] Calibrate white balance through UI
+- [ ] Verify `hardware.json` contains updated `red_gain` and `blue_gain`
+- [ ] Adjust LED intensity
+- [ ] Verify `hardware.json` contains updated `led_intensity`
+- [ ] Restart Node-RED service
+- [ ] Verify UI shows correct values after restart
+- [ ] Restart entire system (reboot)
+- [ ] Verify camera applies correct white balance on startup
+
+---
+
+## Known Limitations
+
+1. **Video Stream (RPi5):** Some residual artifacts may occur due to software encoder limitations
+2. **Live Segmentation Performance:** Maximum 300 objects/frame to prevent UI lag
+3. **Blur Thresholds:** Calibrated for PlanktoScope optics; may need adjustment for different configurations
+4. **WiFi Hotspot mDNS:** When connecting via hotspot, use IP address (192.168.4.1) rather than `.local` hostnames for most reliable connectivity
+5. **MediaMTX Restart:** After restarting MediaMTX, the imager service may need to be restarted to re-establish RTSP publishing
+
+---
+
+## Bug Fix #5: Motion Blur from Pump Synchronization Race Condition
+
+### Problem Statement
+
+During stop-flow acquisition, approximately 1 in every 2-3 captured images showed motion blur, even with adequate stabilization delay. Images were captured while the pump was still running.
+
+### Root Cause
+
+Race condition in MQTT pump synchronization: When starting a new pump cycle, stale "Done" messages from the previous cycle would trigger `_done.set()` before the new pump completed, causing capture to happen prematurely.
+
+### Solution
+
+Modified `_receive_messages()` in `controller/imager/main.py` to check if we're actually waiting for a "Done" message before processing it:
+
+```python
+# FIX: Only process Done if we are actually waiting for it
+if self._done.is_set():
+    loguru.logger.debug(f"Ignoring stale pump Done (not waiting)")
+    self._mqtt.read_message()
+    continue
+```
+
+### Outcome
+
+All captures now occur after proper stabilization. No more intermittent motion blur.
+
+---
+
+## Bug Fix #6: Static Object Detection Improvements
+
+### Problem Statement
+
+Debris stuck on flow cell glass was not being filtered during live segmentation despite the static object removal feature existing.
+
+### Root Cause
+
+1. `remove_static` defaulted to `False` (disabled)
+2. 60px grid was too small - detection jitter caused objects to shift between grid cells
+3. 3-frame threshold was too strict for quickly identifying debris
+
+### Solution
+
+| Parameter | Before | After |
+|-----------|--------|-------|
+| `remove_static` default | `False` | `True` |
+| `grid_size` | 60px | 100px |
+| `static_threshold` | 3 frames | 2 frames |
+
+### Outcome
+
+Debris on glass is now filtered after appearing in the same position for 2 consecutive frames.
+
+---
+
+## Bug Fix #7: Stabilization Time Increased
+
+### Problem Statement
+
+Default 0.5 second stabilization was insufficient for particles to fully settle after pump motion.
+
+### Solution
+
+Changed `sleep` parameter in Node-RED flows from `0.5` to `1.0` seconds.
+
+### Outcome
+
+Adequate settling time for most samples. Adds ~0.5s per frame to acquisition time.
+
+---
+
+## Appendix: Blur Metric Scientific Basis
+
+The Laplacian variance method is a well-established focus measure in computer vision literature:
+
+**Method:** Computes the variance of the Laplacian (second derivative) of image intensity.
+
+**Mathematical Basis:**
+```
+Blur = Var(∇²I)
+```
+
+Where `∇²I` is the Laplacian of image `I`.
+
+**Properties:**
+- Higher variance indicates more edges (sharper focus)
+- Lower variance indicates fewer edges (blur)
+- Computationally efficient (single convolution)
+- Robust to image content variations
+
+**Reference:** Pech-Pacheco, J.L., et al. "Diatom autofocusing in brightfield microscopy: a comparative study." ICPR 2000.
+
+---
+
+
diff --git a/docs/LIVE_SEGMENTATION_CHANGES.md b/docs/LIVE_SEGMENTATION_CHANGES.md
new file mode 100644
index 000000000..fd32fefd4
--- /dev/null
+++ b/docs/LIVE_SEGMENTATION_CHANGES.md
@@ -0,0 +1,322 @@
+# Live Segmentation and Blur Metric Features - Code Changes
+
+This document describes the code changes made to the Dashboard 2.0 repository to implement real-time segmentation with preview during acquisition.  In addition, a blur metric is now calculated per object.
+
+## Overview
+
+The Live Segmentation feature provides real-time object detection and visualization during image acquisition. When enabled, each captured frame is segmented and the results are overlaid on a separate preview window, allowing users to see detected plankton objects in real-time.  A blur metric is also captured per object, allowing live feedback as well as post acquisition sorting through the .tsv file. 
+
+### Key Features
+- **Real-time object detection** during acquisition
+- **Configurable overlay modes**: Bounding boxes, masks, or both
+- **Minimum size filter** (in micrometers) to ignore small objects
+- **Static object removal** to filter out debris stuck on the flow cell glass
+- **Focus/blur indicator** to assess image quality in real-time
+
+---
+
+## Architecture
+
+```
+┌─────────────────────┐     MQTT: segmenter/live      ┌──────────────────────┐
+│   Frontend          │ ────────────────────────────> │   Live Segmenter     │
+│   (SolidJS)         │                               │   (Python Process)   │
+│                     │ <──────────────────────────── │                      │
+│   Canvas Overlay    │   MQTT: status/segmenter/live │   Listens to imager  │
+└─────────────────────┘                               └──────────────────────┘
+                                                              │
+                                                              │ MQTT: status/imager
+                                                              ▼
+                                                      ┌──────────────────────┐
+                                                      │   Imager Process     │
+                                                      │   (captures images)  │
+                                                      └──────────────────────┘
+```
+
+---
+
+## File Changes
+
+### Backend (Python)
+
+#### 1. `segmenter/main.py`
+**Change**: Added initialization of the Live Segmenter process.
+
+```python
+import planktoscope.segmenter.live
+
+# Starts the live segmenter process for real-time preview overlays
+live_segmenter_thread = planktoscope.segmenter.live.LiveSegmenterProcess(
+    shutdown_event, "/home/pi/data"
+)
+live_segmenter_thread.start()
+```
+
+The live segmenter runs as a separate multiprocessing.Process alongside the main segmenter.
+
+---
+
+#### 2. `segmenter/planktoscope/segmenter/live.py` (NEW FILE)
+**Purpose**: Handles real-time segmentation during acquisition.
+
+**Key Components**:
+
+##### Class: `LiveSegmenterProcess`
+A multiprocessing.Process that:
+1. Listens for control commands on `segmenter/live` MQTT topic
+2. Subscribes to `status/imager` to receive capture events
+3. Segments each captured frame and publishes results
+
+##### Key Methods:
+
+**`_load_pixel_size()`**
+Loads the pixel size calibration from the hardware config file to ensure consistency with the dashboard calibration settings:
+```python
+def _load_pixel_size(self):
+    """Load pixel size from /home/pi/PlanktoScope/hardware.json.
+    Returns process_pixel_fixed value, or 0.75 as fallback."""
+    try:
+        with open("/home/pi/PlanktoScope/hardware.json", "r") as f:
+            config = json.load(f)
+            return float(config.get("process_pixel_fixed", 0.75))
+    except (FileNotFoundError, json.JSONDecodeError, ValueError):
+        return 0.75  # Default fallback
+```
+
+**`_esd_um_to_min_area(esd_um)`**
+Converts minimum object size from micrometers (ESD) to pixel area:
+```python
+def _esd_um_to_min_area(self, esd_um):
+    esd_pixels = esd_um / self.__pixel_size_um  # Loaded from hardware.json
+    area = math.pi * (esd_pixels / 2) ** 2
+    return int(area)
+```
+
+**`_create_simple_mask(img)`**
+Creates a binary mask using the same pipeline as the main segmenter:
+```python
+def _create_simple_mask(self, img):
+    mask = planktoscope.segmenter.operations.simple_threshold(img)
+    mask = planktoscope.segmenter.operations.erode(mask)
+    mask = planktoscope.segmenter.operations.dilate(mask)
+    return mask
+```
+
+**Static Object Detection** (`_get_bbox_key`, `_update_static_tracker`, `_is_static_object`)
+
+Uses grid-based tracking to identify objects that remain in the same position across multiple frames:
+
+```python
+def _get_bbox_key(self, bbox):
+    """Get grid cell for object center (60px grid)"""
+    cx = bbox[0] + bbox[2] / 2
+    cy = bbox[1] + bbox[3] / 2
+    grid_size = 60
+    return (int(cx / grid_size), int(cy / grid_size))
+
+def _is_static_object(self, bbox):
+    """Returns True if object has been in same position for 3+ frames"""
+    key = self._get_bbox_key(bbox)
+    count = self.__static_tracker.get(key, 0)
+    return count >= self.__static_threshold  # threshold = 3
+```
+
+**Logic**: Objects must appear in the same 60px grid cell for 3 consecutive frames to be considered static (debris stuck on glass) and filtered out.
+
+**`_encode_mask_png(mask)`**
+Encodes binary masks as base64 PNG with alpha transparency:
+```python
+def _encode_mask_png(self, mask):
+    rgba = np.zeros((height, width, 4), dtype=np.uint8)
+    rgba[mask, :3] = 255  # White RGB for object pixels
+    rgba[mask, 3] = 255   # Full opacity
+    # Background = (0,0,0,0) = transparent
+    img = PIL.Image.fromarray(rgba, mode="RGBA")
+    # ... encode as base64 PNG
+```
+
+**`segment_single_frame(img)`**
+Main segmentation entry point. Returns:
+```python
+{
+    "objects": [{"bbox": [x, y, w, h], "mask": "base64..."}],
+    "frame_blur": float,
+    "object_count": int,
+    "image_width": int,
+    "image_height": int
+}
+```
+
+##### MQTT Interface:
+
+| Topic | Direction | Payload |
+|-------|-----------|---------|
+| `segmenter/live` | Frontend → Backend | `{"action": "start/stop", "overlay": "bbox/mask/both", "min_esd_um": 20, "remove_static": true}` |
+| `status/segmenter/live` | Backend → Frontend | `{"objects": [...], "frame_blur": float, "image": "base64_jpeg"}` |
+
+---
+
+#### 3. `segmenter/planktoscope/segmenter/operations.py`
+**Change**: Added blur calculation function.
+
+```python
+def calculate_blur(img):
+    """Calculate blur metric using Laplacian variance.
+
+    Higher values = sharper image, lower values = more blur.
+
+    Args:
+        img (cv2 img): Image to calculate blur for (BGR or grayscale)
+
+    Returns:
+        float: Laplacian variance (blur metric)
+    """
+    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) if len(img.shape) == 3 else img
+    return cv2.Laplacian(gray, cv2.CV_64F).var()
+```
+
+**Calibration for PlanktoScope optics**:
+- Poor focus: < 25
+- OK focus: 25-50
+- Good focus: > 50
+
+---
+
+#### 4. `segmenter/planktoscope/segmenter/__init__.py`
+**Change**: Added helper function for live segmentation.
+
+```python
+def segment_single_frame(img, min_area=100):
+    """Segment a single frame and return object data without file I/O.
+
+    This is a helper function for live segmentation that returns object
+    metadata without saving to disk.
+    """
+    # ... segmentation pipeline identical to main segmenter
+```
+
+Also integrated per-object blur calculation into the EcoTaxa export metadata.
+
+---
+
+### Frontend (SolidJS)
+
+#### 5. `frontend/src/pages/preview/segmentation/index.jsx` (NEW FILE)
+**Purpose**: Live Segmentation Preview page with controls and overlay.
+
+**State Management**:
+```javascript
+const [liveSegmentEnabled, setLiveSegmentEnabled] = createSignal(false)
+const [overlayMode, setOverlayMode] = createSignal("bbox")
+const [minSizeUm, setMinSizeUm] = createSignal(20)
+const [removeStatic, setRemoveStatic] = createSignal(true)
+const [frameBlur, setFrameBlur] = createSignal(0)
+const [objectCount, setObjectCount] = createSignal(0)
+const [capturedImage, setCapturedImage] = createSignal(null)
+const [objects, setObjects] = createSignal([])
+```
+
+**Overlay Drawing**:
+```javascript
+function drawOverlays() {
+    // Scale coordinates from original image to display size
+    const scaleX = displayWidth / imageRef.naturalWidth
+    const scaleY = displayHeight / imageRef.naturalHeight
+
+    objects().forEach((obj, index) => {
+        const [x, y, w, h] = obj.bbox
+        const scaledX = x * scaleX
+        // ... draw bounding boxes and/or masks
+    })
+}
+```
+
+**Focus Indicator**:
+```javascript
+const focusStatus = () => {
+    const blur = frameBlur()
+    if (blur < 25) return { label: "Poor", icon: "✗", color: "#ef4444" }
+    if (blur < 50) return { label: "OK", icon: "~", color: "#eab308" }
+    return { label: "Good", icon: "✓", color: "#22c55e" }
+}
+```
+
+---
+
+#### 6. `frontend/src/pages/preview/segmentation/styles.module.css` (NEW FILE)
+CSS styles for the segmentation preview page including:
+- Dark theme toolbar
+- Toggle switch for enabling/disabling
+- Mode selector dropdown
+- Number input for minimum size
+- Stats display (object count, focus status)
+
+---
+
+#### 7. `lib/scope.js`
+**Change**: Added live segmentation control functions.
+
+```javascript
+export async function startLiveSegmentation(config) {
+    await request("segmenter/live", { action: "start", ...config })
+}
+
+export async function stopLiveSegmentation() {
+    await request("segmenter/live", { action: "stop" })
+}
+```
+
+---
+
+## Static Object Removal Algorithm
+
+The static removal feature filters out debris stuck on the flow cell glass by tracking object positions across frames.
+
+### How It Works:
+
+1. **Grid-Based Tracking**: The image is divided into 60px grid cells
+2. **Position Hashing**: Each object's center point maps to a grid cell
+3. **Frame Counting**: A dictionary tracks how many consecutive frames each grid cell has contained an object
+4. **Filtering**: Objects in cells with count >= 3 are considered static and filtered out
+5. **Automatic Cleanup**: When a position has no object in a frame, its counter is removed
+
+### Why 60px Grid?
+- **Too small** (e.g., 30px): Large objects may shift between cells due to slight detection variation
+- **Too large** (e.g., 100px): Multiple separate small objects might be grouped together
+- **60px**: Good balance for typical PlanktoScope object sizes
+
+### Why 3-Frame Threshold?
+- Ensures objects are truly static, not just slow-moving
+- Avoids false positives from coincidental position overlap
+- Quick enough to filter debris within first few frames of acquisition
+
+---
+
+## Performance Considerations
+
+1. **Object Limit**: Maximum 300 objects per frame to prevent UI lag
+2. **Mask Limit**: Maximum 100 masks encoded (masks are expensive)
+3. **Image Encoding**: JPEG quality 80% for reasonable file size
+4. **Polling Rate**: 50ms between MQTT message checks
+
+---
+
+## Testing
+
+1. Start an acquisition with "Live Segmentation" enabled
+2. Verify objects appear with colored overlays
+3. Test overlay modes: bbox, mask, both
+4. Adjust minimum size and verify small objects are filtered
+5. Enable "Remove Static" and verify debris is filtered after 3 frames
+6. Check focus indicator accuracy against actual image blur
+
+---
+
+## Dependencies
+
+No new dependencies required. Uses existing:
+- OpenCV (cv2)
+- NumPy
+- PIL/Pillow
+- scikit-image (skimage.measure)
+- MQTT (paho-mqtt via planktoscope.mqtt)
diff --git a/docs/LIVE_SEGMENTATION_FEATURE.md b/docs/LIVE_SEGMENTATION_FEATURE.md
new file mode 100644
index 000000000..d276fb361
--- /dev/null
+++ b/docs/LIVE_SEGMENTATION_FEATURE.md
@@ -0,0 +1,146 @@
+# Live Segmentation with Real-time Preview and Blur Metrics
+
+## Summary
+
+This PR introduces **real-time segmentation preview** during image acquisition, allowing operators to see detected plankton objects as they are captured. It also adds **per-object blur metrics** for quality assessment and includes critical bug fixes for acquisition timing and calibration consistency.
+
+---
+
+## New Features
+
+### Real-time Segmentation Preview
+
+Enable live object detection directly from the Acquisition page. As images are captured, detected objects are immediately highlighted with configurable overlays.
+
+![Live Segmentation Preview Toggle](docs/images/Preview.jpg)
+*The Live Segmentation Preview panel appears below the acquisition controls. Toggle it on to enable real-time detection.*
+
+---
+
+### Overlay Mode Selection
+
+Choose how detected objects are visualized during acquisition:
+
+| Mode | Description |
+|------|-------------|
+| **Bounding Boxes** | Cyan rectangles around each detected object |
+| **Masks** | Semi-transparent overlay showing exact object boundaries |
+| **Both** | Combined bounding boxes and masks |
+
+![Overlay Mode Dropdown](docs/images/choice.jpg)
+*Select between Bounding Boxes, Masks, or Both to customize the visualization.*
+
+---
+
+### Configurable Detection Parameters
+
+Fine-tune detection directly from the toolbar:
+
+![Live Segmentation Toolbar](docs/images/Toggle..jpg)
+
+| Control | Description |
+|---------|-------------|
+| **Min Size (um)** | Filter out objects smaller than this diameter (ESD) |
+| **Remove Static** | Automatically filter debris stuck on the flow cell glass |
+| **Objects** | Live count of detected objects in current frame |
+| **Focus** | Real-time focus quality indicator |
+
+---
+
+### Real-time Focus Quality Indicator
+
+Monitor image sharpness during acquisition with the live blur metric display. The system uses Laplacian variance to quantify focus quality:
+
+#### Good Focus (Score > 50)
+![Good Focus Example](docs/images/good.jpg)
+*Sharp image with clear object boundaries. Focus score of 41 indicates acceptable quality.*
+
+#### Poor Focus (Score < 25)
+![Poor Focus Example](docs/images/poor.jpg)
+*Blurry image requiring focus adjustment. Focus score of 3 indicates poor quality.*
+
+| Score Range | Status | Indicator |
+|-------------|--------|-----------|
+| > 50 | Good | Green |
+| 25-50 | OK | Yellow |
+| < 25 | Poor | Red |
+
+**Note:** Per-object blur metrics are also saved to the EcoTaxa `.tsv` file as `object_blur_laplacian`, enabling post-acquisition quality sorting.
+
+---
+
+## Bug Fixes
+
+### Fix #1: Pump Timing Synchronization
+
+**Problem:** The pump was running continuously instead of following the proper acquisition sequence (pump → wait 0.5s → capture → repeat), causing motion blur.
+
+**Root Cause:** The MQTT progress message (`{"type": "progress", ...}`) that signals image capture completion was removed during a refactor, breaking the synchronization between the imager and live segmenter.
+
+**Solution:** Restored the progress message in `controller/imager/mqtt.py`.
+
+---
+
+### Fix #2: Pixel Size Calibration Consistency
+
+**Problem:** Live segmentation used a hardcoded pixel size (0.75 µm/pixel) instead of reading from the calibration dashboard, causing inconsistent object size filtering.
+
+**Solution:** Live segmenter now reads `process_pixel_fixed` from `/home/pi/PlanktoScope/hardware.json` to match the calibration set in the dashboard.
+
+---
+
+## Technical Details
+
+### Files Changed
+
+| File | Change |
+|------|--------|
+| `controller/imager/mqtt.py` | Restored progress MQTT message |
+| `segmenter/planktoscope/segmenter/live.py` | Load pixel size from hardware config |
+| `LIVE_SEGMENTATION_CHANGES.md` | Updated documentation |
+| `BUGFIX_CHANGELOG.md` | Added fix documentation |
+| `CHANGELOG_PR_DOCUMENTATION.md` | Updated feature documentation |
+
+### MQTT Topics
+
+| Topic | Direction | Purpose |
+|-------|-----------|---------|
+| `segmenter/live` | Frontend → Backend | Start/stop live segmentation |
+| `status/segmenter/live` | Backend → Frontend | Object detection results |
+| `status/imager` | Imager → Segmenter | Image capture progress |
+
+---
+
+## Testing Checklist
+
+- [ ] Enable live segmentation on Acquisition page
+- [ ] Start acquisition and verify objects appear with overlays
+- [ ] Test all overlay modes: bounding boxes, masks, both
+- [ ] Adjust minimum size filter, verify small objects filtered
+- [ ] Enable "Remove Static" and verify debris is filtered
+- [ ] Check focus indicator accuracy against actual image blur
+- [ ] Verify pixel size matches calibration dashboard setting
+- [ ] Confirm proper pump timing (no continuous pumping)
+
+---
+
+## Deployment
+
+```bash
+# Frontend (after npm run build)
+scp -r frontend/dist/* pi@planktoscope.local:/home/pi/PlanktoScope/frontend/dist/
+
+# Backend
+scp segmenter/planktoscope/segmenter/live.py pi@planktoscope.local:/home/pi/PlanktoScope/segmenter/planktoscope/segmenter/
+scp controller/imager/mqtt.py pi@planktoscope.local:/home/pi/PlanktoScope/controller/imager/
+
+# Restart services
+ssh pi@planktoscope.local "sudo systemctl restart segmenter imager"
+```
+
+---
+
+## Related Issues
+
+- Fixes continuous pump running during acquisition
+- Fixes inconsistent object filtering between live and batch segmentation
diff --git a/docs/images/OK.jpg b/docs/images/OK.jpg
new file mode 100644
index 000000000..b3536f5ee
Binary files /dev/null and b/docs/images/OK.jpg differ
diff --git a/docs/images/Preview.jpg b/docs/images/Preview.jpg
new file mode 100644
index 000000000..a934ace27
Binary files /dev/null and b/docs/images/Preview.jpg differ
diff --git a/docs/images/Toggle..jpg b/docs/images/Toggle..jpg
new file mode 100644
index 000000000..581745f78
Binary files /dev/null and b/docs/images/Toggle..jpg differ
diff --git a/docs/images/choice.jpg b/docs/images/choice.jpg
new file mode 100644
index 000000000..77825e808
Binary files /dev/null and b/docs/images/choice.jpg differ
diff --git a/docs/images/good.jpg b/docs/images/good.jpg
new file mode 100644
index 000000000..b6105d487
Binary files /dev/null and b/docs/images/good.jpg differ
diff --git a/docs/images/poor.jpg b/docs/images/poor.jpg
new file mode 100644
index 000000000..dd4ce5188
Binary files /dev/null and b/docs/images/poor.jpg differ
diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 4d36a872a..96b803d74 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -1,8 +1,16 @@
 [
+    {
+        "id": "07f3b717f2a2c8c7",
+        "type": "tab",
+        "label": "Setup",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
     {
         "id": "1b667c6443413ced",
         "type": "tab",
-        "label": "Home dashboard2",
+        "label": "Home",
         "disabled": false,
         "info": "",
         "env": []
@@ -47,14 +55,6 @@
         "info": "",
         "env": []
     },
-    {
-        "id": "8555b76c53e789e0",
-        "type": "tab",
-        "label": "[TEST] EcoTaxa",
-        "disabled": false,
-        "info": "",
-        "env": []
-    },
     {
         "id": "8018bd5586fd4054",
         "type": "tab",
@@ -95,6 +95,14 @@
         "info": "",
         "env": []
     },
+    {
+        "id": "8555b76c53e789e0",
+        "type": "tab",
+        "label": "[TEST] EcoTaxa",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
     {
         "id": "a02961610bc3982a",
         "type": "tab",
@@ -670,16 +678,16 @@
         "colors": {
             "surface": "#ffffff",
             "primary": "#1976d2",
-            "bgPage": "#dedede",
+            "bgPage": "#eef3ff",
             "groupBg": "#ffffff",
-            "groupOutline": "#9c9c9c"
+            "groupOutline": "#c6d1dc"
         },
         "sizes": {
             "density": "default",
-            "pagePadding": "10px",
-            "groupGap": "10px",
-            "groupBorderRadius": "4px",
-            "widgetGap": "10px"
+            "pagePadding": "1.5rem",
+            "groupGap": "1.5rem",
+            "groupBorderRadius": "8px",
+            "widgetGap": "0px"
         }
     },
     {
@@ -705,7 +713,7 @@
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "6"
             },
             {
                 "name": "Desktop",
@@ -713,7 +721,7 @@
                 "cols": "12"
             }
         ],
-        "order": 3,
+        "order": 4,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -847,7 +855,7 @@
                 "cols": "12"
             }
         ],
-        "order": 5,
+        "order": 6,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -855,12 +863,12 @@
     {
         "id": "bfd4acb7b243514f",
         "type": "ui-group",
-        "name": "Table",
+        "name": "List of Acquisitions",
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
         "order": 3,
-        "showTitle": false,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -897,7 +905,7 @@
                 "cols": "12"
             }
         ],
-        "order": 9,
+        "order": 10,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -947,7 +955,7 @@
                 "cols": "12"
             }
         ],
-        "order": 10,
+        "order": 11,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -997,7 +1005,7 @@
                 "cols": "12"
             }
         ],
-        "order": 11,
+        "order": 12,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1047,7 +1055,7 @@
                 "cols": "12"
             }
         ],
-        "order": 8,
+        "order": 9,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1161,7 +1169,7 @@
                 "cols": "12"
             }
         ],
-        "order": 2,
+        "order": 3,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1225,7 +1233,7 @@
                 "cols": "12"
             }
         ],
-        "order": 4,
+        "order": 5,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1276,12 +1284,12 @@
             {
                 "name": "Tablet",
                 "px": "576",
-                "cols": "6"
+                "cols": "3"
             },
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "12"
             },
             {
                 "name": "Desktop",
@@ -1289,7 +1297,7 @@
                 "cols": "12"
             }
         ],
-        "order": 1,
+        "order": 2,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1405,17 +1413,17 @@
             {
                 "name": "Default",
                 "px": "0",
-                "cols": "3"
+                "cols": "4"
             },
             {
                 "name": "Tablet",
                 "px": "576",
-                "cols": "6"
+                "cols": "4"
             },
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "12"
             },
             {
                 "name": "Desktop",
@@ -1423,10 +1431,10 @@
                 "cols": "12"
             }
         ],
-        "order": 6,
+        "order": 8,
         "className": "",
-        "visible": true,
-        "disabled": false
+        "visible": "true",
+        "disabled": "false"
     },
     {
         "id": "b570f76ef526af45",
@@ -1449,7 +1457,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 3,
+        "order": 15,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1464,7 +1472,7 @@
         "width": "12",
         "height": 1,
         "order": 2,
-        "showTitle": false,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1473,150 +1481,480 @@
     {
         "id": "fa6393a7d7e3b7d7",
         "type": "ui-group",
-        "name": "Table",
+        "name": "List of Segmentation",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
         "order": 2,
-        "showTitle": false,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
         "groupType": "default"
     },
     {
-        "id": "82099021.9ceb08",
-        "type": "file",
-        "z": "4ed26b8b.253504",
-        "name": "",
-        "filename": "/home/pi/PlanktoScope/hardware.json",
-        "appendNewline": true,
-        "createDir": true,
-        "overwriteFile": "true",
-        "encoding": "none",
-        "x": 660,
-        "y": 40,
-        "wires": [
-            []
-        ]
+        "id": "34112984a39c35bd",
+        "type": "ui-page",
+        "name": "Setup",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/setup",
+        "icon": "cog",
+        "layout": "grid",
+        "theme": "f7770f0b818c3a67",
+        "breakpoints": [
+            {
+                "name": "Default",
+                "px": "0",
+                "cols": "3"
+            },
+            {
+                "name": "Tablet",
+                "px": "576",
+                "cols": "6"
+            },
+            {
+                "name": "Small Desktop",
+                "px": "768",
+                "cols": "9"
+            },
+            {
+                "name": "Desktop",
+                "px": "1024",
+                "cols": "12"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
     },
     {
-        "id": "bb0a8725.a1849",
-        "type": "json",
-        "z": "4ed26b8b.253504",
-        "name": "Create JSON",
-        "property": "payload",
-        "action": "str",
-        "pretty": true,
-        "x": 490,
-        "y": 40,
-        "wires": [
-            [
-                "82099021.9ceb08"
-            ]
-        ]
+        "id": "de680effc3e27451",
+        "type": "ui-group",
+        "name": "body",
+        "page": "34112984a39c35bd",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
     },
     {
-        "id": "53d163be.47cf24",
-        "type": "function",
-        "z": "4ed26b8b.253504",
-        "name": "Update and retrieve hardware_conf",
-        "func": "// change global\nhardware_conf = global.get(\"hardware_conf\");\n\nif (msg.topic == \"process_pixel_fixed\" && msg.payload == 0){\n    delete hardware_conf[msg.topic]\n    delete msg.topic\n}\n\nif (msg.topic !== null && msg.topic !== undefined){\n    hardware_conf[msg.topic] = msg.payload;\n    global.set(\"hardware_conf\", hardware_conf);\n}\n\nreturn {\"payload\": hardware_conf};",
-        "outputs": 1,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 240,
-        "y": 40,
-        "wires": [
-            [
-                "bb0a8725.a1849"
-            ]
-        ]
+        "id": "c5651e1a3e56f3f5",
+        "type": "ui-group",
+        "name": "Explorer",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 13,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
     },
     {
-        "id": "0f16258953fae292",
-        "type": "file in",
-        "z": "b7861ce703215a01",
-        "name": "",
-        "filename": "/home/pi/PlanktoScope/hardware.json",
-        "filenameType": "str",
-        "format": "utf8",
-        "chunk": false,
-        "sendError": false,
-        "encoding": "none",
-        "allProps": false,
-        "x": 250,
-        "y": 40,
-        "wires": [
-            [
-                "81c516291ab19acd"
-            ]
-        ],
-        "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
+        "id": "0c1537ce71affc2b",
+        "type": "ui-group",
+        "name": "Gallery",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 14,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
     },
     {
-        "id": "81c516291ab19acd",
-        "type": "json",
-        "z": "b7861ce703215a01",
-        "name": "Parse JSON",
-        "property": "payload",
-        "action": "",
-        "pretty": false,
-        "x": 510,
-        "y": 40,
-        "wires": [
-            [
-                "d0fbcd200cd09981"
-            ]
-        ]
+        "id": "36931a9722892790",
+        "type": "ui-group",
+        "name": "Software Version",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 6,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
     },
     {
-        "id": "d0fbcd200cd09981",
-        "type": "change",
-        "z": "b7861ce703215a01",
-        "name": "",
-        "rules": [
-            {
-                "t": "set",
-                "p": "hardware_conf",
-                "pt": "global",
-                "to": "payload",
-                "tot": "msg"
-            }
-        ],
-        "action": "",
-        "property": "",
-        "from": "",
-        "to": "",
-        "reg": false,
-        "x": 730,
-        "y": 40,
-        "wires": [
-            []
-        ]
+        "id": "2aa235120084abe4",
+        "type": "ui-group",
+        "name": "Images Acquired",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 7,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
     },
     {
-        "id": "730b2780ac215a52",
-        "type": "file in",
-        "z": "63c85b96537b7355",
-        "name": "",
-        "filename": "/home/pi/PlanktoScope/config.json",
-        "filenameType": "str",
-        "format": "utf8",
-        "chunk": false,
-        "sendError": false,
-        "encoding": "none",
-        "x": 560,
-        "y": 60,
-        "wires": [
-            [
-                "e0b7238a0c5d4ed0"
-            ]
-        ],
-        "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
-    },
+        "id": "df7c60bd8b265e48",
+        "type": "ui-group",
+        "name": "Objects Segmented",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 8,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "dc304678d9a6b53b",
+        "type": "ui-group",
+        "name": "Storage",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 9,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "8a113b6c8e1eadb7",
+        "type": "ui-group",
+        "name": "Learn the basic",
+        "page": "632260133d581caa",
+        "width": "12",
+        "height": 1,
+        "order": 5,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "97e552a2d05b0800",
+        "type": "ui-group",
+        "name": "Lanch the preview",
+        "page": "632260133d581caa",
+        "width": "4",
+        "height": 1,
+        "order": 2,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "82480e386ed6f8bd",
+        "type": "ui-group",
+        "name": "Explore your data",
+        "page": "632260133d581caa",
+        "width": "4",
+        "height": 1,
+        "order": 3,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "9d3e8bdd535f0e0d",
+        "type": "ui-group",
+        "name": "Run the Calibration",
+        "page": "632260133d581caa",
+        "width": "4",
+        "height": 1,
+        "order": 4,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "53490f9c39e2065d",
+        "type": "ui-group",
+        "name": "Informations",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "90b33e458dd29d04",
+        "type": "ui-group",
+        "name": "Heat Map",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "47800358cf7cee25",
+        "type": "ui-group",
+        "name": "ESD Histogram",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 5,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1d9c6927a0e0a71b",
+        "type": "ui-group",
+        "name": "Timeline",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 6,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "03ad1c8f517e8769",
+        "type": "ui-group",
+        "name": "Colorspace",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 7,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "0be15f8190e6fd43",
+        "type": "ui-group",
+        "name": "Aspect",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 8,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1edc962c44888abc",
+        "type": "ui-group",
+        "name": "Greenness",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 9,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "67c63cc92c23c4b1",
+        "type": "ui-group",
+        "name": "Complexity",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 10,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "95a152a68b7ba779",
+        "type": "ui-group",
+        "name": "Texture",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 11,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1baa943e505febf1",
+        "type": "ui-group",
+        "name": "Solidity",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 12,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "82099021.9ceb08",
+        "type": "file",
+        "z": "4ed26b8b.253504",
+        "name": "",
+        "filename": "/home/pi/PlanktoScope/hardware.json",
+        "appendNewline": true,
+        "createDir": true,
+        "overwriteFile": "true",
+        "encoding": "none",
+        "x": 660,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "bb0a8725.a1849",
+        "type": "json",
+        "z": "4ed26b8b.253504",
+        "name": "Create JSON",
+        "property": "payload",
+        "action": "str",
+        "pretty": true,
+        "x": 490,
+        "y": 40,
+        "wires": [
+            [
+                "82099021.9ceb08"
+            ]
+        ]
+    },
+    {
+        "id": "53d163be.47cf24",
+        "type": "function",
+        "z": "4ed26b8b.253504",
+        "name": "Update and retrieve hardware_conf",
+        "func": "// change global\nhardware_conf = global.get(\"hardware_conf\");\n\nif (msg.topic == \"process_pixel_fixed\" && msg.payload == 0){\n    delete hardware_conf[msg.topic]\n    delete msg.topic\n}\n\nif (msg.topic !== null && msg.topic !== undefined){\n    hardware_conf[msg.topic] = msg.payload;\n    global.set(\"hardware_conf\", hardware_conf);\n}\n\nreturn {\"payload\": hardware_conf};",
+        "outputs": 1,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 240,
+        "y": 40,
+        "wires": [
+            [
+                "bb0a8725.a1849"
+            ]
+        ]
+    },
+    {
+        "id": "0f16258953fae292",
+        "type": "file in",
+        "z": "b7861ce703215a01",
+        "name": "",
+        "filename": "/home/pi/PlanktoScope/hardware.json",
+        "filenameType": "str",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "allProps": false,
+        "x": 250,
+        "y": 40,
+        "wires": [
+            [
+                "81c516291ab19acd"
+            ]
+        ],
+        "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
+    },
+    {
+        "id": "81c516291ab19acd",
+        "type": "json",
+        "z": "b7861ce703215a01",
+        "name": "Parse JSON",
+        "property": "payload",
+        "action": "",
+        "pretty": false,
+        "x": 510,
+        "y": 40,
+        "wires": [
+            [
+                "d0fbcd200cd09981"
+            ]
+        ]
+    },
+    {
+        "id": "d0fbcd200cd09981",
+        "type": "change",
+        "z": "b7861ce703215a01",
+        "name": "",
+        "rules": [
+            {
+                "t": "set",
+                "p": "hardware_conf",
+                "pt": "global",
+                "to": "payload",
+                "tot": "msg"
+            }
+        ],
+        "action": "",
+        "property": "",
+        "from": "",
+        "to": "",
+        "reg": false,
+        "x": 730,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "730b2780ac215a52",
+        "type": "file in",
+        "z": "63c85b96537b7355",
+        "name": "",
+        "filename": "/home/pi/PlanktoScope/config.json",
+        "filenameType": "str",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "x": 560,
+        "y": 60,
+        "wires": [
+            [
+                "e0b7238a0c5d4ed0"
+            ]
+        ],
+        "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
+    },
     {
         "id": "e0b7238a0c5d4ed0",
         "type": "json",
@@ -1680,66 +2018,193 @@
         "x": 910,
         "y": 60,
         "wires": [
-            []
+            []
+        ]
+    },
+    {
+        "id": "24ea99bb02eeffa2",
+        "type": "inject",
+        "z": "63c85b96537b7355",
+        "name": "Load config",
+        "props": [
+            {
+                "p": "topic",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": true,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payloadType": "str",
+        "x": 230,
+        "y": 60,
+        "wires": [
+            [
+                "730b2780ac215a52"
+            ]
+        ]
+    },
+    {
+        "id": "5248e5e225d854d1",
+        "type": "function",
+        "z": "63c85b96537b7355",
+        "name": "get config payload",
+        "func": "keys = global.get(\"config_keys\")\n\nvar payload = {}\n\nkeys.forEach(function(item, index, array) {\n  payload[item] = global.get(item);\n})\n\nreturn {\"payload\": payload};",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 410,
+        "y": 160,
+        "wires": [
+            [
+                "31ae9b857627673c"
+            ]
+        ]
+    },
+    {
+        "id": "97f8a94e71055782",
+        "type": "ui_ui_control",
+        "z": "63c85b96537b7355",
+        "name": "Connect Event",
+        "events": "connect",
+        "x": 220,
+        "y": 100,
+        "wires": [
+            [
+                "730b2780ac215a52"
+            ]
+        ]
+    },
+    {
+        "id": "7e7d02f3ea356eff",
+        "type": "switch",
+        "z": "07f3b717f2a2c8c7",
+        "name": "msg.payload.page.path === \"/home\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/home",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 310,
+        "y": 40,
+        "wires": [
+            [
+                "d55333906aeb7517"
+            ]
+        ]
+    },
+    {
+        "id": "b1f5b8b5f26121e6",
+        "type": "ui-event",
+        "z": "07f3b717f2a2c8c7",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "7e7d02f3ea356eff"
+            ]
+        ]
+    },
+    {
+        "id": "d55333906aeb7517",
+        "type": "function",
+        "z": "07f3b717f2a2c8c7",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 120,
+        "y": 140,
+        "wires": [
+            [
+                "87b0cc67cfa07120"
+            ]
+        ]
+    },
+    {
+        "id": "87b0cc67cfa07120",
+        "type": "ui-template",
+        "z": "07f3b717f2a2c8c7",
+        "group": "de680effc3e27451",
+        "page": "",
+        "ui": "",
+        "name": "body",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-container fluid>\n        <v-card elevation=\"4\">\n            <!-- Header -->\n            <v-card-item class=\"bg-primary pa-4\">\n                <template v-slot:prepend>\n                    <v-icon icon=\"mdi-microscope\" size=\"large\" class=\"mr-2\"></v-icon>\n                </template>\n                <v-card-title class=\"text-h6 font-weight-bold\">\n                    Welcome to the PlanktoScope GUI\n                </v-card-title>\n            </v-card-item>\n\n            <v-card-text>\n                <div class=\"text-h6 my-4\">Enter your information</div>\n\n                <v-form ref=\"form\" v-model=\"valid\">\n                    <v-row>\n                        <!-- Region / Country Select -->\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete v-model=\"formData.country\" :items=\"countries\" item-title=\"label\"\n                                item-value=\"value\" label=\"Region\" placeholder=\"Please select\" variant=\"outlined\"\n                                density=\"compact\" clearable></v-autocomplete>\n                        </v-col>\n\n                        <!-- Timezone Select -->\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete v-model=\"formData.timezone\" :items=\"timezones\" label=\"Timezone\"\n                                placeholder=\"Please select\" variant=\"outlined\" density=\"compact\"\n                                clearable></v-autocomplete>\n                        </v-col>\n                    </v-row>\n                </v-form>\n            </v-card-text>\n\n            <!-- Actions -->\n            <v-card-actions class=\"pa-4\" >\n                <v-spacer></v-spacer>\n                <v-btn variant=\"flat\" class=\"px-4\" size=\"large\" color=\"primary\" @click=\"submitForm\" :disabled=\"!isValid\">\n                    <v-icon start>mdi-content-save</v-icon>\n                    Save Configuration\n                </v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-container>\n</template>\n\n<script>\n    export default {\n    data() {\n        return {\n            valid: true,\n            formData: {\n                country: \"\",\n                timezone: \"UTC\", // Valeur par défaut modifiée\n            },\n            // Large lists are loaded in mounted to keep data cleaner\n            countries: [],\n            timezones: []\n        };\n    },\n    computed: {\n        isValid() {\n            return this.formData.country && this.formData.timezone;\n        }\n    },\n    methods: {\n        submitForm() {\n            // Send the form data to Node-RED\n            this.send({ payload: this.formData });\n        }\n    },\n    mounted() {\n        // Populating the massive lists provided in the prompt\n        this.countries = [\n            { value: \"AF\", label: \"Afghanistan\" },\n            { value: \"AX\", label: \"Åland Islands\" },\n            { value: \"AL\", label: \"Albania\" },\n            { value: \"DZ\", label: \"Algeria\" },\n            { value: \"AD\", label: \"Andorra\" },\n            { value: \"AO\", label: \"Angola\" },\n            { value: \"AI\", label: \"Anguilla\" },\n            { value: \"AQ\", label: \"Antarctica\" },\n            { value: \"AG\", label: \"Antigua & Barbuda\" },\n            { value: \"AR\", label: \"Argentina\" },\n            { value: \"AM\", label: \"Armenia\" },\n            { value: \"AW\", label: \"Aruba\" },\n            { value: \"AU\", label: \"Australia\" },\n            { value: \"AT\", label: \"Austria\" },\n            { value: \"AZ\", label: \"Azerbaijan\" },\n            { value: \"BS\", label: \"Bahamas\" },\n            { value: \"BH\", label: \"Bahrain\" },\n            { value: \"BD\", label: \"Bangladesh\" },\n            { value: \"BB\", label: \"Barbados\" },\n            { value: \"BY\", label: \"Belarus\" },\n            { value: \"BE\", label: \"Belgium\" },\n            { value: \"BZ\", label: \"Belize\" },\n            { value: \"BJ\", label: \"Benin\" },\n            { value: \"BM\", label: \"Bermuda\" },\n            { value: \"BT\", label: \"Bhutan\" },\n            { value: \"BO\", label: \"Bolivia\" },\n            { value: \"BA\", label: \"Bosnia & Herzegovina\" },\n            { value: \"BW\", label: \"Botswana\" },\n            { value: \"BV\", label: \"Bouvet Island\" },\n            { value: \"BR\", label: \"Brazil\" },\n            { value: \"GB\", label: \"Britain (UK)\" },\n            { value: \"IO\", label: \"British Indian Ocean Territory\" },\n            { value: \"BN\", label: \"Brunei\" },\n            { value: \"BG\", label: \"Bulgaria\" },\n            { value: \"BF\", label: \"Burkina Faso\" },\n            { value: \"BI\", label: \"Burundi\" },\n            { value: \"KH\", label: \"Cambodia\" },\n            { value: \"CM\", label: \"Cameroon\" },\n            { value: \"CA\", label: \"Canada\" },\n            { value: \"CV\", label: \"Cape Verde\" },\n            { value: \"BQ\", label: \"Caribbean NL\" },\n            { value: \"KY\", label: \"Cayman Islands\" },\n            { value: \"CF\", label: \"Central African Rep.\" },\n            { value: \"TD\", label: \"Chad\" },\n            { value: \"CL\", label: \"Chile\" },\n            { value: \"CN\", label: \"China\" },\n            { value: \"CX\", label: \"Christmas Island\" },\n            { value: \"CC\", label: \"Cocos (Keeling) Islands\" },\n            { value: \"CO\", label: \"Colombia\" },\n            { value: \"KM\", label: \"Comoros\" },\n            { value: \"CD\", label: \"Congo (Dem. Rep.)\" },\n            { value: \"CG\", label: \"Congo (Rep.)\" },\n            { value: \"CK\", label: \"Cook Islands\" },\n            { value: \"CR\", label: \"Costa Rica\" },\n            { value: \"CI\", label: \"Côte d'Ivoire\" },\n            { value: \"HR\", label: \"Croatia\" },\n            { value: \"CU\", label: \"Cuba\" },\n            { value: \"CW\", label: \"Curaçao\" },\n            { value: \"CY\", label: \"Cyprus\" },\n            { value: \"CZ\", label: \"Czech Republic\" },\n            { value: \"DK\", label: \"Denmark\" },\n            { value: \"DJ\", label: \"Djibouti\" },\n            { value: \"DM\", label: \"Dominica\" },\n            { value: \"DO\", label: \"Dominican Republic\" },\n            { value: \"TL\", label: \"East Timor\" },\n            { value: \"EC\", label: \"Ecuador\" },\n            { value: \"EG\", label: \"Egypt\" },\n            { value: \"SV\", label: \"El Salvador\" },\n            { value: \"GQ\", label: \"Equatorial Guinea\" },\n            { value: \"ER\", label: \"Eritrea\" },\n            { value: \"EE\", label: \"Estonia\" },\n            { value: \"SZ\", label: \"Eswatini (Swaziland)\" },\n            { value: \"ET\", label: \"Ethiopia\" },\n            { value: \"FK\", label: \"Falkland Islands\" },\n            { value: \"FO\", label: \"Faroe Islands\" },\n            { value: \"FJ\", label: \"Fiji\" },\n            { value: \"FI\", label: \"Finland\" },\n            { value: \"FR\", label: \"France\" },\n            { value: \"GF\", label: \"French Guiana\" },\n            { value: \"PF\", label: \"French Polynesia\" },\n            { value: \"TF\", label: \"French S. Terr.\" },\n            { value: \"GA\", label: \"Gabon\" },\n            { value: \"GM\", label: \"Gambia\" },\n            { value: \"GE\", label: \"Georgia\" },\n            { value: \"DE\", label: \"Germany\" },\n            { value: \"GH\", label: \"Ghana\" },\n            { value: \"GI\", label: \"Gibraltar\" },\n            { value: \"GR\", label: \"Greece\" },\n            { value: \"GL\", label: \"Greenland\" },\n            { value: \"GD\", label: \"Grenada\" },\n            { value: \"GP\", label: \"Guadeloupe\" },\n            { value: \"GU\", label: \"Guam\" },\n            { value: \"GT\", label: \"Guatemala\" },\n            { value: \"GG\", label: \"Guernsey\" },\n            { value: \"GN\", label: \"Guinea\" },\n            { value: \"GW\", label: \"Guinea-Bissau\" },\n            { value: \"GY\", label: \"Guyana\" },\n            { value: \"HT\", label: \"Haiti\" },\n            { value: \"HM\", label: \"Heard Island & McDonald Islands\" },\n            { value: \"HN\", label: \"Honduras\" },\n            { value: \"HK\", label: \"Hong Kong\" },\n            { value: \"HU\", label: \"Hungary\" },\n            { value: \"IS\", label: \"Iceland\" },\n            { value: \"IN\", label: \"India\" },\n            { value: \"ID\", label: \"Indonesia\" },\n            { value: \"IR\", label: \"Iran\" },\n            { value: \"IQ\", label: \"Iraq\" },\n            { value: \"IE\", label: \"Ireland\" },\n            { value: \"IM\", label: \"Isle of Man\" },\n            { value: \"IL\", label: \"Israel\" },\n            { value: \"IT\", label: \"Italy\" },\n            { value: \"JM\", label: \"Jamaica\" },\n            { value: \"JP\", label: \"Japan\" },\n            { value: \"JE\", label: \"Jersey\" },\n            { value: \"JO\", label: \"Jordan\" },\n            { value: \"KZ\", label: \"Kazakhstan\" },\n            { value: \"KE\", label: \"Kenya\" },\n            { value: \"KI\", label: \"Kiribati\" },\n            { value: \"KP\", label: \"Korea (North)\" },\n            { value: \"KR\", label: \"Korea (South)\" },\n            { value: \"KW\", label: \"Kuwait\" },\n            { value: \"KG\", label: \"Kyrgyzstan\" },\n            { value: \"LA\", label: \"Laos\" },\n            { value: \"LV\", label: \"Latvia\" },\n            { value: \"LB\", label: \"Lebanon\" },\n            { value: \"LS\", label: \"Lesotho\" },\n            { value: \"LR\", label: \"Liberia\" },\n            { value: \"LY\", label: \"Libya\" },\n            { value: \"LI\", label: \"Liechtenstein\" },\n            { value: \"LT\", label: \"Lithuania\" },\n            { value: \"LU\", label: \"Luxembourg\" },\n            { value: \"MO\", label: \"Macau\" },\n            { value: \"MG\", label: \"Madagascar\" },\n            { value: \"MW\", label: \"Malawi\" },\n            { value: \"MY\", label: \"Malaysia\" },\n            { value: \"MV\", label: \"Maldives\" },\n            { value: \"ML\", label: \"Mali\" },\n            { value: \"MT\", label: \"Malta\" },\n            { value: \"MH\", label: \"Marshall Islands\" },\n            { value: \"MQ\", label: \"Martinique\" },\n            { value: \"MR\", label: \"Mauritania\" },\n            { value: \"MU\", label: \"Mauritius\" },\n            { value: \"YT\", label: \"Mayotte\" },\n            { value: \"MX\", label: \"Mexico\" },\n            { value: \"FM\", label: \"Micronesia\" },\n            { value: \"MD\", label: \"Moldova\" },\n            { value: \"MC\", label: \"Monaco\" },\n            { value: \"MN\", label: \"Mongolia\" },\n            { value: \"ME\", label: \"Montenegro\" },\n            { value: \"MS\", label: \"Montserrat\" },\n            { value: \"MA\", label: \"Morocco\" },\n            { value: \"MZ\", label: \"Mozambique\" },\n            { value: \"MM\", label: \"Myanmar (Burma)\" },\n            { value: \"NA\", label: \"Namibia\" },\n            { value: \"NR\", label: \"Nauru\" },\n            { value: \"NP\", label: \"Nepal\" },\n            { value: \"NL\", label: \"Netherlands\" },\n            { value: \"NC\", label: \"New Caledonia\" },\n            { value: \"NZ\", label: \"New Zealand\" },\n            { value: \"NI\", label: \"Nicaragua\" },\n            { value: \"NE\", label: \"Niger\" },\n            { value: \"NG\", label: \"Nigeria\" },\n            { value: \"NU\", label: \"Niue\" },\n            { value: \"NF\", label: \"Norfolk Island\" },\n            { value: \"MK\", label: \"North Macedonia\" },\n            { value: \"MP\", label: \"Northern Mariana Islands\" },\n            { value: \"NO\", label: \"Norway\" },\n            { value: \"OM\", label: \"Oman\" },\n            { value: \"PK\", label: \"Pakistan\" },\n            { value: \"PW\", label: \"Palau\" },\n            { value: \"PS\", label: \"Palestine\" },\n            { value: \"PA\", label: \"Panama\" },\n            { value: \"PG\", label: \"Papua New Guinea\" },\n            { value: \"PY\", label: \"Paraguay\" },\n            { value: \"PE\", label: \"Peru\" },\n            { value: \"PH\", label: \"Philippines\" },\n            { value: \"PN\", label: \"Pitcairn\" },\n            { value: \"PL\", label: \"Poland\" },\n            { value: \"PT\", label: \"Portugal\" },\n            { value: \"PR\", label: \"Puerto Rico\" },\n            { value: \"QA\", label: \"Qatar\" },\n            { value: \"RE\", label: \"Réunion\" },\n            { value: \"RO\", label: \"Romania\" },\n            { value: \"RU\", label: \"Russia\" },\n            { value: \"RW\", label: \"Rwanda\" },\n            { value: \"AS\", label: \"Samoa (American)\" },\n            { value: \"WS\", label: \"Samoa (western)\" },\n            { value: \"SM\", label: \"San Marino\" },\n            { value: \"ST\", label: \"Sao Tome & Principe\" },\n            { value: \"SA\", label: \"Saudi Arabia\" },\n            { value: \"SN\", label: \"Senegal\" },\n            { value: \"RS\", label: \"Serbia\" },\n            { value: \"SC\", label: \"Seychelles\" },\n            { value: \"SL\", label: \"Sierra Leone\" },\n            { value: \"SG\", label: \"Singapore\" },\n            { value: \"SK\", label: \"Slovakia\" },\n            { value: \"SI\", label: \"Slovenia\" },\n            { value: \"SB\", label: \"Solomon Islands\" },\n            { value: \"SO\", label: \"Somalia\" },\n            { value: \"ZA\", label: \"South Africa\" },\n            { value: \"GS\", label: \"South Georgia & the South Sandwich Islands\" },\n            { value: \"SS\", label: \"South Sudan\" },\n            { value: \"ES\", label: \"Spain\" },\n            { value: \"LK\", label: \"Sri Lanka\" },\n            { value: \"BL\", label: \"St Barthelemy\" },\n            { value: \"SH\", label: \"St Helena\" },\n            { value: \"KN\", label: \"St Kitts & Nevis\" },\n            { value: \"LC\", label: \"St Lucia\" },\n            { value: \"SX\", label: \"St Maarten (Dutch)\" },\n            { value: \"MF\", label: \"St Martin (French)\" },\n            { value: \"PM\", label: \"St Pierre & Miquelon\" },\n            { value: \"VC\", label: \"St Vincent\" },\n            { value: \"SD\", label: \"Sudan\" },\n            { value: \"SR\", label: \"Suriname\" },\n            { value: \"SJ\", label: \"Svalbard & Jan Mayen\" },\n            { value: \"SE\", label: \"Sweden\" },\n            { value: \"CH\", label: \"Switzerland\" },\n            { value: \"SY\", label: \"Syria\" },\n            { value: \"TW\", label: \"Taiwan\" },\n            { value: \"TJ\", label: \"Tajikistan\" },\n            { value: \"TZ\", label: \"Tanzania\" },\n            { value: \"TH\", label: \"Thailand\" },\n            { value: \"TG\", label: \"Togo\" },\n            { value: \"TK\", label: \"Tokelau\" },\n            { value: \"TO\", label: \"Tonga\" },\n            { value: \"TT\", label: \"Trinidad & Tobago\" },\n            { value: \"TN\", label: \"Tunisia\" },\n            { value: \"TR\", label: \"Turkey\" },\n            { value: \"TM\", label: \"Turkmenistan\" },\n            { value: \"TC\", label: \"Turks & Caicos Is\" },\n            { value: \"TV\", label: \"Tuvalu\" },\n            { value: \"UG\", label: \"Uganda\" },\n            { value: \"UA\", label: \"Ukraine\" },\n            { value: \"AE\", label: \"United Arab Emirates\" },\n            { value: \"US\", label: \"United States\" },\n            { value: \"UY\", label: \"Uruguay\" },\n            { value: \"UM\", label: \"US minor outlying islands\" },\n            { value: \"UZ\", label: \"Uzbekistan\" },\n            { value: \"VU\", label: \"Vanuatu\" },\n            { value: \"VA\", label: \"Vatican City\" },\n            { value: \"VE\", label: \"Venezuela\" },\n            { value: \"VN\", label: \"Vietnam\" },\n            { value: \"VG\", label: \"Virgin Islands (UK)\" },\n            { value: \"VI\", label: \"Virgin Islands (US)\" },\n            { value: \"WF\", label: \"Wallis & Futuna\" },\n            { value: \"EH\", label: \"Western Sahara\" },\n            { value: \"YE\", label: \"Yemen\" },\n            { value: \"ZM\", label: \"Zambia\" },\n            { value: \"ZW\", label: \"Zimbabwe\" }\n        ];\n        \n        this.timezones = [\n            \"Africa/Abidjan\", \"Africa/Accra\", \"Africa/Addis_Ababa\", \"Africa/Algiers\", \"Africa/Asmara\", \"Africa/Asmera\", \"Africa/Bamako\", \"Africa/Bangui\", \"Africa/Banjul\", \"Africa/Bissau\", \"Africa/Blantyre\", \"Africa/Brazzaville\", \"Africa/Bujumbura\", \"Africa/Cairo\", \"Africa/Casablanca\", \"Africa/Ceuta\", \"Africa/Conakry\", \"Africa/Dakar\", \"Africa/Dar_es_Salaam\", \"Africa/Djibouti\", \"Africa/Douala\", \"Africa/El_Aaiun\", \"Africa/Freetown\", \"Africa/Gaborone\", \"Africa/Harare\", \"Africa/Johannesburg\", \"Africa/Juba\", \"Africa/Kampala\", \"Africa/Khartoum\", \"Africa/Kigali\", \"Africa/Kinshasa\", \"Africa/Lagos\", \"Africa/Libreville\", \"Africa/Lome\", \"Africa/Luanda\", \"Africa/Lubumbashi\", \"Africa/Lusaka\", \"Africa/Malabo\", \"Africa/Maputo\", \"Africa/Maseru\", \"Africa/Mbabane\", \"Africa/Mogadishu\", \"Africa/Monrovia\", \"Africa/Nairobi\", \"Africa/Ndjamena\", \"Africa/Niamey\", \"Africa/Nouakchott\", \"Africa/Ouagadougou\", \"Africa/Porto-Novo\", \"Africa/Sao_Tome\", \"Africa/Timbuktu\", \"Africa/Tripoli\", \"Africa/Tunis\", \"Africa/Windhoek\", \"America/Adak\", \"America/Anchorage\", \"America/Anguilla\", \"America/Antigua\", \"America/Araguaina\", \"America/Argentina/Buenos_Aires\", \"America/Argentina/Catamarca\", \"America/Argentina/ComodRivadavia\", \"America/Argentina/Cordoba\", \"America/Argentina/Jujuy\", \"America/Argentina/La_Rioja\", \"America/Argentina/Mendoza\", \"America/Argentina/Rio_Gallegos\", \"America/Argentina/Salta\", \"America/Argentina/San_Juan\", \"America/Argentina/San_Luis\", \"America/Argentina/Tucuman\", \"America/Argentina/Ushuaia\", \"America/Aruba\", \"America/Asuncion\", \"America/Atikokan\", \"America/Atka\", \"America/Bahia\", \"America/Bahia_Banderas\", \"America/Barbados\", \"America/Belem\", \"America/Belize\", \"America/Blanc-Sablon\", \"America/Boa_Vista\", \"America/Bogota\", \"America/Boise\", \"America/Buenos_Aires\", \"America/Cambridge_Bay\", \"America/Campo_Grande\", \"America/Cancun\", \"America/Caracas\", \"America/Catamarca\", \"America/Cayenne\", \"America/Cayman\", \"America/Chicago\", \"America/Chihuahua\", \"America/Ciudad_Juarez\", \"America/Coral_Harbour\", \"America/Cordoba\", \"America/Costa_Rica\", \"America/Coyhaique\", \"America/Creston\", \"America/Cuiaba\", \"America/Curacao\", \"America/Danmarkshavn\", \"America/Dawson\", \"America/Dawson_Creek\", \"America/Denver\", \"America/Detroit\", \"America/Dominica\", \"America/Edmonton\", \"America/Eirunepe\", \"America/El_Salvador\", \"America/Ensenada\", \"America/Fort_Nelson\", \"America/Fort_Wayne\", \"America/Fortaleza\", \"America/Glace_Bay\", \"America/Godthab\", \"America/Goose_Bay\", \"America/Grand_Turk\", \"America/Grenada\", \"America/Guadeloupe\", \"America/Guatemala\", \"America/Guayaquil\", \"America/Guyana\", \"America/Halifax\", \"America/Havana\", \"America/Hermosillo\", \"America/Indiana/Indianapolis\", \"America/Indiana/Knox\", \"America/Indiana/Marengo\", \"America/Indiana/Petersburg\", \"America/Indiana/Tell_City\", \"America/Indiana/Vevay\", \"America/Indiana/Vincennes\", \"America/Indiana/Winamac\", \"America/Indianapolis\", \"America/Inuvik\", \"America/Iqaluit\", \"America/Jamaica\", \"America/Jujuy\", \"America/Juneau\", \"America/Kentucky/Louisville\", \"America/Kentucky/Monticello\", \"America/Knox_IN\", \"America/Kralendijk\", \"America/La_Paz\", \"America/Lima\", \"America/Los_Angeles\", \"America/Louisville\", \"America/Lower_Princes\", \"America/Maceio\", \"America/Managua\", \"America/Manaus\", \"America/Marigot\", \"America/Martinique\", \"America/Matamoros\", \"America/Mazatlan\", \"America/Mendoza\", \"America/Menominee\", \"America/Merida\", \"America/Metlakatla\", \"America/Mexico_City\", \"America/Miquelon\", \"America/Moncton\", \"America/Monterrey\", \"America/Montevideo\", \"America/Montreal\", \"America/Montserrat\", \"America/Nassau\", \"America/New_York\", \"America/Nipigon\", \"America/Nome\", \"America/Noronha\", \"America/North_Dakota/Beulah\", \"America/North_Dakota/Center\", \"America/North_Dakota/New_Salem\", \"America/Nuuk\", \"America/Ojinaga\", \"America/Panama\", \"America/Pangnirtung\", \"America/Paramaribo\", \"America/Phoenix\", \"America/Port-au-Prince\", \"America/Port_of_Spain\", \"America/Porto_Acre\", \"America/Porto_Velho\", \"America/Puerto_Rico\", \"America/Punta_Arenas\", \"America/Rainy_River\", \"America/Rankin_Inlet\", \"America/Recife\", \"America/Regina\", \"America/Resolute\", \"America/Rio_Branco\", \"America/Rosario\", \"America/Santa_Isabel\", \"America/Santarem\", \"America/Santiago\", \"America/Santo_Domingo\", \"America/Sao_Paulo\", \"America/Scoresbysund\", \"America/Shiprock\", \"America/Sitka\", \"America/St_Barthelemy\", \"America/St_Johns\", \"America/St_Kitts\", \"America/St_Lucia\", \"America/St_Thomas\", \"America/St_Vincent\", \"America/Swift_Current\", \"America/Tegucigalpa\", \"America/Thule\", \"America/Thunder_Bay\", \"America/Tijuana\", \"America/Toronto\", \"America/Tortola\", \"America/Vancouver\", \"America/Virgin\", \"America/Whitehorse\", \"America/Winnipeg\", \"America/Yakutat\", \"America/Yellowknife\", \"Antarctica/Casey\", \"Antarctica/Davis\", \"Antarctica/DumontDUrville\", \"Antarctica/Macquarie\", \"Antarctica/Mawson\", \"Antarctica/McMurdo\", \"Antarctica/Palmer\", \"Antarctica/Rothera\", \"Antarctica/South_Pole\", \"Antarctica/Syowa\", \"Antarctica/Troll\", \"Antarctica/Vostok\", \"Arctic/Longyearbyen\", \"Asia/Aden\", \"Asia/Almaty\", \"Asia/Amman\", \"Asia/Anadyr\", \"Asia/Aqtau\", \"Asia/Aqtobe\", \"Asia/Ashgabat\", \"Asia/Ashkhabad\", \"Asia/Atyrau\", \"Asia/Baghdad\", \"Asia/Bahrain\", \"Asia/Baku\", \"Asia/Bangkok\", \"Asia/Barnaul\", \"Asia/Beirut\", \"Asia/Bishkek\", \"Asia/Brunei\", \"Asia/Calcutta\", \"Asia/Chita\", \"Asia/Choibalsan\", \"Asia/Chongqing\", \"Asia/Chungking\", \"Asia/Colombo\", \"Asia/Dacca\", \"Asia/Damascus\", \"Asia/Dhaka\", \"Asia/Dili\", \"Asia/Dubai\", \"Asia/Dushanbe\", \"Asia/Famagusta\", \"Asia/Gaza\", \"Asia/Harbin\", \"Asia/Hebron\", \"Asia/Ho_Chi_Minh\", \"Asia/Hong_Kong\", \"Asia/Hovd\", \"Asia/Irkutsk\", \"Asia/Istanbul\", \"Asia/Jakarta\", \"Asia/Jayapura\", \"Asia/Jerusalem\", \"Asia/Kabul\", \"Asia/Kamchatka\", \"Asia/Karachi\", \"Asia/Kashgar\", \"Asia/Kathmandu\", \"Asia/Katmandu\", \"Asia/Khandyga\", \"Asia/Kolkata\", \"Asia/Krasnoyarsk\", \"Asia/Kuala_Lumpur\", \"Asia/Kuching\", \"Asia/Kuwait\", \"Asia/Macao\", \"Asia/Macau\", \"Asia/Magadan\", \"Asia/Makassar\", \"Asia/Manila\", \"Asia/Muscat\", \"Asia/Nicosia\", \"Asia/Novokuznetsk\", \"Asia/Novosibirsk\", \"Asia/Omsk\", \"Asia/Oral\", \"Asia/Phnom_Penh\", \"Asia/Pontianak\", \"Asia/Pyongyang\", \"Asia/Qatar\", \"Asia/Qostanay\", \"Asia/Qyzylorda\", \"Asia/Rangoon\", \"Asia/Riyadh\", \"Asia/Saigon\", \"Asia/Sakhalin\", \"Asia/Samarkand\", \"Asia/Seoul\", \"Asia/Shanghai\", \"Asia/Singapore\", \"Asia/Srednekolymsk\", \"Asia/Taipei\", \"Asia/Tashkent\", \"Asia/Tbilisi\", \"Asia/Tehran\", \"Asia/Tel_Aviv\", \"Asia/Thimbu\", \"Asia/Thimphu\", \"Asia/Tokyo\", \"Asia/Tomsk\", \"Asia/Ujung_Pandang\", \"Asia/Ulaanbaatar\", \"Asia/Ulan_Bator\", \"Asia/Urumqi\", \"Asia/Ust-Nera\", \"Asia/Vientiane\", \"Asia/Vladivostok\", \"Asia/Yakutsk\", \"Asia/Yangon\", \"Asia/Yekaterinburg\", \"Asia/Yerevan\", \"Atlantic/Azores\", \"Atlantic/Bermuda\", \"Atlantic/Canary\", \"Atlantic/Cape_Verde\", \"Atlantic/Faeroe\", \"Atlantic/Faroe\", \"Atlantic/Jan_Mayen\", \"Atlantic/Madeira\", \"Atlantic/Reykjavik\", \"Atlantic/South_Georgia\", \"Atlantic/St_Helena\", \"Atlantic/Stanley\", \"Australia/ACT\", \"Australia/Adelaide\", \"Australia/Brisbane\", \"Australia/Broken_Hill\", \"Australia/Canberra\", \"Australia/Currie\", \"Australia/Darwin\", \"Australia/Eucla\", \"Australia/Hobart\", \"Australia/LHI\", \"Australia/Lindeman\", \"Australia/Lord_Howe\", \"Australia/Melbourne\", \"Australia/NSW\", \"Australia/North\", \"Australia/Perth\", \"Australia/Queensland\", \"Australia/South\", \"Australia/Sydney\", \"Australia/Tasmania\", \"Australia/Victoria\", \"Australia/West\", \"Australia/Yancowinna\", \"Brazil/Acre\", \"Brazil/DeNoronha\", \"Brazil/East\", \"Brazil/West\", \"CET\", \"CST6CDT\", \"Canada/Atlantic\", \"Canada/Central\", \"Canada/Eastern\", \"Canada/Mountain\", \"Canada/Newfoundland\", \"Canada/Pacific\", \"Canada/Saskatchewan\", \"Canada/Yukon\", \"Chile/Continental\", \"Chile/EasterIsland\", \"Cuba\", \"EET\", \"EST\", \"EST5EDT\", \"Egypt\", \"Eire\", \"Etc/GMT\", \"Etc/GMT+0\", \"Etc/GMT+1\", \"Etc/GMT+10\", \"Etc/GMT+11\", \"Etc/GMT+12\", \"Etc/GMT+2\", \"Etc/GMT+3\", \"Etc/GMT+4\", \"Etc/GMT+5\", \"Etc/GMT+6\", \"Etc/GMT+7\", \"Etc/GMT+8\", \"Etc/GMT+9\", \"Etc/GMT-0\", \"Etc/GMT-1\", \"Etc/GMT-10\", \"Etc/GMT-11\", \"Etc/GMT-12\", \"Etc/GMT-13\", \"Etc/GMT-14\", \"Etc/GMT-2\", \"Etc/GMT-3\", \"Etc/GMT-4\", \"Etc/GMT-5\", \"Etc/GMT-6\", \"Etc/GMT-7\", \"Etc/GMT-8\", \"Etc/GMT-9\", \"Etc/GMT0\", \"Etc/Greenwich\", \"Etc/UCT\", \"Etc/UTC\", \"Etc/Universal\", \"Etc/Zulu\", \"Europe/Amsterdam\", \"Europe/Andorra\", \"Europe/Astrakhan\", \"Europe/Athens\", \"Europe/Belfast\", \"Europe/Belgrade\", \"Europe/Berlin\", \"Europe/Bratislava\", \"Europe/Brussels\", \"Europe/Bucharest\", \"Europe/Budapest\", \"Europe/Busingen\", \"Europe/Chisinau\", \"Europe/Copenhagen\", \"Europe/Dublin\", \"Europe/Gibraltar\", \"Europe/Guernsey\", \"Europe/Helsinki\", \"Europe/Isle_of_Man\", \"Europe/Istanbul\", \"Europe/Jersey\", \"Europe/Kaliningrad\", \"Europe/Kiev\", \"Europe/Kirov\", \"Europe/Kyiv\", \"Europe/Lisbon\", \"Europe/Ljubljana\", \"Europe/London\", \"Europe/Luxembourg\", \"Europe/Madrid\", \"Europe/Malta\", \"Europe/Mariehamn\", \"Europe/Minsk\", \"Europe/Monaco\", \"Europe/Moscow\", \"Europe/Nicosia\", \"Europe/Oslo\", \"Europe/Paris\", \"Europe/Podgorica\", \"Europe/Prague\", \"Europe/Riga\", \"Europe/Rome\", \"Europe/Samara\", \"Europe/San_Marino\", \"Europe/Sarajevo\", \"Europe/Saratov\", \"Europe/Simferopol\", \"Europe/Skopje\", \"Europe/Sofia\", \"Europe/Stockholm\", \"Europe/Tallinn\", \"Europe/Tirane\", \"Europe/Tiraspol\", \"Europe/Ulyanovsk\", \"Europe/Uzhgorod\", \"Europe/Vaduz\", \"Europe/Vatican\", \"Europe/Vienna\", \"Europe/Vilnius\", \"Europe/Volgograd\", \"Europe/Warsaw\", \"Europe/Zagreb\", \"Europe/Zaporozhye\", \"Europe/Zurich\", \"Factory\", \"GB\", \"GB-Eire\", \"GMT\", \"GMT+0\", \"GMT-0\", \"GMT0\", \"Greenwich\", \"HST\", \"Hongkong\", \"Iceland\", \"Indian/Antananarivo\", \"Indian/Chagos\", \"Indian/Christmas\", \"Indian/Cocos\", \"Indian/Comoro\", \"Indian/Kerguelen\", \"Indian/Mahe\", \"Indian/Maldives\", \"Indian/Mauritius\", \"Indian/Mayotte\", \"Indian/Reunion\", \"Iran\", \"Israel\", \"Jamaica\", \"Japan\", \"Kwajalein\", \"Libya\", \"MET\", \"MST\", \"MST7MDT\", \"Mexico/BajaNorte\", \"Mexico/BajaSur\", \"Mexico/General\", \"NZ\", \"NZ-CHAT\", \"Navajo\", \"PRC\", \"PST8PDT\", \"Pacific/Apia\", \"Pacific/Auckland\", \"Pacific/Bougainville\", \"Pacific/Chatham\", \"Pacific/Chuuk\", \"Pacific/Easter\", \"Pacific/Efate\", \"Pacific/Enderbury\", \"Pacific/Fakaofo\", \"Pacific/Fiji\", \"Pacific/Funafuti\", \"Pacific/Galapagos\", \"Pacific/Gambier\", \"Pacific/Guadalcanal\", \"Pacific/Guam\", \"Pacific/Honolulu\", \"Pacific/Johnston\", \"Pacific/Kanton\", \"Pacific/Kiritimati\", \"Pacific/Kosrae\", \"Pacific/Kwajalein\", \"Pacific/Majuro\", \"Pacific/Marquesas\", \"Pacific/Midway\", \"Pacific/Nauru\", \"Pacific/Niue\", \"Pacific/Norfolk\", \"Pacific/Noumea\", \"Pacific/Pago_Pago\", \"Pacific/Palau\", \"Pacific/Pitcairn\", \"Pacific/Pohnpei\", \"Pacific/Ponape\", \"Pacific/Port_Moresby\", \"Pacific/Rarotonga\", \"Pacific/Saipan\", \"Pacific/Samoa\", \"Pacific/Tahiti\", \"Pacific/Tarawa\", \"Pacific/Tongatapu\", \"Pacific/Truk\", \"Pacific/Wake\", \"Pacific/Wallis\", \"Pacific/Yap\", \"Poland\", \"Portugal\", \"ROC\", \"ROK\", \"Singapore\", \"Turkey\", \"UCT\", \"US/Alaska\", \"US/Aleutian\", \"US/Arizona\", \"US/Central\", \"US/East-Indiana\", \"US/Eastern\", \"US/Hawaii\", \"US/Indiana-Starke\", \"US/Michigan\", \"US/Mountain\", \"US/Pacific\", \"US/Samoa\", \"UTC\", \"Universal\", \"W-SU\", \"WET\", \"Zulu\"\n        ];\n    }\n}\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 370,
+        "y": 140,
+        "wires": [
+            [
+                "0470c8bd5e2507dc"
+            ]
         ]
     },
     {
-        "id": "24ea99bb02eeffa2",
-        "type": "inject",
-        "z": "63c85b96537b7355",
-        "name": "Load config",
-        "props": [
-            {
-                "p": "topic",
-                "vt": "str"
-            }
-        ],
-        "repeat": "",
-        "crontab": "",
-        "once": true,
-        "onceDelay": 0.1,
-        "topic": "",
-        "payloadType": "str",
-        "x": 230,
-        "y": 60,
+        "id": "c8caad8136e6c5e3",
+        "type": "ui-template",
+        "z": "07f3b717f2a2c8c7",
+        "group": "",
+        "page": "34112984a39c35bd",
+        "ui": "",
+        "name": "CSS (All Pages)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": ".v-toolbar__content {\n  display:none;\n}\n\n.v-main{\n  --v-layout-top: 0px !important;\n\n}       \n.v-card {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;\n}",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 920,
+        "y": 40,
         "wires": [
-            [
-                "730b2780ac215a52"
-            ]
+            []
         ]
     },
     {
-        "id": "5248e5e225d854d1",
+        "id": "0470c8bd5e2507dc",
         "type": "function",
-        "z": "63c85b96537b7355",
-        "name": "get config payload",
-        "func": "keys = global.get(\"config_keys\")\n\nvar payload = {}\n\nkeys.forEach(function(item, index, array) {\n  payload[item] = global.get(item);\n})\n\nreturn {\"payload\": payload};",
+        "z": "07f3b717f2a2c8c7",
+        "name": "set general settings",
+        "func": "if (msg.topic) {\n    global.set(\"countries\", msg.payload.countries);\n    global.set(\"timezone\", msg.payload.timezone);\n}\nreturn msg;",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 410,
-        "y": 160,
-        "wires": [
-            [
-                "31ae9b857627673c"
-            ]
-        ]
-    },
-    {
-        "id": "97f8a94e71055782",
-        "type": "ui_ui_control",
-        "z": "63c85b96537b7355",
-        "name": "Connect Event",
-        "events": "connect",
-        "x": 220,
-        "y": 100,
+        "x": 590,
+        "y": 140,
         "wires": [
-            [
-                "730b2780ac215a52"
-            ]
+            []
         ]
     },
     {
@@ -1754,14 +2219,14 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid>\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n          <v-col cols=\"12\" md=\"4\">\n\n            <v-row no-gutters class=\"align-center\">\n\n              <!-- Colonne logo : largeur fixe -->\n              <v-col class=\"d-flex justify-center pa-0 pr-4\" style=\"width: 40px; max-width: 40px;\">\n                <v-icon size=\"40\">\n                  <svg viewBox=\"0 0 52.916666 52.916666\" width=\"40\" height=\"40\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                      style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                      d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                      fill=\"#674ea7\" />\n                  </svg>\n                </v-icon>\n              </v-col>\n\n              <!-- Colonne texte : occupe tout l'espace restant -->\n              <v-col class=\"d-flex flex-column justify-center\" style=\"flex: 1;\">\n\n                <a href=\"https://www.planktoscope.org\" target=\"_blank\" class=\"text-decoration-none\" style=\"color: inherit;\">\n                  <h4 class=\"font-weight-bold mb-1\">PlanktoScope</h4>\n                </a>\n\n                <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n\n              </v-col>\n\n            </v-row>\n\n          </v-col>\n\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
+        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid style=\"background:white\">\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n          <v-col cols=\"12\" md=\"4\">\n\n            <v-row no-gutters class=\"align-center\">\n\n              <!-- Colonne logo : largeur fixe -->\n              <v-col class=\"d-flex justify-center pa-0 pr-4\" style=\"width: 40px; max-width: 40px;\">\n                <v-icon size=\"40\">\n                  <svg viewBox=\"0 0 52.916666 52.916666\" width=\"40\" height=\"40\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                      style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                      d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                      fill=\"#674ea7\" />\n                  </svg>\n                </v-icon>\n              </v-col>\n\n              <!-- Colonne texte : occupe tout l'espace restant -->\n              <v-col class=\"d-flex flex-column justify-center\" style=\"flex: 1;\">\n\n                <a href=\"https://www.planktoscope.org\" target=\"_blank\" class=\"text-decoration-none\" style=\"color: inherit;\">\n                  <h4 class=\"font-weight-bold mb-1\">PlanktoScope</h4>\n                </a>\n\n                <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n\n              </v-col>\n\n            </v-row>\n\n          </v-col>\n\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "widget:ui",
         "className": "",
         "x": 510,
-        "y": 440,
+        "y": 700,
         "wires": [
             []
         ]
@@ -1783,7 +2248,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 570,
+        "x": 310,
         "y": 40,
         "wires": [
             [
@@ -1793,31 +2258,6 @@
             ]
         ]
     },
-    {
-        "id": "e74e4d04e4a79458",
-        "type": "switch",
-        "z": "1b667c6443413ced",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "67b871e8f9c64c2b"
-            ]
-        ]
-    },
     {
         "id": "7c16cbd0b2c40ea4",
         "type": "ui-event",
@@ -1828,7 +2268,7 @@
         "y": 40,
         "wires": [
             [
-                "e74e4d04e4a79458"
+                "67b871e8f9c64c2b"
             ]
         ]
     },
@@ -1844,7 +2284,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "  .v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n  }\n\n\n.v-row+.v-row {\n    margin-top: 0px !important;\n}\n\n.v-row {\n    margin: 0px !important;\n}",
+        "format": ".v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n}\n\n\n.v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n}\n\n.v-btn-group .v-btn, .v-field__overlay {\n    background: #eef3ff;\n}\n    \n.v-row {\n        margin: 0;\n}",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -1922,170 +2362,371 @@
         "id": "90ba8dbcce201a83",
         "type": "delay",
         "z": "1b667c6443413ced",
-        "name": "",
-        "pauseType": "delay",
-        "timeout": "1",
-        "timeoutUnits": "seconds",
-        "rate": "1",
-        "nbRateUnits": "1",
-        "rateUnits": "second",
-        "randomFirst": "1",
-        "randomLast": "5",
-        "randomUnits": "seconds",
-        "drop": false,
-        "allowrate": false,
-        "outputs": 1,
-        "x": 180,
-        "y": 140,
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 140,
+        "y": 180,
+        "wires": [
+            [
+                "74f8dad75cdd3c16"
+            ]
+        ]
+    },
+    {
+        "id": "74f8dad75cdd3c16",
+        "type": "function",
+        "z": "1b667c6443413ced",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 320,
+        "y": 180,
+        "wires": [
+            [
+                "04386808e694e97e",
+                "e68b686e94d78c9d",
+                "e431a9253416f9eb",
+                "b50dce0a86c2668c",
+                "07c889f3fa18b15b"
+            ]
+        ]
+    },
+    {
+        "id": "8efc52e6ee9206f6",
+        "type": "poweroff",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "x": 1160,
+        "y": 240,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "39c7e4b018ce16cb",
+        "type": "reboot",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "x": 1160,
+        "y": 200,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "1db1c2e3e19e85ff",
+        "type": "switch",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "property": "payload",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "reboot",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "shutdown",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 970,
+        "y": 200,
+        "wires": [
+            [
+                "39c7e4b018ce16cb"
+            ],
+            [
+                "8efc52e6ee9206f6"
+            ]
+        ]
+    },
+    {
+        "id": "cd5cd3a0277b8dba",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "5d39a98563150f22",
+        "page": "",
+        "ui": "",
+        "name": "empty-state",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid>\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to your PlanktoScope\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n  </v-container>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 530,
+        "y": 280,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "04386808e694e97e",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "",
+        "page": "",
+        "ui": "e6ae26617c24c3ea",
+        "name": "toolbar",
+        "order": 2,
+        "width": "12",
+        "height": "6",
+        "head": "",
+        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- Styles pour le Logo et Texte PlanktoScope --- */\n    #pks-logo-link {\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #pks-logo-link svg {\n        margin-right: 8px;\n        height: 36px;\n        width: 36px;\n    }\n\n    .pks-logo-text {\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.5px;\n        color: #1976d2;\n    }\n\n    /* --- Zone Gauche (Badge Version) --- */\n    #pks-hw-version {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        /* Apparence de badge */\n        background: #eef3ff;\n        color: #1976d2;\n        border: 1px solid #d6e4ff;\n\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.5px;\n\n        padding: 4px 8px;\n        border-radius: 4px;\n\n        vertical-align: middle;\n        line-height: 1.5;\n\n        /* Masqué par défaut */\n        display: none;\n\n    }\n\n    /* --- Horloge --- */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* --- Bouton Machine --- */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #eef3ff;\n        border: 1px solid #d6e4ff;\n        margin-right: 1rem;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1b76d3;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #1976d2;\n        color:white;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* --- Dropdown Menu --- */\n    #pks-dropdown {\n        position: fixed !important;\n        top: 64px !important;\n\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* --- Loader Modal --- */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    .v-toolbar__append {\n        margin-inline: 0px;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    #app-bar-actions,\n    #pks-menu-wrapper {\n        flex-shrink: 0 !important;\n    }\n\n    /* Important: S'assurer que le titre prend l'espace nécessaire */\n    .v-toolbar-title {\n        overflow: visible !important;\n        white-space: nowrap;\n    }\n\n    #app-bar {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n</style>\n\n<script>\n    let scope = this;\n\n    /* Load MDI icons if missing */\n    if (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n        const mdi = document.createElement(\"link\");\n        mdi.rel = \"stylesheet\";\n        mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n        document.head.appendChild(mdi);\n    }\n\n    /* Clock */\n    function updateClock() {\n        const el = document.getElementById(\"pks-clock\");\n        if (!el) return;\n        const now = new Date();\n        const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n        const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n        const d = days[now.getUTCDay()];\n        const day = String(now.getUTCDate()).padStart(2, \"0\");\n        const month = months[now.getUTCMonth()];\n        const year = now.getUTCFullYear();\n        const hh = now.getUTCHours().toString().padStart(2, \"0\");\n        const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n        el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n    }\n    setInterval(updateClock, 60000);\n\n    /* =========================================================\n       BUILD MENU CONTENT\n    ========================================================= */\n    const PLANKTOSCOPE_LOGO_SVG = `\n        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                        d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                        fill=\"#076eca\" />    </svg>`;\n\n    function buildMenu(machineName) {\n        const menu = document.getElementById(\"pks-dropdown\");\n        if (!menu) return;\n        menu.innerHTML = `\n            <div class=\"menu-item\" data-href=\"home\">\n                 ${PLANKTOSCOPE_LOGO_SVG.replace('width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"', 'width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\"')}\n                <b>Home</b>\n            </div>\n            <div class=\"menu-separator\"></div>\n            <div class=\"menu-item\" data-href=\"preview\"><i class=\"mdi mdi-eye\"></i> Preview</div>\n            <div class=\"menu-item\" data-href=\"visualization\"><i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization</div>\n            <div class=\"menu-item\" data-href=\"calibration\"><i class=\"mdi mdi-crosshairs-gps\"></i> Calibration</div>\n            <div class=\"menu-item\" data-external=\"/ps/docs/\"><i class=\"mdi mdi-book-outline\"></i> Documentation <i class=\"mdi mdi-open-in-new ext\"></i></div>\n            <div class=\"menu-separator\"></div>\n            <div class=\"menu-item reboot\" data-action=\"reboot\"><i class=\"mdi mdi-refresh\"></i> Reboot</div>\n            <div class=\"menu-item shutdown\" data-action=\"shutdown\"><i class=\"mdi mdi-power\"></i> Shutdown</div>\n        `;\n    }\n\n    /* =========================================================\n       MODAL LOADER\n    ========================================================= */\n    function showModal(message) {\n        let modal = document.getElementById(\"pks-modal\");\n        if (!modal) {\n            modal = document.createElement(\"div\");\n            modal.id = \"pks-modal\";\n            modal.innerHTML = `<div id=\"pks-modal-box\"><div id=\"pks-loader\"></div><div id=\"pks-modal-text\">${message}</div></div>`;\n            document.body.appendChild(modal);\n        }\n        document.getElementById(\"pks-modal-text\").textContent = message;\n        modal.style.display = \"flex\";\n    }\n\n    function hideModal() {\n        const modal = document.getElementById(\"pks-modal\");\n        if (modal) modal.style.display = \"none\";\n    }\n\n    /* =========================================================\n       INJECT HARDWARE VERSION (LEFT)\n    ========================================================= */\n    function injectHardwareVersion() {\n        // Cible la div principale du titre\n        const titleContainer = document.querySelector(\".v-toolbar-title.v-app-bar-title\"); \n        \n        if (titleContainer) {\n            // S'assure que notre ID d'injection est bien sur le conteneur principal\n            titleContainer.id = \"app-bar-title\";\n            const appBarTitle = titleContainer;\n\n            // --- 1. Suppression de tout placeholder restant (logique précédente) ---\n            const placeholderEl = appBarTitle.querySelector(\".v-toolbar-title__placeholder\");\n            if (placeholderEl) {\n                placeholderEl.remove();\n            }\n\n            // --- 2. Ajout du logo et du texte PlanktoScope (lien vers home) ---\n            if (!document.getElementById(\"pks-logo-link\")) {\n                const logoLink = document.createElement(\"a\");\n                logoLink.id = \"pks-logo-link\";\n                logoLink.href = \"home\";\n                logoLink.innerHTML = `\n                    ${PLANKTOSCOPE_LOGO_SVG.replace('width=\"20\" height=\"20\"', 'width=\"36\" height=\"36\"')}\n                    <span class=\"pks-logo-text\">PlanktoScope</span>\n                `;\n                // On insère le lien du logo en premier enfant\n                appBarTitle.prepend(logoLink);\n            }\n\n            // --- 3. Ajout/Déplacement du badge de version ---\n            if (!document.getElementById(\"pks-hw-version\")) {\n                const verDiv = document.createElement(\"div\");\n                verDiv.id = \"pks-hw-version\";\n                appBarTitle.appendChild(verDiv);\n            }\n        }\n    }\n\n    /* =========================================================\n       INJECT MENU (RIGHT)\n    ========================================================= */\n    function injectMenu() {\n        const zone = document.getElementById(\"app-bar-actions\");\n        if (!zone) return;\n        if (!document.getElementById(\"pks-menu-wrapper\")) {\n            const wrap = document.createElement(\"div\");\n            wrap.id = \"pks-menu-wrapper\";\n            zone.appendChild(wrap);\n        }\n        const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n        if (!document.getElementById(\"pks-dropdown\")) {\n            const dropdown = document.createElement(\"div\");\n            dropdown.id = \"pks-dropdown\";\n            document.body.appendChild(dropdown);\n        }\n\n        if (!document.getElementById(\"pks-machine-button\")) {\n            wrapper.innerHTML = `\n                <div id=\"pks-clock\"></div>\n                <button id=\"pks-machine-button\">\n                    <i class=\"mdi mdi-desktop-classic\"></i>\n                    <span id=\"pks-machine-name\">Loading..</span>\n                    <i class=\"mdi mdi-menu-down\"></i>\n                </button>\n            `;\n            updateClock();\n        }\n\n        const btn = document.getElementById(\"pks-machine-button\");\n        const menu = document.getElementById(\"pks-dropdown\");\n\n        btn.onclick = (e) => {\n            e.stopPropagation();\n            const rect = btn.getBoundingClientRect();\n            menu.style.top = rect.bottom + \"px\";\n            menu.style.right = \"0px\";\n            menu.style.left = \"auto\";\n            menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n        };\n\n        menu.onclick = (e) => {\n            const item = e.target.closest(\".menu-item\");\n            if (!item) return;\n            if (item.dataset.href) window.location.href = item.dataset.href;\n            if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n            if (item.dataset.action) {\n                showModal(item.dataset.action === \"reboot\" ? \"Rebooting…\" : \"Shutting down…\");\n                scope.send({ topic: \"action\", payload: item.dataset.action });\n                setTimeout(() => {\n                    window.location.reload();\n                }, 5000);\n            }\n            menu.style.display = \"none\";\n        };\n\n        document.addEventListener(\"click\", (e) => {\n            if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n        });\n    }\n\n    /* DOM observer pour lancer les injections si la structure change */\n    function runInjections() {\n        injectMenu();\n        injectHardwareVersion();\n    }\n\n    const observer = new MutationObserver(() => runInjections());\n    observer.observe(document.body, {\n        childList: true,\n        subtree: true\n    });\n\n    /* =========================================================\n       DATA UPDATES\n    ========================================================= */\n    this.$watch(\"msg\", (msg) => {\n        if (!msg || !msg.payload) return;\n\n        // 1. Update Machine Name (Droite)\n        if (msg.payload.machine_name) {\n            const name = msg.payload.machine_name;\n            const el = document.getElementById(\"pks-machine-name\");\n            if (el) el.textContent = name;\n            buildMenu(name);\n        }\n\n        // 2. Update Hardware Version (Gauche)\n        if (msg.payload.hardware_version) {\n            // On s'assure que l'élément existe\n            injectHardwareVersion();\n\n            const hwEl = document.getElementById(\"pks-hw-version\");\n            if (hwEl) {\n                hwEl.textContent = msg.payload.hardware_version;\n                hwEl.style.display = \"inline-flex\"; // On l'affiche maintenant qu'on a la valeur\n            }\n        }\n\n        runInjections();\n    });\n\n    setTimeout(runInjections, 200);\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "widget:ui",
+        "className": "",
+        "x": 800,
+        "y": 180,
+        "wires": [
+            [
+                "1db1c2e3e19e85ff"
+            ]
+        ]
+    },
+    {
+        "id": "e68b686e94d78c9d",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "36931a9722892790",
+        "page": "",
+        "ui": "",
+        "name": "Software Version",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">Software Version</span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ msg.payload.software_version }}\n    </v-col>\n  </v-row>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 480,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "e431a9253416f9eb",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "2aa235120084abe4",
+        "page": "",
+        "ui": "",
+        "name": "Images Acquired",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-image-multiple-outline\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Images Acquired\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ Number(msg.payload.image_acquired).toLocaleString('fr-FR') }}\n    </v-col>\n  </v-row>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 520,
         "wires": [
-            [
-                "74f8dad75cdd3c16"
-            ]
+            []
         ]
     },
     {
-        "id": "74f8dad75cdd3c16",
-        "type": "function",
+        "id": "b50dce0a86c2668c",
+        "type": "ui-template",
         "z": "1b667c6443413ced",
-        "name": "Get Global Variables",
-        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 200,
-        "y": 280,
+        "group": "df7c60bd8b265e48",
+        "page": "",
+        "ui": "",
+        "name": "Objects Segmented",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-crop\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Objects Segmented\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ Number(msg.payload.object_segmented).toLocaleString('fr-FR') }}\n    </v-col>\n  </v-row>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 560,
+        "y": 560,
         "wires": [
-            [
-                "52902327e2363f8b",
-                "cd5cd3a0277b8dba",
-                "0c0eb2a907745142"
-            ]
+            []
         ]
     },
     {
-        "id": "52902327e2363f8b",
+        "id": "07c889f3fa18b15b",
         "type": "ui-template",
         "z": "1b667c6443413ced",
-        "group": "",
+        "group": "dc304678d9a6b53b",
         "page": "",
-        "ui": "e6ae26617c24c3ea",
-        "name": "toolbar",
-        "order": 2,
-        "width": "12",
-        "height": "6",
+        "ui": "",
+        "name": "Storage",
+        "order": 1,
+        "width": "0",
+        "height": "0",
         "head": "",
-        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        margin-right:8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n\n    // English weekday abbreviations\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n\n    // French month abbreviations\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    // Desired format:\n    // \"Thu. 20 nov. 2025 - 15:22 (UTC)\"\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\n\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n                        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                                style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                            <path\n                                d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                                fill=\"#076eca\" />\n                        </svg>\n            \n            <b>Home</b>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"preview\">\n            <i class=\"mdi mdi-eye\"></i> Preview\n        </div>\n\n        <div class=\"menu-item\" data-href=\"visualization\">\n            <i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <!-- Icon + Label -->\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">Storage</span>\n    </v-col>\n\n    <!-- Progress bar -->\n    <v-col>\n      <v-progress-linear :model-value=\"msg.payload.storage_percent_used\" height=\"12\" rounded class=\"mx-3\" :color=\"\n          msg.payload.storage_percent_used > 90\n            ? 'error'\n            : msg.payload.storage_percent_used > 70\n            ? 'warning'\n            : 'success'\n        \" />\n    </v-col>\n\n    <!-- Percentage -->\n    <v-col cols=\"auto\" class=\"text-subtitle-2 font-weight-bold text-right\" style=\"min-width: 48px;\">\n      {{ msg.payload.storage_percent_used }}%\n    </v-col>\n  </v-row>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
-        "templateScope": "widget:ui",
+        "templateScope": "local",
         "className": "",
-        "x": 820,
-        "y": 200,
+        "x": 520,
+        "y": 600,
         "wires": [
-            [
-                "1db1c2e3e19e85ff"
-            ]
+            []
         ]
     },
     {
-        "id": "8efc52e6ee9206f6",
-        "type": "poweroff",
+        "id": "ae546211d7d4413c",
+        "type": "ui-template",
         "z": "1b667c6443413ced",
-        "name": "",
-        "x": 1160,
-        "y": 240,
+        "group": "8a113b6c8e1eadb7",
+        "page": "",
+        "ui": "",
+        "name": "Learn the basic",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n      <v-btn\n        href=\"/ps/docs/operation/protocol-v4.pdf\"\n        target=\"_blank\"\n        color=\"grey-darken-3\"\n        variant=\"tonal\"\n        size=\"large\"\n        class=\"text-none w-100 text-subtitle-1 py-3\"\n      >\n        <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n        Learn the Basics\n      </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 540,
+        "y": 440,
         "wires": [
             []
         ]
     },
     {
-        "id": "39c7e4b018ce16cb",
-        "type": "reboot",
+        "id": "6440d3bb6107d79d",
+        "type": "ui-template",
         "z": "1b667c6443413ced",
-        "name": "",
-        "x": 1160,
-        "y": 200,
+        "group": "97e552a2d05b0800",
+        "page": "",
+        "ui": "",
+        "name": "Lanch the preview",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-btn\n      href=\"preview\"\n      variant=\"flat\"\n      color=\"primary\"\n      size=\"large\"\n      stacked\n      class=\"text-none w-100 py-6 flex-column\"\n    >\n      <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n      <span class=\"text-h6\">Launch the Preview</span>\n    </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 320,
         "wires": [
             []
         ]
     },
     {
-        "id": "1db1c2e3e19e85ff",
-        "type": "switch",
+        "id": "19ee8d1758dd9c06",
+        "type": "ui-template",
         "z": "1b667c6443413ced",
-        "name": "",
-        "property": "payload",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "reboot",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "shutdown",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 2,
-        "x": 970,
-        "y": 200,
+        "group": "82480e386ed6f8bd",
+        "page": "",
+        "ui": "",
+        "name": "Explore your data",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-btn\n      href=\"visualization\"\n      target=\"_blank\"\n      variant=\"outlined\"\n      color=\"primary\"\n      size=\"large\"\n      stacked\n      class=\"text-none w-100 py-6 flex-column\"\n    >\n      <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n      <span class=\"text-h6\">Explore your data</span>\n    </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 360,
         "wires": [
-            [
-                "39c7e4b018ce16cb"
-            ],
-            [
-                "8efc52e6ee9206f6"
-            ]
+            []
         ]
     },
     {
-        "id": "cd5cd3a0277b8dba",
+        "id": "0152d19f6346a058",
         "type": "ui-template",
         "z": "1b667c6443413ced",
-        "group": "5d39a98563150f22",
+        "group": "9d3e8bdd535f0e0d",
         "page": "",
         "ui": "",
-        "name": "body",
+        "name": "Run the Calibration",
         "order": 1,
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n      \n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n          <span class=\"text-h6\">Run the Calibration</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"12\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
+        "format": "<template>\n    <v-btn\n      href=\"calibration\"\n      variant=\"flat\"\n      color=\"grey-darken-3\"\n      size=\"large\"\n      stacked\n      class=\"text-none w-100 py-6 flex-column\"\n    >\n      <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n      <span class=\"text-h6\">Run the Calibration</span>\n    </v-btn>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 510,
-        "y": 180,
+        "x": 550,
+        "y": 400,
         "wires": [
             []
         ]
     },
     {
-        "id": "0c0eb2a907745142",
-        "type": "debug",
+        "id": "683fec6ef9b340f7",
+        "type": "ui-template",
         "z": "1b667c6443413ced",
-        "name": "debug 15",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 520,
-        "y": 280,
-        "wires": []
+        "group": "",
+        "page": "632260133d581caa",
+        "ui": "",
+        "name": "CSS (This page)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": ".v-card-text{\n    padding : 0 !important;\n}\n\n\n    \n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 1300,
+        "y": 80,
+        "wires": [
+            []
+        ]
     },
     {
         "id": "a57a165cd0ce511b",
@@ -2096,10 +2737,10 @@
         "ui": "",
         "name": "Streaming",
         "order": 1,
-        "width": "6",
-        "height": "18",
+        "width": "0",
+        "height": "0",
         "head": "",
-        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-top: 75%; /* proportion 4:3 */\n    overflow: hidden;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n    margin: 0;\n  }\n</style>\n",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n        background:white;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2127,8 +2768,7 @@
         "y": 140,
         "wires": [
             [
-                "f514a138d38d3c61",
-                "4f5f150680be40da"
+                "f514a138d38d3c61"
             ]
         ]
     },
@@ -2144,7 +2784,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Home -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Metadata -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Preview\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2156,31 +2796,6 @@
             []
         ]
     },
-    {
-        "id": "8d5eadf60a2fd54b",
-        "type": "switch",
-        "z": "ab58b3fd0e6bcd77",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "6074fc31218f9a74"
-            ]
-        ]
-    },
     {
         "id": "da4fbaab826b0d62",
         "type": "ui-event",
@@ -2191,7 +2806,7 @@
         "y": 40,
         "wires": [
             [
-                "8d5eadf60a2fd54b"
+                "6074fc31218f9a74"
             ]
         ]
     },
@@ -2212,7 +2827,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 580,
+        "x": 320,
         "y": 40,
         "wires": [
             [
@@ -2339,18 +2954,18 @@
         "group": "39cbd2658f16d608",
         "page": "",
         "ui": "",
-        "name": "Settings",
+        "name": "body",
         "order": 1,
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        LED Control\n      </v-card-title> \n      <v-divider></v-divider>\n      <v-card-text>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-title>\n    Focus Control\n  </v-card-title>\n  <v-divider></v-divider>\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Pump Control\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n<v-divider class=\"py-2\"></v-divider>\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 380,
+        "x": 370,
         "y": 140,
         "wires": [
             [
@@ -2410,7 +3025,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Home -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Metadata -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2460,22 +3075,6 @@
             ]
         ]
     },
-    {
-        "id": "4f5f150680be40da",
-        "type": "debug",
-        "z": "ab58b3fd0e6bcd77",
-        "name": "debug 12",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 380,
-        "y": 340,
-        "wires": []
-    },
     {
         "id": "349d0f7644f26a62",
         "type": "ui-template",
@@ -2488,7 +3087,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Metadata\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2512,7 +3111,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Project Metadata Inputs -->\n  <v-row class=\"mt-2\">\n    <!-- Project Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_project\" label=\"Name of the project\" placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Sample ID -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n      v-model.number=\"sample_id\"\n      type=\"number\"\n      label=\"Sample ID\"\n      prefix=\"S_\"\n      placeholder=\"ex : S001\"\n      variant=\"outlined\"\n      density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Operator Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_operator\" label=\"Operator name\" placeholder=\"ex : Manu Prakash\" variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <!-- Sampling Gear Selector -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"sample_gear\" variant=\"outlined\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"sendUpdate\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n\n    </v-col>\n  </v-row>\n\n  <!-- Hint Popup -->\n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", // single topic\n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) {\n          // Supprime le préfixe éventuel avant d'afficher\n          this.sample_id = String(p.sample_id).replace(/^S[_-]?/, \"\");\n        }\n\n        if (p.sample_operator !== undefined)\n          this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send grouped payload for all fields under one topic.\n     */\n    sendUpdate(extra = {}) {\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
+        "format": "<template>\n  <v-row class=\"mt-2\">\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n        v-model=\"sample_project\" \n        label=\"Name of the project\" \n        placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" \n        hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"() => sendUpdate()\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n        v-model.number=\"sample_id\"\n        type=\"number\"\n        label=\"Sample ID\"\n        prefix=\"S_\"\n        placeholder=\"ex : 001\"\n        variant=\"outlined\"\n        density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" \n        @input=\"() => sendUpdate()\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n        v-model=\"sample_operator\" \n        label=\"Operator name\" \n        placeholder=\"ex : Manu Prakash\" \n        variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" \n        @input=\"() => sendUpdate()\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle \n          v-model=\"sample_gear\" \n          variant=\"outlined\" \n          color=\"primary\" \n          mandatory \n          divided \n          shaped \n          class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" \n          @update:model-value=\"() => sendUpdate()\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n    </v-col>\n  </v-row>\n  \n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      \n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", \n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // CHECK IF VALUE CHANGED before assigning to avoid overwriting user input loop\n        if (p.sample_project !== undefined && p.sample_project !== this.sample_project) {\n           this.sample_project = p.sample_project;\n        }\n        \n        if (p.sample_id !== undefined) {\n          const cleanId = String(p.sample_id).replace(/^S[_-]?/, \"\");\n          // Only update if different (converting both to string to be safe)\n          if (String(this.sample_id) !== cleanId) {\n             this.sample_id = cleanId;\n          }\n        }\n\n        if (p.sample_operator !== undefined && p.sample_operator !== this.sample_operator) {\n           this.sample_operator = p.sample_operator;\n        }\n\n        if (p.sample_gear !== undefined && p.sample_gear !== this.sample_gear) {\n           this.sample_gear = p.sample_gear;\n        }\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    sendUpdate(extra) {\n      const safeExtra = (extra && typeof extra === 'object') ? extra : {};\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          ...safeExtra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n  mounted() {\n    // CRITICAL FIX: Do NOT sendUpdate on mount. \n    // This prevents overwriting the database with empty strings on page load.\n  }\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2522,7 +3121,8 @@
         "y": 140,
         "wires": [
             [
-                "13f96cf49ae6d6a6"
+                "13f96cf49ae6d6a6",
+                "1185f4705f9643a3"
             ]
         ]
     },
@@ -2538,7 +3138,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container class=\"pa-4\">\n    <!-- Date & Time -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheel\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomIn\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOut\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n      latitude_D: \"0\",\n      latitude_M: \"0\",\n      latitude_S: \"0\",\n      latDir: \"N\",\n      longitude_D: \"0\",\n      longitude_M: \"0\",\n      longitude_S: \"0\",\n      lonDir: \"E\",\n      ctx: null,\n      mapImage: null,\n      imageLoaded: false,\n      zoom: 1,\n      offsetX: 0,\n      offsetY: 0,\n      sample_gear: \"\", // ajouté\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) {\n          this.sample_gear = p.sample_gear;\n\n          // ✅ Si \"Lab culture\" ou \"Demo / Test\", remplir automatiquement date/heure et GPS\n          if ([\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear)) {\n            const now = new Date();\n            this.object_date = now.toISOString().split(\"T\")[0];\n            this.object_time = now.toISOString().split(\"T\")[1].slice(0, 5);\n            this.object_lat = 0;\n            this.object_lon = 0;\n            this.updateFromDecimal(\"lat\");\n            this.updateFromDecimal(\"lon\");\n            this.sendUpdate(\"object_datetime\", {\n              object_lat: 0,\n              object_lon: 0,\n            });\n          }\n        }\n\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\"\n          const t = p.object_time.toString();\n          if (t.length === 4) this.object_time = `${t.slice(0,2)}:${t.slice(2,4)}`;\n          else this.object_time = t; // fallback si format déjà HH:MM\n        }\n\n        if (p.object_lat !== undefined)\n          this.object_lat = parseFloat(p.object_lat.toFixed(6));\n        if (p.object_lon !== undefined)\n          this.object_lon = parseFloat(p.object_lon.toFixed(6));\n        if (p.object_lat !== undefined || p.object_lon !== undefined) {\n          this.updateFromDecimal(\"lat\");\n          this.updateFromDecimal(\"lon\");\n        }\n        this.centerOnMarker();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas\");\n    this.ctx = canvas.getContext(\"2d\");\n    this.mapImage = new Image();\n    this.mapImage.src = \"/world-map.svg\";\n    this.mapImage.onload = () => {\n      this.imageLoaded = true;\n      this.centerOnMarker();\n    };\n  },\n  methods: {\n    openHint(type) {\n      if (type === \"datetime\") {\n        this.hintTitle = \"Date and Time (UTC)\";\n      this.hintText =\n        \"Enter the observation timestamp in Coordinated Universal Time (UTC). \" +\n        \"Use YYYY-MM-DD for date and HH:MM (24-hour). The saved format will be HHMM (without colon).\";\n\n      } else if (type === \"latitude\") {\n        this.hintTitle = \"Latitude\";\n        this.hintText =\n          \"Latitude defines how far north or south you are from the equator.\";\n      } else if (type === \"longitude\") {\n        this.hintTitle = \"Longitude\";\n        this.hintText =\n          \"Longitude defines how far east or west you are from the Prime Meridian.\";\n      }\n      this.hintDialog = true;\n    },\n    sendUpdate(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\"\n      const formattedTime = this.object_time ? this.object_time.replace(\":\", \"\") : \"\";\n      this.send({\n        topic,\n        payload: {\n          object_date: this.object_date,\n          object_time: formattedTime,\n          ...extra,\n        },\n      });\n    },\n    syncDecimal() {\n      this.object_lon = parseFloat(\n        this.toDecimal(this.longitude_D, this.longitude_M, this.longitude_S, this.lonDir).toFixed(6)\n      );\n      this.object_lat = parseFloat(\n        this.toDecimal(this.latitude_D, this.latitude_M, this.latitude_S, this.latDir).toFixed(6)\n      );\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    updateFromDecimal(which) {\n      if (which === \"lon\") {\n        this.object_lon = parseFloat(this.object_lon.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon, \"lon\");\n        this.longitude_D = D;\n        this.longitude_M = M;\n        this.longitude_S = S;\n        this.lonDir = dir;\n      } else {\n        this.object_lat = parseFloat(this.object_lat.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat, \"lat\");\n        this.latitude_D = D;\n        this.latitude_M = M;\n        this.latitude_S = S;\n        this.latDir = dir;\n      }\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheel(e) {\n      if (e.deltaY < 0) this.zoomIn();\n      else this.zoomOut();\n    },\n    zoomIn() {\n      this.zoom = Math.min(this.zoom * 1.25, 10);\n      this.centerOnMarker();\n    },\n    zoomOut() {\n      this.zoom = Math.max(this.zoom / 1.25, 0.5);\n      this.centerOnMarker();\n    },\n    centerOnMarker() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX = w / 2 - x;\n      this.offsetY = h / 2 - y;\n      this.drawPoint();\n    },\n    drawMap(w, h) {\n      const ctx = this.ctx;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      if (this.imageLoaded) ctx.drawImage(this.mapImage, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPoint() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx;\n      if (!ctx) return;\n      this.drawMap(w, h);\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      ctx.fillStyle = \"blue\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom, y - 10 / this.zoom);\n      ctx.restore();\n    },\n  },\n};\n</script>\n",
+        "format": "<template>\n  <v-container>\n    <!-- Date & Time -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheel\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomIn\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOut\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n      latitude_D: \"0\",\n      latitude_M: \"0\",\n      latitude_S: \"0\",\n      latDir: \"N\",\n      longitude_D: \"0\",\n      longitude_M: \"0\",\n      longitude_S: \"0\",\n      lonDir: \"E\",\n      ctx: null,\n      mapImage: null,\n      imageLoaded: false,\n      zoom: 1,\n      offsetX: 0,\n      offsetY: 0,\n      sample_gear: \"\", // ajouté\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) {\n          this.sample_gear = p.sample_gear;\n\n          // ✅ Si \"Lab culture\" ou \"Demo / Test\", remplir automatiquement date/heure et GPS\n          if ([\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear)) {\n            const now = new Date();\n            this.object_date = now.toISOString().split(\"T\")[0];\n            this.object_time = now.toISOString().split(\"T\")[1].slice(0, 5);\n            this.object_lat = 0;\n            this.object_lon = 0;\n            this.updateFromDecimal(\"lat\");\n            this.updateFromDecimal(\"lon\");\n            this.sendUpdate(\"object_datetime\", {\n              object_lat: 0,\n              object_lon: 0,\n            });\n          }\n        }\n\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\"\n          const t = p.object_time.toString();\n          if (t.length === 4) this.object_time = `${t.slice(0,2)}:${t.slice(2,4)}`;\n          else this.object_time = t; // fallback si format déjà HH:MM\n        }\n\n        if (p.object_lat !== undefined)\n          this.object_lat = parseFloat(p.object_lat.toFixed(6));\n        if (p.object_lon !== undefined)\n          this.object_lon = parseFloat(p.object_lon.toFixed(6));\n        if (p.object_lat !== undefined || p.object_lon !== undefined) {\n          this.updateFromDecimal(\"lat\");\n          this.updateFromDecimal(\"lon\");\n        }\n        this.centerOnMarker();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas\");\n    this.ctx = canvas.getContext(\"2d\");\n    this.mapImage = new Image();\n    this.mapImage.src = \"/world-map.svg\";\n    this.mapImage.onload = () => {\n      this.imageLoaded = true;\n      this.centerOnMarker();\n    };\n  },\n  methods: {\n    openHint(type) {\n      if (type === \"datetime\") {\n        this.hintTitle = \"Date and Time (UTC)\";\n      this.hintText =\n        \"Enter the observation timestamp in Coordinated Universal Time (UTC). \" +\n        \"Use YYYY-MM-DD for date and HH:MM (24-hour). The saved format will be HHMM (without colon).\";\n\n      } else if (type === \"latitude\") {\n        this.hintTitle = \"Latitude\";\n        this.hintText =\n          \"Latitude defines how far north or south you are from the equator.\";\n      } else if (type === \"longitude\") {\n        this.hintTitle = \"Longitude\";\n        this.hintText =\n          \"Longitude defines how far east or west you are from the Prime Meridian.\";\n      }\n      this.hintDialog = true;\n    },\n    sendUpdate(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\"\n      const formattedTime = this.object_time ? this.object_time.replace(\":\", \"\") : \"\";\n      this.send({\n        topic,\n        payload: {\n          object_date: this.object_date,\n          object_time: formattedTime,\n          ...extra,\n        },\n      });\n    },\n    syncDecimal() {\n      this.object_lon = parseFloat(\n        this.toDecimal(this.longitude_D, this.longitude_M, this.longitude_S, this.lonDir).toFixed(6)\n      );\n      this.object_lat = parseFloat(\n        this.toDecimal(this.latitude_D, this.latitude_M, this.latitude_S, this.latDir).toFixed(6)\n      );\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    updateFromDecimal(which) {\n      if (which === \"lon\") {\n        this.object_lon = parseFloat(this.object_lon.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon, \"lon\");\n        this.longitude_D = D;\n        this.longitude_M = M;\n        this.longitude_S = S;\n        this.lonDir = dir;\n      } else {\n        this.object_lat = parseFloat(this.object_lat.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat, \"lat\");\n        this.latitude_D = D;\n        this.latitude_M = M;\n        this.latitude_S = S;\n        this.latDir = dir;\n      }\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheel(e) {\n      if (e.deltaY < 0) this.zoomIn();\n      else this.zoomOut();\n    },\n    zoomIn() {\n      this.zoom = Math.min(this.zoom * 1.25, 10);\n      this.centerOnMarker();\n    },\n    zoomOut() {\n      this.zoom = Math.max(this.zoom / 1.25, 0.5);\n      this.centerOnMarker();\n    },\n    centerOnMarker() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX = w / 2 - x;\n      this.offsetY = h / 2 - y;\n      this.drawPoint();\n    },\n    drawMap(w, h) {\n      const ctx = this.ctx;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      if (this.imageLoaded) ctx.drawImage(this.mapImage, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPoint() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx;\n      if (!ctx) return;\n      this.drawMap(w, h);\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      ctx.fillStyle = \"blue\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom, y - 10 / this.zoom);\n      ctx.restore();\n    },\n  },\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2564,7 +3164,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Le conteneur principal devient désactivé si sample_gear n'est pas \"Horizontal Net\" -->\n  <v-container\n    class=\"pa-4\"\n    :disabled=\"isDisabled\"\n    :style=\"{\n      pointerEvents: isDisabled ? 'none' : 'auto',\n      opacity: isDisabled ? 0.5 : 1,\n    }\"\n  >\n    <!-- Date & Time (End) -->\n    <v-row>\n      <v-col cols=\"12\"><strong>End Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date_end\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time_end\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir_end\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat_end\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir_end\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon_end\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map (End) -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas_end\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheelEnd\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOutEnd\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialogEnd\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitleEnd }}</v-card-title>\n        <v-card-text>{{ hintTextEnd }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialogEnd = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n      latitude_D_end: \"0\",\n      latitude_M_end: \"0\",\n      latitude_S_end: \"0\",\n      latDir_end: \"N\",\n      longitude_D_end: \"0\",\n      longitude_M_end: \"0\",\n      longitude_S_end: \"0\",\n      lonDir_end: \"E\",\n      ctx_end: null,\n      mapImage_end: null,\n      imageLoaded_end: false,\n      zoom_end: 1,\n      offsetX_end: 0,\n      offsetY_end: 0,\n      sample_gear: \"\", // <-- ajouté ici\n      // Popup fields\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactive tout le formulaire si sample_gear n’est pas \"Horizontal Net\"\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- surveille la valeur reçue\n        if (p.object_date_end !== undefined) this.object_date_end = p.object_date_end;\n        if (p.object_time_end !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\" pour affichage dans le champ <input type=\"time\">\n          const t = p.object_time_end.toString();\n          if (t.length === 4) this.object_time_end = `${t.slice(0, 2)}:${t.slice(2, 4)}`;\n          else this.object_time_end = t; // si déjà au format HH:MM\n        }\n\n        if (p.object_lat_end !== undefined)\n          this.object_lat_end = parseFloat(p.object_lat_end.toFixed(6));\n        if (p.object_lon_end !== undefined)\n          this.object_lon_end = parseFloat(p.object_lon_end.toFixed(6));\n        if (p.object_lat_end !== undefined || p.object_lon_end !== undefined) {\n          this.updateFromDecimalEnd(\"lat\");\n          this.updateFromDecimalEnd(\"lon\");\n        }\n        this.centerOnMarkerEnd();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas_end\");\n    this.ctx_end = canvas.getContext(\"2d\");\n    this.mapImage_end = new Image();\n    this.mapImage_end.src = \"/world-map.svg\";\n    this.mapImage_end.onload = () => {\n      this.imageLoaded_end = true;\n      this.centerOnMarkerEnd();\n    };\n  },\n  methods: {\n    /** Info Popup **/\n    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd =\n          \"Enter the end time of your observation in Coordinated Universal Time (UTC). \" +\n          \"Use YYYY-MM-DD for date and HH:MM (24-hour) for time.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd =\n          \"Latitude specifies how far north or south your end location is from the equator. \" +\n          \"Use degrees (°), minutes (′), and seconds (″) with N/S direction, or directly enter a decimal between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd =\n          \"Longitude specifies how far east or west your end location is from the Prime Meridian. \" +\n          \"You can enter DMS (° ′ ″) with E/W direction or a decimal between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n\n    sendUpdateEnd(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\" avant sauvegarde\n      const formattedTimeEnd = this.object_time_end\n        ? this.object_time_end.replace(\":\", \"\")\n        : \"\";      \n      this.send({\n        topic,\n        payload: {\n          object_date_end: this.object_date_end,\n          object_time_end: formattedTimeEnd,\n          ...extra,\n        },\n      });\n    },\n    syncDecimalEnd() {\n      this.object_lon_end = parseFloat(\n        this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6)\n      );\n      this.object_lat_end = parseFloat(\n        this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6)\n      );\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    updateFromDecimalEnd(which) {\n      if (which === \"lon\") {\n        this.object_lon_end = parseFloat(this.object_lon_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon_end, \"lon\");\n        this.longitude_D_end = D;\n        this.longitude_M_end = M;\n        this.longitude_S_end = S;\n        this.lonDir_end = dir;\n      } else {\n        this.object_lat_end = parseFloat(this.object_lat_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat_end, \"lat\");\n        this.latitude_D_end = D;\n        this.latitude_M_end = M;\n        this.latitude_S_end = S;\n        this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) {\n      if (e.deltaY < 0) this.zoomInEnd();\n      else this.zoomOutEnd();\n    },\n    zoomInEnd() {\n      this.zoom_end = Math.min(this.zoom_end * 1.25, 10);\n      this.centerOnMarkerEnd();\n    },\n    zoomOutEnd() {\n      this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5);\n      this.centerOnMarkerEnd();\n    },\n    centerOnMarkerEnd() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX_end = w / 2 - x;\n      this.offsetY_end = h / 2 - y;\n      this.drawPointEnd();\n    },\n    drawMapEnd(w, h) {\n      const ctx = this.ctx_end;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <v-container :disabled=\"isDisabled\" :style=\"{\n      pointerEvents: isDisabled ? 'none' : 'auto',\n      opacity: isDisabled ? 0.5 : 1,\n    }\">\n    <v-row>\n      <v-col cols=\"12\"><strong>End Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field v-model=\"object_date_end\" label=\"Date (UTC)\" variant=\"outlined\" type=\"date\" hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\" />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field v-model=\"object_time_end\" label=\"Time (UTC)\" variant=\"outlined\" type=\"time\" hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"latitude_D_end\" label=\"°\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"90\"\n          @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"latitude_M_end\" label=\"′\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"latitude_S_end\" label=\"″\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          step=\"0.001\" @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select v-model=\"latDir_end\" :items=\"['N','S']\" label=\"Dir\" variant=\"outlined\" hide-details\n          @update:model-value=\"syncDecimalEnd\" />\n      </v-col>\n\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field v-model.number=\"object_lat_end\" label=\"Latitude (decimal)\" variant=\"outlined\" hide-details\n          type=\"number\" min=\"-90\" max=\"90\" step=\"0.000001\" @input=\"updateFromDecimalEnd('lat')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"longitude_D_end\" label=\"°\" variant=\"outlined\" hide-details type=\"number\" min=\"0\"\n          max=\"180\" @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"longitude_M_end\" label=\"′\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"longitude_S_end\" label=\"″\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          step=\"0.001\" @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select v-model=\"lonDir_end\" :items=\"['E','W']\" label=\"Dir\" variant=\"outlined\" hide-details\n          @update:model-value=\"syncDecimalEnd\" />\n      </v-col>\n\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field v-model.number=\"object_lon_end\" label=\"Longitude (decimal)\" variant=\"outlined\" hide-details\n          type=\"number\" min=\"-180\" max=\"180\" step=\"0.000001\" @input=\"updateFromDecimalEnd('lon')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas id=\"mapCanvas_end\" width=\"800\" height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheelEnd\"></canvas>\n\n        <div style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\">\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOutEnd\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <v-dialog v-model=\"hintDialogEnd\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitleEnd }}</v-card-title>\n        <v-card-text>{{ hintTextEnd }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialogEnd = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      // START Variables (nécessaires pour la copie)\n      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n\n      // END Variables\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n\n      // DMS Fields\n      latitude_D_end: \"0\",\n      latitude_M_end: \"0\",\n      latitude_S_end: \"0\",\n      latDir_end: \"N\",\n      longitude_D_end: \"0\",\n      longitude_M_end: \"0\",\n      longitude_S_end: \"0\",\n      lonDir_end: \"E\",\n\n      // Map & Canvas\n      ctx_end: null,\n      mapImage_end: null,\n      imageLoaded_end: false,\n      zoom_end: 1,\n      offsetX_end: 0,\n      offsetY_end: 0,\n\n      // Logic Control\n      sample_gear: \"\",\n\n      // Popup fields\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // 1. Récupération des données START (si présentes)\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\n          // Formatage HHMM -> HH:MM pour stockage interne\n          let t = p.object_time.toString();\n          if (t.length === 4) t = `${t.slice(0, 2)}:${t.slice(2, 4)}`;\n          this.object_time = t;\n        }\n        if (p.object_lat !== undefined) this.object_lat = parseFloat(p.object_lat);\n        if (p.object_lon !== undefined) this.object_lon = parseFloat(p.object_lon);\n\n        // 2. Mise à jour du type d'équipement\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n\n        // 3. Récupération des données END (si le message force déjà des valeurs End)\n        // Note: Cela sera écrasé par la logique ci-dessous si Horizontal Net, ou vidé sinon.\n        // Si vous voulez que la logique prime, on laisse les valeurs msg s'appliquer uniquement si nécessaire.\n        // Pour l'instant, appliquons la logique demandée strictement.\n\n        // --- LOGIQUE DEMANDÉE ---\n        if (this.sample_gear === \"Horizontal Net\") {\n          // Remplissage avec Starting Point\n          this.object_date_end = this.object_date;\n          this.object_time_end = this.object_time;\n          this.object_lat_end = this.object_lat;\n          this.object_lon_end = this.object_lon;\n        } else {\n          // Vidage des champs\n          this.object_date_end = \"\";\n          this.object_time_end = \"\";\n          this.object_lat_end = 0;\n          this.object_lon_end = 0;\n        }\n        // ------------------------\n\n        // 4. Conversion Decimal -> DMS pour affichage (peuple latDir_end, etc.)\n        this.updateFromDecimalEnd(\"lat\");\n        this.updateFromDecimalEnd(\"lon\");\n\n        // 5. Centrage carte\n        this.centerOnMarkerEnd();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas_end\");\n    this.ctx_end = canvas.getContext(\"2d\");\n    this.mapImage_end = new Image();\n    this.mapImage_end.src = \"/world-map.svg\";\n    this.mapImage_end.onload = () => {\n      this.imageLoaded_end = true;\n      this.centerOnMarkerEnd();\n    };\n  },\n  methods: {\n    /** Info Popup **/\n    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd =\n          \"Enter the end time of your observation in Coordinated Universal Time (UTC). \" +\n          \"Use YYYY-MM-DD for date and HH:MM (24-hour) for time.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd =\n          \"Latitude specifies how far north or south your end location is from the equator. \" +\n          \"Use degrees (°), minutes (′), and seconds (″) with N/S direction, or directly enter a decimal between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd =\n          \"Longitude specifies how far east or west your end location is from the Prime Meridian. \" +\n          \"You can enter DMS (° ′ ″) with E/W direction or a decimal between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n\n    sendUpdateEnd(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\" avant sauvegarde\n      const formattedTimeEnd = this.object_time_end\n        ? this.object_time_end.replace(\":\", \"\")\n        : \"\";      \n      this.send({\n        topic,\n        payload: {\n          object_date_end: this.object_date_end,\n          object_time_end: formattedTimeEnd,\n          ...extra,\n        },\n      });\n    },\n    syncDecimalEnd() {\n      this.object_lon_end = parseFloat(\n        this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6)\n      );\n      this.object_lat_end = parseFloat(\n        this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6)\n      );\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    updateFromDecimalEnd(which) {\n      if (which === \"lon\") {\n        this.object_lon_end = parseFloat((this.object_lon_end || 0).toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon_end, \"lon\");\n        this.longitude_D_end = D;\n        this.longitude_M_end = M;\n        this.longitude_S_end = S;\n        this.lonDir_end = dir;\n      } else {\n        this.object_lat_end = parseFloat((this.object_lat_end || 0).toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat_end, \"lat\");\n        this.latitude_D_end = D;\n        this.latitude_M_end = M;\n        this.latitude_S_end = S;\n        this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n      // On n'envoie pas de mise à jour ici pour éviter des boucles infinies si c'est déclenché par le watcher\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) {\n      if (e.deltaY < 0) this.zoomInEnd();\n      else this.zoomOutEnd();\n    },\n    zoomInEnd() {\n      this.zoom_end = Math.min(this.zoom_end * 1.25, 10);\n      this.centerOnMarkerEnd();\n    },\n    zoomOutEnd() {\n      this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5);\n      this.centerOnMarkerEnd();\n    },\n    centerOnMarkerEnd() {\n      const w = 800;\n      const h = 500;\n      // Protection contre NaN si lat/lon sont vides\n      const lat = this.object_lat_end || 0;\n      const lon = this.object_lon_end || 0;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX_end = w / 2 - x;\n      this.offsetY_end = h / 2 - y;\n      this.drawPointEnd();\n    },\n    drawMapEnd(w, h) {\n      const ctx = this.ctx_end;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end || 0;\n      const lon = this.object_lon_end || 0;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n\n    .v-text-field input,\n    .v-select input {\n      font-size: 1.2rem !important;\n    }\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2590,7 +3190,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Conteneur principal désactivé si sample_gear n'est ni Horizontal Net ni Vertical Net -->\n    <v-container\n      fluid\n      class=\"pa-2\"\n      :disabled=\"isDisabled\"\n      :style=\"{\n        pointerEvents: isDisabled ? 'none' : 'auto',\n        opacity: isDisabled ? 0.5 : 1,\n        width: '100%',\n      }\"\n    >\n\n    <v-row class=\"mt-2\">\n      <!-- Net Mouth Diameter -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Mouth Opening Diameter\"\n          v-model.number=\"sample_net_mouth_diameter\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mouth_diameter')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Net Length -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Length of the Net\"\n          v-model.number=\"sample_net_length\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('net_length')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Net Mesh Size\"\n          v-model.number=\"sample_net_mesh_size\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Collector Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Volume of the Collector\"\n          v-model.number=\"sample_collected_volume\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"mL\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('collector_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_net_mouth_diameter: \"\",\n      sample_net_length: \"\",\n      sample_net_mesh_size: \"\",\n      sample_collected_volume: \"\",\n      sample_gear: \"\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactiver si sample_gear n'est pas \"Horizontal Net\" ou \"Vertical Net\"\n      return ![\"Horizontal Net\", \"Vertical Net\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- récupère la valeur reçue\n        if (p.sample_net_mouth_diameter !== undefined)\n          this.sample_net_mouth_diameter = Number(p.sample_net_mouth_diameter);\n        if (p.sample_net_length !== undefined)\n          this.sample_net_length = Number(p.sample_net_length);\n        if (p.sample_net_mesh_size !== undefined)\n          this.sample_net_mesh_size = Number(p.sample_net_mesh_size);\n        if (p.sample_collected_volume !== undefined)\n          this.sample_collected_volume = Number(p.sample_collected_volume);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send updates (ensures all values are numbers)\n     */\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_net_mouth_diameter: Number(this.sample_net_mouth_diameter) || 0,\n          sample_net_length: Number(this.sample_net_length) || 0,\n          sample_net_mesh_size: Number(this.sample_net_mesh_size) || 0,\n          sample_collected_volume: Number(this.sample_collected_volume) || 0,\n          ...extra,\n        },\n      });\n    },\n\n    /**\n     * Info popup — consistent with previous templates\n     */\n    openHint(type) {\n      if (type === \"mouth_diameter\") {\n        this.hintTitle = \"Mouth Opening Diameter\";\n        this.hintText =\n          \"Enter the diameter of the net’s mouth — the circular opening where water enters the net — measured in centimeters (cm). \" +\n          \"Typical plankton nets range from 20–60 cm in diameter. Larger diameters capture more water volume.\";\n      } else if (type === \"net_length\") {\n        this.hintTitle = \"Length of the Net\";\n        this.hintText =\n          \"Specify the total length of the net from the mouth opening to the collector. \" +\n          \"Measure in centimeters (cm). This helps calculate the water volume filtered and affects flow resistance.\";\n      } else if (type === \"mesh_size\") {\n        this.hintTitle = \"Net Mesh Size\";\n        this.hintText =\n          \"Enter the mesh size of the net in micrometers (μm). \" +\n          \"This defines the smallest particles or plankton that can pass through. For example, a 20 μm mesh captures microplankton but not bacteria.\";\n      } else if (type === \"collector_volume\") {\n        this.hintTitle = \"Volume of the Collector\";\n        this.hintText =\n          \"Specify the amount of sample collected after towing or pumping, measured in milliliters (mL). \" +\n          \"It should correspond to the water filtered and ensures proper concentration calculations.\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <!-- Conteneur principal désactivé si sample_gear n'est ni Horizontal Net ni Vertical Net -->\n    <v-container\n      fluid\n      :disabled=\"isDisabled\"\n      :style=\"{\n        pointerEvents: isDisabled ? 'none' : 'auto',\n        opacity: isDisabled ? 0.5 : 1,\n        width: '100%',\n      }\"\n    >\n\n    <v-row class=\"mt-2\">\n      <!-- Net Mouth Diameter -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Mouth Opening Diameter\"\n          v-model.number=\"sample_net_mouth_diameter\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mouth_diameter')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Net Length -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Length of the Net\"\n          v-model.number=\"sample_net_length\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('net_length')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Net Mesh Size\"\n          v-model.number=\"sample_net_mesh_size\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Collector Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Volume of the Collector\"\n          v-model.number=\"sample_collected_volume\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"mL\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('collector_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_net_mouth_diameter: \"\",\n      sample_net_length: \"\",\n      sample_net_mesh_size: \"\",\n      sample_collected_volume: \"\",\n      sample_gear: \"\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactiver si sample_gear n'est pas \"Horizontal Net\" ou \"Vertical Net\"\n      return ![\"Horizontal Net\", \"Vertical Net\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- récupère la valeur reçue\n        if (p.sample_net_mouth_diameter !== undefined)\n          this.sample_net_mouth_diameter = Number(p.sample_net_mouth_diameter);\n        if (p.sample_net_length !== undefined)\n          this.sample_net_length = Number(p.sample_net_length);\n        if (p.sample_net_mesh_size !== undefined)\n          this.sample_net_mesh_size = Number(p.sample_net_mesh_size);\n        if (p.sample_collected_volume !== undefined)\n          this.sample_collected_volume = Number(p.sample_collected_volume);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send updates (ensures all values are numbers)\n     */\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_net_mouth_diameter: Number(this.sample_net_mouth_diameter) || 0,\n          sample_net_length: Number(this.sample_net_length) || 0,\n          sample_net_mesh_size: Number(this.sample_net_mesh_size) || 0,\n          sample_collected_volume: Number(this.sample_collected_volume) || 0,\n          ...extra,\n        },\n      });\n    },\n\n    /**\n     * Info popup — consistent with previous templates\n     */\n    openHint(type) {\n      if (type === \"mouth_diameter\") {\n        this.hintTitle = \"Mouth Opening Diameter\";\n        this.hintText =\n          \"Enter the diameter of the net’s mouth — the circular opening where water enters the net — measured in centimeters (cm). \" +\n          \"Typical plankton nets range from 20–60 cm in diameter. Larger diameters capture more water volume.\";\n      } else if (type === \"net_length\") {\n        this.hintTitle = \"Length of the Net\";\n        this.hintText =\n          \"Specify the total length of the net from the mouth opening to the collector. \" +\n          \"Measure in centimeters (cm). This helps calculate the water volume filtered and affects flow resistance.\";\n      } else if (type === \"mesh_size\") {\n        this.hintTitle = \"Net Mesh Size\";\n        this.hintText =\n          \"Enter the mesh size of the net in micrometers (μm). \" +\n          \"This defines the smallest particles or plankton that can pass through. For example, a 20 μm mesh captures microplankton but not bacteria.\";\n      } else if (type === \"collector_volume\") {\n        this.hintTitle = \"Volume of the Collector\";\n        this.hintText =\n          \"Specify the amount of sample collected after towing or pumping, measured in milliliters (mL). \" +\n          \"It should correspond to the water filtered and ensures proper concentration calculations.\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2616,7 +3216,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <v-row class=\"mt-2\">\n      <!-- Filtered Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Filtered Volume\"\n          v-model.number=\"sample_filtered_volume\"\n          :min=\"0\"\n          :max=\"100000\"\n          :step=\"1\"\n          suffix=\"L\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('filtered_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Concentration Factor -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Concentration Factor\"\n          v-model.number=\"sample_concentration_factor\"\n          :min=\"0\"\n          :max=\"100\"\n          :step=\"0.01\"\n          suffix=\"×\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('concentration_factor')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sieve Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Sieve Mesh Size\"\n          v-model.number=\"sample_sieve_mesh_size\"\n          :min=\"1\"\n          :max=\"1000\"\n          :step=\"10\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sieve_mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sample Depth -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Depth of the Sample\"\n          v-model.number=\"sample_depth\"\n          :min=\"0\"\n          :max=\"10935\"\n          :step=\"1\"\n          suffix=\"m\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_depth')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Sample Comment (Toujours actif) -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          label=\"Sample Comment\"\n          v-model=\"sample_comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_comment')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_filtered_volume: \"\",\n      sample_concentration_factor: \"\",\n      sample_sieve_mesh_size: \"\",\n      sample_depth: \"\",\n      sample_comment: \"\",\n      sample_gear: \"\", // <-- ajout\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    // ✅ Disable fields if Lab culture or Demo / Test\n    isDisabled() {\n      return [\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        if (p.sample_filtered_volume !== undefined)\n          this.sample_filtered_volume = Number(p.sample_filtered_volume);\n        if (p.sample_concentration_factor !== undefined)\n          this.sample_concentration_factor = Number(p.sample_concentration_factor);\n        if (p.sample_sieve_mesh_size !== undefined)\n          this.sample_sieve_mesh_size = Number(p.sample_sieve_mesh_size);\n        if (p.sample_depth !== undefined)\n          this.sample_depth = Number(p.sample_depth);\n        if (p.sample_comment !== undefined)\n          this.sample_comment = String(p.sample_comment);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_filtered_volume: Number(this.sample_filtered_volume) || 0,\n          sample_concentration_factor: Number(this.sample_concentration_factor) || 0,\n          sample_sieve_mesh_size: Number(this.sample_sieve_mesh_size) || 0,\n          sample_depth: Number(this.sample_depth) || 0,\n          sample_comment: this.sample_comment || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(type) {\n      if (type === \"filtered_volume\") {\n        this.hintTitle = \"Filtered Volume\";\n        this.hintText =\n          \"Enter the total volume of water that passed through the net or filter during sampling, measured in liters (L).\";\n      } else if (type === \"concentration_factor\") {\n        this.hintTitle = \"Concentration Factor\";\n        this.hintText =\n          \"Specify the ratio by which the filtered water volume was concentrated into the final collected sample.\";\n      } else if (type === \"sieve_mesh_size\") {\n        this.hintTitle = \"Sieve Mesh Size\";\n        this.hintText =\n          \"Indicate the mesh size of the sieve used to separate particles or organisms, in micrometers (μm).\";\n      } else if (type === \"sample_depth\") {\n        this.hintTitle = \"Depth of the Sample\";\n        this.hintText =\n          \"Specify the depth (in meters) at which the sample was collected.\";\n      } else if (type === \"sample_comment\") {\n        this.hintTitle = \"Sample Comment\";\n        this.hintText =\n          \"Add any notes or context about the sample (e.g., weather, color, debris, issues).\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-textarea textarea {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <v-row class=\"mt-2\">\n      <!-- Filtered Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Filtered Volume\"\n          v-model.number=\"sample_filtered_volume\"\n          :min=\"0\"\n          :max=\"100000\"\n          :step=\"1\"\n          suffix=\"L\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('filtered_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Concentration Factor -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Concentration Factor\"\n          v-model.number=\"sample_concentration_factor\"\n          :min=\"0\"\n          :max=\"100\"\n          :step=\"0.01\"\n          suffix=\"×\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('concentration_factor')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sieve Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Sieve Mesh Size\"\n          v-model.number=\"sample_sieve_mesh_size\"\n          :min=\"1\"\n          :max=\"1000\"\n          :step=\"10\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sieve_mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sample Depth -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Depth of the Sample\"\n          v-model.number=\"sample_depth\"\n          :min=\"0\"\n          :max=\"10935\"\n          :step=\"1\"\n          suffix=\"m\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_depth')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Sample Comment (Toujours actif) -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          label=\"Sample Comment\"\n          v-model=\"sample_comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_comment')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_filtered_volume: \"\",\n      sample_concentration_factor: \"\",\n      sample_sieve_mesh_size: \"\",\n      sample_depth: \"\",\n      sample_comment: \"\",\n      sample_gear: \"\", // <-- ajout\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    // ✅ Disable fields if Lab culture or Demo / Test\n    isDisabled() {\n      return [\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        if (p.sample_filtered_volume !== undefined)\n          this.sample_filtered_volume = Number(p.sample_filtered_volume);\n        if (p.sample_concentration_factor !== undefined)\n          this.sample_concentration_factor = Number(p.sample_concentration_factor);\n        if (p.sample_sieve_mesh_size !== undefined)\n          this.sample_sieve_mesh_size = Number(p.sample_sieve_mesh_size);\n        if (p.sample_depth !== undefined)\n          this.sample_depth = Number(p.sample_depth);\n        if (p.sample_comment !== undefined)\n          this.sample_comment = String(p.sample_comment);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_filtered_volume: Number(this.sample_filtered_volume) || 0,\n          sample_concentration_factor: Number(this.sample_concentration_factor) || 0,\n          sample_sieve_mesh_size: Number(this.sample_sieve_mesh_size) || 0,\n          sample_depth: Number(this.sample_depth) || 0,\n          sample_comment: this.sample_comment || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(type) {\n      if (type === \"filtered_volume\") {\n        this.hintTitle = \"Filtered Volume\";\n        this.hintText =\n          \"Enter the total volume of water that passed through the net or filter during sampling, measured in liters (L).\";\n      } else if (type === \"concentration_factor\") {\n        this.hintTitle = \"Concentration Factor\";\n        this.hintText =\n          \"Specify the ratio by which the filtered water volume was concentrated into the final collected sample.\";\n      } else if (type === \"sieve_mesh_size\") {\n        this.hintTitle = \"Sieve Mesh Size\";\n        this.hintText =\n          \"Indicate the mesh size of the sieve used to separate particles or organisms, in micrometers (μm).\";\n      } else if (type === \"sample_depth\") {\n        this.hintTitle = \"Depth of the Sample\";\n        this.hintText =\n          \"Specify the depth (in meters) at which the sample was collected.\";\n      } else if (type === \"sample_comment\") {\n        this.hintTitle = \"Sample Comment\";\n        this.hintText =\n          \"Add any notes or context about the sample (e.g., weather, color, debris, issues).\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-textarea textarea {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2642,7 +3242,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2674,7 +3274,8 @@
                 "96550b272e3da513",
                 "1c90e219a749e53e",
                 "09b551fa202d8029",
-                "93a68ffbce74d70d"
+                "93a68ffbce74d70d",
+                "c04c3055a84e7597"
             ]
         ]
     },
@@ -2682,34 +3283,9 @@
         "id": "0931106adf64b43d",
         "type": "ui-event",
         "z": "190b0c9aa75e8843",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 80,
-        "y": 40,
-        "wires": [
-            [
-                "a68e52177173f690"
-            ]
-        ]
-    },
-    {
-        "id": "a68e52177173f690",
-        "type": "switch",
-        "z": "190b0c9aa75e8843",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
         "y": 40,
         "wires": [
             [
@@ -2734,7 +3310,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 580,
+        "x": 320,
         "y": 40,
         "wires": [
             [
@@ -2787,7 +3363,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 760,
+        "x": 960,
         "y": 240,
         "wires": [
             []
@@ -2805,7 +3381,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 770,
+        "x": 970,
         "y": 200,
         "wires": [
             []
@@ -2856,7 +3432,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 780,
+        "x": 980,
         "y": 340,
         "wires": [
             []
@@ -2867,14 +3443,14 @@
         "type": "function",
         "z": "190b0c9aa75e8843",
         "name": "set object_datetime_end",
-        "func": "if (msg.topic) {\n    global.set(\"object_date_end\", msg.payload.object_date_end);\n    global.set(\"object_time_end\", msg.payload.object_time_end);\n}\nreturn msg;\n",
+        "func": "if (msg.topic) {\n    global.set(\"object_date_end\", msg.payload.object_date_end);\n    global.set(\"object_time_end\", msg.payload.object_time_end);\n}\n\nif (msg.payload.sample_gear !== \"Horizontal Net\") {\n    global.set(\"object_date_end\", undefined);\n    global.set(\"object_time_end\", undefined);\n}\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 990,
         "y": 300,
         "wires": [
             []
@@ -2917,7 +3493,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 990,
         "y": 400,
         "wires": [
             []
@@ -2960,7 +3536,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 800,
+        "x": 1000,
         "y": 460,
         "wires": [
             []
@@ -3007,12 +3583,102 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 990,
         "y": 140,
         "wires": [
             []
         ]
     },
+    {
+        "id": "f495c897b992cb33",
+        "type": "debug",
+        "z": "190b0c9aa75e8843",
+        "name": "debug 3",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 900,
+        "y": 760,
+        "wires": []
+    },
+    {
+        "id": "c04c3055a84e7597",
+        "type": "debug",
+        "z": "190b0c9aa75e8843",
+        "name": "debug 4",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 140,
+        "y": 280,
+        "wires": []
+    },
+    {
+        "id": "1185f4705f9643a3",
+        "type": "switch",
+        "z": "190b0c9aa75e8843",
+        "name": "",
+        "property": "payload.sample_gear",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "Horizontal Net",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Vertical Net",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Niskin bottle",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Lab culture",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Demo / Test",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 5,
+        "x": 510,
+        "y": 640,
+        "wires": [
+            [],
+            [
+                "42d27ae01c6fd201",
+                "f495c897b992cb33"
+            ],
+            [
+                "42d27ae01c6fd201"
+            ],
+            [
+                "42d27ae01c6fd201"
+            ],
+            [
+                "42d27ae01c6fd201"
+            ]
+        ]
+    },
     {
         "id": "ffe728d961068c62",
         "type": "ui-template",
@@ -3022,10 +3688,10 @@
         "ui": "",
         "name": "Streaming",
         "order": 1,
-        "width": "7",
-        "height": "18",
+        "width": "0",
+        "height": "0",
         "head": "",
-        "format": "  <iframe \n    src=\"/preview/node-red\" \n    >\n  </iframe>\n  <style>\n    iframe {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border: none;\n    }\n  </style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n        background:white;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3044,65 +3710,257 @@
         "group": "d2f77573ed4317e4",
         "page": "",
         "ui": "",
-        "name": "Acquisition settings",
+        "name": "body",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels class=\"my-4\" variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        \n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n        \n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n        \n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 370,
+        "x": 350,
+        "y": 140,
+        "wires": [
+            [
+                "56b3c60c6d4ffd87"
+            ]
+        ]
+    },
+    {
+        "id": "a39e07fd1a86ac84",
+        "type": "ui-template",
+        "z": "35d7387466dd0bc0",
+        "group": "3ae252a2e5abca89",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "56b3c60c6d4ffd87",
+        "type": "switch",
+        "z": "35d7387466dd0bc0",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "acq_params",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "imager/image",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 570,
+        "y": 140,
+        "wires": [
+            [
+                "f841ebf999dd8cb3"
+            ],
+            [
+                "09ecc922fe2214a8"
+            ]
+        ]
+    },
+    {
+        "id": "f841ebf999dd8cb3",
+        "type": "function",
+        "z": "35d7387466dd0bc0",
+        "name": "set acq_params",
+        "func": "if (msg.topic) {\n    global.set(\"acq_id\", msg.payload.acq_id);\n    global.set(\"acq_nb_frame\", msg.payload.acq_nb_frame);\n    global.set(\"acq_interframe_volume\", msg.payload.acq_interframe_volume);\n    global.set(\"acq_imaged_volume\", msg.payload.acq_imaged_volume);\n    global.set(\"acq_pumped_volume\", msg.payload.acq_pumped_volume);\n    global.set(\"acq_comment\", msg.payload.acq_comment);\n    global.set(\"acq_progression\", msg.payload.acq_progression);\n    global.set(\"acq_duration_left\", msg.payload.acq_duration_left);\n    global.set(\"acq_start_timestamp\", msg.payload.acq_start_timestamp);\n    \n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 140,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "e3c084164002f23f",
+        "type": "ui-event",
+        "z": "35d7387466dd0bc0",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "54ae95ca6088f307"
+            ]
+        ]
+    },
+    {
+        "id": "54ae95ca6088f307",
+        "type": "switch",
+        "z": "35d7387466dd0bc0",
+        "name": "msg.payload.page.path === \"/acquisition\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/acquisition",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 330,
+        "y": 40,
+        "wires": [
+            [
+                "113085f8dd63df0c"
+            ]
+        ]
+    },
+    {
+        "id": "113085f8dd63df0c",
+        "type": "function",
+        "z": "35d7387466dd0bc0",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 120,
         "y": 140,
         "wires": [
             [
-                "56b3c60c6d4ffd87"
+                "aa6924c7e0aff26c"
+            ]
+        ]
+    },
+    {
+        "id": "8ceee00f68df186c",
+        "type": "mqtt in",
+        "z": "35d7387466dd0bc0",
+        "name": "",
+        "topic": "status/imager",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 90,
+        "y": 200,
+        "wires": [
+            [
+                "aa6924c7e0aff26c"
             ]
         ]
     },
     {
-        "id": "a39e07fd1a86ac84",
+        "id": "425d72ed91ea264e",
         "type": "ui-template",
         "z": "35d7387466dd0bc0",
-        "group": "3ae252a2e5abca89",
+        "group": "3d88a1872dbbf8a7",
         "page": "",
         "ui": "",
-        "name": "Navigation Top",
+        "name": "Navigation Bottom",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1300,
-        "y": 40,
+        "x": 1290,
+        "y": 160,
         "wires": [
             []
         ]
     },
     {
-        "id": "56b3c60c6d4ffd87",
+        "id": "46b98c54eb680c2e",
+        "type": "mqtt out",
+        "z": "35d7387466dd0bc0",
+        "name": "MQTT",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 1070,
+        "y": 200,
+        "wires": []
+    },
+    {
+        "id": "7d28a539738ca73a",
+        "type": "function",
+        "z": "35d7387466dd0bc0",
+        "name": "update_config",
+        "func": "const keys = global.keys(); // Récupère toutes les clés des variables globales\nlet config = {}; // Objet pour stocker la configuration\n\nkeys.forEach(key => {\n    // Ignore les clés qui commencent par \"$\"\n    if (!key.startsWith('$')) {\n        // Ne garde que celles qui commencent par les préfixes demandés\n        if (\n            key.startsWith('sample_') ||\n            key.startsWith('acq_') ||\n            key.startsWith('object_') ||\n            key.startsWith('process_') ||\n            key.startsWith('img_')\n        ) {\n            config[key] = global.get(key);\n        }\n    }\n});\n\n// Crée le payload final\nmsg.payload = {\n    action: \"update_config\",\n    config: config\n};\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 200,
+        "wires": [
+            [
+                "46b98c54eb680c2e"
+            ]
+        ]
+    },
+    {
+        "id": "09ecc922fe2214a8",
         "type": "switch",
         "z": "35d7387466dd0bc0",
         "name": "",
-        "property": "topic",
+        "property": "payload.status",
         "propertyType": "msg",
         "rules": [
             {
                 "t": "eq",
-                "v": "acq_params",
+                "v": "on",
                 "vt": "str"
             },
             {
                 "t": "eq",
-                "v": "imager/image",
+                "v": "off",
                 "vt": "str"
             }
         ],
@@ -3110,1034 +3968,1272 @@
         "repair": false,
         "outputs": 2,
         "x": 570,
-        "y": 140,
+        "y": 200,
         "wires": [
             [
-                "f841ebf999dd8cb3"
+                "7d28a539738ca73a",
+                "bb2825f419cc6526"
             ],
             [
-                "09ecc922fe2214a8"
+                "44c8ea6299e13784"
             ]
         ]
     },
     {
-        "id": "f841ebf999dd8cb3",
+        "id": "44c8ea6299e13784",
         "type": "function",
         "z": "35d7387466dd0bc0",
-        "name": "set acq_params",
-        "func": "if (msg.topic) {\n    global.set(\"acq_id\", msg.payload.acq_id);\n    global.set(\"acq_nb_frame\", msg.payload.acq_nb_frame);\n    global.set(\"acq_interframe_volume\", msg.payload.acq_interframe_volume);\n    global.set(\"acq_imaged_volume\", msg.payload.acq_imaged_volume);\n    global.set(\"acq_pumped_volume\", msg.payload.acq_pumped_volume);\n    global.set(\"acq_comment\", msg.payload.acq_comment);\n    global.set(\"acq_progression\", msg.payload.acq_progression);\n    global.set(\"acq_duration_left\", msg.payload.acq_duration_left);\n    global.set(\"acq_start_timestamp\", msg.payload.acq_start_timestamp);\n    \n}\nreturn msg;\n",
+        "name": "stop acquisition",
+        "func": "\nmsg.payload = {\n    action: \"stop\"\n};\n\nreturn msg;\n",
         "outputs": 1,
-        "timeout": "",
+        "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
         "x": 760,
-        "y": 140,
+        "y": 240,
         "wires": [
-            []
+            [
+                "46b98c54eb680c2e"
+            ]
         ]
     },
     {
-        "id": "e3c084164002f23f",
-        "type": "ui-event",
+        "id": "bb2825f419cc6526",
+        "type": "function",
+        "z": "35d7387466dd0bc0",
+        "name": "start acquisition",
+        "func": "const acq_interframe_volume = global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = global.get(\"acq_nb_frame\") || 0;\n\n\n// Crée le payload final\nmsg.payload = {\n    action: \"image\",\n    pump_direction: \"FORWARD\",\n    volume: acq_interframe_volume,\n    nb_frame: acq_nb_frame,\n    sleep: 0.1\n};\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 280,
+        "wires": [
+            [
+                "ce5cca3b8fe34379"
+            ]
+        ]
+    },
+    {
+        "id": "ce5cca3b8fe34379",
+        "type": "delay",
         "z": "35d7387466dd0bc0",
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 920,
+        "y": 280,
+        "wires": [
+            [
+                "46b98c54eb680c2e"
+            ]
+        ]
+    },
+    {
+        "id": "250979b4672d81b6",
+        "type": "ui-event",
+        "z": "0fd76ac156d78937",
         "ui": "e6ae26617c24c3ea",
         "name": "UI Event",
         "x": 80,
         "y": 40,
         "wires": [
             [
-                "5bea829ec02ded61"
+                "66d295cc27d69cec"
             ]
         ]
     },
     {
-        "id": "5bea829ec02ded61",
+        "id": "66d295cc27d69cec",
         "type": "switch",
-        "z": "35d7387466dd0bc0",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
+        "z": "0fd76ac156d78937",
+        "name": "msg.payload.page.path === \"/segmentation\"",
+        "property": "payload.page.path",
         "propertyType": "msg",
         "rules": [
             {
                 "t": "eq",
-                "v": "$pageview",
+                "v": "/segmentation",
                 "vt": "str"
             }
         ],
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 280,
+        "x": 330,
         "y": 40,
         "wires": [
             [
-                "54ae95ca6088f307"
+                "d4129bf3f5622aa6",
+                "921be0438de344ac"
             ]
         ]
     },
     {
-        "id": "54ae95ca6088f307",
+        "id": "d4129bf3f5622aa6",
+        "type": "list acquisitions",
+        "z": "0fd76ac156d78937",
+        "name": "",
+        "x": 100,
+        "y": 140,
+        "wires": [
+            [
+                "e23cbd161ffb9970"
+            ]
+        ]
+    },
+    {
+        "id": "9e44bf9a44615e20",
+        "type": "ui-template",
+        "z": "0fd76ac156d78937",
+        "group": "9f00807878a32dd5",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Bottom",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Acquisition\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Visualization\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1510,
+        "y": 160,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "d11906e048438931",
+        "type": "ui-template",
+        "z": "0fd76ac156d78937",
+        "group": "9b992ca6515ed058",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Acquisition\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Segmentation\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Vizualisation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1520,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "4bdd8a4afcdb704b",
+        "type": "mqtt out",
+        "z": "0fd76ac156d78937",
+        "name": "MQTT",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 1150,
+        "y": 140,
+        "wires": []
+    },
+    {
+        "id": "24c71b69e60e41bd",
         "type": "switch",
-        "z": "35d7387466dd0bc0",
-        "name": "msg.payload.page.path === \"/acquisition\"",
-        "property": "payload.page.path",
+        "z": "0fd76ac156d78937",
+        "name": "",
+        "property": "topic",
         "propertyType": "msg",
         "rules": [
             {
                 "t": "eq",
-                "v": "/acquisition",
+                "v": "segmenter/segment",
                 "vt": "str"
             }
         ],
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 590,
-        "y": 40,
-        "wires": [
-            [
-                "113085f8dd63df0c"
-            ]
-        ]
-    },
-    {
-        "id": "113085f8dd63df0c",
-        "type": "function",
-        "z": "35d7387466dd0bc0",
-        "name": "Get Global Variables",
-        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 120,
+        "x": 1030,
         "y": 140,
         "wires": [
             [
-                "aa6924c7e0aff26c"
+                "4bdd8a4afcdb704b",
+                "f8f4b34842d35713"
             ]
         ]
     },
     {
-        "id": "8ceee00f68df186c",
+        "id": "34f6f23f1a46da67",
         "type": "mqtt in",
-        "z": "35d7387466dd0bc0",
+        "z": "0fd76ac156d78937",
         "name": "",
-        "topic": "status/imager",
+        "topic": "status/segmenter",
         "qos": "0",
         "datatype": "json",
         "broker": "8dc3722c.06efa8",
         "nl": false,
         "rap": false,
         "inputs": 0,
-        "x": 90,
-        "y": 200,
+        "x": 100,
+        "y": 260,
         "wires": [
             [
-                "aa6924c7e0aff26c"
+                "33c0d1b8251b5d00"
             ]
         ]
     },
     {
-        "id": "425d72ed91ea264e",
+        "id": "33c0d1b8251b5d00",
         "type": "ui-template",
-        "z": "35d7387466dd0bc0",
-        "group": "3d88a1872dbbf8a7",
+        "z": "0fd76ac156d78937",
+        "group": "402b3d24c87ab0d2",
         "page": "",
         "ui": "",
-        "name": "Navigation Bottom",
+        "name": "Details of Segmentation",
         "order": 1,
-        "width": 0,
-        "height": 0,
+        "width": "0",
+        "height": "0",
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n\n  <!-- Error Message -->\n  <v-alert\n    v-if=\"errorMessage\"\n    type=\"error\"\n    variant=\"outlined\"\n    border=\"start\"\n    prominent\n    class=\"mb-4\"\n  >\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Info Message -->\n  <v-alert\n    v-else-if=\"infoMessage\"\n    type=\"info\"\n    variant=\"outlined\"\n    border=\"start\"\n    class=\"mb-4\"\n  >\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress -->\n  <v-card\n    v-else-if=\"statusText\"\n    variant=\"flat\"\n    class=\"pa-8\"\n  >\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear\n      :model-value=\"progressPercent\"\n      height=\"30\"\n      color=\"primary\"\n      rounded\n      striped\n    />\n\n    <p v-if=\"currentImage\" class=\"mt-3 mb-0 text-body-2\">\n      Currently segmenting: <strong>{{ currentImage }}</strong>\n    </p>\n  </v-card>\n\n  <!-- Waiting -->\n  <div v-else class=\"text-disabled mt-4\">\n    Awaiting segmentation status…\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: {\n    msg: Object,\n  },\n\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n\n  computed: {\n    isSegmenting() {\n      if (!this.statusText || this.errorMessage) return false;\n      const s = this.statusText.toLowerCase();\n      return !(s.includes(\"done\") || s.includes(\"idle\"));\n    },\n  },\n\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg?.topic || !msg.payload) return;\n\n        const p = msg.payload;\n        const lowerStatus = (p.status || \"\").toLowerCase();\n\n        // Reset transient messages\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.progressText = \"\";\n\n        // Update dataset info if present\n        if (p.seg_project_name || p.seg_sample_id || p.seg_acquisition_id || p.seg_path) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        if (msg.topic !== \"status/segmenter\") return;\n\n        // --- ERROR ---\n        if (lowerStatus.includes(\"exception\")) {\n          this.errorMessage = p.status;\n          this.statusText = \"\";\n          this.resetProgress();\n          return;\n        }\n\n        // --- DONE / IDLE ---\n        if (lowerStatus.includes(\"done\") || lowerStatus.includes(\"idle\")) {\n          this.statusText = p.status;\n          this.segment.dataset = { project_name: \"\", sample_id: \"\", acquisition_id: \"\", path: \"\" };\n          this.resetProgress();\n          return;\n        }\n\n        // --- SIMPLE INFO (no \"image\" token) ---\n        if (!lowerStatus.includes(\"image\")) {\n          this.infoMessage = p.status;\n          this.statusText = \"\";\n          return;\n        }\n\n        // --- IMAGE PROGRESS ---\n        this.statusText = p.status;\n\n        const imgMatch = p.status.match(/image ([\\w\\-\\_\\.]+),/);\n        this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n        const progressMatch = p.status.match(/image (\\d+)\\/(\\d+)/);\n        if (progressMatch) {\n          this.currentIndex = Number(progressMatch[1]);\n          this.totalImages = Number(progressMatch[2]);\n          this.progressPercent = Math.round((this.currentIndex / this.totalImages) * 100);\n          this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n        } else {\n          this.resetProgress();\n        }\n      },\n    },\n  },\n\n  methods: {\n    resetProgress() {\n      this.currentImage = \"\";\n      this.currentIndex = 0;\n      this.totalImages = 0;\n      this.progressPercent = 0;\n      this.progressText = \"\";\n    },\n  },\n};\n</script>\n\n<style scoped>\n.text-disabled {\n  color: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1290,
-        "y": 160,
+        "x": 370,
+        "y": 220,
         "wires": [
             []
         ]
     },
     {
-        "id": "46b98c54eb680c2e",
-        "type": "mqtt out",
-        "z": "35d7387466dd0bc0",
-        "name": "MQTT",
-        "topic": "",
-        "qos": "",
-        "retain": "",
-        "respTopic": "",
-        "contentType": "",
-        "userProps": "",
-        "correl": "",
-        "expiry": "",
-        "broker": "8dc3722c.06efa8",
-        "x": 1070,
-        "y": 200,
-        "wires": []
-    },
-    {
-        "id": "7d28a539738ca73a",
-        "type": "function",
-        "z": "35d7387466dd0bc0",
-        "name": "update_config",
-        "func": "const keys = global.keys(); // Récupère toutes les clés des variables globales\nlet config = {}; // Objet pour stocker la configuration\n\nkeys.forEach(key => {\n    // Ignore les clés qui commencent par \"$\"\n    if (!key.startsWith('$')) {\n        // Ne garde que celles qui commencent par les préfixes demandés\n        if (\n            key.startsWith('sample_') ||\n            key.startsWith('acq_') ||\n            key.startsWith('object_') ||\n            key.startsWith('process_') ||\n            key.startsWith('img_')\n        ) {\n            config[key] = global.get(key);\n        }\n    }\n});\n\n// Crée le payload final\nmsg.payload = {\n    action: \"update_config\",\n    config: config\n};\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 760,
-        "y": 200,
-        "wires": [
-            [
-                "46b98c54eb680c2e"
-            ]
-        ]
-    },
-    {
-        "id": "09ecc922fe2214a8",
+        "id": "cdb586337f186494",
         "type": "switch",
-        "z": "35d7387466dd0bc0",
+        "z": "0fd76ac156d78937",
         "name": "",
-        "property": "payload.status",
+        "property": "payload.is_segmented",
         "propertyType": "msg",
         "rules": [
             {
-                "t": "eq",
-                "v": "on",
-                "vt": "str"
+                "t": "true"
             },
             {
-                "t": "eq",
-                "v": "off",
-                "vt": "str"
+                "t": "false"
             }
         ],
         "checkall": "true",
         "repair": false,
         "outputs": 2,
-        "x": 570,
-        "y": 200,
+        "x": 510,
+        "y": 140,
         "wires": [
+            [],
             [
-                "7d28a539738ca73a",
-                "bb2825f419cc6526"
-            ],
-            [
-                "44c8ea6299e13784"
+                "89d1bfb7839c2077"
             ]
         ]
     },
     {
-        "id": "44c8ea6299e13784",
+        "id": "f8f4b34842d35713",
         "type": "function",
-        "z": "35d7387466dd0bc0",
-        "name": "stop acquisition",
-        "func": "\nmsg.payload = {\n    action: \"stop\"\n};\n\nreturn msg;\n",
+        "z": "0fd76ac156d78937",
+        "name": "set seg_params",
+        "func": "if (msg.topic) {\n    global.set(\"seg_project_name\", msg.payload.dataset.project_name);\n    global.set(\"seg_sample_id\", msg.payload.dataset.sample_id);\n    global.set(\"seg_acquisition_id\", msg.payload.dataset.acquisition_id);\n    global.set(\"seg_path\", msg.payload.dataset.path);\n    global.set(\"process_min_ESD\", msg.payload.settings.process_min_ESD);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1180,
+        "y": 100,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "921be0438de344ac",
+        "type": "function",
+        "z": "0fd76ac156d78937",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 760,
-        "y": 240,
+        "x": 120,
+        "y": 200,
         "wires": [
             [
-                "46b98c54eb680c2e"
+                "33c0d1b8251b5d00"
             ]
         ]
     },
     {
-        "id": "bb2825f419cc6526",
+        "id": "89d1bfb7839c2077",
         "type": "function",
-        "z": "35d7387466dd0bc0",
-        "name": "start acquisition",
-        "func": "const acq_interframe_volume = global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = global.get(\"acq_nb_frame\") || 0;\n\n\n// Crée le payload final\nmsg.payload = {\n    action: \"image\",\n    pump_direction: \"FORWARD\",\n    volume: acq_interframe_volume,\n    nb_frame: acq_nb_frame,\n    sleep: 0.1\n};\n\nreturn msg;\n",
+        "z": "0fd76ac156d78937",
+        "name": "add process_min_ESD",
+        "func": "// Ensure msg.payload and msg.payload.settings exist\nmsg.payload = msg.payload || {};\n\n// Read the variable from global context\nconst process_min_ESD = global.get(\"process_min_ESD\");\n\n// Add it to the payload settings\nmsg.payload.process_min_ESD = process_min_ESD;\nmsg.payload.open_dialog = true;\n\n// Return the modified message\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 760,
-        "y": 280,
+        "x": 680,
+        "y": 140,
         "wires": [
             [
-                "ce5cca3b8fe34379"
+                "7fde0897e436c334"
             ]
         ]
     },
     {
-        "id": "ce5cca3b8fe34379",
-        "type": "delay",
-        "z": "35d7387466dd0bc0",
-        "name": "",
-        "pauseType": "delay",
-        "timeout": "1",
-        "timeoutUnits": "seconds",
-        "rate": "1",
-        "nbRateUnits": "1",
-        "rateUnits": "second",
-        "randomFirst": "1",
-        "randomLast": "5",
-        "randomUnits": "seconds",
-        "drop": false,
-        "allowrate": false,
-        "outputs": 1,
-        "x": 920,
-        "y": 280,
+        "id": "7fde0897e436c334",
+        "type": "ui-template",
+        "z": "0fd76ac156d78937",
+        "group": "bfd4acb7b243514f",
+        "page": "",
+        "ui": "",
+        "name": "Dialog",
+        "order": 2,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimal area-equivalent diameter (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"The Area-Equivalent Diameter is the calculated diameter of a circle that has the exact same area as the particle's silhouette area. This field sets the minimum size threshold (in μm) for particles to be included in the analysis.\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\nexport default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 20,\n      // 1. Add a flag to track if page is fully loaded\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    // 2. Wait 1 second after the component loads before accepting \"Open\" commands.\n    // This effectively ignores the \"History\" message sent by Node-RED on refresh.\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        // 3. If the page is still loading (first 1 sec), IGNORE the message\n        if (!this.isReady) return;\n\n        // Safety check\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        // 4. Check conditions\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 0;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 870,
+        "y": 140,
         "wires": [
             [
-                "46b98c54eb680c2e"
+                "24c71b69e60e41bd"
             ]
         ]
     },
     {
-        "id": "250979b4672d81b6",
-        "type": "ui-event",
+        "id": "e23cbd161ffb9970",
+        "type": "ui-template",
         "z": "0fd76ac156d78937",
+        "group": "bfd4acb7b243514f",
+        "page": "",
+        "ui": "",
+        "name": "List of Acquisitions",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-data-table\n    fluid\n    :headers=\"headers\"\n    :items=\"filteredItems\"\n    :search=\"search\"\n    :loading=\"loading\"\n    item-value=\"acquisition_id\"\n    density=\"comfortable\"\n    hover\n    :item-class=\"getRowClass\"\n  >\n\n    <template v-slot:loading>\n      <v-skeleton-loader type=\"table-row@5\" />\n    </template>\n\n    <template v-slot:item.project_name=\"{ item }\">\n      <span class=\"text-body-2 font-weight-medium text-high-emphasis\">\n        {{ item.project_name }}\n      </span>\n    </template>\n\n    <template v-slot:item.sample_id=\"{ item }\">\n      <span class=\"text-body-2 text-high-emphasis\">\n        {{ item.sample_id }}\n      </span>\n    </template>\n\n    <template v-slot:item.acquisition_id=\"{ item }\">\n      <code class=\"bg-grey-lighten-4 px-2 py-1 rounded text-caption text-grey-darken-3\">\n        {{ item.acquisition_id }}\n      </code>\n    </template>\n\n    <template v-slot:item.operator_name=\"{ item }\">\n      <span class=\"text-body-2 text-high-emphasis\">\n        {{ item.operator_name }}\n      </span>\n    </template>\n\n    <template v-slot:item.image_acquired_count=\"{ item }\">\n      <div class=\"d-flex align-center justify-end text-medium-emphasis\">\n        <v-icon size=\"small\" class=\"mr-2\">mdi-image-outline</v-icon>\n        <span class=\"font-weight-bold text-high-emphasis\">\n          {{ Number(item.image_acquired_count || 0).toLocaleString() }}\n        </span>\n      </div>\n    </template>\n\n    <template v-slot:item.gallery=\"{ item }\">\n      <v-btn\n        variant=\"text\"\n        size=\"small\"\n        color=\"grey-darken-1\"\n        :href=\"item.gallery\"\n        target=\"_blank\"\n      >\n        <v-icon start>mdi-folder-image</v-icon>\n        Gallery\n      </v-btn>\n    </template>\n\n    <template v-slot:item.actions=\"{ item }\">\n      <div class=\"d-flex justify-end\">\n        <v-btn\n          v-if=\"!item.is_segmented\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"primary\"\n          @click=\"segment(item)\"\n        >\n          <v-icon start>mdi-vector-polyline</v-icon>\n          Segment\n        </v-btn>\n\n        <v-btn\n          v-else\n          variant=\"text\"\n          size=\"small\"\n          disabled\n          color=\"grey-darken-1\"\n        >\n          <v-icon start>mdi-check</v-icon>\n          Done\n        </v-btn>\n      </div>\n    </template>\n\n    <template v-slot:no-data>\n      <div class=\"pa-8 text-center text-medium-emphasis\">\n        <v-icon icon=\"mdi-database-off\" size=\"x-large\" class=\"mb-3 text-grey-lighten-1\" />\n        <div class=\"text-body-1\">No acquisitions found</div>\n      </div>\n    </template>\n\n  </v-data-table>\n</template>\n\n\n<script>\nexport default {\n  // Assuming 'msg' is a prop or injected value from the environment\n  props: {\n    msg: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null,\n\n      headers: [\n        { title: \"Project\", key: \"project_name\", sortable: false },\n        { title: \"Sample\", key: \"sample_id\", sortable: false },\n        { title: \"Acq ID\", key: \"acquisition_id\", sortable: false },\n        { title: \"Operator\", key: \"operator_name\", sortable: false },\n        { title: \"Count\", key: \"image_acquired_count\", sortable: false, align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Actions\", key: \"actions\", sortable: false, align: \"end\", width: \"150px\" }\n      ]\n    };\n  },\n\n  computed: {\n    /** Filters out rows with 0 images, which can prevent sorting/rendering issues. */\n    filteredItems() {\n      // NOTE: If you are encountering duplicated rows, consider adding a check here\n      // to ensure `acquisition_id` is unique across all filtered items.\n      return this.items.filter(i => Number(i.image_acquired_count) > 0);\n    }\n  },\n\n  mounted() {\n    if (this.msg?.payload && Array.isArray(this.msg.payload)) {\n      this.items = this.msg.payload;\n      this.loading = false;\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(value) {\n        if (!value?.payload) return;\n        const payload = value.payload;\n\n        const clearing =\n          payload === \"clear\" ||\n          payload?.clear === true ||\n          (Array.isArray(payload) && payload.length === 0);\n\n        if (clearing) {\n          this.items = [];\n          this.selectedRow = null;\n          this.loading = true;\n          setTimeout(() => (this.loading = false), 300);\n          return;\n        }\n\n        if (Array.isArray(payload)) {\n          this.items = payload;\n          this.loading = false;\n        }\n      }\n    }\n  },\n\n  methods: {\n    /** Handles the action when the 'Segment' button is clicked */\n    segment(item) {\n      this.selectedRow = item.acquisition_id;\n\n      // Assuming 'this.send' is a method available in the environment (e.g., from a mixin or parent)\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"segment_request\",\n          payload: item\n        });\n      } else {\n         console.warn(\"The 'send' method is not defined.\");\n      }\n    },\n\n    /** Returns the CSS class to apply to a row, used for highlighting the selected row */\n    getRowClass(wrapper) {\n      // Use wrapper.raw to get the item instance reliably in v3\n      const item = wrapper.raw ?? wrapper;\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 310,
+        "y": 140,
+        "wires": [
+            [
+                "cdb586337f186494"
+            ]
+        ]
+    },
+    {
+        "id": "77bb783e65c3ffd6",
+        "type": "ui-event",
+        "z": "14f8c9b5ce1235cc",
         "ui": "e6ae26617c24c3ea",
         "name": "UI Event",
         "x": 80,
         "y": 40,
         "wires": [
             [
-                "72421c36bb0418bc"
+                "90c920ecdab16908",
+                "384aa9ab83bfe566"
             ]
         ]
     },
     {
-        "id": "72421c36bb0418bc",
+        "id": "90c920ecdab16908",
         "type": "switch",
-        "z": "0fd76ac156d78937",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
+        "z": "14f8c9b5ce1235cc",
+        "name": "msg.payload.page.path === \"/visualization\"",
+        "property": "payload.page.path",
         "propertyType": "msg",
         "rules": [
             {
                 "t": "eq",
-                "v": "$pageview",
+                "v": "/visualization",
                 "vt": "str"
             }
         ],
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 280,
+        "x": 330,
+        "y": 40,
+        "wires": [
+            [
+                "164baa371893de7a",
+                "543715b9199cdb72"
+            ]
+        ]
+    },
+    {
+        "id": "75b694eff7cf6747",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "1d3abb201c51ff47",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Bottom",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1290,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "fe2e976833fd41a9",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "b570f76ef526af45",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Visualization\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
         "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "164baa371893de7a",
+        "type": "list segmentations",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "x": 170,
+        "y": 180,
         "wires": [
             [
-                "66d295cc27d69cec"
+                "18a10804663dbaa1",
+                "72c774fc51af957b"
             ]
         ]
     },
     {
-        "id": "66d295cc27d69cec",
-        "type": "switch",
-        "z": "0fd76ac156d78937",
-        "name": "msg.payload.page.path === \"/segmentation\"",
-        "property": "payload.page.path",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "/segmentation",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
+        "id": "18a10804663dbaa1",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "Insert export column",
+        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\nreturn msg;\n",
         "outputs": 1,
-        "x": 590,
-        "y": 40,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 440,
+        "y": 180,
         "wires": [
             [
-                "d4129bf3f5622aa6",
-                "921be0438de344ac"
+                "92e2ed9f115c3991"
             ]
         ]
     },
     {
-        "id": "61c2c281b1c6e055",
-        "type": "ui-table",
-        "z": "0fd76ac156d78937",
-        "group": "bfd4acb7b243514f",
-        "name": "List of acq",
-        "label": "",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "maxrows": "100",
-        "passthru": false,
-        "autocols": false,
-        "showSearch": false,
-        "deselect": true,
-        "selectionType": "click",
-        "columns": [
-            {
-                "title": "Project name",
-                "key": "project_name",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Sample ID",
-                "key": "sample_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Acquisition ID",
-                "key": "acquisition_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Operator Name",
-                "key": "operator_name",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Number of images",
-                "key": "image_acquired_count",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Path",
-                "key": "path",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Segmented",
-                "key": "is_segmented",
-                "keyType": "key",
-                "type": "tickcross",
-                "width": "",
-                "align": "start"
-            }
-        ],
-        "mobileBreakpoint": "sm",
-        "mobileBreakpointType": "defaults",
-        "action": "replace",
-        "x": 330,
-        "y": 140,
+        "id": "5ec998719a884cfe",
+        "type": "file in",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "filename": "payload.path",
+        "filenameType": "msg",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "allProps": false,
+        "x": 180,
+        "y": 380,
         "wires": [
             [
-                "cdb586337f186494"
+                "4caf5c846b3b9d01",
+                "a5ef1df890e7bb36",
+                "8cdf3c5527b9cb21",
+                "e26832811411f850",
+                "448a5c6830c6514f",
+                "ac9d555964747130",
+                "11323481847790c0",
+                "8425012e07c3700f",
+                "512e86195d14e773",
+                "9be1cc713ac79a7b",
+                "63ce87d36ae8f172",
+                "9abf70a949e76eaf"
             ]
         ]
     },
     {
-        "id": "d4129bf3f5622aa6",
-        "type": "list acquisitions",
-        "z": "0fd76ac156d78937",
-        "name": "",
-        "x": 100,
-        "y": 140,
+        "id": "aefbf6f96248c398",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "Get tsv path",
+        "func": "// 1. On s'assure que le path existe\nif (msg.payload.path) {\n    \n    // 2. On récupère le path actuel\n    // ex: \"/home/pi/data/objects/2025-11-19/S_1/A_2\"\n    const currentPath = msg.payload.path;\n\n    // 3. On extrait l'identifiant (le dernier élément après le /)\n    // Si le path finit par un /, on le retire d'abord pour éviter un ID vide\n    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;\n    const acqId = cleanPath.split('/').pop(); \n\n    // 4. On modifie le path dans l'objet\n    // Résultat: .../A_2/ecotaxa_A_2.tsv\n    msg.payload.path = `${cleanPath}/ecotaxa_${acqId}.tsv`;\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 930,
+        "y": 180,
         "wires": [
             [
-                "61c2c281b1c6e055"
+                "9a10d9afb1a0b1ca"
             ]
         ]
     },
     {
-        "id": "9e44bf9a44615e20",
+        "id": "4244d2ed880cca66",
         "type": "ui-template",
-        "z": "0fd76ac156d78937",
-        "group": "9f00807878a32dd5",
+        "z": "14f8c9b5ce1235cc",
+        "group": "0c1537ce71affc2b",
         "page": "",
         "ui": "",
-        "name": "Navigation Bottom",
+        "name": "Gallery",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Acquisition\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Visualization\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            loading: true,\n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let arr = [...this.rawData];\n            arr.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return arr;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            return this.filteredItems.slice(start, start + this.itemsPerPage);\n        }\n    },\n\n    watch: {\n        msg: {\n            deep: true,\n            handler(m) {\n                if (!m || !m.payload) return;\n                if (m.payload.meta) this.meta = m.payload.meta;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} µm` };\n            } else {\n                // For Modal: Calculate Percentage of the total image width\n                // (Bar Microns / Total Image Microns) * 100\n                const percent = (finalMicrons / realWidthMicrons) * 100;\n                return { width: percent, label: `${finalMicrons} µm` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n\n        formatMeta(item) {\n            const out = {};\n            for (let k of this.keys) {\n                if (k === \"url\" || k === \"id\") continue;\n                let v = item[k];\n                if (typeof v === \"number\") v = v.toFixed(2);\n                let unit = \"\";\n                const KL = k.toLowerCase();\n                if (KL.includes(\"area\")) unit = \" px²\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"°\";\n                out[k.replace(\"object_\", \"\")] = v + unit;\n            }\n            return out;\n        },\n\n        downloadImage(url, id) {\n            const a = document.createElement(\"a\");\n            a.href = url;\n            a.download = `object_${id}.jpg`;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n        }\n    }\n}\n</script>\n\n\n<style scoped>\n/* GALLERY GRID */\n.gallery-scroll-area {\n    min-height:600px;\n    overflow-y: auto;\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n    align-items: flex-end;\n}\n\n/* SKELETON LOADER */\n.gallery-skeleton {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n}\n.skeleton-box {\n    width: 120px;\n    height: 120px;\n    border-radius: 6px;\n    background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n    background-size: 200% 100%;\n    animation: sk 1.2s infinite;\n}\n@keyframes sk {\n    0% { background-position:200% 0; }\n    100% { background-position:-200% 0; }\n}\n\n.gallery-item-wrapper { display: flex; flex-direction: column; align-items: center; }\n.gallery-card { transition: transform 0.2s; cursor: pointer; }\n.gallery-card:hover { transform: translateY(-2px); border-color: #1976D2 !important; }\n.img-container { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n\n/* --- THUMBNAIL SCALE BAR --- */\n.mini-scale-bar {\n    position:absolute; bottom:2px; right:2px;\n    height:3px; \n    background: rgba(255,255,255,0);\n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.mini-scale-text {\n    position:absolute; bottom:6px; right:2px;\n    font-size: 10px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n\n/* --- MODAL SCALE BAR (NEW) --- */\n.modal-scale-bar {\n    position:absolute; \n    bottom: 10px; \n    right: 10px;\n    height: 6px; \n    background: rgba(255,255,255,0); \n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.modal-scale-text {\n    position:absolute; \n    bottom: -15px;\n    right: 0px;\n    font-size: 14px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1510,
-        "y": 160,
+        "x": 920,
+        "y": 1000,
         "wires": [
             []
         ]
     },
     {
-        "id": "d11906e048438931",
+        "id": "92e2ed9f115c3991",
         "type": "ui-template",
-        "z": "0fd76ac156d78937",
-        "group": "9b992ca6515ed058",
+        "z": "14f8c9b5ce1235cc",
+        "group": "fa6393a7d7e3b7d7",
         "page": "",
         "ui": "",
-        "name": "Navigation Top",
+        "name": "List of Segmentation",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Acquisition\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Visualization\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <!-- Data Table -->\n  <v-data-table\n      fluid\n      :headers=\"headers\"\n      :items=\"items\"\n      :search=\"search\"\n      :loading=\"loading\"\n      item-value=\"acquisition_id\"\n      item-key=\"acquisition_id\"  \n      density=\"comfortable\"\n      hover\n      :item-class=\"getRowClass\"\n  >\n      \n      <template v-slot:loading>\n        <v-skeleton-loader type=\"table-row@5\"></v-skeleton-loader>\n      </template>\n\n      <!-- Project -->\n      <template v-slot:item.project_name=\"{ item }\">\n        <span class=\"font-weight-medium text-body-2 text-high-emphasis\">\n          {{ item.project_name }}\n        </span>\n      </template>\n\n      <!-- Sample -->\n      <template v-slot:item.sample_id=\"{ item }\">\n        <span class=\"text-body-2 text-high-emphasis\">\n          {{ item.sample_id }}\n        </span>\n      </template>\n\n      <!-- Acquisition ID -->\n      <template v-slot:item.acquisition_id=\"{ item }\">\n        <code class=\"text-grey-darken-3 bg-grey-lighten-4 px-2 py-1 rounded text-caption font-weight-medium\">\n          {{ item.acquisition_id }}\n        </code>\n      </template>\n\n      <!-- Objects Count -->\n      <template v-slot:item.image_acquired_count=\"{ item }\">\n        <div class=\"d-flex align-center justify-end text-medium-emphasis\">\n          <v-icon size=\"small\" class=\"mr-2\">mdi-image-outline</v-icon>\n          <span class=\"font-weight-bold text-high-emphasis\">\n            {{ Number(item.image_acquired_count || 0).toLocaleString() }}\n          </span>\n        </div>\n      </template>\n\n      <!-- View Gallery -->\n      <template v-slot:item.gallery=\"{ item }\">\n        <v-btn\n          v-if=\"item.gallery\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.gallery\"\n          target=\"_blank\"\n        >\n          <v-icon start>mdi-image-multiple</v-icon>\n          Gallery\n        </v-btn>\n      </template>\n\n      <!-- Download Zip -->\n      <template v-slot:item.export=\"{ item }\">\n        <v-btn\n          v-if=\"item.export\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.export\"\n        >\n          <v-icon start>mdi-download</v-icon>\n          .zip\n        </v-btn>\n      </template>\n\n      <!-- Visualize -->\n      <template v-slot:item.actions=\"{ item }\">\n        <v-btn\n          variant=\"text\"\n          size=\"small\"\n          color=\"primary\"\n          class=\"text-capitalize font-weight-medium\"\n          @click=\"selectAcquisition(item)\"\n        >\n          <v-icon start>mdi-chart-scatter-plot-hexbin</v-icon>\n          Visualize\n        </v-btn>\n      </template>\n\n      <!-- No data -->\n      <template v-slot:no-data>\n        <div class=\"pa-8 text-center text-medium-emphasis\">\n          <v-icon icon=\"mdi-database-off\" size=\"x-large\" class=\"mb-3 text-grey-lighten-1\"></v-icon>\n          <div class=\"text-body-1\">No acquisitions found</div>\n        </div>\n      </template>\n\n  </v-data-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null, \n\n      headers: [\n        { title: \"Project\", key: \"project_name\", sortable: false, align: \"start\" },\n        { title: \"Sample\", key: \"sample_id\", sortable: false, align: \"start\" },\n        { title: \"Acquisition ID\", key: \"acquisition_id\", sortable: false, align: \"start\" },\n        { title: \"Objects Count\", key: \"image_acquired_count\", sortable: false, align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Download\", key: \"export\", sortable: false, align: \"end\" },\n        { title: \"Visualize\", key: \"actions\", sortable: false, align: \"end\", width: \"140px\" }\n      ]\n    };\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(val) {\n        if (!val || !val.payload) return;\n\n        const payload = val.payload;\n        const isClearing =\n          payload === \"clear\" ||\n          payload?.clear === true ||\n          (Array.isArray(payload) && payload.length === 0);\n\n        if (isClearing) {\n          this.items = [];\n          this.loading = true;\n          this.selectedRow = null;\n          setTimeout(() => { this.loading = false; }, 300);\n          return;\n        }\n\n        if (Array.isArray(payload)) {\n          this.items = payload;\n          this.loading = false;\n        }\n      }\n    }\n  },\n\n  mounted() {\n    if (this.msg && Array.isArray(this.msg.payload)) {\n      this.items = this.msg.payload;\n      this.loading = false;\n    }\n  },\n\n  methods: {\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    // Prevent ghost row + highlight selection\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;   // Vuetify wrapper-safe\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1520,
-        "y": 40,
+        "x": 740,
+        "y": 180,
+        "wires": [
+            [
+                "aefbf6f96248c398"
+            ]
+        ]
+    },
+    {
+        "id": "2ca2f83cc939607f",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "53490f9c39e2065d",
+        "page": "",
+        "ui": "",
+        "name": "Infos",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div>\n\n    <!-- SKELETON WHEN LOADING OR CLEARED -->\n    <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:90px; margin-bottom:12px;\"></div>\n\n    <!-- INVITE MESSAGE -->\n    <div\n      v-else-if=\"!meta.sample_id\"\n      style=\"\n        border-left:4px solid #1976d2;\n        background:#e3f2fd;\n        padding:12px;\n        border-radius:6px;\n        margin-bottom:12px;\n        color:#0d47a1;\n        font-size:14px;\n        display:flex;\n        align-items:center;\n        gap:8px;\n      \"\n    >\n      <v-icon color=\"primary\">mdi-information-outline</v-icon>\n      Select a dataset in the table above to display its information.\n    </div>\n\n    <!-- SAMPLE INFO -->\n    <v-row v-else align=\"center\">\n\n      <v-col cols=\"12\" md=\"9\" class=\"border-right\">\n        <div class=\"caption grey--text text-uppercase font-weight-bold mb-1\">\n          Sample Identity\n        </div>\n\n        <div class=\"text-h4 primary--text font-weight-bold\">\n          {{ meta.sample_id }}\n        </div>\n\n        <div class=\"subtitle-1 grey--text text--darken-3 mt-1\">\n          <strong>Project:</strong> {{ meta.project || '--' }}<br>\n          <span class=\"caption\">Acq ID: {{ meta.acq_id || '--' }}</span>\n        </div>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"3\" class=\"text-right\">\n        <a\n          :href=\"downloadUrl\"\n          target=\"_blank\"\n          :style=\"{\n            display:'inline-flex',\n            alignItems:'center',\n            gap:'6px',\n            padding:'10px 16px',\n            background: meta.sample_id ? '#1976d2' : '#90caf9',\n            color:'white',\n            borderRadius:'6px',\n            textDecoration:'none',\n            cursor: meta.sample_id ? 'pointer' : 'not-allowed'\n          }\"\n        >\n          <v-icon left>mdi-download</v-icon>\n          Download EcoTaxa .zip\n        </a>\n      </v-col>\n\n    </v-row>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      loading: true,\n      meta: {\n        sample_id: '',\n        project: '',\n        acq_id: ''\n      }\n    }\n  },\n\n  watch: {\n    msg: {\n      immediate: true,\n      deep: true,\n      handler(val) {\n\n        // --- CLEARING ---\n        if (!val?.payload?.meta || !val.payload.meta.sample_id) {\n          this.loading = false;\n          this.meta = {\n            sample_id: '',\n            project: '',\n            acq_id: ''\n          };\n          return;\n        }\n\n        // --- NORMAL UPDATE ---\n        this.loading = false;\n        this.meta = val.payload.meta;\n      }\n    }\n  },\n\n  computed: {\n    downloadUrl() {\n      if (!this.meta.sample_id) return '#';\n      return `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.meta.sample_id}.zip`;\n    }\n  }\n}\n</script>\n\n<style>\n/* Skeleton loader consistent with other widgets */\n\n.ps-skeleton {\n  width: 100%;\n  border-radius: 6px;\n  background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n  background-size: 200% 100%;\n  animation: psSkeletonAnim 1.2s infinite;\n}\n\n@keyframes psSkeletonAnim {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n</style>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 910,
+        "y": 440,
         "wires": [
             []
         ]
     },
     {
-        "id": "4bdd8a4afcdb704b",
-        "type": "mqtt out",
-        "z": "0fd76ac156d78937",
-        "name": "MQTT",
-        "topic": "",
-        "qos": "",
-        "retain": "",
-        "respTopic": "",
-        "contentType": "",
-        "userProps": "",
-        "correl": "",
-        "expiry": "",
-        "broker": "8dc3722c.06efa8",
-        "x": 1150,
-        "y": 140,
-        "wires": []
+        "id": "4caf5c846b3b9d01",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "HEATMAP (object_x, object_y)",
+        "func": "// Heatmap – Flowcell distribution\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\n// Meta from first valid row\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n  if (!lines[i].trim().startsWith(\"[\")) {\n    firstRow = lines[i].split(\"\\t\");\n    break;\n  }\n}\nif (!firstRow) return null;\n\nconst meta = {\n  sample_id: val(firstRow, \"sample_id\") || \"\",\n  project: val(firstRow, \"sample_project\") || \"\",\n  acq_id: val(firstRow, \"acq_id\") || \"\"\n};\n\n// Data: x/y for heatmap\nconst data = lines.slice(1)\n  .filter(l => !l.trim().startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      x: parseFloat(val(r, \"object_x\")),\n      y: parseFloat(val(r, \"object_y\"))\n    };\n  });\n\nmsg.payload = { meta, data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 520,
+        "wires": [
+            [
+                "0c90eb450c8d9b01"
+            ]
+        ]
     },
     {
-        "id": "24c71b69e60e41bd",
-        "type": "switch",
-        "z": "0fd76ac156d78937",
-        "name": "",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "segmenter/segment",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
+        "id": "a5ef1df890e7bb36",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "ESD Histogram (object_equivalent_diameter)",
+        "func": "// ESD Size Spectrum – TSV → {meta, data[{d}]}\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n  if (!lines[i].startsWith(\"[\")) {\n    firstRow = lines[i].split(\"\\t\");\n    break;\n  }\n}\nconst meta = {\n  sample_id: firstRow ? (val(firstRow, \"sample_id\") || \"\") : \"\"\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      d: parseFloat(val(r, \"object_equivalent_diameter\"))\n    };\n  });\n\nmsg.payload = { meta, data };\nreturn msg;\n",
         "outputs": 1,
-        "x": 1030,
-        "y": 140,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 550,
+        "y": 560,
         "wires": [
             [
-                "4bdd8a4afcdb704b",
-                "f8f4b34842d35713"
+                "0a559ab05af2548e"
             ]
         ]
     },
     {
-        "id": "34f6f23f1a46da67",
-        "type": "mqtt in",
-        "z": "0fd76ac156d78937",
-        "name": "",
-        "topic": "status/segmenter",
-        "qos": "0",
-        "datatype": "json",
-        "broker": "8dc3722c.06efa8",
-        "nl": false,
-        "rap": false,
-        "inputs": 0,
-        "x": 100,
-        "y": 260,
+        "id": "8cdf3c5527b9cb21",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "TIMELINE (sequence index + area)",
+        "func": "// Timeline – seq index vs object_area\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nlet seq = 0;\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      seq: seq++,\n      area: parseFloat(val(r, \"object_area\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 520,
+        "y": 600,
+        "wires": [
+            [
+                "7b9d103ec5981051"
+            ]
+        ]
+    },
+    {
+        "id": "e26832811411f850",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "COLORSPACE (Saturation vs Value)",
+        "func": "// Colorspace – MeanSaturation vs MeanValue\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      s: parseFloat(val(r, \"object_MeanSaturation\")),\n      v: parseFloat(val(r, \"object_MeanValue\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 530,
+        "y": 640,
+        "wires": [
+            [
+                "23a78a078fa1eca8"
+            ]
+        ]
+    },
+    {
+        "id": "448a5c6830c6514f",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "ASPECT (Width vs Height)",
+        "func": "// Aspect – width vs height\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      w: parseFloat(val(r, \"object_width\")),\n      h: parseFloat(val(r, \"object_height\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 500,
+        "y": 680,
+        "wires": [
+            [
+                "09f4914fc0a54566"
+            ]
+        ]
+    },
+    {
+        "id": "ac9d555964747130",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "GREENNESS (custom index + circularity)",
+        "func": "// Greenness vs Circularity – custom_greenness + object_circ.\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    const hue = parseFloat(val(r, \"object_MeanHue\")) || 0;\n    const circ = parseFloat(val(r, \"object_circ.\")) || 0;\n    const greenDist = Math.abs(hue - 80);\n    const g = Math.max(0, 100 - greenDist);\n    return { g, circ };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 540,
+        "y": 720,
         "wires": [
             [
-                "33c0d1b8251b5d00",
-                "eed6aba5c7ab3b6c"
+                "7f4d047a4c73eb61"
             ]
         ]
     },
     {
-        "id": "33c0d1b8251b5d00",
-        "type": "ui-template",
-        "z": "0fd76ac156d78937",
-        "group": "402b3d24c87ab0d2",
-        "page": "",
-        "ui": "",
-        "name": "Details of Segmentation",
-        "order": 1,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "<template>\n  <!-- Dataset Info: shown only when segmentation is currently active -->\n  <v-list density=\"compact\" v-if=\"isSegmenting && segment.dataset.project_name\">\n    <v-list-item>\n      <v-list-item-title>\n        <b>Project:</b> {{ segment.dataset.project_name }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Sample:</b> {{ segment.dataset.sample_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Acquisition:</b> {{ segment.dataset.acquisition_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Path:</b> {{ segment.dataset.path }}\n      </v-list-item-title>\n    </v-list-item>\n  </v-list>\n\n  <v-divider class=\"my-4\" v-if=\"isSegmenting && segment.dataset.project_name\"></v-divider>\n\n  <!-- Error Message -->\n  <v-alert v-if=\"errorMessage\" type=\"error\" variant=\"outlined\" border=\"start\" prominent class=\"mb-4\">\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Generic Info / Other Messages -->\n  <v-alert v-else-if=\"infoMessage\" type=\"info\" variant=\"outlined\" border=\"start\" class=\"mb-4\">\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress Info -->\n  <div v-if=\"statusText && !errorMessage\">\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear :model-value=\"progressPercent\" height=\"10\" color=\"primary\" rounded striped></v-progress-linear>\n\n    <p class=\"mt-3 mb-0 text-body-2\" v-if=\"currentImage\">\n      Currently segmenting:\n      <strong>{{ currentImage }}</strong>\n    </p>\n  </div>\n\n  <div v-else-if=\"!errorMessage\" class=\"text-disabled mt-4\">\n    Awaiting segmentation status...\n  </div>\n</template>\n\n<script>\n  export default {\n  props: {\n    msg: Object,\n  },\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n  computed: {\n    // Active segmentation means: we have a status and it isn't \"Done\"\n    isSegmenting() {\n      return (\n        this.statusText &&\n        !this.statusText.toLowerCase().includes(\"done\") &&\n        !this.statusText.toLowerCase().includes(\"idle\") &&\n        !this.errorMessage\n      );\n    },\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.topic || !msg.payload) return;\n\n        const p = msg.payload;\n\n        // Reset message fields\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.statusText = \"\";\n\n        // 1️⃣ Load dataset info from message payload if available\n        if (\n          p.seg_project_name ||\n          p.seg_sample_id ||\n          p.seg_acquisition_id ||\n          p.seg_path\n        ) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        // 2️⃣ Handle status/segmenter messages\n        if (msg.topic === \"status/segmenter\") {\n          const status = p.status || \"\";\n\n          // Detect error messages\n          if (status.toLowerCase().includes(\"exception\")) {\n            this.errorMessage = status;\n            this.statusText = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n            return;\n          }\n\n          // Detect \"done\" or \"idle\"\n          if (status.toLowerCase().includes(\"done\") || status.toLowerCase().includes(\"idle\")) {\n            this.statusText = status;\n            this.segment.dataset = {\n              project_name: \"\",\n              sample_id: \"\",\n              acquisition_id: \"\",\n              path: \"\",\n            };\n            this.currentImage = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n            return;\n          }\n\n          // Handle other status or info messages\n          if (!status.toLowerCase().includes(\"image\")) {\n            this.infoMessage = status;\n            return;\n          }\n\n          // 3️⃣ Extract progress info if available\n          this.statusText = status;\n\n          const imgMatch = this.statusText.match(/image ([\\w\\-\\_\\.]+),/);\n          this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n          const progressMatch = this.statusText.match(/image (\\d+)\\/(\\d+)/);\n          if (progressMatch) {\n            this.currentIndex = Number(progressMatch[1]);\n            this.totalImages = Number(progressMatch[2]);\n            this.progressPercent = Math.round(\n              (this.currentIndex / this.totalImages) * 100\n            );\n            this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n          } else {\n            this.progressPercent = 0;\n            this.progressText = \"\";\n          }\n        }\n      },\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .text-disabled {\n    color: rgba(0, 0, 0, 0.4);\n  }\n</style>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 610,
-        "y": 240,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "cdb586337f186494",
-        "type": "switch",
-        "z": "0fd76ac156d78937",
-        "name": "",
-        "property": "payload.is_segmented",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "true"
-            },
-            {
-                "t": "false"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 2,
-        "x": 510,
-        "y": 140,
+        "id": "11323481847790c0",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "COMPLEXITY (Area vs Perimeter)",
+        "func": "// Complexity – Area vs Perimeter\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      area: parseFloat(val(r, \"object_area\")),\n      per: parseFloat(val(r, \"object_perim.\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 520,
+        "y": 760,
         "wires": [
-            [],
             [
-                "89d1bfb7839c2077"
+                "a7c8654291022da1"
             ]
         ]
     },
     {
-        "id": "f8f4b34842d35713",
+        "id": "8425012e07c3700f",
         "type": "function",
-        "z": "0fd76ac156d78937",
-        "name": "set seg_params",
-        "func": "if (msg.topic) {\n    global.set(\"seg_project_name\", msg.payload.dataset.project_name);\n    global.set(\"seg_sample_id\", msg.payload.dataset.sample_id);\n    global.set(\"seg_acquisition_id\", msg.payload.dataset.acquisition_id);\n    global.set(\"seg_path\", msg.payload.dataset.path);\n    global.set(\"process_min_ESD\", msg.payload.settings.process_min_ESD);\n}\nreturn msg;\n",
+        "z": "14f8c9b5ce1235cc",
+        "name": "TEXTURE (Area vs StdValue)",
+        "func": "// Texture – Area vs StdValue\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      area: parseFloat(val(r, \"object_area\")),\n      std: parseFloat(val(r, \"object_StdValue\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
         "outputs": 1,
-        "timeout": "",
+        "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 1180,
-        "y": 100,
+        "x": 500,
+        "y": 800,
         "wires": [
-            []
+            [
+                "ed9d6e31cc3a01b1"
+            ]
         ]
     },
     {
-        "id": "921be0438de344ac",
+        "id": "512e86195d14e773",
         "type": "function",
-        "z": "0fd76ac156d78937",
-        "name": "Get Global Variables",
-        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "z": "14f8c9b5ce1235cc",
+        "name": "SOLIDITY (Histogram)",
+        "func": "// Solidity – histogram of object_solidity\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const idx = headers.indexOf(col);\n    return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n    .filter(l => !l.startsWith(\"[\"))\n    .map(l => {\n        const r = l.split(\"\\t\");\n        return {\n            sol: parseFloat(val(r, \"object_solidity\"))\n        };\n    });\n\nmsg.payload = { data };\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 120,
-        "y": 200,
+        "x": 480,
+        "y": 840,
         "wires": [
             [
-                "33c0d1b8251b5d00"
+                "c15ef66d7e115bd3"
             ]
         ]
     },
     {
-        "id": "89d1bfb7839c2077",
+        "id": "0c90eb450c8d9b01",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "90b33e458dd29d04",
+        "page": "",
+        "ui": "",
+        "name": "Heatmap",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:300px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0 0%,#f5f5f5 50%,#e0e0e0 100%);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk {\n  0% { background-position:200% 0; }\n  100% { background-position:-200% 0; }\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, points:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0){\n          this.loading = true;\n          this.points = [];\n          if(this.$refs.plot && window.Plotly) window.Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.points = m.payload.data || [];\n        this.loading = this.points.length === 0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n      if(!el) return;\n\n      if(!this.points.length){\n        this.loading=true;\n        window.Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.points.map(p=>p.x),\n        y:this.points.map(p=>p.y),\n        type:'histogram2d',\n        colorscale:'Plotly3',\n        nbinsx:100,\n        nbinsy:80\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:40,r:20},\n        xaxis:{title:\"X (px)\"},\n        yaxis:{title:\"Y (px)\",autorange:\"reversed\"},\n        hovermode:false,\n        plot_bgcolor:\"#eef3ff\"\n      };\n\n      window.Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 920,
+        "y": 520,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "9be1cc713ac79a7b",
         "type": "function",
-        "z": "0fd76ac156d78937",
-        "name": "add process_min_ESD",
-        "func": "// Ensure msg.payload and msg.payload.settings exist\nmsg.payload = msg.payload || {};\n\n// Read the variable from global context\nconst process_min_ESD = global.get(\"process_min_ESD\");\n\n// Add it to the payload settings\nmsg.payload.process_min_ESD = process_min_ESD;\nmsg.payload.open_dialog = true;\n\n// Return the modified message\nreturn msg;\n",
+        "z": "14f8c9b5ce1235cc",
+        "name": "Sample Identity Metadata Only",
+        "func": "// FUNCTION: Extract minimal metadata for the “Sample Identity” panel\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const idx = headers.indexOf(col);\n    return idx >= 0 ? row[idx] : null;\n};\n\n// --- 1. Find first data row (skip [f] / [t] metadata-like lines) ---\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    if (!lines[i].trim().startsWith(\"[\")) {\n        firstRow = lines[i].split(\"\\t\");\n        break;\n    }\n}\nif (!firstRow) return null;\n\n// --- 2. Extract minimal metadata ---\nconst meta = {\n    sample_id: val(firstRow, \"sample_id\") || \"\",\n    project: val(firstRow, \"sample_project\") || \"\",\n    acq_id: val(firstRow, \"acq_id\") || \"\"\n};\n\n// --- 3. Output ONLY the metadata ---\nmsg.payload = { meta };\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 680,
-        "y": 140,
+        "x": 510,
+        "y": 440,
         "wires": [
             [
-                "7fde0897e436c334"
+                "2ca2f83cc939607f"
             ]
         ]
     },
     {
-        "id": "eed6aba5c7ab3b6c",
-        "type": "debug",
-        "z": "0fd76ac156d78937",
-        "name": "debug 5",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 320,
-        "y": 460,
-        "wires": []
+        "id": "0a559ab05af2548e",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "47800358cf7cee25",
+        "page": "",
+        "ui": "",
+        "name": "ESD Histogram",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:300px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) window.Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        window.Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.d),\n        type:\"histogram\",\n        marker:{color:\"teal\"}\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:40,r:20},\n        xaxis:{title:\"ESD\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 940,
+        "y": 560,
+        "wires": [
+            []
+        ]
     },
     {
-        "id": "7fde0897e436c334",
+        "id": "7b9d103ec5981051",
         "type": "ui-template",
-        "z": "0fd76ac156d78937",
-        "group": "",
-        "page": "7a4e042a60b734a6",
+        "z": "14f8c9b5ce1235cc",
+        "group": "1d9c6927a0e0a71b",
+        "page": "",
         "ui": "",
-        "name": "Dialog",
-        "order": 2,
+        "name": "Timeline",
+        "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  // ⚠️ no props / no lifecycle hooks in ui-template\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: 0,\n      hasSeenFirstMsg: false, // ← ignore the first msg (replayed by Dashboard)\n    };\n  },\n\nwatch: {\n  msg: {\n    immediate: true,\n    deep: true,\n    handler(msg) {\n\n      // Always force dialog closed unless explicitly opened\n      this.showDialog = false;\n\n      // Ignore the first replayed message\n      if (!this.hasSeenFirstMsg) {\n        this.hasSeenFirstMsg = true;\n        return;\n      }\n\n      // 🚫 No message or empty payload -> abort immediately\n      if (!msg || !msg.payload || typeof msg.payload !== \"object\") {\n        return;\n      }\n\n      // Now we know there is a real payload\n      this.payload = msg.payload;\n\n      // Sync ESD if provided\n      this.process_min_ESD =\n        typeof msg.payload.process_min_ESD !== \"undefined\"\n          ? msg.payload.process_min_ESD\n          : 0;\n\n      // 🚫 Require ALL keys — otherwise NO dialog\n      const shouldOpen =\n        msg.payload.open_dialog === true &&\n        msg.payload.is_segmented === false &&\n        typeof msg.payload.path === \"string\" &&\n        msg.payload.path.length > 0;\n\n      this.showDialog = shouldOpen;\n    },\n  },\n},\n\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
+        "format": "<template>\n  <div style=\"width:100%; min-height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" ></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.seq),\n        y:this.rows.map(r=>r.area),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{size:10,color:\"blue\",opacity:0.5},\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Acq Sequence\"},\n        yaxis:{title:\"Area\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
-        "templateScope": "widget:page",
+        "templateScope": "local",
         "className": "",
-        "x": 850,
-        "y": 140,
+        "x": 920,
+        "y": 600,
         "wires": [
-            [
-                "24c71b69e60e41bd"
-            ]
+            []
         ]
     },
     {
-        "id": "77bb783e65c3ffd6",
-        "type": "ui-event",
+        "id": "23a78a078fa1eca8",
+        "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 80,
-        "y": 40,
+        "group": "03ad1c8f517e8769",
+        "page": "",
+        "ui": "",
+        "name": "Colorspace (Saturation vs Value)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0 0%,#f5f5f5 50%,#e0e0e0 100%);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk {\n  0% {background-position:200% 0;}\n  100% {background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot && window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.s),\n        y:this.pts.map(p=>p.v),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"magenta\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Saturation\"},\n        yaxis:{title:\"Brightness\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 990,
+        "y": 640,
         "wires": [
-            [
-                "55814595d9207e95"
-            ]
+            []
         ]
     },
     {
-        "id": "55814595d9207e95",
-        "type": "switch",
+        "id": "09f4914fc0a54566",
+        "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
+        "group": "0be15f8190e6fd43",
+        "page": "",
+        "ui": "",
+        "name": "Aspect (Width vs Height)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk {\n  0% {background-position:200% 0;}\n  100% {background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.w),\n        y:this.pts.map(p=>p.h),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"orange\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Width\"},\n        yaxis:{title:\"Height\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 970,
+        "y": 680,
         "wires": [
-            [
-                "90c920ecdab16908"
-            ]
+            []
         ]
     },
     {
-        "id": "90c920ecdab16908",
-        "type": "switch",
+        "id": "7f4d047a4c73eb61",
+        "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "name": "msg.payload.page.path === \"/visualization\"",
-        "property": "payload.page.path",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "/visualization",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 590,
-        "y": 40,
+        "group": "1edc962c44888abc",
+        "page": "",
+        "ui": "",
+        "name": "Greenness",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk { \n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.g),\n        y:this.pts.map(p=>p.circ),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"#4CAF50\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Green Index\"},\n        yaxis:{title:\"Circularity\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 930,
+        "y": 720,
         "wires": [
-            [
-                "164baa371893de7a"
-            ]
+            []
+        ]
+    },
+    {
+        "id": "a7c8654291022da1",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "67c63cc92c23c4b1",
+        "page": "",
+        "ui": "",
+        "name": "Complexity (Area vs Perimeter)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton{\n  width:100%; height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite; border-radius:6px;\n}\n@keyframes psk{\n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true; this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.area),\n        y:this.pts.map(p=>p.per),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"purple\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Area\"},\n        yaxis:{title:\"Perimeter\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 990,
+        "y": 760,
+        "wires": [
+            []
         ]
     },
     {
-        "id": "75b694eff7cf6747",
+        "id": "ed9d6e31cc3a01b1",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "1d3abb201c51ff47",
+        "group": "95a152a68b7ba779",
         "page": "",
         "ui": "",
-        "name": "Navigation Bottom",
+        "name": "Texture (Area vs Std)",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton{\n  width:100%; height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite; border-radius:6px;\n}\n@keyframes psk{\n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.area),\n        y:this.pts.map(p=>p.std),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"brown\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Area\"},\n        yaxis:{title:\"Texture (Std Dev)\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1290,
-        "y": 160,
+        "x": 960,
+        "y": 800,
         "wires": [
             []
         ]
     },
     {
-        "id": "fe2e976833fd41a9",
+        "id": "c15ef66d7e115bd3",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "b570f76ef526af45",
+        "group": "1baa943e505febf1",
         "page": "",
         "ui": "",
-        "name": "Navigation Top",
+        "name": "Solidity Histogram",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton{\n  width:100%; height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite; border-radius:6px;\n}\n@keyframes psk{ \n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.sol),\n        type:\"histogram\",\n        marker:{color:\"#3F51B5\"}\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Solidity\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1300,
-        "y": 40,
+        "x": 950,
+        "y": 840,
         "wires": [
             []
         ]
     },
     {
-        "id": "164baa371893de7a",
-        "type": "list segmentations",
+        "id": "63ce87d36ae8f172",
+        "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "name": "",
-        "x": 170,
-        "y": 180,
+        "name": "EXPLORER",
+        "func": "// Explorer Function Node\n// TSV → {meta, keys, data: [{id, url, ...keys}]}\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\n// 1. Parse Headers\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const i = headers.indexOf(col);\n    return i >= 0 ? row[i] : null;\n};\n\n// 2. Extract Meta from first valid data row\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    // Skip rows starting with '[' (metadata comments)\n    if (!lines[i].trim().startsWith(\"[\")) {\n        firstRow = lines[i].split(\"\\t\");\n        break;\n    }\n}\n\n// Default meta\nconst meta = {\n    sample_id: \"\",\n    project: \"\",\n    acq_id: \"\",\n    resolution: 1.0 // Default fallback\n};\n\nif (firstRow) {\n    meta.sample_id = val(firstRow, \"sample_id\") || \"\";\n    meta.project = val(firstRow, \"sample_project\") || \"\";\n    meta.acq_id = val(firstRow, \"acq_id\") || \"\";\n    \n    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\"\n];\n\nlet seq = 0;\nconst data = [];\n\n// 4. Process Data Lines\nfor (let i = 1; i < lines.length; i++) {\n    const line = lines[i];\n    if (line.trim().startsWith(\"[\")) continue;\n\n    const row = line.split(\"\\t\");\n\n    const item = {\n        id: val(row, \"object_id\"),\n        // Construct URL\n        url: `/ps/data/browse/api/preview/big/objects/${val(row,\"object_date\")}/${val(row,\"sample_id\")}/${val(row,\"acq_id\")}/${val(row,\"img_file_name\")}`,\n        sequence_index: seq++\n    };\n\n    // Parse numeric keys\n    explorerKeys.forEach(k => {\n        let v = parseFloat(val(row, k));\n        item[k] = isNaN(v) ? 0 : v;\n    });\n\n    // Custom calc for greenness (example)\n    const hue = item.object_MeanHue || 0;\n    const dist = Math.abs(hue - 80);\n    item.custom_greenness = Math.max(0, 100 - dist);\n\n    data.push(item);\n}\n\nmsg.payload = {\n    meta,\n    keys: explorerKeys,\n    data\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 450,
+        "y": 920,
         "wires": [
             [
-                "18a10804663dbaa1"
+                "d57a5bca66c04989"
             ]
         ]
     },
     {
-        "id": "6532974092861ef7",
-        "type": "ui-table",
+        "id": "d57a5bca66c04989",
+        "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "fa6393a7d7e3b7d7",
-        "name": "List of acq",
-        "label": "",
+        "group": "c5651e1a3e56f3f5",
+        "page": "",
+        "ui": "",
+        "name": "Explorer",
         "order": 1,
         "width": 0,
         "height": 0,
-        "maxrows": "10",
-        "passthru": false,
-        "autocols": false,
-        "showSearch": true,
-        "deselect": true,
-        "selectionType": "click",
-        "columns": [
-            {
-                "title": "Project name",
-                "key": "project_name",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Sample ID",
-                "key": "sample_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Acquisition ID",
-                "key": "acquisition_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Number of objects",
-                "key": "image_acquired_count",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Gallery",
-                "key": "gallery",
-                "keyType": "key",
-                "type": "link",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Download",
-                "key": "export",
-                "keyType": "key",
-                "type": "link",
-                "width": "",
-                "align": "start"
-            }
-        ],
-        "mobileBreakpoint": "sm",
-        "mobileBreakpointType": "defaults",
-        "action": "replace",
-        "x": 650,
-        "y": 180,
+        "head": "",
+        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              contain\n              class=\"mb-3\"\n            >\n              <template #placeholder>\n                <div class=\"d-flex align-center justify-center fill-height\">\n                  <v-progress-circular indeterminate color=\"primary\"></v-progress-circular>\n                </div>\n              </template>\n            </v-img>\n\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    v-if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\"\n      s.onload = () => this.draw()\n      document.head.appendChild(s)\n    } else this.draw()\n  },\n\n  computed: {\n    // Calculate a nice round number for the scale bar length (e.g. 50um, 100um)\n    // based on the size of the current object.\n    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      // 1. Get real width of object in microns\n      // Fallback to 100px if object_width is missing\n      const objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * this.meta.resolution;\n\n      // 2. Target bar size ~ 25% of the object width\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\n      // 3. Snap to nearest nice number (10, 20, 50, 100, 200, 500...)\n      const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n      const residual = target / magnitude;\n      \n      let niceScalar = 1;\n      if (residual > 5) niceScalar = 10;\n      else if (residual > 2) niceScalar = 5;\n      else niceScalar = 2;\n\n      return niceScalar * magnitude;\n    },\n\n    scaleBarPixels() {\n      // Resolution = Microns per Pixel\n      // Pixels = Microns / Resolution\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} µm`\n    }\n  },\n\n  methods: {\n    fmt(v) { return typeof v === \"number\" ? v.toFixed(2) : v },\n\n    draw() {\n      if (!window.Plotly || !this.items.length) return\n\n      this.loading = false\n      const el = this.$refs.plot\n\n      const trace = {\n        x: this.items.map(d => d[this.xAxis]),\n        y: this.items.map(d => d[this.yAxis]),\n        mode: 'markers',\n        type: 'scatter',\n        hoverinfo: 'none',\n        marker: {\n          size: 8,\n          color: '#1976D2',\n          opacity: 0.6,\n          line: { width: 1, color: 'white' }\n        }\n      }\n\n      const layout = {\n        margin: { t: 20, b: 40, l: 50, r: 20 },\n        xaxis: { title: this.xAxis },\n        yaxis: { title: this.yAxis },\n        hovermode: 'closest',\n        dragmode: 'zoom',\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff'\n      }\n\n      Plotly.newPlot(el, [trace], layout, { responsive: true })\n        .then(() => {\n          el.on(\"plotly_hover\", ev => {\n            const i = ev.points[0].pointIndex\n            this.hovered = this.items[i]\n          })\n          el.on(\"plotly_unhover\", () => {\n            this.tooltip.show = false\n          })\n        })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.plot-container {\n  width: 100%;\n  height: 600px;\n}\n\n.ps-skeleton {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  animation: shimmer 1.5s infinite;\n  border-radius: 4px;\n}\n\n@keyframes shimmer {\n  0% { background-position: -200px 0; }\n  100% { background-position: 200px 0; }\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* Prevent the bar from shrinking */\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\n  /* Add tick marks */\n  border-left: 1px solid #333;\n  border-right: 1px solid #333;\n}\n\n.scale-label {\n  font-size: 11px;\n  text-align: center;\n  color: #555;\n  font-weight: 600;\n}\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 920,
+        "y": 920,
         "wires": [
             []
         ]
     },
     {
-        "id": "18a10804663dbaa1",
+        "id": "384aa9ab83bfe566",
         "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "name": "function 1",
-        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/files/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\n\nreturn msg;\n",
+        "name": "Clearing plots",
+        "func": "// This function clears the plot by sending an empty data array.\n// Any template using msg.payload.data will immediately purge the plot.\n\nmsg.payload = {\n    data: []\n};\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 360,
-        "y": 180,
+        "x": 580,
+        "y": 380,
         "wires": [
             [
-                "6532974092861ef7"
+                "0c90eb450c8d9b01",
+                "0a559ab05af2548e",
+                "7b9d103ec5981051",
+                "23a78a078fa1eca8",
+                "09f4914fc0a54566",
+                "7f4d047a4c73eb61",
+                "a7c8654291022da1",
+                "ed9d6e31cc3a01b1",
+                "c15ef66d7e115bd3",
+                "2ca2f83cc939607f",
+                "d57a5bca66c04989",
+                "4244d2ed880cca66"
             ]
         ]
     },
     {
-        "id": "64ae825a687fb054",
-        "type": "ecotaxa",
-        "z": "8555b76c53e789e0",
-        "name": "Import to Ecotaxa Project",
-        "api_url": "https://ecotaxa.obs-vlfr.fr/api/",
-        "project_id": "9366",
-        "x": 830,
-        "y": 300,
+        "id": "9abf70a949e76eaf",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "GALLERY",
+        "func": "// GALLERY Function Node\n// TSV → { data: [], meta: { resolution: ... }, keys: ... }\n\n// 1. Handle Clear Signals\nif (msg.clear === true || (msg.payload && msg.payload.clear === true)) {\n    msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n    return msg;\n}\n\n// 2. Validate Payload\nif (!msg.payload) return null;\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) {\n    msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n    return msg;\n}\n\n// 3. Parse Headers\nconst headers = lines[0].split('\\t');\nconst get = (row, key) => {\n    const idx = headers.indexOf(key);\n    return idx >= 0 ? row[idx] : null;\n};\n\n// 4. Extract Meta (Resolution is key here)\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    const L = lines[i].trim();\n    if (!L.startsWith('[') && L !== '') {\n        firstRow = lines[i].split('\\t');\n        break;\n    }\n}\n\nconst meta = {\n    sample_id: 'N/A',\n    project: 'N/A',\n    acq_id: 'N/A',\n    resolution: 1.0 // Default fallback\n};\n\nif (firstRow) {\n    meta.sample_id = get(firstRow, 'sample_id') || \"\";\n    meta.project   = get(firstRow, 'sample_project') || \"\";\n    meta.acq_id    = get(firstRow, 'acq_id') || \"\";\n\n    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\"\n];\n\nconst data = [];\n\n// 6. Process Rows\nfor (let i = 1; i < lines.length; i++) {\n    const rowLine = lines[i].trim();\n    if (rowLine.startsWith('[') || rowLine === '') continue;\n\n    const row = rowLine.split('\\t');\n    if (row.length !== headers.length) continue;\n\n    const item = {\n        id: get(row, 'object_id'),\n        // Construct Image URL\n        url: `/ps/data/browse/api/preview/big/objects/${get(row, 'object_date')}/${get(row, 'sample_id')}/${get(row, 'acq_id')}/${get(row, 'img_file_name')}`\n    };\n\n    // Parse numeric values\n    usefulKeys.forEach(k => {\n        let v = parseFloat(get(row, k));\n        item[k] = isNaN(v) ? 0 : v;\n    });\n\n    data.push(item);\n}\n\nmsg.payload = {\n    data,\n    keys: usefulKeys,\n    meta\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 440,
+        "y": 1000,
         "wires": [
             [
-                "c21f20a7a9902ee4"
+                "4244d2ed880cca66"
             ]
         ]
     },
     {
-        "id": "af1ec6323cc00231",
-        "type": "inject",
-        "z": "8555b76c53e789e0",
-        "name": "Lancer import",
-        "props": [],
-        "repeat": "",
-        "crontab": "",
-        "once": false,
-        "onceDelay": "0",
-        "topic": "",
-        "x": 310,
+        "id": "d77ed8081a657507",
+        "type": "delay",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 180,
+        "y": 340,
+        "wires": [
+            [
+                "5ec998719a884cfe"
+            ]
+        ]
+    },
+    {
+        "id": "9e5c5ec670e343cf",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "",
+        "page": "d129fac8e7742d5b",
+        "ui": "",
+        "name": "CSS (This page)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": ".plot-container.plotly {\n      height: 100%;\n}\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 1300,
+        "y": 100,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "9a10d9afb1a0b1ca",
+        "type": "switch",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "neq",
+                "v": "$pageview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 170,
         "y": 300,
         "wires": [
             [
-                "28f8eb0318735246"
+                "d77ed8081a657507"
             ]
         ]
     },
     {
-        "id": "c21f20a7a9902ee4",
+        "id": "543715b9199cdb72",
         "type": "debug",
-        "z": "8555b76c53e789e0",
-        "name": "Show import result",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 5",
         "active": true,
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "payload",
-        "targetType": "msg",
+        "complete": "false",
         "statusVal": "",
         "statusType": "auto",
-        "x": 1110,
-        "y": 300,
+        "x": 700,
+        "y": 40,
         "wires": []
     },
     {
-        "id": "28f8eb0318735246",
-        "type": "function",
-        "z": "8555b76c53e789e0",
-        "name": "Set file_path",
-        "func": "msg.payload = {}\nmsg.payload.file_path = \"/home/pi/data/export/ecotaxa/ecotaxa_A_2.zip\"\n\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 570,
-        "y": 300,
-        "wires": [
-            [
-                "64ae825a687fb054",
-                "1457a0786f787415"
-            ]
-        ]
-    },
-    {
-        "id": "1457a0786f787415",
+        "id": "72c774fc51af957b",
         "type": "debug",
-        "z": "8555b76c53e789e0",
-        "name": "debug 9",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 1",
         "active": true,
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
+        "complete": "payload",
+        "targetType": "msg",
         "statusVal": "",
         "statusType": "auto",
-        "x": 820,
-        "y": 200,
+        "x": 400,
+        "y": 140,
         "wires": []
     },
     {
@@ -4149,8 +5245,8 @@
         "ui": "",
         "name": "body",
         "order": 1,
-        "width": "12",
-        "height": "6",
+        "width": "0",
+        "height": "0",
         "head": "",
         "format": "<template>\n  <v-container>\n    <v-row>\n      <!-- Step 1: White Balance -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_saturation_level\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-eyedropper-variant</v-icon>\n          <v-card-title class=\"text-h6\">White Balance</v-card-title>\n          <v-card-text>\n            Use the color picker to measure the current color values and adjust the white balance accordingly.\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n      <!-- Step 2: Lightness -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_lightness\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-brightness-6</v-icon>\n          <v-card-title class=\"text-h6\">Lightness</v-card-title>\n          <v-card-text>\n            Measure the current lightness value and update the LED intensity or ISO if below optimal levels.\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n      <!-- Step 3: Pixel Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_pixel_size\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-ruler</v-icon>\n          <v-card-title class=\"text-h6\">Pixel Size</v-card-title>\n          <v-card-text>\n            Place markers on the micrometric ruler image to calculate the pixel size in microns per pixel.\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n      <!-- Step 4: Pump Calibration -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_pump\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-water-pump</v-icon>\n          <v-card-title class=\"text-h6\">Pump Calibration</v-card-title>\n          <v-card-text>\n            Measure the transferred volume and adjust pump steps to improve accuracy in fluid handling.\n          </v-card-text>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
@@ -4237,31 +5333,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "a0df077ddbb184e3"
-            ]
-        ]
-    },
-    {
-        "id": "a0df077ddbb184e3",
-        "type": "switch",
-        "z": "6426e7bea6900426",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "874fd69a5398300e"
@@ -4285,7 +5356,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 640,
+        "x": 380,
         "y": 40,
         "wires": [
             [
@@ -4307,54 +5378,11 @@
         "libs": [],
         "x": 120,
         "y": 140,
-        "wires": [
-            [
-                "94a287dea58faa4d",
-                "b8b60ce8a0cf6764"
-            ]
-        ]
-    },
-    {
-        "id": "94a287dea58faa4d",
-        "type": "ui-template",
-        "z": "6426e7bea6900426",
-        "group": "af8acdfe9afbad74",
-        "page": "",
-        "ui": "",
-        "name": "Calibration - WB",
-        "order": 2,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "\n<template>\n  <v-container fluid>\n    <v-row>\n      <!-- PREVIEW : 8 colonnes -->\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n        </v-card>\n      </v-col>\n\n      <!-- CONTROL PANEL : 4 colonnes -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4\">\n          <v-card-title class=\"text-left text-primary\">\n            White Balance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 1 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Refresh</h3>\n            <p class=\"text-caption mb-3\">\n              Click <b>Refresh the value of the gains</b> to start.\n            </p>\n            <v-btn block color=\"error\" class=\"mb-4\" @click=\"refreshGain\">\n              Refresh\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 2 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Pick a Pixel</h3>\n            <p class=\"text-caption mb-3\">Pick a pixel from the live stream.</p>\n\n            <div class=\"text-center mb-3\">\n              Pick a pixel from the stream :\n              <input class=\"colorpicker\" type=\"color\" v-model=\"selectedColor\" @input=\"onColorInput\"/>\n            </div>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 3 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">3. Apply Suggested Gains</h3>\n\n            <v-data-table :items=\"rows\" density=\"comfortable\" hide-default-footer class=\"gain-table mb-6\">\n              <template #item.current=\"{ item }\">\n                <div class=\"text-center font-mono\">{{ item.current }}</div>\n              </template>\n              <template #item.suggested=\"{ item }\">\n                <v-text-field v-model.number=\"item.suggested\" type=\"number\" min=\"0\" hide-details density=\"compact\"\n                  variant=\"underlined\" class=\"text-primary text-center suggested-input\"\n                  @change=\"onManualEdit(item.channel,item.suggested)\" />\n              </template>\n            </v-data-table>\n\n            <p class=\"text-caption mb-3\">\n              Click <b>Apply Suggested Gains</b> after selecting your pixel.\n            </p>\n\n            <v-btn block color=\"primary\" class=\"mt-auto\" :disabled=\"!suggested.red && !suggested.blue\"\n              @click=\"applySuggested\">\n              Apply Suggested Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 4 -->\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">4. Repeat Until Saturation ≈ 0%</h3>\n            <p class=\"text-caption\">\n              Repeat steps 10 times until the saturation value approaches <b>0%</b>.\n            </p>\n\n            <div class=\"mb-2\" :style=\"{ color: hsl.s < 10 ? 'green' : hsl.s < 30 ? 'orange' : 'red' }\">\n              Current saturation: <b>{{ hsl.s }} %</b>\n            </div>\n\n            <div class=\"mb-4 text-center text-caption\">\n              <v-progress-linear :model-value=\"(loopCount / totalLoops) * 100\" color=\"primary\" height=\"40\"\n                class=\"rounded mb-1\" />\n\n              <div>\n                <template v-if=\"loopCount === 0\">\n                  Start calibration — click <b>Refresh</b>.\n                </template>\n                <template v-else-if=\"loopCount < totalLoops\">\n                  Iteration {{ loopCount }} / {{ totalLoops }} — sample & apply.\n                </template>\n                <template v-else>\n                  ✅ Calibration complete! Saturation should be near <b>0%</b>.\n                </template>\n              </div>\n            </div>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      selectedColor: \"#ffffff\",\n      hsl: { h: 0, s: 0, l: 0 },\n      loopCount: 0,\n      totalLoops: 10,\n      headers: [\n        { text: \"Channel\", value: \"channel\", align: \"start\" },\n        { text: \"Current\", value: \"current\", align: \"center\" },\n        { text: \"Suggested\", value: \"suggested\", align: \"center\" },\n      ],\n    };\n  },\n  computed: {\n    rows() {\n      return [\n        { channel: \"AWRed\", current: this.current.red, suggested: this.suggested.red },\n        { channel: \"AWBlue\", current: this.current.blue, suggested: this.suggested.blue },\n      ];\n    },\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.calibration_wbg_red !== undefined)\n          this.current.red = Number(p.calibration_wbg_red);\n        if (p.calibration_wbg_blue !== undefined)\n          this.current.blue = Number(p.calibration_wbg_blue);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: { white_balance_gain: this.current },\n      });\n    },\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    onColorInput(e) {\n      const hex = e.target.value;\n      this.selectedColor = hex;\n      this.hsl = this.hexToHsl(hex);\n      const { r, g, b } = this.hexToRgb(hex);\n      const redAdj = g - r + this.current.red;\n      const blueAdj = g - b + this.current.blue;\n      this.suggested.red = Math.max(0, Math.min(255, Math.round(redAdj)));\n      this.suggested.blue = Math.max(0, Math.min(255, Math.round(blueAdj)));\n    },\n    onManualEdit(ch, v) {\n      if (ch === \"AWRed\") this.suggested.red = v;\n      if (ch === \"AWBlue\") this.suggested.blue = v;\n    },\n    applySuggested() {\n      if (!this.suggested.red && !this.suggested.blue) return;\n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: parseInt(this.suggested.red, 10),\n            blue: parseInt(this.suggested.blue, 10),\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      this.current = { ...this.suggested };\n      if (this.loopCount < this.totalLoops) this.loopCount++;\n    },\n    hexToRgb(h) {\n      return {\n        r: parseInt(h.substr(1, 2), 16),\n        g: parseInt(h.substr(3, 2), 16),\n        b: parseInt(h.substr(5, 2), 16),\n      };\n    },\n    hexToHsl(hex) {\n      const { r, g, b } = this.hexToRgb(hex);\n      const rn = r / 255, gn = g / 255, bn = b / 255;\n      const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);\n      const l = (max + min) / 2;\n      let h = 0, s = 0;\n      if (max !== min) {\n        const d = max - min;\n        s = d / (1 - Math.abs(2 * l - 1));\n        switch (max) {\n          case rn: h = ((gn - bn) / d) % 6; break;\n          case gn: h = (bn - rn) / d + 2; break;\n          case bn: h = (rn - gn) / d + 4; break;\n        }\n        h *= 60;\n      }\n      return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 1000px; height: 750px; border: none; pointer-events: none; }\n.gain-table { border-radius: 8px; background: #fafafa; border: 1px solid #cfd8dc; }\n.table-header-title { background: #e3f2fd; font-weight: 600; font-size: 15px; }\n.suggested-input { max-width: 80px; margin: auto; }\n.colorpicker { height: 28px; width: 60px; margin-left: 8px; border: 1px solid #999; border-radius: 4px; cursor: pointer; vertical-align: middle; }\n</style>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 400,
-        "y": 140,
-        "wires": [
-            [
-                "615edad94a4f77e7"
-            ]
-        ]
-    },
-    {
-        "id": "9c40c3932475ea84",
-        "type": "debug",
-        "z": "6426e7bea6900426",
-        "name": "debug 1",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 940,
-        "y": 260,
-        "wires": []
+        "wires": [
+            [
+                "5ec541d6e203def5"
+            ]
+        ]
     },
     {
         "id": "e52cb70984e0d25d",
@@ -4387,23 +5415,6 @@
             []
         ]
     },
-    {
-        "id": "b8b60ce8a0cf6764",
-        "type": "debug",
-        "z": "6426e7bea6900426",
-        "name": "debug 2",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 320,
-        "y": 220,
-        "wires": []
-    },
     {
         "id": "615edad94a4f77e7",
         "type": "switch",
@@ -4421,13 +5432,38 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 650,
-        "y": 180,
+        "x": 590,
+        "y": 140,
         "wires": [
             [
                 "d8f732f8fe251222",
-                "e52cb70984e0d25d",
-                "9c40c3932475ea84"
+                "e52cb70984e0d25d"
+            ]
+        ]
+    },
+    {
+        "id": "5ec541d6e203def5",
+        "type": "ui-template",
+        "z": "6426e7bea6900426",
+        "group": "af8acdfe9afbad74",
+        "page": "",
+        "ui": "",
+        "name": "Calibration - WB",
+        "order": 2,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n          <v-card-title class=\"text-left text-primary\">\n            White Balance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Refresh</h3>\n            <p class=\"text-caption mb-3\">\n              Click <b>Refresh Gains</b> to reset the calibration and start.\n            </p>\n            <v-btn block color=\"error\" class=\"mb-4\" @click=\"refreshGain\">\n              Refresh Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Sample Average Pixel (Auto)</h3>\n            <p class=\"text-caption mb-3\">\n              Average color sampled from the central **red box**.\n            </p>\n\n            <div class=\"d-flex align-center justify-center mb-3\">\n              <div\n                :style=\"{ 'background-color': `rgb(${sampledR}, ${sampledG}, ${sampledB})`, \n                          width: '40px', height: '40px', border: '2px solid #333', 'border-radius': '4px' }\"\n                class=\"mr-3\"\n              ></div>\n              <span class=\"font-mono text-subtitle-1\">\n                RGB: {{ sampledR }}, {{ sampledG }}, {{ sampledB }}\n              </span>\n            </div>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">3. Apply Suggested Gains</h3>\n\n            <v-data-table :items=\"rows\" density=\"comfortable\" hide-default-footer class=\"gain-table mb-6\">\n              <template #item.current=\"{ item }\">\n                <div class=\"text-center font-mono\">{{ item.current }}</div>\n              </template>\n              <template #item.suggested=\"{ item }\">\n                <v-text-field v-model.number=\"item.suggested\" type=\"number\" min=\"0\" hide-details density=\"compact\"\n                  variant=\"underlined\" class=\"text-primary text-center suggested-input\"\n                  @change=\"onManualEdit(item.channel,item.suggested)\" />\n              </template>\n            </v-data-table>\n\n            <p class=\"text-caption mb-3\">\n              Click <b>Apply Suggested Gains</b> to send the new calibration values.\n            </p>\n\n            <v-btn block color=\"primary\" class=\"mt-auto\" :disabled=\"!suggested.red && !suggested.blue\"\n              @click=\"applySuggested\">\n              Apply Suggested Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">4. Repeat Until Saturation ≈ 0%</h3>\n            \n            <p class=\"text-caption\">\n              Repeat the cycle (Sample $\\rightarrow$ Apply) until the saturation is minimal.\n            </p>\n            \n            <div class=\"text-center mt-3 mb-4\">\n                <div \n                    class=\"text-h3 font-weight-bold\" \n                    :style=\"{ color: hsl.s < 5 ? 'green' : hsl.s < 15 ? 'orange' : 'red' }\"\n                >\n                    {{ hsl.s }} %\n                </div>\n                <div class=\"text-caption text-grey\">\n                    Current Saturation (Target: 0%)\n                </div>\n            </div>\n\n            <v-alert\n                :type=\"statusType\"\n                :icon=\"statusIcon\"\n                variant=\"tonal\"\n                density=\"compact\"\n            >\n              <div v-if=\"loopCount === 0\">\n                  <v-icon size=\"small\" icon=\"mdi-hand-pointing-up\" class=\"mr-1\"></v-icon>\n                  <span class=\"font-weight-bold\">Ready.</span> Click \"Refresh Gains\" to begin.\n              </div>\n              <div v-else-if=\"hsl.s < 5\">\n                  <v-icon size=\"small\" icon=\"mdi-star-four-points\" class=\"mr-1\"></v-icon>\n                  <span class=\"font-weight-bold\">Calibration Complete</span> ({{ loopCount }} Iterations)\n              </div>\n              <div v-else>\n                  <v-icon size=\"small\" icon=\"mdi-repeat\" class=\"mr-1\"></v-icon>\n                  Iteration <span class=\"font-weight-bold\">{{ loopCount }}</span> — Continue sampling & applying.\n              </div>\n            </v-alert>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      \n      sampledR: 0,\n      sampledG: 0,\n      sampledB: 0,\n\n      hsl: { h: 0, s: 0, l: 0 },\n      loopCount: 0, \n      \n      html2canvasReady: false,\n      captureInterval: null,\n    };\n  },\n  computed: {\n    rows() {\n      return [\n        { channel: \"AWRed\", current: this.current.red, suggested: this.suggested.red },\n        { channel: \"AWBlue\", current: this.current.blue, suggested: this.suggested.blue },\n      ];\n    },\n    statusType() {\n        if (this.loopCount === 0) return 'info';\n        if (this.hsl.s < 5) return 'success';\n        return 'warning';\n    },\n    statusIcon() {\n        if (this.loopCount === 0) return 'mdi-hand-pointing-up';\n        if (this.hsl.s < 5) return 'mdi-star-four-points';\n        return 'mdi-progress-alert';\n    }\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.calibration_wbg_red !== undefined)\n          this.current.red = Number(p.calibration_wbg_red);\n        if (p.calibration_wbg_blue !== undefined)\n          this.current.blue = Number(p.calibration_wbg_blue);\n      },\n      deep: true,\n    },\n  },\n  \n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // --------------------------------------------\n    // GENERAL METHODS\n    // --------------------------------------------\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    \n    // --------------------------------------------\n    // GAIN CONTROL\n    // --------------------------------------------\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: { white_balance_gain: this.current },\n      });\n    },\n\n    onManualEdit(ch, v) {\n      if (ch === \"AWRed\") this.suggested.red = v;\n      if (ch === \"AWBlue\") this.suggested.blue = v;\n    },\n\n    applySuggested() {\n      if (!this.suggested.red && !this.suggested.blue) return;\n      \n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: parseInt(this.suggested.red, 10),\n            blue: parseInt(this.suggested.blue, 10),\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      \n      this.current = { \n        red: parseInt(this.suggested.red, 10), \n        blue: parseInt(this.suggested.blue, 10) \n      };\n\n      this.loopCount++;\n    },\n    \n    // --------------------------------------------\n    // COLOR UTILITIES\n    // --------------------------------------------\n    rgbToHsl(r, g, b) {\n      const rn = r / 255, gn = g / 255, bn = b / 255;\n      const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);\n      const l = (max + min) / 2;\n      let h = 0, s = 0;\n      if (max !== min) {\n        const d = max - min;\n        s = d / (1 - Math.abs(2 * l - 1));\n        switch (max) {\n          case rn: h = ((gn - bn) / d) % 6; break;\n          case gn: h = (bn - rn) / d + 2; break;\n          case bn: h = (rn - gn) / d + 4; break;\n        }\n        h *= 60;\n      }\n      return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n    },\n    \n    // --------------------------------------------\n    // AUTO CAPTURE CONTROL (Always ON)\n    // --------------------------------------------\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureColorAndCalculateGains();\n      }, 500); // update rate\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // --------------------------------------------\n    // PIXEL CAPTURE FROM IFRAME (Core Logic)\n    // --------------------------------------------\n    async captureColorAndCalculateGains() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n\n        let sumR = 0, sumG = 0, sumB = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          sumR += pixelData[i];\n          sumG += pixelData[i + 1];\n          sumB += pixelData[i + 2];\n          count++;\n        }\n        \n        const avgR = count > 0 ? Math.round(sumR / count) : 0;\n        const avgG = count > 0 ? Math.round(sumG / count) : 0;\n        const avgB = count > 0 ? Math.round(sumB / count) : 0;\n\n        this.sampledR = avgR;\n        this.sampledG = avgG;\n        this.sampledB = avgB;\n        \n        this.hsl = this.rgbToHsl(avgR, avgG, avgB);\n        \n        const redAdj = avgG - avgR + this.current.red;\n        const blueAdj = avgG - avgB + this.current.blue;\n        \n        this.suggested.red = Math.max(0, Math.min(255, Math.round(redAdj)));\n        this.suggested.blue = Math.max(0, Math.min(255, Math.round(blueAdj)));\n\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe { \n  width: 100%;\n  height: 100%;\n  border: none; \n  pointer-events: none; \n}\n.calibration-container {\n  position: relative;\n}\n\n/* Styles for the visible sampling box overlay */\n.sampling-overlay {\n  position: absolute;\n  /* (1/3)x(1/3) of the parent size, centered */\n  width: calc(100% / 3); \n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red; \n  pointer-events: none; \n  z-index: 10;\n}\n\n/* Other styles */\n.gain-table { border-radius: 8px; background: #fafafa; border: 1px solid #cfd8dc; }\n.suggested-input { max-width: 80px; margin: auto; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 380,
+        "y": 140,
+        "wires": [
+            [
+                "615edad94a4f77e7"
             ]
         ]
     },
@@ -4480,31 +5516,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "068b250f8668e3ea"
-            ]
-        ]
-    },
-    {
-        "id": "068b250f8668e3ea",
-        "type": "switch",
-        "z": "14c685bd04db8be5",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "72dd2876e74c3ef2"
@@ -4528,7 +5539,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 620,
+        "x": 360,
         "y": 40,
         "wires": [
             [
@@ -4552,8 +5563,7 @@
         "y": 140,
         "wires": [
             [
-                "740188ac42d17f44",
-                "d41870c7f587821b"
+                "740188ac42d17f44"
             ]
         ]
     },
@@ -4569,13 +5579,13 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container\n    class=\"pa-4 d-flex flex-wrap justify-center align-start\"\n    style=\"gap:32px;\"\n  >\n    <!-- PREVIEW -->\n    <v-card\n      class=\"calibration-container\"\n      style=\"width:1000px;height:750px;position:relative;overflow:hidden\"\n    >\n      <iframe ref=\"previewFrame\" src=\"/preview\" class=\"calibration-iframe\"></iframe>\n\n\n\n    </v-card>\n\n    <!-- Control Panel -->\n    <v-card width=\"440\" class=\"px-4\">\n      <v-card-title class=\"text-left text-primary\">\n        Lightness Calibration\n      </v-card-title>\n\n      <!-- Calibration steps section -->\n      \n      <v-card-text class=\"mb-2 bg-surface-light pt-4\">\n        <div class=\"mb-1 text-subtitle-2 text-primary\"><b>Calibration steps</b></div>\n        <ol class=\"pl-4 text-caption text-grey-darken-2\">\n          <li>Step 1</li>\n          <li>Step 2</li>\n          <li>Step 3</li>\n          <li>Step 4</li>\n        </ol>\n      </v-card-text>\n\n      <v-divider class=\"mb-4\"></v-divider>\n\n    </v-card>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      led: 50,\n      axis: \"X\",\n      ctx: null,\n      interval: null,\n    };\n  },\n  mounted() {\n    this.ctx = this.$refs.histCanvas.getContext(\"2d\");\n    // Rafraîchit l’histogramme toutes les 500 ms\n    this.interval = setInterval(this.updateHistogram, 500);\n  },\n  beforeUnmount() {\n    clearInterval(this.interval);\n  },\n  methods: {\n    sendSettings() {\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: {\n          led_intensity: this.led,\n        },\n      });\n    },\n    sendUpdate(topic, payload) {\n      console.log(\"Sending update:\", topic, payload);\n      // Ici tu enverras ta requête (WebSocket, fetch, etc.)\n    },\n\n    async updateHistogram() {\n      try {\n        // Récupère une frame du flux (JPEG ou PNG)\n        const response = await fetch(\"/preview/snapshot\"); // endpoint à adapter\n        const blob = await response.blob();\n        const bitmap = await createImageBitmap(blob);\n\n        const offscreen = new OffscreenCanvas(bitmap.width, bitmap.height);\n        const ctxOff = offscreen.getContext(\"2d\");\n        ctxOff.drawImage(bitmap, 0, 0);\n\n        const { data, width, height } = ctxOff.getImageData(0, 0, bitmap.width, bitmap.height);\n\n        const histogram = this.axis === \"X\"\n          ? this.computeXHistogram(data, width, height)\n          : this.computeYHistogram(data, width, height);\n\n        this.drawHistogram(histogram);\n      } catch (err) {\n        console.warn(\"Histogram update failed:\", err);\n      }\n    },\n\n    computeXHistogram(data, width, height) {\n      const hist = new Array(width).fill(0);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = (y * width + x) * 4;\n          const v = (data[idx] + data[idx + 1] + data[idx + 2]) / 3;\n          hist[x] += v;\n        }\n      }\n      return hist.map((v) => v / height);\n    },\n\n    computeYHistogram(data, width, height) {\n      const hist = new Array(height).fill(0);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = (y * width + x) * 4;\n          const v = (data[idx] + data[idx + 1] + data[idx + 2]) / 3;\n          hist[y] += v;\n        }\n      }\n      return hist.map((v) => v / width);\n    },\n\n    drawHistogram(hist) {\n      const ctx = this.ctx;\n      const w = ctx.canvas.width;\n      const h = ctx.canvas.height;\n      ctx.clearRect(0, 0, w, h);\n      ctx.beginPath();\n      ctx.moveTo(0, h - hist[0] * h / 255);\n      for (let i = 1; i < hist.length; i++) {\n        const x = (i / hist.length) * w;\n        const y = h - (hist[i] * h) / 255;\n        ctx.lineTo(x, y);\n      }\n      ctx.strokeStyle = \"#00bcd4\";\n      ctx.lineWidth = 2;\n      ctx.stroke();\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1000px;\n  height: 750px;\n  border: none;\n  pointer-events: none;\n}\n.histogram-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 1000px;\n  height: 150px;\n  background: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- -------------------------------------------------------------\n               LED CONTROL\n          -------------------------------------------------------------- -->\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-3\">\n              <h3 class=\"text-subtitle-1 ma-0\">1. LED Control</h3>\n              <v-chip color=\"primary\" variant=\"flat\" class=\"font-mono\">\n                {{ currentLedValue.toFixed(12) }}\n              </v-chip>\n            </div>\n\n            <!-- DYNAMIC PRECISION BUTTONS (10⁻¹ → 10⁻¹⁵) -->\n            <div class=\"d-flex flex-wrap mb-4\" style=\"gap:6px;\">\n              <v-btn\n                v-for=\"(v, i) in stepList\"\n                :key=\"i\"\n                size=\"small\"\n                variant=\"outlined\"\n                :color=\"stepSize === v ? 'primary' : ''\"\n                @click=\"setStep(v)\"\n              >\n                {{ formatStep(v) }}\n              </v-btn>\n            </div>\n\n            <!-- SLIDER + BUTTONS -->\n            <v-row no-gutters class=\"align-center\">\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-minus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(-stepSize)\"\n                  class=\"mr-2\"\n                />\n              </v-col>\n\n              <v-col class=\"flex-grow-1\">\n                <v-slider\n                  v-model=\"currentLedValue\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.000001\"\n                  color=\"primary\"\n                  track-color=\"grey-lighten-2\"\n                  thumb-label\n                  hide-details\n                  @end=\"onSliderRelease\"\n                  class=\"align-center mt-0\"\n                ></v-slider>\n              </v-col>\n\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-plus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(+stepSize)\"\n                  class=\"ml-2\"\n                />\n              </v-col>\n            </v-row>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- -------------------------------------------------------------\n               LUMINANCE MEASUREMENT\n          -------------------------------------------------------------- -->\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-2\">\n              <h3 class=\"text-subtitle-1 ma-0\">2. Measured Luminance</h3>\n            </div>\n\n            <div class=\"text-center mb-2\">\n              <div class=\"text-h3 font-weight-bold\">\n                {{ currentLuminance.toFixed(0) }}\n              </div>\n              <div class=\"text-caption text-grey\">\n                Measured from central region of preview\n              </div>\n            </div>\n\n            <v-progress-linear\n              :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n              color=\"primary\"\n              height=\"20\"\n              rounded\n            >\n              <template #default=\"{ value }\">\n                <strong style=\"color:white; text-shadow: 0 0 2px black;\">\n                  {{ Math.round(currentLuminance) }}\n                </strong>\n              </template>\n            </v-progress-linear>\n          </section>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    // Generate steps: [1e-1, 1e-2, ..., 1e-15]\n    const list = [];\n    for (let i = 1; i <= 15; i++) {\n      list.push(Math.pow(10, -i));\n    }\n\n    return {\n      currentLedValue: 0.5,\n      currentLuminance: 0,\n      html2canvasReady: false,\n      captureInterval: null,\n\n      stepList: list,   // dynamic digit steps\n      stepSize: list[5] // default = 1e-6\n    };\n  },\n\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.led_intensity !== undefined)\n          this.currentLedValue = Number(p.led_intensity);\n        if (p.value !== undefined)\n          this.currentLedValue = Number(p.value);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // DISPLAY FORMATTER\n    formatStep(v) {\n      return v < 0.000001 ? v.toExponential() : v.toString();\n    },\n\n    // PRECISION SELECTION\n    setStep(v) {\n      this.stepSize = v;\n    },\n\n    // LED CONTROL\n    adjustLed(step) {\n      let v = Number(this.currentLedValue) + Number(step);\n      v = Math.max(0, Math.min(1, v));\n      this.currentLedValue = Number(v);\n      this.onSliderRelease();\n    },\n\n    onSliderRelease() {\n      this.sendUpdate(\"light\", {\n        action: \"on\",\n        value: Number(this.currentLedValue.toFixed(12)),\n      });\n    },\n\n    sendUpdate(topic, payload) {\n      const msg = { topic, payload };\n      if (this.$emit) this.$emit(\"msg-input\", msg);\n      if (this.send) this.send(msg);\n    },\n\n    // AUTO CAPTURE\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureLuminance();\n      }, 500);\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // LUMINANCE CAPTURE\n    async captureLuminance() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n        let sum = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          const r = pixelData[i];\n          const g = pixelData[i + 1];\n          const b = pixelData[i + 2];\n          sum += (r + g + b) / 3;\n          count++;\n        }\n\n        this.currentLuminance = count > 0 ? sum / count : 0;\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n.target-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  opacity: 0.5;\n}\n.sampling-overlay {\n  position: absolute;\n  width: calc(100% / 3);\n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red;\n  pointer-events: none;\n  z-index: 10;\n}\n.font-mono {\n  font-family: 'Roboto Mono', monospace;\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 420,
+        "x": 400,
         "y": 140,
         "wires": [
             [
@@ -4583,22 +5593,6 @@
             ]
         ]
     },
-    {
-        "id": "21af2e731c368d3e",
-        "type": "debug",
-        "z": "14c685bd04db8be5",
-        "name": "debug 3",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 940,
-        "y": 260,
-        "wires": []
-    },
     {
         "id": "785c59c553d71326",
         "type": "mqtt out",
@@ -4616,37 +5610,20 @@
         "id": "0283e992ff5da0f6",
         "type": "function",
         "z": "14c685bd04db8be5",
-        "name": "set pump settings",
-        "func": "if (msg.topic) {\n    global.set(\"calibration_wbg_red\", msg.payload.settings.white_balance_gain.red);\n    global.set(\"calibration_wbg_blue\", msg.payload.settings.white_balance_gain.blue);\n}\nreturn msg;",
+        "name": "set led_intensity",
+        "func": "if (msg.topic) {\n    global.set(\"led_intensity\", msg.payload.value);}\nreturn msg;",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 990,
-        "y": 180,
+        "x": 880,
+        "y": 160,
         "wires": [
             []
         ]
     },
-    {
-        "id": "d41870c7f587821b",
-        "type": "debug",
-        "z": "14c685bd04db8be5",
-        "name": "debug 4",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 320,
-        "y": 220,
-        "wires": []
-    },
     {
         "id": "959de9b1292e047d",
         "type": "switch",
@@ -4657,19 +5634,19 @@
         "rules": [
             {
                 "t": "eq",
-                "v": "imager/image",
+                "v": "light",
                 "vt": "str"
             }
         ],
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 650,
-        "y": 180,
+        "x": 590,
+        "y": 140,
         "wires": [
             [
-                "0283e992ff5da0f6",
-                "21af2e731c368d3e"
+                "785c59c553d71326",
+                "0283e992ff5da0f6"
             ]
         ]
     },
@@ -4732,7 +5709,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 420,
+        "x": 400,
         "y": 140,
         "wires": [
             [
@@ -4748,31 +5725,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "78cf0ca00b9e1214"
-            ]
-        ]
-    },
-    {
-        "id": "78cf0ca00b9e1214",
-        "type": "switch",
-        "z": "3afb1d2b21be9114",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "943c62c18d43f2a6"
@@ -4796,7 +5748,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 620,
+        "x": 360,
         "y": 40,
         "wires": [
             [
@@ -4841,7 +5793,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 610,
+        "x": 590,
         "y": 140,
         "wires": [
             [
@@ -4861,8 +5813,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 810,
-        "y": 140,
+        "x": 1010,
+        "y": 180,
         "wires": [
             []
         ]
@@ -4916,31 +5868,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "2e99999b7cf152b7"
-            ]
-        ]
-    },
-    {
-        "id": "2e99999b7cf152b7",
-        "type": "switch",
-        "z": "d5b2c64b84f8ed4f",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "138136e6a1917e49"
@@ -4964,7 +5891,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 610,
+        "x": 350,
         "y": 40,
         "wires": [
             []
@@ -5008,7 +5935,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 410,
+        "x": 390,
         "y": 140,
         "wires": [
             [
@@ -5051,7 +5978,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 2,
-        "x": 610,
+        "x": 590,
         "y": 140,
         "wires": [
             [
@@ -5094,12 +6021,101 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 920,
-        "y": 160,
+        "x": 1000,
+        "y": 180,
         "wires": [
             []
         ]
     },
+    {
+        "id": "64ae825a687fb054",
+        "type": "ecotaxa",
+        "z": "8555b76c53e789e0",
+        "name": "Import to Ecotaxa Project",
+        "api_url": "https://ecotaxa.obs-vlfr.fr/api/",
+        "project_id": "9366",
+        "x": 830,
+        "y": 300,
+        "wires": [
+            [
+                "c21f20a7a9902ee4"
+            ]
+        ]
+    },
+    {
+        "id": "af1ec6323cc00231",
+        "type": "inject",
+        "z": "8555b76c53e789e0",
+        "name": "Lancer import",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": "0",
+        "topic": "",
+        "x": 310,
+        "y": 300,
+        "wires": [
+            [
+                "28f8eb0318735246"
+            ]
+        ]
+    },
+    {
+        "id": "c21f20a7a9902ee4",
+        "type": "debug",
+        "z": "8555b76c53e789e0",
+        "name": "Show import result",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1110,
+        "y": 300,
+        "wires": []
+    },
+    {
+        "id": "28f8eb0318735246",
+        "type": "function",
+        "z": "8555b76c53e789e0",
+        "name": "Set file_path",
+        "func": "msg.payload = {}\nmsg.payload.file_path = \"/home/pi/data/export/ecotaxa/ecotaxa_A_2.zip\"\n\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 570,
+        "y": 300,
+        "wires": [
+            [
+                "64ae825a687fb054",
+                "1457a0786f787415"
+            ]
+        ]
+    },
+    {
+        "id": "1457a0786f787415",
+        "type": "debug",
+        "z": "8555b76c53e789e0",
+        "name": "debug 9",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 820,
+        "y": 200,
+        "wires": []
+    },
     {
         "id": "7ccb5c8c66ad170a",
         "type": "inject",
diff --git a/segmenter/planktoscope/segmenter/live.py b/segmenter/planktoscope/segmenter/live.py
new file mode 100644
index 000000000..456a0b617
--- /dev/null
+++ b/segmenter/planktoscope/segmenter/live.py
@@ -0,0 +1,725 @@
+# Copyright (C) 2021 Romain Bazile
+#
+# This file is part of the PlanktoScope software.
+#
+# PlanktoScope is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# PlanktoScope is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with PlanktoScope.  If not, see <http://www.gnu.org/licenses/>.
+
+"""Live segmentation module for acquisition overlay analysis.
+
+This module provides real-time segmentation during acquisition. When enabled,
+it listens for image captures from the imager and segments each frame as it
+is captured, publishing results for overlay display.
+
+Features:
+- Real-time segmentation overlay for preview
+- Saves object crops to /home/pi/data/objects for visualization
+- Writes EcoTaxa-compatible TSV incrementally
+- Publishes MQTT updates for live dashboard refresh
+"""
+
+import base64
+import io
+import json
+import math
+import multiprocessing
+import os
+import time
+from datetime import datetime
+from pathlib import Path
+
+import cv2
+import numpy as np
+import PIL.Image
+import skimage.measure
+from loguru import logger
+
+import planktoscope.mqtt
+import planktoscope.segmenter.operations
+import planktoscope.segmenter.encoder
+
+logger.info("planktoscope.segmenter.live is loaded")
+
+# Hardware config path (same as used by controller)
+HARDWARE_CONFIG_PATH = "/home/pi/PlanktoScope/hardware.json"
+
+# Paths for visualization output
+IMG_BASE = "/home/pi/data/img"
+OBJECTS_BASE = "/home/pi/data/objects"
+LIVE_STATS_FILE = "/tmp/live_seg_stats.json"
+
+# EcoTaxa TSV column headers
+ECOTAXA_COLUMNS = [
+    "object_id", "object_date", "object_time",
+    "object_x", "object_y", "object_width", "object_height",
+    "object_area", "object_perim.", "object_major", "object_minor",
+    "object_circ.", "object_elongation", "object_solidity",
+    "object_equivalent_diameter",
+    "object_MeanHue", "object_MeanSaturation", "object_MeanValue",
+    "object_blur_laplacian",
+    "sample_id", "acq_id", "img_file_name"
+]
+
+
+class LiveSegmenterProcess(multiprocessing.Process):
+    """Live segmentation worker that analyzes frames during acquisition.
+
+    This process listens for image captures from the imager during acquisition
+    and performs real-time segmentation on each captured frame. Results are
+    published via MQTT for overlay display on the frontend.
+    """
+
+    @logger.catch
+    def __init__(self, event, data_path):
+        """Initialize the LiveSegmenter class.
+
+        Args:
+            event (multiprocessing.Event): shutdown event
+            data_path (str): base data path
+        """
+        super(LiveSegmenterProcess, self).__init__(name="live_segmenter")
+
+        logger.info("planktoscope.segmenter.live is initialising")
+
+        self.stop_event = event
+        self.live_client = None
+        self.imager_client = None
+        self.__data_path = data_path
+        self.__enabled = False  # Whether live segmentation overlay is enabled
+        self.__overlay_mode = "bbox"  # bbox, mask, or both
+        self.__min_area = 100  # Minimum area in pixels for detected objects
+        self.__pixel_size_um = self._load_pixel_size()  # Load from hardware config
+        self.__remove_static = False  # Remove objects that appear in same position across frames
+        self.__static_tracker = {}  # Track objects by position: {(cx, cy): frame_count}
+        self.__static_threshold = 2  # FIX: Reduced from 3 to 2 for faster debris detection
+
+        # Visualization state
+        self.__save_crops = True  # Save object crops for visualization gallery
+        self.__current_acq_folder = None
+        self.__object_counter = 0
+        self.__frame_counter = 0
+
+        logger.success("planktoscope.segmenter.live is initialised and ready to go!")
+
+    def _load_pixel_size(self):
+        """Load pixel size from hardware config file.
+
+        Reads process_pixel_fixed from /home/pi/PlanktoScope/hardware.json.
+        This ensures consistency with the calibration value set in the dashboard.
+
+        Returns:
+            float: Pixel size in micrometers per pixel. Defaults to 0.75 if not found.
+        """
+        default_pixel_size = 0.75
+        try:
+            with open(HARDWARE_CONFIG_PATH, "r") as f:
+                config = json.load(f)
+                pixel_size = config.get("process_pixel_fixed", default_pixel_size)
+                logger.info(f"Loaded pixel size from hardware config: {pixel_size} µm/pixel")
+                return float(pixel_size)
+        except FileNotFoundError:
+            logger.warning(
+                f"Hardware config not found at {HARDWARE_CONFIG_PATH}, "
+                f"using default pixel size: {default_pixel_size} µm/pixel"
+            )
+            return default_pixel_size
+        except (json.JSONDecodeError, ValueError) as e:
+            logger.error(
+                f"Error reading hardware config: {e}, "
+                f"using default pixel size: {default_pixel_size} µm/pixel"
+            )
+            return default_pixel_size
+
+    def _get_acquisition_info(self, image_path):
+        """Extract acquisition info from image path.
+
+        Path format: /home/pi/data/img/DATE/SAMPLE_ID/ACQ_ID/image.jpg
+        """
+        try:
+            parts = image_path.split("/")
+            if "img" in parts:
+                idx = parts.index("img")
+                date_folder = parts[idx + 1] if len(parts) > idx + 1 else ""
+                sample_folder = parts[idx + 2] if len(parts) > idx + 2 else ""
+                acq_folder = parts[idx + 3] if len(parts) > idx + 3 else ""
+
+                return {
+                    "date": date_folder,
+                    "sample_id": sample_folder,
+                    "acq_id": acq_folder,
+                    "acq_folder": acq_folder,
+                }
+        except Exception:
+            pass
+
+        return {
+            "date": datetime.now().strftime("%Y-%m-%d"),
+            "sample_id": "unknown",
+            "acq_id": "A_0",
+            "acq_folder": "unknown",
+        }
+
+    def _derive_output_dir(self, image_path):
+        """Get output directory for object crops, mirroring img structure."""
+        abs_path = os.path.abspath(image_path)
+        img_dir = os.path.dirname(abs_path)
+
+        if img_dir.startswith(IMG_BASE):
+            rel_path = os.path.relpath(img_dir, IMG_BASE)
+            return os.path.join(OBJECTS_BASE, rel_path)
+        return os.path.join(img_dir, "objects")
+
+    def _write_tsv_header(self, tsv_path):
+        """Write EcoTaxa TSV header."""
+        try:
+            with open(tsv_path, "w") as f:
+                f.write("\t".join(ECOTAXA_COLUMNS) + "\n")
+                types = ["[t]"] * len(ECOTAXA_COLUMNS)
+                f.write("\t".join(types) + "\n")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to write TSV header: {e}")
+            return False
+
+    def _append_tsv_row(self, tsv_path, row_data):
+        """Append a single row to the TSV file."""
+        try:
+            with open(tsv_path, "a") as f:
+                values = []
+                for col in ECOTAXA_COLUMNS:
+                    val = row_data.get(col, "")
+                    if isinstance(val, float):
+                        values.append(f"{val:.4f}")
+                    else:
+                        values.append(str(val))
+                f.write("\t".join(values) + "\n")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to append TSV row: {e}")
+            return False
+
+    def _extract_object_features(self, img, region, bbox):
+        """Extract morphological features from an object for TSV."""
+        x, y, w, h = bbox
+
+        # Extract ROI
+        roi_img = img[y:y+h, x:x+w]
+
+        # Area and perimeter from region
+        area = int(region.area)
+        perimeter = float(region.perimeter)
+
+        # Major/minor axes
+        major = float(region.major_axis_length) if region.major_axis_length else max(w, h)
+        minor = float(region.minor_axis_length) if region.minor_axis_length else min(w, h)
+
+        # Derived metrics
+        circularity = (4 * math.pi * area / (perimeter ** 2)) if perimeter > 0 else 0
+        elongation = major / minor if minor > 0 else 1.0
+        solidity = float(region.solidity) if region.solidity else 1.0
+        equivalent_diameter = float(region.equivalent_diameter) if region.equivalent_diameter else (4 * area / math.pi) ** 0.5
+
+        # HSV color statistics
+        mean_hue, mean_sat, mean_val = 0, 0, 0
+        try:
+            roi_hsv = cv2.cvtColor(roi_img, cv2.COLOR_BGR2HSV)
+            mean_hue = float(np.mean(roi_hsv[:, :, 0]))
+            mean_sat = float(np.mean(roi_hsv[:, :, 1]))
+            mean_val = float(np.mean(roi_hsv[:, :, 2]))
+        except Exception:
+            pass
+
+        # Blur metric
+        blur_laplacian = planktoscope.segmenter.operations.calculate_blur(roi_img)
+
+        return {
+            "object_x": x + w / 2,
+            "object_y": y + h / 2,
+            "object_width": w,
+            "object_height": h,
+            "object_area": area,
+            "object_perim.": perimeter,
+            "object_major": major,
+            "object_minor": minor,
+            "object_circ.": circularity,
+            "object_elongation": elongation,
+            "object_solidity": solidity,
+            "object_equivalent_diameter": equivalent_diameter,
+            "object_MeanHue": mean_hue,
+            "object_MeanSaturation": mean_sat,
+            "object_MeanValue": mean_val,
+            "object_blur_laplacian": blur_laplacian,
+        }
+
+    def _publish_visualization_update(self, output_dir, total_objects, total_frames):
+        """Publish MQTT update for visualization dashboard refresh."""
+        try:
+            message = {
+                "status": "segmenting",
+                "total_objects": total_objects,
+                "total_images": total_frames,
+                "output_dir": output_dir,
+                "timestamp": time.time(),
+            }
+            self.live_client.client.publish(
+                "status/segmentation",
+                json.dumps(message),
+            )
+        except Exception as e:
+            logger.debug(f"Failed to publish visualization update: {e}")
+
+    def _esd_um_to_min_area(self, esd_um):
+        """Convert ESD in micrometers to minimum area in pixels.
+
+        Args:
+            esd_um (float): Equivalent spherical diameter in micrometers
+
+        Returns:
+            int: Minimum area in pixels
+        """
+        # Convert ESD from micrometers to pixels
+        esd_pixels = esd_um / self.__pixel_size_um
+        # Calculate area of a circle with this diameter
+        area = math.pi * (esd_pixels / 2) ** 2
+        return int(area)
+
+    def _create_simple_mask(self, img):
+        """Create a mask using simple thresholding.
+
+        Args:
+            img (np.array): BGR image
+
+        Returns:
+            np.array: binary mask
+        """
+        mask = planktoscope.segmenter.operations.simple_threshold(img)
+        mask = planktoscope.segmenter.operations.erode(mask)
+        mask = planktoscope.segmenter.operations.dilate(mask)
+        return mask
+
+    def _get_bbox_key(self, bbox):
+        """Get a grid key for a bounding box center for tracking.
+
+        Uses 100px grid cells - large enough to tolerate detection variation
+        in elongated objects while still distinguishing separate small objects.
+
+        Args:
+            bbox: [x, y, w, h] bounding box
+
+        Returns:
+            tuple: (grid_x, grid_y) key
+        """
+        cx = bbox[0] + bbox[2] / 2
+        cy = bbox[1] + bbox[3] / 2
+        grid_size = 100  # FIX: Larger grid (was 60) tolerates detection jitter for stuck objects
+        return (int(cx / grid_size), int(cy / grid_size))
+
+    def _update_static_tracker(self, current_bboxes):
+        """Update the static object tracker with current frame's objects.
+
+        Objects that appear in the same grid cell across multiple frames
+        get their count incremented. Objects not seen are removed.
+
+        Args:
+            current_bboxes: list of [x, y, w, h] bounding boxes from current frame
+        """
+        # Get all current grid positions
+        current_keys = set()
+        for bbox in current_bboxes:
+            key = self._get_bbox_key(bbox)
+            current_keys.add(key)
+
+        # Update tracker: increment seen, remove unseen
+        new_tracker = {}
+        for key in current_keys:
+            if key in self.__static_tracker:
+                new_tracker[key] = self.__static_tracker[key] + 1
+            else:
+                new_tracker[key] = 1
+
+        self.__static_tracker = new_tracker
+
+    def _is_static_object(self, bbox):
+        """Check if an object has been static for multiple frames.
+
+        Args:
+            bbox: [x, y, w, h] bounding box
+
+        Returns:
+            bool: True if object is static (appeared in same position for N+ frames)
+        """
+        key = self._get_bbox_key(bbox)
+        count = self.__static_tracker.get(key, 0)
+        return count >= self.__static_threshold
+
+    def _encode_mask_png(self, mask):
+        """Encode a binary mask as base64 PNG with alpha transparency.
+
+        Args:
+            mask (np.array): binary mask
+
+        Returns:
+            str: base64 encoded PNG string with alpha channel
+        """
+        # Convert binary mask to RGBA with alpha transparency
+        # Object pixels = white with full opacity, background = transparent
+        height, width = mask.shape
+        rgba = np.zeros((height, width, 4), dtype=np.uint8)
+        rgba[mask, :3] = 255  # White RGB for object pixels
+        rgba[mask, 3] = 255   # Full opacity for object pixels
+        # Background pixels remain (0,0,0,0) = transparent
+
+        img = PIL.Image.fromarray(rgba, mode="RGBA")
+        buffer = io.BytesIO()
+        img.save(buffer, format="PNG")
+        return base64.b64encode(buffer.getvalue()).decode("utf-8")
+
+    def segment_single_frame(self, img):
+        """Segment a single frame and return object data.
+
+        Args:
+            img (np.array): BGR image
+
+        Returns:
+            dict: segmentation results with objects, frame_blur, and image dimensions
+        """
+        # Get image dimensions for frontend scaling
+        img_height, img_width = img.shape[:2]
+
+        # Calculate frame-level blur
+        frame_blur = planktoscope.segmenter.operations.calculate_blur(img)
+
+        # Calculate regional blur for heatmap visualization (4x4 grid)
+        blur_grid = planktoscope.segmenter.operations.calculate_regional_blur(img, 4, 4)
+
+        # Create mask
+        mask = self._create_simple_mask(img)
+
+        # Find objects
+        labels, nlabels = skimage.measure.label(mask, return_num=True)
+        regionprops = skimage.measure.regionprops(labels)
+
+        # Filter by minimum area and sort by area (largest first)
+        regionprops_filtered = [
+            region for region in regionprops if region.area >= self.__min_area
+        ]
+        regionprops_filtered.sort(key=lambda r: r.area, reverse=True)
+
+        # Build list of all bboxes and regions for this frame
+        all_bboxes = []
+        bbox_region_pairs = []
+        for region in regionprops_filtered:
+            bbox = [
+                int(region.bbox[1]),  # x
+                int(region.bbox[0]),  # y
+                int(region.bbox[3] - region.bbox[1]),  # width
+                int(region.bbox[2] - region.bbox[0]),  # height
+            ]
+            all_bboxes.append(bbox)
+            bbox_region_pairs.append((bbox, region))
+
+        # Update static tracker with all detected objects BEFORE filtering
+        if self.__remove_static:
+            self._update_static_tracker(all_bboxes)
+
+        # Build output objects, filtering static ones if enabled
+        objects = []
+        max_masks = 100
+
+        for bbox, region in bbox_region_pairs:
+            # Skip static objects (only if they've been seen for N+ consecutive frames)
+            if self.__remove_static and self._is_static_object(bbox):
+                continue
+
+            obj_data = {
+                "bbox": bbox,
+            }
+
+            # Include mask for objects
+            if self.__overlay_mode in ("mask", "both") and len(objects) < max_masks:
+                obj_data["mask"] = self._encode_mask_png(region.filled_image)
+
+            objects.append(obj_data)
+
+            # Limit total objects for performance
+            if len(objects) >= 300:
+                break
+
+        return {
+            "objects": objects,
+            "frame_blur": float(frame_blur),
+            "blur_grid": blur_grid,  # 4x4 regional blur heatmap
+            "object_count": len(objects),  # Count after static filtering
+            "image_width": img_width,
+            "image_height": img_height,
+        }
+
+    def _process_captured_image(self, img_path):
+        """Process a captured image from acquisition.
+
+        Segments the image, saves object crops for visualization,
+        writes TSV data, and publishes results via MQTT.
+
+        Args:
+            img_path (str): path to the captured image file
+        """
+        if not self.__enabled:
+            return
+
+        try:
+            if not os.path.exists(img_path):
+                logger.warning(f"Image file not found: {img_path}")
+                return
+
+            # Load the captured image
+            frame = cv2.imread(img_path)
+            if frame is None:
+                logger.warning(f"Failed to load image: {img_path}")
+                return
+
+            logger.debug(f"Processing captured image: {img_path}")
+
+            # Get acquisition info
+            acq_info = self._get_acquisition_info(img_path)
+            acq_folder = acq_info.get("acq_folder", "")
+
+            # Reset counters if new acquisition
+            if acq_folder != self.__current_acq_folder:
+                self.__current_acq_folder = acq_folder
+                self.__object_counter = 0
+                self.__frame_counter = 0
+                self.__static_tracker = {}
+
+            self.__frame_counter += 1
+
+            # Segment the frame (returns objects with bbox, mask data)
+            result = self.segment_single_frame(frame)
+
+            # Setup output directory for crops
+            output_dir = self._derive_output_dir(img_path)
+            if self.__save_crops:
+                Path(output_dir).mkdir(parents=True, exist_ok=True)
+
+            # Setup TSV file
+            tsv_path = os.path.join(output_dir, f"ecotaxa_{acq_info['acq_id']}.tsv")
+            if self.__save_crops and not os.path.exists(tsv_path):
+                self._write_tsv_header(tsv_path)
+
+            # Get base name for crops
+            base_name = os.path.splitext(os.path.basename(img_path))[0]
+            img_date = acq_info.get("date", "")
+            img_time = "00:00:00"
+            if "_" in base_name:
+                time_part = base_name.split("_")[1] if len(base_name.split("_")) > 1 else ""
+                if time_part:
+                    img_time = time_part.replace("-", ":")[:8]
+
+            # Re-segment to get regions for feature extraction and crop saving
+            mask = self._create_simple_mask(frame)
+            labels, _ = skimage.measure.label(mask, return_num=True)
+            regionprops = skimage.measure.regionprops(labels)
+
+            # Process each object in the result
+            saved_crops = 0
+            for obj in result.get("objects", []):
+                bbox = obj.get("bbox")
+                if not bbox:
+                    continue
+
+                x, y, w, h = bbox
+
+                # Find matching region for this bbox
+                matching_region = None
+                for region in regionprops:
+                    rx = int(region.bbox[1])
+                    ry = int(region.bbox[0])
+                    if abs(rx - x) < 5 and abs(ry - y) < 5:
+                        matching_region = region
+                        break
+
+                if not matching_region:
+                    continue
+
+                self.__object_counter += 1
+                obj_id = self.__object_counter
+
+                # Save crop with padding
+                pad = max(5, int(max(w, h) * 0.1))
+                x1 = max(0, x - pad)
+                y1 = max(0, y - pad)
+                x2 = min(frame.shape[1], x + w + pad)
+                y2 = min(frame.shape[0], y + h + pad)
+                crop = frame[y1:y2, x1:x2]
+
+                if self.__save_crops and crop.size > 0:
+                    crop_filename = f"{base_name}_{obj_id}.jpg"
+                    crop_path = os.path.join(output_dir, crop_filename)
+                    cv2.imwrite(crop_path, crop)
+                    saved_crops += 1
+
+                    # Extract features and write TSV row
+                    features = self._extract_object_features(frame, matching_region, bbox)
+                    row_data = {
+                        "object_id": f"{acq_info['sample_id']}_{acq_info['acq_id']}_{obj_id}",
+                        "object_date": img_date,
+                        "object_time": img_time,
+                        "sample_id": acq_info["sample_id"],
+                        "acq_id": acq_info["acq_id"],
+                        "img_file_name": crop_filename,
+                        **features,
+                    }
+                    self._append_tsv_row(tsv_path, row_data)
+
+            # Encode the image as base64 JPEG for frontend display
+            _, jpeg_buffer = cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+            result["image"] = base64.b64encode(jpeg_buffer).decode("utf-8")
+
+            # Publish results for overlay display
+            self.live_client.client.publish(
+                "status/segmenter/live",
+                json.dumps(result, cls=planktoscope.segmenter.encoder.NpEncoder),
+            )
+
+            # Publish visualization update
+            if self.__save_crops:
+                self._publish_visualization_update(
+                    output_dir,
+                    self.__object_counter,
+                    self.__frame_counter
+                )
+
+            logger.debug(f"Published segmentation: {result['object_count']} objects, {saved_crops} crops saved")
+
+        except Exception as e:
+            logger.error(f"Error processing captured image: {e}")
+            import traceback
+            logger.error(traceback.format_exc())
+
+    def _check_imager_messages(self):
+        """Check for new messages from the imager.
+
+        Polls the imager MQTT client for progress events during acquisition
+        and triggers segmentation when live segmentation is enabled.
+        """
+        if not self.imager_client.new_message_received():
+            return
+
+        try:
+            message = self.imager_client.msg["payload"]
+            logger.debug(f"Imager message received: {message}")
+            self.imager_client.read_message()
+
+            # Check if this is a progress event during acquisition
+            # The imager publishes {"type": "progress", "path": "/path/to/image.jpeg", ...}
+            if message.get("type") == "progress" and "path" in message:
+                self._process_captured_image(message["path"])
+
+        except Exception as e:
+            logger.error(f"Error processing imager message: {e}")
+
+    @logger.catch
+    def treat_message(self):
+        """Process incoming MQTT messages for live segmentation control."""
+        if self.live_client.new_message_received():
+            logger.info("Live segmenter received a new message")
+            last_message = self.live_client.msg["payload"]
+            logger.debug(last_message)
+            self.live_client.read_message()
+
+            if "action" in last_message:
+                if last_message["action"] == "start":
+                    logger.info("Enabling live segmentation overlay")
+                    self.__overlay_mode = last_message.get("overlay", "bbox")
+
+                    # Handle min_esd_um (micrometers) or fall back to min_area (pixels)
+                    if "min_esd_um" in last_message:
+                        min_esd = last_message.get("min_esd_um", 20)
+                        self.__min_area = self._esd_um_to_min_area(min_esd)
+                        logger.info(f"Minimum ESD: {min_esd} µm = {self.__min_area} pixels²")
+                    else:
+                        self.__min_area = last_message.get("min_area", 100)
+
+                    # Handle remove_static option (subtract objects in same position across frames)
+                    self.__remove_static = last_message.get("remove_static", True)
+                    self.__static_tracker = {}  # Reset tracker on start
+                    if self.__remove_static:
+                        logger.info("Static object removal enabled (filtering after 3+ consecutive frames)")
+
+                    self.__enabled = True
+
+                    # Publish status
+                    self.live_client.client.publish(
+                        "status/segmenter/live",
+                        json.dumps({
+                            "status": "Enabled",
+                            "overlay": self.__overlay_mode,
+                            "min_area": self.__min_area,
+                            "remove_static": self.__remove_static
+                        }),
+                    )
+
+                elif last_message["action"] == "stop":
+                    logger.info("Disabling live segmentation overlay")
+                    self.__enabled = False
+                    self.__static_tracker = {}  # Clear static tracker
+
+                    # Clear the overlay by publishing empty objects
+                    self.live_client.client.publish(
+                        "status/segmenter/live",
+                        json.dumps({
+                            "status": "Disabled",
+                            "objects": [],
+                            "object_count": 0
+                        }),
+                    )
+
+    @logger.catch
+    def run(self):
+        """Main process loop."""
+        logger.info(
+            f"The live segmenter control thread has been started in process {os.getpid()}"
+        )
+
+        # MQTT Client for receiving commands
+        self.live_client = planktoscope.mqtt.MQTT_Client(
+            topic="segmenter/live", name="live_segmenter_client"
+        )
+
+        # MQTT Client for imager status - listen for capture events
+        self.imager_client = planktoscope.mqtt.MQTT_Client(
+            topic="status/imager", name="live_imager_client"
+        )
+
+        # Publish ready status
+        self.live_client.client.publish(
+            "status/segmenter/live", '{"status":"Ready"}'
+        )
+
+        logger.success("Live Segmenter is READY!")
+
+        # Main loop - process control messages and imager events
+        while not self.stop_event.is_set():
+            self.treat_message()
+            self._check_imager_messages()
+            time.sleep(0.05)
+
+        logger.info("Shutting down the live segmenter process")
+        self.live_client.client.publish("status/segmenter/live", '{"status":"Dead"}')
+        self.live_client.shutdown()
+        self.imager_client.shutdown()
+        logger.success("Live segmenter process shut down! See you!")
+
+
+# This guy is called if this script is launched directly
+if __name__ == "__main__":
+    pass