@rhizomatics/signalk-einklabel-plugin 0.4.7 → 0.5.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# 0.5.1
+- Work around `resvg-wasm` font limitations by overriding generic font family with matching font name prior to rendering
+# 0.5.0
+## Font Handling
+- Update set of built-in fonts for consistent Roboto monospace and serif
+- Update `tide.svg` template to use explicit font names to work around `resvg-wasm` limitations
+## Offline Design
+- Offline template development now possible using example data,
+  - Pass `-e` or `--example-data` as a CLI argument, pointing to a set of example JSON files
+  - Examples of example data provided in plugin and at https://github.com/rhizomatics/signalk-einklabel-plugin/blob/main/examples
+  - Works with `render`,`paint`,`field` and `fields`
 # 0.4.7
 - Fix node-ble imports
 # 0.4.6

package/README.md

@@ -10,13 +10,26 @@ Since they are designed to be used in large quantity in small shops, they are ch
 
 Unlike some eInk projects, this plugin doesn't require any physical modification to the labels, or loading any new firmware. It can send an image to a supported shelf label fresh out of the box.
 
+## Installation
+
+Look for **eInk Label Instrument** in the [SignalK AppStore]() on your
+server ( under *Apps & Plugins* on the latest version).
+
+### Using Outside of SignalK
+
+The plugin can also be installed as a stand-alone module, which can be useful for designing templates away from the boat, and makes available the `esl-cli` command line tool for scanning devices and debugging templates.
+
+```bash
+npm install @rhizomatics/signalk-einklabel-plugin
+```
+
 ## Examples
 
 ### Tide Clock
 
 ![Tide Clock](docs/assets/screenshots/example_tidal_clock.png)
 
