You are not logged in.

Moving from createPanoViewer to embedpano while still supporting mobile

edgedesign

Beginner

  • "edgedesign" started this thread

Posts: 21

Location: Miami

Occupation: Creative Director / Photographer

  • Send private message

1

Saturday, July 2nd 2011, 7:23pm

Moving from createPanoViewer to embedpano while still supporting mobile

I know this is probably right under my nose, but I've been messing with it long enough to go ahead and ask here.

I have been using the following code and it works fine on the desktop and mobile:

Source code

 
1
2
3
4
5
6
7

<div id="mediaPlayer">
      	<script>
  		var viewer = createPanoViewer({swf:"../../../assets/krpano.swf",target:"mediaPlayer"});
  		viewer.addVariable("xml", "krpano.xml");
  		viewer.embed();
		</script>
      </div><!--END mediaPlayer-->


Code contained within the XML points to various image resolutions - computer, mobile & tablet.

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- pano images -->
<image type="CUBE">

	<!-- computer images -->
    <left  url="images/1500/lr2010_09_l.jpg" />
    <front url="images/1500/lr2010_09_f.jpg" />
    <right url="images/1500/lr2010_09_r.jpg" />
    <back  url="images/1500/lr2010_09_b.jpg" />
    <up    url="images/1500/lr2010_09_u.jpg" />
	<down  url="images/1500/lr2010_09_d.jpg" />
	
	 <!-- iPhone / ipod images -->
	 <mobile>
        <left  url="images/480/lr2010_09_l.jpg" />
        <front url="images/480/lr2010_09_f.jpg" />
        <right url="images/480/lr2010_09_r.jpg" />
        <back  url="images/480/lr2010_09_b.jpg" />
        <up    url="images/480/lr2010_09_u.jpg" />
        <down  url="images/480/lr2010_09_d.jpg" />
    </mobile>

    <!-- tablet pc / ipad images -->
    <tablet>
        <left  url="images/1024/lr2010_09_l.jpg" />
        <front url="images/1024/lr2010_09_f.jpg" />
        <right url="images/1024/lr2010_09_r.jpg" />
        <back  url="images/1024/lr2010_09_b.jpg" />
        <up    url="images/1024/lr2010_09_u.jpg" />
        <down  url="images/1024/lr2010_09_d.jpg" />    
    </tablet>
</image>


Now I want to modify that code to use a self-contained pano created with krProtect on the desktop then have it use the XML for mobile and tablet. (The self-contained pano get's embeded in Facebook when someone clicks the 'Share on Facebook'.) What is the best approach?

Should I create separate XML files for mobile and tablet or leave as one while removing references to the hi-res images for desktop viewing? Also, can I use soundinterface.js to stream audio to my mobile panos? I've viewed the sample code and played around with different configurations, but cannot find the right fit. Replacing

Source code

 
1

var viewer = createPanoViewer({swf:"../../../assets/krpano.swf",target:"mediaPlayer"});
with

Source code

 
1

var viewer = embedpano({swf:"pano.swf",target:"mediaPlayer"});
was my first step, but then I got lost on best way to handle the mobile portion of the code.

PS: I'm now using 1.0.8.14. Not sure if krProtect plays nicely with the updated files.
Bill Fant | SoFla360

This post has been edited 1 times, last edit by "edgedesign" (Jul 2nd 2011, 9:28pm)

Similar threads