From 08feec1c9f2fae7161fd08d295a952a8a01ccd4f Mon Sep 17 00:00:00 2001
From: Adam <aglarson@gmail.com>
Date: Wed, 16 Sep 2026 08:35:28 -0700
Subject: [PATCH] calibration: persist through the backend calibration service
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three calibration copies saved by calling the controllers directly, and
imager/image {action:"save_settings"} no longer exists — it was removed when
calibration persistence moved to the backend. All three now publish
calibration/save with the values they converged on.

Preview also hydrates from retained status/calibration, which populates
acq_led_intensity on page load, so the LED toggle comes back at the calibrated
brightness instead of full scale after a reboot or an off/on cycle.

Requires fairscope/PlanktoScope#1013.
---
 flows.json | 64 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/flows.json b/flows.json
index 14d918e..144d53a 100644
--- a/flows.json
+++ b/flows.json
@@ -2734,11 +2734,16 @@
                 "t": "eq",
                 "v": "imager/image",
                 "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "calibration/save",
+                "vt": "str"
             }
         ],
         "checkall": "true",
         "repair": false,
-        "outputs": 9,
+        "outputs": 10,
         "x": 550,
         "y": 220,
         "wires": [
@@ -2768,6 +2773,9 @@
             ],
             [
                 "a56a8820702f4610"
+            ],
+            [
+                "ca11ba7100000002"
             ]
         ]
     },
