Hi,
I tried to integrate my tour I made for our web in our iOS-app too. I saved the tour with a new name, resized the input-images, changed the point- and polygon-hotspots to area-hotspots and created QTs. In the folder are for each pano one QT-movie. When playing on desktop all works fine.
Then I integrated in the app the media-framework, imported the .mov-files and when calling the movie it doesn't load. Tried with quick made movie with my phone to check the programming of the code - the code works correct, the phone-movie is playing and the screen returns when finished to the view where I started the QT-movie with a button.
When loading the pnao2vr QT-movie in premiere for example, it doesn't play too.
Are there any intensions of further developing the QT output? Or does aomeone have a solution how to integrate a tour in a iOS-app? (only xcode, no jail-brake. Our app is distributed by the app-store) And yes, I could integrate a UIWebView to show the HTML-tour but this results in high data transfer and I will include it (the QT-files are about 1,6MB each, 11 panos. The HTML-tour is in multiresolution about 90MB!)
Panotour QT to use in iOS-App
- JimWatters
- Posts: 329
- Joined: Thu Oct 07, 2010 6:16 pm
- Location: Saint John, New Brunswick
- Contact:
Apple has stopped supporting Quicktime VR after Quicktime 7.
Several different media types can be in a .mov file, Quicktime VR is only one type.
A standard linear video saved into a .mov file will play with just about any video playing software.
A panorama requires a special player, and only a subset of those still support QTVR.
It is possible to create Flash or HTML5 output with the same down sampled quality and size as you set QT output.
You are better off investigating HTML5 output.
Several different media types can be in a .mov file, Quicktime VR is only one type.
A standard linear video saved into a .mov file will play with just about any video playing software.
A panorama requires a special player, and only a subset of those still support QTVR.
It is possible to create Flash or HTML5 output with the same down sampled quality and size as you set QT output.
You are better off investigating HTML5 output.
- Jim Watters
http://photocreations.ca
http://photocreations.ca
Hi Jim,
thanks for the info. I integrated it and made a UIWebView with an internal html-file.
If someone wants to do this, I made following settings/changes:
thanks for the info. I integrated it and made a UIWebView with an internal html-file.
If someone wants to do this, I made following settings/changes:
- create html output with xml inside
- delete in skin.js all pathes for images
- copy the skin.js inside the html-file
- copy the pano2vr_player.js inside the html-file
- delete all pathes for the images in the XML-part of the html-file
- deleted all in the head of the html-file
- copy all files in one group (folder) in the xcode-project
Have a nice day
Christian
Christian
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:
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:
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:
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.
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';
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>
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
Have a nice day
Christian
Christian