Hi!
Is there some way to make images from the skin gets fit into the screen size of the iPhone?
For example, if you access the following link, it works fine:
http://www.diegoramos.com.br/skin/testeskin.html
But in the iPhone (or another mobile) the logo stands in front of my control buttons, as you can see in the link bellow (just slide to unlock and you will see the site simulated on iPhone).
http://iphone4simulator.com/diegoramos. ... eskin.html
I don't want to make two files (one for PCs and tablets and another one for mobiles). Is there a way to use the same file but fitting on mobiles?
Thanks,
Images on skin - iPhone - Too Big
Why not just move the controller lower down the list in the skin so that it appears on top of the logo. Not ideal but at least the controller would be obvious.
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
When building a skin, think about your target ordinance, be it Flash and small Android Phones or HTML5 and the Apple devices.
If you intend for iPhones uses to view your outputs then the skin must accommodate the screen size.
For the iPhone 3 and 4 the logical screen size across in portrait is only 320px.
When dealing with such small screens and knowing that nearly all iPhone users will know to drag and pinch zoom, I would suggest opening with a splash screen telling the viewer its an interactive image which can be rotated and zoomed. This can also have your logo. Then on tap hide the splash screen and only have the minimal amount of buttons. I don't think arrows or even zoom buttons will be necessary if you cover this in the splash screen.
This will leave the screen showing the important part, the image.
There is also a Knowledge Base document that shows you how to have two different skins for the HTML5 output, one for larger displays and then one for the smaller displays.
The document can be found under User Guides on our website or here: http://gardengnomesoftware.com/wiki/Usi ... TML5_skins
To see this working go to our examples page and click on the Tour.
iPad you get the map, iPhones get drop down thumbnails.
Regards,
Hopki
When building a skin, think about your target ordinance, be it Flash and small Android Phones or HTML5 and the Apple devices.
If you intend for iPhones uses to view your outputs then the skin must accommodate the screen size.
For the iPhone 3 and 4 the logical screen size across in portrait is only 320px.
When dealing with such small screens and knowing that nearly all iPhone users will know to drag and pinch zoom, I would suggest opening with a splash screen telling the viewer its an interactive image which can be rotated and zoomed. This can also have your logo. Then on tap hide the splash screen and only have the minimal amount of buttons. I don't think arrows or even zoom buttons will be necessary if you cover this in the splash screen.
This will leave the screen showing the important part, the image.
There is also a Knowledge Base document that shows you how to have two different skins for the HTML5 output, one for larger displays and then one for the smaller displays.
The document can be found under User Guides on our website or here: http://gardengnomesoftware.com/wiki/Usi ... TML5_skins
To see this working go to our examples page and click on the Tour.
iPad you get the map, iPhones get drop down thumbnails.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
-
- Posts: 21
- Joined: Tue Mar 13, 2012 5:26 pm
Hi!
Thanks for your reply. It helped a lot (almost for everything).
My server supports PHP, however, it only works on my computer (is automatically runs the non-iPhone skin). But when I send to my server, the website only runs the iPhone skin.
Any suggestion?
Thanks,
Thanks for your reply. It helped a lot (almost for everything).
My server supports PHP, however, it only works on my computer (is automatically runs the non-iPhone skin). But when I send to my server, the website only runs the iPhone skin.
Any suggestion?
Thanks,
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
HI,
Do you have links?
The code should work fine.
Regards,
Hopki
Do you have links?
The code should work fine.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
-
- Posts: 21
- Joined: Tue Mar 13, 2012 5:26 pm
The link that shows only a menu and a "i" for information, when it is supposed to show a menu with buttons and etc. http://www.diegoramos.com.br/Teste360/sala/sala.php
The code is like this:
The code is like this:
Code: Select all
<body onorientationchange="hideUrlBar();">
<script type="text/javascript" src="pano2vr_player.js">
</script>
<?php if ((strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")) || (strpos($_SERVER['HTTP_USER_AGENT'],"iPod"))) { ?>
<script type="text/javascript" src="skiniphone.js">
<?php } else { ?>
<script type="text/javascript" src="skin.js">
<?php } ?>
</script>
<script type="text/javascript" src="pano2vrgyro.js">
</script>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("9.0.0")) {
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "pano";
attributes.name = "pano";
attributes.align = "middle";
swfobject.embedSWF(
"DRF_5921%20Panorama_cube_out.swf", "container",
"100%", "100%",
"9.0.0", "expressInstall.swf",
flashvars, params, attributes);
} else
// check for CSS3 3D transformations and WebGL
if (ggHasHtml5Css3D() || ggHasWebGL()) {
// create the panorama player with the container
pano=new pano2vrPlayer("container");
// add the skin object
skin=new pano2vrSkin(pano);
// load the configuration
pano.readConfigUrl("DRF_5921 Panorama_cube_out.xml");
// hide the URL bar on the iPhone
hideUrlBar();
// add gyroscope controller
gyro=new pano2vrGyro(pano,"container");
}
</script>
<noscript>
<p><b>Please enable Javascript!</b></p>
</noscript>
</body>
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
Are all the images for both skins in the images folder?
Have you have removed all html pages with the same file name as the PHP page?
Other than this it should all work, I have also attached a zip with a working project.
The zip contains the standard Simplex_notooltip as well as an idevice skin which I used for the iPhone.
Regards,
Hopki
Are all the images for both skins in the images folder?
Have you have removed all html pages with the same file name as the PHP page?
Other than this it should all work, I have also attached a zip with a working project.
The zip contains the standard Simplex_notooltip as well as an idevice skin which I used for the iPhone.
Regards,
Hopki
- Attachments
-
- HTML5 skin switch.zip
- (131.14 KiB) Downloaded 778 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
-
- Posts: 157
- Joined: Thu Sep 17, 2009 7:39 pm
Hi Hopki,
Is using SVG's an option also? Take a look at Peter Stephens recent exeter tours, on an iPhone, iPad etc the skin images resize and still sit in the same positions no matter what screen size, it looks like the same skin was used for desktop, iPhone, iPad etc.
http://emps.exeter.ac.uk/tours/csm/geol ... eparation/
If so, what SVG software do you use?
Is using SVG's an option also? Take a look at Peter Stephens recent exeter tours, on an iPhone, iPad etc the skin images resize and still sit in the same positions no matter what screen size, it looks like the same skin was used for desktop, iPhone, iPad etc.
http://emps.exeter.ac.uk/tours/csm/geol ... eparation/
If so, what SVG software do you use?
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
If a button is anchored bottom left, it will stay bottom left no matter the screen size.
With Peters skin it looks as if the buttons and in a container and is anchored bottom left. The "Select Location" menu, information and fullscreen buttons and anchored bottom right.
When you go fullscreen they stay relative to the sides with a gap in the middle.
Regards,
Hopki
If a button is anchored bottom left, it will stay bottom left no matter the screen size.
With Peters skin it looks as if the buttons and in a container and is anchored bottom left. The "Select Location" menu, information and fullscreen buttons and anchored bottom right.
When you go fullscreen they stay relative to the sides with a gap in the middle.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
-
- Posts: 157
- Joined: Thu Sep 17, 2009 7:39 pm
Sorry, let me be clearer..
On Peters skin, when the HTML5 is embedded in the page the skin elements are scaled so that they still appear as they should. If I output an HTML5 tour using PNG images (say a menu that is 600px across) when viewing this on an iPhone (fullscreen) it will be too big due to the screens resolution.
Thats why I wandered if Peter may have been using SVG images as they scale up/down with screen sizes.
On Peters skin, when the HTML5 is embedded in the page the skin elements are scaled so that they still appear as they should. If I output an HTML5 tour using PNG images (say a menu that is 600px across) when viewing this on an iPhone (fullscreen) it will be too big due to the screens resolution.
Thats why I wandered if Peter may have been using SVG images as they scale up/down with screen sizes.
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
Object2VR and Pano2VR have a line of code in the html page that prevents scaling.
Remove the above line and all will scale.
The danger is if you open a panorama on an iPhone and not forgetting it has a logical screen size of 480 x 320 the skin elements become very small and probably unuseable.
Regards,
Hopki
Object2VR and Pano2VR have a line of code in the html page that prevents scaling.
Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
The danger is if you open a panorama on an iPhone and not forgetting it has a logical screen size of 480 x 320 the skin elements become very small and probably unuseable.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Could that issue be handled with the minima and or maximum scale settings?