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.

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

1

Friday, March 4th 2011, 1:14pm

Problems making an iphone interface

Hi all!

Thank you very much in advance for the help.

I am trying to make my own interface to be used within iphones. I don't own one so the only thing I can do is test it in safari and ask kindly to some friends to test it in their iphones.
This is a screen shot of the interface using safari in my PC.



Unfortunately it doesn't look like that on iphones. According to all the visitors "there is only a little red dot at the bottom, too small to be clicked" :-(
So this is the link to the virtual tour:

http://www.clients.tourvista.co.uk/vt/bm…nly_index2.html (only for HTML5)

There is a different version of the interface here:

http://www.clients.tourvista.co.uk/vt/bm…nly_index3.html

I thought the issue was related to using "crop" so I made this one using individual images rather than a bundle. But that's not it.

I would be very thankful if anyone could help me to find what is going wrong.

Cheers!

2

Friday, March 4th 2011, 1:47pm

Hi,

first - add the "viewport" meta tags from the default krpano html examples,
without that it's not possible get the native iphone/ipad resolution,

then - the internal krpano resolution (for a theoretical fullscreen) on the iphone is 960x640,
that means only on the iPhone4 the pixels will be shown 1:1 and on the iPhone3 (with 480x320) the pixels will be downscaled automatically, but the working/designing resolution would be 960x640,

best regards,
Klaus

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

3

Monday, March 7th 2011, 10:30am

Hi!

Thank you for your quick reply Kalus!

