Creating a Body-for-Life App (part 2)

2011-02-25T00:20:00.000-08:00

In my last post I explained what the Body-For-Life cardio workout was and why I needed an app to help me do the work out. Ok I don't "NEED" it, I just prefer to have something to look at... and this is a good chance to get my feet wet with some of this Phone Gap business.

So first we need to create the webpage. Fire up your favorite text editor and put in your html header and body tags.

Now we know that to do a counter we need to have some sort of timer mechanism. I've been looking to jQuery recently, so I did a search of "jquery timers" and came across the jQuery plugin page for timers.

I downloaded this one http://plugins.jquery.com/files/jquery.timers-1.2.js.txt

In the documentation on this page: http://plugins.jquery.com/project/timers, it says that you can use something called "Limited Timers" in order to do something repeatedly for a set number of repetitions.

var times = 10;
$(document).everyTime(1000, function(i) {
doSomething(i);
}, times);

The above snippet will call doSomething() function 10 times, with a frequency of once a second. That's perfect for the cardio routine because we want to have a total duration of 20 minutes. 20 minutes * 60 seconds per minute gives us 1200 seconds total.

In place of doSomething(), we will use jQuery to update the display to show the minute:second just like a stop watch. We will update a "seconds" variable to count up the seconds as our application is running. Then we will use seconds mod 60 to determine when 60 seconds have passed and increment a minutes variable. Finally we will increase intensity at the same time minutes are incremented with a rule that when minutes get to 9, we reset to 5 in the next minute.

Not too complicated right?

Here is my first version of the code. I included the javascript sources for jQuery and jquery timer, as well as put in a function to pad-with-zeros the counter output so it looks like a real stop watch.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div style="font-size:100px;" align="center">

<div>
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<p>Intensity:</p>
<div style="font-size:200px;" id="intensity">
5
</div>
</div>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript" src="jquery_timers.js"></script>

<script type="text/JavaScript">

function zeroPad(num,count)
{
     var numZeropad = num + '';
     while(numZeropad.length < count) {
         numZeropad = "0" + numZeropad;
     }
     return numZeropad;
}

$(document).ready(function() {
      minute = 0;
      intensity = 5;
      seconds = 0;
    $(document).everyTime(1000, function(i) {
          seconds++;
          if (seconds > 59) {
            seconds = 0;
          }
          $('#seconds').html(zeroPad(seconds,2));
//         $('div#message').html(i);

          if (i % 60 == 0) {

              minute++;
              intensity++;
              if (intensity > 9 && minute < 20) {
                intensity = 5;
              }
            $('#minutes').html(zeroPad(minute,2));
            $('div#intensity').html(intensity);
          }
    }, 1200);
});
</script>
</body>
</html>

So there you have it. Save this to an index.html file and open this in your javascript enabled browser and you should see a counter counting up the minutes and seconds and also the intensity number that you should be at. Not too bad.

But there are couple of limitations to this app. You can't start or stop it interactively. The timer starts as soon as the page is loaded and there is no stopping it or pausing it. Also, this isn't much of an iphone app yet. If you're on a mac computer like I am, you can throw this webpage into your home ~/Sites directory (you need to enable Sharing > WebSharing) so that the page is served up by your computer's web server. Then you can point your iphone's safari browser at your computer's ip address with address of the index.html page and you will see the timer on your iphone. Not very distributable at this point.

So what we really want to do is make this app a little nicer and covert it into a native app on the iphone with Phone Gap which we will get into next time.

Creating a Body-for-Life App

2011-02-24T23:48:00.000-08:00

It dawned on me that after I hit 30 I'm kinda really putting on some belly cushion and it's gaining fast. I had done "Body-for-Life" several years ago but back then I didn't stick to it very well and ended up quitting. The eating 6 meals in a day was very hard to get used to. Plus the the whole working out thing ... it's just difficult to get motivated and stay motivated for the entire 12 week program.

These days I'm a software developer by day and so I spend long hours hunched at my desk. I'm a creature of habit, which means I'm on autopilot with my head full of algorithms. Since I haven't really developed a routine of eating right or doing exercises daily, it's very difficult for me to integrate that into a new daily routine.

What I do get motivated about is trying to develop the next "thing"... an app, a website. Something cool. Number of cool things developed so far: 0. And do I know how to write an iphone app? No. But I'd thought I'd figure it out along the way and I might as well share the experience for anyone else who is interested.

So in this very first blog post I will show how to create an application that helps with the Body-for-Life cardio work out. In Bill Phillips book, he talks about doing cardio every other day for just 20 minutes. It doesn't sound like a lot, but he says it's all you need, and it's actually pretty intense.

The way the cardio routine works is that you start off with a level 5 intensity. Where 1 is laying down and 10 is sprinting for your life. You do level 5 for 2 minutes to get warmed up. Then for minute 3 you go to level 6. Minute 4 you go to intensity level 7. In the 5th minute you up it again to level 8 and so on. You go all the way up to level 9 and then come back to level 5 in the next minute. You repeat this pattern 4 times (20 minutes). The last peak you try to get to a level 10.

But the problem I have is that when I'm running or doing jumping jacks (say, in my living room, cuz I'm too lazy to drive my ass to the gym 10 minutes away even though I paid for the dang membership) I need some kind of timer to look at. I can use my stop watch app inside my iphone but I also forget which intensity level I'm supposed to be at.

So I thought for my first app, I would attempt to write a application that shows you a stop watch counter plus the intensity number. I know, I know, you were expecting something more impressive? Yeah, but I gotta start somewhere. In addition, I'm more of a web developer, not an objective-c programmer. But I have heard about this project called Phone Gap that allows one to port a web page writting in HTML/CSS/Javascript into a native app. So for this first app, that's the route I will attempt.

In my next post, I'll talk about how to create the counter and intensity display using javascript.

i cans code

Creating a Body-for-Life App (part 2)

Creating a Body-for-Life App