Embedding HTML5 pans in another html page

[ktshasta]

Hi, I see where this was discussed a couple years ago, but I'm still having issues. I'm trying to embed an HTML5 pano (with Flash fallback) that is multi resolution into another html page that has it's own menu system, etc. When I try to copy and paste the body section of my HTML5 code into the appropriate section of my page, I only get a very small - like 100x100 pixel square - of the rotating pano. Below is the script I am pasting into my html page:

<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">

// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// use HTML5 panorama

// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
pano.readConfigUrl("Nickel3_2014_2000_out.xml");
// hide the URL bar on the iPhone
setTimeout(function() { hideUrlBar(); }, 10);
} else
if (swfobject.hasFlashPlayerVersion("10.0.0")) {
var flashvars = {};
var params = {};
// enable javascript interface
flashvars.externalinterface="1";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
flashvars.skinxml="skin.xml";
flashvars.panoxml="Nickel3_2014_2000_out.xml";
params.base=".";
swfobject.embedSWF(
"pano2vr_player.swf", "container",
"100%", "100%",
"9.0.0", "",
flashvars, params, attributes);

}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>


I have all the needed files (swfobject.js, skin.xml, pano2vr_player.swf, pano2vr_player.js, skin.js) and folders ( tiles folder, images folder) at the same level as the html file I'm trying to embed the pano in.

I tried adding the following script to the head section as was recommended in one of the earlier posts, but it doesn't make any difference if it's there or not.

<script type="text/javascript" src="swfobject.js">
</script>
<script type="text/javascript">
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);
}

</script>

Can anyone tell me what I'm doing wrong? I didn't have these problems getting just a Flash version embedded. This is also going to be a responsive page, so the pan needs to scale down along with everything else on the page. The original HTML5 output page is full screen and does scale down just fine.

Sorry for the long post. Thanks for any help!

kt

[360Texas]

Hi Kt

https://ggnome.com/wiki/HTML5_Output_Settings_(Pano2VR) Scroll down until you locate key word Embedded XML
Embedded XML: Embeds the XML file in the HTML template. Good for when things can read the external file.

HTML5 Output [html tab] look near bottom of "Template Parameters" box...

for "Embedded XML: and [x] " I think this should embed the XML coding into the Output File: your output\yourfilename.html page

Only guessing.. Please try it.

[ktshasta]

Thanks Dave, Your link isn't bringing up anything. I'll try your other ideas and see what I get.

kt

[360Texas]

Sorry, Its a forum software thing... and yes GGS is aware of this issue.

https://ggnome.com/wiki/HTML5_Output_Settings_(Pano2VR please add trailing closed parenthesis " ) "to the link once you have clicked on it.

[ktshasta]

Hi Dave, I've read this page and did try embedding that XML file and it makes no difference. It also doesn't seem to make any difference so far if I add all that javascript to the head of my document or not. It is showing a very small - like 50-100 pixel square of the autoscrolling pan on the page, so I think I just have to figure out how to set the container size some how. It's set at 100%.

Doesn't anyone else on here stick their HTML5 panos into an already existing web page? I have no problem putting Flash files in. Why is it so hard to get the HTML5 ones embedded?

I'm stuck!!!

kt

[AZ ChopperCam]

well... there's always the iframe solutuon.

http://www.w3schools.com/tags/tag_iframe.asp

[ktshasta]

Thanks for the iFrame info. Here is what I get when I use that solution.

http://cift.pair.com/shasta/MV2015/Pano ... frame.html

Does ANYONE know how to make the panorama fill up the page at 100%? I can't believe this is so hard or that no one else on this forum has not tried to embed HTML5 pans into another html page!

Thanks for ANY insight. I need to get a bunch of HTML5 panos into web pages.

kt

[ktshasta]

I think I've figured this out finally, but I have a question. Does the controller skin disappear when viewed on mobile/tablets? I'm not seeing it viewed on my iPhone or iPad. Plus, the quality of the pan is not nearly as good as viewed on my desktop. It is a multi-resolution pan with tiles of 650,1300 and 2600.

Here's the test pan if you'd like to take a look an give me any feedback.

http://cift.pair.com/shasta/MV2015/Pano ... ML5_2.html

Thanks,

kt