How to Create A JavaScript Web Page Screen Saver

How to Create a JavaScript Web Page Screen Saver

Screensavers are ubiquitous on computers these days. Practically all computers, PDA's and mobile phones have a ready selection of screen savers to amuse their users. The original purpose of a screen saver was to literally to save the screen; long-time computer users may remember the screens of old that had text etched onto the screen which could be read even when the computer was off. Since then, the hardware has become more robust and the nature of computer programs has changed, so this problem is reduced. Today, screen savers are used for data protection, adding to one's environment and amusement. It's the last of these three aims that has inspired this article.

In this article, I present a simple framework to implement a 'screen saver' on a web page. It will do all of the essential things that good screen savers do; wait patiently in the background while the user is busy interacting with the page, activate after a timeout, hide the current contents of the page, display something pretty to look at and finally, restore the original page content when the user moves the mouse or presses a key on the keyboard.

The framework begins with a class called ScreenSaver, whose constructor function is shown here:

function ScreenSaver(settings) {
	this.settings = settings; this.nTimeout = this.settings.timeout; // link in to body events document.body.screenSaver = this; document.body.onmousemove = ScreenSaver.prototype.onevent; document.body.onmousedown = ScreenSaver.prototype.onevent; document.body.onkeydown = ScreenSaver.prototype.onevent; var pThis = this; var f = function(){pThis.timeout();} this.timerID = window.setTimeout(f, this.nTimeout);
}

The settings argument is a simple JavaScript Object that contains information needed by the screen saver, such as the timeout period and the flavor of screen saver to show. Thanks to the type-less nature of JavaScript, the settings object will contain parameters for the saver implementation - whatever those happen to be.

Next, a selection of event handlers is attached to the document.body object. We need one for mouse-move, mouse-down and key-down. These will be used to stop the saver (if running) and reset the timer.

Finally, window.setTimeout() is called to notify the ScreenSaver object after the timeout period (by calling the timeout() method, more on this later.) For those not familiar with the use of function variables, it works like this: A variable called pThis is declared and assigned to the 'this' pointer to provide access to the ScreenSaver object. The variable pThis is necessary because the keyword 'this' has different meanings in different contexts. Next, a function is declared that uses the pThis pointer to call the timeout() method on the screen saver. When this function is passed into window.setTimeout(), it can still use the assigned value of pThis because nested functions run under the context in which they are defined.

The onevent function attached to the document.body calls the signal() method on the ScreenSaver object, which will do three things: stop the screen saver (if running), clear any previous timeout using the timerID saved from the call to window.setTimeout() and start a new timeout.

ScreenSaver.prototype.signal = function() {
	if ( this.saver ) { this.saver.stop(); } window.clearTimeout(this.timerID); var pThis = this; var f = function(){pThis.timeout();} this.timerID = window.setTimeout(f, this.nTimeout);
} ScreenSaver.prototype.onevent = function(e) {
	this.screenSaver.signal();
}

After the timeout period has passed with no mouse or keyboard events generated by the user, the timeout() method is called on the ScreenSaver object:

ScreenSaver.prototype.timeout = function() {
	if ( !this.saver ) { this.saver = this.settings.create(); } this.saver.start();
}

This function does little more than create a saver object and tell it to start. Creating the saver uses a create method in the settings object, which allows for any implementation of screen saver to be used so long as it supports the following interface:

start()	Start the screen saver action.
stop()	Stop the screen saver. The screen saver must ensure that any of its effects are not visible although they may be stored for use next time the saver is invoked.

To demonstrate how the saver object functions, I've created an old classic, the starfield simulation:

function StarFieldSaver(settings) {
	// default values this.speed = 50; this.nStars = 50; this.zIndex = 1000; // override with settings values if ( settings.speed ) this.speed = settings.speed; if ( settings.nStars ) this.nStars = settings.nStars; if ( settings.zIndex ) this.zIndex = settings.zIndex;
}

The constructor of the StarFieldSaver does little more than set up the initial values: speed to determine how fast the stars will travel (lower numbers means faster), nStars to specify how many stars to plot and zIndex to use for the zIndex style for the black background.

Created: March 27, 2003
Revised: June 8, 2004

URL: https://webreference.com/programming/javascript/gr/column7/1