signalk-czone 0.3.0-beta.11 → 0.3.0-beta.13

package/CHANGELOG.md

@@ -1,7 +1,19 @@
 # Changelog
 
+## 0.3.0-beta.13
+
+- Adds a fullscreen icon beside the CZone / Boat Systems branding, with expand/collapse states and accessible labels.
+- Adds standalone tablet home-screen launch assets and safe-area spacing.
+- Documents signalk-ssl setup, trusted CA certificate installation and device reboot steps for HTTPS app launch.
+
+## 0.3.0-beta.12
+
+- Keeps the connection indicator disconnected when circuit-list REST refreshes succeed but the live WebSocket is down; shows connecting/reconnecting status and the snapshot time.
+
 ## 0.3.0-beta.11
 
+- Uses the npm `latest` tag for default installation and App Store updates while retaining the BETA version and listing labels.
+
 - Routes circuit current to known physical output owners instead of groups referencing those outputs, restoring Starlink current and correcting Port Fresh Water Pump and Meitaki Nav. AIS attribution.
 - Preserves existing current mappings when output ownership is ambiguous and adds regression coverage across all six ZCF fixtures.
 

package/README.md

@@ -208,15 +208,15 @@ Once this beta is published and available in your App Store:
 3. Open **Server → Plugin Config → CZone** and use **Upload and install ZCF** to upload your vessel's `.zcf` configuration.
 4. Enable the plugin after configuration, then check the **Diagnostics** tab and published currents before testing controls.
 
-The plugin is disabled by default until explicitly enabled. Availability of beta versions in the App Store depends on the server version and publication channel.
+The plugin is disabled by default until explicitly enabled. Tested releases use the npm `latest` tag for default installation and Signal K App Store discovery; the version and listing retain their BETA labels.
 
-### Explicit npm beta installation
+### Explicit npm installation
 
 After npm publication, run this as the Signal K service user from the server's configuration directory (normally `~/.signalk`, or the directory configured by `SIGNALK_NODE_CONFIG_DIR`):
 
 ```bash
 cd ~/.signalk
-npm install signalk-czone@beta --omit=dev --ignore-scripts
+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.
@@ -225,9 +225,9 @@ For installation from a maintainer-provided npm tarball, run `npm install /path/
 
 ### 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 beta` after npm authentication.
+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.
 
-The package defaults to the `beta` tag. Promoting a beta to `latest` for default installs is a separate release decision.
+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.
 
 ### Beta feedback
 
@@ -423,3 +423,34 @@ Only the installed path is stored in plugin configuration; the binary ZCF is not
 - **0.3.0-beta.5** — added explicit AC/DC source classification for downstream telemetry storage while retaining stable circuit-name paths and the diagnostics/status tooling.
 
 The beta is intended for extended real-world testing before a stable `0.3.0` release.
+
+## Fullscreen and tablet home-screen launch
+
+Open `/signalk-czone/` directly in your browser. The **fullscreen icon** beside
+the CZone / Boat Systems branding enters fullscreen; tap the icon again or use the browser's exit gesture
+(or Escape on desktop) to leave. It appears only when the browser exposes the
+fullscreen API. Embedded views may need permission from their parent page.
+
+For a home-screen launch, open the app over **trusted HTTPS**, then use your
+browser's **Install app** / **Add to Home Screen** option (Safari: Share → Add to
+Home Screen). Compatible browsers launch CZone in standalone mode without the
+usual address bar. Installation and fullscreen support vary by device/browser.
+The manifest uses relative URLs, so it follows your server's hostname and port;
+no boat IP address is hard-coded. Plain HTTP on a LAN IP may only offer a shortcut.
+
+### Set up HTTPS for a full-screen app
+
+To launch CZone from the tablet or device's home screen without the URL bar and
+browser controls, first set up trusted HTTPS on your Signal K server:
+
+1. Install and configure the **signalk-ssl** plugin.
+2. In Signal K **Server Settings**, turn on the **Use SSL** toggle and apply the settings. Restart Signal K if prompted.
+3. On each tablet or device, download the server's CA certificate (`ca.crt`). For example: [https://einstein.local:3443/signalk-ssl/ca.crt](https://einstein.local:3443/signalk-ssl/ca.crt). Replace `einstein.local` and port `3443` with your server's hostname and HTTPS port.
+4. Import/install `ca.crt` as a trusted CA certificate in the device's certificate settings. Enable trust for the certificate if the device requires a separate step.
+5. After the certificate installs successfully, you will most likely need to **reboot the tablet or device** before the browser recognises it.
+6. Open CZone over HTTPS, for example [https://einstein.local:3443/signalk-czone/](https://einstein.local:3443/signalk-czone/), and check that the browser trusts the connection. Use **Install app** / **Add to Home Screen**, then launch CZone from its new home-screen icon.
+
+Certificate installation and app installation menus vary by device and browser.
+
+The app still needs a live Signal K connection. No offline caching or service
+worker is installed, and installing it does not grant circuit-write permission.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-czone",
-  "version": "0.3.0-beta.11",
+  "version": "0.3.0-beta.13",
   "description": "BETA: Signal K CZone monitoring and control using dynamically parsed ZCF configuration and NMEA 2000",
   "main": "index.js",
   "keywords": [
@@ -57,6 +57,6 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "latest"
   }
 }