I have added the meta tags from the HTML file as you suggested to fix the resolution issue.
Although seems that there is some improvement, apparently it is still too small. (Again, I haven't seen it by myself...)

Should I increase the altsize attribute to make the button bigger?

Thank you very much for all you help and hard work!

Cheers

Posts: 148

Location: London

Occupation: Photographer

  • Send private message

4

Monday, March 7th 2011, 2:11pm

HI Rafael,

Hans gives some good tips for scaling buttons for iphone tours here Plugin and Hotspot scale problem.

hope this is useful,

best wishes,

tom

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

5

Monday, March 7th 2011, 6:06pm

Thank you Tom!

I missed that thread!
So I made the changes and now I will wait for some feed back. Can any iphone owner please test it please? *rolleyes*

http://www.clients.tourvista.co.uk/vt/bmag/index.html

This iphone thing is being a little more problematic than I expected, but I will get there. *thumbup*

Posts: 148

Location: London

Occupation: Photographer

  • Send private message

6

Monday, March 7th 2011, 6:47pm

HI Raphael,


Its just an ickle bit big



There is another issue with iphone interfaces and that is orientation. If in wide view obviously you loose alot of height. 2 possible work arounds are % wdith and height or a warning message on tour start to say "This tour is best viewed in portrait mode"

Anyway nearly there with your box, hope this helps.

best wishes,

tom

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

7

Tuesday, March 8th 2011, 10:37am

Brilliant! A screen shot! That will definitely help.

Also I can see that the available space for a menu is actually 320 x 415 instead of 320x480, due the bars at the top and at the bottom.

The landscape and portrait orientation is a big issue indeed. I think that what I will do is to display the instructions and the menu horizontally, as it is the best view for virtual tours. Maybe in the future it will be possible to define two type of interfaces depending on the device orientation.

Thanks again for all your help Tom!

Cheers!

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

8

Wednesday, March 9th 2011, 11:28am

Third one lucky (I hope)

http://www.clients.tourvista.co.uk/vt/bmag/index.html

The menu's height is less than 230px so hopefully will stay inside the screen both in landscape and portrait position.

Please can anyone test it in an iphone please? *whistling*

The fully functional virtual tour with floor plan, hotspots and infospots works properly in my android tablet (using flash). Mobile devices with Android should get a simpler virtual tour with the buttons interface.

Thank you very much indeed!

Posts: 148

Location: London

Occupation: Photographer

  • Send private message

9

Thursday, March 10th 2011, 11:04am

Hi Rafael,


I tested last night on my iphone but there was fatal error - xml parsing failed - so i thought you maybe working on it. This morning is the same, but I see the in web browser the tour is working, so you may or may not know about this issue. Check it on safari developer thingy for iphone and you should be able to see why.

Best wishes,

tom

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

10

Thursday, March 10th 2011, 12:12pm

Thanks for testing Tom.

Yesterday I changed something in the javascript code that made it don't behave properly.
Apparently this is ok:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    	if( viewer.isDevice("iPhone|iPod|iPad") )
    	{
        	viewer.addVariable("xml", "files/main_iphone.xml");
        	viewer.addVariable("showErrors", "false");  
        	viewer.addVariable("onstart", action + action2);
        	viewer.embed();
    	}
    	if( viewer.isDevice("Android") )
    	{
        	viewer.addVariable("xml", "files/main_android.xml");
        	viewer.addVariable("showErrors", "false");  
        	viewer.addVariable("onstart", action + action2);
        	viewer.embed();
    	}
    	else
    	{
        	viewer.addVariable("xml", "files/main.xml");
        	viewer.addVariable("showErrors", "false");  
        	viewer.addVariable("onstart", action + action2);
        	viewer.embed();
    	}


But this one doesn't work, as whatever device is used, it always loads main.xml, hence the parsing error.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    	if( viewer.isDevice("iPhone|iPod|iPad") )
    	{
        	viewer.addVariable("xml", "files/main_iphone.xml");
    	}
    	if( viewer.isDevice("Android") )
    	{
        	viewer.addVariable("xml", "files/main_android.xml");
    	}
    	else
    	{
        	viewer.addVariable("xml", "files/main.xml");
    	} 

    	viewer.addVariable("showErrors", "false");  
    	viewer.addVariable("onstart", action + action2);
    	viewer.embed();


Now it should work properly...

Thank you very much for your help Tom!!!

Yomas

Intermediate

Posts: 190

Location: Anglet, France

  • Send private message

11

Wednesday, July 13th 2011, 4:39pm

Hi Tourvista !!
Great tour !! *thumbsup*
How do you handle the map floors and map tips ? It's very interactive !!
Is it flash plugin you made or sort of fade in action ?
Could we have a bit of code to see ? *g*
Thanks in advance and well done again !!
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

Tourvista

Intermediate

  • "Tourvista" started this thread

Posts: 202

Location: Leicester UK

  • Send private message

12

Monday, July 18th 2011, 12:11pm

Hi there,

Please do help your self:

Source

There is some kind of problem showing the source in main.xml file (doggy characters), so I have created this other file in order to make it readable.
Sorry if I don't go into detail how I did the floorplan effect, but everything is in the code. Just make yourself a big cup of coffee and go for it :-)

Regarding the fade in thing on the map, that is a tweak of this plugin I purchased:

External link

I'm not sure if post a direct link is ok, but that's what I used.

I hope this helps.

My best regards

Rafael

Yomas

Intermediate

Posts: 190

Location: Anglet, France

  • Send private message

13

Monday, July 18th 2011, 5:16pm

Hi again !
Thanks for sharing ^^
In fact your iPhone interface works on my iPhone but doesn't under IOS 4.3.4 (8k2), any issue for this ? ^^
Can't find a mobile device tester on google for this version of IOS *cursing*
Thanks again and see you soon !
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter

This post has been edited 1 times, last edit by "Yomas" (Jul 18th 2011, 6:12pm)


Yomas

Intermediate

Posts: 190

Location: Anglet, France

  • Send private message

14

Monday, July 18th 2011, 6:13pm

In fact your iPhone interface works on my iPhone but doesn't under IOS 4.3.4 (8k2), any issue for this ? ^^


In fact a friend has tested it on IOS 4.3.3 and it worked well...
Let you know if I find a solution ^^
Thanks again !
My website: www.eboovisite.com, See me also on www.Viewat.com, Facebook and Twitter