HTML Screensaver Maker

What do you need to create a screensaver?

A basic understanding of web technologies.
A text editor or web IDE.

The project folder

Every project folder must contain the following 3 files:

index.html - this page is use to open in fullscreen mode.
preview.html - this page is use to open in preview mode.
config.html - this page is use to open in config mode.

Getting Started

Creating the project folder

Create a directory and rename it Hello world!. This directory will be the project folder to be use for HTML Screensaver Maker on converting into screensaver executable files.

Creating the fullscreen mode page

Create an HTML document inside the Hello world! directory and call it index.html. The screensaver will show this page when running in fullscreen mode. Add the following code to it, and save the document.


<!DOCTYPE html>
<html>
<head>
	<title>Hello World!</title>
	<script type="text/javascript">
		function animate() {
			var obj=document.getElementById("word");
			obj.style.top=Math.round(Math.random() *document.documentElement.clientHeight);
			obj.style.left=Math.round(Math.random() *document.documentElement.clientWidth);
			setTimeout(function(){animate();}, 2000);
		}
		function load() {
			var word=external.getPreference("word");
			if(word){
				document.getElementById("word").innerHTML=word;
			}
			animate();
		}
	</script>
</head>
	<body onload="load();" style="background-color:black;">
		<div id="word" style="position:absolute;width:100px;height:100px;background-color:white;font-weight: bold;">Hello World!</div>
	</body>
</html>

Creating the config mode page

Create an HTML document inside the Hello world! directory and call it config.html. The screensaver will show this page when running in config mode. Add the following code to it, and save the document.


<!DOCTYPE html>
<html>
	<head>
		<title>Hello World!</title>
	</head>
	<body onload="document.getElementById('word').value=external.getPreference('word');external.Resize(300, 200)">
		<input type="text" name="word" id="word" value="Hello World!" />
		<input type="button" value="Save" onclick="external.setPreference('word',document.getElementById('word').value);" />
	</body>
</html>

Creating the preview mode page

Create an HTML document inside the Hello world! directory and call it preview.html. The screensaver will show this page when running in preview mode. Add the following code to it, and save the document (Note we are using the same code as fullscreen mode, but you can create another code or just delete the preview page, to start the fullscreen mode like preview page).


<!DOCTYPE html>
<html>
<head>
	<title>Hello World!</title>
	<script type="text/javascript">
		function animate() {
			var obj=document.getElementById("word");
			obj.style.top=Math.round(Math.random() *document.documentElement.clientHeight);
			obj.style.left=Math.round(Math.random() *document.documentElement.clientWidth);
			setTimeout(function(){animate();}, 2000);
		}
		function load() {
			var word=external.getPreference("word");
			if(word){
				document.getElementById("word").innerHTML=word;
			}
			animate();
		}
	</script>
</head>
	<body onload="load();" style="background-color:black;">
		<div id="word" style="position:absolute;width:100px;height:100px;background-color:white;font-weight: bold;">Hello World!</div>
	</body>
</html>

Testing and compiling your screensaver

Run the HTML Screensaver Maker go to menu File > Open, find and select the folder created previously (Hello world!). choose in the dropdown (Mode) both modes (fullscreen,preview and configurate), to see if the script work, click in compile when done testing, save you screensaver file and done! you have now your first HTML screensaver.

download the screensaver executable and code examples here

int	external.X	Gets or sets the x-coordinate of the upper-left corner of the window.
int	external.Y	Gets or sets the y-coordinate of the upper-left corner of the window.
int	external.Width	Gets or sets the width of the window.
int

Version	1.0
License:	Free
Operating Systems:	Windows All
Additional Requirements:	Microsoft .NET Framework

Moonlight21