Panotour QT to use in iOS-App

Q&A about the latest versions
Post Reply
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

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!)
Have a nice day

Christian
User avatar
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.
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

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:
  • 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
tom2203
Posts: 10
Joined: Mon Apr 14, 2014 5:11 pm

Hi CBosch,
could you be so kind to give some more details about your work?
Thanks,
Tom
CBosch
Posts: 240
Joined: Fri May 23, 2014 11:52 am

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.
Have a nice day

Christian
tom2203
Posts: 10
Joined: Mon Apr 14, 2014 5:11 pm

Hi Christian,
besten Dank für deine Antwort. Ich werde mich daran versuchen und "I´ll do my very best" ;-)
Vielleicht könnten wir ja auch mal direkt Kontakt aufnehmen!?
Beste Grüße
Tom
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

For interested forum members Tom said:

Hi Christian,
thanks for your answer. I will try it and "I'll do my very best" Maybe we could sometimes directly get in touch !? Regards Tom;-)
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
tom2203
Posts: 10
Joined: Mon Apr 14, 2014 5:11 pm

Hello 360Texas,
thanks for translation
All the best
Tom
tom2203
Posts: 10
Joined: Mon Apr 14, 2014 5:11 pm

Hello Christian,
I have another question: How do I embed the XML file into the HTML file?
Can I control this via special settings in pan2vr?

Thanks and all the best

Tom
Post Reply