Different skins

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
frodo
Posts: 217
Joined: Wed Oct 15, 2008 2:52 pm

Different skins

Post by frodo » Tue May 06, 2014 12:23 am

Hi!
I think this has been asked before, but I couldn´t find the post.
I created a panorama to be used on desktop and mobile devices as well using the same files and folders. Is there a chance to recognize if the html opens on a desktop or a device? In the case of the desktop the instructions are supposed to show a mouse and in the case of a device a "classical" swipe icon.
Thanks for your help.
Regards!

User avatar
Hopki
Gnome
Posts: 9512
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Different skins

Post by Hopki » Tue May 06, 2014 2:11 pm

Hi frodo,
This is HTML5 only as most of the mobile devices can not use Flash anymore.
You would need to detect the user agents of all the touch screen devices which is not that difficult once you get your head around it.
First have a look at this KB document on our website.
It talks about changing skins for smaller and larger screens.

However the same code can used to detect all touch screen devices, then in doing so can then select the correct skin.
Here is the code I used in my testes that worked ok.

Code: Select all

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPad")) || (strpos($_SERVER['HTTP_USER_AGENT'],"Android")) || (strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry")) || (strpos($_SERVER['HTTP_USER_AGENT'],"webOS"))) { ?>
<script type="text/javascript" src="skin_touch.js">
<?php } else { ?>
<script type="text/javascript" src="skin_mouse.js">
<?php } ?>
</script>
Note the KB document uses skin_iphone.js and skin_ipad.js

Im using skin_mouse and skin_touch.js in the above code, so do as the document says, make the two skins, its important that the images folder contains all the images required for both skins.

Regards,
Hopki

frodo
Posts: 217
Joined: Wed Oct 15, 2008 2:52 pm

Re: Different skins

Post by frodo » Wed May 07, 2014 12:46 am

Hi, Hopki!
Thanks for your answer. Your explanation makes it sound easy, but I have to recognize my lack of "programming skills", therefore not so easy to me. Despite that, the client tries to reduce as much as possible, the number of files and folders to upload.
This client also asked me about changing the mouse pointer to show the viewers the interactivity of the image. Combining those 2 requests I was thinking about adding over the mouse something like you explain in the floating tool tip video. In that case an image with 2 arrows indicating the movement of the mouse or the fingers floating over the mouse pointer.
Do you think this could work in html5?
I´ve tried it but I had difficulties to place it in the right place. At fullscreen it ends misplaced and very far from the pointer where it originally was placed.
Thanks again, Martin

User avatar
malaga360VR
Posts: 43
Joined: Tue Sep 18, 2012 10:36 pm
Location: Spain / Málaga
Contact:

Re: Different skins

Post by malaga360VR » Wed Jul 12, 2017 12:02 am

Hy

I am uploading tours to Amazon S3 , and it does not support php, I need to make dual cardboard output for Android and iOS, its about full screen on Android and smooth movement option disabled for android.....

Is it posible to auto detect mobile devices without the use of php ??


----------------------------------------------------------------------------------------------

quote=Hopki post_id=36975 time=1399378318 user_id=971]
Hi frodo,
This is HTML5 only as most of the mobile devices can not use Flash anymore.
You would need to detect the user agents of all the touch screen devices which is not that difficult once you get your head around it.
First have a look at this KB document on our website.
It talks about changing skins for smaller and larger screens.

However the same code can used to detect all touch screen devices, then in doing so can then select the correct skin.
Here is the code I used in my testes that worked ok.

Code: Select all

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPad")) || (strpos($_SERVER['HTTP_USER_AGENT'],"Android")) || (strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry")) || (strpos($_SERVER['HTTP_USER_AGENT'],"webOS"))) { ?>
<script type="text/javascript" src="skin_touch.js">
<?php } else { ?>
<script type="text/javascript" src="skin_mouse.js">
<?php } ?>
</script>
Note the KB document uses skin_iphone.js and skin_ipad.js

Im using skin_mouse and skin_touch.js in the above code, so do as the document says, make the two skins, its important that the images folder contains all the images required for both skins.

Regards,
Hopki
[/quote]

Post Reply

Who is online

Users browsing this forum: No registered users and 23 guests