trying
GeorgLegato
parent
89bfb86054
commit
b652341c40
|
|
@ -109,8 +109,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
|
||||
})
|
||||
|
|
@ -278,7 +277,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 +295,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);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ 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"
|
||||
|
||||
# js 2 gradio messaging?! how to do better?
|
||||
gallery_input_ondrop=None
|
||||
|
|
@ -29,13 +29,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):
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<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/cubemap-adapter@5/index.js"></script>
|
||||
<script src="../javascript/panoramaviewer-ext.js"></script>
|
||||
|
||||
<div id="panoramaviewer_video" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
<!--
|
||||
const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
|
||||
|
||||
const viewer = new PhotoSphereViewer.Viewer({
|
||||
container: 'panoramaviewer_video',
|
||||
adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
|
||||
muted: true,
|
||||
}],
|
||||
caption: 'Ayutthaya <b>© meetle</b>',
|
||||
loadingImg: baseUrl + 'loader.gif',
|
||||
touchmoveTwoFingers: true,
|
||||
mousewheelCtrlKey: true,
|
||||
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 + 'equirectangular-video/Ayutthaya_HD.mp4' },
|
||||
},
|
||||
{
|
||||
id: 'SD',
|
||||
label: 'Low',
|
||||
panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_SD.mp4' },
|
||||
},
|
||||
],
|
||||
}],
|
||||
],
|
||||
});
|
||||
-->
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -11,13 +11,71 @@
|
|||
|
||||
<div id="panoramaviewer" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>
|
||||
|
||||
|
||||
<!--
|
||||
const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
|
||||
|
||||
const viewer = new PhotoSphereViewer.Viewer({
|
||||
container: 'viewer',
|
||||
adapter: [PhotoSphereViewer.EquirectangularVideoAdapter, {
|
||||
muted: true,
|
||||
}],
|
||||
caption: 'Ayutthaya <b>© meetle</b>',
|
||||
loadingImg: baseUrl + 'loader.gif',
|
||||
touchmoveTwoFingers: true,
|
||||
mousewheelCtrlKey: true,
|
||||
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 + 'equirectangular-video/Ayutthaya_HD.mp4' },
|
||||
},
|
||||
{
|
||||
id: 'SD',
|
||||
label: 'Low',
|
||||
panorama: { source: baseUrl + 'equirectangular-video/Ayutthaya_SD.mp4' },
|
||||
},
|
||||
],
|
||||
}],
|
||||
],
|
||||
});
|
||||
-->
|
||||
|
||||
<script>
|
||||
const startImage = window.frameElement.getAttribute("panoimage") ? window.frameElement.getAttribute("panoimage") : '../docs/assets/img/startimage.jpg'
|
||||
const panoAdapter = window.frameElement.getAttribute("panoMode") === "cubemap" ? PhotoSphereViewer.CubemapAdapter : PhotoSphereViewer.EquirectangularAdapter
|
||||
const panoAdapter = PhotoSphereViewer.EquirectangularVideoAdapter
|
||||
//window.frameElement.getAttribute("panoMode") === "cubemap" ? PhotoSphereViewer.CubemapAdapter : PhotoSphereViewer.EquirectangularAdapter
|
||||
let panoviewer
|
||||
|
||||
function PanOptionsFor(mode) {
|
||||
switch (mode) {
|
||||
case "equivideo":
|
||||
return {
|
||||
container: document.querySelector('#panoramaviewer'),
|
||||
adapter: panoAdapter,
|
||||
panorama: {
|
||||
type: 'net',
|
||||
path: startImage
|
||||
}
|
||||
}
|
||||
break
|
||||
case "cubemap":
|
||||
return {
|
||||
container: document.querySelector('#panoramaviewer'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue