icon sizes on mobile devices

Fortgeschrittener

Freitag, 16. November 2012, 11:51

icon sizes on mobile devices

I've built a UI that looks fine on iPhone4, iPad 3, PC etc. When viewed on Android (HTC Desire C, ICS 320x480 screen). All the icons are too large. see screenshot.

the same xml is being used for all the devices. For example the logo in the top right is 150x45 pix and the xml is:

<plugin name="tr-1"
align="topright" x="35" y="35"
url="../hotspots/trek-logo.png"
alpha="0.8"
keep="true"
onhover="showtext('Virtual Tour created by Trek Wireless ',hotspottextstyle);"
onclick="openurl(links/trekwireless.htm)"
/>

Problem seems to be that all the icons are simply too big for the screen. Is there a simple way to rescale other than trying to detect the actual screen size (I'm currently using the desktop, tablet and mobile tags) and the scaling all the icons down?

Thanks in advance.

Tim

»trek« hat folgendes Bild angehängt:

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Freitag, 16. November 2012, 14:44

Like:
Onloaded="If(isandroid, mul(scale,0.5));"

?

Tuur

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

trek

Fortgeschrittener

Beiträge: 175

Freitag, 16. November 2012, 15:45

Thanks Tuur

I'll try it, but wonder what happens on Android tablet when I dont want the icons to resize?

cheers
Tim

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

Freitag, 16. November 2012, 15:49

Make a choice or a chain of choices ...

http://www.krpano.com/docu/actions/#device

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

trek

Fortgeschrittener

Beiträge: 175

Montag, 19. November 2012, 13:40

Thanks Tuur

did some more testing...

altonloaded="if(isphone, mul(scale,0.5))); onloaded();" - works fine on iphone 4

altonloaded="if(device.html5, mul(scale,0.5))); onloaded();" - does not work on iphone or ipad

altonloaded="if(isandroid, mul(scale,0.5))); onloaded();" - does not work on HTC Desire C

altonloaded="if(device.android, mul(scale,0.5))); onloaded();" - does not work on HTC Desire C

Here is the button script:

<plugin name="tr-1"
align="topright" x="35" y="35"
url="../hotspots/trek-logo.png"
alpha="0.8"
keep="true"
altonloaded="if(isandroid, mul(scale,0.5))); onloaded();"
onhover="showtext('Virtual Tour created by Trek Wireless ',hotspottextstyle);"
onclick="openurl(links/trekwireless.htm)"
/>

using krpano 1.0.8.15 (build 2012-08-10)

any ideas? *huh*

cheers

Tim

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Montag, 19. November 2012, 15:21

Hi,

Zitat

HTC Desire C, ICS 320x480 screen

Wow that's an Android device with a low resolution!

In this case it might be necessary to check also the screensize and apply a suitable scaling...

e.g. try:

	Quellcode
1	onloaded="if(device.android, min(minscreen,stagewidth,stageheight); if(minscreen LT 400, set(scale,0.5));"

Zitat von »trek«

using krpano 1.0.8.15 (build 2012-08-10)

The device object was introduced in build 2012-10-05:
http://krpano.com/news/#releasenotes10815-2012-10-05

Best regards,
Klaus

Zum Seitenanfang

trek

Fortgeschrittener

Beiträge: 175

Montag, 19. November 2012, 16:47

Thanks Klaus

I upgraded and retested. Could not get it to work with my android phone, I think the code is ok as I changed it to device.mobile and the icons were correctly 'shrunk' on my iphone. I suspect the HTC phone is somehow not identifying itself as an android device. Looks like I need to buy some more android devices to test on *sad*

.

BTW after upgrading to krpano-v3-Build 2012-10-05 text created with textfield plugin appears on centre left of screen, once i select another view text returns to bottom left (where it is supposed to be)? any ideas. do not see the problem with 2012-08-10.

cheers
Tim

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

Mittwoch, 21. November 2012, 21:09

Hi,

Zitat von »trek«

I suspect the HTC phone is somehow not identifying itself as an android device. Looks like I need to buy some more android devices to test on .

hmm... that might be possible, but would be a bit strange...
Are you testing the Flash or the HTML5 viewer?

Zitat von »trek«

BTW after upgrading to krpano-v3-Build 2012-10-05 text created with textfield plugin appears on centre left of screen, once i select another view text returns to bottom left (where it is supposed to be)? any ideas. do not see the problem with 2012-08-10.

No sorry, currently not...
Do you have a link to an example?

Best regards,
Klaus

Zum Seitenanfang

trek

Fortgeschrittener

Beiträge: 175

Montag, 10. Dezember 2012, 17:50

textfield bug in Build 2012-10-05

Hi Klaus

Sorry for the delay in getting back to you, re textfield bug, you can see the problem here:

http://www.trekwireless.co.uk/krpano-tes…d-bug/index.htm

If you view in safari text appears in correct place, switch to html5 (ie iPad) text is displayed in left centre.

Here is the xml I'm using:

<plugin name="titletext"
url="../plugins/textfield.swf"
keep="true"
align="bottomleft"
x="35" y="30"
autosize="left"
wordwrap="true"
background="false"
zorder="-1"
children="true"
html="TEST"
css="p{color:#FFFFFF; font-family:arial; font-style: regular; font-size:20;text-align:left; }"
effect="dropshadow(4,45,0x000000,4,1);"
/>

<action name="showname">
txtadd(plugin[titletext].html,[p],get(scene[get(xml.scene)].title),[p]);
</action>

Problem did not occur in previous release.

Thanks in advance *smile*

Cheers Tim

Zum Seitenanfang

icon sizes on mobile devices

icon sizes on mobile devices

Zitat

Quellcode

Zitat von »trek«

Zitat von »trek«

Zitat von »trek«

textfield bug in Build 2012-10-05

Ähnliche Themen