Kategorie: Best Practice & Leadership

Gute Dinge! Dokumentation gelungener Methoden, Vorgehensweisen oder anderer kultureller Errungenschaften, die Trends setzen und Meinungsführer sind.

Developing for tvOS using the Remote Layout Helper

I am developing an app for tvOS. One thing you quickly run into when testing on real world devices is the limits of screensize on several TV models. For this apple added a calibration tool in the settings.

I found I needed this info to actually make my UI layout work for customers. So I took a screenshot and created this screenimage as (PNG) to overlay it at any time in the dev-process for orientation of myself as a Remote Layout Helper).

tvOS Layout Template
Download the Overlay Image (use Save as…)

On my main controller I added & called following method which I call in - (void) viewDidAppear:(BOOL)animated:

- (void) activateCalibrationOverlay {
    if( DEBUG_CALIBRATION_OVERLAY ) {
        if( !overlayImageView ) {
            self.overlayImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tvOS_screen_size.png"]];
            overlayImageView.alpha = 0.0;
            overlayImageView.userInteractionEnabled = NO;
            [[self appDelegate].window addSubview:overlayImageView];
            [[self appDelegate].window bringSubviewToFront:overlayImageView];
            if( !overlayPlayPauseGesture ) {
                self.overlayPlayPauseGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleRemoteTapPlayPause:)];
                overlayPlayPauseGesture.allowedPressTypes = @[[NSNumber numberWithInteger:UIPressTypePlayPause]];
                [self.view addGestureRecognizer:overlayPlayPauseGesture];
            }
        }
    }
}

This adds an overlay of the Remote Layout Helper screen image on TOP of everything else and a gesture recognizer monitoring the PLAY/PAUSE-button of the TV remote. It calls following method:

-(void)handleRemoteTapPlayPause:(UIGestureRecognizer*)tapRecognizer {
    if( overlayImageView.alpha == 0.0f ) {
        [UIView animateWithDuration:0.3 animations:^{
            overlayImageView.alpha = 0.3;
        }];
        return;
    }
    if( overlayImageView.alpha == 0.3f ) {
        [UIView animateWithDuration:0.3 animations:^{
            overlayImageView.alpha = 0.5;
        }];
        return;
    }
    if( overlayImageView.alpha == 0.5f ) {
        [UIView animateWithDuration:0.3 animations:^{
            overlayImageView.alpha = 0.8;
        }];
        return;
    }
    if( overlayImageView.alpha == 0.8f ) {
        [UIView animateWithDuration:0.3 animations:^{
            overlayImageView.alpha = 1.0;
        }];
        return;
    }
    if( overlayImageView.alpha == 1.0f ) {
        [UIView animateWithDuration:0.3 animations:^{
            overlayImageView.alpha = 0.0;
        }];
        return;
    }
}

This helped me a lot doing the right things during development. I hope it helps you too. Feel free to share!

How to use it

You simply press PLAY/PAUSE again and again and the overlay will fade in at different alpha-blending-levels between 0.0 and 1.0. This allows to easily check boundaries of UI elements displayed against the screenlimits.

See following screen example:

The overlay in action on an app displayed.
The overlay in action on an app displayed.

Recognize, that you need a retained variable for the UIImageView called overlayImageView and another for the tap gesture recognizer called overlayPlayPauseGesture to be overlaid. And recognize that I use a boolean Precompiler-Flag named DEBUG_CALIBRATION_OVERLAY to switch this feature OFF in deployment.

Why do I blog this? I found it cumbersome to check against real world TV screens if my app works. So I just made sure that most of my UI is usable from within the MINIMUM SCREENSIZE frame the overlay gfx displays to me. Checking this anytime using the remote is a huge plus also on the real device. (Do not forget to disable the code on deployment!)

Challenge Power! (Konferenz am 10./11. März 2016, Berlin)

Ich hab ein wenig LIVE Stream Session 7: The future of OS (bei der taz) geguckt von dem Logan CIJ Symposium – btw CIJ steht für Centre for Investigative Journalism:

The Logan CIJ Symposium brings together a unique and powerful coalition of individuals with a single goal – the defence of freedom and democracy. Join us at our second gathering to be held in Berlin on March 11-12, 2016 at bcc (Berlin Congress Center).


Source: „Hacker-Kongress in Berlin: Challenge Power!“, taz

Ein paar Links zum selber lesen

From Session 8

Speaker Liste

Konferenzprogramm

Videoaufzeichnungen

Finden sich zum Teil bereits hier.

To be continued…

Why do I blog this? Angesichts dessen, dass das OS meines Rechners und meiner Geräte mehr oder weniger unter direktem Beschuss durch Regierungen steht (Snowden Erkenntnisse, Bundestrojaner, Apple vs. FBI, etc.) ist Selbstschutz und Bildung und Aufklärung erste Bürgerpflicht. Oder wie das Symposium betont: Our human rights are at risk. und If you care about the future of individual freedom and democracy – join them.