@panoramax/web-viewer 3.2.1-develop-75fc7b1a → 3.2.1-develop-b47723aa

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.1-develop-75fc7b1a",
+  "version": "3.2.1-develop-b47723aa",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/Viewer.js

@@ -536,7 +536,6 @@ class Viewer extends CoreView {
 	setPopup(visible, content = null) {
 		if(!visible) {
 			this.popupContainer.classList.add("gvs-hidden");
-			this.setFocus("pic");
 			this.psv.startKeyboardControl();
 		}
 		else if(content) {

package/src/translations/en.json

@@ -103,6 +103,11 @@
         "picture_360": "360°",
         "filter_qualityscore": "Quality score",
         "filter_qualityscore_help": "Click to enable or disable",
+        "qualityscore_title": "About the quality score",
+        "qualityscore_doc_1": "Panoramax offers a Quality Score for each picture. It allows easy map filtering and comprehensive display of high-quality pictures availability.",
+        "qualityscore_doc_2": "The grade is shown to users as a A/B/C/D/E score (A is the best, E the worst), and shown graphically through this scale:",
+        "qualityscore_doc_3": "It is computed based on GPS precision and picture resolution. A professional system will have an A-rating, a 360° action camera will have a B-rating, and a smartphone will be C/D/E-rated.",
+        "qualityscore_doc_link": "More details about the Quality Score computation is available in our documentation.",
         "map_background": "Map background",
         "map_background_aerial": "Aerial",
         "map_background_streets": "Streets",

package/src/translations/fr.json

@@ -102,6 +102,11 @@
         "picture_360": "360°",
         "filter_qualityscore": "Score de qualité",
         "filter_qualityscore_help": "Cliquez pour activer ou désactiver",
+        "qualityscore_title": "À propos du score qualité",
+        "qualityscore_doc_1": "Panoramax propose un Score de Qualité pour chacune de ses photos. Cela facilite le filtre et la recherche de photos de bonne qualité sur la carte.",
+        "qualityscore_doc_2": "Le score est affiché sous la forme d'une lettre A/B/C/D/E (A étant le meilleur, E le moins bon), et visualisable grâce à cette échelle :",
+        "qualityscore_doc_3": "Il est calculé en fonction de la précision du GPS ainsi que la résolution de la photo. Un matériel professionnel aura une note de A, une caméra sportive 360° une note de B, et un smartphone une note de C à E.",
+        "qualityscore_doc_link": "Plus d'infos sur le calcul du Score Qualité dans notre documentation.",
         "filter_zoom_in": "Zoomez plus pour voir les filtres",
         "map_background": "Fond de carte",
         "map_background_aerial": "Satellite",

package/src/translations/it.json

@@ -50,7 +50,7 @@
             "☕ Iniezione di caffeina",
             "😀 Sorridete, siete stati mappati!",
             "🐈 Condivisione delle foto di gatti",
-            "😴 Riduzione della procastinazione",
+            "😴 Riduzione della procrastinazione",
             "🫖 Preparazione del tè",
             "🐧 Apertura del codice sorgente",
             "🚇 Indicizzazione delle stazioni della metro",

package/src/utils/Utils.js

@@ -31,8 +31,8 @@ export const QUALITYSCORE_VALUES = [
 	{ color: "#f6a020", label: "E" },
 ];
 
-export const QUALITYSCORE_RES_FLAT_VALUES = [1, 15, 2, 38, 3, 60, 4];				// Grade, < Px/FOV value
-export const QUALITYSCORE_RES_360_VALUES = [2, 15, 3, 20, 4, 38, 5];				// Grade, < Px/FOV value
+export const QUALITYSCORE_RES_FLAT_VALUES = [1, 10, 2, 15, 3, 30, 4];				// Grade, < Px/FOV value
+export const QUALITYSCORE_RES_360_VALUES = [3, 15, 4, 30, 5];						// Grade, < Px/FOV value
 export const QUALITYSCORE_GPS_VALUES = [5, 1.01, 4, 2.01, 3, 5.01, 2, 10.01, 1];	// Grade, < Meters value
 export const QUALITYSCORE_POND_RES = 4/5;
 export const QUALITYSCORE_POND_GPS = 1/5;

package/src/viewer/Widgets.css

@@ -103,6 +103,12 @@
 
 .gvs-mini .gvs-corner .gvs-widget-bg { box-shadow: none; }
 .gvs-widget-bg a { color: var(--widget-font-btn-direct); }
+.gvs-widget-bg button.gvs-btn-link {
+	color: var(--widget-font-btn-direct);
+	background: none;
+	border: none;
+	cursor: pointer;
+}
 
 .gvs-hidden,
 .gvs-focus-map .gvs-only-psv,

package/src/viewer/Widgets.js

@@ -533,10 +533,12 @@ export default class Widgets {
 	
 		// Picture quality level
 		if(this._viewer?.map?._hasQualityScore()) {
-			popupContent.push(createHeader(
+			const qsHeader = 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>`
-			));
+				`${fat(faMedal)} ${this._t.gvs.metadata_quality} <button class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</button>`
+			);
+			qsHeader.lastChild.addEventListener("click", () => this._showQualityScoreDoc());
+			popupContent.push(qsHeader);
 			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,
@@ -567,6 +569,30 @@ export default class Widgets {
 		this._viewer.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
 	}
 
+	_showQualityScoreDoc() {
+		const popupContent = [];
+		popupContent.push(createHeader("h4", `${fat(faMedal)} ${this._t.gvs.qualityscore_title}`));
+
+		const link = document.createElement("a");
+		link.setAttribute("href", "https://docs.panoramax.fr/pictures-metadata/quality_score/");
+		link.setAttribute("target", "_blank");
+		link.appendChild(document.createTextNode(this._t.gvs.qualityscore_doc_link));
+		
+		[
+			document.createTextNode(this._t.gvs.qualityscore_doc_1),
+			document.createTextNode(this._t.gvs.qualityscore_doc_2),
+			showQualityScore(5),
+			document.createTextNode(this._t.gvs.qualityscore_doc_3),
+			link
+		].forEach(elem => {
+			const p = document.createElement("p");
+			p.appendChild(elem);
+			popupContent.push(p);
+		});
+
+		this._viewer.setPopup(true, popupContent);
+	}
+
 	_showReportForm() {
 		const picMeta = this._viewer.psv.getPictureMetadata();
 		if (!picMeta) { throw new Error("No picture currently selected"); }
@@ -905,9 +931,12 @@ export default class Widgets {
 				</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("")}
+					<button id="gvs-map-theme-quality-help" class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle, {transform: {x: 6, size: 24}})}</button>
 				</div>
 			</div>`;
 
+		pnlLayers.querySelector("#gvs-map-theme-quality-help").addEventListener("click", () => this._showQualityScoreDoc());
+
 		// Map theme events
 		const fMapTheme = pnlLayers.querySelector("#gvs-map-theme");
 		const onChange = () => {
@@ -1012,8 +1041,9 @@ export default class Widgets {
 		// Create qualityscore filter
 		if(hasQualityScore) {
 			const title = document.createElement("h4");
-			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore}`;
+			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore} <button class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</button>`;
 			title.style.marginBottom = "3px";
+			title.lastChild.addEventListener("click", () => this._showQualityScoreDoc());
 			form.appendChild(title);
 
 			const div = document.createElement("div");