Multiple resolutions, resize stack a solution

[Simon]

This is only 1 possible way to do it, there are more.
Hello,
There have been many requests on how to handle resizing of stacks for multiple resolutions and frankly I'm tired of answering them. Here is a script that will scale and position your controls proportionally.

Code: Select all

on mouseUp
   put the height of this stack into tHeight
   put the width of this stack into tWidth
   put "on resizeStack" & cr & "put the height of this stack into tHeight" & cr & "put the width of this stack into tWidth" & cr into tResize
   repeat with i = 1 to the number of controls of this cd
      put the long id of control i into tName
      if tName = the long id of me then next repeat
      put wordOffset("stack",tName) into tWord
      put word 1 to (tWord -2) of tName into tName
      put the rect of control i into tSize
      put round(item 1 of tSize / tWidth,3) into tLeft
      put round(item 2 of tSize /tHeight,3) into tTop
      put round(item 3 of tSize / tWidth,3) into tRight
      put round(item 4 of tSize / tHeight,3) into tBottom
      put "set the rect of" && tName && "to" && "round(" & tLeft & "* tWidth)" & comma & "round(" & tTop & "* tHeight)" & comma & \
            "round(" & tRight & "* tWidth)" & comma & "round(" & tBottom & "* tHeight)" & cr after tResize
   end repeat
   put "end resizeStack" after tResize
   set the clipboardData["text"] to tResize
   answer information "The script has been copied to the clipboard, paste it into the stack script" titled "Now paste it"
end mouseUp

Position your controls on the smallest size stack you will be using (e.g. 320x460) once you've got it looking nice place a button anywhere and add the above script.
Click on the button and a resize script will be placed in the clipboard.
Paste the script into the stack script.
Delete the new button.
Knock your socks off resizing.

I figured this out from the lessons:
http://lessons.runrev.com/s/lessons/m/4 ... esolutions
and here:
http://runrev.com/developers/documentat ... rs-course/

NOTES:
This scales proportionally i.e. If you have a square object and do not resize the stack proportionally it won't be square anymore.
This only deals with 1 card, the script can be easily modified for all your cards.
This does not include any image handling, if your button icons use images you have to figure out how to make them look nice. Would have used strikethrough but not an option here.
Import your graphics including button icons at the largest size for your app (possibly iPad retina) and set their quality to "good", manually resize them so they look good on your smallest stack size.
This does not change font sizes.
This is only a starting point, there can be many cases where it just makes things look funny, refine it for yourself.

I hope someone will post a aspect ratio scaler script.

Have fun learning LiveCode,
Simon
EDIT: Here are links to other resizing resources:
Great Chipp Walters plugin, watch the video to see how to use it.
http://youtu.be/vY6r46O0cVA
then download the plugin
http://www.gadgetplugins.com/altplugins ... esizer.rev
And splash21's
http://mobgui.com/morph.php

[CoffeeCone]

Hi, this is nice. What about the text inside the objects? For example, the label for the button?

EDIT:
"This does not change font sizes."
OOps

[archer2009BUSknbj]

That resizing script is pretty clever, actually it's pretty amazing that it's not built right into LiveCode,

The ability to resize the text and perhaps keep the aspect ratio consistent by adding some padding to the top / bottom or left and right would be perfect ... no idea how to do that myself. But I'm most impressed

[archer2009BUSknbj]

This is only 1 possible way to do it, there are more.
Hello,
There have been many requests on how to handle resizing of stacks for multiple resolutions and frankly I'm tired of answering them. Here is a script that will scale and position your controls proportionally.

Code: Select all

on mouseUp
   put the height of this stack into tHeight
   put the width of this stack into tWidth
   put "on resizeStack" & cr & "put the height of this stack into tHeight" & cr & "put the width of this stack into tWidth" & cr into tResize
   repeat with i = 1 to the number of controls of this cd
      put the long id of control i into tName
      if tName = the long id of me then next repeat
      put wordOffset("stack",tName) into tWord
      put word 1 to (tWord -2) of tName into tName
      put the rect of control i into tSize
      put round(item 1 of tSize / tWidth,3) into tLeft
      put round(item 2 of tSize /tHeight,3) into tTop
      put round(item 3 of tSize / tWidth,3) into tRight
      put round(item 4 of tSize / tHeight,3) into tBottom
      put "set the rect of" && tName && "to" && "round(" & tLeft & "* tWidth)" & comma & "round(" & tTop & "* tHeight)" & comma & \
            "round(" & tRight & "* tWidth)" & comma & "round(" & tBottom & "* tHeight)" & cr after tResize
   end repeat
   put "end resizeStack" after tResize
   set the clipboardData["text"] to tResize
   answer information "The script has been copied to the clipboard, paste it into the stack script" titled "Now paste it"
end mouseUp

Position your controls on the smallest size stack you will be using (e.g. 320x460) once you've got it looking nice place a button anywhere and add the above script.
Click on the button and a resize script will be placed in the clipboard.
Paste the script into the stack script.
Delete the new button.
Knock your socks off resizing.

This script is simply amazing, I can't stop playing with my stack and constantly resizing it for fun.

