iPhone Notch/Fullscreen black bars?

[aaaha]

I folks,

how do I get rid of these black bars?
i DOT imgur DOT com/K7IywNf DOT png

Thanks for you help in advance!

EDIT: Holly molly again what an awful implementation of including links.

[Klaus]

Hi aaaha,

EDIT: Holly molly again what an awful implementation of including links.

no implementation at all!

Due to big spam issues in this forum you need to have at least 7 postings before you are allowed to post links etc.!
Here the clickable link to your screenshot: i.imgur.com/K7IywNf.png


Best

Klaus

[jacque]

Set the backgroundcolor of the stack to white. LC will fill in the blank areas with the background color. If not all cards are white you can set the backgroundcolor of each card instead.

[aaaha]

@Klaus, ok thanks for the info

@jacque, but how can I move the controls (as shown in my example) to the very bottom of the UI?

[jacque]

There are two ways to manage the placement of controls:
1. Script the position of each control on the card. You can do this on preOpenCard for every card, or once at preOpenStack. If you use preOpenStack, you need to repeat through the cards, setting the position of all controls individually.
2. Set the set the fullscreenMode of the stack to "showAll". This will scale the stack to fit. If the screen size ratio is not the same as the stack, there will be either black bars or cropping at the sides. Set the backgroundColor of the stack to avoid the black bars. Make sure your controls are within the "safe" zone for screens that are narrower than your stack.

There are several discussions here and on the web about LC's fulscreenMode, you will probably find more info if you do a serach. I think there are also examples of per-card positioning scripts.

[aaaha]

@jacque thank you for your help.

So i scripted the position of a simple graphic, to arrange it sticked to the top of the viewport with:

Code: Select all

on resizeStack cardWidth, cardHeight
   set the width of graphic "box" to cardWidth
   set the topleft of graphic "box" to 0,10
end resizeStack

on the card script.

Then I tried all combinations of

Code: Select all

on preOpenStack
   
   set the fullscreenmode of me to ""
   
end preOpenStack

with exactFit, letterbox, noBorder and noScale while using the iOS Simulators iPhone 11

Still no luck. The black borders are still there and I can't position anything in that area.

[jacque]

Try fullscreenmode "showAll". You may still see black borders, which is why you need to set the backgroundColor of the stack to the same color as the card. If the card is white, set the stack's backgroundColor to white too.

FullscreenMode and scripted positioning do not work well together, just choose one method or the other.

[aaaha]

Thanks @jacque, but this does not solve my problem. I want to position navigation buttons at the top and bottom border of the screen and not fill it with blank color.
I mocked it here to show what I was thinking of: https://i.imgur.com/dEkuD9Y.png
For creating that screenshot I positioned the tools with the geometry manager and without any preOpenStack script. The option "showAll" moved the tools even further away from the top and bottom border: https://i.imgur.com/aNAA4qt.png

[bwmilby]

To get what you want, you are going to need to create resize handlers and position/size the objects based on the actual size of the screen. I have a demo that may be of interest:

https://github.com/bwmilby/mobileDemo

This stack has not been updated for the new tall screens, but does demonstrate how to position elements using the resize handler (it also lets you see how the various modes would impact the display).

For iOS, you will need to figure out if the device has a notch on your own and then move the objects to account for it. The reason is that on iOS you can draw under the status bar area which is not permitted on Android. There is some code that I've developed that attempts to do that. It is available as a part of the SivaSiva app.

https://github.com/Himalayan-Academy/Si ... codescript

The handlers that you will want to check out are _setPhoneModel and safeMargins.

[richmond62]

i.imgur.com/K7IywNf.png

Seems to be a dud link.

notch.jpg (4.77 KiB) Viewed 8735 times

[aaaha]

i.imgur.com/K7IywNf.png

Seems to be a dud link.

notch.jpg

The links label differs from its actual link. Here's the correct version https://i.imgur.com/K7IywNf.png

To get what you want, you are going to need to create resize handlers and position/size the objects based on the actual size of the screen.

Thats what I thought first and imagined, that I just need to consider differing between devices with and without notch and then move my elements accordingly.

But how do I get the correct screen size? I have been playing around with screenRect, effective working screenRect and hight of this stack. First and Second (item 3 and 4) only output the resolution of my dev environment (my MacBooks screen resolution). Third shows the same hight (503) for an iPhone 8 as well as an iPhone XR (who's actual viewport hights are 667px and 896px).

I scanned through your first linked example, thanks for that. I am sure it will be helpful for me in the near future But I must admit I was a bit overwhelmed. I tried to find some source referring to the "gross" screen size in use but wasn't able to find something helpful.

[bwmilby]

If not using the latest version of LC (9.6), then you have to have splash images for all screen sizes which will use the app.

[jacque]

The screenrect should give you the right dimensions, but it will only report the mobile device dimensions when actually running on mobile. Did you try it on a phone or a simulator?

[aaaha]

SOLVED (in the simulator)!

If not using the latest version of LC (9.6), then you have to have splash images for all screen sizes which will use the app.

I used a splash screen for the iPhone X, which has the same resolution as the iPhone 11 Pro max and voila, it worked! Thank you!
I am using LC version 9.6.0 dp4 Build 15513 Indy Edition btw.

The screenrect should give you the right dimensions, but it will only report the mobile device dimensions when actually running on mobile. Did you try it on a phone or a simulator?

Yes, I am only working in the simulator at the moment. I haven't found the time yet to purchase the developer fee at Apple to be able to do so. But I guess not using a real native device does differ at some/this point. Thanks for pointing that out.


Thank you ALL for you patience and time!!

[bwmilby]

You can test on a device without a paid account. I just set up a project in Xcode and allow it to manage the certificate. You need the device connected and selected as the build destination and allow Xcode to manage the cert. It only works for a week at a time, but opening The project in Xcode will have it update the cert.