@@ -2783,7 +2791,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-0\">\n\n    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Light</div>\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'off' ? 'grey-lighten-2' : 'white'\"\n            @click=\"on_led_toggle('off')\">\n            Off\n          </v-btn>\n          <v-divider vertical></v-divider>\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'on' ? 'primary' : 'white'\"\n            @click=\"on_led_toggle('on')\">\n            On\n          </v-btn>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Focus</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\">\n            <v-label class=\"text-body-2\">Distance</v-label>\n          </v-col>\n          <v-col cols=\"5\" sm=\"6\">\n            <v-slider v-model.number=\"focus_distance\" :max=\"maxFocus\" :min=\"minFocus\" :step=\"25\" hide-details\n              :thumb-size=\"15\" :track-size=\"3\" />\n          </v-col>\n          <v-col cols=\"4\">\n            <v-text-field v-model.number=\"focus_distance\" type=\"number\" variant=\"outlined\" hide-details suffix=\"μm\"\n              :step=\"25\" :min=\"minFocus\" />\n          </v-col>\n        </v-row>\n\n        <v-row dense class=\"mt-1\">\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_distance_preset\" min=\"0\" divided shaped color=\"primary\"\n              class=\"d-flex justify-space-between\" mandatory @update:model-value=\"on_focus_distance_toggle\">\n              <v-btn v-for=\"value in focus_distance_presets\" :key=\"'distance-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }} μm\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <v-row dense class=\"mt-1\">\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_focus_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Near</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\" color=\"grey-lighten-2\" variant=\"flat\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Far</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Pump</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Flowrate</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.01\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" :step=\"0.01\"\n              hide-details suffix=\"ml/min\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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\">{{ value }} ml/min</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-divider class=\"my-3\"></v-divider>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Volume</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_manual_volume\" :min=\"0\" :max=\"25\" :step=\"0.001\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" :step=\"0.001\"\n              hide-details suffix=\"ml\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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 }} ml\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row dense class=\"mt-2\">\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'\" color=\"grey-lighten-2\" variant=\"flat\">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    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Bubbler</div>\n\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn-toggle\n            v-model=\"bubbler_value\"\n            color=\"primary\"\n            variant=\"flat\"\n            mandatory\n            class=\"d-flex flex-grow-1\"\n            style=\"height: 40px;\" \n            @update:model-value=\"on_bubbler_value_change\"\n          >\n            <v-btn :value=\"0\" class=\"flex-grow-1 rounded-0\" flat>Off</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"0.25\" class=\"flex-grow-1 rounded-0\" flat>25%</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"0.5\" class=\"flex-grow-1 rounded-0\" flat>50%</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"0.75\" class=\"flex-grow-1 rounded-0\" flat>75%</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"1.0\" class=\"flex-grow-1 rounded-0\" flat>100%</v-btn>\n          </v-btn-toggle>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"pa-2 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n      <v-list-item lines=\"two\" @click=\"calibrationDialog = true\" class=\"pa-2\" style=\"cursor: pointer;\">\n        <template v-slot:prepend><v-icon size=\"large\">mdi-tune</v-icon></template>\n        <v-list-item-title class=\"text-subtitle-1 font-weight-bold\">Calibration</v-list-item-title>\n        <v-list-item-subtitle class=\"text-caption\">Modify camera and optical parameters.</v-list-item-subtitle>\n        <template v-slot:append>\n          <v-btn color=\"primary\" size=\"small\" variant=\"flat\" @click.stop=\"calibrationDialog = true\">\n            Calibrate\n          </v-btn>\n        </template>\n      </v-list-item>\n    </v-card>\n\n    <v-dialog v-model=\"calibrationDialog\" max-width=\"1100\" scrollable>\n      <v-card class=\"bg-grey-lighten-4\">\n        <v-toolbar density=\"compact\" color=\"white\" elevation=\"1\">\n          <v-toolbar-title class=\"text-subtitle-1 font-weight-bold\">\n            <v-icon class=\"mr-2\">mdi-tune</v-icon>Camera Calibration\n          </v-toolbar-title>\n          <v-spacer></v-spacer>\n          <v-btn icon @click=\"calibrationDialog = false\" :disabled=\"status === 'running'\">\n            <v-icon>mdi-close</v-icon>\n          </v-btn>\n        </v-toolbar>\n        \n        <v-card-text class=\"pa-0\">\n          <v-row no-gutters class=\"fill-height\">\n            \n            <v-col cols=\"12\" md=\"7\" lg=\"8\" class=\"d-flex justify-center position-relative pa-4\">\n              <v-card class=\"iframe-wrapper elevation-4\">\n                  \n                  <div class=\"rotated-content\">\n                    <iframe \n                      v-if=\"calibrationDialog\"\n                      src=\"/preview/node-red\" \n                      class=\"calibration-iframe\"\n                      @load=\"onIframeLoad\" \n                      ref=\"videoIframe\"\n                      allowfullscreen\n                    ></iframe>\n                    \n                    <div v-if=\"step === 2\" class=\"focus-overlay\">\n                        <div class=\"crosshair\"></div>\n                        <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n                    </div>\n\n                    <div v-show=\"step === 3\" class=\"smart-grid\">\n                      <div \n                          v-for=\"(zone, i) in gridZones\" \n                          :key=\"i\"\n                          class=\"grid-cell\"\n                          :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"\n                      ></div>\n                    </div>\n                  </div>\n\n                  <div v-if=\"status === 'running'\" class=\"phase-badge\">\n                    <v-icon size=\"small\" class=\"mr-1\">mdi-camera-iris</v-icon>\n                    {{ phaseLabel }}\n                  </div>\n                  \n                  <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"5\" lg=\"4\" class=\"bg-white d-flex flex-column pa-4 border-s\" style=\"min-height: 480px;\">\n              \n              <div class=\"mb-2\">\n                <v-btn \n                    block size=\"default\"\n                    :color=\"btnColor\"\n                    @click=\"toggleSequence\"\n                    class=\"font-weight-bold\"\n                    :prepend-icon=\"btnIcon\"\n                    style=\"height:40px;\"\n                >\n                    {{ btnText }}\n                </v-btn>\n              </div>\n\n              <div class=\"d-flex flex-column mb-4 mt-2\" style=\"gap: 8px;\">\n                  <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                      <div class=\"d-flex align-center\">\n                          <v-icon :icon=\"getStepIcon(1)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': step === 1 }\"></v-icon>\n                          <span class=\"text-subtitle-2 font-weight-bold\">1 · Initialization</span>\n                      </div>\n                  </v-card>\n\n                  <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                      <div class=\"d-flex align-center mb-1\">\n                          <v-icon :icon=\"getStepIcon(2)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': step === 2 }\"></v-icon>\n                          <div class=\"flex-grow-1\">\n                              <div class=\"d-flex justify-space-between align-center\">\n                                  <span class=\"text-subtitle-2 font-weight-bold\">2 · Desaturation</span>\n                                  <span v-if=\"step >= 2\" class=\"font-mono font-weight-black text-body-2\">\n                                      {{ currentSat.toFixed(1) }}%\n                                  </span>\n                              </div>\n                          </div>\n                      </div>\n\n                      <div v-if=\"step >= 2\" class=\"gauge mt-1\">\n                          <div class=\"gauge-track\">\n                              <div class=\"gauge-zone\" style=\"left: 0%; width: 25%; background: #4caf50; border-radius: 6px 0 0 6px;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 25%; width: 75%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                              <div class=\"gauge-target-tick\" style=\"left: 0%;\"></div>\n                              <div class=\"gauge-marker\"\n                                   :class=\"{ 'gauge-marker-ok': currentSat <= 5.0 }\"\n                                   :style=\"{ left: satMarkerPct + '%' }\"></div>\n                          </div>\n                      </div>\n\n                      <div v-if=\"step >= 2 && lastFrame\" class=\"d-flex justify-space-between mt-1 font-mono text-caption\">\n                          <span>Pixel R: <strong>{{ Math.round(lastFrame.r || 0) }}</strong></span>\n                          <span>G: <strong>{{ Math.round(lastFrame.g || 0) }}</strong></span>\n                          <span>B: <strong>{{ Math.round(lastFrame.b || 0) }}</strong></span>\n                      </div>\n                  </v-card>\n\n                  <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                      <div class=\"d-flex align-center mb-1\">\n                          <v-icon :icon=\"getStepIcon(3)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': step === 3 }\"></v-icon>\n                          <div class=\"flex-grow-1\">\n                              <div class=\"d-flex justify-space-between align-center\">\n                                  <span class=\"text-subtitle-2 font-weight-bold\">3 · Exposure</span>\n                                  <span v-if=\"step >= 3\" class=\"font-mono font-weight-black text-body-2\">\n                                      {{ currentLum.toFixed(0) }} / 230\n                                  </span>\n                              </div>\n                          </div>\n                      </div>\n\n                      <div v-if=\"step >= 3\" class=\"gauge mt-1\">\n                          <div class=\"gauge-track\">\n                              <div class=\"gauge-zone\" style=\"left: 0%; width: 84.3%; background: #f44336; border-radius: 6px 0 0 6px;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 84.3%; width: 3.9%; background: #ff9800;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 88.2%; width: 3.9%; background: #4caf50;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 92.1%; width: 3.9%; background: #ff9800;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 96%; width: 4%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                              <div class=\"gauge-target-tick\" style=\"left: 90.2%;\"></div>\n                              <div class=\"gauge-marker\"\n                                   :class=\"{ 'gauge-marker-ok': Math.abs(currentLum - 230) <= 5 }\"\n                                   :style=\"{ left: lumMarkerPct + '%' }\"></div>\n                          </div>\n                      </div>\n                  </v-card>\n              </div>\n\n              <v-card v-if=\"status === 'success' || status === 'error'\"\n                      :color=\"status === 'success' ? 'green-lighten-5' : 'red-lighten-5'\"\n                      variant=\"flat\"\n                      class=\"pa-3 mt-auto result-card\"\n                      :class=\"status === 'success' ? 'border-success' : 'border-error'\">\n                  <div class=\"d-flex align-center mb-2\">\n                      <v-icon :color=\"status === 'success' ? 'success' : 'error'\" class=\"mr-2\">\n                          {{ status === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}\n                      </v-icon>\n                      <span class=\"text-subtitle-2 font-weight-bold\">{{ status === 'success' ? 'Calibration Successful' : 'Calibration Failed' }}</span>\n                  </div>\n                  <div class=\"result-grid\" v-if=\"status === 'success'\">\n                      <div><span class=\"result-label\">LED</span><span class=\"result-val\">{{ led.toFixed(4) }}</span></div>\n                      <div><span class=\"result-label\">Gain R</span><span class=\"result-val\">{{ gains.red }}</span></div>\n                      <div><span class=\"result-label\">Gain B</span><span class=\"result-val\">{{ gains.blue }}</span></div>\n                      <div><span class=\"result-label\">Sat</span><span class=\"result-val\">{{ currentSat.toFixed(2) }}%</span></div>\n                      <div><span class=\"result-label\">Lum</span><span class=\"result-val\">{{ currentLum.toFixed(1) }}</span></div>\n                      <div><span class=\"result-label\">Δ Lum</span>\n                          <span class=\"result-val\" :class=\"Math.abs(currentLum - 230) <= 5 ? 'text-success' : 'text-warning'\">\n                              {{ (currentLum - 230).toFixed(1) }}\n                          </span>\n                      </div>\n                      <div><span class=\"result-label\">Zones</span><span class=\"result-val\">{{ activeZonesCount }}/400</span></div>\n                  </div>\n              </v-card>\n\n            </v-col>\n\n          </v-row>\n        </v-card-text>\n      </v-card>\n    </v-dialog>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      // Dynamic property populated from msg\n      magnification: \"medium\", \n\n      // Panel Data\n      minFlow: 0.01, maxFlow: 30, pump_flowrate: 0, pump_manual_volume: 0, \n      pump_flowrate_preset: null, pump_volume_preset: null, pump_direction: \"stop\",\n      minFocus: 25, maxFocus: 10000, focus_distance: 25, \n      focus_distance_preset: null, focus_direction: \"stop\",\n      led_state: \"off\", bubbler_value: 0, acq_led_intensity: null,\n      imageSnackbar: false, imageSnackbarText: \"\",\n\n      // Calibration Dialog State\n      calibrationDialog: false,\n\n      // Calibration Process Data\n      status: 'idle', \n      step: 0,        \n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1, \n      gains: { red: 200, blue: 180 },\n      lastFrame: { r: 0, g: 0, b: 0 },\n      gridN: 20,       \n      analysisW: 1200, \n      analysisH: 900,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false }))\n    };\n  },\n\n  created() { \n    this.hydrateFromMsg(this.msg); \n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) { this.pump_flowrate_preset = this.pump_flowrate_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    pump_manual_volume(newVal) { this.pump_volume_preset = this.pump_volume_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    focus_distance(newVal) { this.focus_distance_preset = this.focus_distance_presets.find((v) => v === newVal) ?? null; this.sendFocusParams(); },\n    // Reset values when magnification changes to match the first preset of the new scale\n    magnification() {\n      this.focus_distance = this.focus_distance_presets[0];\n      this.pump_flowrate = this.pump_flowrate_presets[0];\n      this.pump_manual_volume = this.pump_volume_presets[0];\n    }\n  },\n\n  computed: {\n    // --- Dynamic Presets based on Magnification ---\n    focus_distance_presets() {\n      const presets = {\n        high: [25, 50, 200, 10000],\n        medium: [25, 150, 500, 10000],\n        low: [25, 250, 500, 10000]\n      };\n      return presets[this.magnification] || presets['medium'];\n    },\n    pump_flowrate_presets() {\n      const presets = {\n        high: [0.01, 0.5, 2, 5],\n        medium: [0.02, 0.5, 5, 15],\n        low: [0.05, 0.5, 10, 20]\n      };\n      return presets[this.magnification] || presets['medium'];\n    },\n    pump_volume_presets() {\n      const presets = {\n        high: [0.002, 0.01, 2, 20],\n        medium: [0.004, 0.2, 2, 20],\n        low: [0.02, 0.5, 5, 20]\n      };\n      return presets[this.magnification] || presets['medium'];\n    },\n\n    // --- Calibration UI Computed ---\n    btnText() {\n        if(this.status === 'running') return 'STOP';\n        if(this.status === 'success') return 'DONE';\n        if(this.status === 'error') return 'RETRY';\n        return 'START CALIBRATION';\n    },\n    btnColor() {\n        if(this.status === 'running') return 'error';\n        if(this.status === 'success') return 'success';\n        if(this.status === 'error') return 'warning';\n        return 'primary';\n    },\n    btnIcon() {\n        if(this.status === 'running') return 'mdi-stop';\n        if(this.status === 'success') return 'mdi-check';\n        if(this.status === 'error') return 'mdi-refresh';\n        return 'mdi-play';\n    },\n    activeZonesCount() {\n        return this.gridZones.filter(z => z.active).length;\n    },\n    phaseLabel() {\n        if (this.step === 1) return 'INITIALIZING';\n        if (this.step === 2) return 'DESATURATING';\n        if (this.step === 3) return 'EXPOSURE';\n        return '';\n    },\n    satMarkerPct() {\n        return Math.max(0, Math.min(100, (this.currentSat / 20) * 100));\n    },\n    lumMarkerPct() {\n        return Math.max(0, Math.min(100, (this.currentLum / 255) * 100));\n    }\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n      \n      // Extraction de la magnification\n      if (p.acq_magnification !== undefined) {\n        const mag = String(p.acq_magnification).toLowerCase();\n        if (['high', 'medium', 'low'].includes(mag)) {\n          this.magnification = mag;\n        }\n      }\n\n      if (p.acq_led_intensity !== undefined) this.acq_led_intensity = p.acq_led_intensity;\n      if (m.topic === \"status/pump\" && p.status === \"Done\") this.pump_direction = \"stop\";\n      if (m.topic === \"status/focus\" && p.status === \"Done\") this.focus_direction = \"stop\";\n      \n      if (\"led_status\" in p || (m.topic === \"status/light\" && \"status\" in p)) {\n        const rawVal = p.led_status !== undefined ? p.led_status : p.status;\n        const s = String(rawVal).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n      \n      if (m.topic === \"status/bubbler\") {\n        if (p.value !== undefined) this.bubbler_value = Number(p.value);\n        else if (p.status === \"Off\") this.bubbler_value = 0;\n      }\n\n      this.pump_flowrate = p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n      this.pump_manual_volume = p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) this.pump_direction = p.command;\n      if (typeof p.focus_distance === \"number\") this.focus_distance = p.focus_distance;\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) this.focus_direction = p.command;\n    },\n\n    on_led_toggle(val) {\n      this.led_state = val;\n      const lightCommandPayload = { action: val };\n      if (val === \"on\" && this.acq_led_intensity !== null) lightCommandPayload.value = this.acq_led_intensity;\n      if(this.send) {\n        this.send({ topic: \"light\", payload: lightCommandPayload });\n        this.send({ topic: \"set_global/light\", payload: { led_status: val, acq_led_intensity: this.acq_led_intensity } });\n      }\n    },\n\n    on_bubbler_value_change(val) {\n      const numericValue = Number(val);\n      const action = numericValue > 0 ? \"on\" : \"off\";\n      const messagePayload = { action: action, value: numericValue };\n      if(this.send) {\n        this.send({ topic: \"actuator/bubbler\", payload: messagePayload });\n        this.send({ topic: \"set_global/bubbler\", payload: messagePayload });\n      }\n    },\n\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() { if(this.send) { this.send({ topic: \"set_global/pump\", payload: { pump_flowrate: Number(this.pump_flowrate) || 0, pump_manual_volume: Number(this.pump_manual_volume) || 0 } }); } },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (!this.send) return;\n      if (val === \"stop\") { this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } }); }\n      else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({ topic: \"actuator/pump\", payload: { action: \"move\", direction: dir, volume: Number(this.pump_manual_volume) || 0, flowrate: Number(this.pump_flowrate) || 0 } });\n      }\n    },\n\n    on_focus_distance_toggle(val) { if (val != null) this.focus_distance = val; },\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000, x2 = 1000, y2 = 2000, x3 = 5000, y3 = 5000;\n      if (d <= x1) return y1; if (d >= x3) return y3;\n      if (d <= x2) return Math.round(y1 + ((y2 - y1) / (x2 - x1)) * (d - x1));\n      return Math.round(y2 + ((y3 - y2) / (x3 - x2)) * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      if(this.send) { this.send({ topic: \"set_global/focus\", payload: { focus_distance: d, focus_speed: this.speedFromDistance(d) } }); }\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (!this.send) return;\n      if (val === \"stop\") { this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } }); }\n      else {\n        const d = Number(this.focus_distance) || 25;\n        this.send({ topic: \"actuator/focus\", payload: { action: \"move\", direction: val, distance: d / 1000, speed: this.speedFromDistance(d) / 1000 } });\n      }\n    },\n\n    getStepColor(s) {\n        if (this.status === 'success' || this.step > s) return 'success';\n        if (this.status === 'error' && this.step === s) return 'error';\n        if (this.step === s) return 'orange-lighten-4';\n        return 'grey-lighten-4';\n    },\n    getStepIcon(s) {\n        if (this.status === 'success' || this.step > s) return 'mdi-check-circle';\n        if (this.status === 'error' && this.step === s) return 'mdi-alert-circle';\n        if (this.step === s) return 'mdi-loading';\n        return 'mdi-numeric-'+s+'-circle-outline';\n    },\n\n    async toggleSequence() {\n        if(this.status === 'running') {\n            this.status = 'idle'; this.step = 0; this.stopHardware(); return;\n        }\n        if(this.status === 'success') {\n            this.status = 'idle'; this.step = 0; this.currentSat = 0; this.currentLum = 0;\n            this.gridZones.forEach(z => { z.active = false; z.lum = 0; });\n            this.calibrationDialog = false;\n            return;\n        }\n        if(this.status === 'error') {\n            this.status = 'idle'; this.step = 0; this.currentSat = 0; this.currentLum = 0;\n            this.gridZones.forEach(z => { z.active = false; z.lum = 0; });\n        }\n        this.status = 'running';\n        this.step = 1;\n        try {\n            await this.runInit();\n            this.step = 2;\n            await this.runSaturationLoop();\n            this.step = 3;\n            this.gridZones.forEach(z => z.active = false); \n            await this.runLightnessLoop();\n            this.status = 'success';\n            // The run converged, so persist what the controller is now running.\n            // Without this the calibration lives only in volatile state and is lost on\n            // reboot or an LED off/on cycle (fairscope/PlanktoScope3#575).\n            if (this.send) {\n                this.send({ topic: \"light\", payload: { action: \"save\" } });\n                this.send({ topic: \"imager/image\", payload: { action: \"save_settings\" } });\n            }\n            this.step = 4;\n        } catch(e) {\n            console.error(e);\n            this.status = 'error';\n            this.stopHardware();\n        }\n    },\n\n    async runInit() {\n        this.led = 0.1; this.gains = { red: 200, blue: 180 };\n        this.sendIO();\n        await this.wait(1000); \n    },\n\n    async runSaturationLoop() {\n        let iter = 0;\n        while(iter < 25 && this.status === 'running') {\n            const stats = await this.analyzeFrame(true);\n            this.currentSat = stats.sat;\n            this.lastFrame = { r: stats.r, g: stats.g, b: stats.b };\n            if(stats.sat < 2.0) return;\n            const Kp = 0.8;\n            this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n            this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n            this.sendIO();\n            await this.wait(1000); \n            iter++;\n        }\n        if(this.status === 'running' && this.currentSat >= 5.0) throw new Error('Saturation did not converge');\n    },\n\n    async runLightnessLoop() {\n        let iter = 0;\n        while(iter < 40 && this.status === 'running') {\n            const stats = await this.analyzeFrame(false);\n            this.currentLum = stats.lum;\n            if(Math.abs(stats.lum - 230) <= 5) return;\n            let nextLed = this.led;\n            if(stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n            else if(stats.lum > 252) nextLed = this.led * 0.5;\n            else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n            this.led = Math.max(0, Math.min(1, nextLed));\n            this.sendIO();\n            await this.wait(350); \n            iter++;\n        }\n        if(this.status === 'running' && Math.abs(this.currentLum - 230) > 5) throw new Error('Exposure did not converge');\n    },\n\n    async analyzeFrame(isSaturationStep) {\n        const iframe = this.$refs.videoIframe;\n        if(!iframe?.contentDocument) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const video = iframe.contentDocument.querySelector('video');\n        if(!video || video.videoWidth === 0) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n        ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n        if(isSaturationStep) {\n            const size = 100;\n            const data = ctx.getImageData((this.analysisW-size)/2, (this.analysisH-size)/2, size, size).data;\n            let r=0, g=0, b=0, c=0;\n            for(let i=0; i<data.length; i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; c++; }\n            const avgR=r/c, avgG=g/c, avgB=b/c;\n            const max=Math.max(avgR, avgG, avgB), min=Math.min(avgR, avgG, avgB);\n            return { sat: parseFloat((max===0?0:((max-min)/max)*100).toFixed(1)), r:avgR, g:avgG, b:avgB };\n        } else {\n            const cellW = this.analysisW / this.gridN; \n            const cellH = this.analysisH / this.gridN;\n            let vL=0, vC=0;\n            for(let i=0; i<this.gridN; i++) {\n                for(let j=0; j<this.gridN; j++) {\n                    const data = ctx.getImageData((j*cellW)+(cellW-15)/2, (i*cellH)+(cellH-15)/2, 15, 15).data;\n                    let s=0, mP=255;\n                    for(let k=0; k<data.length; k+=4) { \n                        const l=(data[k]+data[k+1]+data[k+2])/3; \n                        if(l<mP) mP=l; s+=l; \n                    }\n                    const avg=s/(data.length/4);\n                    const isValid=(avg-mP)<=this.sensitivityThreshold && avg>2;\n                    this.gridZones[i*this.gridN+j] = { active: isValid, lum: avg };\n                    if(isValid){ vL+=avg; vC++; }\n                }\n            }\n            return { lum: vC > 0 ? vL/vC : 0 };\n        }\n    },\n\n    sendIO() {\n        if(this.send) {\n            this.send({ topic: \"light\", payload: { action: \"on\", value: Number(this.led.toFixed(12)), acq_led_intensity: Number(this.led.toFixed(6)), led_status: \"on\" } });\n            this.send({ topic: \"imager/image\", payload: { action: \"settings\", settings: { white_balance_gain: this.gains } } });\n        }\n    },\n\n    stopHardware() {\n        if(this.send) this.send({ topic: \"light\", payload: { action: \"off\", value: 0, led_status: \"off\" } });\n    },\n\n    onIframeLoad() {\n      try {\n        const doc = this.$refs.videoIframe.contentDocument;\n        const s = doc.createElement('style');\n        s.textContent = `html { border: none; background: black; } body { margin:0; width:100%; height:100%; overflow:hidden; background:black; } img, video { width:100%; height:100%; object-fit:fill; display:block; } #root { background: black; border: none; } .zoomist-slider, .zoomist-zoomer, button { display: none !important; }`;\n        doc.head.appendChild(s);\n      } catch (e) { console.error('Iframe style injection failed:', e); }\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); }\n  }\n};\n</script>\n\n<style scoped>\n.v-card-text { padding: 0 !important; }\n.v-card { border: none; }\n.v-container { background: #eef3ff; }\n.border { border: 1px solid #cccccc !important; }\n.v-text-field--suffixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input { padding-top: 10px; }\n\n.iframe-wrapper { width: 100%; max-width: 600px; aspect-ratio: 3/4; margin: 0 auto; overflow: hidden; border-radius: 8px; background-color: #000; position: relative; }\n.rotated-content { position: absolute; top: 50%; left: 50%; width: 133.33%; height: 75%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center center; }\n.calibration-iframe { width: 100%; height: 100%; border: none; pointer-events: auto; position: absolute; top: 0; left: 0; }\n.focus-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border: 2px dashed rgba(255, 165, 0, 0.8); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); z-index: 10; pointer-events: none; }\n.smart-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(20, 1fr); z-index: 10; pointer-events: none; }\n.crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n.focus-label { position: absolute; top: -25px; width: 200px; text-align: center; color: orange; font-size: 10px; font-weight: bold; letter-spacing: 1px; }\n.grid-cell { border: 1px solid rgba(255,255,255,0.12); transition: background 0.15s; }\n.cell-active { background-color: rgba(0, 255, 0, 0.18); border-color: rgba(0,255,0,0.5); }\n.cell-rejected { background-color: rgba(255, 0, 0, 0.12); }\n.phase-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.75); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: bold; letter-spacing: 1px; z-index: 20; display: flex; align-items: center; }\n.gauge { width: 100%; padding: 4px 0; }\n.gauge-track { position: relative; width: 100%; height: 12px; background: #eee; border-radius: 6px; overflow: visible; }\n.gauge-zone { position: absolute; top: 0; height: 100%; opacity: 0.85; }\n.gauge-target-tick { position: absolute; top: -3px; height: 18px; width: 2px; background: #000; transform: translateX(-50%); z-index: 2; }\n.gauge-marker { position: absolute; top: 50%; width: 14px; height: 14px; background: #fff; border: 2px solid #333; border-radius: 50%; transform: translate(-50%, -50%); transition: left 0.3s ease, border-color 0.2s, background 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 3; }\n.gauge-marker-ok { background: #4caf50; border-color: #2e7d32; }\n.result-card { border-left: 4px solid; }\n.border-success { border-left-color: #4caf50 !important; }\n.border-error { border-left-color: #f44336 !important; }\n.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }\n.result-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; font-weight: bold; }\n.result-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: bold; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n.mdi-spin { animation: spin 1s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"pa-0\">\n\n    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Light</div>\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'off' ? 'grey-lighten-2' : 'white'\"\n            @click=\"on_led_toggle('off')\">\n            Off\n          </v-btn>\n          <v-divider vertical></v-divider>\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'on' ? 'primary' : 'white'\"\n            @click=\"on_led_toggle('on')\">\n            On\n          </v-btn>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Focus</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\">\n            <v-label class=\"text-body-2\">Distance</v-label>\n          </v-col>\n          <v-col cols=\"5\" sm=\"6\">\n            <v-slider v-model.number=\"focus_distance\" :max=\"maxFocus\" :min=\"minFocus\" :step=\"25\" hide-details\n              :thumb-size=\"15\" :track-size=\"3\" />\n          </v-col>\n          <v-col cols=\"4\">\n            <v-text-field v-model.number=\"focus_distance\" type=\"number\" variant=\"outlined\" hide-details suffix=\"μm\"\n              :step=\"25\" :min=\"minFocus\" />\n          </v-col>\n        </v-row>\n\n        <v-row dense class=\"mt-1\">\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_distance_preset\" min=\"0\" divided shaped color=\"primary\"\n              class=\"d-flex justify-space-between\" mandatory @update:model-value=\"on_focus_distance_toggle\">\n              <v-btn v-for=\"value in focus_distance_presets\" :key=\"'distance-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }} μm\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <v-row dense class=\"mt-1\">\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_focus_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Near</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\" color=\"grey-lighten-2\" variant=\"flat\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Far</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Pump</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Flowrate</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.01\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" :step=\"0.01\"\n              hide-details suffix=\"ml/min\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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\">{{ value }} ml/min</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-divider class=\"my-3\"></v-divider>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Volume</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_manual_volume\" :min=\"0\" :max=\"25\" :step=\"0.001\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" :step=\"0.001\"\n              hide-details suffix=\"ml\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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 }} ml\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row dense class=\"mt-2\">\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'\" color=\"grey-lighten-2\" variant=\"flat\">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    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Bubbler</div>\n\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn-toggle\n            v-model=\"bubbler_value\"\n            color=\"primary\"\n            variant=\"flat\"\n            mandatory\n            class=\"d-flex flex-grow-1\"\n            style=\"height: 40px;\" \n            @update:model-value=\"on_bubbler_value_change\"\n          >\n            <v-btn :value=\"0\" class=\"flex-grow-1 rounded-0\" flat>Off</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"0.25\" class=\"flex-grow-1 rounded-0\" flat>25%</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"0.5\" class=\"flex-grow-1 rounded-0\" flat>50%</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"0.75\" class=\"flex-grow-1 rounded-0\" flat>75%</v-btn>\n            <v-divider vertical></v-divider>\n            <v-btn :value=\"1.0\" class=\"flex-grow-1 rounded-0\" flat>100%</v-btn>\n          </v-btn-toggle>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"pa-2 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n      <v-list-item lines=\"two\" @click=\"calibrationDialog = true\" class=\"pa-2\" style=\"cursor: pointer;\">\n        <template v-slot:prepend><v-icon size=\"large\">mdi-tune</v-icon></template>\n        <v-list-item-title class=\"text-subtitle-1 font-weight-bold\">Calibration</v-list-item-title>\n        <v-list-item-subtitle class=\"text-caption\">Modify camera and optical parameters.</v-list-item-subtitle>\n        <template v-slot:append>\n          <v-btn color=\"primary\" size=\"small\" variant=\"flat\" @click.stop=\"calibrationDialog = true\">\n            Calibrate\n          </v-btn>\n        </template>\n      </v-list-item>\n    </v-card>\n\n    <v-dialog v-model=\"calibrationDialog\" max-width=\"1100\" scrollable>\n      <v-card class=\"bg-grey-lighten-4\">\n        <v-toolbar density=\"compact\" color=\"white\" elevation=\"1\">\n          <v-toolbar-title class=\"text-subtitle-1 font-weight-bold\">\n            <v-icon class=\"mr-2\">mdi-tune</v-icon>Camera Calibration\n          </v-toolbar-title>\n          <v-spacer></v-spacer>\n          <v-btn icon @click=\"calibrationDialog = false\" :disabled=\"status === 'running'\">\n            <v-icon>mdi-close</v-icon>\n          </v-btn>\n        </v-toolbar>\n        \n        <v-card-text class=\"pa-0\">\n          <v-row no-gutters class=\"fill-height\">\n            \n            <v-col cols=\"12\" md=\"7\" lg=\"8\" class=\"d-flex justify-center position-relative pa-4\">\n              <v-card class=\"iframe-wrapper elevation-4\">\n                  \n                  <div class=\"rotated-content\">\n                    <iframe \n                      v-if=\"calibrationDialog\"\n                      src=\"/preview/node-red\" \n                      class=\"calibration-iframe\"\n                      @load=\"onIframeLoad\" \n                      ref=\"videoIframe\"\n                      allowfullscreen\n                    ></iframe>\n                    \n                    <div v-if=\"step === 2\" class=\"focus-overlay\">\n                        <div class=\"crosshair\"></div>\n                        <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n                    </div>\n\n                    <div v-show=\"step === 3\" class=\"smart-grid\">\n                      <div \n                          v-for=\"(zone, i) in gridZones\" \n                          :key=\"i\"\n                          class=\"grid-cell\"\n                          :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"\n                      ></div>\n                    </div>\n                  </div>\n\n                  <div v-if=\"status === 'running'\" class=\"phase-badge\">\n                    <v-icon size=\"small\" class=\"mr-1\">mdi-camera-iris</v-icon>\n                    {{ phaseLabel }}\n                  </div>\n                  \n                  <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"5\" lg=\"4\" class=\"bg-white d-flex flex-column pa-4 border-s\" style=\"min-height: 480px;\">\n              \n              <div class=\"mb-2\">\n                <v-btn \n                    block size=\"default\"\n                    :color=\"btnColor\"\n                    @click=\"toggleSequence\"\n                    class=\"font-weight-bold\"\n                    :prepend-icon=\"btnIcon\"\n                    style=\"height:40px;\"\n                >\n                    {{ btnText }}\n                </v-btn>\n              </div>\n\n              <div class=\"d-flex flex-column mb-4 mt-2\" style=\"gap: 8px;\">\n                  <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                      <div class=\"d-flex align-center\">\n                          <v-icon :icon=\"getStepIcon(1)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': step === 1 }\"></v-icon>\n                          <span class=\"text-subtitle-2 font-weight-bold\">1 · Initialization</span>\n                      </div>\n                  </v-card>\n\n                  <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                      <div class=\"d-flex align-center mb-1\">\n                          <v-icon :icon=\"getStepIcon(2)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': step === 2 }\"></v-icon>\n                          <div class=\"flex-grow-1\">\n                              <div class=\"d-flex justify-space-between align-center\">\n                                  <span class=\"text-subtitle-2 font-weight-bold\">2 · Desaturation</span>\n                                  <span v-if=\"step >= 2\" class=\"font-mono font-weight-black text-body-2\">\n                                      {{ currentSat.toFixed(1) }}%\n                                  </span>\n                              </div>\n                          </div>\n                      </div>\n\n                      <div v-if=\"step >= 2\" class=\"gauge mt-1\">\n                          <div class=\"gauge-track\">\n                              <div class=\"gauge-zone\" style=\"left: 0%; width: 25%; background: #4caf50; border-radius: 6px 0 0 6px;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 25%; width: 75%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                              <div class=\"gauge-target-tick\" style=\"left: 0%;\"></div>\n                              <div class=\"gauge-marker\"\n                                   :class=\"{ 'gauge-marker-ok': currentSat <= 5.0 }\"\n                                   :style=\"{ left: satMarkerPct + '%' }\"></div>\n                          </div>\n                      </div>\n\n                      <div v-if=\"step >= 2 && lastFrame\" class=\"d-flex justify-space-between mt-1 font-mono text-caption\">\n                          <span>Pixel R: <strong>{{ Math.round(lastFrame.r || 0) }}</strong></span>\n                          <span>G: <strong>{{ Math.round(lastFrame.g || 0) }}</strong></span>\n                          <span>B: <strong>{{ Math.round(lastFrame.b || 0) }}</strong></span>\n                      </div>\n                  </v-card>\n\n                  <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                      <div class=\"d-flex align-center mb-1\">\n                          <v-icon :icon=\"getStepIcon(3)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': step === 3 }\"></v-icon>\n                          <div class=\"flex-grow-1\">\n                              <div class=\"d-flex justify-space-between align-center\">\n                                  <span class=\"text-subtitle-2 font-weight-bold\">3 · Exposure</span>\n                                  <span v-if=\"step >= 3\" class=\"font-mono font-weight-black text-body-2\">\n                                      {{ currentLum.toFixed(0) }} / 230\n                                  </span>\n                              </div>\n                          </div>\n                      </div>\n\n                      <div v-if=\"step >= 3\" class=\"gauge mt-1\">\n                          <div class=\"gauge-track\">\n                              <div class=\"gauge-zone\" style=\"left: 0%; width: 84.3%; background: #f44336; border-radius: 6px 0 0 6px;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 84.3%; width: 3.9%; background: #ff9800;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 88.2%; width: 3.9%; background: #4caf50;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 92.1%; width: 3.9%; background: #ff9800;\"></div>\n                              <div class=\"gauge-zone\" style=\"left: 96%; width: 4%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                              <div class=\"gauge-target-tick\" style=\"left: 90.2%;\"></div>\n                              <div class=\"gauge-marker\"\n                                   :class=\"{ 'gauge-marker-ok': Math.abs(currentLum - 230) <= 5 }\"\n                                   :style=\"{ left: lumMarkerPct + '%' }\"></div>\n                          </div>\n                      </div>\n                  </v-card>\n              </div>\n\n              <v-card v-if=\"status === 'success' || status === 'error'\"\n                      :color=\"status === 'success' ? 'green-lighten-5' : 'red-lighten-5'\"\n                      variant=\"flat\"\n                      class=\"pa-3 mt-auto result-card\"\n                      :class=\"status === 'success' ? 'border-success' : 'border-error'\">\n                  <div class=\"d-flex align-center mb-2\">\n                      <v-icon :color=\"status === 'success' ? 'success' : 'error'\" class=\"mr-2\">\n                          {{ status === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}\n                      </v-icon>\n                      <span class=\"text-subtitle-2 font-weight-bold\">{{ status === 'success' ? 'Calibration Successful' : 'Calibration Failed' }}</span>\n                  </div>\n                  <div class=\"result-grid\" v-if=\"status === 'success'\">\n                      <div><span class=\"result-label\">LED</span><span class=\"result-val\">{{ led.toFixed(4) }}</span></div>\n                      <div><span class=\"result-label\">Gain R</span><span class=\"result-val\">{{ gains.red }}</span></div>\n                      <div><span class=\"result-label\">Gain B</span><span class=\"result-val\">{{ gains.blue }}</span></div>\n                      <div><span class=\"result-label\">Sat</span><span class=\"result-val\">{{ currentSat.toFixed(2) }}%</span></div>\n                      <div><span class=\"result-label\">Lum</span><span class=\"result-val\">{{ currentLum.toFixed(1) }}</span></div>\n                      <div><span class=\"result-label\">Δ Lum</span>\n                          <span class=\"result-val\" :class=\"Math.abs(currentLum - 230) <= 5 ? 'text-success' : 'text-warning'\">\n                              {{ (currentLum - 230).toFixed(1) }}\n                          </span>\n                      </div>\n                      <div><span class=\"result-label\">Zones</span><span class=\"result-val\">{{ activeZonesCount }}/400</span></div>\n                  </div>\n              </v-card>\n\n            </v-col>\n\n          </v-row>\n        </v-card-text>\n      </v-card>\n    </v-dialog>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      // Dynamic property populated from msg\n      magnification: \"medium\", \n\n      // Panel Data\n      minFlow: 0.01, maxFlow: 30, pump_flowrate: 0, pump_manual_volume: 0, \n      pump_flowrate_preset: null, pump_volume_preset: null, pump_direction: \"stop\",\n      minFocus: 25, maxFocus: 10000, focus_distance: 25, \n      focus_distance_preset: null, focus_direction: \"stop\",\n      led_state: \"off\", bubbler_value: 0, acq_led_intensity: null,\n      imageSnackbar: false, imageSnackbarText: \"\",\n\n      // Calibration Dialog State\n      calibrationDialog: false,\n\n      // Calibration Process Data\n      status: 'idle', \n      step: 0,        \n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1, \n      gains: { red: 200, blue: 180 },\n      lastFrame: { r: 0, g: 0, b: 0 },\n      gridN: 20,       \n      analysisW: 1200, \n      analysisH: 900,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false }))\n    };\n  },\n\n  created() { \n    this.hydrateFromMsg(this.msg); \n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) { this.pump_flowrate_preset = this.pump_flowrate_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    pump_manual_volume(newVal) { this.pump_volume_preset = this.pump_volume_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    focus_distance(newVal) { this.focus_distance_preset = this.focus_distance_presets.find((v) => v === newVal) ?? null; this.sendFocusParams(); },\n    // Reset values when magnification changes to match the first preset of the new scale\n    magnification() {\n      this.focus_distance = this.focus_distance_presets[0];\n      this.pump_flowrate = this.pump_flowrate_presets[0];\n      this.pump_manual_volume = this.pump_volume_presets[0];\n    }\n  },\n\n  computed: {\n    // --- Dynamic Presets based on Magnification ---\n    focus_distance_presets() {\n      const presets = {\n        high: [25, 50, 200, 10000],\n        medium: [25, 150, 500, 10000],\n        low: [25, 250, 500, 10000]\n      };\n      return presets[this.magnification] || presets['medium'];\n    },\n    pump_flowrate_presets() {\n      const presets = {\n        high: [0.01, 0.5, 2, 5],\n        medium: [0.02, 0.5, 5, 15],\n        low: [0.05, 0.5, 10, 20]\n      };\n      return presets[this.magnification] || presets['medium'];\n    },\n    pump_volume_presets() {\n      const presets = {\n        high: [0.002, 0.01, 2, 20],\n        medium: [0.004, 0.2, 2, 20],\n        low: [0.02, 0.5, 5, 20]\n      };\n      return presets[this.magnification] || presets['medium'];\n    },\n\n    // --- Calibration UI Computed ---\n    btnText() {\n        if(this.status === 'running') return 'STOP';\n        if(this.status === 'success') return 'DONE';\n        if(this.status === 'error') return 'RETRY';\n        return 'START CALIBRATION';\n    },\n    btnColor() {\n        if(this.status === 'running') return 'error';\n        if(this.status === 'success') return 'success';\n        if(this.status === 'error') return 'warning';\n        return 'primary';\n    },\n    btnIcon() {\n        if(this.status === 'running') return 'mdi-stop';\n        if(this.status === 'success') return 'mdi-check';\n        if(this.status === 'error') return 'mdi-refresh';\n        return 'mdi-play';\n    },\n    activeZonesCount() {\n        return this.gridZones.filter(z => z.active).length;\n    },\n    phaseLabel() {\n        if (this.step === 1) return 'INITIALIZING';\n        if (this.step === 2) return 'DESATURATING';\n        if (this.step === 3) return 'EXPOSURE';\n        return '';\n    },\n    satMarkerPct() {\n        return Math.max(0, Math.min(100, (this.currentSat / 20) * 100));\n    },\n    lumMarkerPct() {\n        return Math.max(0, Math.min(100, (this.currentLum / 255) * 100));\n    }\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n      \n      // Extraction de la magnification\n      if (p.acq_magnification !== undefined) {\n        const mag = String(p.acq_magnification).toLowerCase();\n        if (['high', 'medium', 'low'].includes(mag)) {\n          this.magnification = mag;\n        }\n      }\n\n      if (p.acq_led_intensity !== undefined) this.acq_led_intensity = p.acq_led_intensity;\n      if (m.topic === \"status/calibration\") {\n        if (typeof p.led_intensity === \"number\") this.acq_led_intensity = p.led_intensity;\n        if (p.white_balance) this.gains = { red: p.white_balance.red * 100, blue: p.white_balance.blue * 100 };\n      }\n      if (m.topic === \"status/pump\" && p.status === \"Done\") this.pump_direction = \"stop\";\n      if (m.topic === \"status/focus\" && p.status === \"Done\") this.focus_direction = \"stop\";\n      \n      if (\"led_status\" in p || (m.topic === \"status/light\" && \"status\" in p)) {\n        const rawVal = p.led_status !== undefined ? p.led_status : p.status;\n        const s = String(rawVal).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n      \n      if (m.topic === \"status/bubbler\") {\n        if (p.value !== undefined) this.bubbler_value = Number(p.value);\n        else if (p.status === \"Off\") this.bubbler_value = 0;\n      }\n\n      this.pump_flowrate = p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n      this.pump_manual_volume = p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) this.pump_direction = p.command;\n      if (typeof p.focus_distance === \"number\") this.focus_distance = p.focus_distance;\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) this.focus_direction = p.command;\n    },\n\n    on_led_toggle(val) {\n      this.led_state = val;\n      const lightCommandPayload = { action: val };\n      if (val === \"on\" && this.acq_led_intensity !== null) lightCommandPayload.value = this.acq_led_intensity;\n      if(this.send) {\n        this.send({ topic: \"light\", payload: lightCommandPayload });\n        this.send({ topic: \"set_global/light\", payload: { led_status: val, acq_led_intensity: this.acq_led_intensity } });\n      }\n    },\n\n    on_bubbler_value_change(val) {\n      const numericValue = Number(val);\n      const action = numericValue > 0 ? \"on\" : \"off\";\n      const messagePayload = { action: action, value: numericValue };\n      if(this.send) {\n        this.send({ topic: \"actuator/bubbler\", payload: messagePayload });\n        this.send({ topic: \"set_global/bubbler\", payload: messagePayload });\n      }\n    },\n\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() { if(this.send) { this.send({ topic: \"set_global/pump\", payload: { pump_flowrate: Number(this.pump_flowrate) || 0, pump_manual_volume: Number(this.pump_manual_volume) || 0 } }); } },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (!this.send) return;\n      if (val === \"stop\") { this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } }); }\n      else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({ topic: \"actuator/pump\", payload: { action: \"move\", direction: dir, volume: Number(this.pump_manual_volume) || 0, flowrate: Number(this.pump_flowrate) || 0 } });\n      }\n    },\n\n    on_focus_distance_toggle(val) { if (val != null) this.focus_distance = val; },\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000, x2 = 1000, y2 = 2000, x3 = 5000, y3 = 5000;\n      if (d <= x1) return y1; if (d >= x3) return y3;\n      if (d <= x2) return Math.round(y1 + ((y2 - y1) / (x2 - x1)) * (d - x1));\n      return Math.round(y2 + ((y3 - y2) / (x3 - x2)) * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      if(this.send) { this.send({ topic: \"set_global/focus\", payload: { focus_distance: d, focus_speed: this.speedFromDistance(d) } }); }\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (!this.send) return;\n      if (val === \"stop\") { this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } }); }\n      else {\n        const d = Number(this.focus_distance) || 25;\n        this.send({ topic: \"actuator/focus\", payload: { action: \"move\", direction: val, distance: d / 1000, speed: this.speedFromDistance(d) / 1000 } });\n      }\n    },\n\n    getStepColor(s) {\n        if (this.status === 'success' || this.step > s) return 'success';\n        if (this.status === 'error' && this.step === s) return 'error';\n        if (this.step === s) return 'orange-lighten-4';\n        return 'grey-lighten-4';\n    },\n    getStepIcon(s) {\n        if (this.status === 'success' || this.step > s) return 'mdi-check-circle';\n        if (this.status === 'error' && this.step === s) return 'mdi-alert-circle';\n        if (this.step === s) return 'mdi-loading';\n        return 'mdi-numeric-'+s+'-circle-outline';\n    },\n\n    async toggleSequence() {\n        if(this.status === 'running') {\n            this.status = 'idle'; this.step = 0; this.stopHardware(); return;\n        }\n        if(this.status === 'success') {\n            this.status = 'idle'; this.step = 0; this.currentSat = 0; this.currentLum = 0;\n            this.gridZones.forEach(z => { z.active = false; z.lum = 0; });\n            this.calibrationDialog = false;\n            return;\n        }\n        if(this.status === 'error') {\n            this.status = 'idle'; this.step = 0; this.currentSat = 0; this.currentLum = 0;\n            this.gridZones.forEach(z => { z.active = false; z.lum = 0; });\n        }\n        this.status = 'running';\n        this.step = 1;\n        try {\n            await this.runInit();\n            this.step = 2;\n            await this.runSaturationLoop();\n            this.step = 3;\n            this.gridZones.forEach(z => z.active = false); \n            await this.runLightnessLoop();\n            this.status = 'success';\n            // The run converged, so persist what the controller is now running.\n            // Without this the calibration lives only in volatile state and is lost on\n            // reboot or an LED off/on cycle (fairscope/PlanktoScope3#575).\n            if (this.send) {\n                this.send({ topic: \"calibration/save\", payload: { led_intensity: Number(this.led.toFixed(6)), white_balance: { red: this.gains.red / 100, blue: this.gains.blue / 100 } } });\n            }\n            this.step = 4;\n        } catch(e) {\n            console.error(e);\n            this.status = 'error';\n            this.stopHardware();\n        }\n    },\n\n    async runInit() {\n        this.led = 0.1; this.gains = { red: 200, blue: 180 };\n        this.sendIO();\n        await this.wait(1000); \n    },\n\n    async runSaturationLoop() {\n        let iter = 0;\n        while(iter < 25 && this.status === 'running') {\n            const stats = await this.analyzeFrame(true);\n            this.currentSat = stats.sat;\n            this.lastFrame = { r: stats.r, g: stats.g, b: stats.b };\n            if(stats.sat < 2.0) return;\n            const Kp = 0.8;\n            this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n            this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n            this.sendIO();\n            await this.wait(1000); \n            iter++;\n        }\n        if(this.status === 'running' && this.currentSat >= 5.0) throw new Error('Saturation did not converge');\n    },\n\n    async runLightnessLoop() {\n        let iter = 0;\n        while(iter < 40 && this.status === 'running') {\n            const stats = await this.analyzeFrame(false);\n            this.currentLum = stats.lum;\n            if(Math.abs(stats.lum - 230) <= 5) return;\n            let nextLed = this.led;\n            if(stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n            else if(stats.lum > 252) nextLed = this.led * 0.5;\n            else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n            this.led = Math.max(0, Math.min(1, nextLed));\n            this.sendIO();\n            await this.wait(350); \n            iter++;\n        }\n        if(this.status === 'running' && Math.abs(this.currentLum - 230) > 5) throw new Error('Exposure did not converge');\n    },\n\n    async analyzeFrame(isSaturationStep) {\n        const iframe = this.$refs.videoIframe;\n        if(!iframe?.contentDocument) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const video = iframe.contentDocument.querySelector('video');\n        if(!video || video.videoWidth === 0) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n        ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n        if(isSaturationStep) {\n            const size = 100;\n            const data = ctx.getImageData((this.analysisW-size)/2, (this.analysisH-size)/2, size, size).data;\n            let r=0, g=0, b=0, c=0;\n            for(let i=0; i<data.length; i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; c++; }\n            const avgR=r/c, avgG=g/c, avgB=b/c;\n            const max=Math.max(avgR, avgG, avgB), min=Math.min(avgR, avgG, avgB);\n            return { sat: parseFloat((max===0?0:((max-min)/max)*100).toFixed(1)), r:avgR, g:avgG, b:avgB };\n        } else {\n            const cellW = this.analysisW / this.gridN; \n            const cellH = this.analysisH / this.gridN;\n            let vL=0, vC=0;\n            for(let i=0; i<this.gridN; i++) {\n                for(let j=0; j<this.gridN; j++) {\n                    const data = ctx.getImageData((j*cellW)+(cellW-15)/2, (i*cellH)+(cellH-15)/2, 15, 15).data;\n                    let s=0, mP=255;\n                    for(let k=0; k<data.length; k+=4) { \n                        const l=(data[k]+data[k+1]+data[k+2])/3; \n                        if(l<mP) mP=l; s+=l; \n                    }\n                    const avg=s/(data.length/4);\n                    const isValid=(avg-mP)<=this.sensitivityThreshold && avg>2;\n                    this.gridZones[i*this.gridN+j] = { active: isValid, lum: avg };\n                    if(isValid){ vL+=avg; vC++; }\n                }\n            }\n            return { lum: vC > 0 ? vL/vC : 0 };\n        }\n    },\n\n    sendIO() {\n        if(this.send) {\n            this.send({ topic: \"light\", payload: { action: \"on\", value: Number(this.led.toFixed(12)), acq_led_intensity: Number(this.led.toFixed(6)), led_status: \"on\" } });\n            this.send({ topic: \"imager/image\", payload: { action: \"settings\", settings: { white_balance_gain: this.gains } } });\n        }\n    },\n\n    stopHardware() {\n        if(this.send) this.send({ topic: \"light\", payload: { action: \"off\", value: 0, led_status: \"off\" } });\n    },\n\n    onIframeLoad() {\n      try {\n        const doc = this.$refs.videoIframe.contentDocument;\n        const s = doc.createElement('style');\n        s.textContent = `html { border: none; background: black; } body { margin:0; width:100%; height:100%; overflow:hidden; background:black; } img, video { width:100%; height:100%; object-fit:fill; display:block; } #root { background: black; border: none; } .zoomist-slider, .zoomist-zoomer, button { display: none !important; }`;\n        doc.head.appendChild(s);\n      } catch (e) { console.error('Iframe style injection failed:', e); }\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); }\n  }\n};\n</script>\n\n<style scoped>\n.v-card-text { padding: 0 !important; }\n.v-card { border: none; }\n.v-container { background: #eef3ff; }\n.border { border: 1px solid #cccccc !important; }\n.v-text-field--suffixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input { padding-top: 10px; }\n\n.iframe-wrapper { width: 100%; max-width: 600px; aspect-ratio: 3/4; margin: 0 auto; overflow: hidden; border-radius: 8px; background-color: #000; position: relative; }\n.rotated-content { position: absolute; top: 50%; left: 50%; width: 133.33%; height: 75%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center center; }\n.calibration-iframe { width: 100%; height: 100%; border: none; pointer-events: auto; position: absolute; top: 0; left: 0; }\n.focus-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border: 2px dashed rgba(255, 165, 0, 0.8); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); z-index: 10; pointer-events: none; }\n.smart-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(20, 1fr); grid-template-rows: repeat(20, 1fr); z-index: 10; pointer-events: none; }\n.crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n.focus-label { position: absolute; top: -25px; width: 200px; text-align: center; color: orange; font-size: 10px; font-weight: bold; letter-spacing: 1px; }\n.grid-cell { border: 1px solid rgba(255,255,255,0.12); transition: background 0.15s; }\n.cell-active { background-color: rgba(0, 255, 0, 0.18); border-color: rgba(0,255,0,0.5); }\n.cell-rejected { background-color: rgba(255, 0, 0, 0.12); }\n.phase-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.75); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: bold; letter-spacing: 1px; z-index: 20; display: flex; align-items: center; }\n.gauge { width: 100%; padding: 4px 0; }\n.gauge-track { position: relative; width: 100%; height: 12px; background: #eee; border-radius: 6px; overflow: visible; }\n.gauge-zone { position: absolute; top: 0; height: 100%; opacity: 0.85; }\n.gauge-target-tick { position: absolute; top: -3px; height: 18px; width: 2px; background: #000; transform: translateX(-50%); z-index: 2; }\n.gauge-marker { position: absolute; top: 50%; width: 14px; height: 14px; background: #fff; border: 2px solid #333; border-radius: 50%; transform: translate(-50%, -50%); transition: left 0.3s ease, border-color 0.2s, background 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); z-index: 3; }\n.gauge-marker-ok { background: #4caf50; border-color: #2e7d32; }\n.result-card { border-left: 4px solid; }\n.border-success { border-left-color: #4caf50 !important; }\n.border-error { border-left-color: #f44336 !important; }\n.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }\n.result-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; font-weight: bold; }\n.result-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: bold; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n.mdi-spin { animation: spin 1s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3612,7 +3620,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "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 Settings</div>\n        </div>\n\n        <v-alert v-if=\"sample_project || sample_id\" type=\"info\" color=\"teal-darken-1\" variant=\"tonal\" density=\"compact\" class=\"mb-4\">\n          <div class=\"d-flex flex-wrap ga-4 text-body-2\">\n            <span v-if=\"sample_project\"><strong>Project:</strong> {{ sample_project }}</span>\n            <span v-if=\"sample_id\"><strong>Sample:</strong> {{ sample_id }}</span>\n            <span v-if=\"sample_operator\"><strong>Operator:</strong> {{ sample_operator }}</span>\n            <span v-if=\"sample_gear\"><strong>Gear:</strong> {{ sample_gear }}</span>\n          </div>\n        </v-alert>\n\n        <v-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pr-sm-2\">\n            <v-text-field v-model=\"acq_id\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" density=\"compact\"\n              :disabled=\"acq_status === 'on'\">\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\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pl-sm-2\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\"\n              label=\"Number of Images\" suffix=\"img\" density=\"compact\"\n              @update:model-value=\"autoCalculateVolumes(true)\"\n              :disabled=\"acq_status === 'on'\">\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-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-btn-toggle v-model=\"tempMag\" mandatory divided variant=\"outlined\" color=\"primary\"\n              class=\"w-100 font-weight-bold d-flex flex-wrap\" style=\"height: 80px !important\"\n              @update:model-value=\"confirmMagChange\" :disabled=\"acq_status === 'on'\">\n              <v-btn value=\"high\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-small</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">High Mag (100µm)</span>\n              </v-btn>\n              <v-btn value=\"medium\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-medium</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Medium Mag (300µm)</span>\n              </v-btn>\n              <v-btn value=\"low\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Low Mag (500µm)</span>\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels variant=\"accordion\" class=\"border rounded pa-0 mt-4\">\n          <v-expansion-panel elevation=\"0\">\n            <v-expansion-panel-title class=\"pa-4 bg-primary text-subtitle-1 font-weight-bold\">\n              Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-0 bg-grey-lighten-5\">\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowcell Thickness :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_flowcell_thickness\" suffix=\"µm\" variant=\"flat\" readonly\n                    bg-color=\"bg-grey-lighten-5\" hide-details>\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowcell Thickness', 'Thickness of the flowcell used in this configuration (µm).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowrate between images :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_interframe_flowrate\" :min=\"1\" :step=\"1\" suffix=\"mL/min\" variant=\"outlined\"\n                    type=\"number\" bg-color=\"white\" hide-details\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowrate between images','Speed of the flow Pumped 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-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Stabilization Delay :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model.number=\"acq_stabilization_delay\" :min=\"0\" :step=\"0.1\" suffix=\"s\"\n                    variant=\"outlined\" type=\"number\" bg-color=\"white\" hide-details @input=\"sendUpdate()\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Stabilization Delay','Time to wait for flow stabilization before taking an image.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex flex-column justify-center\">\n                  <div class=\"d-flex align-center mb-1\">\n                    <span class=\"text-subtitle-1 text-medium-emphasis\">Volume between images :</span>\n                  </div>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"Number((acq_interframe_volume * 1000).toFixed(2))\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(true); }\"\n                    type=\"number\" :min=\"0.1\" :step=\"0.1\" variant=\"outlined\" hide-details suffix=\"µL\" bg-color=\"white\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume Pumped 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-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Total Volume Pumped :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumePumpedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n\n        <v-row class=\"align-center pa-0 mt-4\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-textarea v-model=\"acq_comment\" label=\"Acquisition comment\" variant=\"outlined\" rows=\"3\" auto-grow\n              hide-details placeholder=\"Optional notes...\" bg-color=\"white\" @input=\"sendUpdate()\"\n              :disabled=\"acq_status === 'on'\">\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-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\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              style=\"height: 60px !important\">\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        <v-row v-if=\"acq_status === 'on'\" class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-btn block :color=\"acq_paused ? 'green' : 'orange'\" variant=\"outlined\"\n              class=\"mt-2\" style=\"height: 48px\" @click=\"handlePauseToggle\">\n              {{ acq_paused ? 'Resume Acquisition' : 'Pause Acquisition' }}\n            </v-btn>\n          </v-col>\n        </v-row>\n\n        <v-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1 mt-4\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-6 rounded-lg\">\n        <v-card-title class=\"text-h6 px-0\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2 px-0 pt-2\"></v-card-text>\n        <v-card-actions class=\"px-0 pb-0\">\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"text\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n    <v-dialog v-model=\"magConfirmDialog\" max-width=\"500\" persistent>\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"d-flex align-center text-h5 font-weight-bold\">\n          <v-icon color=\"primary\" size=\"large\" class=\"mr-3\">mdi-cog-sync</v-icon>\n          Hardware Setup\n        </v-card-title>\n        <v-card-text class=\"pa-4\">\n          <p class=\"text-body-1 mb-6\">\n            Switching to <v-chip color=\"primary\" size=\"small\" label class=\"font-weight-bold\">{{ tempMag?.toUpperCase() }}</v-chip>.\n          </p>\n          <div class=\"bg-grey-lighten-4 rounded-lg pa-4 mb-4\">\n            <p class=\"text-subtitle-2 mb-3 font-weight-bold text-primary\">System configuration:</p>\n            <ul class=\"ml-6 text-body-2\">\n              <li class=\"mb-1\"><strong>Lens:</strong> {{ getPreviewSettings(tempMag).tube }} / {{ getPreviewSettings(tempMag).obj }}</li>\n              <li class=\"mb-1\"><strong>Pixel:</strong> {{ getPreviewSettings(tempMag).pixel }} µm</li>\n              <li class=\"mb-1\"><strong>Flowcell:</strong> {{ getPreviewSettings(tempMag).thickness }} µm</li>\n              <li class=\"mb-1\"><strong>Flowrate:</strong> {{ getPreviewSettings(tempMag).flowrate }} mL/min</li>\n            </ul>\n          </div>\n          <p class=\"text-caption text-medium-emphasis\">Parameters will be updated automatically.</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-btn variant=\"text\" @click=\"cancelMagChange\">Cancel</v-btn>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"flat\" @click=\"applyMagChange\">Confirm & Update</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n    <v-dialog\n      v-model=\"cal_dialog\"\n      :persistent=\"cal_status === 'running'\"\n      width=\"1100\"\n      max-width=\"95vw\"\n      scrollable\n      @update:model-value=\"on_cal_dialog_change\"\n    >\n      <v-card class=\"bg-grey-lighten-4\">\n        <v-toolbar density=\"compact\" color=\"white\" elevation=\"1\">\n          <v-toolbar-title class=\"text-subtitle-1 font-weight-bold\">\n            <v-icon class=\"mr-2\">mdi-tune</v-icon>Calibration\n          </v-toolbar-title>\n          <v-spacer></v-spacer>\n          <v-btn icon=\"mdi-close\" variant=\"text\" density=\"comfortable\"\n                 @click.stop=\"request_close_dialog\"\n                 :disabled=\"cal_status === 'running'\" />\n        </v-toolbar>\n\n        <v-row no-gutters>\n\n          <v-col cols=\"12\" md=\"8\" class=\"d-flex align-center justify-center pa-4\">\n            <div class=\"ratio-box\">\n              <v-card class=\"calibration-container\" elevation=\"3\">\n                <iframe\n                  v-if=\"cal_dialog\"\n                  src=\"/preview/node-red\"\n                  class=\"calibration-iframe\"\n                  @load=\"onIframeLoad\"\n                  ref=\"videoIframe\"\n                ></iframe>\n\n                <div v-if=\"cal_step === 2\" class=\"focus-overlay\">\n                  <div class=\"crosshair\"></div>\n                  <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n                </div>\n\n                <div v-show=\"cal_step === 3\" class=\"smart-grid\">\n                  <div\n                    v-for=\"(zone, i) in gridZones\"\n                    :key=\"i\"\n                    class=\"grid-cell\"\n                    :class=\"{\n                      'cell-active': zone.active,\n                      'cell-rejected': !zone.active && cal_status === 'running'\n                    }\"\n                  ></div>\n                </div>\n\n                <div v-if=\"cal_status === 'running'\" class=\"phase-badge\">\n                  <v-icon size=\"small\" class=\"mr-1\">mdi-camera-iris</v-icon>\n                  {{ phaseLabel }}\n                </div>\n\n                <canvas ref=\"captureCanvas\" :width=\"analysisW\" :height=\"analysisH\" style=\"display:none;\"></canvas>\n              </v-card>\n            </div>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\" class=\"bg-white d-flex flex-column pa-4 control-panel\">\n\n            <div class=\"mb-4\">\n              <v-btn\n                block size=\"default\"\n                :color=\"calBtnColor\"\n                @click=\"primaryAction\"\n                class=\"font-weight-bold\"\n                :prepend-icon=\"calBtnIcon\"\n                style=\"height:40px;\"\n              >\n                {{ calBtnText }}\n              </v-btn>\n            </div>\n\n            <div class=\"d-flex flex-column\" style=\"gap: 8px;\">\n\n              <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                <div class=\"d-flex align-center\">\n                  <v-icon :icon=\"getStepIcon(1)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': cal_step === 1 }\"></v-icon>\n                  <span class=\"text-subtitle-2 font-weight-bold\">1 · Initialization</span>\n                </div>\n              </v-card>\n\n              <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                <div class=\"d-flex align-center mb-1\">\n                  <v-icon :icon=\"getStepIcon(2)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': cal_step === 2 }\"></v-icon>\n                  <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between align-center\">\n                      <span class=\"text-subtitle-2 font-weight-bold\">2 · Desaturation</span>\n                      <span v-if=\"cal_step >= 2\" class=\"font-mono font-weight-black text-body-2\">\n                        {{ currentSat.toFixed(1) }}%\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                <div v-if=\"cal_step >= 2\" class=\"gauge mt-1\">\n                  <div class=\"gauge-track\">\n                    <div class=\"gauge-zone\" style=\"left: 0%; width: 10%; background: #4caf50; border-radius: 6px 0 0 6px;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 10%; width: 10%; background: #ff9800;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 20%; width: 80%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                    <div class=\"gauge-target-tick\" style=\"left: 0%;\"></div>\n                    <div class=\"gauge-marker\"\n                         :class=\"{ 'gauge-marker-ok': currentSat <= 2 }\"\n                         :style=\"{ left: satMarkerPct + '%' }\"></div>\n                  </div>\n                </div>\n\n                <div v-if=\"cal_step >= 2\" class=\"d-flex justify-space-between mt-1 font-mono text-caption\">\n                  <span>Pixel R: <strong>{{ Math.round(lastFrame.r) }}</strong></span>\n                  <span>G: <strong>{{ Math.round(lastFrame.g) }}</strong></span>\n                  <span>B: <strong>{{ Math.round(lastFrame.b) }}</strong></span>\n                </div>\n              </v-card>\n\n              <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                <div class=\"d-flex align-center mb-1\">\n                  <v-icon :icon=\"getStepIcon(3)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': cal_step === 3 }\"></v-icon>\n                  <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between align-center\">\n                      <span class=\"text-subtitle-2 font-weight-bold\">3 · Exposure</span>\n                      <span v-if=\"cal_step >= 3\" class=\"font-mono font-weight-black text-body-2\">\n                        {{ currentLum.toFixed(0) }} / 230\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                <div v-if=\"cal_step >= 3\" class=\"gauge mt-1\">\n                  <div class=\"gauge-track\">\n                    <div class=\"gauge-zone\" style=\"left: 0%; width: 84.3%; background: #f44336; border-radius: 6px 0 0 6px;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 84.3%; width: 3.9%; background: #ff9800;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 88.2%; width: 3.9%; background: #4caf50;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 92.1%; width: 3.9%; background: #ff9800;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 96%; width: 4%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                    <div class=\"gauge-target-tick\" style=\"left: 90.2%;\"></div>\n                    <div class=\"gauge-marker\"\n                         :class=\"{ 'gauge-marker-ok': Math.abs(currentLum - 230) <= 5 }\"\n                         :style=\"{ left: lumMarkerPct + '%' }\"></div>\n                  </div>\n                </div>\n              </v-card>\n            </div>\n\n            <v-card v-if=\"cal_status === 'success' || cal_status === 'error'\"\n                    :color=\"cal_status === 'success' ? 'green-lighten-5' : 'red-lighten-5'\"\n                    variant=\"flat\"\n                    class=\"pa-3 mt-3 result-card\"\n                    :class=\"cal_status === 'success' ? 'border-success' : 'border-error'\">\n              <div class=\"d-flex align-center mb-2\">\n                <v-icon :color=\"cal_status === 'success' ? 'success' : 'error'\" class=\"mr-2\">\n                  {{ cal_status === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}\n                </v-icon>\n                <span class=\"text-subtitle-2 font-weight-bold\">{{ resultStatusLabel }}</span>\n                <v-spacer></v-spacer>\n                <span class=\"text-caption font-mono\">{{ totalTime }}s</span>\n              </div>\n              <div class=\"result-grid\">\n                <div><span class=\"result-label\">LED</span><span class=\"result-val\">{{ led.toFixed(4) }}</span></div>\n                <div><span class=\"result-label\">Gain R</span><span class=\"result-val\">{{ gains.red }}</span></div>\n                <div><span class=\"result-label\">Gain B</span><span class=\"result-val\">{{ gains.blue }}</span></div>\n                <div><span class=\"result-label\">Sat</span><span class=\"result-val\">{{ currentSat.toFixed(2) }}%</span></div>\n                <div><span class=\"result-label\">Lum</span><span class=\"result-val\">{{ currentLum.toFixed(1) }}</span></div>\n                <div><span class=\"result-label\">Δ</span>\n                  <span class=\"result-val\" :class=\"Math.abs(currentLum - 230) <= 5 ? 'text-success' : 'text-warning'\">\n                    {{ (currentLum - 230).toFixed(1) }}\n                  </span>\n                </div>\n                <div><span class=\"result-label\">Zones</span><span class=\"result-val\">{{ activeZonesCount }}/400</span></div>\n                <div><span class=\"result-label\">Iter</span><span class=\"result-val\">{{ totalIter }}</span></div>\n              </div>\n            </v-card>\n\n          </v-col>\n        </v-row>\n      </v-card>\n    </v-dialog>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      // ============ ACQUISITION DATA ============\n      acq_id: \"\",\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: \"\",\n      acq_nb_frame: 10,\n      acq_interframe_volume: 0.010,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      acq_status: \"off\",\n      acq_paused: false,\n      acq_status_message: \"\",\n\n      currentMag: \"medium\",\n      tempMag: \"medium\",\n      magConfirmDialog: false,\n\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n      calibration_pixel_size: 0.75,\n      acq_flowcell_thickness: 300,\n      acq_tube_lens_reference: \"25mm_F1.8\",\n      acq_objective_lens_reference: \"12mm_F1.8\",\n      acq_interframe_flowrate: 2,\n      acq_stabilization_delay: 0.5,\n\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n\n      // ============ CALIBRATION DATA ============\n      cal_dialog: false,\n      cal_status: 'idle',\n      cal_step: 0,\n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1,\n      gains: { red: 200, blue: 180 },\n      lastFrame: { r: 0, g: 0, b: 0 },\n      gridN: 20,\n      analysisW: 1200,\n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false })),\n      timing: { init: 1000, satSettle: 1000, lumSettle: 350 },\n      startedAt: 0,\n      totalTime: 0,\n      totalIter: 0,\n      prevSat: null,\n      prevLum: null\n    };\n  },\n\n  computed: {\n    // ============ ACQUISITION COMPUTED ============\n    magLabel() { return ({ high: 'high', medium: 'med', low: 'low' })[this.currentMag] || ''; },\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      if (s === \"Paused\") return \"Acquisition paused. You may adjust settings.\";\n      if (s === \"Resumed\") return \"Acquisition resumed.\";\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\", \"Resumed\"].includes(s)) return \"green\";\n      if (s === \"Paused\") return \"orange\";\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    // ============ CALIBRATION COMPUTED ============\n    calBtnText() {\n      if (this.cal_status === 'running') return 'STOP';\n      if (this.cal_status === 'success') return 'DONE';\n      if (this.cal_status === 'error') return 'RETRY';\n      return 'START CALIBRATION';\n    },\n    calBtnIcon() {\n      if (this.cal_status === 'running') return 'mdi-stop';\n      if (this.cal_status === 'success') return 'mdi-check';\n      if (this.cal_status === 'error') return 'mdi-refresh';\n      return 'mdi-play';\n    },\n    calBtnColor() {\n      if (this.cal_status === 'running') return 'error';\n      if (this.cal_status === 'success') return 'success';\n      if (this.cal_status === 'error') return 'warning';\n      return 'primary';\n    },\n    activeZonesCount() {\n      return this.gridZones.filter(z => z.active).length;\n    },\n    phaseLabel() {\n      if (this.cal_step === 1) return 'INITIALIZING';\n      if (this.cal_step === 2) return 'DESATURATING';\n      if (this.cal_step === 3) return 'EXPOSURE';\n      return '';\n    },\n    resultStatusLabel() {\n      if (this.cal_status === 'error') return 'Calibration failed';\n      const d = Math.abs(this.currentLum - 230);\n      if (d <= 5) return 'Calibration complete';\n      if (d <= 15) return 'Review needed';\n      return 'Out of tolerance';\n    },\n    satMarkerPct() { return Math.max(0, Math.min(100, (this.currentSat / 20) * 100)); },\n    lumMarkerPct() { return Math.max(0, Math.min(100, (this.currentLum / 255) * 100)); }\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = p.acq_id;\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) this.sample_id = p.sample_id;\n        if (p.sample_operator !== undefined) this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        \n        if (\"acq_comment\" in p) this.acq_comment = p.acq_comment ?? \"\";\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.acq_tube_lens_reference !== undefined) this.acq_tube_lens_reference = p.acq_tube_lens_reference;\n        if (p.acq_objective_lens_reference !== undefined) this.acq_objective_lens_reference = p.acq_objective_lens_reference;\n        if (p.acq_interframe_flowrate !== undefined) this.acq_interframe_flowrate = Number(p.acq_interframe_flowrate);\n        if (p.acq_stabilization_delay !== undefined) this.acq_stabilization_delay = Number(p.acq_stabilization_delay);\n\n        // Pixel-size lockdown: preset slug is the only valid input.\n        // Ignore stray process_pixel_size / calibration_pixel_size payloads;\n        // any value outside {0.53, 0.75, 1.34} would have silently defaulted\n        // to \"medium\" under the old reverse-mapping logic.\n        if (p.acq_magnification && [\"high\",\"medium\",\"low\"].includes(p.acq_magnification)) {\n          this.currentMag = p.acq_magnification;\n          this.tempMag = p.acq_magnification;\n          const cfg = this.getPreviewSettings(p.acq_magnification);\n          this.calibration_pixel_size       = cfg.pixel;\n          this.acq_tube_lens_reference      = cfg.tube;\n          this.acq_objective_lens_reference = cfg.obj;\n        }\n\n        if (p.acq_status !== undefined) {\n          const statusStr = String(p.acq_status).toLowerCase();\n          if (statusStr === 'on' || statusStr === 'true' || statusStr === '1') {\n            this.acq_status = 'on';\n          } else {\n            this.acq_status = 'off';\n          }\n        }\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          \n          if (p.acq_status === undefined) {\n            const s = String(p.status).toLowerCase();\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\")) this.acq_status = \"on\";\n            if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\")) { this.acq_status = \"off\"; this.acq_paused = false; }\n            if (s.includes(\"paused\")) this.acq_paused = true;\n            if (s.includes(\"resumed\")) this.acq_paused = false;\n          }\n        }\n\n        if (topic === \"status/imager\" && (p.status === \"Done\" || p.status?.includes(\"error\"))) {\n          this.incrementAcqId();\n          this.sendUpdate();\n        }\n\n        this.autoCalculateVolumes(false);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.autoCalculateVolumes(false);\n  },\n\n  methods: {\n    // ============ ACQUISITION METHODS ============\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    confirmMagChange() {\n      this.magConfirmDialog = true;\n    },\n\n    cancelMagChange() {\n      this.magConfirmDialog = false;\n      this.tempMag = this.currentMag;\n    },\n\n    getPreviewSettings(mag) {\n      const settings = {\n        high:   { tube: \"35mm_F2.4\", obj: \"12mm_F2\",     pixel: 0.53, thickness: 100, flowrate: 1 },\n        medium: { tube: \"25mm_F1.8\", obj: \"12mm_F1.8\",   pixel: 0.75, thickness: 300, flowrate: 2 },\n        low:    { tube: \"25mm_F2.0\", obj: \"21.8mm_F2.8\", pixel: 1.34, thickness: 500, flowrate: 3 }\n      };\n      return settings[mag] || settings.medium;\n    },\n\n    applyMagChange() {\n      this.currentMag = this.tempMag;\n\n      const settings = {\n        high:   { tube_lens: \"35mm_F2.4\", obj_lens: \"12mm_F2\",     pixel_size: 0.53, thickness: 100, inter_vol_ul: 3,  flowrate: 1, stabilization: 1.5 },\n        medium: { tube_lens: \"25mm_F1.8\", obj_lens: \"12mm_F1.8\",   pixel_size: 0.75, thickness: 300, inter_vol_ul: 6,  flowrate: 3, stabilization: 0.5 },\n        low:    { tube_lens: \"25mm_F2.0\", obj_lens: \"21.8mm_F2.8\", pixel_size: 1.34, thickness: 500, inter_vol_ul: 15, flowrate: 3, stabilization: 0.5 }\n      };\n\n      const config = settings[this.currentMag];\n      if (config) {\n        this.acq_tube_lens_reference      = config.tube_lens;\n        this.acq_objective_lens_reference = config.obj_lens;\n        this.calibration_pixel_size       = config.pixel_size;\n        this.acq_flowcell_thickness       = config.thickness;\n        this.acq_interframe_flowrate      = config.flowrate;\n        this.acq_interframe_volume        = config.inter_vol_ul / 1000;\n        this.acq_stabilization_delay      = config.stabilization;\n      }\n\n      this.magConfirmDialog = false;\n      this.autoCalculateVolumes(true);\n      this.sendUpdate({ magnification_change: this.currentMag });\n\n      // After updating, immediately open the calibration modal\n      this.cal_dialog = true;\n    },\n\n    incrementAcqId() {\n      const current = String(this.acq_id || \"0\");\n      const num = parseInt(current, 10);\n      const padLen = current.length > 0 ? current.length : 1;\n      this.acq_id = String((isNaN(num) ? 0 : num) + 1).padStart(padLen, \"0\");\n    },\n\n    autoCalculateVolumes(emit = true) {\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        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        this.frame_volume_um3  = w_um * h_um * this.acq_flowcell_thickness;\n        this.acq_imaged_volume = (this.frame_volume_um3 / 1e12) * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3  = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      this.acq_pumped_volume = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      if (emit) this.sendUpdate();\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"off\") {\n        this.incrementAcqId();\n        this.sendUpdate();\n        this.acq_status_message = \"Acquisition stopped. ID incremented.\";\n      } else {\n        this.sendUpdate({\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_stabilization_delay: this.acq_stabilization_delay,\n          acq_interframe_flowrate: this.acq_interframe_flowrate\n        });\n      }\n    },\n\n    handlePauseToggle() {\n      this.acq_paused = !this.acq_paused;\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: \"pause_control\",\n        payload: { action: this.acq_paused ? \"pause\" : \"resume\" }\n      });\n      this.acq_status_message = this.acq_paused ? \"Paused\" : \"Resumed\";\n    },\n\n    showVolumeImagedHint() {\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\"><strong>Volume Imaged</strong> is the fluid volume captured by the optics.</p>\n        <v-divider class=\"my-3\"></v-divider>\n        <ul class=\"ml-4\">\n          <li><strong>Width:</strong> ${Math.round(this.sensor_width_um)} µm</li>\n          <li><strong>Height:</strong> ${Math.round(this.sensor_height_um)} µm</li>\n          <li><strong>Thickness:</strong> ${this.acq_flowcell_thickness} µm</li>\n          <li><strong>Pixel Size:</strong> ${this.calibration_pixel_size} µm</li>\n        </ul>\n        <p class=\"mt-4\">Total = ${this.acq_nb_frame} imgs × ${this.fmt(this.frame_volume_ml)} mL = <strong>${this.fmt(this.acq_imaged_volume)} mL</strong></p>\n      </div>`;\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumePumpedHint() {\n      const html = `<p><b>Total Volume Pumped</b> corresponds to the volume Pumped between images.</p>\n        <ul>\n          <li><b>Inter-frame Volume:</b> ${this.fmt(this.acq_interframe_volume)} mL</li>\n          <li><b>Number of Images:</b> ${this.acq_nb_frame}</li>\n        </ul>\n        <p><b>Calculation:</b> ${this.fmt(this.acq_interframe_volume)} mL × ${this.acq_nb_frame} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Pumped\", 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      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id:                         this.acq_id,\n          acq_nb_frame:                   this.acq_nb_frame,\n          acq_interframe_volume:          this.acq_interframe_volume,\n          acq_imaged_volume:              Number(Number(this.acq_imaged_volume).toFixed(3)),\n          acq_pumped_volume:              Number(Number(this.acq_pumped_volume).toFixed(3)),\n          acq_comment:                    this.acq_comment,\n          acq_status:                     this.acq_status,\n          acq_magnification:              this.currentMag,\n          acq_tube_lens_reference:        this.acq_tube_lens_reference,\n          acq_objective_lens_reference:   this.acq_objective_lens_reference,\n          process_pixel:                  this.calibration_pixel_size,\n          process_pixel_size:             this.calibration_pixel_size,\n          calibration_pixel_size:         this.calibration_pixel_size,\n          sensor_width_um:                this.sensor_width_um,\n          sensor_height_um:               this.sensor_height_um,\n          acq_flowcell_thickness:         this.acq_flowcell_thickness,\n          acq_interframe_flowrate:        this.acq_interframe_flowrate,\n          acq_stabilization_delay:        this.acq_stabilization_delay,\n          ...extra,\n        },\n      });\n    },\n\n    // ============ CALIBRATION METHODS ============\n    on_cal_dialog_change(open) {\n      if (!open) {\n        if (this.cal_status === 'running') {\n          this.cal_dialog = true; // Prevent closing while running\n        } else {\n          this.cal_reset(); // Reset visual state when fully closed\n        }\n      }\n    },\n    request_close_dialog() {\n      if (this.cal_status === 'running') return;\n      // Reset FIRST so the v-model watcher sees cal_status === 'idle'\n      // when cal_dialog flips to false and cannot trigger a re-open.\n      this.cal_reset();\n      this.cal_dialog = false;\n    },\n    getStepColor(s) {\n      if (this.cal_status === 'success' && this.cal_step >= s) return 'green';\n      if (this.cal_status === 'error' && this.cal_step === s) return 'red';\n      if (this.cal_step > s) return 'green';\n      if (this.cal_step === s) return 'orange-darken-2';\n      return 'grey-lighten-3';\n    },\n    getStepIcon(s) {\n      if ((this.cal_status === 'success' && this.cal_step >= s) || this.cal_step > s) return 'mdi-check-circle';\n      if (this.cal_status === 'error' && this.cal_step === s) return 'mdi-alert-circle';\n      if (this.cal_step === s) return 'mdi-loading';\n      return 'mdi-numeric-' + s + '-circle-outline';\n    },\n    primaryAction() {\n      if (this.cal_status === 'running') { this.cal_stop('Manual stop'); return; }\n      if (this.cal_status === 'success') { this.cal_reset(); return; }\n      this.cal_run();\n    },\n    cal_reset() {\n      this.cal_status = 'idle';\n      this.cal_step = 0;\n      this.currentSat = 0;\n      this.currentLum = 0;\n      this.gridZones.forEach(z => { z.active = false; z.lum = 0; });\n      this.prevSat = null;\n      this.prevLum = null;\n      this.totalIter = 0;\n    },\n    async cal_run() {\n      this.cal_reset();\n      this.cal_status = 'running';\n      this.cal_step = 1;\n      this.startedAt = performance.now();\n      this.cal_log({ phase: 'INIT', note: 'Sequence start · LED ON' });\n      try {\n        await this.runInit();\n        this.cal_step = 2;\n        await this.runSaturationLoop();\n        if (this.cal_status !== 'running') return;\n        this.cal_step = 3;\n        this.gridZones.forEach(z => { z.active = false; });\n        await this.runLightnessLoop();\n        if (this.cal_status !== 'running') return;\n        this.totalTime = ((performance.now() - this.startedAt) / 1000).toFixed(1);\n        this.cal_status = 'success';\n        // The run converged, so persist what the controller is now running.\n        // Without this the calibration lives only in volatile state and is lost on\n        // reboot or an LED off/on cycle (fairscope/PlanktoScope3#575).\n        if (this.send) {\n            this.send({ topic: \"light\", payload: { action: \"save\" } });\n            this.send({ topic: \"imager/image\", payload: { action: \"save_settings\" } });\n        }\n        this.cal_step = 4;\n        this.cal_log({\n          phase: 'DONE', level: 'ok',\n          note: 'Converged in ' + this.totalTime + 's · ' + this.totalIter + ' iter'\n        });\n      } catch (e) {\n        this.totalTime = ((performance.now() - this.startedAt) / 1000).toFixed(1);\n        this.cal_status = 'error';\n        this.cal_log({ phase: 'ERR', level: 'err', note: String(e) });\n        this.stopHardware();\n      }\n    },\n    cal_stop(reason) {\n      this.cal_status = 'idle';\n      this.cal_step = 0;\n      this.cal_log({ phase: 'STOP', level: 'warn', note: reason });\n      this.stopHardware();\n    },\n    async runInit() {\n      this.led = 0.1;\n      this.gains = { red: 200, blue: 180 };\n      this.sendIO();\n      this.cal_log({\n        phase: 'INIT',\n        note: 'LED=' + this.led + ' · R=' + this.gains.red + ' · B=' + this.gains.blue\n      });\n      await this.wait(this.timing.init);\n    },\n    async runSaturationLoop() {\n      this.cal_log({ phase: 'SAT', note: 'Desaturation start' });\n      const Kp = 1.2;\n      const targetSat = 2.0;\n      const acceptableSat = 4.0;\n      const stuckThreshold = 0.3;\n      const stuckIterLimit = 4;\n      let stuckCount = 0;\n      this.prevSat = null;\n\n      for (let iter = 1; iter <= 25 && this.cal_status === 'running'; iter++) {\n        this.totalIter++;\n        const stats = await this.analyzeFrame(true);\n        this.currentSat = stats.sat;\n        this.lastFrame = stats;\n        const delta = this.prevSat !== null ? (stats.sat - this.prevSat) : null;\n        this.cal_log({\n          phase: 'SAT', iter,\n          val: stats.sat.toFixed(2),\n          delta: delta !== null ? delta.toFixed(2) : undefined,\n          deltaClass: delta !== null ? (delta < 0 ? 'text-success' : 'text-error') : '',\n          note: 'R=' + this.gains.red + ' G=' + Math.round(stats.g) + ' B=' + this.gains.blue\n        });\n\n        if (stats.sat < targetSat) {\n          this.cal_log({ phase: 'SAT', level: 'ok', note: 'Converged at ' + stats.sat.toFixed(2) + '%' });\n          return;\n        }\n\n        if (delta !== null && Math.abs(delta) < stuckThreshold) {\n          stuckCount++;\n          if (stuckCount >= stuckIterLimit) {\n            if (stats.sat < acceptableSat) {\n              this.cal_log({\n                phase: 'SAT', level: 'warn',\n                note: 'Settled at ' + stats.sat.toFixed(2) + '% (best achievable)'\n              });\n              return;\n            }\n            throw new Error('Saturation stuck at ' + stats.sat.toFixed(1) + '% — check lighting/lens');\n          }\n        } else {\n          stuckCount = 0;\n        }\n\n        this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n        this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n        this.sendIO();\n        this.prevSat = stats.sat;\n        await this.wait(this.timing.satSettle);\n      }\n\n      if (this.currentSat < acceptableSat) {\n        this.cal_log({\n          phase: 'SAT', level: 'warn',\n          note: 'Max iter reached, accepting ' + this.currentSat.toFixed(2) + '%'\n        });\n        return;\n      }\n      throw new Error('Saturation did not converge in 25 iterations (final: ' + this.currentSat.toFixed(1) + '%)');\n    },\n    async runLightnessLoop() {\n      this.cal_log({ phase: 'LUM', note: 'Exposure adjustment start' });\n      this.prevLum = null;\n      for (let iter = 1; iter <= 40 && this.cal_status === 'running'; iter++) {\n        this.totalIter++;\n        const stats = await this.analyzeFrame(false);\n        this.currentLum = stats.lum;\n        const delta = this.prevLum !== null ? (stats.lum - this.prevLum) : null;\n        this.cal_log({\n          phase: 'LUM', iter,\n          val: stats.lum.toFixed(1),\n          delta: delta !== null ? delta.toFixed(1) : undefined,\n          deltaClass: delta !== null ? (Math.abs(230 - stats.lum) < Math.abs(230 - (this.prevLum || 0)) ? 'text-success' : 'text-error') : '',\n          note: 'LED=' + this.led.toFixed(4) + ' · ' + stats.validZones + ' zones'\n        });\n        if (Math.abs(stats.lum - 230) <= 5) {\n          this.cal_log({ phase: 'LUM', level: 'ok', note: 'Converged at ' + stats.lum.toFixed(1) });\n          return;\n        }\n        let nextLed = this.led;\n        if (stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n        else if (stats.lum > 252) nextLed = this.led * 0.5;\n        else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n        this.led = Math.max(0, Math.min(1, nextLed));\n        this.sendIO();\n        this.prevLum = stats.lum;\n        await this.wait(this.timing.lumSettle);\n      }\n      throw new Error('Exposure did not converge in 40 iterations');\n    },\n    async analyzeFrame(isSaturationStep) {\n      const iframe = this.$refs.videoIframe;\n      if (!iframe || !iframe.contentDocument) return { sat: 99, lum: 0, r: 0, g: 0, b: 0, validZones: 0 };\n      const video = iframe.contentDocument.querySelector('video');\n      if (!video || video.videoWidth === 0) return { sat: 99, lum: 0, r: 0, g: 0, b: 0, validZones: 0 };\n      const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n      ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n      if (isSaturationStep) {\n        const size = 100;\n        const x = Math.floor((this.analysisW - size) / 2);\n        const y = Math.floor((this.analysisH - size) / 2);\n        const data = ctx.getImageData(x, y, size, size).data;\n        let r = 0, g = 0, b = 0;\n        const pixels = size * size;\n        for (let i = 0; i < data.length; i += 4) {\n          r += data[i]; g += data[i + 1]; b += data[i + 2];\n        }\n        const avgR = r / pixels, avgG = g / pixels, avgB = b / pixels;\n        const max = Math.max(avgR, avgG, avgB), min = Math.min(avgR, avgG, avgB);\n        const sat = max === 0 ? 0 : ((max - min) / max) * 100;\n        return { sat: parseFloat(sat.toFixed(2)), r: avgR, g: avgG, b: avgB, lum: 0, validZones: 0 };\n      }\n\n      const fullData = ctx.getImageData(0, 0, this.analysisW, this.analysisH).data;\n      const cellW = this.analysisW / this.gridN;\n      const cellH = this.analysisH / this.gridN;\n      const sample = 15;\n      let totalLum = 0, validCount = 0;\n      for (let i = 0; i < this.gridN; i++) {\n        for (let j = 0; j < this.gridN; j++) {\n          const x0 = Math.floor(j * cellW + (cellW - sample) / 2);\n          const y0 = Math.floor(i * cellH + (cellH - sample) / 2);\n          let sum = 0, minP = 255;\n          for (let py = 0; py < sample; py++) {\n            const rowStart = ((y0 + py) * this.analysisW + x0) * 4;\n            for (let px = 0; px < sample; px++) {\n              const idx = rowStart + px * 4;\n              const l = (fullData[idx] + fullData[idx + 1] + fullData[idx + 2]) / 3;\n              if (l < minP) minP = l;\n              sum += l;\n            }\n          }\n          const avg = sum / (sample * sample);\n          const isValid = (avg - minP) <= this.sensitivityThreshold && avg > 2;\n          this.gridZones[i * this.gridN + j] = { id: i * this.gridN + j, active: isValid, lum: avg };\n          if (isValid) { totalLum += avg; validCount++; }\n        }\n      }\n      return {\n        lum: validCount > 0 ? totalLum / validCount : 0,\n        validZones: validCount,\n        r: 0, g: 0, b: 0, sat: 0\n      };\n    },\n    sendIO() {\n      if (this.send) {\n        this.send({\n          topic: 'light',\n          payload: {\n            action: 'on',\n            value: Number(this.led.toFixed(12)),\n            acq_led_intensity: Number(this.led.toFixed(6)),\n            led_status: 'on'\n          }\n        });\n        this.send({\n          topic: 'imager/image',\n          payload: { action: 'settings', settings: { white_balance_gain: this.gains } }\n        });\n      }\n    },\n    stopHardware() {\n      if (this.send) {\n        this.send({ topic: 'light', payload: { action: 'off', value: 0, led_status: 'off' } });\n      }\n    },\n    onIframeLoad() {\n      try {\n        const doc = this.$refs.videoIframe.contentDocument;\n        const s = doc.createElement('style');\n        s.textContent = 'body{margin:0;overflow:hidden;background:black;} img,video{width:100%;height:100%;object-fit:fill;display:block;}';\n        doc.head.appendChild(s);\n      } catch (e) {}\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n    cal_log(entry) {}\n  },\n};\n</script>\n\n<style scoped>\n  /* ============================================================ */\n  /* ACQUISITION STYLES                                             */\n  /* ============================================================ */\n  .cursor-pointer { cursor: pointer; }\n  .v-card-text { padding: 0 !important; }\n  .v-card { border: none; }\n  .v-container { background: #eef3ff; }\n  .v-expansion-panel-text { padding-left: 0 !important; padding-right: 0 !important; }\n  :deep(.v-field__prefix) { align-self: center; padding-top: 0 !important; margin-top: 0 !important; }\n  :deep(.v-field__field) { align-items: center; }\n  .nrdb-app .v-field--variant-outlined {\n    --v-field-input-padding-top: 12px;\n    --v-field-input-padding-bottom: 12px;\n  }\n  .border { border: 1px solid #cccccc !important; }\n\n  /* ============================================================ */\n  /* CALIBRATION MODAL STYLES                                       */\n  /* ============================================================ */\n  .control-panel { }\n  .calibration-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }\n  .calibration-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; pointer-events: none; }\n\n  .ratio-box { width: 100%; max-width: 720px; aspect-ratio: 4 / 3; position: relative; }\n\n  .focus-overlay {\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n    width: 100px; height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.9);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);\n    z-index: 10; pointer-events: none;\n  }\n  .crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n  .focus-label {\n    position: absolute; top: -28px; width: 220px; text-align: center;\n    color: orange; font-size: 11px; font-weight: bold; letter-spacing: 1.5px;\n  }\n\n  .smart-grid {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    display: grid;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 10; pointer-events: none;\n  }\n  .grid-cell { border: 1px solid rgba(255,255,255,0.12); transition: background 0.15s; }\n  .cell-active { background-color: rgba(0, 255, 0, 0.18); border-color: rgba(0,255,0,0.5); }\n  .cell-rejected { background-color: rgba(255, 0, 0, 0.12); }\n\n  .phase-badge {\n    position: absolute; top: 12px; left: 12px;\n    background: rgba(0,0,0,0.75); color: #fff;\n    padding: 6px 12px; border-radius: 4px;\n    font-size: 11px; font-weight: bold; letter-spacing: 1px;\n    z-index: 20; display: flex; align-items: center;\n  }\n\n  .step-card { transition: all 0.2s; }\n\n  .gauge { width: 100%; padding: 4px 0; }\n  .gauge-track {\n    position: relative; width: 100%; height: 12px;\n    background: #eee; border-radius: 6px; overflow: visible;\n  }\n  .gauge-zone { position: absolute; top: 0; height: 100%; opacity: 0.85; }\n  .gauge-target-tick {\n    position: absolute; top: -3px; height: 18px; width: 2px;\n    background: #000; transform: translateX(-50%);\n    z-index: 2;\n  }\n  .gauge-marker {\n    position: absolute; top: 50%; width: 14px; height: 14px;\n    background: #fff; border: 2px solid #333; border-radius: 50%;\n    transform: translate(-50%, -50%);\n    transition: left 0.3s ease, border-color 0.2s, background 0.2s;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.3);\n    z-index: 3;\n  }\n  .gauge-marker-ok { background: #4caf50; border-color: #2e7d32; }\n\n  .result-card { border-left: 4px solid; }\n  .border-success { border-left-color: #4caf50 !important; }\n  .border-error { border-left-color: #f44336 !important; }\n  .result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }\n  .result-grid > div { display: flex; flex-direction: column; }\n  .result-label {\n    font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;\n    color: #666; font-weight: bold;\n  }\n  .result-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: bold; }\n\n  .text-success { color: #2e7d32; font-weight: bold; }\n  .text-error { color: #c62828; font-weight: bold; }\n  .text-warning { color: #ef6c00; font-weight: bold; }\n\n  .font-mono { font-family: 'Roboto Mono', monospace; }\n  .mdi-spin { animation: spin 1s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n</style>",
+        "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 Settings</div>\n        </div>\n\n        <v-alert v-if=\"sample_project || sample_id\" type=\"info\" color=\"teal-darken-1\" variant=\"tonal\" density=\"compact\" class=\"mb-4\">\n          <div class=\"d-flex flex-wrap ga-4 text-body-2\">\n            <span v-if=\"sample_project\"><strong>Project:</strong> {{ sample_project }}</span>\n            <span v-if=\"sample_id\"><strong>Sample:</strong> {{ sample_id }}</span>\n            <span v-if=\"sample_operator\"><strong>Operator:</strong> {{ sample_operator }}</span>\n            <span v-if=\"sample_gear\"><strong>Gear:</strong> {{ sample_gear }}</span>\n          </div>\n        </v-alert>\n\n        <v-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pr-sm-2\">\n            <v-text-field v-model=\"acq_id\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" density=\"compact\"\n              :disabled=\"acq_status === 'on'\">\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\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pl-sm-2\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\"\n              label=\"Number of Images\" suffix=\"img\" density=\"compact\"\n              @update:model-value=\"autoCalculateVolumes(true)\"\n              :disabled=\"acq_status === 'on'\">\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-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-btn-toggle v-model=\"tempMag\" mandatory divided variant=\"outlined\" color=\"primary\"\n              class=\"w-100 font-weight-bold d-flex flex-wrap\" style=\"height: 80px !important\"\n              @update:model-value=\"confirmMagChange\" :disabled=\"acq_status === 'on'\">\n              <v-btn value=\"high\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-small</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">High Mag (100µm)</span>\n              </v-btn>\n              <v-btn value=\"medium\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-medium</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Medium Mag (300µm)</span>\n              </v-btn>\n              <v-btn value=\"low\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Low Mag (500µm)</span>\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels variant=\"accordion\" class=\"border rounded pa-0 mt-4\">\n          <v-expansion-panel elevation=\"0\">\n            <v-expansion-panel-title class=\"pa-4 bg-primary text-subtitle-1 font-weight-bold\">\n              Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-0 bg-grey-lighten-5\">\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowcell Thickness :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_flowcell_thickness\" suffix=\"µm\" variant=\"flat\" readonly\n                    bg-color=\"bg-grey-lighten-5\" hide-details>\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowcell Thickness', 'Thickness of the flowcell used in this configuration (µm).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowrate between images :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_interframe_flowrate\" :min=\"1\" :step=\"1\" suffix=\"mL/min\" variant=\"outlined\"\n                    type=\"number\" bg-color=\"white\" hide-details\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowrate between images','Speed of the flow Pumped 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-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Stabilization Delay :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model.number=\"acq_stabilization_delay\" :min=\"0\" :step=\"0.1\" suffix=\"s\"\n                    variant=\"outlined\" type=\"number\" bg-color=\"white\" hide-details @input=\"sendUpdate()\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Stabilization Delay','Time to wait for flow stabilization before taking an image.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex flex-column justify-center\">\n                  <div class=\"d-flex align-center mb-1\">\n                    <span class=\"text-subtitle-1 text-medium-emphasis\">Volume between images :</span>\n                  </div>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"Number((acq_interframe_volume * 1000).toFixed(2))\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(true); }\"\n                    type=\"number\" :min=\"0.1\" :step=\"0.1\" variant=\"outlined\" hide-details suffix=\"µL\" bg-color=\"white\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume Pumped 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-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Total Volume Pumped :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumePumpedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n\n        <v-row class=\"align-center pa-0 mt-4\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-textarea v-model=\"acq_comment\" label=\"Acquisition comment\" variant=\"outlined\" rows=\"3\" auto-grow\n              hide-details placeholder=\"Optional notes...\" bg-color=\"white\" @input=\"sendUpdate()\"\n              :disabled=\"acq_status === 'on'\">\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-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\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              style=\"height: 60px !important\">\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        <v-row v-if=\"acq_status === 'on'\" class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-btn block :color=\"acq_paused ? 'green' : 'orange'\" variant=\"outlined\"\n              class=\"mt-2\" style=\"height: 48px\" @click=\"handlePauseToggle\">\n              {{ acq_paused ? 'Resume Acquisition' : 'Pause Acquisition' }}\n            </v-btn>\n          </v-col>\n        </v-row>\n\n        <v-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1 mt-4\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-6 rounded-lg\">\n        <v-card-title class=\"text-h6 px-0\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2 px-0 pt-2\"></v-card-text>\n        <v-card-actions class=\"px-0 pb-0\">\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"text\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n    <v-dialog v-model=\"magConfirmDialog\" max-width=\"500\" persistent>\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"d-flex align-center text-h5 font-weight-bold\">\n          <v-icon color=\"primary\" size=\"large\" class=\"mr-3\">mdi-cog-sync</v-icon>\n          Hardware Setup\n        </v-card-title>\n        <v-card-text class=\"pa-4\">\n          <p class=\"text-body-1 mb-6\">\n            Switching to <v-chip color=\"primary\" size=\"small\" label class=\"font-weight-bold\">{{ tempMag?.toUpperCase() }}</v-chip>.\n          </p>\n          <div class=\"bg-grey-lighten-4 rounded-lg pa-4 mb-4\">\n            <p class=\"text-subtitle-2 mb-3 font-weight-bold text-primary\">System configuration:</p>\n            <ul class=\"ml-6 text-body-2\">\n              <li class=\"mb-1\"><strong>Lens:</strong> {{ getPreviewSettings(tempMag).tube }} / {{ getPreviewSettings(tempMag).obj }}</li>\n              <li class=\"mb-1\"><strong>Pixel:</strong> {{ getPreviewSettings(tempMag).pixel }} µm</li>\n              <li class=\"mb-1\"><strong>Flowcell:</strong> {{ getPreviewSettings(tempMag).thickness }} µm</li>\n              <li class=\"mb-1\"><strong>Flowrate:</strong> {{ getPreviewSettings(tempMag).flowrate }} mL/min</li>\n            </ul>\n          </div>\n          <p class=\"text-caption text-medium-emphasis\">Parameters will be updated automatically.</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-btn variant=\"text\" @click=\"cancelMagChange\">Cancel</v-btn>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"flat\" @click=\"applyMagChange\">Confirm & Update</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n    <v-dialog\n      v-model=\"cal_dialog\"\n      :persistent=\"cal_status === 'running'\"\n      width=\"1100\"\n      max-width=\"95vw\"\n      scrollable\n      @update:model-value=\"on_cal_dialog_change\"\n    >\n      <v-card class=\"bg-grey-lighten-4\">\n        <v-toolbar density=\"compact\" color=\"white\" elevation=\"1\">\n          <v-toolbar-title class=\"text-subtitle-1 font-weight-bold\">\n            <v-icon class=\"mr-2\">mdi-tune</v-icon>Calibration\n          </v-toolbar-title>\n          <v-spacer></v-spacer>\n          <v-btn icon=\"mdi-close\" variant=\"text\" density=\"comfortable\"\n                 @click.stop=\"request_close_dialog\"\n                 :disabled=\"cal_status === 'running'\" />\n        </v-toolbar>\n\n        <v-row no-gutters>\n\n          <v-col cols=\"12\" md=\"8\" class=\"d-flex align-center justify-center pa-4\">\n            <div class=\"ratio-box\">\n              <v-card class=\"calibration-container\" elevation=\"3\">\n                <iframe\n                  v-if=\"cal_dialog\"\n                  src=\"/preview/node-red\"\n                  class=\"calibration-iframe\"\n                  @load=\"onIframeLoad\"\n                  ref=\"videoIframe\"\n                ></iframe>\n\n                <div v-if=\"cal_step === 2\" class=\"focus-overlay\">\n                  <div class=\"crosshair\"></div>\n                  <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n                </div>\n\n                <div v-show=\"cal_step === 3\" class=\"smart-grid\">\n                  <div\n                    v-for=\"(zone, i) in gridZones\"\n                    :key=\"i\"\n                    class=\"grid-cell\"\n                    :class=\"{\n                      'cell-active': zone.active,\n                      'cell-rejected': !zone.active && cal_status === 'running'\n                    }\"\n                  ></div>\n                </div>\n\n                <div v-if=\"cal_status === 'running'\" class=\"phase-badge\">\n                  <v-icon size=\"small\" class=\"mr-1\">mdi-camera-iris</v-icon>\n                  {{ phaseLabel }}\n                </div>\n\n                <canvas ref=\"captureCanvas\" :width=\"analysisW\" :height=\"analysisH\" style=\"display:none;\"></canvas>\n              </v-card>\n            </div>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\" class=\"bg-white d-flex flex-column pa-4 control-panel\">\n\n            <div class=\"mb-4\">\n              <v-btn\n                block size=\"default\"\n                :color=\"calBtnColor\"\n                @click=\"primaryAction\"\n                class=\"font-weight-bold\"\n                :prepend-icon=\"calBtnIcon\"\n                style=\"height:40px;\"\n              >\n                {{ calBtnText }}\n              </v-btn>\n            </div>\n\n            <div class=\"d-flex flex-column\" style=\"gap: 8px;\">\n\n              <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                <div class=\"d-flex align-center\">\n                  <v-icon :icon=\"getStepIcon(1)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': cal_step === 1 }\"></v-icon>\n                  <span class=\"text-subtitle-2 font-weight-bold\">1 · Initialization</span>\n                </div>\n              </v-card>\n\n              <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                <div class=\"d-flex align-center mb-1\">\n                  <v-icon :icon=\"getStepIcon(2)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': cal_step === 2 }\"></v-icon>\n                  <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between align-center\">\n                      <span class=\"text-subtitle-2 font-weight-bold\">2 · Desaturation</span>\n                      <span v-if=\"cal_step >= 2\" class=\"font-mono font-weight-black text-body-2\">\n                        {{ currentSat.toFixed(1) }}%\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                <div v-if=\"cal_step >= 2\" class=\"gauge mt-1\">\n                  <div class=\"gauge-track\">\n                    <div class=\"gauge-zone\" style=\"left: 0%; width: 10%; background: #4caf50; border-radius: 6px 0 0 6px;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 10%; width: 10%; background: #ff9800;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 20%; width: 80%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                    <div class=\"gauge-target-tick\" style=\"left: 0%;\"></div>\n                    <div class=\"gauge-marker\"\n                         :class=\"{ 'gauge-marker-ok': currentSat <= 2 }\"\n                         :style=\"{ left: satMarkerPct + '%' }\"></div>\n                  </div>\n                </div>\n\n                <div v-if=\"cal_step >= 2\" class=\"d-flex justify-space-between mt-1 font-mono text-caption\">\n                  <span>Pixel R: <strong>{{ Math.round(lastFrame.r) }}</strong></span>\n                  <span>G: <strong>{{ Math.round(lastFrame.g) }}</strong></span>\n                  <span>B: <strong>{{ Math.round(lastFrame.b) }}</strong></span>\n                </div>\n              </v-card>\n\n              <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-2 step-card\">\n                <div class=\"d-flex align-center mb-1\">\n                  <v-icon :icon=\"getStepIcon(3)\" size=\"small\" class=\"mr-2\" :class=\"{ 'mdi-spin': cal_step === 3 }\"></v-icon>\n                  <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between align-center\">\n                      <span class=\"text-subtitle-2 font-weight-bold\">3 · Exposure</span>\n                      <span v-if=\"cal_step >= 3\" class=\"font-mono font-weight-black text-body-2\">\n                        {{ currentLum.toFixed(0) }} / 230\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                <div v-if=\"cal_step >= 3\" class=\"gauge mt-1\">\n                  <div class=\"gauge-track\">\n                    <div class=\"gauge-zone\" style=\"left: 0%; width: 84.3%; background: #f44336; border-radius: 6px 0 0 6px;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 84.3%; width: 3.9%; background: #ff9800;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 88.2%; width: 3.9%; background: #4caf50;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 92.1%; width: 3.9%; background: #ff9800;\"></div>\n                    <div class=\"gauge-zone\" style=\"left: 96%; width: 4%; background: #f44336; border-radius: 0 6px 6px 0;\"></div>\n                    <div class=\"gauge-target-tick\" style=\"left: 90.2%;\"></div>\n                    <div class=\"gauge-marker\"\n                         :class=\"{ 'gauge-marker-ok': Math.abs(currentLum - 230) <= 5 }\"\n                         :style=\"{ left: lumMarkerPct + '%' }\"></div>\n                  </div>\n                </div>\n              </v-card>\n            </div>\n\n            <v-card v-if=\"cal_status === 'success' || cal_status === 'error'\"\n                    :color=\"cal_status === 'success' ? 'green-lighten-5' : 'red-lighten-5'\"\n                    variant=\"flat\"\n                    class=\"pa-3 mt-3 result-card\"\n                    :class=\"cal_status === 'success' ? 'border-success' : 'border-error'\">\n              <div class=\"d-flex align-center mb-2\">\n                <v-icon :color=\"cal_status === 'success' ? 'success' : 'error'\" class=\"mr-2\">\n                  {{ cal_status === 'success' ? 'mdi-check-circle' : 'mdi-alert-circle' }}\n                </v-icon>\n                <span class=\"text-subtitle-2 font-weight-bold\">{{ resultStatusLabel }}</span>\n                <v-spacer></v-spacer>\n                <span class=\"text-caption font-mono\">{{ totalTime }}s</span>\n              </div>\n              <div class=\"result-grid\">\n                <div><span class=\"result-label\">LED</span><span class=\"result-val\">{{ led.toFixed(4) }}</span></div>\n                <div><span class=\"result-label\">Gain R</span><span class=\"result-val\">{{ gains.red }}</span></div>\n                <div><span class=\"result-label\">Gain B</span><span class=\"result-val\">{{ gains.blue }}</span></div>\n                <div><span class=\"result-label\">Sat</span><span class=\"result-val\">{{ currentSat.toFixed(2) }}%</span></div>\n                <div><span class=\"result-label\">Lum</span><span class=\"result-val\">{{ currentLum.toFixed(1) }}</span></div>\n                <div><span class=\"result-label\">Δ</span>\n                  <span class=\"result-val\" :class=\"Math.abs(currentLum - 230) <= 5 ? 'text-success' : 'text-warning'\">\n                    {{ (currentLum - 230).toFixed(1) }}\n                  </span>\n                </div>\n                <div><span class=\"result-label\">Zones</span><span class=\"result-val\">{{ activeZonesCount }}/400</span></div>\n                <div><span class=\"result-label\">Iter</span><span class=\"result-val\">{{ totalIter }}</span></div>\n              </div>\n            </v-card>\n\n          </v-col>\n        </v-row>\n      </v-card>\n    </v-dialog>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      // ============ ACQUISITION DATA ============\n      acq_id: \"\",\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: \"\",\n      acq_nb_frame: 10,\n      acq_interframe_volume: 0.010,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      acq_status: \"off\",\n      acq_paused: false,\n      acq_status_message: \"\",\n\n      currentMag: \"medium\",\n      tempMag: \"medium\",\n      magConfirmDialog: false,\n\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n      calibration_pixel_size: 0.75,\n      acq_flowcell_thickness: 300,\n      acq_tube_lens_reference: \"25mm_F1.8\",\n      acq_objective_lens_reference: \"12mm_F1.8\",\n      acq_interframe_flowrate: 2,\n      acq_stabilization_delay: 0.5,\n\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n\n      // ============ CALIBRATION DATA ============\n      cal_dialog: false,\n      cal_status: 'idle',\n      cal_step: 0,\n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1,\n      gains: { red: 200, blue: 180 },\n      lastFrame: { r: 0, g: 0, b: 0 },\n      gridN: 20,\n      analysisW: 1200,\n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false })),\n      timing: { init: 1000, satSettle: 1000, lumSettle: 350 },\n      startedAt: 0,\n      totalTime: 0,\n      totalIter: 0,\n      prevSat: null,\n      prevLum: null\n    };\n  },\n\n  computed: {\n    // ============ ACQUISITION COMPUTED ============\n    magLabel() { return ({ high: 'high', medium: 'med', low: 'low' })[this.currentMag] || ''; },\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      if (s === \"Paused\") return \"Acquisition paused. You may adjust settings.\";\n      if (s === \"Resumed\") return \"Acquisition resumed.\";\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\", \"Resumed\"].includes(s)) return \"green\";\n      if (s === \"Paused\") return \"orange\";\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    // ============ CALIBRATION COMPUTED ============\n    calBtnText() {\n      if (this.cal_status === 'running') return 'STOP';\n      if (this.cal_status === 'success') return 'DONE';\n      if (this.cal_status === 'error') return 'RETRY';\n      return 'START CALIBRATION';\n    },\n    calBtnIcon() {\n      if (this.cal_status === 'running') return 'mdi-stop';\n      if (this.cal_status === 'success') return 'mdi-check';\n      if (this.cal_status === 'error') return 'mdi-refresh';\n      return 'mdi-play';\n    },\n    calBtnColor() {\n      if (this.cal_status === 'running') return 'error';\n      if (this.cal_status === 'success') return 'success';\n      if (this.cal_status === 'error') return 'warning';\n      return 'primary';\n    },\n    activeZonesCount() {\n      return this.gridZones.filter(z => z.active).length;\n    },\n    phaseLabel() {\n      if (this.cal_step === 1) return 'INITIALIZING';\n      if (this.cal_step === 2) return 'DESATURATING';\n      if (this.cal_step === 3) return 'EXPOSURE';\n      return '';\n    },\n    resultStatusLabel() {\n      if (this.cal_status === 'error') return 'Calibration failed';\n      const d = Math.abs(this.currentLum - 230);\n      if (d <= 5) return 'Calibration complete';\n      if (d <= 15) return 'Review needed';\n      return 'Out of tolerance';\n    },\n    satMarkerPct() { return Math.max(0, Math.min(100, (this.currentSat / 20) * 100)); },\n    lumMarkerPct() { return Math.max(0, Math.min(100, (this.currentLum / 255) * 100)); }\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = p.acq_id;\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) this.sample_id = p.sample_id;\n        if (p.sample_operator !== undefined) this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        \n        if (\"acq_comment\" in p) this.acq_comment = p.acq_comment ?? \"\";\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.acq_tube_lens_reference !== undefined) this.acq_tube_lens_reference = p.acq_tube_lens_reference;\n        if (p.acq_objective_lens_reference !== undefined) this.acq_objective_lens_reference = p.acq_objective_lens_reference;\n        if (p.acq_interframe_flowrate !== undefined) this.acq_interframe_flowrate = Number(p.acq_interframe_flowrate);\n        if (p.acq_stabilization_delay !== undefined) this.acq_stabilization_delay = Number(p.acq_stabilization_delay);\n\n        // Pixel-size lockdown: preset slug is the only valid input.\n        // Ignore stray process_pixel_size / calibration_pixel_size payloads;\n        // any value outside {0.53, 0.75, 1.34} would have silently defaulted\n        // to \"medium\" under the old reverse-mapping logic.\n        if (p.acq_magnification && [\"high\",\"medium\",\"low\"].includes(p.acq_magnification)) {\n          this.currentMag = p.acq_magnification;\n          this.tempMag = p.acq_magnification;\n          const cfg = this.getPreviewSettings(p.acq_magnification);\n          this.calibration_pixel_size       = cfg.pixel;\n          this.acq_tube_lens_reference      = cfg.tube;\n          this.acq_objective_lens_reference = cfg.obj;\n        }\n\n        if (p.acq_status !== undefined) {\n          const statusStr = String(p.acq_status).toLowerCase();\n          if (statusStr === 'on' || statusStr === 'true' || statusStr === '1') {\n            this.acq_status = 'on';\n          } else {\n            this.acq_status = 'off';\n          }\n        }\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          \n          if (p.acq_status === undefined) {\n            const s = String(p.status).toLowerCase();\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\")) this.acq_status = \"on\";\n            if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\")) { this.acq_status = \"off\"; this.acq_paused = false; }\n            if (s.includes(\"paused\")) this.acq_paused = true;\n            if (s.includes(\"resumed\")) this.acq_paused = false;\n          }\n        }\n\n        if (topic === \"status/imager\" && (p.status === \"Done\" || p.status?.includes(\"error\"))) {\n          this.incrementAcqId();\n          this.sendUpdate();\n        }\n\n        this.autoCalculateVolumes(false);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.autoCalculateVolumes(false);\n  },\n\n  methods: {\n    // ============ ACQUISITION METHODS ============\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    confirmMagChange() {\n      this.magConfirmDialog = true;\n    },\n\n    cancelMagChange() {\n      this.magConfirmDialog = false;\n      this.tempMag = this.currentMag;\n    },\n\n    getPreviewSettings(mag) {\n      const settings = {\n        high:   { tube: \"35mm_F2.4\", obj: \"12mm_F2\",     pixel: 0.53, thickness: 100, flowrate: 1 },\n        medium: { tube: \"25mm_F1.8\", obj: \"12mm_F1.8\",   pixel: 0.75, thickness: 300, flowrate: 2 },\n        low:    { tube: \"25mm_F2.0\", obj: \"21.8mm_F2.8\", pixel: 1.34, thickness: 500, flowrate: 3 }\n      };\n      return settings[mag] || settings.medium;\n    },\n\n    applyMagChange() {\n      this.currentMag = this.tempMag;\n\n      const settings = {\n        high:   { tube_lens: \"35mm_F2.4\", obj_lens: \"12mm_F2\",     pixel_size: 0.53, thickness: 100, inter_vol_ul: 3,  flowrate: 1, stabilization: 1.5 },\n        medium: { tube_lens: \"25mm_F1.8\", obj_lens: \"12mm_F1.8\",   pixel_size: 0.75, thickness: 300, inter_vol_ul: 6,  flowrate: 3, stabilization: 0.5 },\n        low:    { tube_lens: \"25mm_F2.0\", obj_lens: \"21.8mm_F2.8\", pixel_size: 1.34, thickness: 500, inter_vol_ul: 15, flowrate: 3, stabilization: 0.5 }\n      };\n\n      const config = settings[this.currentMag];\n      if (config) {\n        this.acq_tube_lens_reference      = config.tube_lens;\n        this.acq_objective_lens_reference = config.obj_lens;\n        this.calibration_pixel_size       = config.pixel_size;\n        this.acq_flowcell_thickness       = config.thickness;\n        this.acq_interframe_flowrate      = config.flowrate;\n        this.acq_interframe_volume        = config.inter_vol_ul / 1000;\n        this.acq_stabilization_delay      = config.stabilization;\n      }\n\n      this.magConfirmDialog = false;\n      this.autoCalculateVolumes(true);\n      this.sendUpdate({ magnification_change: this.currentMag });\n\n      // After updating, immediately open the calibration modal\n      this.cal_dialog = true;\n    },\n\n    incrementAcqId() {\n      const current = String(this.acq_id || \"0\");\n      const num = parseInt(current, 10);\n      const padLen = current.length > 0 ? current.length : 1;\n      this.acq_id = String((isNaN(num) ? 0 : num) + 1).padStart(padLen, \"0\");\n    },\n\n    autoCalculateVolumes(emit = true) {\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        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        this.frame_volume_um3  = w_um * h_um * this.acq_flowcell_thickness;\n        this.acq_imaged_volume = (this.frame_volume_um3 / 1e12) * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3  = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      this.acq_pumped_volume = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      if (emit) this.sendUpdate();\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"off\") {\n        this.incrementAcqId();\n        this.sendUpdate();\n        this.acq_status_message = \"Acquisition stopped. ID incremented.\";\n      } else {\n        this.sendUpdate({\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_stabilization_delay: this.acq_stabilization_delay,\n          acq_interframe_flowrate: this.acq_interframe_flowrate\n        });\n      }\n    },\n\n    handlePauseToggle() {\n      this.acq_paused = !this.acq_paused;\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: \"pause_control\",\n        payload: { action: this.acq_paused ? \"pause\" : \"resume\" }\n      });\n      this.acq_status_message = this.acq_paused ? \"Paused\" : \"Resumed\";\n    },\n\n    showVolumeImagedHint() {\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\"><strong>Volume Imaged</strong> is the fluid volume captured by the optics.</p>\n        <v-divider class=\"my-3\"></v-divider>\n        <ul class=\"ml-4\">\n          <li><strong>Width:</strong> ${Math.round(this.sensor_width_um)} µm</li>\n          <li><strong>Height:</strong> ${Math.round(this.sensor_height_um)} µm</li>\n          <li><strong>Thickness:</strong> ${this.acq_flowcell_thickness} µm</li>\n          <li><strong>Pixel Size:</strong> ${this.calibration_pixel_size} µm</li>\n        </ul>\n        <p class=\"mt-4\">Total = ${this.acq_nb_frame} imgs × ${this.fmt(this.frame_volume_ml)} mL = <strong>${this.fmt(this.acq_imaged_volume)} mL</strong></p>\n      </div>`;\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumePumpedHint() {\n      const html = `<p><b>Total Volume Pumped</b> corresponds to the volume Pumped between images.</p>\n        <ul>\n          <li><b>Inter-frame Volume:</b> ${this.fmt(this.acq_interframe_volume)} mL</li>\n          <li><b>Number of Images:</b> ${this.acq_nb_frame}</li>\n        </ul>\n        <p><b>Calculation:</b> ${this.fmt(this.acq_interframe_volume)} mL × ${this.acq_nb_frame} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Pumped\", 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      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id:                         this.acq_id,\n          acq_nb_frame:                   this.acq_nb_frame,\n          acq_interframe_volume:          this.acq_interframe_volume,\n          acq_imaged_volume:              Number(Number(this.acq_imaged_volume).toFixed(3)),\n          acq_pumped_volume:              Number(Number(this.acq_pumped_volume).toFixed(3)),\n          acq_comment:                    this.acq_comment,\n          acq_status:                     this.acq_status,\n          acq_magnification:              this.currentMag,\n          acq_tube_lens_reference:        this.acq_tube_lens_reference,\n          acq_objective_lens_reference:   this.acq_objective_lens_reference,\n          process_pixel:                  this.calibration_pixel_size,\n          process_pixel_size:             this.calibration_pixel_size,\n          calibration_pixel_size:         this.calibration_pixel_size,\n          sensor_width_um:                this.sensor_width_um,\n          sensor_height_um:               this.sensor_height_um,\n          acq_flowcell_thickness:         this.acq_flowcell_thickness,\n          acq_interframe_flowrate:        this.acq_interframe_flowrate,\n          acq_stabilization_delay:        this.acq_stabilization_delay,\n          ...extra,\n        },\n      });\n    },\n\n    // ============ CALIBRATION METHODS ============\n    on_cal_dialog_change(open) {\n      if (!open) {\n        if (this.cal_status === 'running') {\n          this.cal_dialog = true; // Prevent closing while running\n        } else {\n          this.cal_reset(); // Reset visual state when fully closed\n        }\n      }\n    },\n    request_close_dialog() {\n      if (this.cal_status === 'running') return;\n      // Reset FIRST so the v-model watcher sees cal_status === 'idle'\n      // when cal_dialog flips to false and cannot trigger a re-open.\n      this.cal_reset();\n      this.cal_dialog = false;\n    },\n    getStepColor(s) {\n      if (this.cal_status === 'success' && this.cal_step >= s) return 'green';\n      if (this.cal_status === 'error' && this.cal_step === s) return 'red';\n      if (this.cal_step > s) return 'green';\n      if (this.cal_step === s) return 'orange-darken-2';\n      return 'grey-lighten-3';\n    },\n    getStepIcon(s) {\n      if ((this.cal_status === 'success' && this.cal_step >= s) || this.cal_step > s) return 'mdi-check-circle';\n      if (this.cal_status === 'error' && this.cal_step === s) return 'mdi-alert-circle';\n      if (this.cal_step === s) return 'mdi-loading';\n      return 'mdi-numeric-' + s + '-circle-outline';\n    },\n    primaryAction() {\n      if (this.cal_status === 'running') { this.cal_stop('Manual stop'); return; }\n      if (this.cal_status === 'success') { this.cal_reset(); return; }\n      this.cal_run();\n    },\n    cal_reset() {\n      this.cal_status = 'idle';\n      this.cal_step = 0;\n      this.currentSat = 0;\n      this.currentLum = 0;\n      this.gridZones.forEach(z => { z.active = false; z.lum = 0; });\n      this.prevSat = null;\n      this.prevLum = null;\n      this.totalIter = 0;\n    },\n    async cal_run() {\n      this.cal_reset();\n      this.cal_status = 'running';\n      this.cal_step = 1;\n      this.startedAt = performance.now();\n      this.cal_log({ phase: 'INIT', note: 'Sequence start · LED ON' });\n      try {\n        await this.runInit();\n        this.cal_step = 2;\n        await this.runSaturationLoop();\n        if (this.cal_status !== 'running') return;\n        this.cal_step = 3;\n        this.gridZones.forEach(z => { z.active = false; });\n        await this.runLightnessLoop();\n        if (this.cal_status !== 'running') return;\n        this.totalTime = ((performance.now() - this.startedAt) / 1000).toFixed(1);\n        this.cal_status = 'success';\n        // The run converged, so persist what the controller is now running.\n        // Without this the calibration lives only in volatile state and is lost on\n        // reboot or an LED off/on cycle (fairscope/PlanktoScope3#575).\n        if (this.send) {\n            this.send({ topic: \"calibration/save\", payload: { led_intensity: Number(this.led.toFixed(6)), white_balance: { red: this.gains.red / 100, blue: this.gains.blue / 100 } } });\n        }\n        this.cal_step = 4;\n        this.cal_log({\n          phase: 'DONE', level: 'ok',\n          note: 'Converged in ' + this.totalTime + 's · ' + this.totalIter + ' iter'\n        });\n      } catch (e) {\n        this.totalTime = ((performance.now() - this.startedAt) / 1000).toFixed(1);\n        this.cal_status = 'error';\n        this.cal_log({ phase: 'ERR', level: 'err', note: String(e) });\n        this.stopHardware();\n      }\n    },\n    cal_stop(reason) {\n      this.cal_status = 'idle';\n      this.cal_step = 0;\n      this.cal_log({ phase: 'STOP', level: 'warn', note: reason });\n      this.stopHardware();\n    },\n    async runInit() {\n      this.led = 0.1;\n      this.gains = { red: 200, blue: 180 };\n      this.sendIO();\n      this.cal_log({\n        phase: 'INIT',\n        note: 'LED=' + this.led + ' · R=' + this.gains.red + ' · B=' + this.gains.blue\n      });\n      await this.wait(this.timing.init);\n    },\n    async runSaturationLoop() {\n      this.cal_log({ phase: 'SAT', note: 'Desaturation start' });\n      const Kp = 1.2;\n      const targetSat = 2.0;\n      const acceptableSat = 4.0;\n      const stuckThreshold = 0.3;\n      const stuckIterLimit = 4;\n      let stuckCount = 0;\n      this.prevSat = null;\n\n      for (let iter = 1; iter <= 25 && this.cal_status === 'running'; iter++) {\n        this.totalIter++;\n        const stats = await this.analyzeFrame(true);\n        this.currentSat = stats.sat;\n        this.lastFrame = stats;\n        const delta = this.prevSat !== null ? (stats.sat - this.prevSat) : null;\n        this.cal_log({\n          phase: 'SAT', iter,\n          val: stats.sat.toFixed(2),\n          delta: delta !== null ? delta.toFixed(2) : undefined,\n          deltaClass: delta !== null ? (delta < 0 ? 'text-success' : 'text-error') : '',\n          note: 'R=' + this.gains.red + ' G=' + Math.round(stats.g) + ' B=' + this.gains.blue\n        });\n\n        if (stats.sat < targetSat) {\n          this.cal_log({ phase: 'SAT', level: 'ok', note: 'Converged at ' + stats.sat.toFixed(2) + '%' });\n          return;\n        }\n\n        if (delta !== null && Math.abs(delta) < stuckThreshold) {\n          stuckCount++;\n          if (stuckCount >= stuckIterLimit) {\n            if (stats.sat < acceptableSat) {\n              this.cal_log({\n                phase: 'SAT', level: 'warn',\n                note: 'Settled at ' + stats.sat.toFixed(2) + '% (best achievable)'\n              });\n              return;\n            }\n            throw new Error('Saturation stuck at ' + stats.sat.toFixed(1) + '% — check lighting/lens');\n          }\n        } else {\n          stuckCount = 0;\n        }\n\n        this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n        this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n        this.sendIO();\n        this.prevSat = stats.sat;\n        await this.wait(this.timing.satSettle);\n      }\n\n      if (this.currentSat < acceptableSat) {\n        this.cal_log({\n          phase: 'SAT', level: 'warn',\n          note: 'Max iter reached, accepting ' + this.currentSat.toFixed(2) + '%'\n        });\n        return;\n      }\n      throw new Error('Saturation did not converge in 25 iterations (final: ' + this.currentSat.toFixed(1) + '%)');\n    },\n    async runLightnessLoop() {\n      this.cal_log({ phase: 'LUM', note: 'Exposure adjustment start' });\n      this.prevLum = null;\n      for (let iter = 1; iter <= 40 && this.cal_status === 'running'; iter++) {\n        this.totalIter++;\n        const stats = await this.analyzeFrame(false);\n        this.currentLum = stats.lum;\n        const delta = this.prevLum !== null ? (stats.lum - this.prevLum) : null;\n        this.cal_log({\n          phase: 'LUM', iter,\n          val: stats.lum.toFixed(1),\n          delta: delta !== null ? delta.toFixed(1) : undefined,\n          deltaClass: delta !== null ? (Math.abs(230 - stats.lum) < Math.abs(230 - (this.prevLum || 0)) ? 'text-success' : 'text-error') : '',\n          note: 'LED=' + this.led.toFixed(4) + ' · ' + stats.validZones + ' zones'\n        });\n        if (Math.abs(stats.lum - 230) <= 5) {\n          this.cal_log({ phase: 'LUM', level: 'ok', note: 'Converged at ' + stats.lum.toFixed(1) });\n          return;\n        }\n        let nextLed = this.led;\n        if (stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n        else if (stats.lum > 252) nextLed = this.led * 0.5;\n        else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n        this.led = Math.max(0, Math.min(1, nextLed));\n        this.sendIO();\n        this.prevLum = stats.lum;\n        await this.wait(this.timing.lumSettle);\n      }\n      throw new Error('Exposure did not converge in 40 iterations');\n    },\n    async analyzeFrame(isSaturationStep) {\n      const iframe = this.$refs.videoIframe;\n      if (!iframe || !iframe.contentDocument) return { sat: 99, lum: 0, r: 0, g: 0, b: 0, validZones: 0 };\n      const video = iframe.contentDocument.querySelector('video');\n      if (!video || video.videoWidth === 0) return { sat: 99, lum: 0, r: 0, g: 0, b: 0, validZones: 0 };\n      const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n      ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n      if (isSaturationStep) {\n        const size = 100;\n        const x = Math.floor((this.analysisW - size) / 2);\n        const y = Math.floor((this.analysisH - size) / 2);\n        const data = ctx.getImageData(x, y, size, size).data;\n        let r = 0, g = 0, b = 0;\n        const pixels = size * size;\n        for (let i = 0; i < data.length; i += 4) {\n          r += data[i]; g += data[i + 1]; b += data[i + 2];\n        }\n        const avgR = r / pixels, avgG = g / pixels, avgB = b / pixels;\n        const max = Math.max(avgR, avgG, avgB), min = Math.min(avgR, avgG, avgB);\n        const sat = max === 0 ? 0 : ((max - min) / max) * 100;\n        return { sat: parseFloat(sat.toFixed(2)), r: avgR, g: avgG, b: avgB, lum: 0, validZones: 0 };\n      }\n\n      const fullData = ctx.getImageData(0, 0, this.analysisW, this.analysisH).data;\n      const cellW = this.analysisW / this.gridN;\n      const cellH = this.analysisH / this.gridN;\n      const sample = 15;\n      let totalLum = 0, validCount = 0;\n      for (let i = 0; i < this.gridN; i++) {\n        for (let j = 0; j < this.gridN; j++) {\n          const x0 = Math.floor(j * cellW + (cellW - sample) / 2);\n          const y0 = Math.floor(i * cellH + (cellH - sample) / 2);\n          let sum = 0, minP = 255;\n          for (let py = 0; py < sample; py++) {\n            const rowStart = ((y0 + py) * this.analysisW + x0) * 4;\n            for (let px = 0; px < sample; px++) {\n              const idx = rowStart + px * 4;\n              const l = (fullData[idx] + fullData[idx + 1] + fullData[idx + 2]) / 3;\n              if (l < minP) minP = l;\n              sum += l;\n            }\n          }\n          const avg = sum / (sample * sample);\n          const isValid = (avg - minP) <= this.sensitivityThreshold && avg > 2;\n          this.gridZones[i * this.gridN + j] = { id: i * this.gridN + j, active: isValid, lum: avg };\n          if (isValid) { totalLum += avg; validCount++; }\n        }\n      }\n      return {\n        lum: validCount > 0 ? totalLum / validCount : 0,\n        validZones: validCount,\n        r: 0, g: 0, b: 0, sat: 0\n      };\n    },\n    sendIO() {\n      if (this.send) {\n        this.send({\n          topic: 'light',\n          payload: {\n            action: 'on',\n            value: Number(this.led.toFixed(12)),\n            acq_led_intensity: Number(this.led.toFixed(6)),\n            led_status: 'on'\n          }\n        });\n        this.send({\n          topic: 'imager/image',\n          payload: { action: 'settings', settings: { white_balance_gain: this.gains } }\n        });\n      }\n    },\n    stopHardware() {\n      if (this.send) {\n        this.send({ topic: 'light', payload: { action: 'off', value: 0, led_status: 'off' } });\n      }\n    },\n    onIframeLoad() {\n      try {\n        const doc = this.$refs.videoIframe.contentDocument;\n        const s = doc.createElement('style');\n        s.textContent = 'body{margin:0;overflow:hidden;background:black;} img,video{width:100%;height:100%;object-fit:fill;display:block;}';\n        doc.head.appendChild(s);\n      } catch (e) {}\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n    cal_log(entry) {}\n  },\n};\n</script>\n\n<style scoped>\n  /* ============================================================ */\n  /* ACQUISITION STYLES                                             */\n  /* ============================================================ */\n  .cursor-pointer { cursor: pointer; }\n  .v-card-text { padding: 0 !important; }\n  .v-card { border: none; }\n  .v-container { background: #eef3ff; }\n  .v-expansion-panel-text { padding-left: 0 !important; padding-right: 0 !important; }\n  :deep(.v-field__prefix) { align-self: center; padding-top: 0 !important; margin-top: 0 !important; }\n  :deep(.v-field__field) { align-items: center; }\n  .nrdb-app .v-field--variant-outlined {\n    --v-field-input-padding-top: 12px;\n    --v-field-input-padding-bottom: 12px;\n  }\n  .border { border: 1px solid #cccccc !important; }\n\n  /* ============================================================ */\n  /* CALIBRATION MODAL STYLES                                       */\n  /* ============================================================ */\n  .control-panel { }\n  .calibration-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }\n  .calibration-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; pointer-events: none; }\n\n  .ratio-box { width: 100%; max-width: 720px; aspect-ratio: 4 / 3; position: relative; }\n\n  .focus-overlay {\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n    width: 100px; height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.9);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);\n    z-index: 10; pointer-events: none;\n  }\n  .crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n  .focus-label {\n    position: absolute; top: -28px; width: 220px; text-align: center;\n    color: orange; font-size: 11px; font-weight: bold; letter-spacing: 1.5px;\n  }\n\n  .smart-grid {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    display: grid;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 10; pointer-events: none;\n  }\n  .grid-cell { border: 1px solid rgba(255,255,255,0.12); transition: background 0.15s; }\n  .cell-active { background-color: rgba(0, 255, 0, 0.18); border-color: rgba(0,255,0,0.5); }\n  .cell-rejected { background-color: rgba(255, 0, 0, 0.12); }\n\n  .phase-badge {\n    position: absolute; top: 12px; left: 12px;\n    background: rgba(0,0,0,0.75); color: #fff;\n    padding: 6px 12px; border-radius: 4px;\n    font-size: 11px; font-weight: bold; letter-spacing: 1px;\n    z-index: 20; display: flex; align-items: center;\n  }\n\n  .step-card { transition: all 0.2s; }\n\n  .gauge { width: 100%; padding: 4px 0; }\n  .gauge-track {\n    position: relative; width: 100%; height: 12px;\n    background: #eee; border-radius: 6px; overflow: visible;\n  }\n  .gauge-zone { position: absolute; top: 0; height: 100%; opacity: 0.85; }\n  .gauge-target-tick {\n    position: absolute; top: -3px; height: 18px; width: 2px;\n    background: #000; transform: translateX(-50%);\n    z-index: 2;\n  }\n  .gauge-marker {\n    position: absolute; top: 50%; width: 14px; height: 14px;\n    background: #fff; border: 2px solid #333; border-radius: 50%;\n    transform: translate(-50%, -50%);\n    transition: left 0.3s ease, border-color 0.2s, background 0.2s;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.3);\n    z-index: 3;\n  }\n  .gauge-marker-ok { background: #4caf50; border-color: #2e7d32; }\n\n  .result-card { border-left: 4px solid; }\n  .border-success { border-left-color: #4caf50 !important; }\n  .border-error { border-left-color: #f44336 !important; }\n  .result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }\n  .result-grid > div { display: flex; flex-direction: column; }\n  .result-label {\n    font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;\n    color: #666; font-weight: bold;\n  }\n  .result-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: bold; }\n\n  .text-success { color: #2e7d32; font-weight: bold; }\n  .text-error { color: #c62828; font-weight: bold; }\n  .text-warning { color: #ef6c00; font-weight: bold; }\n\n  .font-mono { font-family: 'Roboto Mono', monospace; }\n  .mdi-spin { animation: spin 1s linear infinite; }\n  @keyframes spin { to { transform: rotate(360deg); } }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4037,11 +4045,16 @@
                 "t": "eq",
                 "v": "imager/image",
                 "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "calibration/save",
