rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-04-10 21:03:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

set web ui v2 to be default

Browse Source
This commit is contained in:
Chuck
2025-08-10 17:18:59 -05:00
parent 6ff8d8b5af
commit ede82406fa
10 changed files with 52 additions and 966 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
README.md
View File

@@ -1,5 +1,5 @@
# LEDMatrix # LEDMatrix
An LED matrix display system that provides real-time information display capabilities for various data sources. The system is highly configurable and supports multiple display modes that can be enabled or disabled based on user preferences.
### Setup video and feature walkthrough on Youtube : ### Setup video and feature walkthrough on Youtube :
[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/_HaqfJy1Y54/0.jpg)](https://www.youtube.com/watch?v=_HaqfJy1Y54) [![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/_HaqfJy1Y54/0.jpg)](https://www.youtube.com/watch?v=_HaqfJy1Y54)
@@ -1074,8 +1074,8 @@ The LEDMatrix system includes a robust caching mechanism to optimize API calls a
##What's Next? ##What's Next?
- Adding MQTT/HomeAssistant integration - Adding MQTT/HomeAssistant integration
- Gambling odds? - Gambling odds (done!)
- Building a user-friendly UI for easier configuration - Building a user-friendly UI for easier configuration (done!)
### If you've read this far — thanks! ### If you've read this far — thanks!
@@ -1131,3 +1131,39 @@ The web interface needs to run certain commands with `sudo` (e.g., `reboot`, `sy
**Security Considerations:** **Security Considerations:**
Granting passwordless `sudo` access, even for specific commands, has security implications. Ensure that the scripts and commands allowed are secure and cannot be easily exploited. The web interface itself should also be secured if it's exposed to untrusted networks. Granting passwordless `sudo` access, even for specific commands, has security implications. Ensure that the scripts and commands allowed are secure and cannot be easily exploited. The web interface itself should also be secured if it's exposed to untrusted networks.
For `display_controller.py` and `stop_display.sh`, ensure their file permissions restrict write access to only trusted users, preventing unauthorized modification of these scripts which run with elevated privileges. For `display_controller.py` and `stop_display.sh`, ensure their file permissions restrict write access to only trusted users, preventing unauthorized modification of these scripts which run with elevated privileges.
## Web Interface V2 (simplified quick start)
### 1) Create and populate the venv (recommended)
```
cd /home/ledpi/LEDMatrix
python3 -m venv venv_web_v2
source venv_web_v2/bin/activate
pip install -r requirements_web_v2.txt
pip install -e rpi-rgb-led-matrix-master/bindings/python
```
Alternatively, run the helper (does the above and starts the server):
```
python3 start_web_v2.py
```
### 2) Start the web UI v2
```
source venv_web_v2/bin/activate
python web_interface_v2.py
```
### 3) Autostart (optional)
Set `"web_display_autostart": true` in `config/config.json`.
Ensure your systemd service (or launcher) calls `start_web_conditionally.py`.
It will prefer `venv_web_v2/bin/python` if present.
### 4) Permissions (optional but recommended)
- Add the service user to `systemd-journal` for viewing logs without sudo.
- Configure passwordless sudo for actions (start/stop service, reboot, shutdown) if desired.
### 5) Old web UI (v1)
The project now defaults to Web UI v2. The v1 interface can be removed or ignored.
An LED matrix display system that provides real-time information display capabilities for various data sources. The system is highly configurable and supports multiple display modes that can be enabled or disabled based on user preferences.

218
WEB_INTERFACE_README.md
View File

@@ -1,218 +0,0 @@
# LED Matrix Web Interface
A user-friendly web interface for configuring the LED Matrix display system. This interface replaces raw JSON editing with intuitive forms, toggles, and dropdowns to prevent configuration errors.
## Features
### 🎛️ **Form-Based Configuration**
- **Toggles**: Easy on/off switches for enabling features
- **Dropdowns**: Predefined options for hardware settings
- **Input Fields**: Validated text and number inputs
- **Descriptions**: Helpful tooltips explaining each setting
### 📱 **Organized Tabs**
1. **Schedule**: Set display on/off times
2. **Display Settings**: Hardware configuration (rows, columns, brightness, etc.)
3. **Sports**: Configure favorite teams for MLB, NFL, NBA
4. **Weather**: Location and weather display settings
5. **Stocks & Crypto**: Stock symbols and cryptocurrency settings
6. **Music**: Music source configuration (YouTube Music, Spotify)
7. **Calendar**: Google Calendar integration settings
8. **API Keys**: Secure storage for service API keys
9. **Actions**: System control (start/stop display, reboot, etc.)
### 🔒 **Security Features**
- Password fields for API keys
- Secure form submission
- Input validation
- Error handling with user-friendly messages
### 🎨 **Modern UI**
- Responsive design
- Clean, professional appearance
- Intuitive navigation
- Visual feedback for actions
## Getting Started
### Prerequisites
- Python 3.7+
- Flask
- LED Matrix system running on Raspberry Pi
### Installation
1. **Install Dependencies**
```bash
pip install flask requests
```
2. **Start the Web Interface**
```bash
python3 web_interface.py
```
3. **Access the Interface**
- Open a web browser
- Navigate to: `http://[PI_IP_ADDRESS]:5000`
- Example: `http://192.168.1.100:5000`
## Configuration Guide
### Schedule Tab
Configure when the display should be active:
- **Enable Schedule**: Toggle to turn automatic scheduling on/off
- **Display On Time**: When the display should turn on (24-hour format)
- **Display Off Time**: When the display should turn off (24-hour format)
### Display Settings Tab
Configure the LED matrix hardware:
- **Rows**: Number of LED rows (typically 32)
- **Columns**: Number of LED columns (typically 64)
- **Chain Length**: Number of LED panels chained together
- **Parallel**: Number of parallel chains
- **Brightness**: LED brightness (1-100)
- **Hardware Mapping**: Type of LED matrix hardware
- **GPIO Slowdown**: GPIO slowdown factor (0-5)
### Sports Tab
Configure sports team preferences:
- **Enable Leagues**: Toggle MLB, NFL, NBA on/off
- **Favorite Teams**: Enter team abbreviations (e.g., "TB, DAL")
- **Team Examples**:
- MLB: TB (Tampa Bay), TEX (Texas)
- NFL: TB (Tampa Bay), DAL (Dallas)
- NBA: DAL (Dallas), BOS (Boston)
### Weather Tab
Configure weather display settings:
- **Enable Weather**: Toggle weather display on/off
- **City**: Your city name
- **State**: Your state/province
- **Units**: Fahrenheit or Celsius
- **Update Interval**: How often to update weather data (seconds)
### Stocks & Crypto Tab
Configure financial data display:
- **Enable Stocks**: Toggle stock display on/off
- **Stock Symbols**: Enter symbols (e.g., "AAPL, GOOGL, MSFT")
- **Enable Crypto**: Toggle cryptocurrency display on/off
- **Crypto Symbols**: Enter symbols (e.g., "BTC-USD, ETH-USD")
- **Update Interval**: How often to update data (seconds)
### Music Tab
Configure music display settings:
- **Enable Music Display**: Toggle music display on/off
- **Preferred Source**: YouTube Music or Spotify
- **YouTube Music Companion URL**: URL for YTM companion app
- **Polling Interval**: How often to check for music updates (seconds)
### Calendar Tab
Configure Google Calendar integration:
- **Enable Calendar**: Toggle calendar display on/off
- **Max Events**: Maximum number of events to display
- **Update Interval**: How often to update calendar data (seconds)
- **Calendars**: Comma-separated calendar names
### API Keys Tab
Securely store API keys for various services:
- **Weather API**: OpenWeatherMap API key
- **YouTube API**: YouTube API key and channel ID
- **Spotify API**: Client ID, Client Secret, and Redirect URI
### Actions Tab
Control the LED Matrix system:
- **Start Display**: Start the LED display service
- **Stop Display**: Stop the LED display service
- **Enable Auto-Start**: Enable automatic startup on boot
- **Disable Auto-Start**: Disable automatic startup
- **Reboot System**: Restart the Raspberry Pi
- **Download Latest Update**: Pull latest code from Git
## API Keys Setup
### OpenWeatherMap API
1. Go to [OpenWeatherMap](https://openweathermap.org/api)
2. Sign up for a free account
3. Get your API key
4. Enter it in the Weather API section
### YouTube API
1. Go to [Google Cloud Console](https://console.developers.google.com/)
2. Create a new project
3. Enable YouTube Data API v3
4. Create credentials (API key)
5. Enter the API key and your channel ID
### Spotify API
1. Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
2. Create a new app
3. Get your Client ID and Client Secret
4. Set the Redirect URI to: `http://127.0.0.1:8888/callback`
## Testing
Run the test script to verify the web interface is working:
```bash
python3 test_web_interface.py
```
## Troubleshooting
### Common Issues
1. **Web interface not accessible**
- Check if the service is running: `python3 web_interface.py`
- Verify the IP address and port
- Check firewall settings
2. **Configuration not saving**
- Check file permissions on config files
- Verify JSON syntax in logs
- Ensure config directory exists
3. **Actions not working**
- Check if running on Raspberry Pi
- Verify sudo permissions
- Check system service status
### Error Messages
- **"Invalid JSON format"**: Check the configuration syntax
- **"Permission denied"**: Run with appropriate permissions
- **"Connection refused"**: Check if the service is running
## File Structure
```
LEDMatrix/
├── web_interface.py # Main Flask application
├── templates/
│ └── index.html # Web interface template
├── config/
│ ├── config.json # Main configuration
│ └── config_secrets.json # API keys (secure)
└── test_web_interface.py # Test script
```
## Security Notes
- API keys are stored securely in `config_secrets.json`
- The web interface runs on port 5000 by default
- Consider using HTTPS in production
- Regularly update API keys and credentials
## Contributing
When adding new configuration options:
1. Update the HTML template with appropriate form fields
2. Add JavaScript handlers for form submission
3. Update the Flask backend to handle new fields
4. Add validation and error handling
5. Update this documentation
## License
This project is part of the LED Matrix display system.

326
WEB_INTERFACE_V2_README.md
View File

@@ -1,326 +0,0 @@
# LED Matrix Web Interface V2
A modern, lightweight, and feature-rich web interface for controlling and customizing your LED Matrix display. This interface provides real-time display monitoring, drag-and-drop layout editing, and comprehensive system management.
## Features
### 🖥️ Real-Time Display Preview
- Live display monitoring with WebSocket connectivity
- Scaled-up preview for better visibility
- Real-time updates as content changes
- Screenshot capture functionality
### ✏️ Display Editor Mode
- **Drag-and-drop interface** for creating custom layouts
- **Element palette** with text, weather icons, shapes, and more
- **Properties panel** for fine-tuning element appearance
- **Real-time preview** of changes
- **Save/load custom layouts** for reuse
### 📊 System Monitoring
- **Real-time system stats** (CPU temperature, memory usage, uptime)
- **Service status monitoring**
- **Performance metrics** with visual indicators
- **Connection status** indicator
### ⚙️ Configuration Management
- **Modern tabbed interface** for easy navigation
- **Real-time configuration updates**
- **Visual controls** (sliders, toggles, dropdowns)
- **Instant feedback** on changes
### 🎨 Modern UI Design
- **Responsive design** that works on desktop and mobile
- **Dark/light theme support**
- **Smooth animations** and transitions
- **Professional card-based layout**
- **Color-coded status indicators**
## Installation
### Prerequisites
- Python 3.7+
- LED Matrix hardware properly configured
- Existing LED Matrix project setup
### Quick Setup
1. **Install dependencies:**
```bash
pip install -r requirements_web_v2.txt
```
2. **Make the startup script executable:**
```bash
chmod +x start_web_v2.py
```
3. **Start the web interface:**
```bash
python3 start_web_v2.py
```
4. **Access the interface:**
Open your browser and navigate to `http://your-pi-ip:5001`
### Advanced Setup
For production use, you can set up the web interface as a systemd service:
1. **Create a service file:**
```bash
sudo nano /etc/systemd/system/ledmatrix-web.service
```
2. **Add the following content:**
```ini
[Unit]
Description=LED Matrix Web Interface V2
After=network.target
[Service]
Type=simple
User=pi
WorkingDirectory=/home/pi/LEDMatrix
ExecStart=/usr/bin/python3 /home/pi/LEDMatrix/start_web_v2.py
Restart=always
RestartSec=10
[Install]
WantedBy=multi-user.target
```
3. **Enable and start the service:**
```bash
sudo systemctl enable ledmatrix-web
sudo systemctl start ledmatrix-web
```
## Usage Guide
### Getting Started
1. **Connect to your display:**
- The interface will automatically attempt to connect to your LED matrix
- Check the connection status indicator in the bottom-right corner
2. **Monitor your system:**
- View real-time system stats in the header
- Check service status and performance metrics in the Overview tab
3. **Control your display:**
- Use the Start/Stop buttons to control display operation
- Take screenshots for documentation or troubleshooting
### Using the Display Editor
1. **Enter Editor Mode:**
- Click the "Enter Editor" button to pause normal display operation
- The display will switch to editor mode, allowing you to customize layouts
2. **Add Elements:**
- Drag elements from the palette onto the display preview
- Elements will appear where you drop them
- Click on elements to select and edit their properties
3. **Customize Elements:**
- Use the Properties panel to adjust position, color, text, and other settings
- Changes are reflected in real-time on the display
4. **Save Your Layout:**
- Click "Save Layout" to store your custom design
- Layouts are saved locally and can be reloaded later
### Element Types
#### Text Elements
- **Static text:** Display fixed text with custom positioning and colors
- **Data-driven text:** Display dynamic data using template variables
- **Clock elements:** Show current time with customizable formats
#### Visual Elements
- **Weather icons:** Display weather conditions with various icon styles
- **Rectangles:** Create borders, backgrounds, or decorative elements
- **Lines:** Add separators or decorative lines
#### Advanced Elements
- **Data text:** Connect to live data sources (weather, stocks, etc.)
- **Template text:** Use variables like `{weather.temperature}` in text
### Configuration Management
#### Display Settings
- **Brightness:** Adjust LED brightness (1-100%)
- **Schedule:** Set automatic on/off times
- **Hardware settings:** Configure matrix dimensions and timing
#### System Management
- **Service control:** Start, stop, or restart the LED matrix service
- **System updates:** Pull latest code from git repository
- **Log viewing:** Access system logs for troubleshooting
- **System reboot:** Safely restart the system
## API Reference
The web interface provides a REST API for programmatic control:
### Display Control
- `POST /api/display/start` - Start the display
- `POST /api/display/stop` - Stop the display
- `GET /api/display/current` - Get current display image
### Editor Mode
- `POST /api/editor/toggle` - Toggle editor mode
- `POST /api/editor/preview` - Update preview with layout
### Configuration
- `POST /api/config/save` - Save configuration changes
- `GET /api/system/status` - Get system status
### System Actions
- `POST /api/system/action` - Execute system actions
## Customization
### Creating Custom Layouts
Layouts are stored as JSON files with the following structure:
```json
{
"layout_name": {
"elements": [
{
"type": "text",
"x": 10,
"y": 10,
"properties": {
"text": "Hello World",
"color": [255, 255, 255],
"font_size": "normal"
}
}
],
"description": "Layout description",
"created": "2024-01-01T00:00:00",
"modified": "2024-01-01T00:00:00"
}
}
```
### Adding Custom Element Types
You can extend the layout manager to support custom element types:
1. **Add the element type to the palette** in `templates/index_v2.html`
2. **Implement the rendering logic** in `src/layout_manager.py`
3. **Update the properties panel** to support element-specific settings
### Theming
The interface uses CSS custom properties for easy theming. Modify the `:root` section in the HTML template to change colors:
```css
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #e74c3c;
/* ... more color variables */
}
```
## Troubleshooting
### Common Issues
1. **Connection Failed:**
- Check that the LED matrix hardware is properly connected
- Verify that the display service is running
- Check firewall settings on port 5001
2. **Editor Mode Not Working:**
- Ensure you have proper permissions to control the display
- Check that the display manager is properly initialized
- Review logs for error messages
3. **Performance Issues:**
- Monitor system resources in the Overview tab
- Reduce display update frequency if needed
- Check for memory leaks in long-running sessions
### Getting Help
1. **Check the logs:**
- Use the "View Logs" button in the System tab
- Check `/tmp/web_interface_v2.log` for detailed error messages
2. **System status:**
- Monitor the system stats for resource usage
- Check service status indicators
3. **Debug mode:**
- Set `debug=True` in `web_interface_v2.py` for detailed error messages
- Use browser developer tools to check for JavaScript errors
## Performance Considerations
### Raspberry Pi Optimization
The interface is designed to be lightweight and efficient for Raspberry Pi:
- **Minimal resource usage:** Uses efficient WebSocket connections
- **Optimized image processing:** Scales images appropriately for web display
- **Caching:** Reduces unnecessary API calls and processing
- **Background processing:** Offloads heavy operations to background threads
### Network Optimization
- **Compressed data transfer:** Uses efficient binary protocols where possible
- **Selective updates:** Only sends changed data to reduce bandwidth
- **Connection management:** Automatic reconnection on network issues
## Security Considerations
- **Local network only:** Interface is designed for local network access
- **Sudo permissions:** Some system operations require sudo access
- **File permissions:** Ensure proper permissions on configuration files
- **Firewall:** Consider firewall rules for port 5001
## Future Enhancements
Planned features for future releases:
- **Multi-user support** with role-based permissions
- **Plugin system** for custom element types
- **Animation support** for dynamic layouts
- **Mobile app** companion
- **Cloud sync** for layout sharing
- **Advanced scheduling** with conditional logic
- **Integration APIs** for smart home systems
## Contributing
We welcome contributions! Please:
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly on Raspberry Pi hardware
5. Submit a pull request
## License
This project is licensed under the MIT License. See the LICENSE file for details.
## Support
For support and questions:
- Check the troubleshooting section above
- Review the system logs
- Open an issue on the project repository
- Join the community discussions
---
**Enjoy your new modern LED Matrix web interface!** 🎉

233
WEB_INTERFACE_V2_SUMMARY.md
View File

@@ -1,233 +0,0 @@
# LED Matrix Web Interface V2 - Implementation Summary
## 🎯 Project Overview
I have successfully created a **modern, sleek, and lightweight web interface** for your LED Matrix display that transforms how you interact with and customize your display. This new interface addresses all your requirements while being optimized for Raspberry Pi performance.
## 🚀 Key Achievements
### ✅ Modern & Sleek Design
- **Professional UI** with gradient backgrounds and card-based layout
- **Responsive design** that works on desktop, tablet, and mobile
- **Smooth animations** and hover effects for better user experience
- **Color-coded status indicators** for instant visual feedback
- **Dark theme** optimized for LED matrix work
### ✅ Real-Time Display Preview
- **Live WebSocket connection** shows exactly what your display is showing
- **4x scaled preview** for better visibility of small LED matrix content
- **Real-time updates** - see changes instantly as they happen
- **Screenshot capture** functionality for documentation and sharing
### ✅ Display Editor Mode
- **"Display Editor Mode"** that stops normal operation for customization
- **Drag-and-drop interface** - drag elements directly onto the display preview
- **Element palette** with text, weather icons, rectangles, lines, and more
- **Properties panel** for fine-tuning position, color, size, and content
- **Real-time preview** - changes appear instantly on the actual LED matrix
- **Save/load custom layouts** for reuse and personalization
### ✅ Comprehensive System Management
- **Real-time system monitoring** (CPU temp, memory usage, uptime)
- **Service status indicators** with visual health checks
- **One-click system actions** (restart service, git pull, reboot)
- **Web-based log viewing** - no more SSH required
- **Performance metrics** dashboard
### ✅ Lightweight & Efficient
- **Optimized for Raspberry Pi** with minimal resource usage
- **Background threading** to prevent UI blocking
- **Efficient WebSocket communication** with 10fps update rate
- **Smart caching** to reduce unnecessary processing
- **Graceful error handling** with user-friendly messages
## 📁 Files Created
### Core Web Interface
- **`web_interface_v2.py`** - Main Flask application with WebSocket support
- **`templates/index_v2.html`** - Modern HTML template with advanced JavaScript
- **`start_web_v2.py`** - Startup script with dependency checking
- **`requirements_web_v2.txt`** - Python dependencies
### Layout System
- **`src/layout_manager.py`** - Custom layout creation and management system
- **`config/custom_layouts.json`** - Storage for user-created layouts (auto-created)
### Documentation & Demo
- **`WEB_INTERFACE_V2_README.md`** - Comprehensive user documentation
- **`demo_web_v2_simple.py`** - Feature demonstration script
- **`WEB_INTERFACE_V2_SUMMARY.md`** - This implementation summary
## 🎨 Display Editor Features
### Element Types Available
1. **Text Elements** - Static or template-driven text with custom fonts and colors
2. **Weather Icons** - Dynamic weather condition icons that update with real data
3. **Rectangles** - For borders, backgrounds, or decorative elements
4. **Lines** - Separators and decorative lines with custom width and color
5. **Clock Elements** - Real-time clock with customizable format strings
6. **Data Text** - Dynamic text connected to live data sources (weather, stocks, etc.)
### Editing Capabilities
- **Drag-and-drop positioning** - Place elements exactly where you want them
- **Real-time property editing** - Change colors, text, size, position instantly
- **Visual feedback** - See changes immediately on the actual LED matrix
- **Layout persistence** - Save your designs and load them later
- **Preset layouts** - Pre-built layouts for common use cases
## 🌐 Web Interface Features
### Main Dashboard
- **Live display preview** in the center with real-time updates
- **System status bar** showing CPU temp, memory usage, service status
- **Control buttons** for start/stop, editor mode, screenshots
- **Tabbed interface** for organized access to all features
### Configuration Management
- **Visual controls** - sliders for brightness, toggles for features
- **Real-time updates** - changes apply immediately without restart
- **Schedule management** - set automatic on/off times
- **Hardware settings** - adjust matrix parameters visually
### System Monitoring
- **Performance dashboard** with key metrics
- **Service health indicators** with color-coded status
- **Log viewer** accessible directly in the browser
- **System actions** - restart, update, reboot with one click
## 🔌 API Endpoints
### Display Control
- `POST /api/display/start` - Start LED matrix display
- `POST /api/display/stop` - Stop LED matrix display
- `GET /api/display/current` - Get current display as base64 image
### Editor Mode
- `POST /api/editor/toggle` - Enter/exit display editor mode
- `POST /api/editor/preview` - Update preview with custom layout
### Configuration
- `POST /api/config/save` - Save configuration changes
- `GET /api/system/status` - Get real-time system status
### System Management
- `POST /api/system/action` - Execute system commands
- `GET /logs` - View system logs in browser
## 🚀 Getting Started
### Quick Setup
```bash
# 1. Install dependencies
pip install -r requirements_web_v2.txt
# 2. Make startup script executable
chmod +x start_web_v2.py
# 3. Start the web interface
python3 start_web_v2.py
# 4. Open browser to http://your-pi-ip:5001
```
### Using the Editor
1. Click **"Enter Editor"** button to pause normal display operation
2. **Drag elements** from the palette onto the display preview
3. **Click elements** to select and edit their properties
4. **Customize** position, colors, text, and other properties
5. **Save your layout** for future use
6. **Exit editor mode** to return to normal operation
## 💡 Technical Implementation
### Architecture
- **Flask** web framework with **SocketIO** for real-time communication
- **WebSocket** connection for live display updates
- **Background threading** for display monitoring without blocking UI
- **PIL (Pillow)** for image processing and scaling
- **JSON-based** configuration and layout storage
### Performance Optimizations
- **Efficient image scaling** (4x) using nearest-neighbor for pixel art
- **10fps update rate** balances responsiveness with resource usage
- **Smart caching** prevents unnecessary API calls
- **Background processing** keeps UI responsive
- **Graceful degradation** when hardware isn't available
### Security & Reliability
- **Local network access** designed for home/office use
- **Proper error handling** with user-friendly messages
- **Automatic reconnection** on network issues
- **Safe system operations** with confirmation dialogs
- **Log rotation** to prevent disk space issues
## 🎉 Benefits Over Previous Interface
### For Users
- **No more SSH required** - everything accessible via web browser
- **See exactly what's displayed** - no more guessing
- **Visual customization** - drag-and-drop instead of code editing
- **Real-time feedback** - changes appear instantly
- **Mobile-friendly** - manage your display from phone/tablet
### For Troubleshooting
- **System health at a glance** - CPU temp, memory, service status
- **Web-based log access** - no need to SSH for troubleshooting
- **Performance monitoring** - identify issues before they cause problems
- **Screenshot capability** - document issues or share configurations
### For Customization
- **Visual layout editor** - design exactly what you want
- **Save/load layouts** - create multiple designs for different occasions
- **Template system** - connect to live data sources
- **Preset layouts** - start with proven designs
## 🔮 Future Enhancement Possibilities
The architecture supports easy extension:
- **Plugin system** for custom element types
- **Animation support** for dynamic layouts
- **Multi-user access** with role-based permissions
- **Cloud sync** for layout sharing
- **Mobile app** companion
- **Smart home integration** APIs
## 📊 Resource Usage
Designed to be lightweight alongside your LED matrix:
- **Memory footprint**: ~50-100MB (depending on layout complexity)
- **CPU usage**: <5% on Raspberry Pi 4 during normal operation
- **Network**: Minimal bandwidth usage with efficient WebSocket protocol
- **Storage**: <10MB for interface + user layouts
## ✅ Requirements Fulfilled
Your original requirements have been fully addressed:
1. ✅ **Modern, sleek, easy to understand** - Professional web interface with intuitive design
2. ✅ **Change all configuration settings** - Comprehensive visual configuration management
3. ✅ **Lightweight for Raspberry Pi** - Optimized performance with minimal resource usage
4. ✅ **See what display is showing** - Real-time preview with WebSocket updates
5. ✅ **Display editor mode** - Full drag-and-drop layout customization
6. ✅ **Stop display for editing** - Editor mode pauses normal operation
7. ✅ **Re-arrange objects** - Visual positioning with drag-and-drop
8. ✅ **Customize text, fonts, colors** - Comprehensive property editing
9. ✅ **Move team logos and layouts** - All elements can be repositioned
10. ✅ **Save customized displays** - Layout persistence system
## 🎯 Ready to Use
The LED Matrix Web Interface V2 is **production-ready** and provides:
- **Immediate value** - Better control and monitoring from day one
- **Growth potential** - Extensible architecture for future enhancements
- **User-friendly** - No technical knowledge required for customization
- **Reliable** - Robust error handling and graceful degradation
- **Efficient** - Optimized for Raspberry Pi performance
**Start transforming your LED Matrix experience today!**
```bash
python3 start_web_v2.py
```
Then open your browser to `http://your-pi-ip:5001` and enjoy your new modern interface! 🎉

73
run_web_v2_simple.py
View File

@@ -1,73 +0,0 @@
#!/usr/bin/env python3
"""
Simple runner for LED Matrix Web Interface V2
Handles virtual environment setup and dependency installation
"""
import os
import sys
import subprocess
import logging
from pathlib import Path
# Setup logging
logging.basicConfig(
level=logging.INFO,
format='%(asctime)s - %(levelname)s - %(message)s'
)
logger = logging.getLogger(__name__)
def main():
"""Main function to set up and run the web interface."""
# Change to script directory
script_dir = Path(__file__).parent
os.chdir(script_dir)
venv_path = script_dir / 'venv_web_v2'
# Create virtual environment if it doesn't exist
if not venv_path.exists():
logger.info("Creating virtual environment...")
subprocess.check_call([
sys.executable, '-m', 'venv', str(venv_path)
])
logger.info("Virtual environment created successfully")
# Get virtual environment Python and pip paths
if os.name == 'nt': # Windows
venv_python = venv_path / 'Scripts' / 'python.exe'
venv_pip = venv_path / 'Scripts' / 'pip.exe'
else: # Unix/Linux
venv_python = venv_path / 'bin' / 'python'
venv_pip = venv_path / 'bin' / 'pip'
# Always install dependencies to ensure everything is up to date
logger.info("Installing dependencies...")
try:
subprocess.check_call([
str(venv_pip), 'install', '-r', 'requirements_web_v2.txt'
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
logger.info("Dependencies installed successfully")
except subprocess.CalledProcessError as e:
logger.error(f"Failed to install dependencies: {e}")
return
# Install rgbmatrix module from local source
logger.info("Installing rgbmatrix module...")
try:
rgbmatrix_path = script_dir / 'rpi-rgb-led-matrix-master' / 'bindings' / 'python'
subprocess.check_call([
str(venv_pip), 'install', '-e', str(rgbmatrix_path)
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
logger.info("rgbmatrix module installed successfully")
except subprocess.CalledProcessError as e:
logger.error(f"Failed to install rgbmatrix module: {e}")
return
# Run the web interface
logger.info("Starting web interface on http://0.0.0.0:5001")
subprocess.run([str(venv_python), 'web_interface_v2.py'])
if __name__ == '__main__':
main()

110
setup_web_v2_clean.py
View File

@@ -1,110 +0,0 @@
#!/usr/bin/env python3
"""
Clean setup script for LED Matrix Web Interface V2
Removes existing virtual environment and creates a fresh one with all dependencies
"""
import os
import sys
import subprocess
import logging
import shutil
from pathlib import Path
# Setup logging
logging.basicConfig(
level=logging.INFO,
format='%(asctime)s - %(levelname)s - %(message)s'
)
logger = logging.getLogger(__name__)
def main():
"""Main function to set up a clean virtual environment."""
# Change to script directory
script_dir = Path(__file__).parent
os.chdir(script_dir)
venv_path = script_dir / 'venv_web_v2'
# Remove existing virtual environment if it exists
if venv_path.exists():
logger.info("Removing existing virtual environment...")
try:
shutil.rmtree(venv_path)
logger.info("Existing virtual environment removed")
except Exception as e:
logger.error(f"Failed to remove existing virtual environment: {e}")
return
# Create new virtual environment
logger.info("Creating new virtual environment...")
try:
subprocess.check_call([
sys.executable, '-m', 'venv', str(venv_path)
])
logger.info("Virtual environment created successfully")
except subprocess.CalledProcessError as e:
logger.error(f"Failed to create virtual environment: {e}")
return
# Get virtual environment Python and pip paths
if os.name == 'nt': # Windows
venv_python = venv_path / 'Scripts' / 'python.exe'
venv_pip = venv_path / 'Scripts' / 'pip.exe'
else: # Unix/Linux
venv_python = venv_path / 'bin' / 'python'
venv_pip = venv_path / 'bin' / 'pip'
# Upgrade pip first
logger.info("Upgrading pip...")
try:
subprocess.check_call([
str(venv_pip), 'install', '--upgrade', 'pip'
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
logger.info("Pip upgraded successfully")
except subprocess.CalledProcessError as e:
logger.error(f"Failed to upgrade pip: {e}")
return
# Install dependencies
logger.info("Installing dependencies...")
try:
subprocess.check_call([
str(venv_pip), 'install', '-r', 'requirements_web_v2.txt'
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
logger.info("Dependencies installed successfully")
except subprocess.CalledProcessError as e:
logger.error(f"Failed to install dependencies: {e}")
return
# Install rgbmatrix module from local source
logger.info("Installing rgbmatrix module...")
try:
rgbmatrix_path = script_dir / 'rpi-rgb-led-matrix-master' / 'bindings' / 'python'
subprocess.check_call([
str(venv_pip), 'install', '-e', str(rgbmatrix_path)
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
logger.info("rgbmatrix module installed successfully")
except subprocess.CalledProcessError as e:
logger.error(f"Failed to install rgbmatrix module: {e}")
return
# Verify key packages are installed
logger.info("Verifying installation...")
test_packages = ['flask', 'freetype', 'PIL']
for package in test_packages:
try:
subprocess.check_call([
str(venv_python), '-c', f'import {package}'
], stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
logger.info(f"✓ {package} is available")
except subprocess.CalledProcessError:
logger.error(f"✗ {package} is NOT available")
logger.info("Setup completed successfully!")
logger.info("You can now run the web interface with:")
logger.info(" sudo python3 run_web_v2_simple.py")
if __name__ == '__main__':
main()

16
start_web_conditionally.py
View File

@@ -5,8 +5,17 @@ import subprocess
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__)) PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
CONFIG_FILE = os.path.join(PROJECT_DIR, 'config', 'config.json') CONFIG_FILE = os.path.join(PROJECT_DIR, 'config', 'config.json')
WEB_INTERFACE_SCRIPT = os.path.join(PROJECT_DIR, 'web_interface.py') WEB_INTERFACE_SCRIPT = os.path.join(PROJECT_DIR, 'web_interface_v2.py')
PYTHON_EXEC = sys.executable # Use the same python that runs this script def get_python_executable():
"""Prefer the venv_web_v2 Python if present, else fall back to current interpreter."""
project_dir = PROJECT_DIR
if os.name == 'nt':
venv_python = os.path.join(project_dir, 'venv_web_v2', 'Scripts', 'python.exe')
else:
venv_python = os.path.join(project_dir, 'venv_web_v2', 'bin', 'python')
if os.path.exists(venv_python):
return venv_python
return sys.executable
def main(): def main():
try: try:
@@ -28,7 +37,8 @@ def main():
# This is important for systemd to correctly manage the web server process. # This is important for systemd to correctly manage the web server process.
# Ensure PYTHONPATH is set correctly if web_interface.py has relative imports to src # Ensure PYTHONPATH is set correctly if web_interface.py has relative imports to src
# The WorkingDirectory in systemd service should handle this for web_interface.py # The WorkingDirectory in systemd service should handle this for web_interface.py
os.execvp(PYTHON_EXEC, [PYTHON_EXEC, WEB_INTERFACE_SCRIPT]) py_exec = get_python_executable()
os.execvp(py_exec, [py_exec, WEB_INTERFACE_SCRIPT])
except Exception as e: except Exception as e:
print(f"Failed to exec web interface: {e}") print(f"Failed to exec web interface: {e}")
sys.exit(1) # Failed to start sys.exit(1) # Failed to start

0
test_soccer_logo_fix.py → test/test_soccer_logo_fix.py
View File

0
test_stock_news_fix.py → test/test_stock_news_fix.py
View File

0
WEB_INTERFACE_V2_ENHANCED_SUMMARY.md → wiki/WEB_INTERFACE_V2_ENHANCED_SUMMARY.md
View File