Android Stopwatch - Titanium Studio [JavaScript]

You must Login before you can answer or comment on any questions.

This STOPWATCH APP is a mobile app, specifically targeted for Android users. I am using Titanium Studio SDK code to create this Stopwatch. It is partially working. The main problems I have is that the "Start" button performs multiple functions (starting, stopping and restarting the time). I don't know how to fix it. I just want it to start the time. I also don't know how to make the "Lap" button work. I need to make the app lap times in the blank section below the buttons...why doesn't my event listener fire for both the "Lap" and "Start" buttons? I have the code of what I have done so far. I just need the "Start" and "Lap" buttons to be working properly. Any help will be appreciated. I am using Titanium SDK version 2.1.2.GA. Thanks

Titanium.UI.setBackgroundColor('#302226');
var win = Titanium.UI.createWindow({
    title:"",
    backgroundColor:"#302226",
    exitOnClose: true 
});
 
var view01 = Titanium.UI.createView({
    backgroundColor:"#575757"
});
 
//Center this code properly. 
var timerlabel = Titanium.UI.createLabel({
    text: "00:00:00.0",
    top: 0,
    textAlign:"center", 
    font: {
        fontSize: 45,
        fontWeight: 'normal'
    }, 
    width: 350,
 
});
 
var hourlabel = Titanium.UI.createLabel({
    text: 'Hours',
    top: 55,
    left: 60,
});
 
var minlabel = Titanium.UI.createLabel({
    text: 'Mins',
    top: 55,
    left: 125,
});
 
var seclabel = Titanium.UI.createLabel({
    text: 'Secs',
    top: 55,
    right: 105,
});
 
var button01 = Titanium.UI.createButton({
   title: 'START',
   top: 90,
   left: 10,
   width: 100,
   height: 50 
});
 
var button02 = Titanium.UI.createButton({
    title:'RESET',
    top: 90,
    right: 10,
    width: 100,
    height: 50
});
 
var button03 = Titanium.UI.createButton({
    title:'STOP',
    top: 150,
    left: 10,
    width: 100,
    height: 50
});
 
var button04 = Titanium.UI.createButton({
    title:'LAP',
    top: 150,
    right: 10,
    width: 100,
    height: 50
});
var _startStopwatch = function() {
    timerlabel.value = '00:00:00.0';
 
var startTime = new Date();
 
var _updateTimer = function updateTimer() {
    var UNIT_HOUR = 60 * 60 * 1000;
    var UNIT_MINUTE = 60 * 1000;
    var UNIT_SEC = 1000;
    var now = new Date();
    var diff = now.getTime() - startTime.getTime();
    var hour = Math.floor(diff / UNIT_HOUR);
    var minute = Math.floor((diff - hour * UNIT_HOUR) / UNIT_MINUTE);
    var sec = Math.floor((diff - hour * UNIT_HOUR - minute * UNIT_MINUTE) / UNIT_SEC);
    var msec = Math.floor(diff % UNIT_SEC);
    timerlabel.text = ('0' + hour).slice(-2) + ':' + ('0' + minute).slice(-2) + ':' + ('0' + sec).slice(-2) + '.' + ('00' + msec).slice(-1);
    };
 
    intervalid = setInterval(_updateTimer, 3);
    button03.title = 'STOP';
    };
 
    var _stopStopwatch = function() {
        clearInterval(intervalid);
    };
 
    var started = false;
    var intervalid = null;
 
button01.addEventListener("click", function(e){
    if (started) {
        _stopStopwatch();
        started = false;
      } else {
        _startStopwatch();
        started = true;
      } 
});
 
button02.addEventListener("click", function(e){
    if (started) {
        _stopStopwatch();
        started = true;
        timerlabel.value = '00:00:00.0';
       _startStopwatch();
        started = true;
      } else {
      }
});
 
button03.addEventListener("click", function(e){
    if (started){    
    _stopStopwatch();
    } else {
        _stopStopwatch();
        started = true;
    }
});
 
win.add(view01);
win.add(button01);
win.add(button02);
win.add(button03);
win.add(button04);
win.add(timerlabel);
win.add(hourlabel);
win.add(minlabel);
win.add(seclabel);
//win.add(table);
 
win.open();

1 Answer

The event listener for the "start" button worked fine when I tested it. But to make it only start the timer, do this:

button01.addEventListener("click", function(e){
    if (!started) {
        _startStopwatch();
        started = true;
      } 
});
You don't have an event listener for the lap button (button04), so it's no surprise that the lap button does nothing.

The reset and stop button event listeners are a mess. I think they should be more like this:

button02.addEventListener("click", function(e){
    if (started) {
        _stopStopwatch();
        started = false;
    }
    timerlabel.text = '00:00:00.0';
});
 
button03.addEventListener("click", function(e){
    if (started) {    
        _stopStopwatch();
        started = false;
    }
});
I don't mean to dishearten you, but this was not a complicated programming challenge. You will face many more difficult obstacles in building a cross-platform mobile app with Titanium.

If you're not already using the debugger to step through your code and inspect your variables, I recommend that you learn how to use the debugger. Set some breakpoints in your event listeners, and step through them to understand why they're not working correctly.

— answered 7 months ago by Jason Priebe
answer permalink
1 Comment
  • Thanks Jason. I don't blame you, but programming (even simple code) isn't my strongest point. Thanks for helping me out.

    — commented 7 months ago by Bhavik Raniga

Your Answer

Think you can help? Login to answer this question!