Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
January 7, 2019 17:36
December 21, 2018 15:38
January 7, 2019 17:41
January 7, 2019 17:36
January 7, 2019 17:20

Virtual Split-Flap Display


This is a simulation of a split-flap display (often called a Solari board) designed to run in a web browser. It dynamically loads JSON data from a data source and renders that data as characters and images on the board. Individual characters are animated using CSS sprites.

The look and feel are fully configurable by changing the markup and using different sprite images, and the included files are simply examples intended to get you started with your own project.

Application Structure

/public/js - The client-side code is in split-flap.js. This code loads jquery, underscore and backbone from You may wish to change this if your application will run disconnected.

/public/img - Image sprites. Customize these to change the look of the split flap elements or utilize different character sets or status indicators. I've included the .pxd file(s) so you can edit these in Pixelmator.

/public/css - The base styles for this application. These can be extended or overridden by adding your own in /public/plugins. Note how the .full, .character and .number definitions here define different (sub)sets of images on the character sprites. If you edit the character sprites you must also edit these classes to match.

public/index.html - Example HTML to render into the browser. This is where you define the layout of your board and define some basic constants.

/public/plugins - Custom Javascript, CSS and images. Use these as a starting point to connect to new data sources, change the look and feel, etc.

/app.js - A simple Node.js application to serve static files (HTML, Javascript, CSS and images) and to serve JSON data to populate the displays. If you already have a web/application server you might not need this file.


git clone
cd Split-Flap
npm install
node app.js

Navigate to http://locahost:8080 in your browser.


The look and feel is customized by changing the markup, CSS and sprite images. Of course, any size changes you make to the images must be reflected in the sprite images and vice-versa.

The display refresh interval and the data source url are set in the <script> block at the bottom of the HTML pages. Make sure this interval is set long enough so that the entire display has finished rendering before starting again.

The row refresh cascade interval is set in the setTimeout() function in sf.chart.render(). Setting this too low results in a jerky animation as too many elements animate at once and slow your processor.

The individual elements' animation speed is set in the fadeIn() and fadeOut() functions in


The example Node app at app.js exposes an API route at /api/arrivals which demonstrates sending data to split-flap.js.

    data: [
            airline: "JBU",
            flight: 541,
            city: "Durban",
            gate: "A20",
            scheduled: "0233",
            status: "A"
            airline: "SWA",
            flight: 1367,
            city: "Roanoake",
            gate: "B13",
            scheduled: "1416",
            status: "B",
            remarks: "Delayed 13M"
            airline: "JBU",
            flight: 1685,
            city: "Charleston",
            gate: "A18",
            scheduled: "0042",
            status: "A"

The files in /public/plugins are used to set the URL for the data and process the results. See /public/plugins/adsb/custom.js for an example.