FullScreenMode For Mobile

[TerryL]

Jacque & Richard. I've been following with interest your recent posts about fullScreenMode vs manual resizing objects in mobile. I have a few lingering questions.

1) Stacks have their resizable property "true" by default. I suspect they must remain true for either method of resizing. I've often accidently changed the stack width/height. Would it be safe to set the iPhone6 (375x667) stack as a minimum size? That probably means the stack couldn't be resized down to an iPhone4 or 5 then?

2) Do Geometry Manager settings work in mobile? Could it be a third resizing method, but a mess if combined with fullScreenMode or manual resizing?

3) The recommendation using large images scaled down with shift-drag must have their lockLoc property set "true" to prevent resizing back to their original size when navigating cards. How can the image now be scaled up for larger target mobile devices?

4) The "showAll" setting for fullScreenMode seems best for portrait. Unused border width taking the backgroundColor of the stack or card is a nice undocumented feature. Does scaling down to a smaller target mobile device really crop off-screen border width? Doesn't seem very "showAll".

5) In LC 8.1.9 / Win7, file > new stack > iPhone6 (375x667) results in a stack of 375x582. The height of the iPhone6+, iPad Portrait, and iPad Landscape also have correct widths but their heights are all 582. A bug? Filed Bug# 21157. The easy workaround is stack inspector > size, enter correct height, leave resizable checked "true". Terry

[bwmilby]

Check out this thread:
viewtopic.php?f=7&t=30018

The work arounds I used in that demo stack are no longer needed but it should still work as is. It does let you visualize how a stack changes on an actual device.

FullScreenMode is not enough to account for orientation changes. For that you need to use a method that can rearrange controls based on orientation. Profile manager is one way, but is not integrated into the new PI. Three other methods: manual resize manager that detects orientation, alternate card, alternate stack.

[FourthWorld]

0) What Brian said.

1) I don't believe the resizable stack property matters in mobile OSes, since the stack will always be resized to fill the screen. If you use fullScreenMode LC seems to use the last rect the stack was saved at, regardless whether the resizable property is true or false, basing its cropping or distorting on any difference between the saved size and the actual screen.

2) I don't know, never used the Geometry Manager in production. I experimented with it a few times, but after a while it occured to me that by the time I work out the logic of how that library handles the resizeStack message and click click click click click click through the settings I could have just written a few lines in my own resizeStack handler to place things where I want them. So that's what I do.

3) Objects can be moved and resized by changing their loc, rect, top, left, right, topleft, topright, bottomLeft, and bottomRight properties. Use what you need as you need it. In the early days of LC on mobile platforms we had limitations with regard to the differences in pixel density across devices. But in recent years the team has done such a great job with delivering resolution independence that we don't need to think about that at all, we can work in logical pixels and the engine/OS work out the details for us automatigically.

4) I haven't made apps for which fullScreenMode is a good fit, so beyond what we can see in the docs and in experimenting I have no opinion of specific modes. If you find one that seems off maybe one of the game devs here can advise if that's a bug.

5) Thanks for noting the bug #. Personally I see no value in the IDE's New Stack submenu suggesting to new users that they need or would even want to slavishly replicate their UI for every device Apple makes. First, it makes LC look bad by suggesting that's necessary, and moreover it makes LC look bad because the absense of any Android devices there suggest that LC doesn't support the other 80% of mobile users (of course it does). I'm lazy: I make a stack at a somewhat reasonable size and a somewhat reasonable ratio, and let my resizeStack handler work out the details from there for all devices on all supported platforms.

6) The distortions and cropping shown in your example seem to match those illustrated in this lesson from the team:
http://lessons.livecode.com/m/15262/l/5 ... ll-devices

[TerryL]

--Hi bwmilby. The LC thread you linked was interesting. Looks like mobile GM & profile bugs fixed in 9.0 RC1. I'll analyze your demo stack. Thanks.

--Hi Richard. Thank you for the detailed answers. I tried your suggestion of a resizeStack handler on a test stack of one scrolling field and three push buttons. It worked pretty good. Terry

Code: Select all

on resizeStack  --stack script
   put the width of this cd into tWidth
   put the height of this cd into tHeight
   put the loc of this cd into tLoc
   --cd 1: fld 1, btns 1,2,3
   set the width of fld 1 of cd 1 to (tWidth * .96)  --even%
   set the height of fld 1 of cd 1 to (tHeight * .86)
   set the loc of fld 1 of cd 1 to tLoc  --center
   set the bottom of fld 1 of cd 1 to (the bottom of this cd -6)  --bottom
   set the left of btn 1 of cd 1 to the left of fld 1 of cd 1   --left
   set the bottom of btn 1 of cd 1 to (the top of fld 1 of cd 1 -3)  --bottom
   set the loc of btn 2 of cd 1 to tLoc  --center
   set the bottom of btn 2 of cd 1 to (the top of fld 1 of cd 1 -3)  --bottom
   set the right of btn 3 of cd 1 to the right of fld 1 of cd 1  --right
   set the bottom of btn 3 of cd 1 to (the top of fld 1 of cd 1 -3)  --bottom
end resizeStack

[jacque]

4) The "showAll" setting for fullScreenMode seems best for portrait. Unused border width taking the backgroundColor of the stack or card is a nice undocumented feature. Does scaling down to a smaller target mobile device really crop off-screen border width? Doesn't seem very "showAll".

In general, "showAll" scales to the height of the screen and "noBorder" scales to the width. You can use the first for portrait and the second for landscape.

Ideally you would design for a smaller screen and always scale up, but even if you don't, LC will always show the full height in showAll mode. If the screen ratio forces the side edges to crop, design for that by leaving a safe margin at the edges with the primary content more centralized. I've found that working with an iPhone 6 plus size stack pretty much avoids cropping at the side edges. I've worked less with landscape orientation but the same principles should apply.

Manual resizing scripts also work, so you've got a good start on that already.

[TerryL]

Hi Jacque. Thanks for your response and insight on mobile questions. Terry