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 #24 from GeorgLegato/Add_Tab_with_equivideo_adapter 

Add tab again with equivideo adapter, use drag and drop from harddrive to open your video
pull/25/head
GeorgLegato 2023-03-27 18:39:07 +02:00 committed by GitHub
parent 89bfb86054 e54a8e5470
commit 53d58fdc3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/img/depthmap-0002_swing.mp4 Normal file
View File

Binary file not shown.

22
javascript/panoramaviewer-ext.js
View File

@ -110,7 +110,7 @@ function panorama_send_image(dataURL, name = "Embed Resource") {
function panorama_change_mode(mode) {
return () => {
openpanorama.frame.contentWindow.postMessage({
openpanorama.frame.contentWindow.postMessage({
type: "panoramaviewer/change-mode",
mode: mode
})
@ -195,7 +195,11 @@ function setPanoFromDroppedFile(file) {
reader = new FileReader();
console.log(file)
reader.onload = function (event) {
panoviewer.setPanorama(event.target.result)
if (panoviewer.adapter.hasOwnProperty("video")) {
panoviewer.setPanorama({source: event.target.result})
} else {
panoviewer.setPanorama(event.target.result)
}
}
reader.readAsDataURL(file);
}
@ -278,7 +282,7 @@ function onGalleryDrop(ev) {
document.addEventListener("DOMContentLoaded", () => {
const onload = () => {
if (gradioApp) {
if (typeof gradioApp === "function") {
let target = gradioApp().getElementById("txt2img_results")
if (!target) {
@ -296,13 +300,11 @@ document.addEventListener("DOMContentLoaded", () => {
e.parentElement.style.display = "none"
})
/* no tab anymore, no functionality
if (gradioApp().getElementById("panoviewer-iframe")) {
openpanoramajs();
} else {
setTimeout(onload, 10);
}
*/
if (gradioApp().getElementById("panoviewer-iframe")) {
openpanoramajs();
} else {
setTimeout(onload, 10);
}
}
else {
setTimeout(onload, 3);

16
scripts/panorama-3dviewer.py
View File

@ -7,7 +7,8 @@ import io
from PIL import Image
usefulDirs = scripts.basedir().split(os.sep)[-2:]
iframesrc = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/viewer.html"
iframesrc = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/tab_video.html"
iframesrc_gal = "file="+usefulDirs[0]+"/"+usefulDirs[1]+"/scripts/viewer.html"
# js 2 gradio messaging?! how to do better?
gallery_input_ondrop=None
@ -29,13 +30,12 @@ def onPanModeChange(m):
def add_tab():
with gr.Blocks(analytics_enabled=False) as ui:
with gr.Column():
selectedPanMode = gr.Dropdown(choices=["Equirectangular", "Cubemap: Polyhedron net"],value="Equirectangular",label="Select projection mode", elem_id="panoviewer_mode")
selectedPanMode = gr.Dropdown(choices=["Equirectangular", "Cubemap: Polyhedron net","Equi Video"],value="Equirectangular",label="Select projection mode", elem_id="panoviewer_mode")
gr.HTML(value=f"<iframe id=\"panoviewer-iframe\" class=\"border-2 border-gray-200\" src=\"{iframesrc}\" title='description'></iframe>")
selectedPanMode.change(fn=onPanModeChange, inputs=[selectedPanMode],outputs=[], _js="panorama_change_mode(\""+selectedPanMode.value+"\")")
# unless we have functionality in this tab. Gallery-Viewer should be sufficient if not easier.
# return [(ui, "Panorama Viewer", "panorama-3dviewer")]
return []
selectedPanMode.change(onPanModeChange, inputs=[selectedPanMode],outputs=[], _js="panorama_change_mode")
return [(ui, "Panorama Viewer", "panorama-3dviewer")]
def dropHandleGallery(x):
@ -67,8 +67,8 @@ def after_component(component, **kwargs):
# if (suffix):
view_gallery_button = gr.Button ("Pano \U0001F310", elem_id="sendto_panogallery_button_"+suffix) # 🌐
view_cube_button = gr.Button ("Pano \U0001F9CA", elem_id="sendto_panogallery_cube_button_"+ suffix) # 🧊
view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc+"\",\"\",\""+view_gallery_button.elem_id+"\")" )
view_cube_button.click (None, [],None, _js="panorama_here(\""+iframesrc+"\",\"cubemap\",\""+view_cube_button.elem_id+"\")" )
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+"\")" )
gallery_input_ondrop = gr.Textbox(visible=False, elem_id="gallery_input_ondrop_"+ suffix)
gallery_input_ondrop.style(container=False)

68
scripts/tab_video.html Normal file
View File

@ -0,0 +1,68 @@
<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" />
</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/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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/video-plugin@5/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/settings-plugin@5/index.css">
<script src="../javascript/panoramaviewer-ext.js"></script>
<div id="panoramaviewer" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
<script>
//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: 'Ayutthaya <b>&copy; meetle</b>',
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' },
},
],
}],
],
});
</script>

11
scripts/viewer.html
View File

@ -3,7 +3,6 @@
<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/cubemap-adapter@5/index.js"></script>
@ -36,22 +35,18 @@
}
}
}
function createViewer(opts) {
let panObj = opts ? opts : PanOptionsFor(window.frameElement.getAttribute("panoMode"))
panoviewer = new PhotoSphereViewer.Viewer(panObj)
}
function destroyViewer() {
if (panoviewer) {
panoviewer.destroy()
panoviewer = null
}
}
/* main */
createViewer();
window.addEventListener("message", ({ data, origin, source }) => {
console.log(data.type)
switch (data.type) {
@ -62,7 +57,6 @@
//.then(() => /* update complete */);
document.querySelector('#panoramaviewer').focus()
break
case "panoramaviewer/change-mode":
console.info(`[panorama viewer] Changing mode to '${data.mode}'`);
const p = PanOptionsFor(data.mode)
@ -70,15 +64,10 @@
createViewer(p)
document.querySelector('#panoramaviewer').focus()
break
case "panoramaviewer/destroy":
console.info(`[panorama viewer] Destroying message received`);
destroyViewer()
break
}
})
</script>