Aug
28

Sleep mode for websites

Mayur How To, Programming, tools 2010-08-28
It is estimated that if color of Google’s search page changed to black from white, world will save about 750 MW energy per year. But, that’s only for Google! what about other sites? Webmasters prefer attractive combination of colors over plain black or white so as to gain attention of audience. I’m not opposing use of colors for websites but, we can save much more energy if user moves away from his machine while accessing any website. You might be thinking of how this is possible?
Well, its possible and the solution is quite simple and clean too!
We have a concept of screen savers for our operating systems. Similarly we can have a screen saver for a website. If you find no user activities for certain period of time that means user has moved away from his machine and now we can save energy by going into sleep mode.
Initializing sleep mode
A function which checks user inactivity at regular intervals also, used for initializing some default values.


var napTime = 0;
var isSleeping = false; //Hey, I'm not sleeping

function initSleepMode() {
if(typeof(jQuery) == “undefined”) {
setTimeout(“initSleepMode();”, 100); //Oops, no dinner yet
}
else {
jQuery(function() {
jQuery(document).ready(function() {
setInterval(“isNapping();”, 1000); //Increase napping time
jQuery(“body”).append(‘

Sleeping  mode…

-By Tutkiun.com

‘);
jQuery(“#divSleep”).hide();
jQuery(document).keypress(function(e) {
napTime = 0;
wakeUp();
});
jQuery(this).mousemove(function(e) {
napTime = 0;
wakeUp();
});
});
});
}
}

Napping, Sleeping and Wake-up

isNapping() increases idle time after every interval specified. Events like keypress and mousemove will check for user activity and activate the screen with help of wakeup() function. The specific functions can be implemented as


function isNapping() { //Keep my bed ready..
napTime += 10;
if(napTime > 60) {
sleepMode();
}
}

function sleepMode() { //huh! I’m feelin sleepy
if(!isSleeping) {
jQuery(“#divSleep”).show().css({
height: “0″,
width: “0″,
left: “10%”,
top: “10%”
}).animate({
width: “100%”,
height: jQuery(window).height(),
left: “0″,
top: “0″,
opacity: “1″
}, 1500);
isSleeping = true;
}
}

function wakeUp() { //Wake’up Time!
if(isSleeping) {
jQuery(“#divSleep”).animate({
width: “0″,
height: “0″,
opacity: “0″,
left: “50%”,
top: “50%”
}, 500);
setTimeout(‘jQuery(“#divSleep”).hide();’, 700);
isSleeping = false;
}
}

Adding Styles


CSS styles can be applied to newly inserted div as


div#divSleep{
margin: 0; padding: 0;
position: absolute;
left: 50%; top: 50%; opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";/* IE, sucks :P */
filter: alpha(opacity=0); text-align: center;
z-index: 100; border: 0; background-color: #000000;
}

@media screen{body>div#divSleep { position: fixed;}}

div#divSleep p {
margin: 0; padding: 0;
width: 100%; font-size: 32px;
font-family: arial; color:#242424;
position: relative; top: 45%;
line-height: 20px; font-weight: bolder;
text-align: center;
}

Merging and Packaging

We are now done with implementing all functionalities. The above code modules should be integrated in a sequence with your web pages as

, , , , , ,

Address: http://www.tutkiun.com/2010/08/sleep-mode-for-websites.html
«
»
  • ellisgl

    LCD are more efficient showing white than black.
    CRT's I believe are disappearing like crazy.

  • http://www.tutkiun.com/ Mayur

    Thanks for comment. You can customize this code with the color you like. Changing background-color property of div#divSleep will make this happen.

  • Bkilinc

    at the end the webmaster saves the world :) this should be handled either in browser, operating system or hardware level and it is allready handled. So this is useless, it will add complexity to website.

  • Joe

    A standard LCD uses about half a watt *more* when fully black compared to when fully white. But even if you made your screensaver white…

    Let's say you get a million visitors a day. Let's say 1% leave your website maximized on their screen and walk away from their computer, for an average 10 minutes screensaver time. Let's say half those users have disabled the normal operating system screensaver, so your website screensaver is actually being displayed.

    That makes 833 hours per day that your screensaver is on someone's screen. At a power saving rate of 0.5 watts, that's a total saving of 416 watt-hours per day. You're saving less than a third of the power that one 60-watt light blub uses.

    I'm guessing the extra CPU and network power used by a million visitors a day to download and run the JavaScript will be more than that.

  • http://www.tutkiun.com/ Mayur

    Interesting stats! But, thats just for one website. It was estimated in Jan 2009 that, there are 232 million websites in world. Even if 5% of total websites use this trick, according to your calculation of usage

    Total number of websites with screen saver: 11.6million
    Total power savings: (11600000 * 416)/1000 = 4825600 kwh = 4825.6 MW

    4825 MW is considerably good amount of saving. In fact, this is enough for providing power to small city.

  • http://www.sareez.com/ sarees

    Awesome… love it..
    http://www.sareez.com/

  • http://www.sareez.com/ sarees

    Great Article… thanx for sharing…

  • Buzz

    I believe with a modern LED backlit LCD the overhead of parsing and executing your javascript causes MORE power usage

  • Murgapandian

    Hi, nice information. i want to share my views which may help many. Where do I begin, I’m about 2 yrs into a marriage life that has had a lot of turbulance due to ED. I cannot make love to my wife or share any intimacy in the bedroom. Anyway all I can say is that I’m trying this new product INVIGO and iam reaching that pleasure. I think there is hope for everyone, Thanks to INVIGO!you can reach this at http://www.invigo.in

  • Mads

    Interesting article. But we already have screensavers/sleep mode for that. I don't see the point in adding the increased complexity in the javascript code.

  • http://www.tutkiun.com/2010/09/decrease-bounce-rates-apture-hover-in-or-headup.html Decrease bounce rates -Apture, hover.in or HeadUp | Tutkiun!

    [...] Apture enables you to embed/link almost everything on web. If user clicks on apturized link, a pop up will appear instead of opening that link, consisting of summary of linked page which is very useful [...]

  • http://javarevisited.blogspot.com/ Javin Paul

    you have a nice blog man , keep it up :)

    Javin

blog comments powered by Disqus