This article was written almost entirely to get into the gadget competition. Sort of :)
Having said that, I have done some work for a Chiropractor, and he showed me a program that just sat on the desktop and told you when to breathe in and when to breathe out. Apparently, some people don't have what it takes to do that on their own.
Seriously, though, deeper and slower breathing is better for you (more oxygen to the brain helps you think better), and this little thing sitting on your desktop will help train you to do this, if you'll let it. You simply breathe in as the bar on the right fills with blue, hold it, and then breathe out as it drains away.
With the water, again it's something we know we should all do more of. We're constantly hammered by "healthy people" to drink a couple of litres of water a day. This gadget will give you an audible notification of when it's time to refill your glass. When you do, you click the water drop in the middle of the gadget, and the glass refills, and starts draining away again.
About the code
There just isn't much to say here. I've seen that all around the place: "I can't believe it's this simple", people keep saying.
Oh sure, there are a couple of timeouts to do the animation, but the rest is the interaction between the gadget itself and the settings. Irritating, that's what it is.
I've made it configurable so that you can specify how slowly (deeply) you want to breathe; how long you're at work; how much you want to drink while you're at work; and how much your glass holds. Don't put in too much water: you'll spend more time in the bathroom than at your desk. Don't make the pauses between exhaling and inhaling too long...
I've set up the defaults so that you're at work for 8 hours; it will get you to drink 1500 mls of water while you're at work; and your glass holds 250 mls. If you're in an area that uses non-metric fluid measures ... catch up with the rest of the world.
The defaults for the breathing is 3 seconds for both inhaling and exhaling, with a 1 second pause between.
Points of Interest
Acoustic is right when he says that most of the time is spent on finding or creating graphics for the gadget. I embarked on a bit of learning curve with the GIMP to cut up and "transparify" my images, but the glass itself was found from a Google search for images ("water glass").
The water level is the background image of a
DIV that is displayed within a
DIV that clips it ("
overflow: hidden"), and it simply slides up and down.
The breathing display is the same deal, except that it is a coloured
DIV instead of one with a background image.
Where to go from here
Well, it would be nice to have some better graphics, and I was thinking that the gadget should probably include something in there about having a bit of a stretch now and then.