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.