how to properly use the fullscreenmode and screen scaling

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

how to properly use the fullscreenmode and screen scaling

Geoff Canyon via use-livecode
Hello,

 

I am new to LC and have learned much so far but I am having an issue with
the proper scaling of my app on different size screens.  I have created the
app with the dimensions of 913 w X 636 h.  All looks great on the desktop.

 

When I deploy it to my 8 inch Samsung Tab A (Android)  it is ok in the
Landscape mode, with one exception.  When I go to enter data, the keyboard
covers up some of the screen that I need to enter data.  It does not scroll
up to let me get

to the field of entry.  When it is in Portrait mode I can usually see the
field but the stack only takes up about half the screen so it is very small.
When I deploy it on the Samsung S8, it is even worse in that the entire
screen is not used and therefore

it is way too small to really use it.  I would hope there is a way to take
advantage of all the screen space so as the used has a larger screen to view
and enter data.    It seems the keyboard is the same size and not scaled at
all.

 

Here are the script statements that I put in my "preopenstack" of my first
card:

 

set the fullscreenMode of this stack to "showAll"

put "portrait,portrait upside down,landscape left,landscape right" into
theallowed

-- Function Call

mobileSetAllowedOrientations theallowed

 

I have also used the "exactfit", "noborder" and "soScale" options but they

any help with suggestions or example code of how it should work would be
greatly appreciated.

Thanks.

Mike

 

 

 

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: how to properly use the fullscreenmode and screen scaling

Geoff Canyon via use-livecode
Typically you need to handle field placement yourself in script, moving
the controls up on keyboardActivated and back down on
keyboardDeactivated. However, there's an unintentional side-effect when
setting acceleratedRendering to true in a stack; when the keyboard shows
up, the whole card scrolls up by the height of the keyboard. I haven't
found this useful very often, since it frequently scrolls the field I
want to target right off the top of the screen. But if your layout
accomodates that behavior it may be useful.

The "showAll" fullscreenMode ensures that the full height of the stack
contents are visible on screen. This means on narrower screens,
left/right edges may be cropped and on wider screens there may be an
extra margin.

The "noBorder" mode ensures that the full width of the content is
visible, which means in portrait mode you'll get a tiny little stack
that fits horizontally within the width of the device, and large empty
areas at top and bottom.

To allow both orientations, you can use the orientationChanged message
to set the fullscreenMode to either showAll or noBorder, depending on
which way the device is turning. Or you can write scripts that resize
and place all card controls depending on the layout you want.

On 10/27/18 4:40 PM, Mike for GDC via use-livecode wrote

> When I deploy it to my 8 inch Samsung Tab A (Android)  it is ok in the
> Landscape mode, with one exception.  When I go to enter data, the keyboard
> covers up some of the screen that I need to enter data.  It does not scroll
> up to let me get
>
> to the field of entry.  When it is in Portrait mode I can usually see the
> field but the stack only takes up about half the screen so it is very small.
> When I deploy it on the Samsung S8, it is even worse in that the entire
> screen is not used and therefore
>
> it is way too small to really use it.  I would hope there is a way to take
> advantage of all the screen space so as the used has a larger screen to view
> and enter data.    It seems the keyboard is the same size and not scaled at
> all.
>
>  
>
> Here are the script statements that I put in my "preopenstack" of my first
> card:
>
>  
>
> set the fullscreenMode of this stack to "showAll"
>
> put "portrait,portrait upside down,landscape left,landscape right" into
> theallowed
>
> -- Function Call
>
> mobileSetAllowedOrientations theallowed
>
>  
>
> I have also used the "exactfit", "noborder" and "soScale" options but they
>
> any help with suggestions or example code of how it should work would be
> greatly appreciated.
>
> Thanks.
>
> Mike
>
>  
>
>  
>
>  
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>


--
Jacqueline Landman Gay         |     [hidden email]
HyperActive Software           |     http://www.hyperactivesw.com

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: how to properly use the fullscreenmode and screen scaling

Geoff Canyon via use-livecode
In reply to this post by Geoff Canyon via use-livecode
On 10/27/18 11:40 AM, Mike for GDC via use-livecode wrote:
> I am new to LC and have learned much so far but I am having an issue with
> the proper scaling of my app on different size screens.  I have created the
> app with the dimensions of 913 w X 636 h.  All looks great on the desktop.

I've spent 2 years on "this subject" and, like Jacque says

The "showAll" fullscreenMode ensures that the full height of the stack
contents are visible on screen. This means on narrower screens,
left/right edges may be cropped and on wider screens there may be an
extra margin."

So we that for complex layout, but for simple layout, but if you want to do you own geometry, I finally got working across  numerous Android devices, just yesterday!

Disclaimer: there more this that meets the eye. But we have a hack and works.

You see, Android doesn't know the screenRect until *after* it rendered a card. No amount of preopenstack or openstack will work.

What works is (Andre, God bless him, figured this out:) wait until one card is rendered for doing any geometry

Note, the "wait with messages" are important in Android, can't tell you why, but eliminate then and you get crashes

