Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A Split-Flap Display with CSS and JavaScript
JavaScript Perl
branch: master
Failed to load latest commit information.
build Initial upload
examples Added shim for rAF
src Initial upload
tools Initial upload
LICENSE Initial upload
README.md Fixed path in read me

README.md

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 );

License

MIT licensed

Copyright (C) 2012 Jaume Sanchez Elias, http://www.clicktorelease.com

Something went wrong with that request. Please try again.