The main project behind Rio is an interactive, internet connected LED wall. Rio has been used to power a 2 meter x 1.1 meter LED display made by Solid State Group. rio-server currently runs here on a Raspberry Pi and drives 2040 pixels with a generic REST and WebSocket API. We also use rio-canvas and rio-mobile to enable new ways to interact with it.
We were originally inspired by Google Creative Labs's anypixel, however felt that we could create a library ourselves that's a lot easier to build on top of and understand for curious developers who wanted to build something cool.
New! Checkout the rio-vr branch for our virtual reality implementation!
1. rio-server
This is the main component in the library. It takes different types of data, converts it to rgb arrays and sends it to the LED wall (or any output e.g. terminal).
At a high level this is broken down into 3 simple concepts:
-
inputs - These files interpret data coming in before frame data is sent to the LED wall. e.g. video, gifs, arrays of rgb values, text.
-
outputs - These files interpret frame data and output them:
console-output- Write coloured pixels to terminal.pi-output- Sends data to our lightweight python LED wall firmware.websocket-output- Pixel data is echoed with websockets, meaning you can show a realtime representation of an LED wall on web, mobile, desktop, etc.
- clients - Integrate with clients that send any form of data, converting them to inputs:
twitter-client- Subscribes to twitter stream and displays text on the wall matching #rio.slack-client- Handles messages and passes through as video or gif inputs.web-client- Restful API, request are forwarded onto appropriate input.websocket-client- Accepts raw canvas pixel data and sends directly to outputs.
Full installation instructions for installing rio-server onto a Raspberry Pi can be found here.
2. rio-canvas
A web app hosting a collection of examples that send pixel data to the rio server.
e.g. pong, paint, breakout and more
You can control rio-canvas from a separate application (e.g rio-mobile) by connecting to it via websockets and sending string messages such as :
route_pong- routing'UP', 'DOWN', 'LEFT', 'RIGHT', 'S', 'T', 'C', 'X'Player 1 controller'UP2', 'DOWN2', 'LEFT2', 'RIGHT2', 'S2', 'T2', 'C2', 'X2'Player 2 controller
3. rio-mobile
An iOS/Android app built in React Native that demonstrates both reading and writing to rio-server.
4. rio-vr
A react-vr client application that hooks into the rio-server socket, visualising the wall's data in 3d.
Project specific documentation can be found within each of the application directories above. A few high level notes here to keep in mind:
-
rio-server can run independently; simply go through the installation instructions there and simulate the LED wall in your terminal within minutes. Full installation instructions for a Raspberry Pi can be found here.
-
rio-canvas Requires you to be running rio-server and have a valid websocket address defined in its
config.js -
rio-mobile Requires you to be running both rio-server and rio-canvas have a valid api/websocket address defined in its
config.js
Pre-requisites (make sure these are installed and linked)
rio-server
| OS | Command |
|---|---|
| OS X | brew install pkg-config cairo pango libpng jpeg giflib |
| Ubuntu / Debian | sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ |
| Fedora | sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel |
| Solaris | pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto |
| Windows | Instructions on our wiki |
El Capitan users: If you have recently updated to El Capitan and are experiencing trouble when compiling, run the following command: xcode-select --install. Read more about the problem on Stack Overflow.
cd ./rio-server && npm i
rio-canvas
npm i nodemon -g
cd ./rio-canvas && npm i
rio-vr
cd ./rio-vr && npm i
rio-mobile
cd ./rio-mobile && npm i
rio-server
npm run server
rio-canvas
npm run canvas
rio-vr
npm run vr
rio-mobile
npm run ios
npm run android
If you're looking to make a big LED wall like we did, here's how we did it
We're curious to see how people are using this library. Submit an issue letting us know and we'll show it off here.
We welcome new features / bug fixes, feel free to submit a PR or add an issue with your suggestions. Even if the integrations are pretty out there (biosensors, big data, image recognition) we're willing to give it a go and help out.
For more information about contributing PRs, please see our Contribution Guidelines. Looking at PRs or issues labelled with "good first task" is a great start to contributing.
If you encounter a bug or feature request we would like to hear about it. Before you submit an issue please search existing issues in order to prevent duplicates.
If you have any questions about our projects you can email [email protected].