package/public/fullscreen.js

@@ -0,0 +1,36 @@
+/* Fullscreen is optional: the ordinary page and home-screen launch work without it. */
+(() => {
+  const button = document.getElementById('fullscreenToggle');
+  const root = document.documentElement;
+  const request = root.requestFullscreen || root.webkitRequestFullscreen;
+  const exit = document.exitFullscreen || document.webkitExitFullscreen;
+  const enabled = document.fullscreenEnabled ?? document.webkitFullscreenEnabled;
+  if (!button || !request || !exit || enabled === false) return;
+
+  const current = () => document.fullscreenElement || document.webkitFullscreenElement;
+  const update = () => {
+    const active = !!current();
+    const label = active ? 'Exit fullscreen' : 'Show CZone fullscreen';
+    button.setAttribute('aria-label', label);
+    button.setAttribute('aria-pressed', String(active));
+    button.title = label;
+  };
+  button.hidden = false;
+  update();
+  document.addEventListener('fullscreenchange', update);
+  document.addEventListener('webkitfullscreenchange', update);
+  button.addEventListener('click', async () => {
+    button.disabled = true;
+    try {
+      // Invoke directly in the tap handler; browsers require user activation.
+      if (current()) await exit.call(document);
+      else await request.call(root);
+    } catch (error) {
+      console.warn('[CZone UI] Fullscreen unavailable', error);
+      alert('Fullscreen is unavailable in this browser or embedded view. Try opening CZone directly in a browser, or adding it to your home screen.');
+    } finally {
+      button.disabled = false;
+      update();
+    }
+  });
+})();

package/public/index.html

@@ -5,7 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#071321">
   <link rel="icon" type="image/png" href="icon.png">
-  <link rel="apple-touch-icon" href="icon.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="CZone">
   <title>CZone Circuits</title>
   <style>
     :root {
@@ -39,7 +42,16 @@
     .sidebar, .rightbar { background: rgba(5, 16, 29, .78); backdrop-filter: blur(18px); border-color: var(--line); }
     .sidebar { border-right: 1px solid var(--line); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
     .rightbar { border-left: 1px solid var(--line); padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
-    .brand { display:flex; align-items:center; gap:11px; padding: 2px 10px 25px; }
+    .brand { display:flex; flex-wrap:nowrap; align-items:center; gap:11px; padding: 2px 10px 25px; }
+    .fullscreen-toggle { margin-left:auto; flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; padding:10px; border:1px solid rgba(56,169,255,.25); border-radius:12px; background:linear-gradient(145deg,rgba(24,213,232,.12),rgba(56,169,255,.05)); color:var(--cyan); cursor:pointer; transition:background .15s, border-color .15s; }
+    .fullscreen-toggle:hover { background:rgba(24,213,232,.18); border-color:var(--cyan); }
+    .fullscreen-toggle:disabled { opacity:.55; cursor:wait; }
+    .fullscreen-toggle svg { width:22px; height:22px; }
+    .fullscreen-toggle .fullscreen-collapse, .fullscreen-toggle[aria-pressed="true"] .fullscreen-expand { display:none; }
+    .fullscreen-toggle[aria-pressed="true"] .fullscreen-collapse { display:inline; }
+    .fullscreen-toggle[hidden] { display:none; }
+    .fullscreen-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
+    body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
     .brand-mark { width:38px; height:38px; display:block; object-fit:contain; border-radius:10px; box-shadow: 0 8px 25px rgba(31,154,255,.24); }
     .brand strong { display:block; font-size:17px; letter-spacing:.2px; }
     .brand span { color:var(--muted); font-size:12px; }
@@ -225,7 +237,12 @@
   <div class="app">
     <div class="leftwell">
     <aside class="sidebar">
-      <div class="brand"><img class="brand-mark" src="icon.png" alt="CZone" width="38" height="38"><div><strong>CZone</strong><span>Boat Systems</span></div></div>
+      <div class="brand"><img class="brand-mark" src="icon.png" alt="CZone" width="38" height="38"><div><strong>CZone</strong><span>Boat Systems</span></div><button id="fullscreenToggle" class="fullscreen-toggle" type="button" aria-label="Show CZone fullscreen" title="Show CZone fullscreen" aria-pressed="false" hidden>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+          <path class="fullscreen-expand" d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/>
+          <path class="fullscreen-collapse" d="M3 8h5V3m8 0v5h5M8 21v-5H3m18 0h-5v5"/>
+        </svg>
+      </button></div>
       <div class="nav" id="mainNav"></div>
       <div class="separator"></div>
       <div class="section-label">Categories</div>
@@ -260,6 +277,7 @@
     </main>
 
   </div>
+<script src="fullscreen.js"></script>
 <script>
 (() => {
   const API = '/plugins/signalk-czone';
@@ -293,7 +311,7 @@
   ];
   const topLevelCategories = new Set(['AC', 'DC', 'Favorites']);
   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;
+  let socketReconnectTimer = null, watchdogTimer = null, lastSocketUpdateAt = 0, socketConnected = false, socketEverOpen = false;
   const WS_WATCHDOG_MS = 120000;
   const COMMAND_CONFIRM_MS = 15000;
   const COMMAND_RECONCILE_DELAY_MS = 200;
@@ -565,8 +583,16 @@
       console.debug('[CZone UI] REST refresh', reason, { circuits: incoming.length, modes: Array.isArray(data.modes) ? data.modes.length : 0, sendingEnabled: data.sendingEnabled === true, nmeaReady: data.nmeaReady === true });
       mergeRest(data);
       if (incoming.length === 0) throw new Error('CZone plugin returned an empty circuit list');
-      document.querySelector('#connection').classList.add('ok');
-      document.querySelector('#connection').innerHTML = '<i></i><span>Connected · live circuit data</span>';
+      // "Connected" only while the live feed is up. This read is a one-off
+      // (first load, or the watchdog's reconciliation): with the feed down
+      // the page would otherwise say Connected while nothing on it moves.
+      const conn = document.querySelector('#connection');
+      conn.classList.toggle('ok', socketConnected);
+      conn.innerHTML = socketConnected
+        ? '<i></i><span>Connected · live circuit data</span>'
+        : socketEverOpen
+          ? `<i></i><span>Live updates lost · reconnecting… (circuits as of ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })})</span>`
+          : '<i></i><span>Circuits loaded · connecting live updates…</span>';
       render();
       return true;
     } catch (e) {
@@ -1018,6 +1044,7 @@
       socket = new WebSocket(SK);
       socket.onopen = () => {
         socketConnected = true;
+        socketEverOpen = true;
         lastSocketUpdateAt = Date.now();
         updateSocketIndicator('Connected · WebSocket live', true);
         sendSubscriptions();
@@ -1046,7 +1073,7 @@
       };
       socket.onclose = () => {
         socketConnected = false;
-        updateSocketIndicator('Reconnecting to Signal K…', false);
+        updateSocketIndicator(socketEverOpen ? 'Live updates lost · reconnecting…' : 'Connecting live updates…', false);
         console.warn('[CZone WS] closed; reconnecting');
         clearTimeout(socketReconnectTimer);
         socketReconnectTimer = setTimeout(connectSocket, 3000);

package/public/manifest.webmanifest

@@ -0,0 +1,25 @@
+{
+  "id": "./",
+  "name": "CZone Boat Systems",
+  "short_name": "CZone",
+  "description": "Monitor and control your boat\u2019s CZone electrical systems through Signal K.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#06101d",
+  "theme_color": "#071321",
+  "icons": [
+    {
+      "src": "icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}