Margins on actual TV

Howdy:


Working with the tvOS Developer Kit and notice that when running an app on a real TV (in my case a Panasonic TC-32LX44) that labels that are say, constrained to the Leading Margin, are partially off-screen (the beginning of the first letter is clipped and offscreen to the left). This particular television doesn't let me adjust the viewing area, but I noticed the same on another Samsung television.


Of course I don't see this problem with Apple's UI, but running my own apps I do.


Anyone else experiencing layout issues when viewing on a TV?


Joe

Did you write your app for a 1920 x 1080 screen? Did you test for clipping on the TV simulator?


On a TV where Apple's apps layout correctly, yours should match. I've been testing on TVs that provide screen size changes and also comparing with Apple's layouts, same as you.

There is no clipping on the TV simulator (of course there is only one simulator option, 1080p) and the size is set for a 1920 x 1080 screen, and from the looks of the Size Inspector for the view, that cannot be changed. Looks like that TV is 720p, but like you said, given Apple's apps cope with that, I wonder what's going on in my project that causes it to clip.

Hmmm..


When you say "apple's apps", does that mean as supplied on the ATV, or sample apps from Apple you've built and installed?


Is the clipping only on the sides?

Yes, I mean the default apps supplied on the AppleTV running tvOS 9. The clipping is on all sides, yes - I put labels in the upper left, upper right, lower left, and lower right, and all of the labels clip on the edges. I'd post a screenshot if I didn't think Apple would be on me for violating an agreement.

I think I know/have seen what you're describing, thanks.


You might want to try checking/NSLog'ing bounds to see if your layout scheme obeys available.

It's the TV overscan. If you go to ATV -> Settings -> Audio and Video down at the bottom there is a menu item Calibrate. Go to Overcan and you'll see "Not seeing the whole picture?"


I cannot get this Panasonic to adjust to where there is a white border around the screen. I've tried every option possible to adjust and no dice. I'm going to try on my other Samsung.

>It's the TV overscan.


Even if Apple's content lays out properly while the OP's doesn't?

The ATV content doesn't lay out correctly if its on the Calibrate screen. If you go to that screen you'll see that it says you should see the full circle border and a white square on the outer edge. The Panasonic won't do that at all. Also, perhaps I was mistaken a bit - when I hover over icons on the left-hand side or top, the "zoom focus" of the icon (movie image) blurs out towards the edge.

Confirmed that the Samsung allows me to turn off Overscan. The full white circle in the center of the screen plus a white border along the outside edge of the screen was in full view. My labels that I had placed using constraints were now fully visible. Now the trick is how to turn the overscanning off for this Panasonic TC-32LX44.

Check out -[UIScreen overscanCompensationInsets] and make sure your content is laid out inside those bounds.

@blakeseely:


UIEdgeInsets(top: 59.0, left: 90.0, bottom: 59.0, right: 90.0)


When updating the Storyboard constraints for the labels to ensure they are within these insets, yes, things work. I'm assuming that future versions will expose the overscanCompenstationInsets in Xcode?


Thanks!

I have the same issue.


Consumers are not going to calibrate their TV - I have no idea how to do it myself and my modern Samsung TV works well with the Apple supplied apps but not my own storyboarded autolayout code so I think developers will have to compensate for it.


I note the following code from a viewDidLoad method in the Apple supplied UIKitCatalog sample application:


        /*
            Adjust the layout margins of the `tableView` to add a horizontal inset
            to the cells. This will allow for overscan on older TVs and space for
            the focus effect.
        */
        tableView.layoutMargins.left = 90
        tableView.layoutMargins.right = 20


I don't know if the tvOS simulator has an overscan simulation but those without an actual device could be in for a nasty surprise if they develop an app with only the simulator to use.


Edit: spelling.


Further Edit : I submitted Bug Report 22777548 requesting simulation of overscan in the tvOS simulator to alert developers to the issue.

Just started testing my app on real TV's and I see this overscan issue but I don't understand how to address it.


I'm using storyboard's with autolayout and constraints...... where do I adjust for overscan?


If I get the values from [UIScreen overscanCompensationInsets] what do I do with them?


Is there someplace in code I can force this adjustment or some other place in the storyboard?

When overscan is enabled on my TV and obvious clipping is occurning, UIScreen().overscanCompensationInsets always returns 0,0,0,0.


Any advice?

Anybody got a handle on this yet? It seems to be clipping on my TV, just about 20px on all sides. I can set an explicit layout margin explicitly, but i worry that it will end up with a big gap on devices that behave like the simulator.


I did check the overscan call, it it is saying the margins are 59 and 93 (vertical/horizontal) which is way too much.


How did you all handle this?

Margins on actual TV
 
 
Q