Autoscaleall issues

sconlon · Dec 29, 2012

In the designer I have created a standard 320 x 480 layout with a panel (60dip in height, 320dip in width) which holds 5 buttons each 60 x 60 dip. I have placed the leftmost button 2dip from the left, the buttons have a 4dip space between them and the rightmost button 2dip from the right. This gives a total width of 320dip. In the designer script I have the following in the All Variants section.

B4X:

AutoScaleAll
pnlbuttons.Bottom = 100%y

When I send this to the UI cloud it does not appear correctly on any of the devices, it's almost right on the Samsung I9000 (480x762 scale 1.5) but the rightmost button extends slightly beyond the right edge of the screen. If I add

B4X:

pnlbuttons.SetLeftAndRight(0,100%x)

at the bottom it seems to make no difference. After much trial and error with different scale rates and various other changes the only way I could get the layout to display properly on all screens was to omit the autoscale and manually setup each button using %x as follows:

B4X:

btnwidth  = 18%x
btnheight = 18%x
pnlbuttons.width = 100%x
pnlbuttons.Height = btnheight
btn1.Left = 1%x
btn1.Width = btnwidth
btn1.Height = btnheight
btn2.Width = btnwidth
btn2.Height = btnheight
btn2.Left = btn1.Right + 2%x
btn3.Width = btnwidth
btn3.Height = btnheight
btn3.Left = btn2.Right + 2%x
btn4.width = btnwidth
btn4.Height = btnheight
btn4.Left = btn3.Right + 2%x
btn5.Width = btnwidth
btn5.Height = btnheight
btn5.left = btn4.Right + 2%x
pnlbuttons.Bottom = 100%y

This gives an acceptable result but spacing for the rightmost button is a bit off.

So why does AutoScaleAll not produce a correctly scaled panel on the devices and should I just use the %x approach which is much more tedious?

Ta.

klaus · Dec 29, 2012

What exactly do you expect ?
You should have a look at chapter 8.10 AutoScale in the Beginner's Guide Edition 2.3

Best regards.

sconlon · Dec 30, 2012

Thanks for the reply Klaus. I have read that chapter section several times so it must be that I do not fully understand what exactly AutoScale does. I should first say that I do not understand how the formula for calculating the scale was determined and have yet to find a full and clear explanation of this.

delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
rate = 0.3 'value between 0 to 1.
scale = 1 + rate * delta

However, when it says in the text of Chapter 8 that 'AutoScale multiplies the Left / Top / Width and Height properties by the scale value.' I took this to mean that you would end up with views that would be display properly on multiple devices, albeit that some changes to the scale rate may be required. In the examples in that chapter the only adjustments that appear after AutoScaleAll are to position the views and not to change their sizes.

So, please, for someone as obviously stupid as myself can I have a clear explanation of what is happening in my example and what I need to do to resolve the issue.

Many thanks in anticipation of your continued patience with us troubled souls.

klaus · Dec 30, 2012

delta = ((100%x + 100%y) / (320dip + 430dip) - 1)
(100%x + 100%y) is the sum of the width + height of the current screen
(320dip + 430dip) is the sum of the width + height od the standard screen
(100%x + 100%y) / (320dip + 430dip) ratio of the dimensons current screen / standard screen.
- 1 to get the variation (used with the rate factor)

rate value between 0 and 1, the default value rate = 0.3

scale = 1 + rate * delta scale factor
Scaling with a factor of 1 would increse the dimensions too much for big screens (full streching like %x and %y).
The rate factor allows to minimize this effect.

If you set rate = 0 then AutoScaleAll has no effect.
If you set rate = 1 then AutoScaleAll is similar to %x and %y scaling.
Left, Top, Width and Top are multiplied by the scale factor.

If you look at pages 142 and 143 in the Beginner's Guide Edition 2.3 you see that not only Left and Top are multiplied but the size of the views is scaled too.
It is interesting to put all views on a Panel and center this Panel horizontally and eventually also vertically after autoscaling.

Best regards.

sconlon · Dec 30, 2012

Thanks again Klaus. So going back to my example of buttons that are 60 x 60 on the standard screen, when multiplied by the scale factor, with the default rate of .3 and other rates that I tried, should some of the results not work correctly for the various screens supported by the UI Cloud. Isn't that the idea of AutoScale, that it does all the hard work for you.

