Designer Scripts Autoscale problems

[GuyBooth]

I have read through the threads and tutorials on multiple device setups, but have not been able to get past a basic problem.
I built my app based on an S3, using layouts in the designer, without any scripts. It is portrait only, looks good in the emulator (320 x 480) and on my S3.
Firstly, As soon as I uncomment the AutoScaleAll, the layout "Jumps", and I lose the small amount of padding I had included on the right hand side. The only way I have found to get it back is to add the line "AutoScaleRate(0.0)". No other value will get it back.
Secondly, I added a Variant for a 10.1 tablet, portrait mode. When I apply the layout to this variant, the layout only takes up about 1/4 of the screen. To fill the screen I have to set the AutoScaleRate to 0.75. But if I set it to 0.75, the S3 layout is wrong.

This doesn't match anything I've read. This is just a simple panel layout, there's nothing extraordinary about it. Everyone else seems happy with it, so I must be doing something wrong? Or am I not understanding what it is designed to do? I can put the scaling into the device specific scripts, but I didn't think it belonged there.
Layout file and screenshots attached. Note that the S3 original layout (no scaling applied) has slight padding to the right of the listview.

 

[klaus]

Your problem is that you define three layout variants with the same layout.
In the 'standard', layout with 320 x 480 scale, your views are bigger than the screen so it can't look right on a 320 x 480 emulator.
To use AutoScale you must define a layout that fits into the 320 x 480 screen because autoscale takes these dimensions as the reference.
Did you read chapter 8.10 AutoScale in the Beginner's Guide ?
There you have some examples with source code and also a more advanced Scale Module.
The AutoScale function in the Designer has two drawbacks, at least from my point of view, explained at the beginning of chapter 8.10.3 AutoScale more advanced examples in the Beginner's Guide.

I suggest you to make a layout file fitting in the standard screen and then you can 'play' with the AutoScaleRate value. Either in the Designer or with the Scale Module.

Best regards.

 

[GuyBooth]

I changed the layout to fit into the standard sizes, but I still have the same problem - I have to use a different scalerate for each device. With the "Standard" layouts, the rate is different from the ones I had before - but still, I have a simple panel that fills the screen. A scalerate that makes it fit a Tab 10.1 exactly leaves a gap on my S3.

Is this what I should expect? If so, is there a way to calculate what the scalerate should be for any given device?

 

[klaus]

Can you post your new layout file ?

Did you have a look at chapter 8.10.3 AutoScale more advanced examples in the Beginner's Guide ?

Best regards.

 

[GuyBooth]

I've read through the tutorials and the beginners guide section you refer to.

I think I found my problem - my new size still wasn't quite standard, it was short this time instead of too big ...

Thanks for your help Klaus, I'll play around some more and come back if I find I still haven't solved it.

 

[GuyBooth]

Well better - but still not exact.

I'm attaching my latest "standard" file. I've included my full script which makes adjustments for specific views on the main panel, but in fact it is the size of the main panel I was expecting to be able to set exactly with a single scalerate, and as you will see in my comments at the beginning of the script, I still need a different scalerate for each of the devices I am working with.

If this is to be expected, please tell me! I do have a workaround which I would prefer not to use.

 

[klaus]

You have one main problem in your layout.
You assume the total height beeing 480 pixels.
But the available height is only 430 pixels, 25 pixels for each top line.
So your views must fit into this 430 pixel height.

As explained, in chapter 8.10.3 in the Beginner's Guide, AutoScale can't do everything and it's a compromise.

In the AutoScaleExample4 you have the Scale module that includes some other equations for autoscale. In this case all views are streched with two factors one for each direction. With a Scalerate of one all views are strched to fill the whole width and height. But this is also only a compromise.

Best regards.

 

[GuyBooth]

Thanks once again Klaus.

You have one main problem in your layout.
You assume the total height beeing 480 pixels.
But the available height is only 430 pixels, 25 pixels for each top line.
So your views must fit into this 430 pixel height.

In fact this is where I was earlier this morning, and changed it before I uploaded the files - but again with the same problem.
Here is what I added to my designer script to bring my layouts closer to where I want them. I doubt if it will work for all cases - it's very rough and based on instinct rather than science! For now it is achieving what I need:

'All variants script
NewRate = .75
AutoScaleRate(NewRate)
AutoScaleAll 'uncomment to scale all views based on the device physical size.
If (100%x-pnlBase.Right)/100%x > 0.5 Then AutoScaleAll
NewRate = .05
AutoScaleRate(NewRate)
If (100%x-pnlBase.Right)/100%x > 0.05 Then AutoScaleAll
NewRate = .02
AutoScaleRate(NewRate)
If (100%x-pnlBase.Right)/100%x > 0.02 Then AutoScaleAll
NewRate = .01
AutoScaleRate(NewRate)
If (100%x-pnlBase.Right)/100%x > 0.01 Then AutoScaleAll
NewRate = .002
AutoScaleRate(NewRate)
If (100%x-pnlBase.Right)/100%x > 0.001 Then AutoScaleAll

Refinements anyone? I was surprised to find that each "AutoScaleAll" statement built on the previous iteration rather than working on the base size.

 

[klaus]

...- but again with the same problem.

What exactly is the problem ?
What exactly do you expect ?
As I already wrote, the layout you posted is not OK.

Best regards.

 

[GuyBooth]

Ok, attached is a layout I had done for 320 x 480 std, with the vertical dimension of 430 as you stated was required.
If I want the main panel on this layout to fill the screen on a Tab 10.1 I have to use a Scalerate of .75
But if I want to fill the screen on an S3, I have to use a different Scalerate.
This is just for the basic background screen.

I was expecting to be able to use one scalerate for all the basic devices, at least to achieve the basic size. I know I will still have to apply additional modifications to fine tune.

 

[klaus]

You should ask yourself:
What do I want to show, where and how on different screen sizes with different witdh/height ratios ?

AutoScale is only a compromise.
If you want to stretch all views you could use Scalerate near 0.9, and center the panels, but this is still a compromise. And this will not show well on 480 x 800 Screens nor on some others because of the different width/height ratios for different screens.
Or, as you already tried, having different ratios for different sceen sizes.
Or use the Scale module.

The main question remains, what do you want to show where and how.
Does it really make sense to display the same layout on a 3.5'' screen and on a 10'' screen knowing that the 10'' surface is 8 times the 3.5'' surface ?
Depending on the kind of application it could be OK, but for others it won't.
If you mainly have tables, or scrolling views AutoScale would be right, for others the question remais open.

Currently i'm developping a program to play music, at the moment I develop only for tablets. I have always two panes side by side the left one is almost always visible and the right one changes depending on the requirements.
I'm not sure if I will port it for Smartphones. It would need a different handling of the panels only one visible at the same time.
So I have not looked in detail yet what would be easier one program with two different panel handlings or two programs (or no Smartphone version).

Unfortunately there is no optimal universal solution.

Best regards.

EDIT: 2014.05.05
Concerning the program to play music above, I developped a separate version for smartphones with specific layouts.
But afterwards, I realized that maintaining two projects with most of the code beeing the same is tedious.
Finally, I merged both projects into one with the restriction that the program works only in landscape on tablet and portrait on phones. In the tablet version two panels are shown at the same time side by side and on the phone there is only one panel visible.