The EDRR Blog: An E.ggTimer Alternative that Doesn't Require Internet Access (i.e., works offline)

I love e.ggtimer.com -- especially because I can use the browser's url bar to set a timer and a note for the timer. However, I am often offline and that renders e.ggtimer.com less useful.

After searching for quite some time, I come across www.lumisoft.net 's Tea Timer. I merely strip the code to its basic (eliminate all the cookies related function, for example) and then make the code function a bit more like e.ggtimer in terms of its "until" ability. Lumisoft's tea timer code is at http://www.lumisoft.net/teatimer.htm . The code I end up with after modification is included below.

To set this up for offline access, you can copy the text, paste it into notepad, and then save the file as with the HTML extension. The html file accepts 1 argument in the format of ##.Note. For example: https://theedrrblog.blogspot.com/p/et-timer.html?25.Pomodoro .

In this particular example, I link it to a mp3 file I made that should make anyone cringe (and hopefully making times up more noticeable. But once you set it up for yourself, you can link it to any mp3 file you like.

I only tested the code in Chrome. So I can't guarantee that it will work in other browsers. And in chrome, if you use the manage search engines option in "Settings"…

And make an entry to the location of your html file: file:///O:/Linked/tta.html?%s …

Then you can set the timer in the URL bar using the syntax …

To setup your sound file, you will by default need to place a mp3 file named beepbeep.mp3 in the same location as your html file. (In the example above, at o:/linked/.)

Finally. I shall call this, the Egg Tea Timer, and E.T. Timer for short.

~~ HTML CODE for the "ET Timer" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<html><head><title>Egg Tea Timer</title>

<meta name="description" content="Modified "Tea timer pomodoro" from www.Lumisoft.net to function more like the Egg timer at e.ggtimer.com">

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

</head><body>

<!- Version

1.0

I added tags to mark additions I made to the Lumisoft tea timer code: "Start Edits" and "End Edits"

Note that you will need to get a MP3 file and place it in the same directory as the html file for the alarm sound to work.

Lumisoft.net's tea timer is at http://www.lumisoft.net/teatimer.htm .

E.ggtimer's egg timer is at http://e.ggtimer.com .

Background

I love e.ggtimer.com -- especially how with some setup I can set timer using the browser's url bar.

However, I am often offline which renders e.ggtimer.com not usable.

After searching for a long time, I come across www.lumisoft.net 's Tea Timer. I merely strip the code to its

basic essentially (eliminate all the cookies related function, for example) and then make it function a

bit more like e.ggtimer in terms of its "until" ability.

->

<!- Start Edits: mp3 file and html snippet from http://e.ggtimer.com. You can use any MP3 flies. It needs to be in the same location as the html file unless you specify the path ->

<audio id="beepbeep" style="display:none;" preload="auto" autobuffer>

<source src="beepbeep.mp3" type="audio/mpeg" />

</audio>

<!- End Edits ->

<br>

<h1><span id="tm">Please enable</span>:<span id="ts">javascript</span></h1><br>

<a class=SetTimeout accesskey=1 href="?1">1 minute</a>

<a class=SetTimeout accesskey=2 href="?2">2 minutes</a>

<a class=SetTimeout accesskey=3 href="?3">3 minutes</a>

<a class=SetTimeout accesskey=4 href="?4">4 minutes</a>

<a class=SetTimeout accesskey=5 href="?5">5 minutes</a>

<a class=SetTimeout href="?10">10 minutes</a><br>

<a class=SetTimeout href="?15">15 minutes</a>

<a class=SetTimeout href="?20">20 minutes</a>

<a class=SetTimeout href="?25">25 minutes</a>

<a class=SetTimeout href="?30">30 minutes</a>

<a class=SetTimeout href="?45">45 minutes</a>

<a class=SetTimeout href="?60">60 minutes</a>

<a class=SetTimeout href="?120">2 hours</a><br><br>

<a href="javascript:StopEarly();">Stop timer</a><br>

<a id=saveovertime href="javascript:SaveOvertime();"></a><br>

Doing:<span id=what></span><form action="" name=myform><input id=reason type=text value="" alt="doing" size=40></form>

<span id=list></span><br>

<script type="text/javascript">

StartTime = new Date();

ShowAlert=true;

// Start Edits

// Timeout=window.location.search.substring(1)*60;

// https://stackoverflow.com/questions/150404/what-is-the-easiest-way-to-read-manipulate-query-string-params-using-javascript

var query = window.location.search.substring(1);

var vars = query.split(".");

// format: html?23.Turn of the stove

// doing it this way because Chrome url allows only 1 %s unless I use bookmarklet.

Timeout=vars[0]*60;

if (vars[1] == null) {

} else {

var doing = vars[1].replace(/\+/g," ");

document.myform.reason.value=doing.replace(/%20/g," ");

UpdateDoingWhat();

}

// End Edits

document.myform.action="javascript:UpdateDoingWhat();";

if (Timeout<=0) ShowAlert=false;

setInterval('RunTimer()', 1000)

RunTimer();

document.getElementById('saveovertime').style.visibility="hidden";

function RunTimer(){

var CurrentTime = new Date();

var SecondsUsed = Math.floor((CurrentTime-StartTime)/1000);

SecondsLeft = Timeout-SecondsUsed

var tdur = Math.abs(SecondsLeft)

var minu = Math.floor(tdur/60)

var sec = Math.floor(tdur%60)

if (sec<0) sec=-sec

if (sec<10) sec='0'+sec

if (SecondsLeft<0) minu="-"+minu

document.getElementById('tm').innerHTML = minu

document.getElementById('ts').innerHTML = sec

document.title = minu+":"+sec+" / "+Timeout/60+" mins"

if (ShowAlert && (SecondsLeft<=0)) {

ShowAlert = false;

// Start Edits

document.getElementById("beepbeep").play();

// End Edits

document.getElementById('saveovertime').style.visibility="visible";

self.focus();

// Start Edits

// document.title = "Time is up! "+document.getElementById('what').text+minu+":"+sec+" / "+Timeout/60+" mins";

document.title = document.getElementById('what').innerHTML;

// alert("Time is up! ("+Timeout/60+" min)");

alert("Time is up! ( "+document.getElementById('what').innerHTML+")");

// End Edits

}

}

function Formathhmm(seconds) {

if (isNaN(seconds)) return "?&nbspmin";

if (seconds<1) return Math.floor(seconds*60)+" sec";

var tdur = Math.abs(seconds);

var minu = Math.floor(tdur/60);

var sec = Math.floor(tdur%60);

if (sec<0) sec=-sec;

//if (sec<10) sec='0'+sec;

if (seconds<0) minu="-"+minu;

var htxt=(minu==1) ? " h ":" h ";

var mtxt=(sec==1) ? " min":" min";

if(minu!=0) return ""+minu+htxt+sec+mtxt;

return sec+mtxt;

}

function SaveOvertime() {

var CurrentTime = new Date();

var SecondsUsed = Math.floor((CurrentTime-StartTime)/1000);

var SecondsLeft = Timeout-SecondsUsed;

if (SecondsLeft<0) {

ShowAlert=false;

SaveTimed(-SecondsLeft);

StartTime = new Date(new Date()-Timeout*1000);

}

}

function StopEarly() {

var CurrentTime = new Date();

var SecondsUsed = Math.floor((CurrentTime-StartTime)/1000);

var SecondsLeft = Timeout-SecondsUsed;

var savesec=SecondsUsed;

if (SecondsLeft<0) savesec=-SecondsLeft;

ShowAlert=false;

Timeout=0;

StartTime = new Date(new Date()-Timeout*1000);

}



function SetDoing(what) {

document.myform.reason.value=what;

UpdateDoingWhat();

}

function UpdateDoingWhat() {

// alert(document.myform.reason.value);

document.getElementById('what').innerHTML =HtmlEscape(document.myform.reason.value);

}

function HtmlEscape(str) {

//if (str=="") return "undefined";

str=str.split("&").join("&");

str=str.split("\"").join(""");

str=str.split("\'").join(""");

str=str.split("<").join("<");

str=str.split(">").join(">");

str=str.split("%").join("%25");

return str;

}

function AddJavaScriptToLinks() {

for (var i=0; i < document.links.length; i++) {

var li = document.links[i];

if (li.className=="SetTimeout") {

li.onclick=function() {return UpdateTimeoutWithoutPageRefresh(this.href);};

}

}

}

function UpdateTimeoutWithoutPageRefresh(linkurl) {

if (linkurl.length<1) return true;

var minutes=linkurl.split(/[?&]/,3);

if (!isNaN(minutes[1])) {

Timeout=Number(minutes[1]*60);

StartTime = new Date();

ShowAlert=true;

if (Timeout<=0) ShowAlert=false;

UpdateDoingWhat();

DoFocus();

return false;

}

return true;

}

function DoFocus()

{

document.myform.reason.focus();

}

function getQueryVariable(variable) {

// https://stackoverflow.com/questions/150404/what-is-the-easiest-way-to-read-manipulate-query-string-params-using-javascript

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i = 0; i < vars.length; i++) {

var pair = vars[i].split("=");

if (pair[0] == variable) {

return pair[1];

}

}

return null;

}

AddJavaScriptToLinks();

onload = DoFocus;

//onunload=StopEarly;

</script>

</body></html>

Wednesday, July 22, 2015

An E.ggTimer Alternative that Doesn't Require Internet Access (i.e., works offline)