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

sendto panotab working

pull/29/head
GeorgLegato 2023-04-15 00:52:10 +02:00
parent 988b42066a
commit 4c2a2013a4
4 changed files with 88 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
javascript/pano_hints.js
View File

@ -6,7 +6,8 @@ pano_titles = {
"🧊": "Switch between selected image and CubeMap view",
"✜": "Convert current spherical map into cubemap (for better outpainting)",
"💫": "Convert current cubemap to equirectangular map (for better upscaling)",
"❌": "Close current panorama viewer"
"❌": "Close current panorama viewer",
"Pano 🎦": "Send movie to the Panorama-Movie-Viewer-Tab"
}

39
javascript/panoramaviewer-ext.js
View File

@ -87,7 +87,7 @@ function panorama_here(phtml, mode, buttonId) {
if (!galImage) return
function getIndex() {
const basename= galImage.src.match(/\/([^\/]+)$/)[1]
const basename = galImage.src.match(/\/([^\/]+)$/)[1]
for (var i = 0; i < galImagesAll.length; i++) {
if (basename === galImagesAll[i].getAttribute('src').replace(/^.*[\\\/]/, '')) {
return i
@ -95,7 +95,7 @@ function panorama_here(phtml, mode, buttonId) {
}
return 0
}
const galImageIndex = getIndex()
let parent = galImage.parentElement
@ -130,9 +130,9 @@ function panorama_send_video(dataURL, name = "Embed Resource") {
}
function panorama_send_image(dataURL, name = "Embed Resource") {
function panorama_send_video(dataURL, name = "Embed Resource") {
openpanorama.frame.contentWindow.postMessage({
type: "panoramaviewer/set-panorama",
type: "panoramaviewer/set-video",
image: {
dataURL: dataURL,
resourceName: name,
@ -189,19 +189,18 @@ async function panorama_get_image_from_gallery(warnOnNoSelect) {
return button.src
}
function panorama_send_gallery(name = "Embed Resource") {
panorama_get_image_from_gallery()
.then((dataURL) => {
// Send to panorama-viewer
console.info("[panorama viewer] Using URL: " + dataURL)
// Change Tab
panorama_gototab();
panorama_send_image(dataURL, name);
})
.catch((error) => {
console.warn("[panoramaviewer] No image selected to send to panorama viewer");
});
function panorama_send_infinitezoom(name = "Embed Resource") {
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);
}
}
function openpanoramajs() {
@ -398,7 +397,7 @@ function convertto_equi() {
onePx = document.createElement("canvas").getContext("2d").createImageData(1, 1);
for (let j = equiTexture.height-1; j >= 0; j--) {
for (let j = equiTexture.height - 1; j >= 0; j--) {
// Rows start from the bottom
v = 1 - (j / equiTexture.height);
theta = v * Math.PI;
@ -551,7 +550,7 @@ function convertto_equi() {
onePx = document.createElement("canvas").getContext("2d").createImageData(1, 1);
for (let j = equiTexture.height-1; j >= 0; j--) {
for (let j = equiTexture.height - 1; j >= 0; j--) {
// Rows start from the bottom
v = 1 - (j / equiTexture.height);
theta = v * Math.PI;
@ -704,7 +703,7 @@ function convertto_equi() {
onePx = document.createElement("canvas").getContext("2d").createImageData(1, 1);
for (let j = equiTexture.height-1; j >= 0; j--) {
for (let j = equiTexture.height - 1; j >= 0; j--) {
// Rows start from the bottom
v = 1 - (j / equiTexture.height);
theta = v * Math.PI;
@ -867,7 +866,7 @@ function convertto_cubemap() {
const data = ctx.getImageData(0, 0, width, height);
outCanvas.width = width
outCanvas.height = height*1.5
outCanvas.height = height * 1.5
processImage(data);
});
}

13
scripts/panorama-3dviewer.py
View File

@ -55,13 +55,13 @@ def after_component(component, **kwargs):
# Add our buttons after each "send to extras" button
if kwargs.get("elem_id") == "extras_tab":
# with gr.Row(elem_id="pano_sendbox",variant="compact", css="justify-content: center; align-content: flex-end;"):
# DISABLED until we get some functionality here, two button for Equi and Cubemap is currently enough
#send2tab_button = gr.Button ("Pano \U0001F440", elem_id=f"sendto_panorama_button") # 👀
#send2tab_button.click(None, [], None, _js="() => panorama_send_gallery('WebUI Resource')")
#send2tab_button.__setattr__("class","gr-button")
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")
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
else:
@ -74,7 +74,6 @@ def after_component(component, **kwargs):
view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"\",\""+view_gallery_button.elem_id+"\")" )
view_cube_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"cubemap\",\""+view_cube_button.elem_id+"\")" )
#╬═
conv_cubemap_gallery_button = gr.Button ("\U0000271C", variant="tool", elem_id="convertto_cubemap_button"+suffix) #✜
conv_cubemap_gallery_button.click (None, [],None, _js="convertto_cubemap" )

108
scripts/tab_video.html
View File

@ -1,12 +1,13 @@
<head>
<!-- for optimal display on high DPI devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
<!-- for optimal display on high DPI devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
</head>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
<<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-video-adapter@5/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/equirectangular-video-adapter@5/index.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/video-plugin@5/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/settings-plugin@5/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/resolution-plugin@5/index.js"></script>
@ -20,49 +21,62 @@
<script>
//const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const baseUrl = '../docs/assets/img/'
//const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const baseUrl = '../docs/assets/img/'
const panoviewer = new PhotoSphereViewer.Viewer({
container: 'panoramaviewer',
adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
muted: true,
}],
caption: 'Demo sweeping insects',
//loadingImg: baseUrl + 'loader.gif',
touchmoveTwoFingers: true,
mousewheelCtrlKey: false,
navbar: 'video caption settings fullscreen',
plugins: [
PhotoSphereViewer.VideoPlugin,
PhotoSphereViewer.SettingsPlugin,
[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' },
},
],
const panoviewer = new PhotoSphereViewer.Viewer({
container: 'panoramaviewer',
adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
muted: true,
}],
],
});
caption: 'Demo sweeping insects',
//loadingImg: baseUrl + 'loader.gif',
touchmoveTwoFingers: true,
mousewheelCtrlKey: false,
navbar: 'video caption settings fullscreen',
plugins: [
PhotoSphereViewer.VideoPlugin,
PhotoSphereViewer.SettingsPlugin,
[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' },
},
],
}],
],
});
window.addEventListener("message", ({ data, origin, source }) => {
console.log(data.type)
switch (data.type) {
case "panoramaviewer/set-video":
console.info(`[panorama viewer] Sending video '${data.image.dataURL}'`);
panoviewer.setPanorama({source: data.image.dataURL})
//.then(() => /* update complete */);
document.querySelector('#panoramaviewer').focus()
break
}
})
</script>