More and more developers are starting to think about building applications that have both on-line and off-line features using HTML5.

I’ve been giving this some thought and have decided to build one myself.

I thought for a while about what sort of application would make for a good showcase.

It’s one of the though things about building examples – no one tells you what your next application is supposed to do.

In any event, what I decided on is in interval training application for boxers. A “round timer”.

Since this is intended to be a learning application and there are some great designer types and jQuery developers that read my blog, I thought it would be cool to design and develop this application by committee.

Here are some of the features that I’m hoping will help make it a good showcase.

• Lots of running logic implemented in JavaScript CSS and jQuery
• Play audio videos for interval sounds.
• Use Local Storage to save user specific profiles.

Once the basics are done I could expand the application with things like:

• Server based back ups and workout suggestions.
• Embedding Video Demonstrations for workouts.
• Web Sockets for Peer to Peer – team workouts.

I want the user interface to be highly configurable. Here is a quick layout.

I’ll include the markup for the UI prototype for anyone that wants it but remember.

It’s JUST a UI prototype. It needs to be refactored for CSS, etc,

PLEASE post your suggestions about what form the application should take – both from a feature set perspective as well as from a technical one.

Click [ Read More ] to see markup …..

Read the rest of this entry »

In [ this post ] I introduced an HTML application that I intended to build.

I’ve been picking away at the logic (though haven’t gotten to the HTMP “5″ stuff yet) and thought I’d share the milestone.

Note that the gray area in the screen shot below is not implemented yet.

Here are some of the features that ARE implemented.

• Work and Rest mode count downs.
• Start / Pause
• Reset Time & Round Count
• Title Bar Status Indicator
• Local Time Indicator
• Total elapsed time clock (not effected by paused time)
• Accumulated Work Time
• Accumulated Rest Time

A couple points of interest for newer JavaScript developers.

First, note the use of ENUM (ish) conscructs.

I can define an enum as follows:

---

var Mode = { "STOP": 0, "WORK": 1, "REST": 3, "HIGH": 4, "LOW": 5, "LOW": 6 };

---

And then use it this way:

---

var CurrentMode = Mode.REST;
....
 if (CurrentMode == Mode.REST) {
    ......
	}

---

Also, I can create a simple object like this. Note the object instance allocations after the definition :

---

function clock(h, m, s, ms) {
	this.hours = h;
	this.minutes = m;
	this.seconds = s;
	this.miliseconds = ms;
}

var workClock = new clock(0, 0, 0, 0);
var elapsedClock = new clock(0, 0, 0, 0);
var totalWorkClock = new clock(0, 0, 0, 0);
var totalRestClock = new clock(0, 0, 0, 0);

---

Then I can access Object Instance Properties like this:

---

workClock.minutes = RoundLengthMinutes;

---

The entire source listing is below.

You can run the page in it’s current form at http://www.misfitgeek.com/fighttimer/

Please report bugs and make feature suggestions using by submitting comments.

To view the source code click below.

Read the rest of this entry »

In the last post in this series [ read here ] I added the clock timing logic to the HTML workout timer.

The next feature to add is round and interval audio. I want to ring a bell at the beginning and the end of each round, a warning before a change in work state, etc.

This is quite a bit more difficult than it sounds because we need to support both the differences between HTML5 implementation specifics in each of the modern browsers as well as  support still popular older browsers that only support pre “5″ versions of HTML.

I wanted code that would play an Audio file in the current versions of Internet Explorer, Firefox, Chrome, Opera and Safari on Windows, Firefox, Chrome, and Safari on the Mac and on old HTML 4 browsers. As it turns out some current browsers will play .wav but not .mp3 files. Some with play .mp3 but not .wav and some will play both.

So, I built a small test application that would play in all !

The UI was simple enough:

Lets look at the code and I’ll call out the notable points of interest.

---

<!DOCTYPE html>
<html>
<head>
<title>Play Audio</title>
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    var currentFile = "";
    function playAudio() {

        var oAudio = document.getElementById('myaudio');
        // See if we already loaded this audio file.
        if ($("#audiofile").val() !== currentFile) {
            oAudio.src = $("#audiofile").val();
            currentFile = $("#audiofile").val();
        }
            var test = $("#myaudio");
            test.src = $("#audiofile").val();
        oAudio.play();
    }

    $(function() {
        if (Modernizr.audio) {
            if (Modernizr.audio.wav) {
                $("#audiofile").val("sounds/sample.wav");
            }
            if (Modernizr.audio.mp3) {
                $("#audiofile").val("sounds/sample.mp3");
            }
        }
        else {
          $("#HTML5Audio").hide();
          $("#OldSound").html('<embed src="sounds/sample.wav"
                                      autostart=false width=1 height=1
                                      id="LegacySound"
                                      enablejavascript="true" >');
        }

    });
</script>
</head>

<body>
  <div style="text-align: center;">
    <h1>Click to Play Sound<br /></h1>
    <div id="HTML5Audio">
    <input id="audiofile" type="text" value="" style="display: none;"/>
    <br />

    <button id="play" onclick="playAudio();">
        Play
    </button>
    </div>
    <audio id="myaudio">
        <script>
        function LegacyPlaySound(soundobj) {
          var thissound=document.getElementById(soundobj);
          thissound.Play();
        }
        </script>
        <span id="OldSound"></span>
        <input type="button" value="Play Sound"
               onClick="LegacyPlaySound('LegacySound')">
    </audio>

</div>

</body>
</html>

---

First, you will notice that I’ve included jQuery as I now do in all my web based UI and I’ve included Modernizr, which I’ll use to determine where the HTML5 audio tag is supported and if it is, what audio file format that I need to use for the browser that I happen to be running in.

I’ve created a “sounds” directory and sound files named “sample.wmv” and “sample.mp3″.

Note the declaration of an audio element on line 54. If the browser supports the HTML5 Audio element the code between lines 54 and 64 will be ignored. If the browser does not support HTML5 audio then that markup will be rendered (including the JavaScript). The actual LegacySound object that gets played on line 63 is only needed if the browser is not HTML5 and it will be created by some JavaScript when the page is loaded only if it is needed,

Lines 6 to 20 are a JavaScript function to play the HTML5 audio element. Note that I’ve used a technique to improve performance slightly if name of the audio file to be played has not changed since the last time the function was called.

Beginning on line 22 code will be executed when the document is ready (loaded).

Line 23 tests to see if the HTML Audio tag is supported.

Then we check to see which media file type is supported.

If the HTML5 Audio tag is not supported then line 32 hides the user interface elements that would be used with the HTML Audio and line 33 creates the embedded media object to be played by older browsers.

I’ve tested this code in all the browsers listed above as well as Netscape 7 for HTML 4 compatibility.

You can click [ HERE ] to download a working sample.