Movie Poster Come to Life with React, Node, Raspberry Pi and More!
By Jack Herrington
Key Concepts:
- Two-sided posters for light transmission
- WS2812 individually addressable LEDs
- Raspberry Pi as a controller
- Node.js Express REST API
- V application for user interface
- Image processing via Photoshop and pixel averaging
- Bonjour for local network discovery
- Nginx server for serving the V app
1. Project Overview and Motivation
- The project is a custom-built, illuminated poster display using programmable LEDs.
- The creator has been working on it for about a month, involving woodworking, Raspberry Pi integration, and LED programming.
- The goal was to create a dynamic display that could be controlled remotely and display various patterns and images.
2. Hardware Components
- Posters: Requires two-sided posters, printed on both sides, to allow light to pass through. These are similar to those used in movie theaters with light boxes.
- LEDs: Uses WS2812 individually addressable LEDs arranged in strips. This allows for precise color control of each LED.
- Raspberry Pi: Acts as the central controller, running a Node.js Express server to manage the LEDs and provide a REST API.
3. Software Architecture
- V Application: A custom-built user interface (UI) to control the LED display. It communicates with a REST backend on the Raspberry Pi.
- REST API (Node.js Express): The Raspberry Pi runs a Node.js Express server that exposes a REST API. This API allows the V app (or any other client) to control the LEDs.
- WS2812 Drivers: The Node.js application uses WS2812 drivers to control the LEDs. The creator mentions having to modify the drivers to work correctly, as the existing ones didn't work out of the box.
- Image Processing: The system takes images from the clipboard, resizes them, and averages the pixel colors to map them to the 28x18 LED matrix.
- Nginx: An Nginx server is used to serve the V app from the Raspberry Pi on port 80.
- Bonjour: Bonjour is implemented to allow easy access to the V app via
posterlights.local
on the local network.
4. Image Processing Methodology
- The creator uses Photoshop to create images with the same aspect ratio as the LED matrix (28x18).
- Images are designed in Photoshop with desired colors and patterns.
- The image is copied to the clipboard and pasted into the V application.
- The V application then processes the image, averaging the colors of the pixels to map them to the LED matrix.
- The processed image data is sent as a JSON blob to the Raspberry Pi's REST endpoint.
5. Step-by-Step Process
- Image Creation: Design an image in Photoshop with the desired colors and patterns, ensuring it has the correct aspect ratio.
- Clipboard Copy: Copy the merged image to the clipboard.
- V Application Paste: Paste the image into the V application.
- Pixel Averaging: The V application averages the colors of the image pixels to map them to the LED matrix.
- JSON Transmission: The processed image data is sent as a JSON blob to the Raspberry Pi's REST endpoint.
- LED Control: The Raspberry Pi receives the JSON data and uses the WS2812 drivers to set the colors of the LEDs accordingly.
6. User Interface (V Application) Functionality
- The V application allows the user to:
- Turn the display on and off.
- Set all LEDs to a single color (e.g., white).
- Create color gradients (e.g., top-down vertical fade).
- Select from predefined color presets (e.g., blues, Borderlands theme).
- Display custom images processed from the clipboard.
7. Networking and Accessibility
- The Raspberry Pi hosts the V application and the REST API.
- Nginx serves the V application on port 80.
- Bonjour allows the application to be accessed via
posterlights.local
on the local network. - The REST API allows for remote control of the display, including turning it on/off via phone or scripts.
8. Challenges and Future Improvements
- The creator encountered issues with the WS2812 drivers and had to modify them to work correctly.
- There were some color translation issues, specifically with the red color not displaying correctly. The creator plans to investigate and fix this issue.
9. Notable Quotes
- "One of the most important things about this particular type of poster setup is you have to get the the two-sided posters...so that the light can actually come through them."
- "I'm kind of lazy I didn't want to go and build out a way to actually like draw on this...so instead I just used photos shop."
10. Synthesis/Conclusion
The poster project is a successful integration of hardware and software, combining woodworking, electronics, and programming. It demonstrates a practical application of individually addressable LEDs controlled by a Raspberry Pi via a custom V application and REST API. The project leverages image processing techniques to map images to the LED matrix, providing a dynamic and customizable display. While there were some challenges with drivers and color accuracy, the project showcases the creator's skills and creativity in building a unique and functional piece of art. The use of standard technologies like Node.js, Express, Nginx, and Bonjour makes the project accessible and maintainable.
Chat with this Video
AI-PoweredHi! I can answer questions about this video "Movie Poster Come to Life with React, Node, Raspberry Pi and More!". What would you like to know?