Dmitrijus
Sorry for the bad rating, didn't select anything and it defaulted to 0..
Simple highly customizable timer to use in your apps
Ionic timer is a simple yet useful plugin that allows you to create timers in your ionic apps.
This component has no directives. It uses a simple $timeout
function for the timer and it has 4 easy functions that allow you to control it:
startTimer
pauseTimer
stopTimer
timer-stopped
(triggered, when the timer stops)This component has well structured html, css and js files and is commented. It is easy to understand, edit and customize.
All the timers open in a modal for the demo, you can easily use them outside the modal with the same code provided inside it.
This component uses both Moment and angular-svg-round-progressbar. Take a look into these projects to know more about it.
This project already has all the moment files and angular-svg-round-progress files nedded to work. Plus its dependencies. Please check angular-svg-round-progressbar to know more about customization of the progress bar.
Download the project and see how it works!
Made with love by the myBeweeg team
Free Software, Hell Yeah!
Hey there! You'll need to log in before you can leave a comment here.
Sorry for the bad rating, didn't select anything and it defaulted to 0..
@Dmitrijus don't worry I talked to the ionic team and they fixed it! Thx!
It seems not working when the remaining time is more that 24H, also, I'm wondering how to bring the progress out of the modal
Hi @JemliF, that's true the timer is not working for more than 24 hours, the problem is that when I set the duration I use `var duration = moment().startOf('day').add(input, units);` and as you can see if the input is higher that 24h we get problems. I don't have time at the moment for solving it but feel free to try it and if you can work it out it would be great if you could share the answer with all of us. As for the timer outside the modal I've just created another codepen (you just had to call the function selectTimer() without the ng-click of the buttons and copy-paste the layout on the main screen). here it goes the pen http://codepen.io/comapedrosa/pen/ONYgzJ . Hope it helps!
How can I use it for Ionic 2?
I don't know, haven't tried ionic 2 yet. But I guess that there's no problem as far as putting all the js code on the component
Please till me if you did it, I tried more time and can not
Great timer. Is it possible to presist the countdown when app is closed or phone locked?
Hi Stephen, I haven't don it but if you look at the codepen you'll see a comment in there where I explain how to do it!
Hi Marc, thanks for the quick reply. I had a look at the codepen but nothing stood out for me. Is it at the var mytimeout line?
Stephen you misunderstood me maybe I didn't explain myself enough! By commenta I meant the ines on the codepen link here you have them http://codepen.io/comapedrosa/details/gPPwOv every codepen has a comments section working in the same way that this comment section on ionic market! Hope it helps now!
Ah sweet, get ya now. Thanks so much for the help!!
Hi! It's possible to use it witout a modal? Return this error on the frontend: 2016-11-14T00:00:00+01:00
Yes it is possible, actually if u take a look at my codepen profile I have 2 examples of the timer one with modal and the other withoit it!
Great, but Inotice that you give the value manually... I need to pass the value from an array.
5 star for this plugin. But there is one problem. When device locked, timer stop automatically. Can you suggest me how to solve it?
Hi Raul look at the answer I gave to Stephen a few daya ago! Hope it helps!
Any chance that you can upgrade this for ionic2/3?
Hi Steven, not possible for the moment, my company still uses Ionic 1! Thx for your interest!
Greetings, I'm new to ionic, could you please list the installation steps so I can install it into my project. thanks
Hello, easiest thing to do is to takw a look at the CodePen (https://codepen.io/comapedrosa/pen/gPPwOv) and copy the code from there. Basically, you just have to install the 2 libraries mentioned Moment and angular-svg-round-progressbar and copy all the js code to your controller (no need to copy angular-svg-round-progressbar) since you will have it from the headers on your project. Hope it helps.
As soon as I copy the JS code into my page controller, Ionic Serve just gives me a blank screen. I know it's difficult to determine without viewing the rest of my code but it is quite large. Any ideas on what is causing this or does anyone have similar examples of implementing this timer within an existing app i.e. not as the index.html file?
Can someone please remove this, I have reposted my question as this did not show up earlier. Thanks
Difficult to answer given the lack of information, but when I added the js to my app i get this error when running Uncaught SyntaxError: Unexpected token . apparently it is due to the app now returning index.html for all requests? any ideas on how to solve this, or does someone have a similar example of integrating this plugin into a pre-existing app.
I have it in several places not just index.html look at my codepen profile and check both timer codepens, one within a modal and the other not. (https://codepen.io/comapedrosa/) maybe it helps!
Update for ionic3? Who still uses ionic 1? :-)
I still use it, for the moment no update for v3 but you can clone the project and do it! :)
Hey how to code using typescript and js?
Update for ionic3? Who still uses ionic 1? :-)
I still use it, for the moment no update for v3 but you can clone the project and do it! :)
Hey how to code using typescript and js?
Difficult to answer given the lack of information, but when I added the js to my app i get this error when running Uncaught SyntaxError: Unexpected token . apparently it is due to the app now returning index.html for all requests? any ideas on how to solve this, or does someone have a similar example of integrating this plugin into a pre-existing app.
I have it in several places not just index.html look at my codepen profile and check both timer codepens, one within a modal and the other not. (https://codepen.io/comapedrosa/) maybe it helps!
As soon as I copy the JS code into my page controller, Ionic Serve just gives me a blank screen. I know it's difficult to determine without viewing the rest of my code but it is quite large. Any ideas on what is causing this or does anyone have similar examples of implementing this timer within an existing app i.e. not as the index.html file?
Can someone please remove this, I have reposted my question as this did not show up earlier. Thanks
Greetings, I'm new to ionic, could you please list the installation steps so I can install it into my project. thanks
Hello, easiest thing to do is to takw a look at the CodePen (https://codepen.io/comapedrosa/pen/gPPwOv) and copy the code from there. Basically, you just have to install the 2 libraries mentioned Moment and angular-svg-round-progressbar and copy all the js code to your controller (no need to copy angular-svg-round-progressbar) since you will have it from the headers on your project. Hope it helps.
Any chance that you can upgrade this for ionic2/3?
Hi Steven, not possible for the moment, my company still uses Ionic 1! Thx for your interest!
5 star for this plugin. But there is one problem. When device locked, timer stop automatically. Can you suggest me how to solve it?
Hi Raul look at the answer I gave to Stephen a few daya ago! Hope it helps!
@Dmitrijus don't worry I talked to the ionic team and they fixed it! Thx!
Great timer. Is it possible to presist the countdown when app is closed or phone locked?
Hi Stephen, I haven't don it but if you look at the codepen you'll see a comment in there where I explain how to do it!
Hi Marc, thanks for the quick reply. I had a look at the codepen but nothing stood out for me. Is it at the var mytimeout line?
Stephen you misunderstood me maybe I didn't explain myself enough! By commenta I meant the ines on the codepen link here you have them http://codepen.io/comapedrosa/details/gPPwOv every codepen has a comments section working in the same way that this comment section on ionic market! Hope it helps now!
Ah sweet, get ya now. Thanks so much for the help!!
How can I use it for Ionic 2?
I don't know, haven't tried ionic 2 yet. But I guess that there's no problem as far as putting all the js code on the component
Please till me if you did it, I tried more time and can not
Hi @JemliF, that's true the timer is not working for more than 24 hours, the problem is that when I set the duration I use `var duration = moment().startOf('day').add(input, units);` and as you can see if the input is higher that 24h we get problems. I don't have time at the moment for solving it but feel free to try it and if you can work it out it would be great if you could share the answer with all of us. As for the timer outside the modal I've just created another codepen (you just had to call the function selectTimer() without the ng-click of the buttons and copy-paste the layout on the main screen). here it goes the pen http://codepen.io/comapedrosa/pen/ONYgzJ . Hope it helps!
It seems not working when the remaining time is more that 24H, also, I'm wondering how to bring the progress out of the modal
Sorry for the bad rating, didn't select anything and it defaulted to 0..
Hi! It's possible to use it witout a modal? Return this error on the frontend: 2016-11-14T00:00:00+01:00
Yes it is possible, actually if u take a look at my codepen profile I have 2 examples of the timer one with modal and the other withoit it!
Great, but Inotice that you give the value manually... I need to pass the value from an array.
Hey there! You'll need to log in before you can leave a rating here.
Very nice !
Great!
Simple and elegant!
love it
Great simple timer
Great work! Excelent!
{{ rating.comment }}
{{ rating.comment }}
Great work! Excelent!
Great simple timer
love it
Simple and elegant!
Great!
Very nice !