How to make an object same size on any given device...

Audio and Graphics
#1

Hi, 

I have an age old question.

How do I make my buttons, rows, fonts etc same [physical] size across say an iPhone4, iPhone5 and an iPad?

Using ZoomStretch or LetterScale in config.lua is not the answer as these simply help scale visuals in one way or another. What I need is to know the exact capabilities of a device my app is running on so that I can adjust the size of objects on the fly…

For example, lets say the tableview widget I’m using displays n rows on an iPhone 4. Lets say this offers the best row height and font size etc for the particular purpose at hand. Now if you run the same app on an iPhone 5 with zoomStretch you will still be showing n rows with each row and fonts being taller. If you run the app on an iPad row height as you would measure with a real ruler will be about twice if not more. The app now looks like a joke on a tablet. 

So what I need is a way to detect exact screen size, not in Corona size units so I can display n count of rows in that space on an iPhone 4, say n + 2 rows on an iPhone 5 and say n x 2 on an iPad… I can do all that thanks to the flexibility of the widget api but I need to programmatically know what I’m working with… 

I came across an excellent post by bob.dickinson on the Code Exchange where he articulates the challenge very clearly and then proceeds to share his approach to solving the problem. It can be found here : http://developer.coronalabs.com/code/device-metrics-scaling-based-screen-size …

This was shared more than a year ago and as a Corona SDK newbie I can’t help but wonder if any new developments have occurred since that time. Has Corona Labs addressed this need in any way?

I would appreciate any responses, thoughts or suggestions you might have. Thank you very much! 

Regards,

Kerem

#2

Here is what I did.

local screenW = display.contentWidth local screenH = display.contentHeight local scaleX = display.contentScaleX local scaleY = display.contentScaleY local pixel\_width &nbsp;= (-display.screenOriginX \* 2 + screenW) / scaleX local pixel\_height = (-display.screenOriginY \* 2 + screenH) / scaleY --pixel\_width and pixel\_height are your device resolution local virtualRatio = screenW/screenH local deviceRatio = &nbsp;pixel\_width/pixel\_height&nbsp; if virtualRatio == deviceRatio &nbsp;then &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--device has same resolution as your resolution in config.lua elseif virtualRatio \> deviceRatio then&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--device is longer than your resolution in config.lua elseif virtualRatio \< deviceRatio then&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;--device is broader than your resolution in config.lua end&nbsp; &nbsp;

EDIT

Ok. I did not see you’d mentioned bob.dickinson’s post. 
You are probably good to go then. I took the code from his lib only.

#3

Thanks for your sample Satheesh. I am aware of the bob.dickinson code. In his post he asks people to let him know if they come across other devices with different proportions etc. I’m wondering if there is a newer version of this code or whether Corona has done anything with the SDK to improve this situation. 

Meanwhile I tried something and it gave me an interesting result…

I ran the CL sample called WidgetDemo in its stock condition and see 10 lines in the 1st tab, TableView while viewing as iPhone, iPhone 4 and iPhone 5. Its config.lua uses ZoomStretch. 

I then switched its config.lua to use Rob Miracle’s magic config.lua to see what happens. The Tableview suddenly started to show 12 rows on iPhone 5 while still showing 10 rows on iPhone. Amazing!!! Exactly what I wanted to achieve!

Doesn’t do so well (10 rows) on iPad but at least the fact that it reacts differently to an iPhone 5 tell me there is perhaps some hope there. I will dig in that code and see how iPhone 5 goes to 12 rows and see if I can couple learnings from that + bob.dickinson’s code to cover the other devices.

Sound like a plan?

#4

Argh! How did I miss this blog post from April 30th? 

http://www.coronalabs.com/blog/2013/04/30/new-system-info-properties/

Apparently it is now possible to pin down exact device specifics for the Android camp. This covers most of the noise as IOS seems to be easier to deal with given the smaller number of device variations (for now…).

Lets see how I can tweak bob’s code to integrate the new API. 

#5

Hmmm, spoke a little too soon. These new APIs return nil on the simulator so can’t make much use of it in my development / trial & error work… 

#6

Found another great function on the Code Exchange. This one covers the IOS devices so if we couple it with the new API covering the Android we should be all set. Thank you very much BeyondtheTech for sharing.

http://developer.coronalabs.com/code/iosinfo-definitive-way-determine-type-ios-device-your-app-running

#7

I think I’m almost done with this challenge but for the fonts… I can make objects same size across devices but I am struggling with font sizes as the pt. based measures do not scale up or down in a linear fashion across devices. Not sure how best to tackle this one. 

#8

Here is what I did.

local screenW = display.contentWidth local screenH = display.contentHeight local scaleX = display.contentScaleX local scaleY = display.contentScaleY local pixel\_width &nbsp;= (-display.screenOriginX \* 2 + screenW) / scaleX local pixel\_height = (-display.screenOriginY \* 2 + screenH) / scaleY --pixel\_width and pixel\_height are your device resolution local virtualRatio = screenW/screenH local deviceRatio = &nbsp;pixel\_width/pixel\_height&nbsp; if virtualRatio == deviceRatio &nbsp;then &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--device has same resolution as your resolution in config.lua elseif virtualRatio \> deviceRatio then&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--device is longer than your resolution in config.lua elseif virtualRatio \< deviceRatio then&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;--device is broader than your resolution in config.lua end&nbsp; &nbsp;

EDIT

Ok. I did not see you’d mentioned bob.dickinson’s post. 
You are probably good to go then. I took the code from his lib only.

#9

Thanks for your sample Satheesh. I am aware of the bob.dickinson code. In his post he asks people to let him know if they come across other devices with different proportions etc. I’m wondering if there is a newer version of this code or whether Corona has done anything with the SDK to improve this situation. 

Meanwhile I tried something and it gave me an interesting result…

I ran the CL sample called WidgetDemo in its stock condition and see 10 lines in the 1st tab, TableView while viewing as iPhone, iPhone 4 and iPhone 5. Its config.lua uses ZoomStretch. 

I then switched its config.lua to use Rob Miracle’s magic config.lua to see what happens. The Tableview suddenly started to show 12 rows on iPhone 5 while still showing 10 rows on iPhone. Amazing!!! Exactly what I wanted to achieve!

Doesn’t do so well (10 rows) on iPad but at least the fact that it reacts differently to an iPhone 5 tell me there is perhaps some hope there. I will dig in that code and see how iPhone 5 goes to 12 rows and see if I can couple learnings from that + bob.dickinson’s code to cover the other devices.

Sound like a plan?

#10

Argh! How did I miss this blog post from April 30th? 

http://www.coronalabs.com/blog/2013/04/30/new-system-info-properties/

Apparently it is now possible to pin down exact device specifics for the Android camp. This covers most of the noise as IOS seems to be easier to deal with given the smaller number of device variations (for now…).

Lets see how I can tweak bob’s code to integrate the new API. 

#11

Hmmm, spoke a little too soon. These new APIs return nil on the simulator so can’t make much use of it in my development / trial & error work… 

#12

Found another great function on the Code Exchange. This one covers the IOS devices so if we couple it with the new API covering the Android we should be all set. Thank you very much BeyondtheTech for sharing.

http://developer.coronalabs.com/code/iosinfo-definitive-way-determine-type-ios-device-your-app-running

#13

I think I’m almost done with this challenge but for the fonts… I can make objects same size across devices but I am struggling with font sizes as the pt. based measures do not scale up or down in a linear fashion across devices. Not sure how best to tackle this one.