# Raspberry Pi RGB LED Matrix Webapp ## Overview ![](https://cdn-learn.adafruit.com/assets/assets/000/038/153/medium800thumb/led_matrix_100_5749_gif-640.jpg?1483320797) This guide shows how to install and use a Raspberry Pi RGB LED matrix Web application. The application is a Web interface to the excellent [rpi-rgb-led-matrix library from hzeller](https://github.com/hzeller/rpi-rgb-led-matrix) on Github. The Adafruit RGB Matrix HAT + RTC for Raspberry Pi - Mini Kit is used to interface with the LED panel. ![](https://cdn-learn.adafruit.com/assets/assets/000/038/154/medium800/led_matrix_animations-page-capture.png?1483385200) # Raspberry Pi RGB LED Matrix Webapp ## Required Parts The following hardware is used in this project. - [Raspberry Pi (we suggest the latest which at this time is a Raspberry Pi 3)](https://www.adafruit.com/products/3055) - [32x32 RGB LED Matrix Panel - 6mm pitch.](https://www.adafruit.com/products/2345)You can use any 'pitch' for higher/lower density display! - [Adafruit RGB Matrix HAT + RTC for Raspberry Pi - Mini Kit](https://www.adafruit.com/products/2345) - [5V 2A](https://www.adafruit.com/products/276)  or [5V 4A](https://www.adafruit.com/products/1466) power supply - Make sure the LED Matrix HAT has its own power supply. You can also get just about eveything you need in our **Time Square Pi Pack!** # Assemble the Pi HAT Follow the [Adafruit assembly guide for the RGB LED matrix Pi HAT](../../../../adafruit-rgb-matrix-plus-real-time-clock-hat-for-raspberry-pi), then come back here once all the pieces are soldered up # Raspberry Pi RGB LED Matrix Webapp ## Software Prerequisites ### rpi-rgb-led-matrix This project uses a fork of the hzeller project on Github.  The fork only has changes to specify the scrolling text as a command line argument.  The main branch can be used once [this pull request](https://github.com/hzeller/rpi-rgb-led-matrix/pull/252) is accepted. Use these commands to download the code to the Raspberry Pi and build the Web application's dependencies. ``` // install dependencies for the scrolling text sudo apt-get update sudo aptitude install libgraphicsmagick++-dev libwebp-dev sudo apt-get install libgraphicsmagick++-dev libwebp-dev -y sudo apt-get install libwebp-dev sudo apt-get install python2.7-dev python-pillow -y // download the C++ project that drives the GPIO git clone https://github.com/onebeartoe/rpi-rgb-led-matrix.git // build the project, specifing the Adafruit HAT as the hardware profile cd rpi-rgb-led-matrix sudo HARDWARE_DESC=adafruit-hat make install-python cd utils/ sudo make led-image-viewer cd ../examples-api-use make ``` Before continuing, be sure the following demo programs built into the rpi-rgb-led-matrix library run without errors and you see the LED panel lighting up.   The first demo is the spinning square. ``` $ cd rpi-rgb-led-matrix/examples-api-use $ sudo ./demo -D -m 0 --led-no-hardware-pulse --led-gpio-mapping=adafruit-hat ``` The second demo is scrolling test. ``` cd python/samples/ sudo ./runtext.py ``` ### Payara (runs WAR files) The Web application for this project uses JEE and is packaged as a WAR file.  Payara Server 4.1.x is used to run the Web app. I tried Payara MicroProfile 164 from the main downlaods page, but it has issues running the WAR.  The prerelease seems stable while running this project.  See the following link and download JAR named "Payara-Micro (Web Profile Implementation)": [http://www.payara.fish/upstream\_builds](http://www.payara.fish/upstream_builds)               Copy the JAR to the Raspberry Pi.  It is used later in the project. Here is a local copy of the Payara JAR, in case the specific version used in this project is not available for some reason. [payara-micro-prerelease-2016-11-24.jar](https://cdn-learn.adafruit.com/assets/assets/000/037/927/original/payara-micro-prerelease-2016-11-24.jar?1481233651) The following command can be used to download the local copy of JAR file. ``` $ wget https://cdn-learn.adafruit.com/assets/assets/000/037/927/original/payara-micro-prerelease-2016-11-24.jar ``` # Raspberry Pi RGB LED Matrix Webapp ## Software This application is packaged as a JEE WAR file. The Payara JAR downloaded in the previous section is used to run the appication WAR. Download/copy the WAR to the Raspberry Pi. [rpi-rgb-led-matrix-webapp-0.0.1-SNAPSHOT.war](https://cdn-learn.adafruit.com/assets/assets/000/040/940/original/rpi-rgb-led-matrix-webapp-0.0.1-SNAPSHOT.war?1492696525) ``` $ wget https://cdn-learn.adafruit.com/assets/assets/000/040/940/original/rpi-rgb-led-matrix-webapp-0.0.1-SNAPSHOT.war ``` # Raspberry Pi RGB LED Matrix Webapp ## Running the Application Change directory (cd) into the directory where the Payara JAR and WAR file were downloaded. To run the Raspberry Pi RGB LED matrix Web application, issue this command: ``` $ java -jar payara-micro-prerelease-2016-11-24.jar --deploy rpi-rgb-led-matrix-webapp-0.0.1-SNAPSHOT.war ``` A bunch of expected log messages are printed to the console as the Web server for the applcation starts.  You may even see a Java VM error about "UseCompressedOops" that is safely ignored. After about 3-4 minutes (once the server initializes), the application is available at the following URL: ``` http://raspberry-pi:8080/rpi-rgb-led-matrix-webapp-0.0.1-SNAPSHOT/ ``` # Raspberry Pi RGB LED Matrix Webapp ## Usage Here is a screen shot of the Web application page for animations, after a few animations have been added: ![](https://cdn-learn.adafruit.com/assets/assets/000/037/928/medium800/led_matrix_animations-page-capture.png?1481235055) Initially there are no available animations :( But the good news is that Webapp allows the user to upload their own animations! Just use the file selector and upload button.  The animation uploads are saved to the Raspberry Pi SD card. The same applies for the Still Images page! The Scrolling Text page has an input component to specify the text to scroll on the RGB LED panel.  If you prefer to customize the installation, then see the Settings page. # Raspberry Pi RGB LED Matrix Webapp ## Sample Images and Animations [Another RGB LED matrix project](../../../../web-enabled-pixel-on-raspberry-pi/) I love working on is PIXEL, from Al Linke. That project has tons and tons of sample still images and animation art. And he gave permission to use that art with this project! Sample Art: - [PIXEL sample images](https://github.com/alinke/PIXEL/tree/master/pixel-web-enabled/src/main/resources/stills) - [PIXEL sample animations](https://github.com/alinke/PIXEL/tree/master/pixel-web-enabled/src/main/resources/animations/gifsource) # Raspberry Pi RGB LED Matrix Webapp ## Resources - [Webapp Source Code](https://github.com/onebeartoe/electronics/tree/master/rpi-rgb-led-matrix-webapp) - The software (and hardware) for this project is open source. - [Continuous Integration Server](https://onebeartoe.ci.cloudbees.com/job/electronics/ws/rpi-rgb-led-matrix-webapp/target/) - The development builds of the Web app are available too. - hzeller's rpi-rgb-led-matrix on Github - This great library is the software that drives the RGB LED panels. - [Utils](https://github.com/hzeller/rpi-rgb-led-matrix/tree/master/utils)([led-image-viewer](https://github.com/hzeller/rpi-rgb-led-matrix/blob/master/utils/led-image-viewer.cc "led-image-viewer.cc")) - [Python Samples (scrolling text)](https://github.com/hzeller/rpi-rgb-led-matrix/tree/master/python/samples "Python Samples (scrolling text)") - [Frederick Vandenbosch Pi Zero Project](http://frederickvandenbosch.be/?p=2079) - I was late to the game and found out about rpi-rgb-led-matrix library from Frederick's project. - [Payara JEE on Raspberry Pi Guide](http://blog.payara.fish/running-java-ee-applications-with-payara-micro-on-the-raspberry-pi) - [Tony DiCola's deep dive guide to the RGB LED matrx HAT and related software](../../../../raspberry-pi-led-matrix-display)   # Raspberry Pi RGB LED Matrix Webapp ## Going Further The software for this project is open source.  Try adding a  feature. Possible features that come to mind are: - change scrolling text properties; color, speed, font - analog clock - current time as scrolling text ## Featured Products ### Pi Powered Times Square Traveler Pack [Pi Powered Times Square Traveler Pack](https://www.adafruit.com/product/3273) Some people might want to make the trek to NYC. But for those who want to skip out on the crowds and the cold, why not bring a little bit of the Big Apple into your home with this Times Square Traveler Pack? These screens are the very same that line the billboards of NYC. With... No Longer Stocked [Buy Now](https://www.adafruit.com/product/3273) [Related Guides to the Product](https://learn.adafruit.com/products/3273/guides) ### Adafruit RGB Matrix HAT + RTC for Raspberry Pi - Mini Kit [Adafruit RGB Matrix HAT + RTC for Raspberry Pi - Mini Kit](https://www.adafruit.com/product/2345) You can now create a dazzling display with your Raspberry Pi Model Zero/A+/B+/Pi 2/3/Pi 4 with the Adafruit RGB Matrix HAT. This HAT plugs into your Pi and makes it super easy to control RGB matrices such as those we stock in the shop and create a colorful scrolling display or mini LED... In Stock [Buy Now](https://www.adafruit.com/product/2345) [Related Guides to the Product](https://learn.adafruit.com/products/2345/guides) ### 5V 2A (2000mA) switching power supply - UL Listed [5V 2A (2000mA) switching power supply - UL Listed](https://www.adafruit.com/product/276) This is an FCC/CE certified and UL listed power supply. Need a lot of 5V power? This switching supply gives a clean regulated 5V output at up to 2000mA. 110 or 240 input, so it works in any country. The plugs are "US 2-prong" style so you may need a plug adapter, but you can pick one... In Stock [Buy Now](https://www.adafruit.com/product/276) [Related Guides to the Product](https://learn.adafruit.com/products/276/guides) ### 5V 4A (4000mA) switching power supply - UL Listed [5V 4A (4000mA) switching power supply - UL Listed](https://www.adafruit.com/product/1466) Need a lot of 5V power? This switching supply gives a clean regulated 5V output at up to **4 Amps** (4000mA). 110 or 240 input, so it works in any country. The plugs are "US 2-prong" style so you may need a plug adapter, but you can pick one up at any hardware store for $1 or so,... In Stock [Buy Now](https://www.adafruit.com/product/1466) [Related Guides to the Product](https://learn.adafruit.com/products/1466/guides) ### 32x32 RGB LED Matrix Panel - 6mm pitch [32x32 RGB LED Matrix Panel - 6mm pitch](https://www.adafruit.com/product/1484) Bring a little bit of Times Square into your home with this sweet 32 x 32 square RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them on the sides of busses and bus stops, to display animations or short video clips. We thought they looked... In Stock [Buy Now](https://www.adafruit.com/product/1484) [Related Guides to the Product](https://learn.adafruit.com/products/1484/guides) ### 32x32 RGB LED Matrix Panel - 5mm Pitch [32x32 RGB LED Matrix Panel - 5mm Pitch](https://www.adafruit.com/product/2026) Bring a little bit of Times Square into your home with this sweet 32 x 32 square RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them on the sides of busses and bus stops, to display animations or short video clips. We thought they looked... In Stock [Buy Now](https://www.adafruit.com/product/2026) [Related Guides to the Product](https://learn.adafruit.com/products/2026/guides) ### 32x32 RGB LED Matrix Panel - 4mm Pitch [32x32 RGB LED Matrix Panel - 4mm Pitch](https://www.adafruit.com/product/607) Bring a little bit of Times Square into your home with this totally adorable 5 inch square 32 x 32 RGB LED matrix panel. These panels are normally used to make video walls, here in New York we see them on the sides of busses and bus stops, to display animations or short video clips. We thought... In Stock [Buy Now](https://www.adafruit.com/product/607) [Related Guides to the Product](https://learn.adafruit.com/products/607/guides) ## Related Guides - [Raspberry Pi LED Matrix Display](https://learn.adafruit.com/raspberry-pi-led-matrix-display.md) - [RGB Matrix Panels With Raspberry Pi 5](https://learn.adafruit.com/rgb-matrix-panels-with-raspberry-pi-5.md) - [Adafruit RGB Matrix + Real Time Clock HAT for Raspberry Pi](https://learn.adafruit.com/adafruit-rgb-matrix-plus-real-time-clock-hat-for-raspberry-pi.md) - [NextBus transit clock for Raspberry Pi](https://learn.adafruit.com/nextbus-transit-clock-for-raspberry-pi.md) - [Program an AVR or Arduino Using Raspberry Pi GPIO](https://learn.adafruit.com/program-an-avr-or-arduino-using-raspberry-pi-gpio-pins.md) - [Smart Bathroom App](https://learn.adafruit.com/smart-bathroom-app.md) - [Adafruit WebIDE](https://learn.adafruit.com/webide.md) - [Cloud Cam: Internet-Connected Security Camera](https://learn.adafruit.com/cloud-cam-connected-raspberry-pi-security-camera.md) - [Wood Case for Raspberry Pi 3](https://learn.adafruit.com/wood-case-for-raspberry-pi-3.md) - [TIMESQUARE Watch Kit](https://learn.adafruit.com/timesquare-watch-kit.md) - [Large Pi-based Thermometer and Clock](https://learn.adafruit.com/large-pi-based-thermometer-and-clock.md) - [LED Drone Matrix](https://learn.adafruit.com/led-matrix-drone.md) - [DIY WiFi Raspberry Pi Touchscreen Camera](https://learn.adafruit.com/diy-wifi-raspberry-pi-touch-cam.md) - [Raspberry Pi Thermal Printer One Time Pads](https://learn.adafruit.com/raspberry-pi-thermal-printer-one-time-pads.md) - [NeoPixel Matrix Snowflake Sweater](https://learn.adafruit.com/neopixel-matrix-snowflake-sweater.md)