Geometry/Profile Manager on Mobile
Posted: 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.
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
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.
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