shahsankets / split-flap Goto Github PK
View Code? Open in Web Editor NEWThis project forked from baspete/split-flap
Simulated Solari Board
Home Page: http://pete.basdesign.com
License: MIT License
This project forked from baspete/split-flap
Simulated Solari Board
Home Page: http://pete.basdesign.com
License: MIT License
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 hidden <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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.