-- Stack
   card 1 - "loader"
   card 2 - your main app or module

-- Card 1 "loader" script
   openCard
        wait 80 milliseconds with messages
        go next card
   end openCard

-- card 2 "main module (app)"

on opencard
    # you must give the device to "register" the coords!
    send "updateUI" to this card in 100 milliseconds
end opencard

on resizeStack
   updateUI
end resizeStack

command updateUI
    put the long id of widget "body" of card "SivaSivaBrowser" into tBrowser
   put the rect of card "SivaSivaBrowser" into sCardRect #store in local
Variable for later
   put item 3 of sCardRect into tWidth
   put item 4 of sCardRect into tHeight
   put the loc of card "SivaSivaBrowser" into tCardLoc
   set the loc of widget "spinner"  of card "SivaSivaBrowser" to  tCardLoc
   set the loc of fld "Cancel"  of card "SivaSivaBrowser" to (item 1 of
tCardLoc, item 2 of tCardLoc+200)
   put (0,0,tWidth,(tHeight - 50)) into tBrowserRect
   set the rect of tBrowser  to tBrowserRect
   set loc group "footer" of card "SivaSivaBrowser" to (
round(tWidth/2),tHeight - 25)

 

# there four widgets on the footer

    put tWidth/4 into tUnit

  set the loc of widget "go-home-portal" of card "SivaSivaBrowser" to
(tUnit/2,tHeight-25)
   set the loc of widget "add-favorites" of card "SivaSivaBrowser" to
(tUnit*1.5,tHeight-25)
   set the loc of widget "share"  of card "SivaSivaBrowser" to
(tUnit*2.5,tHeight-25)
   set the loc of widget "settings-gear" of card "SivaSivaBrowser" to
(tUnit*3.5,tHeight-25)
end updateUI

# works on portrait and landscape: on Oreo, Nougat, 2 Pixels, all
different screen sizes.

Of course are only <10 controls to deal with.

   


       



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: how to properly use the fullscreenmode and screen scaling

Geoff Canyon via use-livecode
No comment about the main code you showed, but what you said about showAll isn’t quite right. All of the card will always be visible. On devices wider than the horizontal ratio of the card, extra content will be revealed from off of the left and right of the card, the height of the card will fill the height of the device screen. On devices that are a narrower ratio than the horizontal ratio of the card, extra content is revealed from off of the top and bottom of the card, the width of the card will fill the width of the device screen. No combination should ever crop into the card area.

The easiest way to use showAll is to have all of the important things within the card window, then have enough extra stuff off all edges. Until recently I would make the card window be 16:9, and have enough content above and below the card to cope with iPad. That approach worked well for all devices from iPhone 5 to iPad (16:9 to 4:3, using landscape as an example). With the super wide recent Samsung phones (and Pixel 3 too), and the even wider iPhone X, the ratio gets as high as 19.5:9.

Now my approach is to have a 16:9 card, extra content up to 4:3 as before, but now extra content off the left and right to reach a ratio of 20:9. My typical 16:9 size is 1024x576, and 20:9 gives a familiar looking 1280x576.

So, card window of 1024x576 and all important objects within that space, extra background above and below the card, to give 1024x768, and extra content off the left and right to give 1280x576. You could of course have backgrounds that are 1280x768, that would do no harm. The parts in the corners will never be seen.

On top of all that you may well want to place some things using code, but remember that the later Android phones, and the iPhone X, have a notch, so don’t place things at the far left center of a landscape app.
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: how to properly use the fullscreenmode and screen scaling

Geoff Canyon via use-livecode
On 29/10/2018 14:18, Colin Holgate via use-livecode wrote:
> On top of all that you may well want to place some things using code, but remember that the later Android phones, and the iPhone X, have a notch, so don’t place things at the far left center of a landscape app.
>
Should that be "far left center" or "far-left or right center" ?
Are people consistent enough about rotating 90'  anti-clockwise, or do
they (like me) sometimes rotate the other way ?
[ I've never used a phone with a notch, so don't know if that leads to
greater consistency ]

Thanks
Alex.

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: how to properly use the fullscreenmode and screen scaling

Geoff Canyon via use-livecode
That’s fair enough. Rotating a phone so the bottom of the portrait phone is now to the right, is a right-handed way of thinking I guess! So yes, avoid the right middle too, for the benefit of left-handed people.

> On Oct 29, 2018, at 10:31 AM, Alex Tweedly via use-livecode <[hidden email]> wrote:
>
> On 29/10/2018 14:18, Colin Holgate via use-livecode wrote:
>> On top of all that you may well want to place some things using code, but remember that the later Android phones, and the iPhone X, have a notch, so don’t place things at the far left center of a landscape app.
>>
> Should that be "far left center" or "far-left or right center" ?
> Are people consistent enough about rotating 90'  anti-clockwise, or do they (like me) sometimes rotate the other way ?
> [ I've never used a phone with a notch, so don't know if that leads to greater consistency ]
>
> Thanks
> Alex.


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode