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.
HTML
<!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>
Display More