Hello Chu,
Thanks for the update on the Theta. I updated the firmware yesterday and have noticed significantly less noise in the output. My firmware was actually 0.10 or something like that so it had not been updated at all since leaving the factory. It's definitely going to help with the subsequent virtual tours I'm doing for the gallery!
As for adding fancybox support, I did it in such a way where the user would not have to enter any javascript in the hotspots. It'll have to be updated with every new release or else I'm just going to have to tell them not to upgrade their Pano2VR software until I can determine if this approach will need to be updated as well. I did it by examining the pano2vr_player.js and finding the openURL functions and the functions that reference it in order to pass the title parameter from the xml file.
First off, I "beautified" the compiled javascript file so that I can better read what's going on. I found all instances of openUrl and added the title attribute to them.
For instance, I replaced...
with
There are a couple of references to the function that I added the title attribute to. I then added the title attribute to the beginning of the openUrl function as well as a reference to my function at the end...
Code: Select all
openUrl=function(a,b,c){0<a.length&&(".xml"==a.substr(a.length-4)||".swf"==a.substr(a.length-4)||"{"==a.charAt(0)?Eb.openNext($(a),b):myfancybox(a,b,c))}
If you want, you can just download my modded file :
http://deweyartdesign.com/nesbitt1/pano ... yer_mod.js
Finally, I added a new template with my function embedded in it...
Code: Select all
<?ggf
/*
Create the form in the HTML dialog box
*/
form.addCheckBox("parseanchor","Direct node access",false);
form.addLine();
form.addCheckBox("gyro","Include gyroscope control",false);
form.addCheckBox("gyrodisable"," Disable on startup",false);
form.addCheckBox("gyronorth", " Use true north",false);
form.addLine();
form.addCheckBox("swfgeneric","Flash fallback player",true);
form.addFileNameInput("swf","Flash fallback file","Flash Panorama","Flash (*.swf)");
form.addCheckBox("swffirst","Prefer Flash if available",false);
form.addLine();
form.addCheckBox("jsxml","Embedded XML",false);
form.addFileNameInput("touchicon","iOS Device Webpage Icon","Webpage Icon","Image (*.jpg *.png)");
form.addCheckBox("manifest","Create HTML5 Cache Manifest",false);
form.addCheckBox("test123","This is a test to see if I can add my own form elements - Dennis M Dewey",true);
// define possible output formats
form.addOutputFormat("HTML (.html)","html");
form.addOutputFormat("HTML (.htm)","htm");
?>
<?ggs
// Functions to write out HTML5 and Flash code
function addHtml5Code() {
?>
// create the panorama player with the container
pano=new pano2vrPlayer("container");
<?ggs if (formvalue["parseanchor"]=="true") { ?>
pano.startNode=startNode;
<?ggs } ?>
<?ggs if (output.skinFile!="") { ?>
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
<?ggs } ?>
<?ggs
if ((formvalue["jsxml"]=="true") && (formvalue["_gg_panorama"])) {
panostr=document.encode(formvalue["_gg_panorama"].toString(),true);
panostr=panostr.split("'").join("'"); // workaround for .replace
panostr=panostr.split("\n").join("';\n\t\t\tpanorama+='");
?>
panorama='<?ggs document.write(panostr); ?>';
pano.readConfigString(panorama);
<?ggs
} else {
?>
pano.readConfigUrl("<?ggs document.write(outputfile); ?>");
<?ggs
}
?>
// hide the URL bar on the iPhone
setTimeout(function() { hideUrlBar(); }, 10);
<?ggs if (formvalue["gyro"]=="true") { ?>
// add gyroscope controller
gyro=new pano2vrGyro(pano,"container");
<?ggs if (formvalue["gyrodisable"]=="true") { ?>
gyro.disable(); // disable on startup
<?ggs } ?>
<?ggs if (formvalue["gyronorth"]=="true") { ?>
gyro.setTrueNorth(true); // set to true north
<?ggs } ?>
<?ggs } ?>
<?ggs if (formvalue["maps"]=="true") { ?>
window.addEventListener("load", function() { initMap(); });
<?ggs } ?>
<?ggs
}
function addFlashCode() {
?>
var flashvars = {};
var params = {};
<?ggs if (formvalue["maps"]=="true") {
if (formvalue['swf']!='') {
?>
function ggSwfReady() { initMap(); }
<?ggs } else { ?>
function ggXmlReady() { initMap(); }
<?ggs } ?>
<?ggs } ?>
// enable javascript interface
flashvars.externalinterface="1";
params.quality = "high";
params.bgcolor = "<?ggs document.write(formvalue["bgcolor"]); ?>";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
<?ggs if (formvalue["parseanchor"]=="true") { ?>
if (startNode.length>0) {
flashvars.startnode=startNode;
}
<?ggs } ?>
<?ggs
if (formvalue['swf']=='') {
addGenericFlashCode();
} else {
addFileFlashCode();
}
}
function addFileFlashCode() {
?>
swfobject.embedSWF(
"<?ggs
var swffn=document.expandVariables(formvalue['swf']); // replace placeholders
swffn=document.expandFilename(swffn); // absolute path
swffn=document.relativeOutputFilename(swffn); // relative to HTML file
document.write(document.encodeUrl(swffn));
?>", "container",
"100%", "100%",
"9.0.0", "",
flashvars, params, attributes);
<?ggs
}
function addGenericFlashCode() {
?>
<?ggs
document.addfile("../html5/pano2vr_player.swf","pano2vr_player.swf");
if (formvalue["_gg_skin"]) {
skinstr=formvalue["_gg_skin"].toString();
document.createfile('skin.xml',skinstr);
?>
flashvars.skinxml="skin.xml";
<?ggs
}
?>
flashvars.panoxml="<?ggs document.write(outputfile); ?>";
params.base="<?ggs document.write(outputbase); ?>";
swfobject.embedSWF(
"pano2vr_player.swf", "container",
"100%", "100%",
"9.0.0", "",
flashvars, params, attributes);
<?ggs
}
function writeUserdata(v)
{
var s;
s=document.expandVariables(v);
document.write(document.encode(document.removeTags(s),true));
}
?>
<!DOCTYPE html>
<?ggs
var manifest;
if (formvalue["manifest"]=="true") {
// create a HTML5 Offline Application Cache
manifestfile=document.expandVariables("$n.manifest");
d=new Date();
manifest="CACHE MANIFEST\n";
manifest+="# created with Pano2VR, " + d.toLocaleString() + "\n"; // make sure the file updates
for(var key in formvalue["_gg_filelist"]) {
manifest+=formvalue["_gg_filelist"][key] + "\n";
}
document.writeln('<html manifest="' + manifestfile + '">');
} else { ?>
<html>
<?ggs } ?>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><?ggs document.write(document.encode(document.removeTags(document.expandVariables(config.userdata.title)))); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<?ggs
if (formvalue["touchicon"]!="") {
// absolut path to the file
var touchicon=document.expandFilename(formvalue["touchicon"]);
// extract just the name part
id=touchicon.lastIndexOf('/');
touchiconname=touchicon.substring(id+1);
document.addfile(touchicon,touchiconname);
?>
<link rel="apple-touch-icon" href="<?ggs document.write(touchiconname); ?>" />
<?ggs } ?>
<?ggs
addFlashFallback=(formvalue['swf']!='') || (formvalue["swfgeneric"]=="true");
if (addFlashFallback) {
document.addfile("../3rdparty/swfobject/swfobject.js","swfobject.js");
manifest+="swfobject.js\n";
document.writeln('\t\t<script type="text/javascript" src="swfobject.js">');
document.writeln('\t\t</script>');
}
if (output.skinFile!="") {
manifest+="skin.js\n";
}
?>
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: <?ggs document.write(formvalue["textcolor"]); ?>;
}
/* fullscreen */
html {
height:100%;
}
body {
height:100%;
margin: 0px;
overflow:hidden; /* disable scrollbars */
}
/* fix for scroll bars on webkit & Mac OS X Lion */
::-webkit-scrollbar {
background-color: rgba(0,0,0,0.5);
width: 0.75em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div id="container" style="position:absolute;width:100%;height:100%;z-index:1000;">This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.</div>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>
<script type="text/javascript" src="pano2vr_player_mod.js"></script>
<?ggs if (output.skinFile!="") { ?>
<script type="text/javascript" src="skin.js"></script>
<?ggs } ?>
<?ggs if (formvalue["gyro"]=="true") {
document.addfile("../common/pano2vrgyro.js","pano2vrgyro.js");
manifest+="pano2vrgyro.js\n";
?>
<script type="text/javascript" src="pano2vrgyro.js"></script>
<?ggs } ?>
<script type="text/javascript">
function myfancybox(a, c, x) {
$.fancybox({
href : a,
title : x,
beforeShow : function () {
$( ".ggskin" ).hide();
},
beforeClose : function () {
$( ".ggskin" ).show();
}
});
}
function hideUrlBar() {
// hide URL field on the iPhone/iPod touch
var p = String(navigator.platform);
container = document.getElementById("container");
if( p === 'iPad' || p === 'iPhone' || p === 'iPod touch' ){
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
if (parseInt(v[1], 10)>=7) {
// iOS >=7
if (container) {
container.style.top=(0) + "px";
container.style.left=(0) + "px";
container.style.width=(window.innerWidth) + "px";
container.style.height=(window.innerHeight) + "px";
if (pano) {
pano.setViewerSize(window.innerWidth, window.innerHeight);
} }
window.scrollTo(0, 0);
} else {
if (container) {
var cheight;
switch(window.innerHeight) {
case 208:cheight=268; break; // landscape
case 260:cheight=320; break; // landscape, fullscreen
case 336:cheight=396; break; // portrait, in call status bar
case 356:cheight=416; break; // portrait
case 424:cheight=484; break; // portrait iPhone5, in call status bar
case 444:cheight=504; break; // portrait iPhone5
default: cheight=window.innerHeight;
}
if ((cheight) && ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight))) {
container.style.height=cheight + "px";
}
}
document.getElementsByTagName("body")[0].style.marginTop="1px";
window.scrollTo(0, 1);
}
}
}
if (window.addEventListener) {
window.addEventListener("load", hideUrlBar);
window.addEventListener("resize", hideUrlBar);
window.addEventListener("orientationchange", hideUrlBar);
}
<?ggs if (formvalue["parseanchor"]=="true") { ?>
var startNode=document.location.hash.substring(1);
if (("onhashchange" in window) && (!(/MSIE (\d+\.\d+);/.test(navigator.userAgent)))) {
window.onhashchange = function () {
pano.openNext('{' + window.location.hash.substring(1) + '}');
}
} else {
var lastHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != lastHash) {
lastHash = window.location.hash;
pano.openNext('{' + window.location.hash.substring(1) + '}');
}
}, 100);
}
<?ggs } ?>
<?ggs if (addFlashFallback) {
if (formvalue["swffirst"]=="true") {
?>
if (swfobject.hasFlashPlayerVersion("10.0.0")) {
<?ggs addFlashCode(); ?>
} else
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
<?ggs addHtml5Code(); ?>
<?ggs } else { // swf first ?>
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// use HTML5 panorama
<?ggs addHtml5Code(); ?>
} else
if (swfobject.hasFlashPlayerVersion("10.0.0")) {
<?ggs addFlashCode(); ?>
<?ggs } // swf first ?>
}
<?ggs } else {
addHtml5Code();
}
?>
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
</body>
</html>
I saved that file in the html5 folder in Pano2vr's application files. For a mac, those are found in :
Code: Select all
~/Library/Application Support/GardenGnomeSoftware/Pano2VR/HtmlTemplates/html5
With every new pano I save that is using this feature, I just make sure and choose the html5 "fancybox" template and save a copy of the modded javascript in the output directory as "pano2vr_player_mod.js". The different file name is better to do so that it does not get overwritten whenever you update the pano. I also add jquery and the fancybox files of course. I'm using 1.8.3 just saved as jquery. You could probably use the CDN version of jquery too if you wanted. The version of fancybox I'm using is the Beta 3 version here :
http://fancyapps.com/fancybox/beta/
I'm still having issues with fullscreen and my skin is malfunctioning on the iphone whenever I flip the orientation from vertical to horizontal but that is not related to the fancybox integration.
I hope to get more time in the future to troubleshoot the fullscreen problem but I'm pretty inundated lately with my two jobs and other side work. Hope this helps!