Images on skin - iPhone - Too Big

Henrique_ramos · Fri Apr 13, 2012 10:07 pm

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,

TH360 · Sat Apr 14, 2012 10:08 am

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.

Sat Apr 14, 2012 12:45 pm

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

Henrique_ramos · Mon Apr 16, 2012 5:06 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,

Mon Apr 16, 2012 5:21 pm

HI,
Do you have links?
The code should work fine.
Regards,
Hopki

Henrique_ramos · Mon Apr 16, 2012 7:36 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:

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>

Tue Apr 17, 2012 12:43 pm

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

panovrlover · Wed Apr 25, 2012 5:46 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?

Wed Apr 25, 2012 6:48 pm

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

panovrlover · Wed Apr 25, 2012 7:33 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.

Thu Apr 26, 2012 12:56 pm

Hi,
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" />

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

panovrlover · Thu Apr 26, 2012 5:21 pm

Thanks Hopki, I'll give that a try.

cblane · Fri Oct 12, 2012 2:32 am

Could that issue be handled with the minima and or maximum scale settings?