Merge pull request #11 from GeorgLegato/5-check-photosphereviewer-in-…

…gradiogallery

fixes #5

.gitignore

@@ -2,3 +2,4 @@ docs/assets/img/00098.jpg
 **/__pycache__/*
 scripts/__pycache__/*
 scripts/__pycache__/panorama-3dviewer.cpython-310.pyc
+scripts/__pycache__/panorama-3dviewer.cpython-310.pyc

javascript/pano_hints.js

@@ -0,0 +1,38 @@
+// mouseover tooltips for various UI elements
+
+pano_titles = {
+    "Pano 👀":"Send to Panorama Viewer Tab",
+    "Pano 🌐": "Switch between selected image and panorama view"
+}
+
+
+onUiUpdate(function(){
+	gradioApp().querySelectorAll('span, button, select, p').forEach(function(span){
+		tooltip = pano_titles[span.textContent];
+
+		if(!tooltip){
+		    tooltip = pano_titles[span.value];
+		}
+
+		if(!tooltip){
+			for (const c of span.classList) {
+				if (c in pano_titles) {
+					tooltip = pano_titles[c];
+					break;
+				}
+			}
+		}
+
+		if(tooltip){
+			span.title = tooltip;
+		}
+	})
+
+	gradioApp().querySelectorAll('select').forEach(function(select){
+	    if (select.onchange != null) return;
+
+	    select.onchange = function(){
+            select.title = pano_titles[select.value] || "";
+	    }
+	})
+})

javascript/panoramaviewer-ext.js

@@ -2,16 +2,76 @@ const openpanorama = {
 	frame: null
 };
 
+let galImageDisp
+
+function panorama_here(phtml) {
+	return async () => {
+		try {
+			const tabContext = get_uiCurrentTab().innerText
+			let  containerName
+			switch (tabContext) {
+				case "txt2img":
+					containerName = "#txt2img_gallery_container"
+					break;
+				case "img2img":
+					containerName = "#img2img_gallery_container"
+				break;
+				case "Extras":
+					containerName = "#extras_gallery_container"
+				break;
+				default:
+					console.warn ("PanoramaViewer: Unsupported gallery: " + tabContext)
+					return
+			}
+
+			let galviewer = gradioApp().querySelector("#panogalviewer-iframe"+tabContext)
+			let galImage = gradioApp().querySelector(containerName + " div > img")
+
+			if (galviewer) {
+				galviewer.parentElement.removeChild(galviewer)
+				if (galImage) galImage.style.display=galImageDisp
+				return
+			}
+
+			// select only single viewed gallery image, not the small icons in the overview
+			if (!galImage) return
+
+			let parent = galImage.parentElement
+
+			let iframe = document.createElement('iframe');
+			iframe.src = phtml
+			iframe.id = "panogalviewer-iframe"+tabContext
+			iframe.classList += "panogalviewer-iframe"
+			iframe.setAttribute("panoimage",galImage.src);
+			parent.appendChild(iframe);
+			galImageDisp = galImage.style.display
+			galImage.style.display="none"
+		}
+		catch
+		{ }
+	}
+}
+
 function panorama_send_image(dataURL, name = "Embed Resource") {
 	openpanorama.frame.contentWindow.postMessage({
 		type: "panoramaviewer/set-panorama",
 		image: {
-			dataURL,
+			dataURL: dataURL,
 			resourceName: name,
 		},
 	});
 }
 
+function panorama_change_container(name) {
+	openpanorama.frame.contentWindow.postMessage({
+		type: "panoramaviewer/set-container",
+		container: {
+			name
+		},
+	});
+}
+
+
 function panorama_gototab(tabname = "Panorama Viewer", tabsId = "tabs") {
 	Array.from(
 		gradioApp().querySelectorAll(`#${tabsId} > div:first-child button`)
@@ -36,35 +96,34 @@ async function panorama_get_image_from_gallery() {
 	if (!button)
 		throw new Error("[panorama_viewer] No image available in the gallery");
 
-/* only use file url, not data url 
-
-const canvas = document.createElement("canvas");
-	const image = document.createElement("img");
-	image.src = button.querySelector("img").src;
-
-
-	await image.decode();
-
-	canvas.width = image.width;
-	canvas.height = image.height;
-
-	canvas.getContext("2d").drawImage(image, 0, 0);
-
-	return canvas.toDataURL();
-	*/
+	/* only use file url, not data url 
+	
+	const canvas = document.createElement("canvas");
+		const image = document.createElement("img");
+		image.src = button.querySelector("img").src;
+	
+	
+		await image.decode();
+	
+		canvas.width = image.width;
+		canvas.height = image.height;
+	
+		canvas.getContext("2d").drawImage(image, 0, 0);
+	
+		return canvas.toDataURL();
+		*/
 	return button.querySelector("img").src
 }
 
 function panorama_send_gallery(name = "Embed Resource") {
-    console.log("hello p360")
-    panorama_get_image_from_gallery()
+	panorama_get_image_from_gallery()
 		.then((dataURL) => {
 			// Send to panorama-viewer
 			console.info("[panorama viewer] Using URL: " + dataURL)
-			panorama_send_image(dataURL, name);
-
 			// Change Tab
 			panorama_gototab();
+			panorama_send_image(dataURL, name);
+
 		})
 		.catch((error) => {
 			console.warn("[panoramaviewer] No image selected to send to panorama viewer");