+                "vt": "str"
             }
         ],
         "checkall": "true",
         "repair": false,
-        "outputs": 2,
+        "outputs": 3,
         "x": 550,
         "y": 440,
         "wires": [
@@ -4052,6 +4065,9 @@
             [
                 "d103a3c7e312d1f1",
                 "7f4d54e564ca69d7"
+            ],
+            [
+                "d103a3c7e312d1f1"
             ]
         ]
     },
@@ -7614,7 +7630,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-0 fill-height bg-grey-lighten-4\">\n    <v-row no-gutters class=\"fill-height\">\n      \n      <v-col cols=\"12\" md=\"9\" class=\"d-flex align-center justify-center position-relative\">\n        <div class=\"ratio-box\">\n            <v-card class=\"calibration-container\">\n              <iframe \n                src=\"/preview/node-red\" \n                class=\"calibration-iframe\"\n                @load=\"onIframeLoad\" \n                ref=\"videoIframe\"\n              ></iframe>\n              \n              <div v-if=\"step === 2\" class=\"focus-overlay\">\n                  <div class=\"crosshair\"></div>\n                  <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n              </div>\n\n              <div v-show=\"step === 3\" class=\"smart-grid\">\n                <div \n                    v-for=\"(zone, i) in gridZones\" \n                    :key=\"i\"\n                    class=\"grid-cell\"\n                    :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"\n                ></div>\n              </div>\n              \n              <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n            </v-card>\n        </div>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"3\" class=\"bg-white d-flex flex-column pa-4 border-s\">\n        \n        <div class=\"d-flex align-center justify-space-between mb-4\">\n          <h2 class=\"text-h6 font-weight-bold text-grey-darken-3\">CALIBRATION</h2>\n          <v-chip size=\"small\" :color=\"ledStatusColor\" variant=\"flat\" class=\"font-weight-bold\">\n            LED: {{ status === 'running' ? 'ON' : 'OFF' }}\n          </v-chip>\n        </div>\n\n        <v-btn\n          variant=\"tonal\" size=\"small\" color=\"primary\" block\n          href=\"/calibration_pump\" prepend-icon=\"mdi-pump\"\n          class=\"mb-4 text-none\">\n          Pump Calibration\n        </v-btn>\n\n        <v-btn \n            block size=\"x-large\" height=\"70\"\n            :color=\"btnColor\"\n            @click=\"toggleSequence\"\n            class=\"mb-6 font-weight-black elevation-2\"\n            :loading=\"status === 'running' && step === 0\"\n        >\n            {{ btnText }}\n        </v-btn>\n\n        <div class=\"d-flex flex-column gap-3\">\n            <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(1)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"text-subtitle-2 font-weight-bold\">1. Initialization</div>\n                    <div class=\"text-caption\">Preset (0.1 / R200 B180)</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(2)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">2. Desaturation</span>\n                        <span v-if=\"step===2\" class=\"font-mono font-weight-black\">{{ currentSat }}%</span>\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===2\" \n                        :model-value=\"Math.max(0, 100 - (currentSat*10))\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Target: 0%</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(3)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">3. Exposure</span>\n                        <span v-if=\"step===3\" class=\"font-mono font-weight-black\">{{ currentLum.toFixed(0) }}/230</span>\n                    </div>\n                    <div v-if=\"step===3\" class=\"text-caption font-mono text-green-darken-2 mt-1\">\n                        {{ activeZonesCount }} valid zones\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===3\" \n                        :model-value=\"(currentLum/255)*100\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Smart Grid Target: 230</div>\n                </div>\n            </v-card>\n        </div>\n\n        <div class=\"mt-auto pt-4 border-t\">\n            <div class=\"font-mono text-caption text-grey-darken-2\" style=\"height:150px; overflow-y:auto; font-size:10px !important;\">\n                <div v-for=\"(l,i) in logs\" :key=\"i\" class=\"mb-1 border-b pb-1\">\n                    <span class=\"text-grey-darken-1 font-weight-bold\">{{l.time}}</span> {{ l.txt }}\n                </div>\n            </div>\n        </div>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      status: 'idle', // idle, running, success, error\n      step: 0,        \n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1, \n      gains: { red: 200, blue: 180 },\n      gridN: 20,       \n      analysisW: 1200, \n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false })),\n      logs: []\n    };\n  },\n  computed: {\n    btnText() {\n        if(this.status === 'running') return 'EMERGENCY STOP';\n        if(this.status === 'success') return 'SUCCESS (RESTART)';\n        return 'START SEQUENCE';\n    },\n    btnColor() {\n        if(this.status === 'running') return 'error';\n        if(this.status === 'success') return 'success';\n        return 'primary';\n    },\n    ledStatusColor() {\n        return this.status === 'running' ? 'orange' : 'grey';\n    },\n    activeZonesCount() {\n        return this.gridZones.filter(z => z.active).length;\n    }\n  },\n  methods: {\n    getStepColor(s) {\n        if (this.status === 'success' || this.step > s) return 'green';\n        if (this.step === s) return 'orange-darken-2';\n        return 'grey-lighten-2';\n    },\n    getStepIcon(s) {\n        if (this.status === 'success' || this.step > s) return 'mdi-check-bold';\n        if (this.step === s) return 'mdi-loading mdi-spin';\n        return 'mdi-numeric-'+s+'-circle';\n    },\n\n    async toggleSequence() {\n        if(this.status === 'running') {\n            this.status = 'idle'; \n            this.step = 0; \n            this.log(\"Manual stop requested.\");\n            this.stopHardware();\n            return;\n        }\n        \n        this.status = 'running';\n        this.step = 1;\n        this.logs = [];\n        this.log(\"Sequence start: LED status ON\");\n\n        try {\n            await this.runInit();\n            this.step = 2;\n            await this.runSaturationLoop();\n            this.step = 3;\n            this.gridZones.forEach(z => z.active = false); \n            await this.runLightnessLoop();\n            \n            this.status = 'success';\n            // The run converged, so persist what the controller is now running.\n            // Without this the calibration lives only in volatile state and is lost on\n            // reboot or an LED off/on cycle (fairscope/PlanktoScope3#575).\n            if (this.send) {\n                this.send({ topic: \"light\", payload: { action: \"save\" } });\n                this.send({ topic: \"imager/image\", payload: { action: \"save_settings\" } });\n            }\n            this.step = 4;\n            this.log(\"Calibration successful.\");\n        } catch(e) {\n            this.status = 'error';\n            this.log(\"ERROR: \" + e);\n            this.stopHardware();\n        }\n    },\n\n    async runInit() {\n        this.log(\"Init: Preset LED 0.1 / R200 B180\");\n        this.led = 0.1; \n        this.gains = { red: 200, blue: 180 };\n        this.sendIO();\n        await this.wait(2500);\n    },\n\n    async runSaturationLoop() {\n        this.log(\"Desaturation starting...\");\n        let iter = 0;\n        while(iter < 25 && this.status === 'running') {\n            const stats = await this.analyzeFrame(true);\n            this.currentSat = stats.sat;\n            if(stats.sat < 1.0) return;\n\n            const Kp = 0.8;\n            this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n            this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n\n            this.sendIO();\n            await this.wait(2000); \n            iter++;\n        }\n    },\n\n    async runLightnessLoop() {\n        this.log(\"Exposure adjustment...\");\n        let iter = 0;\n        while(iter < 40 && this.status === 'running') {\n            const stats = await this.analyzeFrame(false);\n            this.currentLum = stats.lum;\n            if(Math.abs(stats.lum - 230) <= 5) return;\n\n            let nextLed = this.led;\n            if(stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n            else if(stats.lum > 252) nextLed = this.led * 0.5;\n            else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n            \n            this.led = Math.max(0, Math.min(1, nextLed));\n            this.sendIO();\n            await this.wait(600);\n            iter++;\n        }\n    },\n\n    async analyzeFrame(isSaturationStep) {\n        const iframe = this.$refs.videoIframe;\n        if(!iframe?.contentDocument) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const video = iframe.contentDocument.querySelector('video');\n        if(!video || video.videoWidth === 0) return { sat:99, lum:0, r:0, g:0, b:0 };\n\n        const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n        ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n        if(isSaturationStep) {\n            const size = 100;\n            const data = ctx.getImageData((this.analysisW-size)/2, (this.analysisH-size)/2, size, size).data;\n            let r=0, g=0, b=0, c=0;\n            for(let i=0; i<data.length; i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; c++; }\n            const avgR=r/c, avgG=g/c, avgB=b/c;\n            const max=Math.max(avgR, avgG, avgB), min=Math.min(avgR, avgG, avgB);\n            return { sat: parseFloat((max===0?0:((max-min)/max)*100).toFixed(1)), r:avgR, g:avgG, b:avgB };\n        } else {\n            const cellW = this.analysisW / this.gridN; \n            const cellH = this.analysisH / this.gridN;\n            let vL=0, vC=0;\n            for(let i=0; i<this.gridN; i++) {\n                for(let j=0; j<this.gridN; j++) {\n                    const data = ctx.getImageData((j*cellW)+(cellW-15)/2, (i*cellH)+(cellH-15)/2, 15, 15).data;\n                    let s=0, mP=255;\n                    for(let k=0; k<data.length; k+=4) { \n                        const l=(data[k]+data[k+1]+data[k+2])/3; \n                        if(l<mP) mP=l; s+=l; \n                    }\n                    const avg=s/(data.length/4);\n                    const isValid=(avg-mP)<=this.sensitivityThreshold && avg>2;\n                    this.gridZones[i*this.gridN+j] = { active: isValid, lum: avg };\n                    if(isValid){ vL+=avg; vC++; }\n                }\n            }\n            return { lum: vC > 0 ? vL/vC : 0 };\n        }\n    },\n\n    sendIO() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { \n                    action: \"on\", \n                    value: Number(this.led.toFixed(12)),\n                    acq_led_intensity: Number(this.led.toFixed(6)),\n                    led_status: \"on\" \n                } \n            });\n            this.send({ \n                topic: \"imager/image\", \n                payload: { \n                    action: \"settings\", \n                    settings: { white_balance_gain: this.gains } \n                } \n            });\n        }\n    },\n\n    stopHardware() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { action: \"off\", value: 0, led_status: \"off\" } \n            });\n        }\n    },\n\n    onIframeLoad() {\n        try {\n            const doc = this.$refs.videoIframe.contentDocument;\n            const s = doc.createElement('style');\n            s.textContent = `body{margin:0;overflow:hidden;background:black;} img,video{width:100%;height:100%;object-fit:fill;display:block;}`;\n            doc.head.appendChild(s);\n        } catch(e){}\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n    log(txt) { \n        const time = new Date().toLocaleTimeString().split(' ')[0];\n        this.logs.unshift({time, txt}); \n        if(this.logs.length>20) this.logs.pop(); \n    }\n  }\n};\n</script>\n\n<style scoped>\n.calibration-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; pointer-events: none; }\n.focus-overlay {\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n    width: 100px; height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.8);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); \n    z-index: 10;\n    pointer-events: none;\n}\n.smart-grid {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    display: grid; \n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 10;\n    pointer-events: none;\n}\n.ratio-box {\n    width: 100%;\n    max-width: 1000px;\n    aspect-ratio: 4 / 3;\n    margin: 0 auto;\n    position: relative;\n    border: 1px solid #ccc;\n    background: #000;\n}\n.crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n.focus-label {\n    position: absolute; top: -25px; width: 200px; text-align: center;\n    color: orange; font-size: 10px; font-weight: bold; letter-spacing: 1px;\n}\n.grid-cell { border: 1px solid rgba(255,255,255,0.15); transition: background 0.1s; }\n.cell-active { background-color: rgba(0, 255, 0, 0.15); border-color: rgba(0,255,0,0.4); }\n.cell-rejected { background-color: rgba(255, 0, 0, 0.15); }\n.gap-3 { display: flex; flex-direction: column; gap: 12px; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"pa-0 fill-height bg-grey-lighten-4\">\n    <v-row no-gutters class=\"fill-height\">\n      \n      <v-col cols=\"12\" md=\"9\" class=\"d-flex align-center justify-center position-relative\">\n        <div class=\"ratio-box\">\n            <v-card class=\"calibration-container\">\n              <iframe \n                src=\"/preview/node-red\" \n                class=\"calibration-iframe\"\n                @load=\"onIframeLoad\" \n                ref=\"videoIframe\"\n              ></iframe>\n              \n              <div v-if=\"step === 2\" class=\"focus-overlay\">\n                  <div class=\"crosshair\"></div>\n                  <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n              </div>\n\n              <div v-show=\"step === 3\" class=\"smart-grid\">\n                <div \n                    v-for=\"(zone, i) in gridZones\" \n                    :key=\"i\"\n                    class=\"grid-cell\"\n                    :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"\n                ></div>\n              </div>\n              \n              <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n            </v-card>\n        </div>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"3\" class=\"bg-white d-flex flex-column pa-4 border-s\">\n        \n        <div class=\"d-flex align-center justify-space-between mb-4\">\n          <h2 class=\"text-h6 font-weight-bold text-grey-darken-3\">CALIBRATION</h2>\n          <v-chip size=\"small\" :color=\"ledStatusColor\" variant=\"flat\" class=\"font-weight-bold\">\n            LED: {{ status === 'running' ? 'ON' : 'OFF' }}\n          </v-chip>\n        </div>\n\n        <v-btn\n          variant=\"tonal\" size=\"small\" color=\"primary\" block\n          href=\"/calibration_pump\" prepend-icon=\"mdi-pump\"\n          class=\"mb-4 text-none\">\n          Pump Calibration\n        </v-btn>\n\n        <v-btn \n            block size=\"x-large\" height=\"70\"\n            :color=\"btnColor\"\n            @click=\"toggleSequence\"\n            class=\"mb-6 font-weight-black elevation-2\"\n            :loading=\"status === 'running' && step === 0\"\n        >\n            {{ btnText }}\n        </v-btn>\n\n        <div class=\"d-flex flex-column gap-3\">\n            <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(1)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"text-subtitle-2 font-weight-bold\">1. Initialization</div>\n                    <div class=\"text-caption\">Preset (0.1 / R200 B180)</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(2)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">2. Desaturation</span>\n                        <span v-if=\"step===2\" class=\"font-mono font-weight-black\">{{ currentSat }}%</span>\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===2\" \n                        :model-value=\"Math.max(0, 100 - (currentSat*10))\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Target: 0%</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(3)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">3. Exposure</span>\n                        <span v-if=\"step===3\" class=\"font-mono font-weight-black\">{{ currentLum.toFixed(0) }}/230</span>\n                    </div>\n                    <div v-if=\"step===3\" class=\"text-caption font-mono text-green-darken-2 mt-1\">\n                        {{ activeZonesCount }} valid zones\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===3\" \n                        :model-value=\"(currentLum/255)*100\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Smart Grid Target: 230</div>\n                </div>\n            </v-card>\n        </div>\n\n        <div class=\"mt-auto pt-4 border-t\">\n            <div class=\"font-mono text-caption text-grey-darken-2\" style=\"height:150px; overflow-y:auto; font-size:10px !important;\">\n                <div v-for=\"(l,i) in logs\" :key=\"i\" class=\"mb-1 border-b pb-1\">\n                    <span class=\"text-grey-darken-1 font-weight-bold\">{{l.time}}</span> {{ l.txt }}\n                </div>\n            </div>\n        </div>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      status: 'idle', // idle, running, success, error\n      step: 0,        \n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1, \n      gains: { red: 200, blue: 180 },\n      gridN: 20,       \n      analysisW: 1200, \n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false })),\n      logs: []\n    };\n  },\n  computed: {\n    btnText() {\n        if(this.status === 'running') return 'EMERGENCY STOP';\n        if(this.status === 'success') return 'SUCCESS (RESTART)';\n        return 'START SEQUENCE';\n    },\n    btnColor() {\n        if(this.status === 'running') return 'error';\n        if(this.status === 'success') return 'success';\n        return 'primary';\n    },\n    ledStatusColor() {\n        return this.status === 'running' ? 'orange' : 'grey';\n    },\n    activeZonesCount() {\n        return this.gridZones.filter(z => z.active).length;\n    }\n  },\n  methods: {\n    getStepColor(s) {\n        if (this.status === 'success' || this.step > s) return 'green';\n        if (this.step === s) return 'orange-darken-2';\n        return 'grey-lighten-2';\n    },\n    getStepIcon(s) {\n        if (this.status === 'success' || this.step > s) return 'mdi-check-bold';\n        if (this.step === s) return 'mdi-loading mdi-spin';\n        return 'mdi-numeric-'+s+'-circle';\n    },\n\n    async toggleSequence() {\n        if(this.status === 'running') {\n            this.status = 'idle'; \n            this.step = 0; \n            this.log(\"Manual stop requested.\");\n            this.stopHardware();\n            return;\n        }\n        \n        this.status = 'running';\n        this.step = 1;\n        this.logs = [];\n        this.log(\"Sequence start: LED status ON\");\n\n        try {\n            await this.runInit();\n            this.step = 2;\n            await this.runSaturationLoop();\n            this.step = 3;\n            this.gridZones.forEach(z => z.active = false); \n            await this.runLightnessLoop();\n            \n            this.status = 'success';\n            // The run converged, so persist what the controller is now running.\n            // Without this the calibration lives only in volatile state and is lost on\n            // reboot or an LED off/on cycle (fairscope/PlanktoScope3#575).\n            if (this.send) {\n                this.send({ topic: \"calibration/save\", payload: { led_intensity: Number(this.led.toFixed(6)), white_balance: { red: this.gains.red / 100, blue: this.gains.blue / 100 } } });\n            }\n            this.step = 4;\n            this.log(\"Calibration successful.\");\n        } catch(e) {\n            this.status = 'error';\n            this.log(\"ERROR: \" + e);\n            this.stopHardware();\n        }\n    },\n\n    async runInit() {\n        this.log(\"Init: Preset LED 0.1 / R200 B180\");\n        this.led = 0.1; \n        this.gains = { red: 200, blue: 180 };\n        this.sendIO();\n        await this.wait(2500);\n    },\n\n    async runSaturationLoop() {\n        this.log(\"Desaturation starting...\");\n        let iter = 0;\n        while(iter < 25 && this.status === 'running') {\n            const stats = await this.analyzeFrame(true);\n            this.currentSat = stats.sat;\n            if(stats.sat < 1.0) return;\n\n            const Kp = 0.8;\n            this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n            this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n\n            this.sendIO();\n            await this.wait(2000); \n            iter++;\n        }\n    },\n\n    async runLightnessLoop() {\n        this.log(\"Exposure adjustment...\");\n        let iter = 0;\n        while(iter < 40 && this.status === 'running') {\n            const stats = await this.analyzeFrame(false);\n            this.currentLum = stats.lum;\n            if(Math.abs(stats.lum - 230) <= 5) return;\n\n            let nextLed = this.led;\n            if(stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n            else if(stats.lum > 252) nextLed = this.led * 0.5;\n            else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n            \n            this.led = Math.max(0, Math.min(1, nextLed));\n            this.sendIO();\n            await this.wait(600);\n            iter++;\n        }\n    },\n\n    async analyzeFrame(isSaturationStep) {\n        const iframe = this.$refs.videoIframe;\n        if(!iframe?.contentDocument) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const video = iframe.contentDocument.querySelector('video');\n        if(!video || video.videoWidth === 0) return { sat:99, lum:0, r:0, g:0, b:0 };\n\n        const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n        ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n        if(isSaturationStep) {\n            const size = 100;\n            const data = ctx.getImageData((this.analysisW-size)/2, (this.analysisH-size)/2, size, size).data;\n            let r=0, g=0, b=0, c=0;\n            for(let i=0; i<data.length; i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; c++; }\n            const avgR=r/c, avgG=g/c, avgB=b/c;\n            const max=Math.max(avgR, avgG, avgB), min=Math.min(avgR, avgG, avgB);\n            return { sat: parseFloat((max===0?0:((max-min)/max)*100).toFixed(1)), r:avgR, g:avgG, b:avgB };\n        } else {\n            const cellW = this.analysisW / this.gridN; \n            const cellH = this.analysisH / this.gridN;\n            let vL=0, vC=0;\n            for(let i=0; i<this.gridN; i++) {\n                for(let j=0; j<this.gridN; j++) {\n                    const data = ctx.getImageData((j*cellW)+(cellW-15)/2, (i*cellH)+(cellH-15)/2, 15, 15).data;\n                    let s=0, mP=255;\n                    for(let k=0; k<data.length; k+=4) { \n                        const l=(data[k]+data[k+1]+data[k+2])/3; \n                        if(l<mP) mP=l; s+=l; \n                    }\n                    const avg=s/(data.length/4);\n                    const isValid=(avg-mP)<=this.sensitivityThreshold && avg>2;\n                    this.gridZones[i*this.gridN+j] = { active: isValid, lum: avg };\n                    if(isValid){ vL+=avg; vC++; }\n                }\n            }\n            return { lum: vC > 0 ? vL/vC : 0 };\n        }\n    },\n\n    sendIO() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { \n                    action: \"on\", \n                    value: Number(this.led.toFixed(12)),\n                    acq_led_intensity: Number(this.led.toFixed(6)),\n                    led_status: \"on\" \n                } \n            });\n            this.send({ \n                topic: \"imager/image\", \n                payload: { \n                    action: \"settings\", \n                    settings: { white_balance_gain: this.gains } \n                } \n            });\n        }\n    },\n\n    stopHardware() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { action: \"off\", value: 0, led_status: \"off\" } \n            });\n        }\n    },\n\n    onIframeLoad() {\n        try {\n            const doc = this.$refs.videoIframe.contentDocument;\n            const s = doc.createElement('style');\n            s.textContent = `body{margin:0;overflow:hidden;background:black;} img,video{width:100%;height:100%;object-fit:fill;display:block;}`;\n            doc.head.appendChild(s);\n        } catch(e){}\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n    log(txt) { \n        const time = new Date().toLocaleTimeString().split(' ')[0];\n        this.logs.unshift({time, txt}); \n        if(this.logs.length>20) this.logs.pop(); \n    }\n  }\n};\n</script>\n\n<style scoped>\n.calibration-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; pointer-events: none; }\n.focus-overlay {\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n    width: 100px; height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.8);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); \n    z-index: 10;\n    pointer-events: none;\n}\n.smart-grid {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    display: grid; \n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 10;\n    pointer-events: none;\n}\n.ratio-box {\n    width: 100%;\n    max-width: 1000px;\n    aspect-ratio: 4 / 3;\n    margin: 0 auto;\n    position: relative;\n    border: 1px solid #ccc;\n    background: #000;\n}\n.crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n.focus-label {\n    position: absolute; top: -25px; width: 200px; text-align: center;\n    color: orange; font-size: 10px; font-weight: bold; letter-spacing: 1px;\n}\n.grid-cell { border: 1px solid rgba(255,255,255,0.15); transition: background 0.1s; }\n.cell-active { background-color: rgba(0, 255, 0, 0.15); border-color: rgba(0,255,0,0.4); }\n.cell-rejected { background-color: rgba(255, 0, 0, 0.15); }\n.gap-3 { display: flex; flex-direction: column; gap: 12px; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -9301,5 +9317,43 @@
         "wires": [
             []
         ]
+    },
+    {
+        "id": "ca11ba7100000001",
+        "type": "mqtt in",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "topic": "status/calibration",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 80,
+        "y": 400,
+        "wires": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "ca11ba7100000002",
+        "type": "mqtt out",
+        "z": "6d6a011bf1913637",
+        "name": "MQTT - calibration",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 790,
+        "y": 520,
+        "wires": []
     }
 ]
\ No newline at end of file