If you figure out a way to keep the aspect ratio consistent you're going to make a lot of people very happy. I believe the iPhone 4 and iPhone 5 have slightly different aspect ratios and the way Apple dealt with iPhone 4 Apps was to simply add some padding to the top and bottom of the app on iPhone 5's to keep everything looking consistent, some kind of padding would be perfect, but Thanks so much for this script it's actually taken a lot of weight off my mind knowing this kind of thing is possible

[archer2009BUSknbj]

BTW if you use a PNG image for your background is there a way to get this to resize as well?

[Simon]

Thanks Archer,
I spent a Sunday afternoon on it so it's not tested everywhere like RunRev would do it. The method is simple so it's pretty stable.

Because I expect this script to be used on mobile devices you'll have to cut graphic buttons so I didn't think font size was as big an issue.

Text input should use a native control (eg mobileControlCreate "multiline", "myMultiLineTextInput") will size correctly I belive.

If you try altMobileResizer, Chipp has a method for aspect ratio.

Keep knocking your socks off!

Simon

EDIT: You can import an image for the background rather than using the "backgroundPattern" .

[KennyR]

Simon, this is a great script! The only thing I will point out, and don't shoot me for saying, but if you have a native mobGUI ios scroller, it will not allow you to scroll to the bottom...for some reason it stops the scrolling about 4/5 of the way down.....otherwise, it is awesome and such a time saver!!

*Edit--Well I figured this out...I put this line at the end of the Stack Script to update the scroller for mobGUI "scrollerUpdate "MyScroller" (where MyScroller is obviously the name of your scroller) The height of the scrollable area resized nicely...

[Simon]

Hi Kenny,
Thanks for your addition.
I don't use mobGUI so I never tested with it. Actually I wouldn't have thought mobGUI or altMobileResizer would work with this as they have their own resizing scripts.

SImon

[KennyR]

Simon... or anyone who uses this handler...I have been using this with great success on a program I currently have in development. I have been pleased with how it resizes for any screen. But what I am curious about is if anyone has figured out how to get the resize handler to resize the screen prior to the card opening...(for IOS or android). It's a bit of an eye sore when you open a card for the first time and it has to resize for lets say the iphone 5. This only happens once (being the first time the user visits the card), but it would be much nicer and smooth if the resize happened without the users knowledge. I have tried to lock the screen and place the handler in the preOpen card handler of the script, but nothing seems to work for me. You see the screen jump and resize....I know I'm looking the gift horse in the mouth here since Simon did a brilliant job of crafting this handler, but this would take it over the top for me...Thanks in advance as always for any input anyone has on this...

Kenny

[Simon]

Hi Kenny,
A few questions for you:
1) Is this on the emulator or on real devices?
2) What was your change for use on multiple cards?
3) Approximately how many controls are on each card?
4) Are DataGrids being used? (Not that that really matters it's just something I didn't test so I'd like to know if the code works with them).

Simon

[Klaus]

Hi Simon,

4) Are DataGrids being used? (Not that that really matters it's just something I didn't test so I'd like to know if the code works with them).

I HIGHLY doubt this!

The IDE successfully HIDES the real content of DataGrid groups, which can contain several 100 (and even more!) single objects and lots of "sub"groups.
And a script does NOT know per se if a group is a datagrid and will surely render a working and carefully set up datagrid useless and leave a TOTAL mess on the screen!
Know what I mean?

But please try this script with a datagrid on a card, make a screenshot and post it here


Best

Klaus

[KennyR]

Hey guys...I use this resize handler on all my cards and across all platforms now....I also use dataGrids....I actually have 2 on one card and they resize nicely. I have no problems what so ever using this other than what I stated above....Oh yeah, some of my cards have a multitude of buttons/controls etc. And I use this handler in both the simulator/IDE and on my iPhone for testing purposes....the program I am currently creating requires the iphone to communicate with the Mac/Win desktop....really nothing more than the pc/mac pulling data from the server....

[Simon]

It works with dataGrids????
WOW, I really didn't think it would.

Kenny, and how did you spread it across multiple cards? I'm thinking you may have put it in the card script?

Simon

[KennyR]

Simon, I thought I was just following your directions so I did nothing special other than what you said to do....I simply put the resize handler in each card of my stack...Did you have other ideas for what to do when you put this out? I'm telling you, this handler needs to be incorporated with LC releases...sooooo easy!!

edit* wait....are you guys asking if the individual fields and controls within the DG are resized when the window is resized? If that is what you are asking then no...you still have to use the behavior script of the DG to resize the fields and controls to the DG viewing area.....the resize handler as far as I can tell only affects the viewing area (outer perimeter) of the DG. Sorry if I was not getting the message in our previous discussion...

[Simon]

Hi Kenny,
I have no input on dataGrids but glad that you found a way to get it to work.

As for the script I was hoping users would add another loop for multiple cards:
repeat for the number of cd of this stack

Then keeping the script in the stack script, all resizing would happen at openStack (or wherever the user put it (Wait a sec! One doesn't have to call on resizeStack because it happens automatically when the stack opens and resizes itself to the new screen.).
I think this could be a solution to your problem.

Ya Dig Man? Catch my drift? Groovey to the idea? Grok that?

Simon