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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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.

package/README.md

@@ -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.12",
+  "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": [

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';

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"
+    }
+  ]
+}