Hi Tom,
when creating the output I have some files in the folder. There is the html-file, the skin.js and the pano2vr_player.js files and the images in the images-folder.
You open the skin.js-file, copy the entire content in the html-file with <script></script> tags and same with the pano2vr_player.ja-file. In the embadded part of he xml and skin are paths to the images like:
Code: Select all
preLoadImg.src='images/zimmer9__o.png';
Best way to find all use search/replace and delete all "images/" part of the images-path (or whatever i your path. Because you have all files of the project in one folder.
Then delete nearly all in the <head></head> section. The html-file should look like this:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css" title="not important">
body, div, h1, h2, h3, span, p {
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000000;
}
/* fullscreen */
html {
height:100%;
}
body {
height:100%;
margin: 0px;
overflow:hidden; /* disable scrollbars */
}
body {
font-size: 10pt;
background : #ffffff;
}
}
/* 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>
<!--replace by copy of the content of the pano2vr_player.js-file
<script type="text/javascript" src="pano2vr_player.js">
</script>
-->
<script>
//////////////////////////////////////////////////////////////////////
// Pano2VR pro 4.5.1/10655 HTML5/CSS3 & WebGL Panorama Player //
// License: XXXXXXXX //
// (c) 2014, Garden Gnome Software, http://ggnome.com //
//////////////////////////////////////////////////////////////////////
var m=!0,p=null,r=!1;
function N(k,q,h,G,B){var n=this;n.x=k;n.y=q;n.e=h;n.H=G;n.n=B;n.q=function(k,h,q){n.x=k;n.y=h;n.e=q;n.H=void 0;n.n=void 0};n.toString=function(){return"("+n.x+","+n.y+","+n.e+") - ("+n.H+","+n.n+")"};n.k=function(k){var =Math.sin(k),k=Math.cos(k),q=n.y,B=n.e;n.y=k*q-h*B;n.e=h*q+
........
""!=a.latitude&&0!=a.latitude&&0!=a.longitude&&(e.push(a.latitude),e.push(a.longitude));return e};b.getNodeTitle=function(a){return b.getNodeUserdata(a).title};b.detectBrowser();b.createLayers(k);b.Va()}window.ggHasHtml5Css3D=Jc;window.ggHasWebGL=Kc;window.pano2vrPlayer=pano2vrPlayer;
</script>
<!--replace by copy of the content of the pano2vr_player.js-file
<script type="text/javascript" src="pano2vr_player.js">
</script>
-->
<script>
// Garden Gnome Software - Skin
// Pano2VR pro 4.5.1/10655
// Filename: HdB-HQ-HTML-Mobil_DE.ggsk
// Generated Di. Juli 8 16:21:10 2014
function pano2vrSkin(player,base) {
var me=this;
var flag=false;
.........
this.preloadImages=function() {
var preLoadImg=new Image();
preLoadImg.src='zimmer9__o.png';
preLoadImg.src='zimmer10__o.png';
preLoadImg.src='zimmer12__o.png';
.......
};
this.addSkinHotspot=function(hotspot) {
return new SkinHotspotClass(me,hotspot);
}
this.addSkin();
};
</script>
<!--here the original html-file continues with the embedded xml-part. -->
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<!--embedded xml-part. There are paths to the images to be corrected too as prev1url="../images/photoname.jpg-->
<script type="text/javascript">
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
panorama='<?xml version="1.0" encoding="UTF-8"?>';
panorama+='<tour start="node1">';
panorama+=' <panorama id="node1" hideabout="1">';
panorama+=' <view fovmode="0" pannorth="331.2">';
.......
panorama+=' <media/>';
panorama+=' <input tile0url="Flug OG2 Treppe Panorama bearbeitet_o_0.jpg" prev5url="Flug OG2 Treppe Panorama bearbeitet_o_preview_5.jpg" prev4url="Flug OG2 Treppe Panorama bearbeitet_o_preview_4.jpg" prev3url="Flug OG2 Treppe Panorama bearbeitet_o_preview_3.jpg" prev2url="Flug OG2 Treppe Panorama bearbeitet_o_preview_2.jpg" prev1url="Flug OG2 Treppe Panorama bearbeitet_o_preview_1.jpg" prev0url="Flug OG2 Treppe Panorama bearbeitet_o_preview_0.jpg" tile5url="Flug OG2 Treppe Panorama bearbeitet_o_5.jpg" tilesize="457" tile4url="Flug OG2 Treppe Panorama bearbeitet_o_4.jpg" tile3url="Flug OG2 Treppe Panorama bearbeitet_o_3.jpg" tilescale="1.021881838074398" tile2url="Flug OG2 Treppe Panorama bearbeitet_o_2.jpg" tile1url="Flug OG2 Treppe Panorama bearbeitet_o_1.jpg">';
panorama+=' <preview color="0x808080"/>';
panorama+=' </input>';
panorama+=' <control simulatemass="1" lockedmouse="0" lockedkeyboard="0" dblclickfullscreen="0" invertwheel="0" lockedwheel="1" invertcontrol="1" speedwheel="1" sensitivity="3"/>';
panorama+=' </panorama>';
panorama+='</tour>';
panorama+='';
pano.readConfigString(panorama);
// hide the URL bar on the iPhone
setTimeout(function() { hideUrlBar(); }, 10);
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
</body>
</html>
I let tho output in the pano2vr-app to images/ for the images to keep a better overview.
In xcode you make a webview in your view and make all connections to the .h and .m-files. I made a new group named pano and added the images of output/image-folder and the html-file by "copy items into destination folder...".
Activate Javascript and Safari frameworks, import them to the view-controller.
In the .m file:
Code: Select all
- (void)viewDidLoad
{
[super viewDidLoad];
panoramaView.delegate = self;
NSString *currentLanguage =
[[NSString alloc] initWithContentsOfFile:[NSHomeDirectory() stringByAppendingPathComponent:@"/Documents/sprache.txt"] encoding:NSUTF8StringEncoding error:NULL ];
if ([currentLanguage isEqual:@"de"]) {
[panoramaView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"HdB_DE" ofType:@"html" inDirectory:@""] isDirectory:NO]]];
} else {...(check fr else use en as language)
Code: Select all
- (void)viewDidUnload {
panoramaView.delegate=nil;
[self setPanoramaView:nil];
}
Code: Select all
-(void)viewWillDisappear:(BOOL)animated {
NSString *currentLanguage =
[[NSString alloc] initWithContentsOfFile:[NSHomeDirectory() stringByAppendingPathComponent:@"/Documents/sprache.txt"] encoding:NSUTF8StringEncoding error:NULL ];
if ([currentLanguage isEqual:@"de"]) {
// NSLog(@"sprache des Zimmerpreises ist deutsch");
[panoramaView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"HdB_DE" ofType:@"html" inDirectory:@""] isDirectory:NO]]];
} else {...as above
The code for the "viewWillDisappear" I use because if the user starts the tour with sound and call another view without stopping the sound the sound keeps playing! To stop it the user has to go to the tour and stop it. That is not very user-friendly. So I call the entire html-page again when the user is leaving the view which set the sound off because in the start-view of the tour the user is asked if he wants to start with sound or not. I made the tour in three languages because the texts of the hotspots are different and even the "navigation-description" in the skin.