It is no shocker that the various lock-downs over the last 4 years have taken their toll on my svelte being, well, that’s an understatement, they have kicked me to the curb and rolled me around in fat like it’s snow … so my snowball self is now huge.
Much like everyone else I have turned to my phone to help me, but I couldn’t find what I wanted. Whilst it is very cool that there are apps out there that will sort out your dietary intake as well as give you road maps for x, y and z, these are just not what I was looking for. Exercise is common sense after all, little and often like your food and you’re good to rock. I just wanted something to tell me when to switch up what I was doing. To go from push-ups, to sit-up’s to planks .. etc.
My time is somewhat restricted and I don’t always have a set amount of time to do things, so I wanted a simple app that I could set an exercise time, from 5 min to 30 mins, with intervals from 30s to .. whatever and for it to notify me it is time to do something else. After much searching, nothing, I could spend the 5 – 15 quid on an all singing and all dancing “lifestyle adjuster”, but nothing that would just do what I needed it to do. So here I am, writing about my lack of discovery and telling you all that I wrote a very simple JavaScript app to do exactly that. Again, it’s not epic and of course there are probably millions of ways of doing it differently using state changes etc. But it works.
I have given it the fun title of “Beep Regime”, because I am, if nowt else, a simple man. Start beeps, interval beeps and an end beep. So I created a web form which captures everything I need … a duration and an interval … very … erm … comprehensive?
With that done all there is left to do is daisy chain the correct amount of timers together until it is complete. It is also worth noting here that I did zero error checking, because I am not stupid and know the interval has to be smaller than the duration (or the same size).
Lets start with some PSEUDO code to make sure my brain stays on track, always good to remember what it is you’re actually supposed to be doing after you are distracted answering other peoples questions on stackoverflow or where ever.
Pseudo Code
Start preload start beep, interval beep and end beep Number of timers = duration / interval timer 1 plays start beeps with a longer delay to start for 1 to number of timers wait interval and play interval beep timer n (last timer) plays end beeps Congratulate the userEndI added a normal clock to the home page of my little form when I was testing timers and intervals in JavaScript, its now a permanent feature, well, why not I say, everyone loves a clock, right? I have also added some other superfluous functions for checking things are what they say they are, always good to do some basic checking.
It all relies on JavaScript behaving as it always has done, there is nothing to say it wont suddenly stop working in the future once browser technology changes. In its really simplest terms … it creates a timer, and on timeout, it looks to see if another timer is needed. If not, it plays the end beeps, otherwise it plays the interval beeps … rinse and repeat as much as you want.
Here is the code, but I will also attach a little package to this post if anyone wants to download everything including the beeps.
var started, ended, curIntervals = 0, sections = 0; function clearAllIntervals() { const interval_id = window.setInterval(function(){}, Number.MAX_SAFE_INTEGER); for (let i = 1; i < interval_id; i++) { window.clearInterval(i); } } function is_val(value) { if( (parseInt(value) % 1 === 0 )){ return true; } else { return false; } } function iTimer (start, duration, total) { curIntervals += 1; // With milliseconds var intervalTimer = setInterval (function() { var curTime = Date.now(); var split = curTime - start; mm = Math.floor((split/1000/60) << 0); ss = Math.floor((split/1000) % 60); ms = Math.floor(split%100); document.getElementById("countdown").textContent = "Interval " + curIntervals + " " + String(mm).padStart(2,'0') + ":" + String(ss).padStart(2,'0') + ":" + String(ms).padStart(2,'0'); // Section Ding let ding = new Audio('section-beeps.mp3'); ding.load(); ding.addEventListener("ended", function() { setTimeout(iTimer(Date.now(), duration, total-curIntervals), 5000); }); // Completion success let success = new Audio('success.mp3'); success.load(); if (!(curTime <= (start + duration*60000))) { // Clear timer clearInterval(intervalTimer); if (curIntervals < total) { document.getElementById("countdown").textContent = "Don't forget to breathe"; ding.play(); } else { if (curIntervals > 1) intWord = "intervals"; else intWord = "interval"; if (duration > 1) durWord = "minutes"; else durWord = "minute"; document.getElementById("countdown").textContent = "Congratulations! You did " + curIntervals + " " + intWord + " of " + duration + " " + durWord; success.play(); curIntervals = 0; ended = Date.now(); setTimeout ( function () { window.location.reload(); }, 6000); } } },10); } function changeTime() { var d = new Date(); var hour = d.getHours() var minute = d.getMinutes() var second = d.getSeconds() document.getElementById("clock").textContent = hour + ':' + minute + ':' + second; setTimeout(changeTime, 1000); } changeTime(); let start = new Audio('start-beeps.mp3'); start.load(); function letsgo() { clearAllIntervals(); intform = document.getElementById("starttraining"); thisinterval = intform.interval.value; thisduration = intform.duration.value; curIntervals = 0; if (is_val(thisinterval) && is_val(thisduration) > 0) { if (thisinterval <= thisduration) { intform.intervalopts.disabled = true; total = thisduration / thisinterval; document.getElementById("countdown").textContent = "Get Ready!! Here we go"; start.addEventListener("ended", function() { started = Date.now(); iTimer(Date.now(), thisinterval, total); }); start.play(); } else { alert("It may be prudent to have intervals that are shorter than the total duration"); } } else { alert("You broke the interval and duration, you probably want to fix that"); } }As I said, not the most sophisticated of solutions, but you will see it is concise and requires no additional libraries for it to work, so it’s footprint is pretty small and it does what it says on the tin. I did look at the moment library but it was way more than I needed (seems to be the defacto position for this concept). I have linked to it here just in case you wanted to have a squint in your own time … get it? my lord, I even astound myself sometimes. (If the downloaded code has moment in the changeTime function, you will need to change it to the code in this post, I can’t remember which/when I compressed the folder, it was a while ago now)
You can see it working over on incredulous.org/br/ should you manage to break something from the download 😉
Enjoy your exercising and as always, if you enhance or make more of this than I ever would, please let me know and stick a link to your version in the comments or something. It always nice to know things are being used out in the wild so to speak.
Download “Beep Regime files” br.zip – Downloaded 770 times – 650.72 KB
