1580158
/
sd-webui-panorama-viewer
mirror of https://github.com/GeorgLegato/sd-webui-panorama-viewer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #30 from GeorgLegato/infinite_zoom_sendto 

show movie in place
pull/37/head
GeorgLegato 2023-04-15 04:27:04 +02:00 committed by GitHub
parent 67c86a6b0c ab1920ac02
commit bc656320cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 71 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
javascript/pano_hints.js
View File

@ -7,7 +7,7 @@ pano_titles = {
"✜": "Convert current spherical map into cubemap (for better outpainting)",
"💫": "Convert current cubemap to equirectangular map (for better upscaling)",
"❌": "Close current panorama viewer",
"Pano 🎦": "Send movie to the Panorama-Movie-Viewer-Tab"
"Pano 🎦": "Open a new Panorama-Movie-Viewer"
}

44
javascript/panoramaviewer-ext.js
View File

@ -4,6 +4,8 @@ const openpanorama = {
let galImageDisp
function panorama_here(phtml, mode, buttonId) {
return async () => {
try {
@ -130,15 +132,6 @@ function panorama_send_video(dataURL, name = "Embed Resource") {
}
function panorama_send_video(dataURL, name = "Embed Resource") {
openpanorama.frame.contentWindow.postMessage({
type: "panoramaviewer/set-video",
image: {
dataURL: dataURL,
resourceName: name,
},
});
}
function panorama_change_mode(mode) {
return () => {
@ -190,15 +183,38 @@ async function panorama_get_image_from_gallery(warnOnNoSelect) {
}
function panorama_send_infinitezoom(name = "Embed Resource") {
function panorama_send_infinitezoom(mode, phtml) {
const vid = gradioApp().querySelector("#tab_iz_interface video")
if (vid) {
const dataURL = vid.src
// Send to panorama-viewer
console.info("[panorama viewer] Using movie URL: " + dataURL)
// Change Tab
panorama_gototab();
panorama_send_video(dataURL, name);
if ('TAB' == mode) {
panorama_gototab();
panorama_send_video(dataURL, name);
}
else
if ('HERE' == mode) {
let iframe = gradioApp().getElementById("panoinfZviewer-iframe")
if (!iframe) {
iframe = document.createElement('iframe')
iframe.src = phtml
iframe.id = "panoinfZviewer-iframe"
iframe.classList += "panoinfZviewer-iframe"
const inshere = gradioApp().getElementById("infinit-zoom_results")
inshere.parentElement.insertBefore(iframe,inshere)
iframe.setAttribute("panoimage", dataURL)
}
else {
iframe.setAttribute("panoimage", dataURL)
iframe.contentWindow.location.reload(true);
}
// galImageDisp = galImage.style.display
// galImage.style.display = "none"
}
}
}

9
scripts/panorama-3dviewer.py
View File

@ -58,9 +58,12 @@ def after_component(component, **kwargs):
if (not component.parent.elem_id): return
if (component.parent.elem_id == "image_buttons_infinit-zoom"):
send2tab_panomov_button = gr.Button ("Pano \U0001F3A6", elem_id=f"sendto_panorama_button") # 🎦
send2tab_panomov_button.click(None, [], None, _js="() => panorama_send_infinitezoom('WebUI Resource')")
send2tab_panomov_button.__setattr__("class","gr-button")
#send2tab_panomov_button = gr.Button ("Pano \U0001F3A6", elem_id=f"sendto_panoramatab_button") # 🎦
#send2tab_panomov_button.click(None, [], None, _js="() => panorama_send_infinitezoom('TAB')")
#send2tab_panomov_button.__setattr__("class","gr-button")
panomoviehere_button = gr.Button ("Pano \U0001F3A6", elem_id=f"panoramamovie_here_button") # 🎦
panomoviehere_button.click(None, [], None, _js="() => panorama_send_infinitezoom('HERE',\""+iframesrc+"\")")
if (component.parent.elem_id == "image_buttons_txt2img" or component.parent.elem_id == "image_buttons_img2img" or component.parent.elem_id == "image_buttons_extras"):
suffix = component.parent.elem_id

24
scripts/tab_video.html
View File

@ -21,15 +21,15 @@
<script>
//const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const baseUrl = '../docs/assets/img/'
let startImage = window.frameElement.getAttribute("panoimage") ? window.frameElement.getAttribute("panoimage") : (baseUrl + 'depthmap-0002_swing.mp4')
const panoviewer = new PhotoSphereViewer.Viewer({
container: 'panoramaviewer',
adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
muted: true,
}],
caption: 'Demo sweeping insects',
caption: '',
//loadingImg: baseUrl + 'loader.gif',
touchmoveTwoFingers: true,
mousewheelCtrlKey: false,
@ -41,27 +41,11 @@
[PhotoSphereViewer.ResolutionPlugin, {
defaultResolution: 'HD',
resolutions: [
{
id: 'UHD',
label: 'Ultra high',
panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_UHD.mp4' },
},
{
id: 'FHD',
label: 'High',
panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_FHD.mp4' },
},
{
id: 'HD',
label: 'Standard',
panorama: { source: baseUrl + 'depthmap-0002_swing.mp4' },
/* panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_HD.mp4' }, */
},
{
id: 'SD',
label: 'Low',
panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_SD.mp4' },
},
panorama: { source: startImage },
}
],
}],
],

30
style.css
View File

@ -28,3 +28,33 @@ body {
flex: 0 1 auto;
}
#panoinfZviewer-iframe {
height: 512px;
width: 512px;
padding: 0;
margin: 0;
flex: 1 0 50%;
}
#tab_iz_interface .gradio-video {
overflow: hidden !important;
flex: 1 0 50% !important;
}
#panoinfZviewer-iframe body {
padding:0;
margin: 0;
}
div:has(>video) {
width: 512px;
height: 512px;
}
#tab_iz_interface div:has(> .gradio-video),
#tab_iz_interface div:has(> #panoinfZviewer-iframe) {
height:100% !important;
flex-direction: row;
}