You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

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