@panoramax/web-viewer 3.1.1-develop-c42d6114 → 3.1.1-develop-4243d3f4

package/src/viewer/Widgets.css

@@ -455,6 +455,11 @@ a.gvs-btn { text-decoration: none; }
 	margin-right: 5px;
 }
 
+/* Grades */
+.gvs-grade {
+	color: var(--orange);
+}
+
 
 /***********************************************
  * Per-component styles
@@ -601,6 +606,59 @@ a.gvs-btn { text-decoration: none; }
 	text-align: center;
 	font-weight: bold;
 	margin-bottom: 15px;
+	color: var(--orange);
+}
+
+#gvs-filter-qualityscore {
+	gap: 0px;
+	justify-content: center;
+	height: 42px;
+}
+
+.gvs-qualityscore, #gvs-filter-qualityscore label {
+	font-size: 18px;
+	width: 25px;
+	height: 30px;
+	line-height: 26px;
+	display: inline-block;
+	border: 1px solid white;
+	text-align: center;
+	background-color: gray;
+	color: rgba(255,255,255,0.9);
+	font-family: sans-serif;
+	font-weight: bold;
+	vertical-align: middle;
+}
+#gvs-filter-qualityscore label { cursor: pointer; }
+#gvs-filter-qualityscore label:hover {
+	width: 28px;
+	height: 35px;
+	line-height: 30px;
+	border-radius: 3px;
+	font-size: 22px;
+	color: white;
+	border: 2px solid white;
+}
+.gvs-qualityscore:first-of-type,
+#gvs-filter-qualityscore label:first-of-type {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+.gvs-qualityscore:last-of-type,
+#gvs-filter-qualityscore label:last-of-type {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+#gvs-filter-qualityscore input[type="checkbox"] { display: none; }
+.gvs-qualityscore-selected,
+#gvs-filter-qualityscore input[type="checkbox"]:checked + label {
+	width: 30px;
+	height: 42px;
+	line-height: 37px;
+	border-radius: 8px;
+	font-size: 27px;
+	color: white;
+	border: 2px solid white;
 }
 
 
@@ -650,6 +708,11 @@ a.gvs-btn { text-decoration: none; }
 	margin-right: 5px;
 }
 
+#gvs-map-theme-legend-score {
+	justify-content: center;
+	gap: 0;
+}
+
 
 /* Player */
 #gvs-widget-player { justify-content: center; }

package/src/viewer/Widgets.js

@@ -3,9 +3,10 @@ import { PSV_ANIM_DURATION, PSV_ZOOM_DELTA, PIC_MAX_STAY_DURATION } from "../Vie
 import {
 	createPanel, createGroup, fa, fat, createButton, disableButton,
 	createSearchBar, createExpandableButton, enableButton, enableCopyButton, closeOtherPanels,
-	createLinkCell, createTable, createHeader, createButtonSpan, createLabel
+	createLinkCell, createTable, createHeader, createButtonSpan, createLabel, showGrade,
+	showQualityScore,
 } from "../utils/Widgets";
-import { COLORS, isInIframe, getUserAccount } from "../utils/Utils";
+import { COLORS, isInIframe, getUserAccount, QUALITYSCORE_VALUES, getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "../utils/Utils";
 import SwitchBig from "../img/switch_big.svg";
 import SwitchMini from "../img/switch_mini.svg";
 import BackgroundAerial from "../img/bg_aerial.jpg";
@@ -50,6 +51,8 @@ import { faCircleQuestion } from "@fortawesome/free-solid-svg-icons/faCircleQues
 import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
 import { faAt } from "@fortawesome/free-solid-svg-icons/faAt";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
+import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 
 
 /**
@@ -112,7 +115,8 @@ export default class Widgets {
 				this._initWidgetSearch();
 				this._initWidgetFilters(
 					this._viewer._api._endpoints.user_search !== null
-					&& this._viewer._api._endpoints.user_tiles !== null
+					&& this._viewer._api._endpoints.user_tiles !== null,
+					this._viewer.map && this._viewer.map._hasQualityScore()
 				);
 				this._initWidgetMapLayers();
 				this._listenMapFiltersChanges();
@@ -494,18 +498,30 @@ export default class Widgets {
 	
 		// Camera details
 		popupContent.push(createHeader("h4", `${fat(faCamera)} ${this._t.gvs.metadata_camera}`));
-		const focal = picMeta?.properties?.["pers:interior_orientation"]?.focal_length ? `${picMeta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "unknown";
+		const focal = picMeta?.properties?.["pers:interior_orientation"]?.focal_length ? `${picMeta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "❓";
+		let resmp = picMeta?.properties?.["pers:interior_orientation"]?.["sensor_array_dimensions"];
+		if(resmp) {
+			resmp = `${resmp[0]} x ${resmp[1]} px (${Math.floor(resmp[0] * resmp[1] / 1000000)} Mpx)`;
+		}
+		let pictype = this._t.gvs.picture_flat;
+		let picFov = picMeta?.properties?.["pers:interior_orientation"]?.["field_of_view"]; // Use raw value instead of horizontalFov to avoid default showing up
+		if(picFov !== null && picFov !== undefined) {
+			if(picFov === 360) { pictype = this._t.gvs.picture_360; }
+			else { pictype += ` (${picFov}°)`; }
+		}
+
 		const cameraData = [
-			{ section: this._t.gvs.metadata_camera_make, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_manufacturer },
-			{ section: this._t.gvs.metadata_camera_model, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_model },
-			{ section: this._t.gvs.metadata_camera_type, value: picMeta?.horizontalFov === 360 ? this._t.gvs.picture_360 : this._t.gvs.picture_flat },
+			{ section: this._t.gvs.metadata_camera_make, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_manufacturer || "❓" },
+			{ section: this._t.gvs.metadata_camera_model, value: picMeta?.properties?.["pers:interior_orientation"]?.camera_model || "❓" },
+			{ section: this._t.gvs.metadata_camera_type, value: pictype },
+			{ section: this._t.gvs.metadata_camera_resolution, value: resmp || "❓" },
 			{ section: this._t.gvs.metadata_camera_focal_length, value: focal },
 		];
 		popupContent.push(createTable("gvs-table-light", cameraData));
 	
 		// Location details
 		popupContent.push(createHeader("h4", `${fat(faLocationDot)} ${this._t.gvs.metadata_location}`));
-		const orientation = picMeta?.properties?.["view:azimuth"] !== undefined ? `${picMeta.properties["view:azimuth"]}°` : "unknown";
+		const orientation = picMeta?.properties?.["view:azimuth"] !== undefined ? `${picMeta.properties["view:azimuth"]}°` : "❓";
 		const gpsPrecisionLabel = getGPSPrecision(picMeta);
 		const locationData = [
 			{ section: this._t.gvs.metadata_location_longitude, value: picMeta.gps[0] },
@@ -515,6 +531,28 @@ export default class Widgets {
 		];
 		popupContent.push(createTable("gvs-table-light", locationData));
 	
+		// Picture quality level
+		if(this._viewer?.map?._hasQualityScore()) {
+			popupContent.push(createHeader(
+				"h4",
+				`${fat(faMedal)} ${this._t.gvs.metadata_quality} <a href="https://docs.panoramax.fr/pictures-metadata/quality_score/" target="_blank" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</a>`
+			));
+			const gpsGrade = getGrade(QUALITYSCORE_GPS_VALUES, picMeta?.properties?.["quality:horizontal_accuracy"]);
+			const resGrade = getGrade(
+				picMeta?.horizontalFov === 360 ? QUALITYSCORE_RES_360_VALUES : QUALITYSCORE_RES_FLAT_VALUES,
+				picMeta?.properties?.["panoramax:horizontal_pixel_density"]
+			);
+			// Note: score is also calculated in utils/map code
+			const generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
+
+			const qualityData = [
+				{ section: this._t.gvs.metadata_quality_score, value: showQualityScore(generalGrade) },
+				{ section: this._t.gvs.metadata_quality_gps_score, value: showGrade(gpsGrade, this._t) },
+				{ section: this._t.gvs.metadata_quality_resolution_score, value: showGrade(resGrade, this._t) },
+			];
+			popupContent.push(createTable("gvs-table-light", qualityData));
+		}
+
 		// EXIF
 		if (picMeta.properties?.exif) {
 			const exifDetails = document.createElement("details");
@@ -829,6 +867,7 @@ export default class Widgets {
 					<option value="default">${this._t.gvs.map_theme_default}</option>
 					<option value="age">${this._t.gvs.map_theme_age}</option>
 					<option value="type">${this._t.gvs.map_theme_type}</option>
+					${this._viewer?.map?._hasQualityScore() ? "<option value=\"score\">"+this._t.gvs.map_theme_score+"</option>" : ""}
 				</select>
 			</div>
 			<div>
@@ -864,6 +903,9 @@ export default class Widgets {
 						${this._t.gvs.picture_flat}
 					</div>
 				</div>
+				<div id="gvs-map-theme-legend-score" class="gvs-map-theme-legend gvs-hidden">
+					${QUALITYSCORE_VALUES.map(pv => "<span class=\"gvs-qualityscore\" style=\"background-color: "+pv.color+";\">"+pv.label+"</span>").join("")}
+				</div>
 			</div>`;
 
 		// Map theme events
@@ -929,7 +971,7 @@ export default class Widgets {
 	 * This should be called only if map is enabled.
 	 * @private
 	 */
-	_initWidgetFilters(hasUserSearch) {
+	_initWidgetFilters(hasUserSearch, hasQualityScore) {
 		const btnFilter = createExpandableButton("gvs-filter", faSliders, this._t.gvs.filters, this);
 		const pnlFilter = createPanel(this, btnFilter, []);
 		pnlFilter.innerHTML = `
@@ -948,10 +990,9 @@ export default class Widgets {
 					<input type="checkbox" id="gvs-filter-type-360" name="360" checked />
 					<label for="gvs-filter-type-360">${this._t.gvs.picture_360}</label>
 				</div>
-				<!--h4>${fat(faCamera)} ${this._t.gvs.filter_camera_model}</h4>
-				<div class="gvs-input-group" id="gvs-filter-model"></div-->
 			</form>
 		`;
+		const form = pnlFilter.children[0];
 		createGroup(
 			"gvs-widget-filter",
 			this._viewer.isWidthSmall() ? "main-top-right" : "main-top-left",
@@ -964,10 +1005,39 @@ export default class Widgets {
 			pnlFilter.style.width = `${this._viewer.container.offsetWidth - 70}px`;
 		}
 
+		// Create qualityscore filter
+		if(hasQualityScore) {
+			const title = document.createElement("h4");
+			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore}`;
+			title.style.marginBottom = "3px";
+			form.appendChild(title);
+
+			const div = document.createElement("div");
+			div.id = "gvs-filter-qualityscore";
+			div.classList.add("gvs-input-group");
+
+			QUALITYSCORE_VALUES.forEach(pv => {
+				const input = document.createElement("input");
+				input.id = "gvs-filter-qualityscore-" + pv.label;
+				input.type = "checkbox";
+				input.name = "qualityscore";
+				input.value = pv.label;
+
+				const label = document.createElement("label");
+				label.setAttribute("for", input.id);
+				label.title = this._t.gvs.filter_qualityscore_help;
+				label.appendChild(document.createTextNode(pv.label));
+				label.style.backgroundColor = pv.color;
+
+				div.appendChild(input);
+				div.appendChild(label);
+			});
+
+			form.appendChild(div);
+		}
+
 		// Create search bar for users
 		if(hasUserSearch) {
-			const form = pnlFilter.querySelector("#gvs-filter-form");
-
 			const title = document.createElement("h4");
 			title.innerHTML = `${fat(faUser)} ${this._t.gvs.filter_user}`;
 			form.appendChild(title);
@@ -994,18 +1064,6 @@ export default class Widgets {
 			form.appendChild(input);
 		}
 
-		// Create search bar for camera model
-		// TODO : implement when API is ready
-		// const cameraSearch = createSearchBar(
-		// 	"gvs-filter-camera-model",
-		// 	this._t.gvs.search,
-		// 	() => Promise.reject(),
-		// 	() => {},
-		//  this
-		// );
-		// document.getElementById("gvs-filter-model").appendChild(cameraSearch);
-
-		const form = pnlFilter.children[0];
 		this._formDelay = null;
 
 		const onFormChange = () => {
@@ -1041,19 +1099,33 @@ export default class Widgets {
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
 		const fType360 = document.getElementById("gvs-filter-type-360");
-		// const fCamera = document.getElementById("gvs-filter-camera");
 		const fMapTheme = document.getElementById("gvs-map-theme");
 
 		let type = "";
 		if(fType360.checked && !fTypeFlat.checked) { type = "equirectangular"; }
 		if(!fType360.checked && fTypeFlat.checked) { type = "flat"; }
 
+		let qualityscore = [];
+		if(this._viewer?.map?._hasQualityScore()) {
+			const fScoreA = document.getElementById("gvs-filter-qualityscore-A");
+			const fScoreB = document.getElementById("gvs-filter-qualityscore-B");
+			const fScoreC = document.getElementById("gvs-filter-qualityscore-C");
+			const fScoreD = document.getElementById("gvs-filter-qualityscore-D");
+			const fScoreE = document.getElementById("gvs-filter-qualityscore-E");
+			if(fScoreA.checked) { qualityscore.push(5); }
+			if(fScoreB.checked) { qualityscore.push(4); }
+			if(fScoreC.checked) { qualityscore.push(3); }
+			if(fScoreD.checked) { qualityscore.push(2); }
+			if(fScoreE.checked) { qualityscore.push(1); }
+			if(qualityscore.length == 5) { qualityscore = []; }
+		}
+
 		const values = {
 			minDate: fMinDate.value,
 			maxDate: fMaxDate.value,
 			type,
-			// camera: fCamera.value,
 			theme: fMapTheme.value,
+			qualityscore,
 		};
 
 		this._viewer.setFilters(values);
@@ -1068,19 +1140,29 @@ export default class Widgets {
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
 		const fType360 = document.getElementById("gvs-filter-type-360");
-		// const fCamera = document.getElementById("gvs-filter-camera");
 		const fMapTheme = document.getElementById("gvs-map-theme");
+		const fScoreA = document.getElementById("gvs-filter-qualityscore-A");
+		const fScoreB = document.getElementById("gvs-filter-qualityscore-B");
+		const fScoreC = document.getElementById("gvs-filter-qualityscore-C");
+		const fScoreD = document.getElementById("gvs-filter-qualityscore-D");
+		const fScoreE = document.getElementById("gvs-filter-qualityscore-E");
 
 		// Update widget based on programmatic filter changes
 		this._viewer.addEventListener("filters-changed", e => {
 			if(e.detail.minDate) { fMinDate.value = e.detail.minDate; }
 			if(e.detail.maxDate) { fMaxDate.value = e.detail.maxDate; }
-			// if(e.detail.camera) { fCamera.value = e.detail.camera; }
 			if(e.detail.theme) { fMapTheme.value = e.detail.theme; }
 			if(e.detail.type) {
 				fType360.checked = ["", "equirectangular"].includes(e.detail.type);
 				fTypeFlat.checked = ["", "flat"].includes(e.detail.type);
 			}
+			if(e.detail.qualityscore) {
+				fScoreA.checked = e.detail.qualityscore.includes(5) && e.detail.qualityscore.length < 5;
+				fScoreB.checked = e.detail.qualityscore.includes(4) && e.detail.qualityscore.length < 5;
+				fScoreC.checked = e.detail.qualityscore.includes(3) && e.detail.qualityscore.length < 5;
+				fScoreD.checked = e.detail.qualityscore.includes(2) && e.detail.qualityscore.length < 5;
+				fScoreE.checked = e.detail.qualityscore.includes(1) && e.detail.qualityscore.length < 5;
+			}
 			this._onMapThemeChange();
 		});
 

package/tests/utils/Exif.test.js

@@ -19,22 +19,22 @@ describe("getExifFloat", () => {
 
 describe("getGPSPrecision", () => {
 	it.each([
-		[undefined, "unknown"],
-		[0.4, "ideal"],
-		[0.9, "excellent"],
-		[2.9, "good"],
-		[6.9, "moderate"],
-		[9.9, "fair"],
-		[20, "poor"],
-		["9/10", "excellent"],
-		["99/10", "fair"],
+		[undefined, "❓"],
+		[0.4, "0.4 m"],
+		[0.9, "0.9 m"],
+		[2.9, "2.9 m"],
+		[6.9, "6.9 m"],
+		[9.9, "9.9 m"],
+		[20, "20 m"],
+		["9/10", "0.9 m"],
+		["99/10", "9.9 m"],
 	])("handles GPSHPos %s > %s", (input, expected) => {
 		const p = { properties: { exif: { "Exif.GPSInfo.GPSHPositioningError": input, "Exif.GPSInfo.GPSDOP": input } } };
 		expect(Exif.getGPSPrecision(p)).toBe(expected);
 	});
 
 	it.each([
-		[undefined, "unknown"],
+		[undefined, "❓"],
 		[0.9, "ideal"],
 		[1.9, "excellent"],
 		[4.9, "good"],

package/tests/utils/__snapshots__/API.test.js.snap

@@ -3,6 +3,7 @@
 exports[`_loadMapStyles handles default user 1`] = `
 Object {
   "layers": Array [],
+  "metadata": Object {},
   "sources": Object {
     "geovisio": Object {
       "maxzoom": 15,
@@ -30,6 +31,7 @@ Object {
       "id": "provider_blo",
     },
   ],
+  "metadata": Object {},
   "sources": Object {
     "provider": Object {},
     "provider_bla": Object {},
@@ -46,6 +48,7 @@ Object {
       "id": "provlayer",
     },
   ],
+  "metadata": Object {},
   "name": "Provider",
   "sources": Object {
     "geovisio": Object {
@@ -69,6 +72,7 @@ Object {
       "id": "provlayer",
     },
   ],
+  "metadata": Object {},
   "name": "Provider",
   "sources": Object {
     "geovisio": Object {
@@ -88,6 +92,7 @@ Object {
 exports[`_loadMapStyles works if no background style set 1`] = `
 Object {
   "layers": Array [],
+  "metadata": Object {},
   "sources": Object {
     "geovisio": Object {
       "maxzoom": 15,