Also, if I need to adjust the rate value for some screens (by trial and error) doesn't this mean that I will end up with several variant specific scripts which is not ideal.

klaus · Dec 30, 2012

First point: AutoScale can't do miracles !

If you look at the different screen sizes:
3.5'' screen
7'' screen = 4 times the surface of the 3.5'' screen
10'' screen = 2 times the surface of the 7'' screen and 8 times the surface of the 3.5'' screen.
So you must define what you want to show on the different screen sizes.
If you want everything beeing streched it would be too small on a 3.5'' screen and too big on a 10'' screen.

That's the big mess with all these screen sizes and different width/height ratios, I didn't even mention the intermediate sizes.

AutoScale is only a compromise to adapt a 'standard' screen to all the others, but it's only a compromise.
Depending on what you want to show you could use AutoScale or you could use layout variants for different screen sizes.
In extreme cases you could need two or more different applications.

Best regards.

sconlon · Dec 31, 2012

I need to do some calculations for the various screen sizes but I thought that it was the screen resolution that was significant rather than the physical size. For example if you have a 4" screen with a resolution of 800 x 1130 and a 10" screen with the same resolution then a 60 x 60 button will be scaled up to approx 122 on each (with scale rate of .3) and this should take up the same physical screen space on both devices.

An additional question, how does the process work out what 100%x and Y are and are they not accurate. Also, is there a difference between 100%x and activity.width?

Thanks again.

klaus · Jan 2, 2013

An additional question, how does the process work out what 100%x and Y are and are they not accurate.

I don't really understand your question. 100%x and 100%y are acurate.
You can position and dimension views with %x and %y values. This is equivalent to stretching them according to the widths and height ratios.

100%x = Activity.Width and 100%y = Activity.Height

Best regards.

sconlon · Jan 2, 2013

The reason I asked the question was that in one layout I have a panel whose width I set in the designer script to be 100%x with left = 0 and a button within the panel whose right property I set to 98%x. When I send the layout to the UI Cloud all devices except the Samsung I9000 display the button way beyond the right edge of the screen. For example in the Kindle Fire only about half the button is visible. This seems strange to me.

klaus · Jan 2, 2013

Do you use AutoScaleAll in the Designer Scripts ?

Best regards.

sconlon · Jan 2, 2013

No, I haven 't used AutoScale. I think that I have seen this behaviour in some of my other layouts but one where all the labels are not within panels but are children of the Activity seem to work on all the UI Cloud devices when I use %x and %y. In the other cases where the layouts didn't display correctly I think that when I set the panels in code to activity.width they then displayed ok on some of the virtual devices that I had created. That's why I asked if activity.width was different from 100%x.

wheretheidivides · Jan 2, 2013

I mentioned the bugs in autoscale when it was in beta. I showed pictures of the problems. After several messages I gave up. They think it's me. The layout designer has bugs and especially autoscale. It doesn't work how they say it does. You will still need multiple layouts.

What I do is create a layout, then make 7" and 10" variants. Then I copy over the scripts. The I modify the autoscale. Then whenever I change something, I do it on the 1st variation, delete the other 2 variations, create 2 new variations and then copy over the scripts again. A pain in the butt.

Erel · Jan 3, 2013

There are no known bugs with AutoScale. Scaling can be confusing. However once you understand it you will see that it works correctly.

sconlon · Jan 3, 2013

I'm happy enough with the results I can get from using %x and %y in designer scripts as my layouts don't suffer too much from being stretched on the larger screens. However, I am puzzled sometimes with the display results as mentioned in my previous post but I am sure it is something I am missing rather than a bug.

sconlon · Jan 4, 2013

Just a note to say that I found the reason why my layout was not displaying properly on all devices in the UI Cloud. I was setting the view's left property before setting its width. When I changed this it displayed correctly on all devices.

Autoscaleall issues

sconlon

Active Member

klaus

Expert

sconlon

Active Member

klaus

Expert

sconlon

Active Member

klaus

Expert

sconlon

Active Member

klaus

Expert

sconlon

Active Member

klaus

Expert

sconlon

Active Member

wheretheidivides

Active Member

Erel

B4X founder

sconlon

Active Member

sconlon

Active Member

Similar Threads

Autoscaleall issues

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

B4X founder

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency