Geometry/Profile Manager on Mobile

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: heatherlaine, Klaus, FourthWorld, kevinmiller

Post Reply
bwmilby
Posts: 205
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Geometry/Profile Manager on Mobile

Post by bwmilby » Sat Oct 21, 2017 10:28 pm

I'm fairly new to LiveCode, but one of my interests is developing software for mobile. Since I use iOS as my daily phone, that is my initial focus. One of the things that I'm wanting to be able to do is easily adjust my stack to work with any size screen.

I've spent the past month or so working on using the geometry manager and profile manager on mobile. I'm not certain on Android, but on iOS the profile manager library will not get deployed. In fact, if you don't change the Property Profile option (general tab of Standalone settings) to include all profiles while iOS is not selected, they get stripped out of the built app. Also, on iOS (and I think Andriod), the common library is not included. There is code in that library required for the geometry manager to work and also for the profile library. The two buttons on the bottom of the stack contain the needed code which is put into the back script when the app is opened.

The attached stack has 3 profiles: Master (default), Portrait, and Landscape. (In the future, I will not do it this way. I will use Master for the portrait orientation.) The image shows the mobile stack and there is a sub-stack that I included to help manage the profiles while developing. It is set to open as a palette stack so the buttons are always available. The edit button lets you easily get the sub stack in a state ready for editing. The check box on the bottom indicates whether the current profile will be saved when switching to another profile.

The stack will open at full screen resolution on mobile. The buttons on the right can be used to change the stack to different sizes. The stack will open in "noScale" mode, but the buttons can be used to set different modes to see how they impact the display of the stack. There is a red outline on the stack border which makes is easy to see how the modes work. On my iPhone 6S Plus, the 320x480 is the best to use to see how the different fullscreen modes change how a stack would be scaled without using geometry/profiles.

On iOS, the splash screens must be specified for the full screen modes to work properly. If you don't specify a splash image for the device, then screenrect will not report the full size of the screen. The status bar will also scale which does not look good.

Screen Shot 2017-10-21 at 2.49.48 PM.png
Demo Screen Shot
I still need to do some additional testing, but it does seem to be a little finicky on when the geometry settings get saved. It seems like you need to visit the geometry tab for each control and make selections for each profile. This is why I will use "master" for the portrait orientation in the future.

To set this up, build the stack in portrait (or the main) orientation and then use the geometry manager to anchor all of the objects. This allows everything to adjust to the size of the screen. The example was built for the smallest screen size to allow geometry to adjust for the larger sizes. Once everything is set, set the profile to force the IDE to save locations of everything. After the primary orientation is done, switch to the other orientation and move the controls. Be sure to set the geometry on the controls after moving them. After they are set, set the profile to force the IDE to save locations on the new profile.

One thing that I do in the preOpenStack is to set the profiles and get them updated (look at the code). A side effect is that resizeStack won't be used since changing the profile does all the work. This is a single card stack which is easy. Additional work would be needed for stacks with multiple cards.

Another observation is that in the orientationChanged handler, the screen/stack dimensions have not changed yet. This means that you need to use the device's reported orientation for reliable results. Setting the new profile here allows the rotation animation to look right (draws the new screen and rotates/scales it into place). I added another handler that is called after the change to ensure the stack rect matches the screen rect. I found that when adjusting the stack size, frequently the stack would get offset and not size properly. This is probably not needed on a stack that doesn't adjust the stack size like this demo does.

Any attached code that I wrote is free for anyone to use. The code in the Common and Profile buttons comes from LiveCode source.

Hopefully this is helpful for someone trying to get a handle on adjusting interfaces for mobile (and maybe even desktop too).

Thanks,
Brian

Edit: updated demo stack / added iPhone device resolution
Attachments
MobileProfile.livecode.zip
Demo stack
(17.07 KiB) Downloaded 29 times
Last edited by bwmilby on Sun Oct 22, 2017 1:34 am, edited 3 times in total.
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6154
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Geometry/Profile Manager on Mobile

Post by FourthWorld » Sat Oct 21, 2017 10:58 pm

Sometimes the Geometry Manager can be a really great time-saver, but ultimately no matter whether you write your own resizeStack handlers or let the GM do that, each requires a bit of work.

When using any point-and-click solution, there will be a lot of gestures required (select this, click that). In some cases it may be that the number of gestures required is the same, or perhaps even more, than the number of lines of code you'd write if you wrote your own resizeStack handler.

At least with the GM you get ~60k of code you didn't have to write.

But on the flipside, your app is now using ~60k of code you didn't write, so figuring out exactly how it works can take some time and experimentation.

True enough, writing a resizeStack handler will also take some time and experimentation. But it's a rare day when purpose-built resizing code exceeds even just a K or two, and it doesn't take that much time to write.

But best of all, when you write your own resizeStack handlers directly you have complete control over every aspect of what happens.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

bwmilby
Posts: 205
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: Geometry/Profile Manager on Mobile

Post by bwmilby » Mon Oct 23, 2017 5:22 am

One of my thoughts about posting this is in response to some of the old threads I found on the subject. There was at least one individual that thought the lack of a built-in geometry feature was a big down side of LiveCode. I was determined to show that it really isn't the case since GM and PM are provided - they just were not easily usable on mobile. I want to correct that (will take some code updates, but nothing overly complicated - biggest hurdle is making the common library available in mobile, at least iOS).

You make some good points. One of the main reasons to post in the beginner forum is that I wouldn't expect a beginner to be up to writing the custom resize handler. I'm sure that I could figure it out easily enough, but since the GM is already written it seemed to be a good thing to have working properly for a beginner since it can be done mostly point and click. There are some shortcomings to the GM, but if your interface is on the simple side it could work well. (Notable shortcoming is the inability to move and resize a control, you have to choose one or the other, but I think that is actually a bug. The GM library does work to scale an object relative to both sides but the PI won't let you set proportional on left/top.)

Once you need to handle multiple device orientations, then you will probably need something besides the GM since controls will need to be re-positioned for the new layout. That is where the PM can be helpful. Everywhere else I've seen suggestions where you have another stack/card with the new layout, size the stack as a square and duplicate controls (so they are clipped to only display one), or write a custom resize handler. The PM does take a bit to understand and use, but it is another option in the tool bag.

There is also the issue of mobile controls. Anything that you instantiate via code won't respond to the GM/PM. And if you use PM, you don't even get resize messages on rotate (at least the way I set it up). You would need to use the orientation messages exclusively. At least on iOS... I have not set up an Android environment yet (but I do have a Fire that I got a year ago). But, if we are able to use widgets, then we just might be able to use PM/GM on them.

In any case, my demo stack is an example that can be easily put on a mobile device to see what the different scale modes do and one way of handling rotation re-positioning.
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6154
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Geometry/Profile Manager on Mobile

Post by FourthWorld » Mon Oct 23, 2017 7:40 am

bwmilby wrote:
Mon Oct 23, 2017 5:22 am
One of the main reasons to post in the beginner forum is that I wouldn't expect a beginner to be up to writing the custom resize handler.
This is an interesting way of seeing things. Which LiveCode messages are for beginners?

I suppose there are some things that may take more practice to learn well than others (Kevin can tell you about my initial cognitive breakdown with custom property sets back in the day <g>). But I've always figured that if someone's asking about an area of interest to them, the messages that bring that area to life are the ones they'll learn next.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

MaxV
Posts: 1539
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Geometry/Profile Manager on Mobile

Post by MaxV » Mon Oct 23, 2017 12:14 pm

Geometry manager an work on mobile, here a workaround: http://quality.livecode.com/show_bug.cgi?id=18097
Profles on mobile workaround here: http://quality.livecode.com/show_bug.cgi?id=13825

These bugs are in livecode at least from 2014.
Livecode Wiki: http://livecode.wikia.com
My blog: http://livecodeitalia.blogspot.it
To post code use this: http://tinyurl.com/ogp6d5w

bogs
Posts: 2198
Joined: Sat Feb 25, 2017 10:45 pm

Re: Geometry/Profile Manager on Mobile

Post by bogs » Mon Oct 23, 2017 4:19 pm

FourthWorld wrote:
Mon Oct 23, 2017 7:40 am
bwmilby wrote:
Mon Oct 23, 2017 5:22 am
One of the main reasons to post in the beginner forum is that I wouldn't expect a beginner to be up to writing the custom resize handler.
This is an interesting way of seeing things. Which LiveCode messages are for beginners?
Well, speaking *as* a beginner of Lc numerous times, I can tell you even at this point this is one of the things (resizing/scaling and repositioning) I still find hardest to get my head around. I can (pretty confidently) say that with the IDE itself, the only place you find any information about it is in the user example that explains how to use the geometry manager, but as pointed out you quickly learn that the gm seems to set you back rather than helping a lot. In fact, if I remember that one correctly, the guy explaining it had problems wrapping his head around it, and he was hardly a 'beginner', but was a 'beginner' in Lc.

You asked what Lc messages "are for beginners?" I would say most beginners don't even realize how 'messages' even work in Lc terms. Even at this point, I am not sure which you are referencing. Do you mean messages like mouseUp? Or were you asking which coding terms should a beginner know, like put, get, it, or the custom properties you yourself had trouble getting to understand? Even though custom properties are easy to understand when you finally get it, the finally "getting it" is difficult for beginners.

The way I *think* I understand Lc at this point is that a 'message' would be an event, like mouseUp, but that isn't going to help you write your very own resizing routine. As much as I think I know now, I still can't write a resizing routine, and have tried to many times. I finally found this thread, and took the cowardly way out, but finding it was by no means easy. I'll go back and look at it again to see if I understand it at this point, but I can honestly say for a beginner it was incomprehensible.

It would be different probably if by default and out of the box someone knew how to find teaching resources for Lc that took you progressively up the ladder from beginner to say, intermediate level, but they usually don't find out about those until they are pretty frustrated already, and I at least got led down plenty of rabbit holes along the way. I guess ultimately, "how high / hard should the bar for entry be set?" is the real question.

I read the scripting conferences as well, btw, but didn't find out about those until I started chasing down the Mc IDE, which was where I met Jacque. We all know how long a journey that was :roll:

Speaking of Mc, and Hypercard, both of those came with information that works like what I am thinking would help most 'beginners'. Hypercard came with a pretty complete introduction to it (from my experiments with old mac vms I found that out), and the Mc help section 'Concepts & Techiniques', 'Tutorials', 'Reference', and 'Index' all work together to interactively to advance your understanding either linearly or randomly as you click on terms.

I think part of the problem is that as you get farther away from being a 'beginner', you tend to think the things you know as a more advanced user seem pretty 'easy', and so should be within the grasp of everyone else. I have fallen into that trap myself when dealing with others, or have had people assume my knowledge was greater than it actually was when in reverse position. "You should know this" or "That is easy" doesn't help someone when they don't know.

Lord this is a lot longer than I intended, so I'll just end with a 'thank you' and 'nice work' to Brian.
Image

bwmilby
Posts: 205
Joined: Wed Jun 07, 2017 5:37 am
Location: New Orleans, LA
Contact:

Re: Geometry/Profile Manager on Mobile

Post by bwmilby » Wed Oct 25, 2017 3:07 am

MaxV wrote:
Mon Oct 23, 2017 12:14 pm
Geometry manager an work on mobile...
This is a slight refinement of the code posted in those two threads. I've removed everything from the common library that isn't required for GM/PM to work. I've also set this stack up to put that code into the backscripts when launched.
bogs wrote:
Mon Oct 23, 2017 4:19 pm
FourthWorld wrote:
Mon Oct 23, 2017 7:40 am
bwmilby wrote:
Mon Oct 23, 2017 5:22 am
One of the main reasons to post in the beginner forum is that I wouldn't expect a beginner to be up to writing the custom resize handler.
This is an interesting way of seeing things. Which LiveCode messages are for beginners?
...
Lord this is a lot longer than I intended, so I'll just end with a 'thank you' and 'nice work' to Brian.
Thanks @bogs. I guess to reply to @FourthWorld I wasn't necessarily meaning that a new user couldn't understand the concept, but rather that it would be better if they could defer the detail knowledge needed since the GM can take care of quite a lot. With an interface, the PM could also be useful in some cases for device rotation (but I will admit that currently it may be easier to just write a handler).
Brian Milby

Script Tracker https://github.com/bwmilby/lc-misc/tree/master/ScriptTracker

Brahmanathaswami
Posts: 51
Joined: Mon Jun 24, 2013 4:10 am
Location: Hawaii
Contact:

Re: Geometry/Profile Manager on Mobile

Post by Brahmanathaswami » Mon Jun 18, 2018 4:02 pm

I am one of those people who

"One of the main reasons to post in the beginner forum is that I wouldn't expect a beginner to be up to writing the custom resize handler."

I need begin with "robust" examples. Without that it like starting at ground zero, when other have do it 100 of times. (A long time complaint about Livecode is lacks of example... the world of HTML5, JS, MySQL queries, if can got 100 examples on the web )

@richard I get your common theme of "you can do it yourself" But, where is the example? like a stack the Brian posted? (manually done resize handlers, the work on all devices and handle landscapes to portrait)

You must a plenty of code there you can share

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6154
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Geometry/Profile Manager on Mobile

Post by FourthWorld » Mon Jun 18, 2018 6:35 pm

I'm not sure I understand the questions. LC is a scripting language. You can't really do much in it without scripting. Why would we not expect to script the most important aspect, the user interface details?

The resizeStack message is sent whenever a stack is resized. On mobile, this includes when the stack is opened and when orientation changes. The arguments passed to it are the width and height of the stack.

So imagine a simple layout in which you have one field that almost fills the screen, and a small "Submit" button at the lower right. A resizeStack handler for that might look like:

Code: Select all

on resizeStack x,y
   set the rect of fld "Main" to 20,12,x-20,y-40
   set the bottomRight of btn "Submit" to  x-20,y-20
end resizeStack
There are other options as well, depending on the depth and complexity of the UI. Like putting related UI controls into groups, and handling those in group scripts from the resizeControl message. That message can be triggered by a card level resizeStack handler which merely places the groups where you want them, and then the groups take care of their own internal controls.

If you reuse those groups you can take it further to move the group script to a behavior, so you get one-stop-shopping for all that in-group layout handling no matter where you use it.

The options for scripting the visible user experience in LC are as rich and varied as for data modeling and other tasks we script for our users. I don't believe there's a one-size-fits-all way to make much of those into one-liners, but those and other tasks in a scripting language can be handled well by just thinking through what you need and expressing it in code.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”