Skip to content

Examples

Jump to bottom
Colin Mitchell edited this page Feb 17, 2016 · 7 revisions

A Relatively Simple Screensaver

The Screen Flipper screensaver is fairly straightforward, and doesn't require any extra libraries and just a bit of javascript. However, it does use the screenshot URL provided by Before Dawn. The main code all fits into a pretty simple HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Screen Flipper</title>
    <style>
		// rotate any images by 180 degrees to flip them upside down
		img {
			transform: rotate(180deg);
		}
    </style>
  </head>
  <body>
  	<!--- here is where we will put our image --->
    <img id="screen" />
  </body>
  <script>
	// this little javascript snippet will parse any incoming URL
	// parameters and place them in the window.urlParams object.
	// you can read the width/height of the screen and some other helpful values here
	window.urlParams = window.location.search.split(/[?&]/).slice(1).map(function(paramPair) {
		 return paramPair.split(/=(.+)?/).slice(0, 2);
		}).reduce(function (obj, pairArray) {            
		 obj[pairArray[0]] = pairArray[1];
		 return obj;
		}, {});

	// find the image
	var img = document.getElementById("screen");

	// decode the incoming URL
	var url = unescape(decodeURIComponent(window.urlParams.screenshot));
	img.src = url;

	// set the width/height of the image to match the width/height specified as incoming URL parameters 
	if ( typeof(window.urlParams.width) !== "undefined" ) {
		img.width = window.urlParams.width;
		img.height = window.urlParams.height;
	}
  </script>
</html>

The saver.json is quite simple and looks a lot like this:

{
  "name":"Screen Flipper",
  "description": "Flip the screen",
  "author": "Colin Mitchell",
  "source": "index.html"
}

That's it!

A More Complicated Screensaver

The Flying Emoji screensaver involves using an extra JS library, some image assets, and a configurable setting.

The folder for this screensaver has these files:

saver.json
index.html
emoji.pde
processing.js
data/
	1.png
	2.png
	...
	872.png

The JSON file for this screensaver looks a lot like the prior example, except that it also has an option specified:

{
  "name":"Emoji Starfield",
  "source": "index.html",
  "description": "Emoji flying through space",
  "aboutUrl": "http://muffinlabs.com/",
  "options":[
    {
      "name": "density",
      "type": "slider",
      "description": "how dense?",
      "min": "1",
      "max": "100",
      "default": "75"
    }
  ]
}

When the user picks this screensaver in the preferences window, there will be a slider which controls how many emoji are on the screen at once.

Here's the main HTML for this screensaver:

<!DOCTYPE html>
<html>
  <head>
    <title>Emoji Screensaver!</title>
    <script>
      window.urlParams = window.location.search.split(/[?&]/).slice(1).map(function(paramPair) {
        return paramPair.split(/=(.+)?/).slice(0, 2);
      }).reduce(function (obj, pairArray) {            
        obj[pairArray[0]] = pairArray[1];
        return obj;
      }, {});
    </script>
    <script src="processing.js"></script>
    <canvas data-processing-sources="emoji.pde"></canvas>
  </head>
  <body>
    
  </body>
</html>

It's using processing.js to render the screensaver, so it has been included here. PJS will load emoji.pde. Both of these files are right in the main folder of the screensaver.

emoji.pde is a PJS script, and including the whole thing here probably isn't very useful, but most of the important stuff happens in the setup function:

// There are 872 images in the data directory. Putting their start/end
// numbers here rather than hardcoding them
int min_sprite = 1;
int max_sprite = 872;

void setup() {
	// check for our urlParams object. this was loaded in index.html
  if ( typeof(window.urlParams) !== "undefined" ) {
    display_width = window.urlParams.width;
    display_height = window.urlParams.height;

		// this is the value of the slider in the prefs window. it controls
		// the count variable, which is how many emoji we put on the screen
    if ( typeof(window.urlParams.density) !== "undefined" ) {
      count = window.urlParams.density * 2;
      console.log("set count to " + count);
    }
  }
  else {
    display_width = screen.width;
    display_height = screen.height;
  }
  
	// some other setup/etc

}

There's obviously a lot of details in the processing script, but this covers the fundamentals of how the script actually interacts with Before Dawn.

Clone this wiki locally