@panoramax/web-viewer 4.0.2 → 4.0.3-develop-54221cf0

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,9 @@ 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
+ * @fires Panoramax.components.ui.Photo#annotation-click
+ * @fires Panoramax.components.ui.Photo#annotations-unfocused
  * @example
  * const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500})
  */
@@ -112,6 +116,7 @@ export default class Photo extends PSViewer {
 						linkOverlapAngle: Math.PI / 6,
 					}
 				}],
+				[MarkersPlugin, {}],
 			],
 			...options
 		});
@@ -126,6 +131,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";
 
@@ -136,8 +143,10 @@ export default class Photo extends PSViewer {
 		this._myVTour.addEventListener("enter-arrow", this._onEnterArrow.bind(this));
 		this._myVTour.addEventListener("leave-arrow", this._onLeaveArrow.bind(this));
 		this._myVTour.addEventListener("node-changed", this._onNodeChanged.bind(this));
+		this._myMarkers.addEventListener("select-marker", this._onSelectMarker.bind(this));
 		this.addEventListener("position-updated", this._onPositionUpdated.bind(this));
 		this.addEventListener("zoom-updated", this._onZoomUpdated.bind(this));
+		this.addEventListener("dblclick", this._onDoubleClick.bind(this));
 		this._parent.addEventListener("select", this._onSelect.bind(this));
 
 		// Fix for loader circle background not showing up
@@ -410,6 +419,14 @@ export default class Photo extends PSViewer {
 		this._onTilesStartLoading();
 	}
 
+	/**
+	 * Event handler for double click
+	 * @private
+	 */
+	_onDoubleClick() {
+		this.unfocusAnnotation();
+	}
+
 	/**
 	 * Event handler for node change in PSV.
 	 * Allows to send a custom "picture-loaded" event.
@@ -463,11 +480,35 @@ export default class Photo extends PSViewer {
 			else {
 				this.setOption("downloadUrl", null);
 			}
+
+			// Show annotations
+			if(this._annotationsVisible) {
+				this.toggleAllAnnotations(true);
+			}
 		}
 
 		this._onTilesStartLoading();
 	}
 
+	/**
+	 * Event handler for marker select
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @private
+	 */
+	_onSelectMarker(e) {
+		if(!e.marker) { return; }
+		if(e.marker.id?.startsWith("annotation-")) {
+			/**
+			 * Event launched on annotation click over picture
+			 * @event Panoramax.components.ui.Photo#annotation-click
+			 * @type {CustomEvent}
+			 * @property {string} detail.annotationId The annotation UUID
+			 */
+			const event = new CustomEvent("annotation-click", { detail: { annotationId: e.marker.data.id }});
+			this.dispatchEvent(event);
+		}
+	}
+
 	/**
 	 * Event handler for loading a new range of tiles
 	 * @memberof Panoramax.components.ui.Photo#
@@ -888,6 +929,153 @@ 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",
+					},
+					tooltip: this._parent._t.pnx.semantics_annotation_tooltip,
+				};
+			});
+			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(true);
+
+		const annotationId = `annotation-${id}`;
+		this._myMarkers.updateMarker({
+			id: annotationId,
+			svgStyle: {
+				stroke: "var(--red)",
+				strokeWidth: "3px",
+				fill: "var(--red-transparent)",
+			},
+			data: {
+				selected: true,
+			}
+		});
+		this._myMarkers.gotoMarker(annotationId, 0);
+		this.zoom(65);
+	}
+
+	/**
+	 * Remove focus styling on annotations.
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @param {boolean} [skipEvent=false] Set to true to avoid launching annotations-unfocused event
+	 */
+	unfocusAnnotation(skipEvent = false) {
+		const selectedAnnotations = Object.keys(this._myMarkers.markers)
+			.filter(id => id.startsWith("annotation-") && this._myMarkers.markers[id]?.config?.data?.selected);
+		
+		if(selectedAnnotations.length > 0) {
+			selectedAnnotations.forEach(id => {
+				this._myMarkers.updateMarker({
+					id,
+					svgStyle: {
+						stroke: "var(--orange)",
+						strokeWidth: "3px",
+						fill: "var(--orange-transparent)",
+					},
+					data: {
+						selected: false,
+					}
+				});
+			});
+
+			if(!skipEvent) {
+				/**
+				 * Event for pictures annotation unfocus
+				 * @event Panoramax.components.ui.Photo#annotations-unfocused
+				 * @type {Event}
+				 */
+				this.dispatchEvent(new Event("annotations-unfocused"));
+			}
+		}
+	}
+
 	/**
 	 * 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/components/ui/widgets/GeoSearch.js

@@ -2,10 +2,14 @@
 import maplibregl from "!maplibre-gl";
 
 import { LitElement, html } from "lit";
-import { forwardGeocodingBAN, forwardGeocodingNominatim } from "../../../utils/geocoder";
+import { forwardGeocodingBAN, forwardGeocodingStandard, forwardGeocodingNominatim } from "../../../utils/geocoder";
 import "./GeoSearch.css";
 
-const GEOCODER_ENGINES = { "ban": forwardGeocodingBAN, "nominatim": forwardGeocodingNominatim };
+const GEOCODER_ENGINES = {
+	"ban": forwardGeocodingBAN,
+	"standard": forwardGeocodingStandard,
+	"nominatim": forwardGeocodingNominatim
+};
 
 /**
  * Ready-to-use geocoder search bar.
@@ -14,7 +18,11 @@ const GEOCODER_ENGINES = { "ban": forwardGeocodingBAN, "nominatim": forwardGeoco
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
  * @example
  * ```html
+ * <!-- Default geocoder -->
  * <pnx-widget-geosearch _parent=${viewer} />
+ * 
+ * <!-- Custom-URL geocoder -->
+ * <pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _parent=${viewer} />
  * ```
  */
 export default class GeoSearch extends LitElement {
@@ -22,7 +30,7 @@ export default class GeoSearch extends LitElement {
 	 * Component properties.
 	 * @memberof Panoramax.components.ui.widgets.GeoSearch#
 	 * @type {Object}
-	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
 	 */
 	static properties = {
 		geocoder: {type: String},
@@ -54,7 +62,7 @@ export default class GeoSearch extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder];
+		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
 		this._parent?.onceMapReady?.().then(() => {
 			this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
 			this._geolocate.setAttribute("slot", "pre");
@@ -84,7 +92,7 @@ export default class GeoSearch extends LitElement {
 		else {
 			return this._geocoderEngine({
 				query,
-				limit: 3,
+				limit: 5,
 				//bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
 				proximity: this._parent.map.getCenter().lat+","+this._parent.map.getCenter().lng,
 			}).then(data => {

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>

package/src/translations/de.json

@@ -24,7 +24,13 @@
             "👥 Personas anlegen",
             "🌭️ Lokalisierung der Currywurst",
             "🧑‍💻 Debugging des Interfaces",
-            "📈 Hochzählen der Statistiken"
+            "📈 Hochzählen der Statistiken",
+            "🤖 Lerne Semantik",
+            "🎨 Überarbeitung des Interface",
+            "📅 Plane Fotomapping-Parties",
+            "🧀 Reifen des Emmentalers",
+            "🌄 Berechnen des Sonnenscheins",
+            "🌊 Messung der Gezeiten"
         ],
         "search_empty": "Keine Ergebnisse gefunden",
         "share": "Teilen",
@@ -67,7 +73,10 @@
             "🏘️ 3D-Rendering",
             "📷 360° Fotos initialisieren",
             "🟠 Farben balancieren",
-            "💯 Berechnung der Qualitätsbewertung ©"
+            "💯 Berechnung der Qualitätsbewertung ©",
+            "📡 Herunterladen von Updates",
+            "🌍 Laden von Kartenteilen",
+            "📸 Bearbeitung der Schatten"
         ],
         "search_address": "Suchen sie eine Adresse, Stadt, …",
         "share_image": "HD Bild",
@@ -166,7 +175,45 @@
         "qualityscore_doc_1": "Panoramax bietet einen Qualitätsfaktor für jedes Bild. Es ermöglicht eine einfache Kartenfilterung und eine umfassende Anzeige der Verfügbarkeit hochwertiger Bilder.",
         "qualityscore_doc_2": "Die Note wird den Benutzern als A/B/C/D/E-Bewertung angezeigt (A ist die beste, E die schlechteste) und anhand dieser Skala grafisch dargestellt:",
         "qualityscore_doc_3": "Die Berechnung erfolgt auf der Grundlage der GPS-Genauigkeit und der Bildauflösung. Ein professionelles System wird mit A bewertet, eine 360-Grad-Action-Kamera mit B und ein Smartphone mit C/D/E.",
-        "minimize_short": "Verbergen"
+        "minimize_short": "Verbergen",
+        "semantics_features_none": "Bislang wurde kein Feature erkannt oder annotiert in diesem Bild.",
+        "semantics_features_default_title": "Feature #{nb}",
+        "semantics_features_subtitle": "{nb} assozierte Eigenschaften",
+        "semantics_show_all_tags": "Alle Schlagworte anzeigen",
+        "semantics_title": "Schlagworte",
+        "semantics_tags": "{nb] Schlagworte",
+        "semantics_features": "Erkannte Features",
+        "semantics_hide_all_tags": "Alle Schlagworte verbergen",
+        "semantics_annotation_tooltip": "Klicken um Details zu sehen",
+        "semantics_key": "Schlüssel",
+        "semantics_value": "Wert",
+        "semantics_key_doc": "Mehr über diesen Schlüssel erfahren",
+        "semantics_value_doc": "Mehr über dieses Schlagwort erfahren",
+        "semantics_tags_picture": "Foto-Schlagworte",
+        "semantics_tags_picture_none": "Bislang wurden keine Schlagworte für dieses Foto gesetzt.",
+        "semantics_show_annotations": "Fotoannotierungen anzeigen",
+        "semantics_hide_annotations": "Fotoannotierungen verbergen",
+        "semantics_wikidata_properties": {
+            "P31": "Instanz von",
+            "P279": "Unterklasse von",
+            "P361": "Teil von"
+        },
+        "metadata_exif_doc": "Dokumentation der EXIF Tags",
+        "metadata_exif_doc_title": "Zur Exiv2 Dokumentation für die vollen Details zu EXIF und den XMP Tag Definitionen",
+        "metadata_location_coordinates": "Koordinaten (Längengrad, Breitengrad)",
+        "metadata_location_copy": "Kopiere {v}",
+        "metadata_location_copy_more": "Mehr Optionen zum Kopieren der Koordinaten",
+        "whats_panoramax": "Panoramax ist eine Geo-Commons für Gebietsfotos.",
+        "picture_360_long": "Panoramafoto",
+        "metadata_summary": "Zusammenfassung",
+        "filter_date_6months": "6 Monate",
+        "picture_all": "Alle",
+        "picture_flat_long": "Klassisches Foto",
+        "metadata_general_instance": "Quellinstanz",
+        "geo_uri": "Externe App",
+        "contribute_id": "Zu OpenStreetMap mit dem iD Editor beitragen",
+        "metadata_general_copy_id": "ID kopieren",
+        "metadata_general_copy_picid": "Kopiere Foto ID"
     },
     "psv": {
         "twoFingers": "Nutzen sie zwei Finger zum navigieren",

package/src/translations/en.json

@@ -173,6 +173,29 @@
         "metadata_exif_value": "Value",
         "metadata_exif_doc": "Docs for EXIF tags",
         "metadata_exif_doc_title": "Go to Exiv2 documentation to have full details on EXIF and XMP tags definitions",
+        "semantics_title": "Tags",
+        "semantics_tags": "{nb} tags",
+        "semantics_features": "Detected features",
+        "semantics_features_none": "No feature has been detected or annotated in this picture yet.",
+        "semantics_features_default_title": "Feature #{nb}",
+        "semantics_features_subtitle": "{nb} associated properties",
+        "semantics_annotation_tooltip": "Click to see details",
+        "semantics_show_all_tags": "Show all tags",
+        "semantics_hide_all_tags": "Hide all tags",
+        "semantics_key": "Key",
+        "semantics_value": "Value",
+        "semantics_key_doc": "Know more about this key",
+        "semantics_value_doc": "Know more about this tag",
+        "semantics_tags_picture": "Picture tags",
+        "semantics_tags_picture_none": "No tags has been set for this picture yet.",
+        "semantics_qualifiers": "Qualifiers",
+        "semantics_show_annotations": "Display picture annotations",
+        "semantics_hide_annotations": "Hide picture annotations",
+        "semantics_wikidata_properties": {
+            "P31": "instance of",
+            "P279": "subclass of",
+            "P361": "part of"
+        },
         "report": "Report",
         "report_auth": "This report will be sent using your account \"{a}\"",
         "report_nature_label": "Nature of the issue",

package/src/translations/fr.json

@@ -173,6 +173,27 @@
         "metadata_exif_value": "Valeur",
         "metadata_exif_doc": "Doc des attributs EXIF",
         "metadata_exif_doc_title": "Acééder à la doc Exiv2 pour en savoir plus sur les attributs EXIF et XMP",
+        "semantics_title": "Tags",
+        "semantics_tags": "{nb} attributs",
+        "semantics_features": "Objets détectés",
+        "semantics_features_none": "Aucun objet n'a été détecté ou annoté dans cette photo pour l'instant.",
+        "semantics_features_default_title": "Objet #{nb}",
+        "semantics_features_subtitle": "{nb} attributs associés",
+        "semantics_annotation_tooltip": "Cliquez pour voir les détails",
+        "semantics_show_all_tags": "Voir tous les attributs",
+        "semantics_hide_all_tags": "Masquer les attributs",
+        "semantics_key": "Clé",
+        "semantics_value": "Valeur",
+        "semantics_key_doc": "En savoir plus à propos de cette clé",
+        "semantics_value_doc": "En savoir plus à propos de cet attribut",
+        "semantics_tags_picture": "Attributs de la photo",
+        "semantics_tags_picture_none": "Aucun attribut n'a été défini pour cette photo pour l'instant.",
+        "semantics_qualifiers": "Qualificateurs",
+        "semantics_wikidata_properties": {
+            "P31": "instance de",
+            "P279": "sous-classe de",
+            "P361": "partie de"
+        },
         "report": "Signaler",
         "report_auth": "Ce signalement sera envoyé en utilisant votre compte \"{a}\"",
         "report_nature_label": "Nature du problème",

package/src/translations/it.json

@@ -185,7 +185,34 @@
         "filter_date_6months": "6 mesi",
         "picture_all": "Tutte",
         "metadata_exif_doc": "Doc per gli attributi EXIF",
-        "metadata_exif_doc_title": "Vai alla documentazione di Exiv2 per i dettagli completi sulle definizioni degli attributi EXIF e XMP"
+        "metadata_exif_doc_title": "Vai alla documentazione di Exiv2 per i dettagli completi sulle definizioni degli attributi EXIF e XMP",
+        "semantics_value": "Valore",
+        "semantics_key_doc": "Per saperne di più su questa chiave",
+        "semantics_title": "Etichette",
+        "semantics_features": "Oggetti rilevati",
+        "semantics_features_none": "Non è ancora stato rilevato alcun oggetto in questa foto.",
+        "semantics_features_default_title": "Oggetto #{nb}",
+        "semantics_features_subtitle": "{nb} proprietà associate",
+        "semantics_tags": "{nb} attributi",
+        "semantics_show_all_tags": "Mostra tutti gli attributi",
+        "semantics_hide_all_tags": "Nascondi tutti gli attributi",
+        "semantics_key": "Chiave",
+        "semantics_value_doc": "Per saperne di più su questa etichetta",
+        "semantics_wikidata_properties": {
+            "P361": "parte di",
+            "P31": "instanza di",
+            "P279": "sottoclasse di"
+        },
+        "semantics_hide_annotations": "Nascondi le annotazioni della foto",
+        "semantics_tags_picture": "Etichette della foto",
+        "semantics_show_annotations": "Mostra le annotazioni della foto",
+        "semantics_annotation_tooltip": "Clicca per vedere i dettagli",
+        "semantics_tags_picture_none": "Non è stata ancora aggiunta alcuna etichetta su questa foto.",
+        "semantics_qualifiers": "Qualificatori",
+        "metadata_location_coordinates": "Coordinate (longitudine, latitudine)",
+        "metadata_location_copy": "Copia {v}",
+        "metadata_location_copy_more": "Ulteriori opzioni per la copia delle coordinate",
+        "whats_panoramax": "Panoramax è la geo-commons per le foto dei territori."
     },
     "psv": {
         "loadError": "Impossibile caricare l’immagine panoramica",