Hi people. I was recently asked by a customer to adapt one of the panos I did for them to the iPhone. I downloaded the new 3.0 beta, did some test and had it running in a few hours. Now the problem is that they want it to be compatible with EVERY browser, not just iPhone/Safari.
The demo (http://gardengnomesoftware.com/samples/pano2vr_3/tour/) does this and I think I understand how it is made, but my codding knowledge is very limited. I already made a flash version and an HTML version, but I cant make the page its going to be loaded to select the appropriate one. Can anyone tell me if there is an easy way to make it work on all browsers?
One option (though probably not the easiest one) would be to make two different sites, one in flash and one in HTML5 and redirect the user based on the browser. The problem with that is that it would require a lot more work.
Thanks
HTML5 / flash panoramas (like the gardengnome demo)
Hello,
Is Html5 play only on Iphone or Ipad ?
I want to play virtual tour on smartphone as Sony ercson vivaz !
I try the pano2vr html 5 demo on my vivaz but i can't play it ? ? ?
I want to adapt the following sites web with virtual tour to smart phone !
http://www.daetto.fr
http://www.pisani-art.com
http://www.farinel.com
http://www.altipix.fr
Anyone can help me ?
Is Html5 play only on Iphone or Ipad ?
I want to play virtual tour on smartphone as Sony ercson vivaz !
I try the pano2vr html 5 demo on my vivaz but i can't play it ? ? ?
I want to adapt the following sites web with virtual tour to smart phone !
http://www.daetto.fr
http://www.pisani-art.com
http://www.farinel.com
http://www.altipix.fr
Anyone can help me ?
@iniclof - our sample tour uses Modernizr. Please see this topic: Html 5/CSS 3 - Flash; state of the market
@Altipix Not all browsers support the CSS3 3D Transforms module needed for playback of the panos. I suggest you read Thomas' explanation on this topic here: http://gardengnomesoftware.com/forum/vi ... 975#p19614
@Altipix Not all browsers support the CSS3 3D Transforms module needed for playback of the panos. I suggest you read Thomas' explanation on this topic here: http://gardengnomesoftware.com/forum/vi ... 975#p19614
I've got a problem with the html5 export, my buttons are not loading (but they are on the server) when I open the pano on the website. When I open it locally the buttons do work, what am I doing wrong?
URL: http://arnoraps.com/pano/cdc/cdc-hall.html
URL: http://arnoraps.com/pano/cdc/cdc-hall.html
-
rolling-stone
- Posts: 4
- Joined: Sun Oct 17, 2010 9:32 am
@iniclof - I think I can help you... i had to make a template for a tour of mine. It's just a frankenstein of their sample tour html and the full screen template made by another forum member...
k.ary.n / thomas - please accept my apologies and delete my post if for some reason I'm not meant to have borrowed from your work or if this is bad advice... congrats on version 3, still in beta and already brilliant! I was about to buy krpano when I saw the new HTML 5 feature!
@iniclof and anyone else interested, I was in the same position as you last night and I think I've cracked it (although it still needs thorough testing on an actual ipad/iphone - no guarentees it works perfectly) and as I've been helped so much from reading this forum I thought I should help out... i'll try to be as clear and concise as possible. If you edit the attached files and folders as instructed it should work.
1. The attached folder, named "virtual-tour", includes an html file (tour.html) similar to the one I am using... open it and change "example.xml" and "example.swf" to your starting files (first file in the tour)... adjust the flash file's width and height as necessary. (you will find HTML5 width and height in the inline styles and set to 100%. this is so it starts in "full screen")... once again, needs more testing. save tour.html and close it.**
2. Paste all your swf and xml files loose in this folder ("virtual-tour")
3. Add the HTML5 specific jpeg's (all images, all sizes) to the folder named "images"
4. Open the folder named "resources", paste your skin file here (must be name "skin.js" unless you change the link in tour.html).
5. Add the images for your skin. NOTE: I've got mine in the folder named "skin-images" but you may have to do a find and replace in skin.js to change the file locations of the buttons or put the skin images where it's looking for them.
6. upload the whole folder (virtual-tour) to your server and link to tour.html to open...
**no other links in tour.html need changing but you can add your google analytics code at the bottom (once again, anyone have a better way to add google analytics?) and change anything you want once you understand it. i just thought this would be a good way of getting started.
That should be it... unless i've missed something it should now use the HTML5 tour for safari5/ipad/iphone (still needs testing on iphone ipad) users and Flash for everyone else.
Ideas and corrections are welcome if (more likely, when) anyone spots a problem... i'm not much cop with javascript so i've done this blind...
please feel free to test the one i've done already... go to http://www.stmaryskenton.org, scroll down and click "Launch Tour".
I've done mine slightly differently... You'll notice i've had to fudge it slightly to make it work in a fancybox iframe!!! it will show the flash file in the fancybox if no html5 support but In safari5 (and hopefully ipad/iphone) it shows an image link which opens a new window with the html5 tour... thats the only way i've got it to work full screen for html5 users, from the same link, using the fancybox iframe (html5's fullscreen mode doesn't work in a fancy box). As it's only a small number of users that will see the html5 version i figure they can click one more time for now.
KNOWN ISSUES: I need to do a proper skin for both versions and not all the files open looking in the right direction!!!! Probably countless others...
Hope this helps,
Nick
k.ary.n / thomas - please accept my apologies and delete my post if for some reason I'm not meant to have borrowed from your work or if this is bad advice... congrats on version 3, still in beta and already brilliant! I was about to buy krpano when I saw the new HTML 5 feature!
@iniclof and anyone else interested, I was in the same position as you last night and I think I've cracked it (although it still needs thorough testing on an actual ipad/iphone - no guarentees it works perfectly) and as I've been helped so much from reading this forum I thought I should help out... i'll try to be as clear and concise as possible. If you edit the attached files and folders as instructed it should work.
1. The attached folder, named "virtual-tour", includes an html file (tour.html) similar to the one I am using... open it and change "example.xml" and "example.swf" to your starting files (first file in the tour)... adjust the flash file's width and height as necessary. (you will find HTML5 width and height in the inline styles and set to 100%. this is so it starts in "full screen")... once again, needs more testing. save tour.html and close it.**
2. Paste all your swf and xml files loose in this folder ("virtual-tour")
3. Add the HTML5 specific jpeg's (all images, all sizes) to the folder named "images"
4. Open the folder named "resources", paste your skin file here (must be name "skin.js" unless you change the link in tour.html).
5. Add the images for your skin. NOTE: I've got mine in the folder named "skin-images" but you may have to do a find and replace in skin.js to change the file locations of the buttons or put the skin images where it's looking for them.
6. upload the whole folder (virtual-tour) to your server and link to tour.html to open...
**no other links in tour.html need changing but you can add your google analytics code at the bottom (once again, anyone have a better way to add google analytics?) and change anything you want once you understand it. i just thought this would be a good way of getting started.
That should be it... unless i've missed something it should now use the HTML5 tour for safari5/ipad/iphone (still needs testing on iphone ipad) users and Flash for everyone else.
Ideas and corrections are welcome if (more likely, when) anyone spots a problem... i'm not much cop with javascript so i've done this blind...
please feel free to test the one i've done already... go to http://www.stmaryskenton.org, scroll down and click "Launch Tour".
I've done mine slightly differently... You'll notice i've had to fudge it slightly to make it work in a fancybox iframe!!! it will show the flash file in the fancybox if no html5 support but In safari5 (and hopefully ipad/iphone) it shows an image link which opens a new window with the html5 tour... thats the only way i've got it to work full screen for html5 users, from the same link, using the fancybox iframe (html5's fullscreen mode doesn't work in a fancy box). As it's only a small number of users that will see the html5 version i figure they can click one more time for now.
KNOWN ISSUES: I need to do a proper skin for both versions and not all the files open looking in the right direction!!!! Probably countless others...
Hope this helps,
Nick
-
rolling-stone
- Posts: 4
- Joined: Sun Oct 17, 2010 9:32 am
what an idiot... this post actually does have the attachment.
@k.ary.n - Thanks, I hadn't seen that post. I have to admit that I don't really know how to use modernizer and I'm not very good with code, but I will see what I can do, especially with the files that rolling.stone posted.
@rolling-stone - Thanks man, I think I know how to do it now. I tried an example as you said, but since I don't have an iPhone I will have to wait to see if it works.
Thanks for everyone for your help!!!
@rolling-stone - Thanks man, I think I know how to do it now. I tried an example as you said, but since I don't have an iPhone I will have to wait to see if it works.
Thanks for everyone for your help!!!
Did you move/change where the images for the skin live? The default for the skin images is in the subfolder, "images".qless wrote:I've got a problem with the html5 export, my buttons are not loading (but they are on the server) when I open the pano on the website. When I open it locally the buttons do work, what am I doing wrong?
URL: http://arnoraps.com/pano/cdc/cdc-hall.html
- Attachments
-
- skin output image.png (12.67 KiB) Viewed 4625 times