You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Saturday, January 29th 2011, 8:05pm

trying to create a list view iPhone interface using jQtouch

Hello,

I'm trying to create a list view interface for an iPhone's display of panoramas using jQtouch. I can get a single panorama to load and everything works, but when I try to add a second panorama (scene-003), that new panorama won't load. I don't get any errors, just a blank screen when trying to view the second ("scene-001" still works as does display of text in the div "info-004").

I suspect newbie abuse of how div ids are used. I've tried making the id and targets unique and then I tried different. Neither works. The individual xml and panoramas run fine outside of the interface. Any suggestions?

Thanks,

Loren

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>iPhone Interface Test 002</title>
        <style type="text/css" media="screen">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
        <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jqtouch/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="jqtouch/extensions/jqt.autotitles.js" type="application/x-javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'images/jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'images/jqt_startup.png',
                statusBar: 'black'
            });
        </script>
        <script src="tour.js"></script>
    </head>
    <body>
        <div id="Home">
            <div class="toolbar">
                <h1>Gallery 1</h1>
            </div>
            <ul class="edgetoedge">
                <li><a href="#scene-002">scene-002 title</a></li>
                <li><a href="#scene-003">scene-003 title</a></li>
                <li><a href="#scene-004">scene-004 title</a></li>
            </ul>
        </div>

        <div id="scene-002" style="width:100%; height:100%;">
            <div class="toolbar">
                <a href="#" class="back">back</a>
                <h1>[ ]</h1>
            </div>
           <div id="info-002" style="width:100%; height:100%;">
		<script>
                   var viewer = createPanoViewer({swf:"tour.swf", xml:"003.xml", target:"info-002"});
		   viewer.embed();
		</script>
	   </div>
        </div>

        <div id="scene-003" style="width:100%; height:100%;">
            <div class="toolbar">
                <a href="#" class="back">back</a>
                <h1>[ ]</h1>
            </div>
            <div id="info-003" style="width:100%; height:100%;">
		<script>
                  var viewer = createPanoViewer({swf:"tour.swf", xml:"003.xml", target:"info-003"});
		  viewer.embed();
		 </script>
	    </div>
        </div>

        <div id="scene-004" style="width:100%; height:100%;">
            <div class="toolbar">
                <a href="#" class="back">back</a>
                <h1>[ ]</h1>
            </div>
            <div id="info-004">
              scene-004 goes here
	    </div>
        </div>

    </body>
</html>

2

Saturday, January 29th 2011, 11:35pm

I feel kinda stupid now that I figured it out. I'd delete the post, but don't know how.

For the archive, here was the fix (aside from reading basic docs more carefully):

<script>
embedpano({swf:"pano.swf",xml:"pano.xml",target:"panodiv",id:"pano1"});
</script>

The conflict was due to the ID being left off. It runs nicely now in the iOS Simulator. jQtouch produces a pretty slick interface. I'd never heard of it until last night. Very powerful features and quite easy to use.

If the flat pano was only supported in HTML5, my iPhone app would be completed. I'm really stumped on how to get a zoomable map working on such a small screen. My project includes 92 panoramas and the client wants the user to have a situational awareness. The place is 1 million square feet, so it is easy to get lost. 1 million sq. ft. on a mobile screen, kind of hard to do.