solaridisplay's Introduction

SolariDisplay - A Split-Flap Display with CSS and JavaScript

Library to create a Split-Flap Display, or Solari Board.

You can see the blog post here Split-flap display with CSS and JavaScript.

Forks, pull requests and code critiques are welcome!

Using the code

Include SolariDisplay.[min.]js and SolariDisplay.css.

<script src="SolariDisplay.min.js"></script>
<link href="SolariBoard.css">

You'll need to add this markup

<div id="viewport" class="displayBase">
	<div id="container" ></div>
</div>

and this CSS

#viewport{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
#container{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-family: sans-serif; }

and then this basic code:

var display; // this will be the Solari Display object

window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; // you'll need support for rAF

window.addEventListener( 'load', function() { // once the page loads

	// create a SolariDisplay

	/*
		parameters:
		container - the element that will contain the display
		format - an array of either a single character or an array of characters. 
			The length of this format array is the number of segments.
			There are several defines ready to use:
				CTR.SOLARIVALUES.letter: A to Z and space
				CTR.SOLARIVALUES.number: 0 to 9
				CTR.SOLARIVALUES.hour: 00 to 23
				CTR.SOLARIVALUES.minute: 00 to 59
		segmentWidth: the width in pixels of a single segment
		segmentHeight: the height in pixels of a single segment
		fontSize: the size of the font in pixels
	*/

	display = new CTR.SolariBoard( {
		container: container,
		format: [ 
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter,
			CTR.SOLARIVALUES.letter
		 ],
		segmentWidth: 70,
		segmentHeight: 120,
		fontSize: 100
	} );

	// update the content of the display
	display.setContent( 'HELLO WORLD' );

}, false );