-The tide clock needs the [signalk-tides](https://github.com/openwatersio/signalk-tides) plugin to be installed and publishing tides to the Resources API. It can however be customized to run with other APIs or take data only from SignalK data paths.
+The tide clock needs the [signalk-tides](https://github.com/openwatersio/signalk-tides) plugin to be installed and publishing tides to the Resources API. The [tide.svg](https://github.com/rhizomatics/signalk-einklabel-plugin/blob/main/templates/tide.svg) can be customized to run with other APIs or take data only from SignalK data paths.
 
 ## Templating
 
@@ -68,15 +81,15 @@ These can all be combined as in `source=resources,resource=tides,path=extremes[2
 
 ### Fonts
 
-Three font types are loaded by default, use the font name or simply 'sans-serif' in the SVG editor and choose size and weight (bold, semi-bold etc). Some labels will make a decent attempt to gray scale. Use the simple pure red, yellow, white, black to match the label's limited colour choice (some labels only offer black and white, or black/white/red).
+Three font types are loaded by default, use the generic font family, or exact font name, in the SVG editor and choose size and weight (bold, semi-bold etc). Some labels will make a decent attempt to gray scale. Use the simple pure red, yellow, white, black to match the label's limited colour choice (some labels only offer black and white, or black/white/red). If a font can't be matched it will default to (sans-serif) Roboto.
 
-* `serif` - Playfair Display
-* `sans-serif` - Roboto
-* `monospace` - JetBrains Mono
+* `serif` - `Roboto Serif`
+* `sans-serif` - `Roboto`
+* `monospace` - `Roboto Mono`
 
 ## Command Line Interface
 
-To get fast feedback on templates and shelf devices without updating and configuring SignalK, a CLI is provided that has these commands.
+To get fast feedback on templates and shelf devices without updating and configuring SignalK, a CLI call `esl-cli` is provided when the module is manually installed that has these commands. Use `--help` to get all the options.
 
 - `vendors` - list supported vendors
 - `scan` - report supported devices found from a BLE scan
@@ -85,11 +98,15 @@ See also the commands useful for debugging under [Developing Templates]
 - `render` - transform an SVG template and data into a PNG
 - `paint` - render an SVG template and data to a selected ESL
 
+The width, height, vertical offset and colour palette for the device is taken from the internal register of devices, however can be overridden on the command line. This could be used to help you choose what size of label to buy, or to get an unsupported label working.
+
+( The CLI can also be run from a checked out module, or by opening a terminal shell at `~/.signalk/node_modules/@rhizomatics/signalk-einklabel-plugin`, as `npm run cli -- command --args` )
+
 ## Vendors
 
 ### Zhsunyco
 
-Also known as 'Suny'
+Also known as 'Suny' and 'WOLink'.
 
 - [BLE ESLs](https://www.zhsunyco.com/digital-display-solution-for-small-retail-business/ble-esl-solution/)
   - The range of labels available on retail sites like AliExpress may be larger than on their corporate site
@@ -103,16 +120,18 @@ Python code for a variety of their labels at https://github.com/roxburghm/zhsuny
 The primary things managed and provided by the plugin are:
 
 * ESL Vendor
+  - Sub-package per vendor
 * ESL Device
+  - Metadata in the vendor package, using a `pid` or sometimes `pid` combined with `hwid` in the BLE results to pinpoint a model
 * SVG Template
 * SignalK API base URL
   - Used for automatic unit conversion on `signalk`-sourced numeric values and for resolving an explicit `category=` binding - neither has an in-process equivalent, both go via this server's own REST API
   - Optional: left blank, the plugin probes the probable values in likelihood order at startup - `http://localhost:3000`, `http://localhost`, `https://localhost`. Set it explicitly to skip probing
   - Either way, errors clearly if nothing responds (wrong port) or the probe is rejected (anonymous read access not enabled) - these endpoints must allow anonymous read access, since the plugin has no login flow
 
-### Extending
+## Extending
 
-#### Hardware
+### Hardware
 
 Additional vendors and devices can be added by a separate npm package that implements the `VendorDriver` interface and registers itself - there's no scanning of installed packages, registration is always an explicit call by the extension's own code.
 
@@ -120,15 +139,63 @@ Additional vendors and devices can be added by a separate npm package that imple
 - In the SignalK runtime, call this from the extension's own plugin `start()`. In the CLI, load the extension with `esl-cli --require <module> <command>`.
 - Declare this package as a `peerDependency` (not a regular dependency) in the extension package, so npm resolves a single shared copy of the registry.
 
-#### Developing Templates
+### Developing Templates
 
 Templates can be added to the configurable directory. [Inkscape](https://inkscape.org) free, open source, and recommended for editing templates, or your own favourite editor, or by hand in a text editor for hard core (or just tidying up the template side).
 
+![Example Field Definition](docs/assets/inkscape_desc.png)
+
+The object ID and label aren't used by the plugin, only the description is used to define fields. You can also add in ordinary text fields without field definitions, as labels, logos, help text etc.
+
+Placeholder text isn't necessary, and is ignored by the plugin, but makes it much easier to visualize the result.
+
 Inkscape adds its own metadata to images, which can be stripped off by exporting a simple SVG, although can be left in place with no harm; main reason to simplify the SVG is manual changes in a text editor.
 
+Due to a limitation in the `resvg-wasm` library used to turn SVGs into images, the `font-family` is limited to `serif`,`sans-serif`,`monospace` or the exact name of one of the installed fonts - `Roboto` (sans serif), `Roboto Serif` or `Roboto Mono`. Inkscape has its own fonts, which won't match what's available in the SignalK plugin, so for more precise design, install [Roboto from Google](https://fonts.google.com/specimen/Roboto) via the web page, `brew` on MacOS or similar.
+
+### Debugging Templates
+
 The `esl-cli` can be used to debug and validate templates quickly:
 
 * `render` - Render templates with SignalK data and write to a local PNG file
 * `paint` - Render templates with SignalK data and send to selected ESL device
 * `fields` - List the fields in the template, with the source specification and the rendered data value
 * `field` - Accept a source specification (outside of any template context) and return the rendered value if available
+
+### Examples
+
+#### List all Fields and Rendered Values
+
+```bash
+npm run cli -- fields -t templates/tide.svg -u http://localhost
+```
+
+```
+id                       spec                                                                     value
+station.name             source=resources,resource=tides,path=station.name                        Tobermory
+source.name.             source=resources,resource=tides,path=station.source.name                 TICON-4
+last_repaint             source=einklabel,path=repainted,format=local_datetime_short              30 Jun 26 00:08
+extremes.0               source=resources,resource=tides,path=extremes[0].label                   Low
+extremes.1               source=resources,resource=tides,path=extremes[1].label                   High
+extremes.2               source=resources,resource=tides,path=extremes[2].label                   Low
+timezoneRegion           source=einklabel,path=local_zone                                         BST
+lat                      source=resources,resource=tides,path=station.datums.LAT,category=depth   0.2m
+hat                      source=resources,resource=tides,path=station.datums.HAT,category=depth   5.2m
+extremes.2.level         source=resources,resource=tides,path=extremes[2].level,category=depth    1.1m
+extremes.2.time          source=resources,resource=tides,path=extremes[2].time,format=local_time  13:15
+extremes.1.level         source=resources,resource=tides,path=extremes[1].level,category=depth    3.8m
+extremes.1.time          source=resources,resource=tides,path=extremes[1].time,format=local_time  07:05
+extremes.0.time          source=resources,resource=tides,path=extremes[0].time,format=local_time  01:21
+extremes.0.time-8        source=resources,resource=tides,path=extremes[0].time,format=day_mon     30 Jun
+extremes.0.time-8-5      source=resources,resource=tides,path=extremes[1].time,format=day_mon     30 Jun
+extremes.0.time-8-9      source=resources,resource=tides,path=extremes[2].time,format=day_mon     30 Jun
+extremes.0.level         source=resources,resource=tides,path=extremes[0].level,category=depth    1.3m
+```
+
+### Offline Working
+
+`render` and `paint` need a `--url` argument to point to the SignalK server to retrieve data. If you don't have access to one, you can use `--example-data` or `-e` to point to a directory of example data, which is bundled with the plugin or available in GitHub at [examples](https://github.com/rhizomatics/signalk-einklabel-plugin/tree/main/examples). This also allows you to write templates for resource APIs that aren't available yet.
+
+- `vessels.json` - The standard SignalK vessel paths
+- `resources/xxxx.json` - The output of the `xxxx` resources API call
+- `categories.json` - SignalK unit categories needed for `category=depth` type formatting

package/dist/cli/index.js

@@ -27,6 +27,10 @@ function parseColours(code) {
     }
     return colours;
 }
+/** Shared by every command that takes -u/--url and -e/--example-data - -e wins when both are present (-u always carries a default, so its mere presence doesn't mean it was explicitly chosen). */
+function assembleContext(opts, bindings) {
+    return opts.exampleData ? (0, liveContext_1.assembleExampleContext)(opts.exampleData, bindings) : (0, liveContext_1.assembleLiveContext)(opts.url, bindings);
+}
 /** Connects long enough to read the advertised name and manufacturer ID, then matches against registered drivers. */
 async function identifyVendor(address) {
     const { bluetooth, destroy } = (0, bleDiscovery_1.createBluetooth)();
@@ -137,6 +141,7 @@ program
     .requiredOption('-a, --address <address>', 'BLE address of the device')
     .requiredOption('-t, --template <path>', 'path to SVG template')
     .option('-u, --url <url>', 'SignalK server base URL - resolves the template\'s source=signalk/resources bindings', DEFAULT_SIGNALK_URL)
+    .option('-e, --example-data <dir>', 'load vessels/resources from local example JSON files in <dir> (e.g. ./examples) instead of a live SignalK server - alternative to -u')
     .option('-k, --aes-key <hex>', 'AES-128 key for device authentication, as 32 hex characters - defaults to the vendor\'s stock key if omitted')
     .option('-w, --width <px>', 'render width', '416')
     .option('--height <px>', 'render height', '240')
@@ -160,7 +165,7 @@ program
         }
         : undefined;
     const bindings = (0, binding_1.findBindings)(await (0, promises_1.readFile)(opts.template, 'utf-8'));
-    const context = await (0, liveContext_1.assembleLiveContext)(opts.url, bindings);
+    const context = await assembleContext(opts, bindings);
     const renderer = new svgRenderer_1.SvgRenderer();
     const bitmap = await renderer.render(opts.template, context, Number(opts.width), Number(opts.height));
     const connectTimeoutMs = Number(opts.connectTimeout) * 1000;
@@ -178,12 +183,13 @@ program
     .requiredOption('-t, --template <path>', 'path to SVG template')
     .requiredOption('-o, --output <path>', 'output PNG path')
     .option('-u, --url <url>', 'SignalK server base URL - resolves the template\'s source=signalk/resources bindings', DEFAULT_SIGNALK_URL)
+    .option('-e, --example-data <dir>', 'load vessels/resources from local example JSON files in <dir> (e.g. ./examples) instead of a live SignalK server - alternative to -u')
     .option('-w, --width <px>', 'render width', '416')
     .option('--height <px>', 'render height', '240')
     .option('-f, --font <path>', 'override a bundled font with this file (repeatable) - defaults to the bundled monospace/sans-serif/serif trio', (value, previous = []) => [...previous, value])
     .action(async (opts) => {
     const bindings = (0, binding_1.findBindings)(await (0, promises_1.readFile)(opts.template, 'utf-8'));
-    const context = await (0, liveContext_1.assembleLiveContext)(opts.url, bindings);
+    const context = await assembleContext(opts, bindings);
     const renderer = opts.font ? new svgRenderer_1.SvgRenderer(opts.font) : new svgRenderer_1.SvgRenderer();
     const bitmap = await renderer.render(opts.template, context, Number(opts.width), Number(opts.height));
     await (0, promises_1.writeFile)(opts.output, (0, png_1.bitmapToPng)(bitmap));
@@ -194,6 +200,7 @@ program
     .description('List every <desc> binding in a template by element id, with its source spec and resolved value')
     .requiredOption('-t, --template <path>', 'path to SVG template')
     .option('-u, --url <url>', 'SignalK server base URL - resolves the template\'s source=signalk/resources bindings', DEFAULT_SIGNALK_URL)
+    .option('-e, --example-data <dir>', 'load vessels/resources from local example JSON files in <dir> (e.g. ./examples) instead of a live SignalK server - alternative to -u')
     .action(async (opts) => {
     const doc = new xmldom_1.DOMParser().parseFromString(await (0, promises_1.readFile)(opts.template, 'utf-8'), 'image/svg+xml');
     const elements = doc.getElementsByTagName('text');
@@ -216,7 +223,7 @@ program
         if (row.error || !row.binding)
             return [row.id, row.desc, row.error ?? ''];
         try {
-            const context = await (0, liveContext_1.assembleLiveContext)(opts.url, [row.binding]);
+            const context = await assembleContext(opts, [row.binding]);
             return [row.id, row.desc, (0, binding_1.renderBinding)(row.binding, context)];
         }
         catch (err) {
@@ -233,9 +240,10 @@ program
     .description('Resolve a single binding spec directly against a live SignalK server, with no template')
     .argument('<spec>', 'binding spec, e.g. "source=resources,resource=tides,path=station.name" or a bare SignalK path')
     .option('-u, --url <url>', 'SignalK server base URL - resolves the spec\'s source=signalk/resources binding', DEFAULT_SIGNALK_URL)
+    .option('-e, --example-data <dir>', 'load vessels/resources from local example JSON files in <dir> (e.g. ./examples) instead of a live SignalK server - alternative to -u')
     .action(async (spec, opts) => {
     const binding = (0, binding_1.parseBinding)(spec);
-    const context = await (0, liveContext_1.assembleLiveContext)(opts.url, [binding]);
+    const context = await assembleContext(opts, [binding]);
     console.log((0, binding_1.renderBinding)(binding, context));
 });
 program.parseAsync(process.argv).catch((err) => {

package/dist/cli/liveContext.d.ts

@@ -10,3 +10,22 @@ import { TemplateContext } from '../render/types';
  * navigate `path` within it.
  */
 export declare function assembleLiveContext(signalkUrl: string, bindings: Binding[]): Promise<TemplateContext>;
+/**
+ * `-e/--example-data` counterpart to `assembleLiveContext`, for previewing a template with no SignalK
+ * server at all. Reads the same `{ signalk, resources, categories }` shapes a real server would
+ * return, but from static JSON files under `examplesDir`:
+ * - `<examplesDir>/vessels.json` - the full data model (`{ "vessels": { "self": {...}, ... } }`,
+ *   delta-tree leaves wrapped as `{ value, ... }` exactly like the REST API - see `unwrapSignalkTree`),
+ *   sliced down to whichever `context=` subtree each `source=signalk` binding needs.
+ * - `<examplesDir>/resources/<name>.json` - one file per `resource=<name>`, holding that resource's
+ *   data directly (no wrapper), matching the Resources API's response shape.
+ * - `<examplesDir>/categories.json` - a flat `{ "<category>": DisplayUnits, ... }` map, standing in for
+ *   what `fetchCategoryDisplayUnits` would otherwise resolve from a server's unit-preferences config
+ *   (categoryToBaseUnit + active preset + conversion definitions - no static-file equivalent for that
+ *   3-way join, so this file holds the already-resolved result directly).
+ *
+ * `pathMeta` has no static-file equivalent (it's live server-side config - see `fetchPathMeta`), so
+ * it's left empty: automatic unit conversion falls back to a path's `category=` binding if it has one,
+ * or shows the raw value otherwise.
+ */
+export declare function assembleExampleContext(examplesDir: string, bindings: Binding[]): Promise<TemplateContext>;

package/dist/cli/liveContext.js

@@ -1,6 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assembleLiveContext = assembleLiveContext;
+exports.assembleExampleContext = assembleExampleContext;
+const promises_1 = require("fs/promises");
+const path_1 = __importDefault(require("path"));
 const formatters_1 = require("../render/formatters");
 const httpJson_1 = require("../httpJson");
 const unitCategories_1 = require("../unitCategories");
@@ -75,3 +81,72 @@ async function assembleLiveContext(signalkUrl, bindings) {
     const meta = { repainted: new Date().toISOString(), local_zone: (0, formatters_1.resolveLocalZoneAbbreviation)({ signalk }) };
     return { signalk, resources, pathMeta, categories, meta };
 }
+async function readJsonFile(filePath) {
+    let raw;
+    try {
+        raw = await (0, promises_1.readFile)(filePath, 'utf-8');
+    }
+    catch (err) {
+        throw new Error(`could not read example data file ${filePath} - ${err.message}`);
+    }
+    return JSON.parse(raw);
+}
+/**
+ * `-e/--example-data` counterpart to `assembleLiveContext`, for previewing a template with no SignalK
+ * server at all. Reads the same `{ signalk, resources, categories }` shapes a real server would
+ * return, but from static JSON files under `examplesDir`:
+ * - `<examplesDir>/vessels.json` - the full data model (`{ "vessels": { "self": {...}, ... } }`,
+ *   delta-tree leaves wrapped as `{ value, ... }` exactly like the REST API - see `unwrapSignalkTree`),
+ *   sliced down to whichever `context=` subtree each `source=signalk` binding needs.
+ * - `<examplesDir>/resources/<name>.json` - one file per `resource=<name>`, holding that resource's
+ *   data directly (no wrapper), matching the Resources API's response shape.
+ * - `<examplesDir>/categories.json` - a flat `{ "<category>": DisplayUnits, ... }` map, standing in for
+ *   what `fetchCategoryDisplayUnits` would otherwise resolve from a server's unit-preferences config
+ *   (categoryToBaseUnit + active preset + conversion definitions - no static-file equivalent for that
+ *   3-way join, so this file holds the already-resolved result directly).
+ *
+ * `pathMeta` has no static-file equivalent (it's live server-side config - see `fetchPathMeta`), so
+ * it's left empty: automatic unit conversion falls back to a path's `category=` binding if it has one,
+ * or shows the raw value otherwise.
+ */
+async function assembleExampleContext(examplesDir, bindings) {
+    const signalk = {};
+    const contexts = new Set(bindings.filter((binding) => binding.source === 'signalk').map((binding) => binding.context));
+    if (contexts.size > 0) {
+        const vesselsPath = path_1.default.join(examplesDir, 'vessels.json');
+        (0, log_1.logDebug)(`reading ${vesselsPath}`);
+        const vessels = await readJsonFile(vesselsPath);
+        for (const context of contexts) {
+            const segments = contextPath(context).split('/');
+            let node = vessels;
+            for (const segment of segments) {
+                node = node === null || typeof node !== 'object' ? undefined : node[segment];
+            }
+            if (node === undefined) {
+                throw new Error(`example data file ${vesselsPath} has no "${segments.join('.')}" subtree for context "${context}"`);
+            }
+            signalk[context] = unwrapSignalkTree(node);
+        }
+    }
+    const resources = {};
+    const resourceNames = new Set(bindings.filter((binding) => binding.source === 'resources').map((binding) => binding.resource));
+    for (const name of resourceNames) {
+        const resourcePath = path_1.default.join(examplesDir, 'resources', `${name}.json`);
+        (0, log_1.logDebug)(`reading ${resourcePath}`);
+        resources[name] = await readJsonFile(resourcePath);
+    }
+    const categoryNames = new Set(bindings.filter((binding) => binding.category).map((binding) => binding.category));
+    let categories = {};
+    if (categoryNames.size > 0) {
+        const categoriesPath = path_1.default.join(examplesDir, 'categories.json');
+        (0, log_1.logDebug)(`reading ${categoriesPath}`);
+        categories = (await readJsonFile(categoriesPath));
+        for (const category of categoryNames) {
+            if (!(category in categories)) {
+                throw new Error(`example data file ${categoriesPath} has no "${category}" entry`);
+            }
+        }
+    }
+    const meta = { repainted: new Date().toISOString(), local_zone: (0, formatters_1.resolveLocalZoneAbbreviation)({ signalk }) };
+    return { signalk, resources, pathMeta: {}, categories, meta };
+}

package/dist/render/fonts.d.ts

@@ -2,8 +2,29 @@
  * One font per CSS generic family bucket (monospace/sans-serif/serif), bundled so rendering
  * doesn't depend on the host having any fonts installed - resvg-wasm cannot see host fonts at
  * all (see project memory). Must be .woff2 - resvg-wasm silently fails to render .woff.
- * resvg auto-classifies each loaded font from its own metadata; there's no proven way to
- * control which one wins if two loaded fonts share a generic bucket, so keep this to one per
- * bucket rather than adding e.g. bold variants here.
+ *
+ * resvg-wasm does NOT route generic keywords (font-family:serif/sans-serif/monospace) to the
+ * "right" loaded font by metadata - a generic keyword, or any font-family value that doesn't
+ * exactly string-match a loaded font's own name, silently falls back to whichever loaded font
+ * happens to work for the requested glyphs (in practice: array order). Templates may still use
+ * the generic keywords (Inkscape's default) - svgRenderer.ts rewrites them to the matching
+ * literal embedded name from GENERIC_FONT_FAMILY_MAP below before resvg ever sees the SVG - see
+ * project memory. Keep this to one font per bucket rather than adding e.g. bold variants - there's
+ * no reliable way to pick between two fonts sharing a literal name.
+ *
+ * Must be the static (non-variable) @fontsource builds, not @fontsource-variable - every
+ * @fontsource-variable/roboto-{mono,serif} subset renders zero visible glyphs under resvg-wasm
+ * (loads without error, but produces a blank image - confirmed by counting non-white output
+ * pixels), and every @fontsource-variable/roboto-flex subset crashes resvg-wasm's font parser
+ * outright with a WASM "unreachable" trap (a Rust panic) - see project memory. The static Roboto
+ * Mono/Serif builds used here render correctly and keep the whole set in the Roboto super-family.
  */
 export declare const DEFAULT_FONT_PATHS: string[];
+/**
+ * Maps each CSS generic font-family keyword to the literal embedded name (nameID1) of the
+ * bundled font that backs it in DEFAULT_FONT_PATHS above. svgRenderer.ts rewrites every
+ * `font-family:sans-serif`/`serif`/`monospace` in a template to its literal name before handing
+ * the SVG to resvg-wasm, since resvg-wasm does not route generic keywords to a loaded font itself
+ * - see project memory. Keep these in sync with DEFAULT_FONT_PATHS if a bucket's font ever changes.
+ */
+export declare const GENERIC_FONT_FAMILY_MAP: Record<string, string>;

package/dist/render/fonts.js

@@ -1,16 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_FONT_PATHS = void 0;
+exports.GENERIC_FONT_FAMILY_MAP = exports.DEFAULT_FONT_PATHS = void 0;
 /**
  * One font per CSS generic family bucket (monospace/sans-serif/serif), bundled so rendering
  * doesn't depend on the host having any fonts installed - resvg-wasm cannot see host fonts at
  * all (see project memory). Must be .woff2 - resvg-wasm silently fails to render .woff.
- * resvg auto-classifies each loaded font from its own metadata; there's no proven way to
- * control which one wins if two loaded fonts share a generic bucket, so keep this to one per
- * bucket rather than adding e.g. bold variants here.
+ *
+ * resvg-wasm does NOT route generic keywords (font-family:serif/sans-serif/monospace) to the
+ * "right" loaded font by metadata - a generic keyword, or any font-family value that doesn't
+ * exactly string-match a loaded font's own name, silently falls back to whichever loaded font
+ * happens to work for the requested glyphs (in practice: array order). Templates may still use
+ * the generic keywords (Inkscape's default) - svgRenderer.ts rewrites them to the matching
+ * literal embedded name from GENERIC_FONT_FAMILY_MAP below before resvg ever sees the SVG - see
+ * project memory. Keep this to one font per bucket rather than adding e.g. bold variants - there's
+ * no reliable way to pick between two fonts sharing a literal name.
+ *
+ * Must be the static (non-variable) @fontsource builds, not @fontsource-variable - every
+ * @fontsource-variable/roboto-{mono,serif} subset renders zero visible glyphs under resvg-wasm
+ * (loads without error, but produces a blank image - confirmed by counting non-white output
+ * pixels), and every @fontsource-variable/roboto-flex subset crashes resvg-wasm's font parser
+ * outright with a WASM "unreachable" trap (a Rust panic) - see project memory. The static Roboto
+ * Mono/Serif builds used here render correctly and keep the whole set in the Roboto super-family.
  */
 exports.DEFAULT_FONT_PATHS = [
-    require.resolve('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2'),
+    // first font is the default
     require.resolve('@fontsource/roboto/files/roboto-latin-400-normal.woff2'),
-    require.resolve('@fontsource/playfair-display/files/playfair-display-latin-400-normal.woff2'),
+    require.resolve('@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2'),
+    require.resolve('@fontsource/roboto-serif/files/roboto-serif-latin-400-normal.woff2'),
 ];
+/**
+ * Maps each CSS generic font-family keyword to the literal embedded name (nameID1) of the
+ * bundled font that backs it in DEFAULT_FONT_PATHS above. svgRenderer.ts rewrites every
+ * `font-family:sans-serif`/`serif`/`monospace` in a template to its literal name before handing
+ * the SVG to resvg-wasm, since resvg-wasm does not route generic keywords to a loaded font itself
+ * - see project memory. Keep these in sync with DEFAULT_FONT_PATHS if a bucket's font ever changes.
+ */
+exports.GENERIC_FONT_FAMILY_MAP = {
+    'sans-serif': 'Roboto',
+    monospace: 'Roboto Mono',
+    serif: 'Roboto Serif 20pt',
+};

package/dist/render/svgRenderer.js

@@ -13,6 +13,27 @@ function ensureWasmInitialized() {
     }
     return wasmReady;
 }
+// Only matches the CSS `font-family:` declaration inside a style="..." attribute, not the bare
+// XML `font-family="..."` presentation attribute - rewriting the latter in place would require
+// quote-aware handling of the surrounding XML attribute delimiter to avoid corrupting the
+// document, and it's unnecessary: resvg-wasm (and any browser) prefers the style declaration
+// whenever both are present, and every <text>/<tspan> in our templates sets one.
+const GENERIC_FONT_FAMILY_PATTERN = /font-family\s*:\s*(['"]?)(sans-serif|serif|monospace)\1(?=\s*[;"])/g;
+/**
+ * Rewrites CSS generic font-family keywords to the literal embedded name of the bundled font
+ * that backs each bucket (see GENERIC_FONT_FAMILY_MAP, ./fonts.ts), e.g. `font-family:sans-serif`
+ * becomes `font-family:'Roboto',sans-serif`. resvg-wasm only selects a font by exact name match -
+ * it does not route generic keywords to "the right" loaded font itself (see project memory) - so
+ * this lets templates use plain `serif`/`sans-serif`/`monospace` (as Inkscape writes by default)
+ * instead of every template author having to hardcode each bundled font's exact embedded name.
+ * The original generic keyword is kept as a trailing fallback so the rewritten value stays valid
+ * CSS for preview in e.g. Inkscape or a browser; it's inert as far as resvg-wasm is concerned.
+ */
+function expandGenericFontFamilies(svgSource) {
+    return svgSource.replace(GENERIC_FONT_FAMILY_PATTERN, (_match, _quote, generic) => {
+        return `font-family:'${fonts_1.GENERIC_FONT_FAMILY_MAP[generic]}',${generic}`;
+    });
+}
 /**
  * Renders an SVG+binding template to a common RGBA bitmap.
  *
@@ -52,7 +73,7 @@ class SvgRenderer {
     }
     async render(svgTemplatePath, context, width, height) {
         const [, fontBuffers] = await Promise.all([ensureWasmInitialized(), this.loadFontBuffers()]);
-        const svgSource = await (0, promises_1.readFile)(svgTemplatePath, 'utf-8');
+        const svgSource = expandGenericFontFamilies(await (0, promises_1.readFile)(svgTemplatePath, 'utf-8'));
         const doc = new xmldom_1.DOMParser().parseFromString(svgSource, 'image/svg+xml');
         const elements = doc.getElementsByTagName('text');
         for (let i = 0; i < elements.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhizomatics/signalk-einklabel-plugin",
-  "version": "0.4.7",
+  "version": "0.5.1",
   "description": "SignalK plugin that renders selected SignalK data to eInk Electronic Shelf Labels",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,17 +43,17 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@fontsource/jetbrains-mono": "^5.2.8",
-    "@fontsource/playfair-display": "^5.2.8",
     "@fontsource/roboto": "^5.2.10",
+    "@fontsource/roboto-mono": "^5.2.9",
+    "@fontsource/roboto-serif": "^5.2.9",
+    "@naugehyde/node-ble": "^1.13.5",
     "@resvg/resvg-wasm": "^2.6.2",
     "@xmldom/xmldom": "^0.9.10",
     "commander": "^12.1.0",
+    "form-data": "^4.0.6",
     "luxon": "^3.7.2",
     "mathjs": "^15.2.0",
-    "@naugehyde/node-ble": "^1.13.5",
-    "pngjs": "^7.0.0",
-    "form-data":"^4.0.6"
+    "pngjs": "^7.0.0"
   },
   "devDependencies": {
     "@signalk/server-api": "^2.28.0",

package/templates/tide.svg

@@ -23,11 +23,11 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:zoom="1.3906433"
-     inkscape:cx="245.92935"
-     inkscape:cy="75.145079"
+     inkscape:cx="176.537"
+     inkscape:cy="132.67241"
      inkscape:window-width="1488"
      inkscape:window-height="674"
-     inkscape:window-x="88"
+     inkscape:window-x="24"
      inkscape:window-y="33"
      inkscape:window-maximized="0"
      inkscape:current-layer="svg1"
@@ -71,24 +71,24 @@
      font-size="18"
      font-family="serif"
      fill="yellow"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:serif;-inkscape-font-specification:'serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffff00;stroke:#000000;stroke-width:1.2278;stroke-opacity:1"
-     transform="scale(0.89274878,1.1201359)">Tobermory<desc
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:32px;font-family:serif;-inkscape-font-specification:'Roboto Serif 20pt';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffff00;stroke:#000000;stroke-width:1.2278;stroke-opacity:1"
+     transform="scale(0.89274878,1.1201359)">Tidal Station Name<desc
    id="desc1">source=resources,resource=tides,path=station.name</desc></text>
   <text
-     id="station.name-8"
+     id="source"
      x="347.95166"
      y="226.1548"
      font-size="18"
      font-family="serif"
      fill="black"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000;stroke-width:3.80045"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:sans-serif;-inkscape-font-specification:'Roboto',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000;stroke-width:3.80045"
      transform="scale(0.95907863,1.0426674)"><desc
        id="desc21">source=resources,resource=tides,path=station.source.name</desc><tspan
        sodipodi:role="line"
        id="tspan20"
        x="347.95166"
        y="226.1548"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.33333319px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:3.80045">SOURCE</tspan></text>
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3332995px;font-family:sans-serif;-inkscape-font-specification:'Roboto',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:3.80045">SOURCE</tspan></text>
   <text
      id="last_repaint"
      x="4.3477793"
@@ -96,38 +96,38 @@
      font-size="18"
      font-family="serif"
      fill="black"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:Sans;-inkscape-font-specification:'Sans, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.19309"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:sans-serif;-inkscape-font-specification:'Roboto',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.19309"
      transform="scale(0.85412558,1.170788)"><desc
        id="desc12">source=einklabel,path=repainted,format=local_datetime_short</desc><tspan
        sodipodi:role="line"
        id="tspan3">27 Jun 26 18:05</tspan></text>
   <text
      id="extremes.0"
-     x="7.9661016"
-     y="60"
+     x="8.6851931"
+     y="57.123634"
      font-size="14"
      font-family="monospace"
      fill="black"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.6667px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000"><desc
-   id="desc13">source=resources,resource=tides,path=extremes[0].label</desc>High</text>
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.6667px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000"><desc
+   id="desc13">source=resources,resource=tides,path=extremes[0].label</desc>High or Low</text>
   <text
      id="extremes.1"
-     x="13.35283"
-     y="118.57627"
+     x="7.6000967"
+     y="117.85719"
      font-size="14"
      font-family="monospace"
      fill="black"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.6667px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000"><desc
-   id="desc14">source=resources,resource=tides,path=extremes[1].label</desc>Low</text>
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.6667px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000"><desc
+   id="desc14">source=resources,resource=tides,path=extremes[1].label</desc>High or Low</text>
   <text
      id="extremes.2"
-     x="7.9661016"
-     y="177.55931"
+     x="7.2470098"
+     y="176.12112"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:18.6667px;font-family:monospace;-inkscape-font-specification:'monospace, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000"><desc
-   id="desc15">source=resources,resource=tides,path=extremes[2].label</desc>High</text>
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.6667px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ff0000"><desc
+   id="desc15">source=resources,resource=tides,path=extremes[2].label</desc>High or Low</text>
   <text
      id="environment.time.timezoneRegion"
      x="220.79686"
@@ -135,152 +135,152 @@
      font-size="10.373px"
      font-family="sans-serif"
      fill="#ffff00"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;direction:rtl;fill:#000000;stroke-width:0.864419"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;direction:rtl;fill:#000000;stroke-width:0.864419"
      transform="scale(0.86441854,1.156847)">UTC+01:00<desc
    id="desc11">source=einklabel,path=local_zone</desc></text>
   <text
      id="lat"
-     x="217.936"
-     y="27.84404"
+     x="289.84515"
+     y="24.967674"
      font-size="12px"
      font-family="sans-serif"
      fill="#ffff00"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:Sans;-inkscape-font-specification:'Sans, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1a1a1a;stroke:#fefe54;stroke-opacity:1"><desc
-       id="desc18">source=resources,resource=tides,path=station.datums.LAT,category=depth</desc><tspan
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:sans-serif;-inkscape-font-specification:'\'Roboto, Normal\', sans-serif';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1a1a1a;stroke:#fefe54;stroke-opacity:1"><desc
+       id="desc18">source=resources,resource=tides,path=station.datums.LAT,category=depth,round=1</desc><tspan
        sodipodi:role="line"
        id="tspan17"
-       x="217.936"
-       y="27.84404">0.1m</tspan></text>
+       x="289.84515"
+       y="24.967674">0.1m</tspan></text>
   <text
      id="hat"
-     x="306.83963"
-     y="27.924137"
+     x="363.64786"
+     y="25.766863"
      font-size="12px"
      font-family="sans-serif"
      fill="#ffff00"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:Sans;-inkscape-font-specification:'Sans, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1a1a1a;stroke:#fefe54;stroke-opacity:1"><desc
-       id="desc19">source=resources,resource=tides,path=station.datums.HAT,category=depth</desc><tspan
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:sans-serif;-inkscape-font-specification:'\'Roboto, Normal\', sans-serif';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1a1a1a;stroke:#fefe54;stroke-opacity:1"><desc
+       id="desc19">source=resources,resource=tides,path=station.datums.HAT,category=depth,round=1</desc><tspan
        sodipodi:role="line"
        id="tspan18"
-       x="306.83963"
-       y="27.924137">6.0m</tspan></text>
+       x="363.64786"
+       y="25.766863">6.0m</tspan></text>
   <text
      id="extremes.2.level"
-     x="335.54352"
-     y="168.08856"
+     x="334.61356"
+     y="159.19211"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.78893"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.78893"
      transform="scale(0.7732368,1.2932649)"
      inkscape:transform-center-x="11.578953"
      inkscape:transform-center-y="-96.464172"><tspan
        sodipodi:role="line"
        id="tspan2-0"
-       x="335.54352"
-       y="168.08856"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:1.78893">3.3m</tspan><desc
+       x="334.61356"
+       y="159.19211"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:1.78893">3.3m</tspan><desc
        id="desc6">source=resources,resource=tides,path=extremes[2].level,category=depth</desc></text>
   <text
      id="extremes.2.time"
-     x="164.78383"
-     y="154.23825"
+     x="194.47879"
+     y="146.1584"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333281px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.51352"
-     transform="scale(0.7022624,1.4239692)">15:53<desc
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.51352"
+     transform="scale(0.70226239,1.4239692)">15:53<desc
    id="desc10">source=resources,resource=tides,path=extremes[2].time,format=local_time</desc></text>
   <text
      id="extremes.1.level"
-     x="345.0629"
-     y="118.90553"
+     x="341.23608"
+     y="110.25762"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.701"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.701"
      transform="scale(0.75163533,1.3304324)"
      inkscape:transform-center-y="-140.38618"
      inkscape:transform-center-x="-0.00038058817"><tspan
        sodipodi:role="line"
        id="tspan2-1"
-       x="345.0629"
-       y="118.90553"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:1.701">1.6m</tspan><desc
+       x="341.23608"
+       y="110.25762"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:1.701">1.6m</tspan><desc
        id="desc5">source=resources,resource=tides,path=extremes[1].level,category=depth</desc></text>
   <text
      id="extremes.1.time"
-     x="161.1239"
-     y="115.52532"
+     x="187.55594"
+     y="108.65867"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333356px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.48364"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.48364"
      transform="scale(0.7345432,1.3613903)">09:36<desc
    id="desc8">source=resources,resource=tides,path=extremes[1].time,format=local_time</desc></text>
   <text
      id="extremes.0.time"
-     x="156.47511"
-     y="73.368919"
+     x="184.40854"
+     y="64.242691"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333325px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.55397"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.55397"
      transform="scale(0.74654856,1.3394976)">03:27<desc
    id="desc3">source=resources,resource=tides,path=extremes[0].time,format=local_time</desc></text>
   <text
      id="extremes.0.time-8"
      x="10.326324"
-     y="77.594147"
+     y="74.630478"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#666666;stroke-width:1.32646"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.6667px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#666666;stroke-width:1.32646"
      transform="scale(0.82428216,1.2131768)"><desc
    id="desc2">source=resources,resource=tides,path=extremes[0].time,format=day_mon</desc>27 Jun</text>
   <text
      id="extremes.0.time-8-5"
-     x="10.83737"
-     y="126.90092"
+     x="9.9649849"
+     y="123.34451"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#666666;stroke-width:1.32646"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.6667px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#666666;stroke-width:1.32646"
      transform="scale(0.82428216,1.2131768)"><desc
    id="desc7">source=resources,resource=tides,path=extremes[1].time,format=day_mon</desc>27 Jun</text>
   <text
      id="extremes.0.time-8-9"
      x="12.934491"
-     y="161.07082"
+     y="156.77794"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#666666;stroke-width:1.4652"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:22.6667px;font-family:sans-serif;-inkscape-font-specification:'Roboto, Normal',sans-serif;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#666666;stroke-width:1.4652"
      transform="scale(0.74623156,1.3400666)"><desc
    id="desc9">source=resources,resource=tides,path=extremes[2].time,format=day_mon</desc>27 Jun</text>
   <text
      id="extremes.0.level"
-     x="336.3447"
-     y="76.456078"
+     x="334.47769"
+     y="65.931427"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.71992"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.71992"
      transform="scale(0.7703174,1.2981662)"><tspan
        sodipodi:role="line"
        id="tspan2"
-       x="336.3447"
-       y="76.456078"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.33333333px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:1.71992">3.4m</tspan><desc
+       x="334.47769"
+       y="65.931427"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:monospace;-inkscape-font-specification:'Roboto Mono, Bold',monospace;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:1.71992">3.4m</tspan><desc
        id="desc4">source=resources,resource=tides,path=extremes[0].level,category=depth</desc></text>
   <text
      xml:space="preserve"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:Sans;-inkscape-font-specification:'Sans, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1a1a1a;stroke:#fefe54;stroke-width:0.612283;stroke-opacity:1"
-     x="274.69302"
-     y="27.325481"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:sans-serif;-inkscape-font-specification:'\'Roboto, Normal\', sans-serif';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#1a1a1a;stroke:#fefe54;stroke-width:0.612283;stroke-opacity:1"
+     x="340.84946"
+     y="25.168207"
      id="text19"><tspan
        sodipodi:role="line"
        id="tspan19"
-       x="274.69302"
-       y="27.325481">-&gt;</tspan></text>
+       x="340.84946"
+       y="25.168207">-&gt;</tspan></text>
 </svg>