signalk-czone 0.3.0-beta.14 → 0.3.0-beta.15

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0-beta.15
+
+- Preserves plugin settings when uploading a ZCF or selecting a network configuration (#32).
+- Publishes switch-input states for Signal Interface, COI and Control X PLUS modules (#30).
+- Adds the Navico chartplotter touch layout, drag scrolling and reduced redraw cost (#31).
+- Updates the canonical ZCF parser to 0.1.0-beta.2 for newer Configuration Tool layouts and corrected tank settings.
+
 ## 0.3.0-beta.14
 
 - Adds bidirectional CZone links to Shelly Gen2+ switches and Victron GX outputs, with startup, confirmation and relay-function safeguards.

package/README.md

@@ -57,6 +57,28 @@ The existing electrical-monitoring definition endpoint remains:
 GET /plugins/signalk-czone/monitoring
 ```
 
+## Switch inputs
+
+Each switch input in the ZCF (a switch, float switch or signal wired to a CZone module) is published as `electrical.czone.inputs.<input name>.state`, `true` when the input is on. The name is cleaned the same way as circuit names; a repeated name gets `2`, `3` and so on. A value is published when the plugin first hears the module and then only on change.
+
+Where an input's state is read depends on the kind of module (its type in the ZCF):
+
+| Module | Message read | Input `i` is at |
+| --- | --- | --- |
+| Signal Interface | 65284 status and 65308 input message | bit `2i+1` |
+| COI | 65308 input message only (its 65284 is its outputs) | bit `2(i-16)+1` |
+| Control X PLUS | 65284 status only | bit `i`, or `i+1` when wired to switch to negative |
+
+Inputs on other kinds of module are listed but not given a state. Checked on a Signal Interface on a test bench, COIs on SugarShack and a Control X PLUS on Compass Rose (Anchor Up, Ignition, High Bilge Water Alarm). Only one Control X PLUS input wired to negative has been seen.
+
+```text
+GET /plugins/signalk-czone/inputs
+```
+
+lists each input with its module, input number, wiring, module type, state and when it last changed.
+
+The input table needs `signalk-czone-zcf` with `signalInputs` (the newer Configuration Tool layout included).
+
 ## Design
 
 The plugin does **not** modify Signal K Server, canboatjs, n2k-signalk, or any global PGN definitions.
@@ -215,7 +237,7 @@ The switch is read every 2 s; a CZone change is acted on as its status message a
 
 ## Installation
 
-The plugin installs the pinned `signalk-czone-zcf@0.1.0-beta.1` npm dependency automatically. No separate parser installation or Git checkout is required.
+The plugin installs the pinned `signalk-czone-zcf@0.1.0-beta.2` npm dependency automatically. No separate parser installation or Git checkout is required.
 
 ### Signal K App Store
 
@@ -239,11 +261,11 @@ npm install signalk-czone@latest --omit=dev --ignore-scripts
 
 Restart Signal K and follow the configuration steps above. For Docker or appliance installations, use the corresponding container/configuration directory and restart method.
 
-For installation from a maintainer-provided npm tarball, run `npm install /path/to/signalk-czone-0.3.0-beta.9.tgz --omit=dev --ignore-scripts` from the same configuration directory. Its pinned parser dependency must already be published to npm. Do not simply extract the plugin into `node_modules`: that does not install dependencies.
+For installation from a maintainer-provided npm tarball, run `npm install /path/to/signalk-czone-0.3.0-beta.15.tgz --omit=dev --ignore-scripts` from the same configuration directory. Its pinned parser dependency must already be published to npm. Do not simply extract the plugin into `node_modules`: that does not install dependencies.
 
 ### Publishing (maintainers)
 
-Publish `signalk-czone-zcf@0.1.0-beta.1` first. Then run `npm install`, `npm test`, and `npm pack --dry-run` in this repository, verify the runtime files and App Store assets, and run `npm publish --tag latest` after npm authentication.
+Publish `signalk-czone-zcf@0.1.0-beta.2` first. Then run `npm install`, `npm test`, and `npm pack --dry-run` in this repository, verify the runtime files and App Store assets, and run `npm publish --tag latest` after npm authentication.
 
 The package defaults to `latest`, including versions named `-beta.N`. The GitHub publishing workflow runs when `package.json` or the workflow changes on `main`: it tests and packs the release, publishes it if the version is new, and sets and verifies the `latest` tag. If the version already exists, the workflow promotes that existing version without republishing its contents.
 
@@ -442,6 +464,15 @@ Only the installed path is stored in plugin configuration; the binary ZCF is not
 
 The beta is intended for extended real-world testing before a stable `0.3.0` release.
 
+## On a Navico chartplotter (B&G, Simrad, Lowrance)
+
+A Navico plotter shows the webapp in its own browser (Chromium 69), driven by a touch screen whose touches arrive as mouse events. The page recognises the plotter from the parameters the plotter adds to the address (`mfd_name`, `mfd_model_detail`, `brand`), or from the login token left by `signalk-navico-embedder`, and switches to a touch layout. `?layout=mfd` shows it in a desktop browser for testing. Nothing changes anywhere else.
+
+- **Touch layout:** larger rows, buttons and navigation; no banner, overview or category chips; drawn icons in place of emoji and symbol characters the plotter's fonts lack; no shadows, gradients, blur or transitions, which are slow to draw there.
+- **Scrolling:** a drag scrolls the list or the left column instead of selecting text, applied once per frame, and the tap that ends a drag is not taken as a press. Redraws caused by live data wait while a finger is down.
+- **Updates:** the plotter keeps showing the page it first loaded. Once a minute the page checks whether its script has changed on the server and reloads once if so.
+- **Diagnosis:** five taps on the connection line show the last input events, the frame time and the time to redraw the list.
+
 ## Fullscreen and tablet home-screen launch
 
 Open `/signalk-czone/` directly in your browser. The **fullscreen icon** beside

package/index.js

@@ -3,6 +3,7 @@
 const path = require('path')
 const fs = require('fs')
 const zcf = require('./lib/zcf')
+const inputs = require('./lib/inputs')
 const czone = require('./lib/czone')
 const nmea = require('./lib/nmea2000')
 const monitoring = require('./lib/monitoring')
@@ -171,6 +172,10 @@ module.exports = function (app) {
   // Circuits nominated to confirm before switching, by circuit name.
   let confirmOff = new Set()
   let confirmOn = new Set()
+  // Switch inputs of the loaded configuration (lib/inputs) and their last
+  // decoded state, by Signal K path.
+  let switchInputs = []
+  let inputState = new Map()
 
   const configRoot = app.config && app.config.configPath
     ? path.join(app.config.configPath, 'plugin-config-data')
@@ -213,12 +218,16 @@ module.exports = function (app) {
   function loadConfiguredZcf () {
     if (!fs.existsSync(zcfPath())) {
       mapping = null
+      switchInputs = []
+      inputState = new Map()
       return null
     }
     mapping = zcf.load(zcfPath())
     mapping.commandDeviceId = selectCommandDeviceId(mapping)
     publishedCircuitValues.clear()
     monitoringRuntime = monitoring.createRuntime(mapping.meters || [])
+    switchInputs = inputs.switchInputs(mapping)
+    inputState = new Map(switchInputs.map(i => [i.path, { state: null, since: null }]))
     runtimeState = new Map(mapping.circuits.map(c => [c.name, {
       state: null,
       percent: null,
@@ -892,6 +901,25 @@ module.exports = function (app) {
     }
   }
 
+  // Switch inputs: PGN 65284 (module status) and 65308 (input message), each
+  // input read only from the message its kind of module carries it in.
+  function decodeSwitchInputs (frame) {
+    if (!switchInputs.length) return
+    const decoded = inputs.decodeFrame(frame.data)
+    if (!decoded) return
+    for (const input of switchInputs) {
+      if (input.module !== decoded.module) continue
+      const on = inputs.inputState(input.moduleKind, decoded.bitmap, input.input, frame.pgn, input.wiring)
+      if (on === undefined) continue
+      const entry = inputState.get(input.path)
+      if (entry.state === on) continue
+      entry.state = on
+      entry.since = new Date().toISOString()
+      log(`CZone INPUT: ${input.name} ${on ? 'ON' : 'OFF'} (PGN ${frame.pgn} module=0x${decoded.module.toString(16).padStart(2, '0')} bitmap=0x${decoded.bitmap.toString(16).padStart(8, '0')})`)
+      publishDelta(input.path, on)
+    }
+  }
+
   function handleRawFrame (line) {
     const frame = nmea.parseRawLine(line)
     if (!frame) return
@@ -901,7 +929,12 @@ module.exports = function (app) {
       handleConfigFastPacket(frame)
       return
     }
+    if (frame.pgn === inputs.INPUT_PGN) {
+      decodeSwitchInputs(frame)
+      return
+    }
     if (frame.pgn === 65284) {
+      decodeSwitchInputs(frame)
       decodeCzoneCircuitStatus(frame)
       return
     }
@@ -1401,6 +1434,8 @@ module.exports = function (app) {
       mapping = null
       runtimeState.clear()
       publishedCircuitValues.clear()
+      switchInputs = []
+      inputState = new Map()
       // Signal K removes PUT handlers when the plugin stops. The plugin
       // factory can be reused on a subsequent enable, so allow start() to
       // register the handlers again instead of treating the stale paths as
@@ -1409,6 +1444,22 @@ module.exports = function (app) {
     },
 
     registerWithRouter: router => {
+      router.get('/inputs', (_req, res) => {
+        res.json({
+          inputs: switchInputs.map(i => ({
+            name: i.name,
+            path: i.path,
+            module: i.module,
+            input: i.input,
+            wiring: i.wiring || null,
+            moduleType: i.decoded ? inputs.LAYOUT[i.moduleKind].name : null,
+            decoded: i.decoded,
+            state: inputState.get(i.path).state,
+            since: inputState.get(i.path).since
+          }))
+        })
+      })
+
       router.get('/status', (_req, res) => {
         res.json({
           sendingEnabled: settings.allowCzoneWrite === true,
@@ -1547,11 +1598,9 @@ module.exports = function (app) {
           fs.copyFileSync(source, temp)
           const next = zcf.load(temp)
           try { fs.unlinkSync(temp) } catch (_) {}
-          const newSettings = {
-            allowCzoneWrite: settings.allowCzoneWrite === true,
-            configurationSource: 'networkCache',
-            networkConfigFile: filename
-          }
+          // Only the configuration source changes; every other setting (confirm
+          // before on/off, trends, third-party switches, …) is kept.
+          const newSettings = { ...settings, configurationSource: 'networkCache', networkConfigFile: filename }
           const restartResult = await saveAndRestart(newSettings)
           res.json({ ok: true, file: filename, bytes: next.fileSize, vesselName: next.vesselName || null, configuration: newSettings, restartRequested: restartResult.restartRequested })
         } catch (err) { res.status(400).json({ ok: false, error: err.message }) }
@@ -1579,11 +1628,9 @@ module.exports = function (app) {
                 savedAt: new Date().toISOString()
               }, null, 2))
             } catch (_) {}
-            const newSettings = {
-              allowCzoneWrite: settings.allowCzoneWrite === true,
-              configurationSource: 'installedZcf',
-              networkConfigFile: ''
-            }
+            // Only the configuration source changes; every other setting (confirm
+            // before on/off, trends, third-party switches, …) is kept.
+            const newSettings = { ...settings, configurationSource: 'installedZcf', networkConfigFile: '' }
             const restartResult = await saveAndRestart(newSettings)
             res.json({
               ok: true,

package/lib/inputs.js

@@ -0,0 +1,94 @@
+'use strict'
+
+// CZone switch inputs: ON / OFF of each switch wired to a CZone module, from
+// the module's own messages. The inputs and their wiring come from the ZCF's
+// signal-input table (signalk-czone-zcf parseSignalInputs).
+//
+// PGN 65284 (0xFF04), module status, about every two seconds and on change:
+//   27 99 <module dipswitch> <module kind> <bitmap, 32 bits, low byte first>
+// PGN 65308 (0xFF1C), input message, sent on change:
+//   27 99 <module dipswitch> <variant> <bitmap, 32 bits, low byte first>
+//
+// Where an input sits depends on the kind of module (its type in the ZCF):
+//
+// Signal Interface (0x0D). Test bench, 6 Oct 2026: module 2, five switches on
+// inputs 0-4 closed one after another gave 02 00, 0A 00, 2A 00, AA 00, AA 02:
+// input n (from 0) is bit 2n+1, in 65284 and in 65308 (variant 00). The
+// message comes on change too, so a tap on a momentary switch is caught.
+//
+// COI (0x1F). SugarShack capture, 27 Sep 2026: a COI's 65284 carries its
+// outputs only; its inputs are in 65308 (variant 03), numbered from 16 in
+// the ZCF, input i at bit 2(i-16)+1. Module 1A input 19 -> 80 00, 1A input
+// 20 -> 00 02, 1C input 17 -> 08 00.
+//
+// Control X PLUS (0x36). Compass Rose, 15 Oct 2026, each input operated twice:
+// its 65284 has the outputs in bits 0-15 and the inputs above, input i (from
+// 16 in the ZCF) at bit i when it switches to positive, bit i+1 when it
+// switches to negative. Anchor Up (input 17, to +) bit 17; Ignition (24, to +)
+// bit 24; High Bilge Water Alarm (18, to -) bit 19. Only one input to
+// negative was seen. Its 65308 messages come in four variants (byte 3: 00,
+// 01, 03, 06) and are not read.
+//
+// Other kinds: not decoded (no state rather than a guess).
+
+const STATUS_PGN = 65284
+const INPUT_PGN = 65308
+
+const oddBits = first => input => 2 * (input - first) + 1
+const LAYOUT = {
+  0x0d: { name: 'Signal Interface', pgns: [STATUS_PGN, INPUT_PGN], first: 0, bit: oddBits(0) },
+  0x1f: { name: 'COI', pgns: [INPUT_PGN], first: 16, bit: oddBits(16) },
+  0x36: { name: 'Control X PLUS', pgns: [STATUS_PGN], first: 16, bit: (input, wiring) => input + (wiring === 'switchToNeg' ? 1 : 0) }
+}
+
+// data: 8 bytes of a 65284 or 65308 frame -> { module, variant, bitmap } or null
+function decodeFrame (data) {
+  if (!data || data.length !== 8 || data[0] !== 0x27 || data[1] !== 0x99) return null
+  return { module: data[2], variant: data[3], bitmap: data.readUInt32LE(4) }
+}
+
+// true / false, or undefined when this kind of module or message does not
+// carry the input.
+function inputState (kind, bitmap, input, pgn, wiring) {
+  const layout = LAYOUT[kind]
+  if (!layout || !Number.isInteger(input) || !layout.pgns.includes(pgn)) return undefined
+  if (input < layout.first) return undefined
+  const bit = layout.bit(input, wiring)
+  if (bit > 31) return undefined
+  return ((bitmap >>> bit) & 1) === 1
+}
+
+function slugify (name) {
+  const cleaned = String(name || 'Input').trim().replace(/[^A-Za-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
+  return cleaned || 'Input'
+}
+
+// The switch inputs of a loaded configuration, each with its Signal K path
+// (electrical.czone.inputs.<name>.state) and its module's kind.
+function switchInputs (mapping) {
+  const table = mapping && mapping.signalInputs
+  if (!table || !Array.isArray(table.inputs)) return []
+  const kinds = new Map((mapping.modules || []).filter(m => Number.isInteger(m.module)).map(m => [m.module, m.type]))
+  const used = new Map()
+  return table.inputs
+    .filter(i => i.type === 'switch' && Number.isInteger(i.module) && i.module !== 0)
+    .map(i => {
+      const base = slugify(i.name)
+      const count = (used.get(base) || 0) + 1
+      used.set(base, count)
+      const slug = count === 1 ? base : `${base}${count}`
+      const kind = kinds.get(i.module)
+      return {
+        name: String(i.name).trim(),
+        slug,
+        path: `electrical.czone.inputs.${slug}.state`,
+        module: i.module,
+        input: i.input,
+        wiring: i.wiring,
+        moduleKind: Number.isInteger(kind) ? kind : null,
+        decoded: Boolean(LAYOUT[kind])
+      }
+    })
+}
+
+module.exports = { STATUS_PGN, INPUT_PGN, LAYOUT, decodeFrame, inputState, switchInputs }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-czone",
-  "version": "0.3.0-beta.14",
+  "version": "0.3.0-beta.15",
   "description": "BETA: Signal K CZone monitoring and control using dynamically parsed ZCF configuration and NMEA 2000",
   "main": "index.js",
   "keywords": [
@@ -42,10 +42,10 @@
     "icon.png"
   ],
   "scripts": {
-    "test": "node test/zcf.test.js && node test/zcf-fixtures.test.js && node test/circuit-state.test.js && node test/czone.test.js && node test/nmea2000.test.js && node test/control-x-plus.test.js && node test/signalk.test.js && node test/write.test.js && node test/circuit-status.test.js && node test/status-mapping-regression.test.js && node test/state.test.js && node test/config-network.test.js && node test/config-namespace.test.js && node test/monitoring.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/bridge.test.js && node test/trends.test.js && node --require ./test/helpers/gx-low-space.cjs test/trends.test.js"
+    "test": "node test/zcf.test.js && node test/zcf-fixtures.test.js && node test/circuit-state.test.js && node test/czone.test.js && node test/nmea2000.test.js && node test/control-x-plus.test.js && node test/signalk.test.js && node test/write.test.js && node test/circuit-status.test.js && node test/status-mapping-regression.test.js && node test/state.test.js && node test/config-network.test.js && node test/config-namespace.test.js && node test/monitoring.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/bridge.test.js && node test/trends.test.js && node test/inputs.test.js && node --require ./test/helpers/gx-low-space.cjs test/trends.test.js"
   },
   "dependencies": {
-    "signalk-czone-zcf": "github:mattsmitchell/signalk-czone-zcf#4991170ac20a3506bfcc1131b2c7dd025c4a983c"
+    "signalk-czone-zcf": "0.1.0-beta.2"
   },
   "optionalDependencies": {
     "dbus-native": "^0.4.0"

package/public/index.html

@@ -247,6 +247,72 @@
     .no-flexgap .trend-stats > * { margin-right:28px; }
     .no-flexgap .fullscreen-toggle, .no-flexgap button > .nav-count, .no-flexgap .section-head .search, .no-flexgap .trend-panel .section-head .trend-close { margin-left:auto; }
     @media (max-width: 780px) { .no-flexgap .section-head .sort { margin-left:auto; } }
+    /* Chartplotter layout. A Navico plotter (B&G / Simrad / Lowrance)
+       shows the page in its own browser, Chromium 69, driven by touch that
+       arrives as mouse events. It has no flex gap, no colour-mix, few symbol
+       fonts and no hover; a drag selects text instead of scrolling. The page
+       gets the class "mfd" when the plotter's own parameters are on the address
+       (or ?layout=mfd, for trying it in a desktop browser). Nothing here
+       applies anywhere else. */
+    .mfd, .mfd * { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
+    .mfd input[type=search] { -webkit-user-select:text; user-select:text; }
+    .mfd body { font-size:16px; }
+    .mfd svg.ico { width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+    .mfd .app { grid-template-columns:230px minmax(0,1fr); }
+    .mfd .hero, .mfd .overview-card, .mfd .rightbar > .right-card:last-child, .mfd #sectionIcon, .mfd .search > span { display:none; }
+    .mfd .modes-card.none { display:none; }
+    .mfd .main { padding:10px 12px 30px; }
+    .mfd .connection { padding:0 4px 8px; }
+    .mfd .sidebar { padding:12px 10px; }
+    .mfd .rightbar { padding:0 10px 14px; }
+    .mfd .brand { padding:2px 8px 12px; }
+    .mfd .fullscreen-toggle { display:none !important; } /* the plotter's tile is already full screen */
+    .mfd .brand > * + *, .mfd .category-card > * + * { margin-left:11px; }
+    .mfd .nav button { min-height:50px; font-size:16px; padding:10px 12px; margin-bottom:4px; }
+    .mfd .nav-icon { width:24px; margin-right:12px; flex:none; }
+    .mfd .nav-count { font-size:14px; }
+    .mfd .category-nav .category-card { min-height:60px; margin-bottom:6px; }
+    .mfd .category-nav .category-card strong { font-size:14px; }
+    .mfd .category-nav .category-card span { font-size:12px; }
+    .mfd .cat-icon { background:rgba(120,170,220,.14); }
+    .mfd .section-head { padding:12px 14px; }
+    .mfd .section-head > * + * { margin-left:10px; }
+    .mfd .section-head .search { margin-left:auto; }
+    .mfd .leftwell { background:rgba(5,16,29,.78); border-right:1px solid var(--line); }
+    .mfd .sidebar, .mfd .rightbar { background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
+    .mfd .section-head h2 { font-size:20px; }
+    .mfd .section-head .subtle { font-size:13px; }
+    .mfd .search input { padding:12px 15px; font-size:15px; }
+    .mfd .section-head .sort { padding:11px 10px; font-size:14px; }
+    .mfd .circuit { grid-template-columns:44px minmax(0,1fr) auto 34px; min-height:74px; padding:10px 12px; }
+    .mfd .tags, .mfd .status { display:none; }
+    .mfd .circuit > div:nth-last-child(2) { justify-self:end; }
+    .mfd .fav { font-size:24px; padding:8px; }
+    .mfd .circuit-name strong { font-size:17px; }
+    .mfd .circuit-name small { font-size:12px; }
+    .mfd .toggle { min-width:104px; min-height:54px; font-size:17px; }
+    .mfd .ask-box { max-width:520px; padding:26px; box-shadow:none; }
+    .mfd .ask-box h3 { font-size:24px; }
+    .mfd .ask-box p { font-size:17px; }
+    .mfd .ask-buttons button { min-height:64px; font-size:19px; }
+    .mfd .ask-mark svg { width:16px; height:16px; }
+    .mfd .control > * + *, .mfd .range-wrap > * + * { margin-left:9px; }
+    .mfd .connection > * + * { margin-left:7px; }
+    .mfd .arrow { font-size:26px; padding:8px 4px; }
+    .mfd .mode-button { min-height:50px; font-size:15px; }
+    .mfd .empty { font-size:15px; }
+    /* Cheap to draw: the plotter redraws the page in software as it scrolls. */
+    .mfd, .mfd body { background:#06101d; }
+    .mfd * { box-shadow:none !important; text-shadow:none !important; transition:none !important; }
+    .mfd .section { background:#0a1a2b; }
+    .mfd .leftwell { background:#07121f; }
+    .mfd .toggle.on { background:#1aa56a; }
+    .mfd .nav button.active { background:#12456e; }
+    .mfd .category-card, .mfd .category-nav .category-card.active { background:#0f2740; }
+    .mfd .category-card:hover { transform:none; }
+    .mfd .circuit:hover, .mfd .nav button:hover, .mfd .category-nav button:hover { background:transparent; }
+    .mfd .nav button.active:hover { background:#12456e; }
+    .mfd-probe { position:fixed; left:8px; bottom:8px; z-index:9; margin:0; padding:8px 10px; max-width:70%; font:12px/1.35 monospace; color:#d6f5d6; background:rgba(0,0,0,.88); border:1px solid #2c6; border-radius:8px; white-space:pre; pointer-events:none; }
   </style>
   <script>
   (() => {
@@ -306,6 +372,7 @@
 <script src="fullscreen.js"></script>
 <script>
 (() => {
+  const OWN_SCRIPT = document.currentScript ? document.currentScript.textContent : null; // see "a newer page" below
   const API = '/plugins/signalk-czone';
   const SK = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/signalk/v1/stream?subscribe=none`;
   const categoryIcons = {
@@ -336,6 +403,39 @@
     'User Definable 5', 'Bilge Pumps'
   ];
   const topLevelCategories = new Set(['AC', 'DC', 'Favorites']);
+  // On a Navico chartplotter (see the .mfd styles). The plotter adds
+  // mfd_name, mfd_model_detail, brand, lang and mode to the address.
+  // signalk-navico-embedder, the proxy that puts Signal K webapps on those
+  // plotters, also leaves window.SK_TOKEN on the page; either sign will do.
+  const MFD = /[?&](mfd_name|mfd_model_detail|brand|layout=mfd)\b/.test(location.search) || typeof window.SK_TOKEN === 'string';
+  if (MFD) document.documentElement.classList.add('mfd');
+  // Drawn icons for the plotter, whose fonts lack most of the symbol
+  // characters the desktop page uses (they show as empty boxes there).
+  const MFD_ICONS = {
+    home:'<path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/>', dot:'<circle cx="12" cy="12" r="5" fill="currentColor"/>',
+    star:'<path d="M12 3l2.8 6 6.2.6-4.7 4.2 1.5 6.2L12 16.6 6.2 20l1.5-6.2L3 9.6 9.2 9z"/>',
+    ac:'<path d="M2 12c2.5-9 6-9 8.5 0s6 9 8.5 0"/><path d="M21 12h1"/>', battery:'<rect x="3" y="7" width="16" height="10" rx="2"/><path d="M22 10v4"/>',
+    gauge:'<path d="M4 18a9 9 0 1 1 16 0"/><path d="M12 14l4-6"/>', bolt:'<path d="M13 2L5 14h6l-1 8 8-12h-6z"/>',
+    bulb:'<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5V15h8v-1.5A6 6 0 0 0 12 3z"/>',
+    compass:'<circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5-5 2 2-5z"/>', drop:'<path d="M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z"/>',
+    music:'<path d="M9 18V6l10-2v12"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="16" r="2"/>',
+    fan:'<circle cx="12" cy="12" r="2"/><path d="M12 10c-1-4 1-7 4-7 1 3-1 6-4 7zM13.7 13c4-1 7 1 7 4-3 1-6-1-7-4zM10.3 13c-1 4-4 6-7 5 0-3 3-5 7-5z"/>',
+    chip:'<rect x="7" y="7" width="10" height="10" rx="1"/><path d="M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4"/>',
+    snow:'<path d="M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9"/>', phone:'<path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z"/>',
+    warn:'<path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.500"/>', clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>', plus:'<path d="M12 5v14M5 12h14"/>',
+    gear:'<circle cx="12" cy="12" r="4"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/>',
+    anchor:'<circle cx="12" cy="5" r="2"/><path d="M12 7v14M5 13a7 7 0 0 0 14 0M9 10h6"/>', sun:'<circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>',
+    swap:'<path d="M4 9h15l-3-3M20 15H5l3 3"/>', tank:'<rect x="5" y="6" width="14" height="14" rx="2"/><path d="M5 13h14M9 6V3h6v3"/>',
+    temp:'<path d="M12 3a2 2 0 0 0-2 2v9a4 4 0 1 0 4 0V5a2 2 0 0 0-2-2z"/>', cloud:'<path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1A4.5 4.5 0 0 1 17 18z"/>',
+    toggle:'<rect x="3" y="8" width="18" height="8" rx="4"/><circle cx="8" cy="12" r="2"/>', house:'<path d="M3 11l9-8 9 8"/><path d="M5 10v10h5v-6h4v6h5V10"/>',
+    appliance:'<rect x="5" y="3" width="14" height="18" rx="2"/><circle cx="12" cy="14" r="4"/><path d="M8 6h2"/>'
+  };
+  const MFD_ICON_FOR = { all:'home', inuse:'dot', favorites:'star', ac:'ac', dc:'battery', monitor:'gauge',
+    Lighting:'bulb', Navigation:'compass', Pumps:'drop', 'Bilge Pumps':'drop', Power:'bolt', Entertainment:'music', 'Fans/Ventilation':'fan', Electronics:'chip', Climate:'snow', Refrigeration:'snow',
+    Communications:'phone', 'Vessel Critical':'warn', 'Indicators and Alarms':'warn', '24-Hour Circuits':'clock', Accessories:'plus', 'Engine Management':'gear', 'Vessel Management':'gear',
+    'Propulsion Management':'fan', 'House/Habitat':'house', Appliances:'appliance', 'Deck Equipment':'anchor',
+    Batteries:'battery', Solar:'sun', Alternators:'gear', Converters:'swap', 'Wind Generators':'fan', 'AC Power':'ac', Tanks:'tank', Temperatures:'temp', Environment:'cloud', 'Circuit current':'bolt', Inputs:'toggle' };
+  const mfdIcon = key => `<svg class="ico" viewBox="0 0 24 24">${MFD_ICONS[MFD_ICON_FOR[key]] || MFD_ICONS.dot}</svg>`;
   let circuits = [], status = {}, modes = [], activeMode = null, vesselName = '', view = 'all', category = null, query = '', sort = 'name', socket = null;
   let socketReconnectTimer = null, watchdogTimer = null, lastSocketUpdateAt = 0, socketConnected = false, socketEverOpen = false;
   const WS_WATCHDOG_MS = 120000;
@@ -369,7 +469,7 @@
   const activeCount = () => circuits.filter(stateOf).length;
   const masterCount = m => circuits.filter(c => (categoryData(c).master || []).includes(m)).length;
   const subCategoryList = c => [...new Set([...(categoryData(c).sub || []), ...(categoryData(c).userDefined || [])])];
-  const icon = c => categoryIcons[c] || '•';
+  const icon = c => MFD ? mfdIcon(c) : (categoryIcons[c] || '•');
   const color = c => categoryColors[c] || '#4bb5ff';
 
   function saveFavorites() { localStorage.setItem(favoritesKey, JSON.stringify([...favorites])); }
@@ -382,7 +482,7 @@
       ['all','⌂','All Circuits',circuits.length], ['inuse','●','In Use',activeCount()], ['favorites','☆','Favorites',circuits.filter(c=>favorites.has(nameKey(c))).length],
       ['ac','♆','AC',masterCount('AC')], ['dc','▣','DC',masterCount('DC')]
     ];
-    document.querySelector('#mainNav').innerHTML = items.map(([v,i,t,n]) => `<button class="${view===v && !category?'active':''}" onclick="setView('${v}')"><span class="nav-icon">${i}</span>${t}<span class="nav-count">${n}</span></button>`).join('');
+    document.querySelector('#mainNav').innerHTML = items.map(([v,i,t,n]) => `<button class="${view===v && !category?'active':''}" onclick="setView('${v}')"><span class="nav-icon">${MFD ? mfdIcon(v) : i}</span>${t}<span class="nav-count">${n}</span></button>`).join('');
   }
 
   function renderCategories() {
@@ -412,7 +512,7 @@
     const title = category || ({all:'All Circuits',inuse:'In Use',favorites:'Favorites',ac:'AC Circuits',dc:'DC Circuits',search:'Search Results'}[view] || 'Circuits');
     document.querySelector('#sectionTitle').textContent = title;
     document.querySelector('#sectionCount').textContent = `${list.length} circuit${list.length===1?'':'s'}`;
-    document.querySelector('#sectionIcon').textContent = category ? icon(category) : view==='favorites' ? '☆' : view==='inuse' ? '●' : '⚡';
+    document.querySelector('#sectionIcon').textContent = MFD ? '' : category ? icon(category) : view==='favorites' ? '☆' : view==='inuse' ? '●' : '⚡';
     document.querySelector('#circuits').innerHTML = list.length ? list.map(circuitRow).join('') : `<div class="empty">No circuits match this view.</div>`;
   }
 
@@ -982,6 +1082,7 @@
   function renderModes() {
     const el = document.querySelector('#modes');
     if (!el) return;
+    if (el.parentElement) el.parentElement.classList.toggle('none', !modes.length); // hidden on a plotter when there are none
     if (!modes.length) { el.innerHTML = '<div class="empty" style="padding:10px 4px">No CZone modes found.</div>'; return; }
     el.innerHTML = modes.map(m => {
       const active = activeMode && activeMode.slug === m.slug;
@@ -1025,6 +1126,128 @@
     document.querySelector('#connectionCard').innerHTML = `<div style="color:#a9bfd2;font-size:12px;line-height:1.7"><span style="color:${status.sendingEnabled?'#64e4aa':'#ffcc77'}">● NMEA 2000 sending ${status.sendingEnabled?'enabled':'disabled'}</span><br><span style="color:${readyColor}">● ${readyText}</span>${lastOut}</div>`;
   }
 
+  // Scrolling on a chartplotter. Its touch arrives as mouse events, so a
+  // drag would select text and nothing would scroll. So a press that moves
+  // more than a few pixels scrolls the nearest scrolling box (the list or the
+  // left column). Positions are applied once per frame, and the tap that ends
+  // a drag is not passed on as a click.
+  // The plotter is slow, so redraws caused by live data wait while a finger is
+  // down (see liveRender).
+  let mfdBusyUntil = 0; // no data-driven redraw before this time
+  if (MFD) {
+    let drag = null, swallow = false, frame = 0;
+    const scrollerOf = el => {
+      for (let n = el; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        const oy = getComputedStyle(n).overflowY;
+        if ((oy === 'auto' || oy === 'scroll') && n.scrollHeight > n.clientHeight + 1) return n;
+      }
+      return document.scrollingElement || document.documentElement;
+    };
+    const applyDrag = () => { frame = 0; if (drag && drag.moved) drag.box.scrollTop = drag.want; };
+    document.addEventListener('mousedown', e => {
+      if (e.button !== 0 || (e.target.closest && e.target.closest('input, select, canvas, .ask'))) return;
+      const box = scrollerOf(e.target);
+      drag = { box, y: e.clientY, top: box.scrollTop, want: box.scrollTop, moved: false, held: false };
+      mfdBusyUntil = Date.now() + 1500;
+    }, true);
+    document.addEventListener('mousemove', e => {
+      if (!drag) return;
+      // Released outside the page. Only trusted once this drag has reported a
+      // held button, since some touch layers never report one.
+      if (e.buttons) drag.held = true; else if (drag.held) { endDrag(); return; }
+      const dy = e.clientY - drag.y;
+      if (!drag.moved && Math.abs(dy) < 10) return;
+      drag.moved = true;
+      drag.want = drag.top - dy;
+      mfdBusyUntil = Date.now() + 1500;
+      if (!frame) frame = requestAnimationFrame(applyDrag);
+      e.preventDefault();
+    }, true);
+    function endDrag() {
+      if (drag && drag.moved) { applyDrag(); swallow = true; setTimeout(() => { swallow = false; }, 80); }
+      drag = null;
+      mfdBusyUntil = Date.now() + 400;
+    }
+    document.addEventListener('mouseup', endDrag, true);
+    window.addEventListener('blur', endDrag);
+    document.addEventListener('click', e => { if (swallow) { e.stopPropagation(); e.preventDefault(); swallow = false; } }, true);
+    document.addEventListener('contextmenu', e => e.preventDefault());
+    document.addEventListener('selectstart', e => { if (!(e.target.closest && e.target.closest('input'))) e.preventDefault(); });
+
+    // A newer page. The plotter keeps showing the page it first loaded, even
+    // after the tile is closed and reopened, so an update never appeared
+    // without restarting the plotter. Once a minute the page fetches itself
+    // and, if its own script has changed on the server, reloads. One attempt
+    // per version, so a plotter that will not let go cannot loop.
+    const checkPage = async () => {
+      try {
+        if (!OWN_SCRIPT) return;
+        const r = await fetch(location.pathname + '?fresh=' + Date.now(), { cache: 'no-store', credentials: 'include' });
+        if (!r.ok) return;
+        const text = await r.text();
+        const found = text.split('<scr' + 'ipt>').map(part => part.split('</scr' + 'ipt>')[0]).find(part => part.indexOf("const API = '/plugins/signalk-czone'") >= 0);
+        if (!found || found === OWN_SCRIPT) return;
+        const tried = String(found.length) + ':' + found.slice(-200).length + ':' + found.split('\n').length;
+        let before = null;
+        try { before = sessionStorage.getItem('czone-reload'); sessionStorage.setItem('czone-reload', tried); } catch (_) { return; }
+        if (before !== tried) location.reload(true);
+      } catch (_) {}
+    };
+    setTimeout(checkPage, 15000);
+    setInterval(checkPage, 60000);
+
+    // What the plotter actually sends: five taps on the connection line show
+    // the last input events and how long frames and redraws take. For
+    // diagnosing a plotter we cannot connect a debugger to.
+    let taps = [], probe = null;
+    document.querySelector('#connection').addEventListener('click', () => {
+      const now = Date.now();
+      taps = taps.filter(t => now - t < 3000).concat(now);
+      if (taps.length < 5) return;
+      taps = [];
+      if (probe) { probe.remove(); probe = null; return; }
+      probe = document.createElement('pre');
+      probe.className = 'mfd-probe';
+      document.body.appendChild(probe);
+      const log = [];
+      let last = performance.now(), frames = [];
+      const note = e => {
+        const t = performance.now();
+        log.push(`${String(Math.round(t - last)).padStart(5)} ms  ${e.type.padEnd(11)} b=${e.buttons === undefined ? '-' : e.buttons} ${e.pointerType || ''} ${e.touches ? 't' + e.touches.length : ''} ${e.deltaY !== undefined ? 'dy=' + Math.round(e.deltaY) : ''}`);
+        last = t;
+        if (log.length > 16) log.shift();
+      };
+      for (const type of ['mousedown', 'mousemove', 'mouseup', 'click', 'touchstart', 'touchmove', 'touchend', 'pointerdown', 'pointermove', 'pointerup', 'wheel', 'scroll']) document.addEventListener(type, note, true);
+      // Frame time: the gap between two frames in a row. Redraw: rebuilding the list.
+      const tick = () => {
+        if (!probe) return;
+        requestAnimationFrame(t1 => requestAnimationFrame(t2 => {
+          if (!probe) return;
+          frames.push(t2 - t1);
+          if (frames.length > 10) frames.shift();
+          const t0 = performance.now(); renderCircuits(); const redraw = performance.now() - t0;
+          probe.textContent = `${window.innerWidth}x${window.innerHeight}  frame ${Math.round(frames.reduce((a, b) => a + b, 0) / frames.length)} ms  redraw ${Math.round(redraw)} ms\n${navigator.userAgent.replace(/^.*(Chrome\/[\d.]+).*$/, '$1')}\n` + log.join('\n');
+          setTimeout(tick, 700);
+        }));
+      };
+      tick();
+    });
+  }
+  // A redraw asked for by live data. Anywhere else it runs at once. On a
+  // plotter it waits until no finger is down, and runs at most twice a second.
+  let liveTimer = null, liveLast = 0;
+  function liveRender() {
+    if (!MFD) { render(); return; }
+    if (liveTimer) return;
+    const run = () => {
+      const now = Date.now();
+      const wait = Math.max(mfdBusyUntil - now, liveLast + 500 - now);
+      if (wait > 0) { liveTimer = setTimeout(run, wait); return; }
+      liveTimer = null; liveLast = now; render();
+    };
+    run();
+  }
+
   function render() { renderNav(); renderCategories(); renderCircuits(); renderStats(); renderModes(); renderHero(); }
 
   document.querySelector('#search').addEventListener('input', e => { query=e.target.value.trim(); view=query?'search':'all'; category=null; render(); });
@@ -1094,7 +1317,7 @@
           console.debug('[CZone WS] delta received', { valuesSeen, circuitValues, changed, updateSource: msg.updates.map(u => u.source || null), updateTimestamp: msg.updates.map(u => u.timestamp || null), timestamp: new Date(lastSocketUpdateAt).toISOString() });
           updateSocketIndicator(circuitValues ? 'Connected · CZone updates live' : 'Connected · WebSocket live', true);
           scheduleWatchdog();
-          if (changed) render();
+          if (changed) liveRender();
         } catch (e) { console.debug('[CZone WS] message parse error', e); }
       };
       socket.onclose = () => {