@rhizomatics/signalk-einklabel-plugin 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.6.0
+- Added ability to select images for inclusion in SVG templated based on SignalK value
+- New image selection used to add lunar phase to tide clock example
+  -  Requires a source for `environment.moonPhase.name`, for example the `dervived-data` plugin
+# 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

package/README.md

@@ -10,6 +10,28 @@ 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.
 
+## Pre-requisites
+
+Most of this is about making SignalK work with Bluetooth Low Energy, which is good thing to have anyway, since vendors like Victron, Switchbot, Ruuvi and others have BLE enabled hardware that's useful to have on a boat. [Direct BLE support](https://github.com/SignalK/signalk-server/issues/2411) in SignalK is being planned in 2026.
+
+1. A SignalK server, preferably running Linux (MacOS does weird things with bluetooth)
+2. A Bluetooth adapter, that can handle BLE (Bluetooth Low Energy), which is Bluetooth v4.0 or higher
+  - Bluetooth adapters for Linux can be tricky, TP-Link UB400 and Asus USB-BT500 are two well-known and available ones
+  - Some Raspberry Pi models come with suitable Bluetooth it built-in
+  - Don't worry about the very latest Bluetooth versions, 4.0 is basic, 5.0 is nice
+  - Home Assistant is massively more popular than SignalK, and often also run on Raspberry Pi and similar, so good source of advice
+3. `bluez` package installed in Linux
+  - No need to do this if you have a Raspberry Pi with recent Raspian version, since bluez comes built in.
+  - If you're not running a Raspberry Pi, then ensure that the `dbus` package is installed
+4. One or more supported Electronic Shelf Labels
+  - The label used for testing this is the [ZhunyCo 3.7 BRWY](https://www.aliexpress.com/item/1005010050104435.html)
+5. Correct time zone set on server if local time is to be shown on display
+  - Use `raspi-config` on a Raspberry Pi, or `timedatectl` on a Linux server
+  - If not set, everything will work, but you may see the wrong zone or not have daylight savings applied
+
+Once you have all of that, it may be worth also installing [signalk-victron-ble](https://github.com/stefanor/signalk-victron-ble) or [bt-sensors-plugin](https://github.com/naugehyde/bt-sensors-plugin-sk) to pull in data from other sensors and equipment.
+
+
 ## Installation
 
 Look for **eInk Label Instrument** in the [SignalK AppStore]() on your
@@ -31,6 +53,9 @@ npm install @rhizomatics/signalk-einklabel-plugin
 
 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.
 
+To show the lunar phase, the `environment.moonPhase.name` path is required, which can
+be easily achieved by installing and configuring the `derived-data` plugin.
+
 ## Templating
 
 Templates are simply SVG files, to which expressions can be added to use SignalK data, with options to make it easier to read, like rounding or simplifying dates and times. The template can have sample data in the placeholder, so is easy to layout and visualize.
@@ -79,9 +104,21 @@ Additionally, `round=n` can be used to round to limited decimal places.
 
 These can all be combined as in `source=resources,resource=tides,path=extremes[2].level,category=depth,round=2`
 
+### Non-Textual Fields (Images)
+
+The same `<desc>` mechanism works on an `<image>` element instead of a `<text>` element, for a value that's better shown as a picture than as text - a moon phase icon, a wind direction arrow, a weather condition glyph, and so on. Rather than substituting text, the resolved value picks one of a directory of `.svg` files to embed, by an extra required `assets=` key naming that directory (resolved relative to the template file itself, so a bundled template and a user override both work the same way). For example, the tide clock's moon phase icon uses:
+
+```
+path=environment.moonPhase.name,assets=../resources/svg/lunar_phases
+```
+
+The resolved value (e.g. `"Waning Gibbous"`, as published by the [derived-data](https://www.npmjs.com/package/signalk-derived-data) plugin) is normalized to match a filename - lower-cased, punctuation and spaces collapsed to underscores - so `"Waning Gibbous"` picks `waning_gibbous.svg` out of that directory. If the underlying path has no value at all (e.g. the `derived-data` plugin isn't installed), or the value doesn't normalize to any file in the directory, the `<image>` element is simply omitted from that render - no broken image, no placeholder, nothing shown.
+
+This is a general mechanism, not specific to moon phases - any `source`/`context`/`path`/`format` combination valid for a `<text>` binding works here too (a `source=resources` value, an explicit `category=`, etc.), the only difference is the required `assets=` directory and the "no match -> no image" behaviour instead of substituted text. To add your own, put a directory of `<value>.svg` files somewhere relative to your template, add an `<image>` element in your SVG editor at the size/position you want, and give it a `<desc>` the same way you would a text field.
+
 ### Fonts
 
-Three font types are loaded by default, use the 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.
+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` - `Roboto Serif`
 * `sans-serif` - `Roboto`
@@ -151,7 +188,7 @@ Placeholder text isn't necessary, and is ignored by the plugin, but makes it muc
 
 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 must match exactly one of the installed fonts - `Roboto` (sans serif), `Roboto Serif` or `Roboto Mono` rather than a generic `serif`,`sans-serif`,`monospace` font family. 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.
+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
 

package/dist/render/assets.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Turns a resolved binding value into a filename stem, e.g. `"Waning Gibbous"` -> `"waning_gibbous"` -
+ * so a `signalk`/`resources` value using SignalK's own display casing (title case, spaces) can match a
+ * file named the conventional snake_case way. Returns `undefined` for anything that can't sensibly name
+ * a file (non-string, empty, or all-punctuation), which callers treat as "no image".
+ */
+export declare function normalizeAssetKey(value: unknown): string | undefined;
+/**
+ * Resolves an `assets=` binding to an actual `.svg` file, looked up as `<key>.svg` inside `assetsDir`
+ * resolved relative to the template's own directory (mirroring how a bundled template's relative asset
+ * references keep working whether the template itself is the bundled copy or a user override elsewhere) -
+ * `undefined` if no matching file exists, which callers treat as "no image" rather than an error, since an
+ * unmapped value (e.g. a phase name the asset set doesn't cover) is an expected, not exceptional, case.
+ */
+export declare function resolveAssetPath(templatePath: string, assetsDir: string, key: string): string | undefined;

package/dist/render/assets.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeAssetKey = normalizeAssetKey;
+exports.resolveAssetPath = resolveAssetPath;
+const fs_1 = require("fs");
+const path_1 = require("path");
+/**
+ * Turns a resolved binding value into a filename stem, e.g. `"Waning Gibbous"` -> `"waning_gibbous"` -
+ * so a `signalk`/`resources` value using SignalK's own display casing (title case, spaces) can match a
+ * file named the conventional snake_case way. Returns `undefined` for anything that can't sensibly name
+ * a file (non-string, empty, or all-punctuation), which callers treat as "no image".
+ */
+function normalizeAssetKey(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const normalized = value
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '_')
+        .replace(/^_+|_+$/g, '');
+    return normalized || undefined;
+}
+/**
+ * Resolves an `assets=` binding to an actual `.svg` file, looked up as `<key>.svg` inside `assetsDir`
+ * resolved relative to the template's own directory (mirroring how a bundled template's relative asset
+ * references keep working whether the template itself is the bundled copy or a user override elsewhere) -
+ * `undefined` if no matching file exists, which callers treat as "no image" rather than an error, since an
+ * unmapped value (e.g. a phase name the asset set doesn't cover) is an expected, not exceptional, case.
+ */
+function resolveAssetPath(templatePath, assetsDir, key) {
+    const candidate = (0, path_1.join)((0, path_1.dirname)(templatePath), assetsDir, `${key}.svg`);
+    return (0, fs_1.existsSync)(candidate) ? candidate : undefined;
+}

package/dist/render/binding.d.ts

@@ -17,6 +17,8 @@ export interface Binding {
     /** Explicit unit-preferences category (e.g. `depth`, `speed`, `temperature`) for a numeric value with no path metadata of its own, e.g. a `source=resources` value - see `../unitCategories.ts`. */
     category?: string;
     round?: number;
+    /** Only meaningful on an `<image>` element's binding (see `SvgRenderer`) - a directory, resolved relative to the template file, of `<value>.svg` files to pick from by the resolved value (see `../assets.ts`'s `normalizeAssetKey`). */
+    assets?: string;
 }
 /**
  * Parses a `<desc>` element's text content into a `Binding`, e.g.
@@ -29,9 +31,11 @@ export interface Binding {
  */
 export declare function parseBinding(desc: string): Binding;
 /**
- * Parses every `<text>` element's `<desc>` binding out of raw SVG source - lets a caller discover what
- * data a template needs before fetching anything, with no separate config declaring it (see
- * `assembleRawContext` in repaintScheduler.ts).
+ * Parses every `<text>` and `<image>` element's `<desc>` binding out of raw SVG source - lets a caller
+ * discover what data a template needs before fetching anything, with no separate config declaring it
+ * (see `assembleRawContext` in repaintScheduler.ts). `<image>` bindings (see `SvgRenderer`) resolve to a
+ * picked asset file rather than substituted text, but still need their underlying value fetched the same
+ * way as a `<text>` binding.
  */
 export declare function findBindings(svgSource: string): Binding[];
 /** Resolves a parsed `Binding` against the render context assembled by `assembleRawContext`. */

package/dist/render/binding.js

@@ -7,7 +7,7 @@ exports.renderBinding = renderBinding;
 const xmldom_1 = require("@xmldom/xmldom");
 const formatters_1 = require("./formatters");
 const SOURCES = ['signalk', 'resources', 'einklabel'];
-const KNOWN_KEYS = new Set(['source', 'context', 'resource', 'path', 'format', 'category', 'round']);
+const KNOWN_KEYS = new Set(['source', 'context', 'resource', 'path', 'format', 'category', 'round', 'assets']);
 /**
  * Parses a `<desc>` element's text content into a `Binding`, e.g.
  * `source=resources,resource=tides,path=extremes[0].level,category=depth,round=2` or, using the
@@ -56,21 +56,26 @@ function parseBinding(desc) {
         format: fields.format,
         category: fields.category,
         round: fields.round !== undefined ? Number(fields.round) : undefined,
+        assets: fields.assets,
     };
 }
 /**
- * Parses every `<text>` element's `<desc>` binding out of raw SVG source - lets a caller discover what
- * data a template needs before fetching anything, with no separate config declaring it (see
- * `assembleRawContext` in repaintScheduler.ts).
+ * Parses every `<text>` and `<image>` element's `<desc>` binding out of raw SVG source - lets a caller
+ * discover what data a template needs before fetching anything, with no separate config declaring it
+ * (see `assembleRawContext` in repaintScheduler.ts). `<image>` bindings (see `SvgRenderer`) resolve to a
+ * picked asset file rather than substituted text, but still need their underlying value fetched the same
+ * way as a `<text>` binding.
  */
 function findBindings(svgSource) {
     const doc = new xmldom_1.DOMParser().parseFromString(svgSource, 'image/svg+xml');
-    const elements = doc.getElementsByTagName('text');
     const bindings = [];
-    for (let i = 0; i < elements.length; i++) {
-        const desc = elements.item(i)?.getElementsByTagName('desc').item(0);
-        if (desc?.textContent) {
-            bindings.push(parseBinding(desc.textContent));
+    for (const tagName of ['text', 'image']) {
+        const elements = doc.getElementsByTagName(tagName);
+        for (let i = 0; i < elements.length; i++) {
+            const desc = elements.item(i)?.getElementsByTagName('desc').item(0);
+            if (desc?.textContent) {
+                bindings.push(parseBinding(desc.textContent));
+            }
         }
     }
     return bindings;

package/dist/render/fonts.d.ts

@@ -6,11 +6,11 @@
  * 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 MUST reference
- * each font by its exact embedded family name (e.g. `font-family:'Roboto Mono'` in the SVG's
- * style=, not the bare `serif`/`monospace` keyword) for resvg to actually pick it - see
- * templates/tide.svg and 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.
+ * 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
@@ -20,3 +20,11 @@
  * 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,6 +1,6 @@
 "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
@@ -9,11 +9,11 @@ exports.DEFAULT_FONT_PATHS = void 0;
  * 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 MUST reference
- * each font by its exact embedded family name (e.g. `font-family:'Roboto Mono'` in the SVG's
- * style=, not the bare `serif`/`monospace` keyword) for resvg to actually pick it - see
- * templates/tide.svg and 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.
+ * 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
@@ -28,3 +28,15 @@ exports.DEFAULT_FONT_PATHS = [
     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.d.ts

@@ -16,6 +16,14 @@ import { Bitmap, Renderer, TemplateContext } from './types';
  * `getElementsByTagName` is a live NodeList, so that previously truncated the
  * whole tree and rendered blank.
  *
+ * Non-textual inclusion: an `<image>` element with a `<desc>` child works the same way, except the
+ * resolved value picks one of a directory of `.svg` files (an `assets=` key, required, names that
+ * directory - see `./assets.ts`) rather than substituting text, and the element is dropped entirely
+ * (rather than showing an error placeholder) whenever the value is unavailable or doesn't map to a
+ * file - e.g. a device without the `derived-data` plugin installed simply shows no moon-phase icon.
+ * The matched file's contents are inlined as a `data:image/svg+xml;base64,...` URI so no filesystem
+ * access happens at resvg-wasm's render step.
+ *
  * resvg-wasm cannot see the host's installed fonts (`loadSystemFonts`/`fontFiles`
  * are silently no-ops under plain Node) - it only renders text if given font
  * bytes directly via `fontBuffers`, read from disk by us. Without at least one

package/dist/render/svgRenderer.js

@@ -5,6 +5,7 @@ const promises_1 = require("fs/promises");
 const xmldom_1 = require("@xmldom/xmldom");
 const resvg_wasm_1 = require("@resvg/resvg-wasm");
 const binding_1 = require("./binding");
+const assets_1 = require("./assets");
 const fonts_1 = require("./fonts");
 let wasmReady;
 function ensureWasmInitialized() {
@@ -13,6 +14,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.
  *
@@ -30,6 +52,14 @@ function ensureWasmInitialized() {
  * `getElementsByTagName` is a live NodeList, so that previously truncated the
  * whole tree and rendered blank.
  *
+ * Non-textual inclusion: an `<image>` element with a `<desc>` child works the same way, except the
+ * resolved value picks one of a directory of `.svg` files (an `assets=` key, required, names that
+ * directory - see `./assets.ts`) rather than substituting text, and the element is dropped entirely
+ * (rather than showing an error placeholder) whenever the value is unavailable or doesn't map to a
+ * file - e.g. a device without the `derived-data` plugin installed simply shows no moon-phase icon.
+ * The matched file's contents are inlined as a `data:image/svg+xml;base64,...` URI so no filesystem
+ * access happens at resvg-wasm's render step.
+ *
  * resvg-wasm cannot see the host's installed fonts (`loadSystemFonts`/`fontFiles`
  * are silently no-ops under plain Node) - it only renders text if given font
  * bytes directly via `fontBuffers`, read from disk by us. Without at least one
@@ -52,7 +82,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++) {
@@ -73,6 +103,44 @@ class SvgRenderer {
                 element.textContent = 'ERROR';
             }
         }
+        // Collected up front, rather than iterated live like the `<text>` loop above - some of these get
+        // removed outright (see below), and removing from a live NodeList while iterating it by index would
+        // skip whatever shifts into the removed slot.
+        const imageElements = [];
+        const rawImageElements = doc.getElementsByTagName('image');
+        for (let i = 0; i < rawImageElements.length; i++) {
+            const element = rawImageElements.item(i);
+            if (element)
+                imageElements.push(element);
+        }
+        for (const element of imageElements) {
+            const descElement = element.getElementsByTagName('desc').item(0);
+            if (!descElement)
+                continue;
+            // Same one-field-at-a-time isolation as the `<text>` loop - and the same "no value" outcome
+            // (here, dropping the element rather than blanking to 'ERROR' text) for a value that isn't
+            // available at all as for one that doesn't map to any asset file, per the binding's contract.
+            try {
+                const binding = (0, binding_1.parseBinding)(descElement.textContent ?? '');
+                if (!binding.assets) {
+                    throw new Error('an <image> binding requires an "assets" key naming the directory to pick a file from');
+                }
+                const key = (0, assets_1.normalizeAssetKey)((0, binding_1.resolveBinding)(binding, context));
+                const assetPath = key && (0, assets_1.resolveAssetPath)(svgTemplatePath, binding.assets, key);
+                if (!assetPath) {
+                    element.parentNode?.removeChild(element);
+                    continue;
+                }
+                const assetSource = await (0, promises_1.readFile)(assetPath, 'utf-8');
+                const dataUri = `data:image/svg+xml;base64,${Buffer.from(assetSource).toString('base64')}`;
+                const hrefAttr = element.getAttribute('href') !== null ? 'href' : 'xlink:href';
+                element.setAttribute(hrefAttr, dataUri);
+            }
+            catch (err) {
+                console.error(`image "${descElement.textContent}" failed to render: ${err.message}`);
+                element.parentNode?.removeChild(element);
+            }
+        }
         const svgOutput = new xmldom_1.XMLSerializer().serializeToString(doc);
         const resvg = new resvg_wasm_1.Resvg(svgOutput, {
             fitTo: { mode: 'width', value: width },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhizomatics/signalk-einklabel-plugin",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "SignalK plugin that renders selected SignalK data to eInk Electronic Shelf Labels",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,7 @@
   "files": [
     "dist",
     "templates",
+    "resources",
     "docs",
     "CHANGELOG.md",
     "README.md"

package/resources/svg/lunar_phases/first_quarter.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="first_quarter.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2">
+    <path
+       d="M 749.07161 200.5305 A 168.70027 168.70027 0 1 1  411.67107,200.5305 A 168.70027 168.70027 0 1 1  749.07161 200.5305 z"
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     id="layer3"
+     style="fill:#ffff00">
+    <path
+       d="M 199.86125,368.70045 C 292.83638,368.70045 368.20758,293.17071 368.20758,199.99995 C 368.20758,106.82922 292.83638,31.29945 199.86125,31.29945 C 199.12886,143.76656 199.72222,256.23321 199.86125,368.70045 z "
+       style="fill:#ffff00;fill-opacity:1;stroke:none"
+       id="path7307" />
+  </g>
+</svg>

package/resources/svg/lunar_phases/full_moon.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="full_moon.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2"
+     style="fill:#ffff00">
+    <path
+       d="M 749.07161 200.5305 A 168.70027 168.70027 0 1 1  411.67107,200.5305 A 168.70027 168.70027 0 1 1  749.07161 200.5305 z"
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     id="layer3" />
+</svg>

package/resources/svg/lunar_phases/new_moon.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="new_moon.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2">
+    <path
+       d="M 749.07161 200.5305 A 168.70027 168.70027 0 1 1  411.67107,200.5305 A 168.70027 168.70027 0 1 1  749.07161 200.5305 z"
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+</svg>

package/resources/svg/lunar_phases/third_quarter.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="third_quarter.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2">
+    <path
+       d="M 749.07161,200.5305 C 749.07161,293.70109 673.54193,369.23077 580.37134,369.23077 C 487.20075,369.23077 411.67107,293.70109 411.67107,200.5305 C 411.67107,107.35991 487.20075,31.83023 580.37134,31.83023 C 673.54193,31.83023 749.07161,107.35991 749.07161,200.5305 z "
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     transform="matrix(-1,0,0,1,399.50816,0)"
+     id="layer3"
+     style="fill:#ffff00">
+    <path
+       d="M 199.86125,368.70045 C 292.83638,368.70045 368.20758,293.17071 368.20758,199.99995 C 368.20758,106.82922 292.83638,31.29945 199.86125,31.29945 C 199.12886,143.76656 199.72222,256.23321 199.86125,368.70045 z "
+       style="fill:#ffff00;fill-opacity:1;stroke:none"
+       id="path7307" />
+  </g>
+</svg>

package/resources/svg/lunar_phases/waning_crescent.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="waning_crescent.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2">
+    <path
+       d="M 749.07161,200.5305 C 749.07161,293.70109 673.54193,369.23077 580.37134,369.23077 C 487.20075,369.23077 411.67107,293.70109 411.67107,200.5305 C 411.67107,107.35991 487.20075,31.83023 580.37134,31.83023 C 673.54193,31.83023 749.07161,107.35991 749.07161,200.5305 z "
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#00000f;fill-opacity:0.94117647;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     id="layer3"
+     style="fill:#ffff00">
+    <path
+       d="M 199.97697,368.70045 C 106.80628,368.70045 31.27656,293.17073 31.27656,200 C 31.27656,106.8293 106.80628,31.299555 199.97697,31.299555 C 153.39106,31.299555 115.62676,106.8293 115.62676,200 C 115.62676,293.17073 153.39106,368.70045 199.97697,368.70045 z "
+       style="fill:#ffff00;fill-opacity:1;stroke:none"
+       id="path7307" />
+  </g>
+</svg>

package/resources/svg/lunar_phases/waning_gibbous.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="waning_gibbous.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2"
+     style="fill:#ffff00">
+    <path
+       d="M 749.07161 200.5305 A 168.70027 168.70027 0 1 1  411.67107,200.5305 A 168.70027 168.70027 0 1 1  749.07161 200.5305 z"
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     id="layer3">
+    <path
+       d="M 200.0278,368.70045 C 293.19849,368.70045 368.72822,293.17073 368.72822,200 C 368.72822,106.8293 293.19849,31.299555 200.0278,31.299555 C 246.61371,31.299555 284.37801,106.8293 284.37801,200 C 284.37801,293.17073 246.61371,368.70045 200.0278,368.70045 z "
+       style="fill:#00000f;fill-opacity:0.94117647;stroke:none"
+       id="path7307" />
+  </g>
+</svg>

package/resources/svg/lunar_phases/waxing_crescent.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="waxing_crescent.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2">
+    <path
+       d="M 749.07161 200.5305 A 168.70027 168.70027 0 1 1  411.67107,200.5305 A 168.70027 168.70027 0 1 1  749.07161 200.5305 z"
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     id="layer3"
+     style="fill:#ffff00">
+    <path
+       d="M 199.862,368.70045 C 293.03269,368.70045 368.56242,293.17073 368.56242,200 C 368.56242,106.8293 293.03269,31.299555 199.862,31.299555 C 246.44791,31.299555 284.21221,106.8293 284.21221,200 C 284.21221,293.17073 246.44791,368.70045 199.862,368.70045 z "
+       style="fill:#ffff00;fill-opacity:1;stroke:none"
+       id="path7307" />
+  </g>
+</svg>

package/resources/svg/lunar_phases/waxing_gibbous.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   width="400"
+   height="400"
+   id="svg2"
+   sodipodi:docname="waxing_gibbous.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.59"
+     inkscape:cx="200.84746"
+     inkscape:cy="200"
+     inkscape:window-width="1312"
+     inkscape:window-height="449"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4" />
+  <g
+     id="layer2"
+     style="fill:#ffff00">
+    <path
+       d="M 749.07161 200.5305 A 168.70027 168.70027 0 1 1  411.67107,200.5305 A 168.70027 168.70027 0 1 1  749.07161 200.5305 z"
+       transform="translate(-380.37134,-0.5305023)"
+       style="fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:3.54330707;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path6166" />
+  </g>
+  <g
+     id="layer3">
+    <path
+       d="M 199.97697,368.70045 C 106.80628,368.70045 31.27656,293.17073 31.27656,200 C 31.27656,106.8293 106.80628,31.299555 199.97697,31.299555 C 153.39106,31.299555 115.62676,106.8293 115.62676,200 C 115.62676,293.17073 153.39106,368.70045 199.97697,368.70045 z "
+       style="fill:#00000f;fill-opacity:0.94117647;stroke:none"
+       id="path7307" />
+  </g>
+</svg>

package/templates/tide.svg

@@ -7,13 +7,13 @@
    id="svg1"
    sodipodi:docname="tide.svg"
    inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xml:space="preserve"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs1" />
-  <sodipodi:namedview
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><sodipodi:namedview
      id="namedview1"
      pagecolor="#ffffff"
      bordercolor="#000000"
@@ -23,16 +23,16 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:zoom="1.3906433"
-     inkscape:cx="176.537"
-     inkscape:cy="132.67241"
+     inkscape:cx="249.88435"
+     inkscape:cy="101.03238"
      inkscape:window-width="1488"
      inkscape:window-height="674"
      inkscape:window-x="24"
      inkscape:window-y="33"
      inkscape:window-maximized="0"
      inkscape:current-layer="svg1"
-     showgrid="true">
-    <inkscape:grid
+     showgrid="true"
+     showguides="true"><inkscape:grid
        id="grid1"
        units="px"
        originx="0"
@@ -47,240 +47,226 @@
        dotted="false"
        gridanglex="30"
        gridanglez="30"
-       visible="true" />
-  </sodipodi:namedview>
-  <rect
+       visible="true" /></sodipodi:namedview><rect
      x="1.0169492"
      y="2.0798673e-08"
      width="416"
      height="240"
      fill="#ffffff"
-     id="rect1" />
-  <rect
+     id="rect1" /><rect
      style="fill:#ffff00;stroke:#000000;stroke-width:0.614045"
      id="rect2"
      width="416.94916"
      height="18.410578"
      x="-24.928873"
      y="-242.40596"
-     transform="matrix(1,0,-0.1068988,-0.99426991,0,0)" />
-  <text
+     transform="matrix(1,0,-0.1068988,-0.99426991,0,0)" /><text
      id="station.name"
      x="11.235578"
      y="26.851856"
      font-size="18"
      font-family="serif"
      fill="yellow"
-     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:32px;font-family:'Roboto Serif 20pt';-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"
+     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="desc1">source=resources,resource=tides,path=station.name</desc></text><text
      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:'Roboto';-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"
+     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.3332995px;font-family:'Roboto';-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
+       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"
      y="201.9895"
      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:'Roboto';-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"
+     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="tspan3">27 Jun 26 18:05</tspan></text><text
      id="extremes.0"
      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:22.6667px;font-family:Roboto;-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
+     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="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:22.6667px;font-family:Roboto;-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
+     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.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:22.6667px;font-family:Roboto;-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
+     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"
+     x="239.09819"
      y="204.67754"
      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:Roboto;-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"
+     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="desc11">source=einklabel,path=local_zone</desc></text><text
      id="lat"
-     x="289.84515"
+     x="282.65424"
      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:Roboto;-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
+     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="289.84515"
-       y="24.967674">0.1m</tspan></text>
-  <text
+       x="282.65424"
+       y="24.967674">0.0m</tspan></text><text
      id="hat"
-     x="363.64786"
-     y="25.766863"
+     x="360.77148"
+     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:Roboto;-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
+     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="363.64786"
-       y="25.766863">6.0m</tspan></text>
-  <text
+       x="360.77148"
+       y="24.967674">9.9m</tspan></text><text
      id="extremes.2.level"
-     x="334.61356"
-     y="159.19211"
+     x="322.52386"
+     y="158.08005"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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="334.61356"
-       y="159.19211"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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
+       x="322.52386"
+       y="158.08005"
+       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="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.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;stroke-width:1.51352"
+     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="desc10">source=resources,resource=tides,path=extremes[2].time,format=local_time</desc></text><text
      id="extremes.1.level"
-     x="341.23608"
-     y="110.25762"
+     x="328.79895"
+     y="109.17664"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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="341.23608"
-       y="110.25762"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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
+       x="328.79895"
+       y="109.17664"
+       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="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.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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="desc8">source=resources,resource=tides,path=extremes[1].time,format=local_time</desc></text><text
      id="extremes.0.time"
      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.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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="desc3">source=resources,resource=tides,path=extremes[0].time,format=local_time</desc></text><text
      id="extremes.0.time-8"
      x="10.326324"
      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:22.6667px;font-family:Roboto;-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"
+     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="desc2">source=resources,resource=tides,path=extremes[0].time,format=day_mon</desc>27 Jun</text><text
      id="extremes.0.time-8-5"
      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:22.6667px;font-family:Roboto;-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"
+     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="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="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:22.6667px;font-family:Roboto;-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"
+     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="desc9">source=resources,resource=tides,path=extremes[2].time,format=day_mon</desc>27 Jun</text><text
      id="extremes.0.level"
-     x="334.47769"
-     y="65.931427"
+     x="322.34219"
+     y="64.82357"
      font-size="14"
      font-family="monospace"
      fill="red"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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="334.47769"
-       y="65.931427"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:37.3333px;font-family:'Roboto Mono';-inkscape-font-specification:'Roboto Mono, Bold',monospaced;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
+       x="322.34219"
+       y="64.82357"
+       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:Roboto;-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"
+     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="337.254"
+     y="25.327612"
      id="text19"><tspan
        sodipodi:role="line"
        id="tspan19"
-       x="340.84946"
-       y="25.168207">-&gt;</tspan></text>
-</svg>
+       x="337.254"
+       y="25.327612">-&gt;</tspan></text><image
+     preserveAspectRatio="none"
+     inkscape:svg-dpi="96"
+     width="71.375114"
+     height="70.656021"
+     xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjwh&#10;LS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8&#10;c3ZnCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJo&#10;dHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4wIgogICB3aWR0aD0iNDAw&#10;IgogICBoZWlnaHQ9IjQwMCIKICAgaWQ9InN2ZzIiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnM0IiAv&#10;PgogIDxnCiAgICAgaWQ9ImxheWVyMSI+CiAgICA8cmVjdAogICAgICAgd2lkdGg9IjQwMCIKICAg&#10;ICAgIGhlaWdodD0iNDAwIgogICAgICAgeD0iMCIKICAgICAgIHk9Ii0xLjU0NTQ0MzVlLTAxNCIK&#10;ICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwYmI7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ry&#10;b2tlLXdpZHRoOjMuNTQzMzA3MDc7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5&#10;Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0MzIzOSIgLz4KICA8L2c+CiAg&#10;PGcKICAgICBpZD0ibGF5ZXIyIj4KICAgIDxwYXRoCiAgICAgICBkPSJNIDc0OS4wNzE2MSAyMDAu&#10;NTMwNSBBIDE2OC43MDAyNyAxNjguNzAwMjcgMCAxIDEgIDQxMS42NzEwNywyMDAuNTMwNSBBIDE2&#10;OC43MDAyNyAxNjguNzAwMjcgMCAxIDEgIDc0OS4wNzE2MSAyMDAuNTMwNSB6IgogICAgICAgdHJh&#10;bnNmb3JtPSJ0cmFuc2xhdGUoLTM4MC4zNzEzNCwtMC41MzA1MDIzKSIKICAgICAgIHN0eWxlPSJm&#10;aWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNTQz&#10;MzA3MDc7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9w&#10;YWNpdHk6MSIKICAgICAgIGlkPSJwYXRoNjE2NiIgLz4KICA8L2c+CiAgPGcKICAgICBpZD0ibGF5&#10;ZXIzIj4KICAgIDxwYXRoCiAgICAgICBkPSJNIDIwMC4wMjc4LDM2OC43MDA0NSBDIDI5My4xOTg0&#10;OSwzNjguNzAwNDUgMzY4LjcyODIyLDI5My4xNzA3MyAzNjguNzI4MjIsMjAwIEMgMzY4LjcyODIy&#10;LDEwNi44MjkzIDI5My4xOTg0OSwzMS4yOTk1NTUgMjAwLjAyNzgsMzEuMjk5NTU1IEMgMjQ2LjYx&#10;MzcxLDMxLjI5OTU1NSAyODQuMzc4MDEsMTA2LjgyOTMgMjg0LjM3ODAxLDIwMCBDIDI4NC4zNzgw&#10;MSwyOTMuMTcwNzMgMjQ2LjYxMzcxLDM2OC43MDA0NSAyMDAuMDI3OCwzNjguNzAwNDUgeiAiCiAg&#10;ICAgICBzdHlsZT0iZmlsbDojMDAwMDBmO2ZpbGwtb3BhY2l0eTowLjk0MTE3NjQ3O3N0cm9rZTpu&#10;b25lIgogICAgICAgaWQ9InBhdGg3MzA3IiAvPgogIDwvZz4KPC9zdmc+Cg==&#10;"
+     id="moon_phase"
+     x="340.3974"
+     y="90.153488"><desc
+       id="desc22">path=environment.moonPhase.name,assets=../resources/svg/lunar_phases</desc></image></svg>