Category: Programming

The simple things

Screen Shot 2015-11-19 at 11.11.02 PMIt is always the simple things, the ones we overlook, we find things in the last place we look, but some times is just Apple madness.

I am writing an application that makes great use of AVFundation in iOS, my application needs to be able to play music in the background. I like to prototype quick and the iterate, so I got the basic skeleton working and a full audio queu class in c I can reuse.

I designed a little player class that extends AVAudioPlayer whitch I know I will have to update to use AVAssest, but I didn’t want to dive into that just yet. I wanted the thing to run and in a matter of hours, it did. I was able to load a bunch of audio files and play them tapping a table view, nothing fancy.

All was great, I refined and refined and I now have a very cool solid prototype I can show, now it was time to make it play in the background, when in lock screen or when some other non audio app is running. I started looking at Apple’s docs, usually the programming guide is a good birds eye view of the library. In AVFundation programmin guide I found that there are many audio technologies to use, the trick is to find out what is what.

After hours of digging I decided that I should use AVAudioPlayer, so I followed these steps.

1) info.plist has the UIBackgorundModes being an array with one item “audio”.

2) Explicitly set the session category to be AVAudioSessionCatergoryPlayback

3) Explicitly set the session mode to be AVAudioSessionModeDefault

After this I implemented “remote control” so you can control the app from the lock screen or command center and provided the necessary “now playing” info.

Awesome, it was time to test!

All was working without a hickup but the only problem was that the audio stopped then the application moved to the background or when locked.

Mmmmmm

So the search started, checking for object lifetime. Do we have the proper plist entries? What does apple say about it? Is the volume up? was it playing? Ok pull out the debugger, follow the acumulator, is it all there? Stack overflow, what am I missing? http://bit.ly/1X22oWT, have you tried this? Have you tried that? Yes but no luck. Suddenly I clicked the project icon on Xcode and saw “Capabilities”…

There was a pause, a brief pause, mini and I clicked the tab, scrolled down and:

Screen Shot 2015-11-19 at 11.03.38 PMyes, I know.

 


Wisdom Quotes Update v2.0

WisdomQuotesiPhoneFinally, Wisdom Quotes was updated at the AppStore. This is a major version release where lots of things have changed. Menu is now on a tool bar always present, the App is responsive to all screen sizes and you can now share the quotes via SMS, email, any messenger and social media app.

You can get the App for free at the AppStore.

Although the code is very simple I am in the process of cleaning up the code to upload it to GitHub. Maybe it can be useful to somebody and I am sure it will be a great learning experience.


Image rotator with jQuery

I got a request to rig a very simple website, not much bells and whistles. We needed a nice and simple menu system that was easily done with css, a contact form with PHPMailer and and image rotator for the landing page.

I decided that jQuery was probably the way to implement this, so make sure you include jQuery in your project. jQuery is great for its simple and powerful syntax, so in matter 10 minutes the image rotator was created. Here is how I did it.

First I layed out the html to have some elements to work with:

<div id="imageRotator">
    <div class="current">
        <img src="images/home01.jpg" width="941" height="510">
    </div>
    <div>
        <img src="images/home02.jpg" width="941" height="510">
    </div>
</div>

The code created two <div> tags inside another <div>, the inner divs is where the <img> are going to be contained. Note that one of them has the class “current” assigned to it, that is the image that will be visible and top most after we write the css for it.

Then the css:

<style type="text/css">
    #imageRotator {
        position: relative;
        width: 960px;
        height: 510px;
    }

    #imageRotator div {
        position: absolute;
        z-index: 0;
    }

     #imageRotator div.previous {
         z-index: 1;
    }

    #imageRotator div.current {
         z-index: 2;
    }
</style>

The css is pretty self explanatory here. First the divs containing the <img> tags are set to a position of “absolute” to make them stack on top of each other. #imageRotator and its child divs can be styled in any way you see fit. The trick is done by defining #imageRotator div.previous and imageRotator div.next. One is applied to any div inside #imageRotator with class “previous” in it and the other one is assigned to any div inside #imageRotator with class “current“. The previous has a z-index of 1 and the current has a z-index of 2 hence positioning “current” on top of “previous” for visibility. The rest is up to jQuery.

Then the javascript:

<script type="text/javascript">
    $("document").ready(function(){
        setInterval("rotate()", 5000);
    });

    function rotate() {

        var curSlide = $("#imageRotator div.current");
        var nextSlide = curSlide.next();
        var fadeTime = 1000;

        if (nextSlide.length == 0) {
            nextSlide = $("#imageRotator div:first");
        };

        curSlide.removeClass('current').addClass('previous');
        nextSlide.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, fadeTime,

        function() {
            curSlide.removeClass('previous');
        }
    )}
</script>

The javascript defines three variables, curSlide which holds the visible div, nextSlide that holds the upcoming div and fadeTime that is the fade time between slides (not the pause).

With the “if” statement we check to see if we reached the end of the divs, that is we are at the last div inside the “imageRotator” div. If it is the last and there is no next then we set nextSlide to point back to the first div. Then simply remove “current” from curSlide and add “current” to nextSlide with a bit of animated opacity. See jQuery documentation for this.

Then all we have to do is call the rotate() function when the documet loads at regular intervals using the javascript function setInterval() which takes a the name of the callback function, in this case “rotate()” and the interval in milliseconds, in this case 5000.

    $("document").ready(function(){
        setInterval("rotate()", 5000); // This is the speed for the image rotator in milliseconds
    });