@panoramax/web-viewer 4.0.2-develop-9b499e28 → 4.0.2-develop-e389d775

package/src/components/menus/PictureMetadata.js

@@ -9,7 +9,10 @@ import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
 import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { titles, textarea } from "../styles";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
+import { faSvg, titles, textarea, hidden } from "../styles";
 import { createWebComp } from "../../utils/widgets";
 import { getGPSPrecision } from "../../utils/picture";
 import {
@@ -31,7 +34,7 @@ const missing = () => fa(faQuestion, {styles: {height: "16px"}});
  */
 export default class PictureMetadata extends LitElement {
 	/** @private */
-	static styles = [ titles, textarea, css`
+	static styles = [ faSvg, titles, textarea, hidden, css`
 		div[slot="content"] {
 			padding: 5px 10px;
 			background-color: #ededed;
@@ -56,13 +59,24 @@ export default class PictureMetadata extends LitElement {
 		.data-block div {
 			font-size: 0.8em;
 		}
+
+		pnx-semantics-table {
+			overflow-x: auto;
+  			display: block;
+		}
 	` ];
 
 	/** @private */
 	static properties = {
 		_meta: {state: true},
+		_semanticsPicShowAll: {state: true},
 	};
 
+	constructor() {
+		super();
+		this._semanticsPicShowAll = false;
+	}
+
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
@@ -205,6 +219,51 @@ export default class PictureMetadata extends LitElement {
 			];
 		}
 
+		// Semantics data
+		const hasSemantics = (
+			(this._meta.properties.semantics || []).length > 0
+			|| (this._meta.properties.annotations || []).length > 0
+		);
+		let semanticsData = [];
+		if(hasSemantics) {
+			// Full list of picture tags
+			semanticsData.push({
+				title: this._parent?._t.pnx.semantics_tags_picture,
+				style: "width: 100%",
+				content: html`${this._meta.properties.semantics?.length > 0
+					? html`
+						<pnx-button
+							kind="outline"
+							size="sm"
+							style="width: 100%"
+							@click=${() => this._semanticsPicShowAll = !this._semanticsPicShowAll}
+						>
+							${this._semanticsPicShowAll ? fa(faChevronUp) : fa(faChevronDown)}
+							${this._semanticsPicShowAll ? this._parent?._t.pnx.semantics_hide_all_tags : this._parent?._t.pnx.semantics_show_all_tags}
+						</pnx-button>
+						<pnx-semantics-table
+							._t=${this._parent?._t}
+							.source=${this._meta.properties}
+							style="margin-top: 5px"
+							class=${this._semanticsPicShowAll ? "":"pnx-hidden"}
+						/>
+					`
+					: this._parent?._t.pnx.semantics_tags_picture_none
+				}`
+			});
+
+			// Annotations (features in picture)
+			semanticsData.push({
+				title: this._parent?._t.pnx.semantics_features,
+				style: "width: 100%",
+				content: html`
+					${this._meta.properties.annotations?.length > 0
+					? html`<pnx-annotations-list ._parent=${this._parent} />`
+					: this._parent?._t.pnx.semantics_features_none}
+				`
+			});
+		}
+
 		// EXIF data
 		const exifData = Object.entries(this._meta.properties.exif)
 			.sort()
@@ -327,6 +386,11 @@ export default class PictureMetadata extends LitElement {
 				qualityData
 			) : nothing}
 
+			${hasSemantics ? this._toTab( // Semantics
+				html`${fa(faTags)} ${this._parent?._t.pnx.semantics_title}`,
+				semanticsData
+			) : nothing}
+
 			${this._meta.properties?.exif ? this._toTab( // EXIF
 				html`${fa(faScroll)} ${this._parent?._t.pnx.metadata_exif}`,
 				exifData

package/src/components/menus/index.js

@@ -3,6 +3,7 @@
  * @module Panoramax:components:menus
  */
 
+export {default as AnnotationsList} from "./AnnotationsList";
 export {default as MapFilters} from "./MapFilters";
 export {default as MapLayers} from "./MapLayers";
 export {default as MapBackground} from "./MapBackground";

package/src/components/styles.js

@@ -27,6 +27,11 @@ export const panel = css`
 	}
 `;
 
+// Hidden
+export const hidden = css`
+	.pnx-hidden { display: none !important; }
+`;
+
 // Font Awesome SVG
 export const faSvg = css`
 	.svg-inline--fa {
@@ -442,3 +447,32 @@ export const noprint = css`
 		.pnx-print-hidden { display: none !important; }
 	}
 `;
+
+// Data table
+export const table = css`
+	table {
+		border-collapse: collapse;
+		font-size: 0.9rem;
+		width: 100%;
+		max-width: 100%;
+		font-family: var(--font-family);
+		background: var(--white);
+	}
+
+	th, td {
+		padding: 10px;
+		text-align: left;
+		border-bottom: 1px solid #ddd;
+	}
+
+	th { font-weight: 600; }
+`;
+
+// Iconify icons
+export const iconify = css`
+	iconify-icon {
+		display: inline-block;
+		width: 1em;
+		height: 1em;
+	}
+`;

package/src/components/ui/HashTags.js

@@ -0,0 +1,98 @@
+import { LitElement, html, css, nothing } from "lit";
+import { getHashTags, hasAnnotations } from "../../utils/picture";
+import { fa } from "../../utils/widgets";
+import { faDrawPolygon } from "@fortawesome/free-solid-svg-icons/faDrawPolygon";
+
+/**
+ * HashTags component shows the list of hashtags associated to a picture.
+ * @class Panoramax.components.ui.HashTags
+ * @element pnx-hashtags
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-hashtags ._parent=${viewer} />
+ * ```
+ */
+export default class HashTags extends LitElement {
+	/** @private */
+	static styles = css`
+		div {
+			background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
+			margin-top: -10px;
+			margin-right: -10px;
+			padding: 5px 10px;
+			border-bottom-left-radius: 10px;
+			font-family: var(--font-family);
+			color: white;
+			font-size: 0.8em;
+		}
+	`;
+
+	/** @private */
+	static properties = {
+		_tags: {state: true},
+		_visible: {state: true},
+		_annotationsToggled: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._tags = [];
+		this._visible = false;
+		this._annotationsToggled = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._parent.onceReady().then(() => {
+			this._tags = getHashTags(this._parent?.psv?.getPictureMetadata?.());
+
+			// Component visibility : only if seen at least one pic with semantics
+			if(
+				!this._visible && (
+					this._tags.length > 0
+					|| hasAnnotations(this._parent?.psv?.getPictureMetadata?.())
+				)
+			) {
+				this._visible = true;
+				this._parent.psv.toggleAllAnnotations(true);
+			}
+
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._tags = getHashTags(this._parent.psv.getPictureMetadata());
+				if(
+					!this._visible && (
+						this._tags.length > 0 ||
+						hasAnnotations(this._parent.psv.getPictureMetadata())
+					)
+				) {
+					this._visible = true;
+					this._parent.psv.toggleAllAnnotations(true);
+				}
+			});
+
+			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+			this._parent.psv.addEventListener("annotations-toggled", e => {
+				this._annotationsToggled = e.detail.visible;
+			});
+		});
+	}
+
+	/** @private */
+	render() {
+		return this._visible ? html`<div>
+			${this._tags.join(" ")}
+			<pnx-button
+				kind="outline"
+				style="vertical-align: middle"
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
+				active=${this._annotationsToggled ? "" : nothing}
+				@click=${() => this._parent.psv.toggleAllAnnotations(!this._annotationsToggled)}
+			>${fa(faDrawPolygon)}</pnx-button>
+		</div>` : nothing;
+	}
+}
+
+customElements.define("pnx-hashtags", HashTags);

package/src/components/ui/ListItem.js

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+
+/**
+ * ListItem is a list entry, in a Material Design fashion.
+ * @class Panoramax.components.ui.ListItem
+ * @element pnx-list-item
+ * @slot `icon` The left icon (symbol for this item)
+ * @slot `action` The right icon (symbol for an interactive action)
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-list-item title="My feature" subtitle="It is very cool">
+ *   <img src="..." slot="icon" />
+ *   <img src="..." slot="action" />
+ * </pnx-list-item>
+ * ```
+ */
+export default class ListItem extends LitElement {
+	/** @private */
+	static styles = css`
+		.list-item {
+			display: flex;
+			align-items: center;
+			padding: 8px 16px;
+			cursor: pointer;
+			border-bottom: 1px solid #ddd;
+			font-family: var(--font-family);
+			background: var(--white);
+			min-height: 50px;
+			box-sizing: border-box;
+		}
+		.list-item:hover { background: var(--widget-bg-hover); }
+		.icon {
+			margin-right: 16px;
+			display: flex;
+			align-items: center;
+			gap: 10px;
+		}
+		.action { margin-left: 16px; }
+		.content {
+			flex: 1;
+		}
+		.title {
+			font-weight: 600;
+		}
+		.subtitle {
+			font-size: 0.9em;
+			color: var(--grey-dark);
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.ListItem#
+	 * @type {Object}
+	 * @property {string} title The item title
+	 * @property {string} [subtitle] The item subtitle
+	 */
+	static properties = {
+		title: { type: String },
+		subtitle: { type: String },
+	};
+
+	/** @private */
+	render() {
+		return html`
+			<div class="list-item">
+				<div class="icon">
+					<slot name="icon"></slot>
+				</div>
+				<div class="content">
+					<div class="title">${this.title}</div>
+					<div class="subtitle">${this.subtitle}</div>
+				</div>
+				<div class="action">
+					<slot name="action"></slot>
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-list-item", ListItem);

package/src/components/ui/Photo.js

@@ -14,6 +14,7 @@ import "@photo-sphere-viewer/gallery-plugin/index.css";
 import "@photo-sphere-viewer/markers-plugin/index.css";
 import { Viewer as PSViewer } from "@photo-sphere-viewer/core";
 import { VirtualTourPlugin } from "@photo-sphere-viewer/virtual-tour-plugin";
+import { MarkersPlugin } from "@photo-sphere-viewer/markers-plugin";
 import PhotoAdapter from "../../utils/PhotoAdapter";
 
 
@@ -77,6 +78,7 @@ PSViewer.useNewAnglesOrder = true;
  * @fires Panoramax.components.ui.Photo#sequence-stopped
  * @fires Panoramax.components.ui.Photo#pictures-navigation-changed
  * @fires Panoramax.components.ui.Photo#ready
+ * @fires Panoramax.components.ui.Photo#annotations-toggled
  * @example
  * const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500})
  */
@@ -112,6 +114,7 @@ export default class Photo extends PSViewer {
 						linkOverlapAngle: Math.PI / 6,
 					}
 				}],
+				[MarkersPlugin, {}],
 			],
 			...options
 		});
@@ -126,6 +129,8 @@ export default class Photo extends PSViewer {
 		this._myVTour.config.transitionOptions = this._psvNodeTransition.bind(this);
 		this._clearArrows = this._myVTour.arrowsRenderer.clear.bind(this._myVTour.arrowsRenderer);
 		this._myVTour.arrowsRenderer.clear = () => {};
+		this._myMarkers = this.getPlugin(MarkersPlugin);
+		this._annotationsVisible = false;
 		this._sequencePlaying = false;
 		this._picturesNavigation = this._options.picturesNavigation || "any";
 
@@ -463,6 +468,11 @@ export default class Photo extends PSViewer {
 			else {
 				this.setOption("downloadUrl", null);
 			}
+
+			// Show annotations
+			if(this._annotationsVisible) {
+				this.toggleAllAnnotations(true);
+			}
 		}
 
 		this._onTilesStartLoading();
@@ -888,6 +898,133 @@ export default class Photo extends PSViewer {
 		}
 	}
 
+	/**
+	 * Are there any picture annotations shown ?
+	 * @returns {boolean} True if annotations are visible
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	areAnnotationsVisible() {
+		return this._annotationsVisible;
+	}
+
+	/**
+	 * Toggle visibility of picture annotations
+	 * @param {boolean} visible True to make visible, false to hide
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	toggleAllAnnotations(visible) {
+		const meta = this.getPictureMetadata();
+		if(!meta) {
+			this._myMarkers.clearMarkers();
+			throw new Error("No picture currently selected");
+		}
+
+		if(!visible) { this._myMarkers.clearMarkers(); }
+		else {
+			let annotations = meta.properties.annotations;
+			if(annotations.length === 0) { console.warn("No annotation available on picture", meta.id); }
+
+			const picBData = this.state.textureData.panoData?.baseData;
+
+			annotations = annotations.map(a => {
+				// Get original HD picture dimensions
+				const origPicDim = this.getPictureMetadata().properties["pers:interior_orientation"].sensor_array_dimensions;
+
+				if(!origPicDim) {
+					console.warn("Picture lacks pers:interior_orientation.sensor_array_dimensions property, can't compute marker");
+					return null;
+				}
+
+				const shape = a.shape.coordinates.map(c1 => c1.map(c2 => {
+					// Px coordinates in shown image
+					const pxShown = [
+						c2[0] * picBData.croppedWidth / origPicDim[0],
+						c2[1] * picBData.croppedHeight / origPicDim[1]
+					];
+
+					// Coords in %
+					const pct = [
+						(picBData.croppedX + pxShown[0]) / picBData.fullWidth,
+						(picBData.croppedY + pxShown[1]) / picBData.fullHeight
+					];
+
+					// Coords in radians as center offset
+					return [
+						(pct[0] - 0.5) * 2 * Math.PI,
+						(0.5 - pct[1]) * Math.PI,
+					];
+				}));
+
+				return {
+					id: `annotation-${a.id}`,
+					polygon: shape,
+					data: { id: a.id },
+					svgStyle: {
+						stroke: "var(--orange)",
+						strokeWidth: "3px",
+						fill: "var(--orange-transparent)",
+						cursor: "pointer",
+					},
+				};
+			});
+			this._myMarkers.setMarkers(annotations);
+		}
+
+		const sendEvent = this._annotationsVisible != visible;
+		this._annotationsVisible = visible;
+
+		if(sendEvent) {
+			/**
+			 * Event for pictures annotation visibility change
+			 * @event Panoramax.components.ui.Photo#annotations-toggled
+			 * @type {CustomEvent}
+			 * @property {boolean} detail.visible True if they are visible
+			 */
+			this.dispatchEvent(new CustomEvent("annotations-toggled", { detail: { visible } }));
+		}
+	}
+	
+	/**
+	 * Make view centered and zoomed on given annotation.
+	 * @param {string} id The annotation UUID
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	focusOnAnnotation(id) {
+		if(!this.areAnnotationsVisible()) { this.toggleAllAnnotations(true); }
+		this.unfocusAnnotation();
+
+		const annotationId = `annotation-${id}`;
+		this._myMarkers.updateMarker({
+			id: annotationId,
+			svgStyle: {
+				stroke: "var(--red)",
+				strokeWidth: "3px",
+				fill: "var(--red-transparent)",
+			}
+		});
+		this._myMarkers.gotoMarker(annotationId, 0);
+		this.zoom(65);
+	}
+
+	/**
+	 * Remove focus styling on annotations.
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	unfocusAnnotation() {
+		Object.keys(this._myMarkers.markers)
+			.filter(id => id.startsWith("annotation-"))
+			.forEach(id => {
+				this._myMarkers.updateMarker({
+					id,
+					svgStyle: {
+						stroke: "var(--orange)",
+						strokeWidth: "3px",
+						fill: "var(--orange-transparent)",
+					}
+				});
+			});
+	}
+
 	/**
 	 * Force reload of texture and tiles.
 	 * @memberof Panoramax.components.ui.Photo#

package/src/components/ui/SemanticsTable.js

@@ -0,0 +1,87 @@
+import { LitElement, html, css, nothing } from "lit";
+import { table } from "../styles";
+import { groupByPrefix } from "../../utils/semantics";
+
+/**
+ * Semantics Tables display all semantics tags from either a picture or an annotation.
+ * 
+ * @class Panoramax.components.ui.SemanticsTable
+ * @element pnx-semantics-table
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-semantics-table source=${picture.properties} ._t=${viewer._t} />
+ * ```
+ */
+export default class SemanticsTable extends LitElement {
+	/** @private */
+	static styles = [ table, css`
+		th:first-child, td:first-child { width: 30%; }
+		td { vertical-align: top; }
+
+		td small { color: var(--grey-semi-dark); }
+		.qualifiers { margin-top: 5px; }
+		.qualifiers > b { margin: 8px 0; }
+		.qualifiers ul {
+			list-style: none;
+			margin: 0px 0px 0px 15px;
+			padding: 0;
+		}
+
+		img.prefix-logo {
+			max-width: 15px;
+			max-height: 15px;
+			aspect-ratio: 1;
+			vertical-align: middle;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SemanticsTable#
+	 * @type {Object}
+	 * @property {object} [source] The picture or annotation feature (having a `semantics` property)
+	 */
+	static properties = {
+		source: {type: Object},
+	};
+
+	render() {
+		/* eslint-disable indent */
+		if(!this.source) { return nothing; }
+
+		const groups = groupByPrefix(this.source.semantics);
+
+		return html`<table>
+			<thead>
+				<tr><th>${this._t.pnx.semantics_key}</th><th>${this._t.pnx.semantics_value}</th></tr>
+			</thead>
+			<tbody>
+				${groups.map(g => g.tags.map(tag => html`
+					<tr>
+						<td>
+							${g.prefix != ""
+								? (g.logo
+									? html`<img src=${g.logo} class="prefix-logo" alt=${g.prefix} title=${g.title} />`
+									: html`<small>(${g.prefix})</small>`)
+								: nothing
+							}
+							${g.key_transform ? g.key_transform(tag, this._t) : tag.key}
+						</td>
+						<td>
+							${g.value_transform ? g.value_transform(tag, this._t) : tag.value}
+							${tag.qualifiers ? html`<div class="qualifiers">
+								<b>${this._t.pnx.semantics_qualifiers}</b>
+								<ul>
+									${tag.qualifiers.map(q => html`<li>${q.subkey} = ${q.value}</li>`)}
+								</ul>
+							</div>` : nothing}
+						</td>
+					</tr>
+				`))}
+			</tbody>
+		</table>`;
+	}
+}
+
+customElements.define("pnx-semantics-table", SemanticsTable);

package/src/components/ui/index.js

@@ -7,8 +7,10 @@ export {default as ButtonGroup} from "./ButtonGroup";
 export {default as Button} from "./Button";
 export {default as CopyButton} from "./CopyButton";
 export {default as Grade} from "./Grade";
+export {default as HashTags} from "./HashTags";
 export {default as LinkButton} from "./LinkButton";
 export {default as ListGroup} from "./ListGroup";
+export {default as ListItem} from "./ListItem";
 export {default as Loader} from "./Loader";
 export {default as Map} from "./Map";
 export {default as MapMore} from "./MapMore";
@@ -17,6 +19,7 @@ export {default as Popup} from "./Popup";
 export {default as ProgressBar} from "./ProgressBar";
 export {default as QualityScore} from "./QualityScore";
 export {default as SearchBar} from "./SearchBar";
+export {default as SemanticsTable} from "./SemanticsTable";
 export {default as TogglableGroup} from "./TogglableGroup";
 import * as widgets from "./widgets";
 export {widgets};

package/src/img/osm.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="240mm"
+   height="239.99869mm"
+   viewBox="0 0 240 239.99869"
+   id="svg6743"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-30,-27.000656)">
+    <g
+       id="g7426"
+       transform="translate(322.142,-53.972906)">
+      <path
+         style="display:inline;fill:#76c551;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.61532"
+         id="path33449"
+         d="m -81.063095,208.94609 c -11.906339,9.92421 -27.194885,15.8987 -43.860635,15.8987 -4.95854,0 -9.78728,-0.55158 -14.45059,-1.55504 l -4.79842,5.8446 c -10.66449,-2.85736 -20.38429,-7.94043 -28.6326,-14.74578 l -12.89559,12.92212 1.58177,9.54347 -47.96347,47.98965 4.63827,1.7685 45.04032,-17.15658 45.0402,17.15658 45.040312,-17.15658 17.158544,-45.03976 z" />
+      <path
+         d="m -272.48495,89.294626 17.1585,45.040274 -17.1585,45.03993 17.1585,45.03972 -17.1585,45.03977 10.53634,4.02267 57.2385,-57.21102 10.26764,1.58169 12.46673,-12.46669 c -7.35519,-8.52221 -12.86173,-18.6902 -15.87027,-29.92032 l 5.8446,-4.79842 c -1.00531,-4.66323 -1.55503,-9.49189 -1.55503,-14.45044 0,-24.76984 13.21043,-46.53472 32.94893,-58.606534 l -21.79693,-8.31063 -45.04019,17.158544 z"
+         id="path33447"
+         style="display:inline;fill:#76c551;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.61532" />
+      <path
+         style="display:inline;fill:#59a336;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.61532"
+         id="path33451"
+         d="m -81.063095,208.94609 c -11.906339,9.92421 -27.194885,15.8987 -43.860635,15.8987 -4.95854,0 -9.78728,-0.55158 -14.45059,-1.55504 l -4.79842,5.8446 -28.67744,-15.11228 -12.85075,13.28862 1.58177,9.54347 46.85284,7.05799 -0.0982,42.70016 45.040313,-17.15658 17.158544,-45.03976 z" />
+      <ellipse
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:12.7048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+         id="ellipse33453"
+         cx="-122.83165"
+         cy="155.70955"
+         rx="59.801929"
+         ry="60.929199" />
+      <path
+         style="opacity:1;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:12.7048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+         d="m -70.867543,179.77128 c -4.021615,-66.77094 -70.182367,-83.311142 -110.499567,-45.77004 21.03677,-28.56709 48.05279,-46.045197 78.56638,-33.40602 30.51362,12.63913 41.797793,45.98173 31.933187,79.17606 z"
+         id="path33455" />
+      <path
+         id="path33457"
+         d="m -73.395575,102.22726 c -28.338185,-28.338264 -74.283665,-28.338264 -102.621895,0 -17.93779,17.93776 -24.48523,42.91327 -19.71413,66.02883 l -11.27485,8.16937 c 5.13477,13.61756 12.1317,21.8574 16.91241,26.2963 l -10.22839,10.22834 h -10.80252 l -81.01705,81.01654 27.00583,27.00561 81.01701,-81.01683 v -10.80225 l 10.19464,-10.19425 c 4.56162,4.75244 12.69997,11.38138 25.75686,16.30469 l 7.86543,-10.90386 c 23.35858,5.12197 48.742245,-1.34701 66.906498,-19.5115 28.338386,-28.33732 28.33819,-74.28276 1.57e-4,-102.62099 z m -12.962835,12.96296 c 21.179095,21.17921 21.179095,55.51685 0,76.69579 -21.17902,21.17897 -55.51721,21.17897 -76.6963,0 -21.17898,-21.17894 -21.17898,-55.51658 0,-76.69579 21.17929,-21.179216 55.51728,-21.179216 76.6963,0 z"
+         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#2f2f2f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:7.76059;marker:none;enable-background:accumulate" />
+    </g>
+  </g>
+</svg>

package/src/img/wd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 18"><path d="M2.5 1h1v16h-1zm2 0h3v16h-3zm4 0h3v16h-3z" fill="#900"/><path d="M12.5 1h1v16h-1zm2 0h1v16h-1zm12 0h1v16h-1zm2 0h1v16h-1z" fill="#396"/><path d="M16.5 1h3v16h-3zm4 0h1v16h-1zm2 0h3v16h-3z" fill="#069"/></svg>