You are not logged in.

1

Friday, January 26th 2018, 3:50pm

Drag and Drop Quick Pano Viewer

Just learning the pano ropes and thought I would build a quick pano viewer with drag and drop. Works well so I though I would share.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
    <title>Pano Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <style>
        @-ms-viewport { width:device-width; }
        @media only screen and (min-device-width:800px) { html { overflow:hidden; } }
        html { height:100%; }
        body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
    </style>
</head>
<body>

<script src="krpano.js"></script>

<div id="pano" style="width:100%;height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
</div>

<script>
    // global krpano interface (will be set in the onready callback)
    var krpano = null;

    // embed the krpano viewer into the 'pano' div element
    embedpano({ swf : null,                         // path to flash viewer (use null if no flash fallback will be requiered)
                id : "krpanoSWFObject",
                xml : null,
                localfallback : "none",
                target : "pano",
                consolelog : true,                  // trace krpano messages also to the browser console
                passQueryParameters : true,         // pass query parameters of the url to krpano
                onready : krpano_onready_callback
              });

    // callback function that will be called when krpano is embedded and ready for using
    function krpano_onready_callback(krpano_interface)
    {
        krpano = krpano_interface;
        var loadXML = '<krpano><layer name="myTest" type="text" align="center" html="Drag and drop image to get started" css="font-family:Arial; font-size:42px;" /></krpano>';
        krpano.call("loadxml(" + escape(loadXML) + ", null, MERGE, BLEND(0.5));");
    }

    function handleFileSelect(evt)
    {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files; // FileList object
        
        // Loop through the FileList
        for (var i = 0, f; f = files[i]; i++)
        {
            // Only process image files.
            if (!f.type.match('image.*'))
                continue;

            var reader = new FileReader();
            
            // Read in the image file as a data URL.
            reader.onloadend = handleReaderLoadEnd;
            reader.readAsDataURL(f);
        }
    }

    function handleReaderLoadEnd(e)
    {
        var imageurl = e.target.result;
        loadxmlstring(imageurl);
    }

    function handleDragOver(evt)
    {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    function loadxmlstring(img)
    {
        if (krpano)
        {
            var xmlstring = '<krpano>'+
                                '<image>'+
                                    '<sphere url="'+img+'" />'+
                                '</image>'+
                                '<layer name="myTest" type="text" align="top" html="Drag and drop new image anywhere to view.." css="font-family:Arial; font-size:20px;" />'+
                            '</krpano>';

            krpano.call("loadxml(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");
        }
    }

    // Setup the dnd listeners.
    var dropZone = document.getElementById('pano');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', handleFileSelect, false);

</script>
</body>
</html>

2

Saturday, January 27th 2018, 6:02pm

Hi,

thanks!
Nice one! *thumbup*

Btw - I hope you are okay with that:
I've corrected the code formatting (the forum software has unfortunately scrambled it) and attached it also a ready-to-use html file for downloading:
viewer.zip

Best regards,
Klaus

3

Saturday, January 27th 2018, 6:19pm

I appreciate you updating that for me.

I will probably add video support as well next week.

Tuur

Sage

Posts: 3,152

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

4

Saturday, January 27th 2018, 6:32pm

*love*
http://www.virtualtuur.com
Skype:studiotuur

publicitarios360

Intermediate

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

5

Sunday, January 28th 2018, 2:53pm

Thanks for sharing!!! I tested it and run fine. The support for video will be great. *thumbsup*

6

Monday, January 29th 2018, 5:10pm

Not having much luck with video loading. Let me know if anyone has any ideas why this is failing. The video I am trying to load loads fine in KRPANO when I am not trying to load it with drag and drop.

ERROR: loading of 'data:video/mp4;base64,AAAAIGZ0eXBpc29tAA....

failed!


Source code

1
if (krpano)		{			var xmlstring = 				'<krpano>'+				'<image>'+				'<sphere url="'+img+'" />'+				'</image>'+				'<layer name="myTest" type="text" align="top" bgalpha="0.6" html="Drag and drop new image anywhere to view.." css="font-family:Arial; font-size:20px;" />'+				'</krpano>';						var xmlstringVideo=				'<krpano>'+				'<plugin name="video" url.html5="plugins/videoplayer.js" videourl="'+img+'" panovideo="true" />'+				'<image hfov="360" vfov="180">'+				'<sphere url="plugin:video" />'+				'</image>'+				'</krpano>';						if	(mediaType="image"){					krpano.call("loadxml(" + escape(xmlstring) + ", null, MERGE, BLEND(0.5));");				} else {					krpano.call("loadxml(" + escape(xmlstringVideo) + ", null, MERGE, BLEND(0.5));");				}		}

ramirox3

Intermediate

Posts: 203

Location: La Ceja, Colombia

Occupation: photographer

  • Send private message

7

Tuesday, January 30th 2018, 1:17am

only jpg. Not tif?

8

Monday, February 5th 2018, 8:31pm

only jpg. Not tif?
I have not tried with a tif. I don't see why it would not work.

9

Wednesday, February 7th 2018, 10:03pm

The video I am trying to load loads fine in KRPANO when I am not trying to load it with drag and drop.
How large is the video file and which browser?
That might be not possible from browser side...

I have not tried with a tif. I don't see why it would not work.
No browser as build-in support for the tiff image-format so far I know.

10

Tuesday, October 9th 2018, 1:48pm

is it possible to include a skin?

*confused*

Thanks
Suso

11

Tuesday, October 16th 2018, 12:23am

with the browser of my xiaomi smatphone works very well but chrome browser does not support panoramas of more than 8 mg
http://dearte.online/viewer/
Black screen
Has this a solution?
Thanks
Suso

This post has been edited 1 times, last edit by "Suso Barral" (Oct 16th 2018, 12:36am)


12

Tuesday, October 16th 2018, 11:19am

on firefox browser for mobile, works fine
*thumbup*

13

Tuesday, October 16th 2018, 10:47pm

#disable-accelerated-2d-canvas

And Chrome works!! *smile*

Tuur

Sage

Posts: 3,152

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

14

Thursday, August 22nd 2019, 2:21pm

Hi,

i have a specific question.

Imagine i dropped a pano, i do something with it and then i have a button to reset and go back to black, like a page refresh.
But i don't want to reload the page.
How could i make it to go back to start looks and functionality As if you just loaded the page??

Thanks for any help on this.
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

This post has been edited 1 times, last edit by "Tuur" (Aug 22nd 2019, 2:33pm)


Tuur

Sage

Posts: 3,152

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

15

Friday, August 23rd 2019, 12:20pm

Hi,

i made a little bare bone example to show what i want.
https://www.virtualtuur.com/krpano/quickpanoviewer/1/
I tried quite some, but i was unsuccesfull until now. *cry*

Drop your pano and click the button to see what i want.

Anybody?

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

Tuur

Sage

Posts: 3,152

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

16

Friday, August 23rd 2019, 3:57pm

Ahh..

found it..

Cheers!
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur