@rhizomatics/signalk-einklabel-plugin 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 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

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,6 +104,18 @@ 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 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.

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/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() {
@@ -51,6 +52,14 @@ function expandGenericFontFamilies(svgSource) {
  * `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
@@ -94,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.1",
+  "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,24 +47,20 @@
        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"
@@ -73,8 +69,7 @@
      fill="yellow"
      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"
@@ -88,8 +83,7 @@
        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: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
+       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"
@@ -100,8 +94,7 @@
      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"
@@ -109,8 +102,7 @@
      font-family="monospace"
      fill="black"
      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="desc13">source=resources,resource=tides,path=extremes[0].label</desc>High or Low</text><text
      id="extremes.1"
      x="7.6000967"
      y="117.85719"
@@ -118,8 +110,7 @@
      font-family="monospace"
      fill="black"
      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="desc14">source=resources,resource=tides,path=extremes[1].label</desc>High or Low</text><text
      id="extremes.2"
      x="7.2470098"
      y="176.12112"
@@ -127,20 +118,18 @@
      font-family="monospace"
      fill="red"
      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="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: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"
@@ -149,12 +138,11 @@
        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"
@@ -162,26 +150,24 @@
        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: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"
+     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: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
+       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"
@@ -190,25 +176,23 @@
      fill="red"
      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: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"
+     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: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
+       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"
@@ -217,8 +201,7 @@
      fill="red"
      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"
@@ -227,8 +210,7 @@
      fill="red"
      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"
@@ -237,8 +219,7 @@
      fill="red"
      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"
@@ -247,8 +228,7 @@
      fill="red"
      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"
@@ -257,30 +237,36 @@
      fill="red"
      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: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"
+     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: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
+       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: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"
+     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>