Open Source: Digital Signage
CMD ["python", "qr_signage_api.py"]
<script> const API_URL = 'http://localhost:5000'; let chart = null; async function loadAnalytics() const response = await fetch(`$API_URL/api/analytics`); const data = await response.json(); document.getElementById('totalScans').textContent = data.total_scans; document.getElementById('scansLastHour').textContent = data.scans_last_hour; document.getElementById('activeCount').textContent = data.qr_performance.length; // Update chart if (chart) chart.destroy(); const ctx = document.getElementById('performanceChart').getContext('2d'); chart = new Chart(ctx, type: 'bar', data: labels: data.qr_performance.map(p => p.name), datasets: [ label: 'Number of Scans', data: data.qr_performance.map(p => p.scans), backgroundColor: '#667eea' ] ); async function addQRContent() const data = name: document.getElementById('qrName').value, url: document.getElementById('qrUrl').value, description: document.getElementById('qrDesc').value, display_duration: parseInt(document.getElementById('qrDuration').value) ; const response = await fetch(`$API_URL/api/qr-content`, method: 'POST', headers: 'Content-Type': 'application/json' , body: JSON.stringify(data) ); if (response.ok) alert('QR content added successfully!'); location.reload(); // Auto-refresh every 10 seconds loadAnalytics(); setInterval(loadAnalytics, 10000); </script> </body> </html> # Dockerfile FROM python:3.9-slim WORKDIR /app
# requirements.txt Flask==2.3.0 flask-cors==4.0.0 flask-sqlalchemy==3.0.5 qrcode==7.4.2 Pillow==10.0.0 For Xibo: Use the HTML package with iframe embedding open source digital signage
COPY . .
last_hour = datetime.utcnow() - timedelta(hours=1) scans_last_hour = QRScan.query.filter(QRScan.scanned_at >= last_hour).count() CMD ["python", "qr_signage_api
if == ' main ': app.run(host='0.0.0.0', port=5000, debug=True) 2. Frontend Display Page (HTML/CSS/JS) <!DOCTYPE html> <!-- qr_display.html - For digital signage screens --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Digital Signage - QR Display</title> <style> * margin: 0; padding: 0; box-sizing: border-box; body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; .signage-container width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; .qr-card background: white; border-radius: 40px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; max-width: 90%; animation: fadeIn 0.5s ease-in; .qr-title font-size: 2.5rem; color: #333; margin-bottom: 20px; font-weight: bold; .qr-description font-size: 1.2rem; color: #666; margin-bottom: 30px; .qr-image-container margin: 20px 0; padding: 20px; background: #f5f5f5; border-radius: 20px; display: inline-block; .qr-image width: 400px; height: 400px; object-fit: contain; .scan-instruction margin-top: 30px; font-size: 1rem; color: #999; .countdown-timer position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 10px; font-family: monospace; font-size: 1.2rem; @keyframes fadeIn from opacity: 0; transform: scale(0.9); to opacity: 1; transform: scale(1); @media (max-width: 768px) .qr-image width: 250px; height: 250px; .qr-title font-size: 1.5rem; </style> </head> <body> <div class="signage-container"> <div class="qr-card" id="qrCard"> <div class="qr-title" id="qrTitle">Loading...</div> <div class="qr-description" id="qrDescription"></div> <div class="qr-image-container"> <img id="qrImage" class="qr-image" alt="QR Code"> </div> <div class="scan-instruction"> 📱 Scan with your phone camera to access </div> </div> <div class="countdown-timer" id="countdown">Next in: 30s</div> </div>
This complete feature gives you a production-ready QR rotation system for digital signage with analytics tracking, admin management, and easy integration with any open-source signage platform. Frontend Display Page (HTML/CSS/JS) <
Use the "Web Page" asset type pointing to your display URL Installation & Setup # 1. Clone or create files mkdir qr-signage cd qr-signage 2. Install dependencies pip install -r requirements.txt 3. Initialize database python >>> from qr_signage_api import db, app >>> with app.app_context(): ... db.create_all() >>> exit() 4. Run API server python qr_signage_api.py 5. Access endpoints: - Display: http://localhost:5000/static/qr_display.html - Admin: http://localhost:5000/static/admin_dashboard.html - API: http://localhost:5000/api/current-qr