From e83a8cd4fbed7b502e2f142af734b779b2588406 Mon Sep 17 00:00:00 2001 From: GeorgLegato Date: Sun, 12 Mar 2023 20:03:08 +0100 Subject: [PATCH] fixes #5 --- .gitignore | 1 + javascript/pano_hints.js | 38 ++ javascript/panoramaviewer-ext.js | 101 +++- scripts/equilogo.svg | 810 +++++++++++++++++++++++++++++++ scripts/panorama-3dviewer.py | 12 +- scripts/viewer.html | 23 +- style.css | 13 +- 7 files changed, 959 insertions(+), 39 deletions(-) create mode 100644 javascript/pano_hints.js create mode 100644 scripts/equilogo.svg diff --git a/.gitignore b/.gitignore index de3a726..39ed283 100644 --- a/.gitignore +++ b/.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 diff --git a/javascript/pano_hints.js b/javascript/pano_hints.js new file mode 100644 index 0000000..dc833be --- /dev/null +++ b/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] || ""; + } + }) +}) diff --git a/javascript/panoramaviewer-ext.js b/javascript/panoramaviewer-ext.js index b820805..132816c 100644 --- a/javascript/panoramaviewer-ext.js +++ b/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"); diff --git a/scripts/equilogo.svg b/scripts/equilogo.svg new file mode 100644 index 0000000..d3622d9 --- /dev/null +++ b/scripts/equilogo.svg @@ -0,0 +1,810 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts/panorama-3dviewer.py b/scripts/panorama-3dviewer.py index 1fc0bb5..f9ad874 100644 --- a/scripts/panorama-3dviewer.py +++ b/scripts/panorama-3dviewer.py @@ -5,17 +5,23 @@ from modules import script_callbacks, shared import gradio as gr usefulDirs = scripts.basedir().split(os.sep)[-2:] +iframesrc = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/viewer.html" def add_tab(): with gr.Blocks(analytics_enabled=False) as ui: - gr.HTML(value=f"") + gr.HTML(value=f"") return [(ui, "Panorama Viewer", "panorama-3dviewer")] def after_component(component, **kwargs): # Add button to both txt2img and img2img tabs if kwargs.get("elem_id") == "extras_tab": - basic_send_button = gr.Button("Send to PanoramaViewer", elem_id=f"sendto_panorama_button") - basic_send_button.click(None, [], None, _js="() => panorama_send_gallery('WebUI Resource')") +# with gr.Row(elem_id="pano_sendbox",variant="compact", css="justify-content: center; align-content: flex-end;"): + basic_send_button = gr.Button("Pano \U0001F440", elem_id=f"sendto_panorama_button") # 👀 + view_gallery_button = gr.Button ("Pano \U0001F310") # 🌐 + + basic_send_button.click(None, [], None, _js="() => panorama_send_gallery('WebUI Resource')") + basic_send_button.__setattr__("class","gr-button") + view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc+"\")") script_callbacks.on_ui_tabs(add_tab) script_callbacks.on_after_component(after_component) diff --git a/scripts/viewer.html b/scripts/viewer.html index 4e5af89..aeb14e1 100644 --- a/scripts/viewer.html +++ b/scripts/viewer.html @@ -1,20 +1,21 @@ - - -
> +
\ No newline at end of file diff --git a/style.css b/style.css index 6441bbe..7558201 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,15 @@ +.panogalviewer-iframe body { + overflow: hidden; +} + #panoviewer-iframe { width:100vw; height:100vh; -} \ No newline at end of file +} + +.panogalviewer-iframe { + z-index: inherit; + flex: auto; + width:100%; + height:100%; +}