Page 1 of 1

Display picture when timer completes!

Posted: Sun Aug 10, 2014 10:27 pm
by Bruce

I'm having difficulties with the following bit of code. I can get the "picture" and timer function working fine separately, but am having trouble combining the codes into one function. See below:

var seconds = 15;
var minutes = 0;
var secondPassed = function(){
Appery("timer_div").text(minutes + " : " + seconds);
{seconds--;
if (seconds === 0){
if (minutes === 0){
var picture = function () {
clearInterval(countdownTimer);
Appery("timer_div").text("timer done!");
getRandomInt(min, max);
return Math.floor(Math.random() * (max - min)) + min; };
var randNum = getRandomInt(0,10);
var imageUrl = Appery.getImagePath("img_" + randNum + ".png");
Apperyio("mobileimage_27").attr("src", imageUrl); }
else {seconds = 60;
minutes--;}}
var countdownTimer = setInterval(secondPassed, 1000);
secondPassed();

Can someone please advise what I'm doing incorrect??

Also, when I click the timer button twice, the timer is running two different times.... any idea how to prevent this?

thanks in advance for any help!!!


Display picture when timer completes!

Posted: Mon Aug 11, 2014 5:24 am
by Evgene Karachevtsev

Hello Bruce,

Could you please clarify, are you sure that you definitely have an image with the same name which is formed in this line:
prevar imageUrl = Appery.getImagePath("img_" + randNum + ".png");/pre
You may output result to the console or to the alert to check. Unfortunately , ot isn't very clear what does timer do by a double click, could you please detail?


Display picture when timer completes!

Posted: Mon Aug 11, 2014 3:42 pm
by Bruce

definitely sure that there is an image with the same name. The code for the image works separately in a different function:

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var randNum = getRandomInt(0,10);

var imageUrl = Appery.getImagePath("img_" + randNum + ".png");
Apperyio("mobileimage_27").attr("src", imageUrl);

When I click a button once, the countdown timer starts. When it is clicked again when the countdown is in progress, two times are running simultaneously. E.g. 15, 14, 13, 12, 15, 11, 14, 10, 13, 9 .......


Display picture when timer completes!

Posted: Tue Aug 12, 2014 12:39 am
by Yurii Orishchuk

Hi Bruce,

It seems you have provided us not full JS.

Thus it's hard to help you now.

Please give us your app public link. And describe steps to reproduce it.

Regards.


Display picture when timer completes!

Posted: Tue Aug 12, 2014 2:42 am
by Bruce

There are only the two different functions, both listed above. One executes at the click of a button and the other executes on the click of a picture.


Display picture when timer completes!

Posted: Tue Aug 12, 2014 3:10 am
by Yurii Orishchuk

Dear Bruce,

As i mentioned above i can not see FULL code.

You have provide us some part of this code. This part does not clear. And thus we can not help you.

See details on screen shot:

http://prntscr.com/4by9sv/direct

Regards.


Display picture when timer completes!

Posted: Tue Aug 12, 2014 3:22 pm
by Bruce

oops - here's the full code. How do I provide the app public link? Or will this do?
var seconds = 15; var minutes = 0;
var secondPassed = function(){
Appery("timer_div").text(minutes + " : " + seconds);
{seconds--;
if (seconds === 0){
if (minutes === 0){
var chad = function () {
clearInterval(countdownTimer);
Appery("timer_div").text("timer done");
getRandomInt(min, max);
return Math.floor(Math.random() * (max - min)) + min;};
var randNum = getRandomInt(0,10);
var imageUrl = Appery.getImagePath("img_" + randNum + ".png");
Apperyio("mobileimage_27").attr("src", imageUrl); }
else {seconds = 60;
minutes--;}}
}};
var countdownTimer = setInterval(secondPassed, 1000);
secondPassed();


Display picture when timer completes!

Posted: Wed Aug 13, 2014 1:30 am
by Yurii Orishchuk

Hi Bruce,

This is corrected JS code:

pre

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
};
var randNum = getRandomInt(0,10);

var seconds = 15;
var minutes = 0;
var secondPassed = function() {
Appery("timer_div").text(minutes + " : " + seconds); {
seconds--;
if (seconds === 0) {
if (minutes === 0) {
//var chad = function() {
clearInterval(countdownTimer);
Appery("timer_div").text("timer done");
//getRandomInt(min, max);
// return Math.floor(Math.random() * (max - min)) + min;
//};
var randNum = getRandomInt(0, 10);
var imageUrl = Appery.getImagePath("img_" + randNum + ".png");
Apperyio("mobileimage_27").attr("src", imageUrl);
} else {
seconds = 60;
minutes--;
}
}
}
};
clearInterval(self.countdownTimer);
self.countdownTimer = setInterval(secondPassed, 1000);
secondPassed();

/pre

After countdown is finished "mobileimage_27" component asset changed to something like "files/views/assets/image/img_3.png"

You can make it sure by click "ispect element" on image component.

Regards


Display picture when timer completes!

Posted: Wed Aug 13, 2014 11:24 pm
by Bruce

This is awesome!! Really appreciate your help. Thanks a lot!