signalk-czone 0.3.0-beta.19 → 0.3.0-beta.21

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.3.0-beta.21
+
+- Includes ZCF Favorites in the circuit favorites list, counts and stars by default. Browser additions and removals persist as local overrides across reloads and ZCF updates.
+
+## 0.3.0-beta.20
+
+- Shows individual monitoring readings as live for three minutes, then keeps their last values dimmed with their age; distinguishes stale rows from no data (#38, thanks @superstar76).
+- Reconstructs earlier DC power trends from recorded voltage and current while preserving directly recorded power history.
+
 ## 0.3.0-beta.19
 
 - Adds opt-in Monitoring for meters, tanks, temperatures, humidity, pressure and switch inputs, with expanded trends and circuit temperature chips (#36, thanks @superstar76).

package/README.md

@@ -202,7 +202,7 @@ Off by default: tick **Show the Monitoring tab** in the configuration panel to t
 | Environment | pressure senders | 130314 |
 | Inputs | switch inputs | (see Switch inputs) |
 
-A reading is matched by the NMEA 2000 instance set in the Configuration Tool, and the temperature or pressure source or tank fluid type. Each row says **LIVE**, or **NOT ON BUS** with the instance nothing is sending ("Nothing is sending instance 3 on NMEA 2000"), which is the number to set on the sending device. NMEA 2000 "not available" values are never shown as readings.
+A reading is matched by the NMEA 2000 instance set in the Configuration Tool, and the temperature or pressure source or tank fluid type. Each reading is **LIVE** while it has updated in the last 3 minutes. After that its last value stays, dimmed, with its age ("Charge · 5 min ago"), counting up; a row with nothing live says when it was last updated. A row that has never had a reading says **No data received** with its instance ("No data received · instance 3"), which is the number to set on the sending device. NMEA 2000 "not available" values are never shown as readings.
 
 **Which device.** Instances are not unique across devices: a Victron charger sends a battery status on the battery's instance as well as the shunt, and a wired meter can share an instance with another device. So each reading comes from one device:
 
@@ -211,7 +211,7 @@ A reading is matched by the NMEA 2000 instance set in the Configuration Tool, an
 3. A third-party DC meter: where devices say what they are (127506), only one of the meter's DC type is used, and for a battery one that reports a state of charge beats one that does not, so a shunt beats a charger. Ties go to the lowest address, so the choice is the same after a restart.
 4. Otherwise the first device heard keeps the reading until it has been quiet for two minutes.
 
-Values are published under `electrical.czone.monitoring.<name>.*`, as the meters already were: `voltage`, `current`, `power`, `capacity.stateOfCharge`, `frequency`, `temperature`, `relativeHumidity`, `pressure`, `currentLevel`, `currentVolume`, `capacity`. **DC power** (watts) is volts × amps of the same 127508 message, so solar, alternator and wind output can be seen and trended.
+Values are published under `electrical.czone.monitoring.<name>.*`, as the meters already were: `voltage`, `current`, `power`, `capacity.stateOfCharge`, `frequency`, `temperature`, `relativeHumidity`, `pressure`, `currentLevel`, `currentVolume`, `capacity`. **DC power** (watts) is volts × amps of the same 127508 message, so solar, alternator and wind output can be seen and trended. Its trend goes back as far as the meter's volts and amps: before power was first recorded, the chart works it out from them (the latest of each at that time; for long periods, from their averages, with the band from their ranges). Where power itself was recorded, those exact figures are used.
 
 **Senders bridged onto NMEA 2000 by the same machine.** Signal K does not pass a plugin its own transmissions, or a GX's:
 
@@ -548,3 +548,7 @@ 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.
+
+### Circuit favorites
+
+Circuits marked Favorites in the loaded ZCF appear as favorites by default. The star buttons customize favorites for the current browser: you can add other circuits or hide a ZCF favorite. These choices survive browser and server restarts and apply when the ZCF is reloaded or updated. They are stored in browser site data, do not change the ZCF, and are independent on each browser/device. Clearing site data restores the ZCF defaults.

package/index.js

@@ -10,6 +10,7 @@ const monitoring = require('./lib/monitoring')
 const sensors = require('./lib/sensors')
 const { createCandump, PGNS: CANDUMP_PGNS } = require('./lib/candump')
 const { createSourcePicker } = require('./lib/sources')
+const { powerHistory } = require('./lib/power-history')
 const { createTrends } = require('./lib/trends')
 const signalk = require('./lib/signalk')
 const confirmOffLib = require('./lib/confirm-off')
@@ -24,7 +25,9 @@ const CZONE_CONFIG_BLOCK_SIZE = 200
 const CZONE_CONFIG_READ_TIMEOUT_MS = 45000
 const PLUGIN_ID = 'signalk-czone'
 // A monitored value older than this is no longer live (NOT ON BUS).
-const MONITOR_LIVE_MS = 120e3
+// A reading is LIVE while it has updated within this long; after that it is
+// shown dimmed with its age ("Updated 5 min ago").
+const MONITOR_LIVE_MS = 180e3
 // A circuit's temperature is dropped after this long without a reading.
 const TEMPERATURE_STALE_MS = 300e3
 const MONITOR_GROUPS = { battery: 'Batteries', solar: 'Solar', alternator: 'Alternators', converter: 'Converters', wind: 'Wind Generators' }
@@ -1027,7 +1030,7 @@ module.exports = function (app) {
     const now = Date.now()
     const reading = (path, field) => {
       const v = monitorValues.get(path)
-      return { field, path, value: v ? v.value : null, at: v ? new Date(v.at).toISOString() : null, live: !!v && now - v.at < MONITOR_LIVE_MS }
+      return { field, path, value: v ? v.value : null, at: v ? new Date(v.at).toISOString() : null, ageMs: v ? now - v.at : null, live: !!v && now - v.at < MONITOR_LIVE_MS }
     }
     const item = (group, kind, x, fields) => {
       const readings = fields.filter(f => x.signalK[f]).map(f => reading(x.signalK[f], f))
@@ -1727,7 +1730,13 @@ module.exports = function (app) {
         if (!trends) return res.json({ available: false, reason: 'not_started', data: [] })
         const q = req.query
         const custom = q.from !== undefined && q.to !== undefined
-        res.json(trends.read(skPath, custom ? { from: Number(q.from), to: Number(q.to) } : q.range))
+        const range = custom ? { from: Number(q.from), to: Number(q.to) } : q.range
+        // A DC meter's power: before it was first recorded, worked out from
+        // the meter's recorded volts and amps (lib/power-history).
+        const m = /^electrical\.czone\.monitoring\.(.+)\.power$/.exec(skPath)
+        const meter = m && monitoringRuntime ? monitoringRuntime.meters.find(x => x.slug === m[1] && x.type === 'DC') : null
+        if (meter) return res.json(powerHistory(trends.read(skPath, range), trends.read(meter.signalK.voltage, range), trends.read(meter.signalK.current, range)))
+        res.json(trends.read(skPath, range))
       })
 
       router.get('/trend/status', (_req, res) => {

package/lib/power-history.js

@@ -0,0 +1,66 @@
+'use strict'
+
+// DC power history for a chart.
+//
+// Live DC power is volts x amps of one 127508 message (lib/monitoring), and
+// it is recorded like any other value. Before it was recorded (it is new in
+// 0.3.0-beta.19) the meter's volts and amps were already being recorded, so
+// the chart works that earlier part out from them:
+//   - each point is volts x amps, the latest of each at that time, as long as
+//     neither is older than the gap the chart allows;
+//   - for summarised periods (rows of [t, average, min, max]) the value is
+//     the product of the averages and the band is the range the two bands
+//     allow, so it is close but not exact.
+// Wherever power itself was recorded, those exact figures are used.
+//
+// Inputs and output are the trend store's read() results:
+//   { available, data: [[t, value]] or [[t, avg, min, max]], gapMs, ... }
+
+const round1 = v => Math.round(v * 10) / 10
+const low = row => (row.length > 2 && row[2] !== null ? row[2] : row[1])
+const high = row => (row.length > 3 && row[3] !== null ? row[3] : row[1])
+
+// volts x amps, for times before `until` (ms; Infinity = all).
+function multiply (volts, amps, until = Infinity) {
+  const v = (volts && volts.data) || []
+  const a = (amps && amps.data) || []
+  const gap = Math.max(volts.gapMs || 0, amps.gapMs || 0) || 16 * 60e3
+  const times = [...new Set([...v.map(r => r[0]), ...a.map(r => r[0])])].filter(t => t < until).sort((x, y) => x - y)
+  const out = []
+  let i = 0
+  let j = 0
+  let rv = null
+  let ra = null
+  for (const t of times) {
+    while (i < v.length && v[i][0] <= t) rv = v[i++]
+    while (j < a.length && a[j][0] <= t) ra = a[j++]
+    if (!rv || !ra || t - rv[0] > gap || t - ra[0] > gap) continue
+    if (rv.length > 2 || ra.length > 2) {
+      const corners = [low(rv) * low(ra), low(rv) * high(ra), high(rv) * low(ra), high(rv) * high(ra)]
+      out.push([t, round1(rv[1] * ra[1]), round1(Math.min(...corners)), round1(Math.max(...corners))])
+    } else {
+      out.push([t, round1(rv[1] * ra[1])])
+    }
+  }
+  return out
+}
+
+// power, volts, amps: read() results for the same range.
+function powerHistory (power, volts, amps) {
+  if (!power || !power.available || power.error) return power
+  if (!volts || !volts.available || !amps || !amps.available) return power
+  const recorded = Array.isArray(power.data) ? power.data : []
+  const first = recorded.length ? recorded[0][0] : Infinity
+  const before = multiply(volts, amps, first)
+  if (!before.length) return power
+  return {
+    ...power,
+    data: before.concat(recorded),
+    points: before.length + recorded.length,
+    gapMs: Math.max(power.gapMs || 0, volts.gapMs || 0, amps.gapMs || 0) || undefined,
+    // Up to here the figures are worked out from volts x amps.
+    computedUntil: before[before.length - 1][0]
+  }
+}
+
+module.exports = { powerHistory, multiply }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-czone",
-  "version": "0.3.0-beta.19",
+  "version": "0.3.0-beta.21",
   "description": "BETA: Signal K CZone monitoring and control using dynamically parsed ZCF configuration and NMEA 2000",
   "main": "index.js",
   "keywords": [
@@ -42,7 +42,7 @@
     "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/sensors.test.js && node test/monitoring-plugin.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/webapp-auth.test.js && node test/webapp-monitoring.test.js && node test/bridge.test.js && node test/victron-switches.test.js && node test/victron-label-steady.test.js && node test/switch-pane-plugin.test.js && node test/trends.test.js && node test/inputs.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/sensors.test.js && node test/monitoring-plugin.test.js && node test/power-history.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/webapp-favorites.test.js && node test/webapp-auth.test.js && node test/webapp-monitoring.test.js && node test/bridge.test.js && node test/victron-switches.test.js && node test/victron-label-steady.test.js && node test/switch-pane-plugin.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": "0.1.0-beta.2"

package/public/index.html

@@ -118,6 +118,9 @@
     .mon-val.on { border-color:rgba(46,213,115,.55); background:rgba(46,213,115,.12); }
     .mon-live { margin-left:10px; font-size:10px; font-weight:700; letter-spacing:.6px; color:#2ed573; white-space:nowrap; }
     .mon-row.off .mon-live { color:#ffb84d; }
+    /* A reading that has not updated for 3 minutes: dimmed, with its age. */
+    .mon-val.stale { opacity:.55; }
+    .mon-val.stale small { color:#ffb84d; }
     .temp-chip { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:9px; border:1px solid rgba(24,213,232,.35); background:rgba(24,213,232,.08); color:var(--cyan); font:inherit; font-size:11px; font-weight:600; vertical-align:1px; }
     button.temp-chip { cursor:pointer; }
     @media (max-width: 600px) {
@@ -500,6 +503,10 @@
   const favoritesKey = 'signalk-czone-circuits:favorites';
   let favorites = new Set(JSON.parse(localStorage.getItem(favoritesKey) || '[]'));
 
+  // ZCF favorites are defaults; browser choices can add or hide them locally.
+  const hiddenFavoritesKey = `${favoritesKey}:hidden`;
+  let hiddenFavorites = new Set(JSON.parse(localStorage.getItem(hiddenFavoritesKey) || '[]'));
+
   const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
   const nameKey = c => c.slug || c.name;
   const stateOf = c => c.state && c.state.state === 'ON';
@@ -510,6 +517,7 @@
     return current != null && current > 0 ? `${current.toFixed(1)} A` : null;
   };
   const categoryData = c => c.categories || { master: [], sub: [], userDefined: [] };
+  const isFavorite = c => !hiddenFavorites.has(nameKey(c)) && (favorites.has(nameKey(c)) || (categoryData(c).master || []).includes('Favorites'));
   const allCategories = c => [...(categoryData(c).master || []), ...(categoryData(c).sub || []), ...(categoryData(c).userDefined || [])];
   const catList = () => {
     const assigned = new Set(circuits.flatMap(allCategories).filter(c => !topLevelCategories.has(c)));
@@ -524,14 +532,17 @@
   const icon = c => MFD ? mfdIcon(c) : (categoryIcons[c] || '•');
   const color = c => categoryColors[c] || '#4bb5ff';
 
-  function saveFavorites() { localStorage.setItem(favoritesKey, JSON.stringify([...favorites])); }
+  function saveFavorites() {
+    localStorage.setItem(favoritesKey, JSON.stringify([...favorites]));
+    localStorage.setItem(hiddenFavoritesKey, JSON.stringify([...hiddenFavorites]));
+  }
   function setView(v) { view=v; category=null; render(); if (v === 'monitor') { monitorLastFetch = 0; refreshMonitoring(); } }
   function setCategory(c) { category=c; view='category'; render(); }
   window.setView = setView; window.setCategory = setCategory;
 
   function renderNav() {
     const items = [
-      ['all','⌂','All Circuits',circuits.length], ['inuse','●','In Use',activeCount()], ['favorites','☆','Favorites',circuits.filter(c=>favorites.has(nameKey(c))).length],
+      ['all','⌂','All Circuits',circuits.length], ['inuse','●','In Use',activeCount()], ['favorites','☆','Favorites',circuits.filter(isFavorite).length],
       ['ac','♆','AC',masterCount('AC')], ['dc','▣','DC',masterCount('DC')]
     ];
     if (monitor.items.length) items.push(['monitor','◔','Monitoring',monitor.items.length]);
@@ -549,7 +560,7 @@
     let list = circuits.filter(c => {
       if (c.showInCircuitList === false) return false;
       if (view==='inuse' && !stateOf(c)) return false;
-      if (view==='favorites' && !favorites.has(nameKey(c))) return false;
+      if (view==='favorites' && !isFavorite(c)) return false;
       if (view==='ac' && !(categoryData(c).master || []).includes('AC')) return false;
       if (view==='dc' && !(categoryData(c).master || []).includes('DC')) return false;
       if (category && !allCategories(c).includes(category)) return false;
@@ -589,12 +600,26 @@
     showTrend({ path, title: decodeURIComponent(name), r: readingFor(item, field) });
   };
 
+  // How long ago a reading arrived: its age when fetched (by the server's
+  // clock, so a tablet or plotter with the wrong time does not matter), plus
+  // the time since. It counts up as the tab refreshes.
+  function monitorAge(ageMs) {
+    const ms = ageMs + (monitor.fetchedAt ? Date.now() - monitor.fetchedAt : 0);
+    const min = Math.floor(ms / 60000);
+    if (min < 60) return `${Math.max(1, min)} min ago`;
+    const h = Math.floor(min / 60);
+    if (h < 24) return `${h} h ${min % 60} min ago`;
+    return `${Math.floor(h / 24)} d ago`;
+  }
+
   function monitorValue(item, r) {
     const u = readingFor(item, r.field);
-    const box = `<b>${u.f(r.value).toFixed(u.dp)}</b><i>${u.unit}</i><small>${u.label}</small>`;
+    const stale = r.live === false && Number.isFinite(r.ageMs);
+    const box = `<b>${u.f(r.value).toFixed(u.dp)}</b><i>${u.unit}</i><small>${stale ? `${u.label} · ${monitorAge(r.ageMs)}` : u.label}</small>`;
+    const cls = `mon-val${stale ? ' stale' : ''}`;
     return monitor.trendsEnabled && r.field !== 'capacity'
-      ? `<button type="button" class="mon-val" title="${u.label} trend" onclick="openSeries('${encodeURIComponent(r.path)}','${encodeURIComponent(item.name)}','${r.field}')">${box}</button>`
-      : `<div class="mon-val">${box}</div>`;
+      ? `<button type="button" class="${cls}" title="${u.label} trend" onclick="openSeries('${encodeURIComponent(r.path)}','${encodeURIComponent(item.name)}','${r.field}')">${box}</button>`
+      : `<div class="${cls}">${box}</div>`;
   }
 
   function monitorRow(item) {
@@ -603,11 +628,18 @@
       values = item.state === null ? '' : `<div class="mon-val ${item.state ? 'on' : ''}"><b>${item.state ? 'ON' : 'OFF'}</b><small>Switch input</small></div>`;
       sub = item.decoded === false ? 'This kind of module is not read yet' : item.live ? (item.since ? `Since ${new Date(item.since).toLocaleTimeString([], { hour:'2-digit', minute:'2-digit' })}` : 'Switch input') : 'No status from its module yet';
     } else {
-      values = item.live ? item.readings.map(r => monitorValue(item, r)).join('') : '';
-      if (item.live && item.capacity) values += `<div class="mon-val"><b>${Math.round(item.capacity * 1000)}</b><i>L</i><small>Capacity</small></div>`;
-      sub = item.live ? `Instance ${item.instance}${item.thirdParty ? ' · third-party' : ''}` : `Nothing is sending instance ${item.instance} on NMEA 2000`;
+      // LIVE while a reading updated in the last 3 minutes; older readings
+      // dimmed with their age; "No data received" when nothing has arrived.
+      values = item.readings.map(r => monitorValue(item, r)).join('');
+      if (item.readings.length && item.capacity) values += `<div class="mon-val${item.live ? '' : ' stale'}"><b>${Math.round(item.capacity * 1000)}</b><i>L</i><small>Capacity</small></div>`;
+      const ages = item.readings.map(r => r.ageMs).filter(Number.isFinite);
+      const where = `instance ${item.instance}${item.thirdParty ? ' · third-party' : ''}`;
+      sub = item.live ? `Instance ${item.instance}${item.thirdParty ? ' · third-party' : ''}`
+        : ages.length ? `Updated ${monitorAge(Math.min.apply(null, ages))} · ${where}`
+        : `No data received · ${where}`;
     }
-    return `<div class="mon-row ${item.live ? '' : 'off'}"><div class="circuit-name"><strong>${esc(item.name)}</strong><small>${esc(sub)}</small></div><div class="mon-values">${values}</div><span class="mon-live">${item.live ? 'LIVE' : 'NOT ON BUS'}</span></div>`;
+    const badge = item.live ? 'LIVE' : (item.kind !== 'input' && item.readings.length ? 'NOT LIVE' : 'NO DATA');
+    return `<div class="mon-row ${item.live ? '' : 'off'}"><div class="circuit-name"><strong>${esc(item.name)}</strong><small>${esc(sub)}</small></div><div class="mon-values">${values}</div><span class="mon-live">${badge}</span></div>`;
   }
 
   function renderMonitoring() {
@@ -637,7 +669,7 @@
       const data = await r.json();
       const chips = () => JSON.stringify(Object.keys(monitor.temperatures).map(k => [k, monitor.temperatures[k].kelvin.toFixed(1)]).concat([monitor.items.length, monitor.trendsEnabled]));
       const before = chips();
-      monitor = { items: Array.isArray(data.items) ? data.items : [], temperatures: data.temperatures || {}, trendsEnabled: data.trendsEnabled === true };
+      monitor = { items: Array.isArray(data.items) ? data.items : [], temperatures: data.temperatures || {}, trendsEnabled: data.trendsEnabled === true, fetchedAt: Date.now() };
       if (view === 'monitor' && !category) { renderMonitoring(); renderNav(); }
       else if (chips() !== before) render(); // only when a chip or the tab changed: a redraw would cut short a slider being moved
     } catch (_) { /* the next round tries again */ }
@@ -652,7 +684,7 @@
   }
 
   function circuitRow(c) {
-    const on = stateOf(c), pct = percentOf(c), current = currentLabel(c), dim = !!(c.capabilities && c.capabilities.dimmer), fav = favorites.has(nameKey(c));
+    const on = stateOf(c), pct = percentOf(c), current = currentLabel(c), dim = !!(c.capabilities && c.capabilities.dimmer), fav = isFavorite(c);
     const p = pending.get(nameKey(c));
     const cats = subCategoryList(c).slice(0,3).map(x => `<span class="tag cat" role="img" tabindex="0" style="--cat:${color(x)}" title="${esc(x)}" aria-label="${esc(x)} category">${icon(x)}</span>`).join('');
     const disabled = p && p.kind === 'state';
@@ -1060,7 +1092,19 @@
     }
     putSignalK(signalKPath(c, 'brightness'), requested / 100, c, 'brightness', requested, previous);
   };
-  window.toggleFavorite = key => { favorites.has(key) ? favorites.delete(key) : favorites.add(key); saveFavorites(); render(); };
+  window.toggleFavorite = key => {
+    const circuit = circuits.find(c => nameKey(c) === key);
+    if (!circuit) return;
+    if (isFavorite(circuit)) {
+      favorites.delete(key);
+      hiddenFavorites.add(key);
+    } else {
+      hiddenFavorites.delete(key);
+      favorites.add(key);
+    }
+    saveFavorites();
+    render();
+  };
 
   // ---- Trends ---------------------------------------------------------------
   // The arrow at the end of a row opens that circuit's current over time, at
@@ -1375,7 +1419,7 @@
   }
 
   function renderStats() {
-    const on=activeCount(), total=circuits.length, fav=circuits.filter(c=>favorites.has(nameKey(c))).length;
+    const on=activeCount(), total=circuits.length, fav=circuits.filter(isFavorite).length;
     document.querySelector('#stats').innerHTML = `<div class="stat"><div class="stat-icon">⚡</div><div><strong>${total}</strong><span>Total Circuits</span></div></div><div class="stat"><div class="stat-icon">●</div><div><strong>${on}</strong><span>In Use</span></div></div><div class="stat"><div class="stat-icon">○</div><div><strong>${total-on}</strong><span>Off</span></div></div><div class="stat"><div class="stat-icon">★</div><div><strong>${fav}</strong><span>Favorites</span></div></div>`;
     const n2kReady = status.nmeaReady === true;
     const readyColor = n2kReady ? '#64e4aa' : '#ffcc77';