Forum | Appery.io

Dang, okay. Thank you Katya

Can I publish what I have and change it up when you figure out that problem with the panel?

Hello!
Could you clarify where are you going to publish app?

The Google play store and eventually the Apple market.

Sure, you can publish and later update app version.

Okay, I published this version. Please let me know if you figure out why the panel will not show up with the stopwatch.

Hi Christopher.

Please follow these steps:

1 Delete event handler "panel-PanelOpen". http://prntscr.com/3iect9/direct

2 Add button to your Page. And give it text "Open panel". http://prntscr.com/3ieea8/direct

3 Add JS event handler on "click" event for button from step 2. And populate it with following code: http://prntscr.com/3ieetx/direct

pre
code

Apperyio("Stopwatch").panel("open")

/code
/pre

4 Open StopWatch js asset and fill(replace) it with following code:

pre
code

var clsStopwatch = function() {
// Private vars
var startAt = 0; // Time of last start / resume. (0 if not running)
var lapTime = 0; // Time on the clock when last stopped in milliseconds

 var now = function() { 
     return (new Date()).getTime(); 
 }; 

 // Public methods 
 // Start or resume 
 this.start = function() { 
     startAt = startAt ? startAt : now(); 
 }; 

 // Stop or pause 
 this.stop = function() { 
     // If running, update elapsed time otherwise keep it 
     lapTime = startAt ? lapTime + now() - startAt : lapTime; 
     startAt = 0; // Paused 
 }; 

 // Reset 
 this.reset = function() { 
     lapTime = startAt = 0; 
 }; 

 // Duration 
 this.time = function() { 
     return lapTime + (startAt ? now() - startAt : 0); 
 }; 

};

var x = new clsStopwatch();
var $time;
var clocktimer;

function pad(num, size) {
var s = "0000" + num;
return s.substr(s.length - size);
}

function formatTime(time) {
var h = m = s = ms = 0;
var newTime = '';

 h = Math.floor(time / (60 * 60 * 1000)); 
 time = time % (60 * 60 * 1000); 
 m = Math.floor(time / (60 * 1000)); 
 time = time % (60 * 1000); 
 s = Math.floor(time / 1000); 
 ms = time % 1000; 

 newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3); 
 return newTime; 

}

function show() {
$time = document.getElementById('time');
update();
}

var onLoad = function(){
show();
}

jQuery(window).bind("load", onLoad);

function update() {
$time.innerHTML = formatTime(x.time());
}

function start() {
clocktimer = setInterval("update()", 1);
x.start();
}

function stop() {
x.stop();
clearInterval(clocktimer);
}

function reset() {
stop();
x.reset();
update();
}

/code
/pre

That's all.

Regards

Awesome! That got the panel working. However, when the panel opens no numbers show up for the stopwatch. I can't check it on my phone because I have no signal at work, but it doesn't show up in the "test". All that shows up is some read letters, and 2 sets off buttons. I assume I can delete the appery buttons I put on the panel because the other buttons are in the stopwatch coding?

Hi Christopher.

I've checked out your app. And it seem to be ok.

1 Open panel

2 Click "start" and stopwatch will go..

3 Click "stop" and stopwatch will freeze.

See details here: http://prntscr.com/3ir0bj/direct

Regards.

Oh, well it still didn't work for me when I just tested it. Maybe it is my computer. In any case, why are there words above the time? "Doctype html stopwatch" is right above the time, and looks odd/out-of-place. Is there any way to remove them?

Thanks for the help by the way. Having the pictures along with the instructions was extremely helpful.