militia / split-flap Goto Github PK

INTRODUCTION 
------------

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.

There are two example files here, flights.php and weather.php. Flights uses 
randomly generated data from data/airport_schedule.php, based on the page
request, like so:

flights.php?data=arrivals

Weather uses live data from the Weather Underground, displaying weather con-
ditions for nearby weather stations, for example:

weather.php?data=KSFO&apiKey=d73bc72d0f231c10

will show weather for the four airports nearest SFO.

INSTALLATION 
------------

1. Place the "split-flap" folder anywhere in your web server's path. The demo
uses relative paths to load img/ css/ js/ and data/ (although there's nothing
stopping you from using absolute paths).

2. Make sure your web server knows about the .json file extension. On a mac,
add:

   "text/json   json
   
to /Library/Apache2/conf/mime.types and restart apache (turning web sharing off
and back on will do that)

3. Make sure data/airport_schedule.php is executable.

4. Navigate to arrivals.html (or departures.html) in your web browser (preferably 
in full-screen mode--it's around 1400x850 at the moment).


CUSTOMIZATION 
-------------

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 arrivals.html. 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 sf.chart.splitFlap.show()

The data type, sort criteria, and max number of results are set in the hiddin
<input> elements in arrivals.html

/data/airport_schedule.php is just an example. Currently it's randomly setting
/times for each flight to demonstrate the sorting function. Change it to fit
/your needs, keeping in mind that if you add or remove values from each flight's
array you'll need to update your markup accordingly.

You can also use any external data sources (provided they return JSONp in the
same format as airport_schedule.php. Just modify sf.chart.dataUrl to include
"&callback=?" so jQuery knows to expect JSONp.