Open Source Digital Signage Official
last_hour = datetime.utcnow() - timedelta(hours=1) scans_last_hour = QRScan.query.filter(QRScan.scanned_at >= last_hour).count()
COPY requirements.txt . RUN pip install -r requirements.txt open source digital signage
return jsonify( 'id': current_qr.id, 'name': current_qr.name, 'url': current_qr.url, 'qr_image': qr_base64, 'description': current_qr.description, 'duration': current_qr.display_duration ) @app.route('/api/track-scan', methods=['POST']) def track_scan(): data = request.json qr_id = data.get('qr_id') last_hour = datetime
EXPOSE 5000
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> meta name="viewport" content="width=device-width
<script> const API_URL = 'http://localhost:5000'; // Change to your API server let currentQR = null; let countdown = 30; let timerInterval = null; async function fetchCurrentQR() try const response = await fetch(`$API_URL/api/current-qr`); if (!response.ok) throw new Error('Failed to fetch QR'); const data = await response.json(); return data; catch (error) console.error('Error fetching QR:', error); return null; async function trackScan(qrId) try await fetch(`$API_URL/api/track-scan`, method: 'POST', headers: 'Content-Type': 'application/json' , body: JSON.stringify( qr_id: qrId ) ); catch (error) console.error('Track error:', error); function updateDisplay(qrData) if (!qrData) return; currentQR = qrData; document.getElementById('qrTitle').textContent = qrData.name; document.getElementById('qrDescription').textContent = qrData.description function updateCountdownDisplay() const timerElement = document.getElementById('countdown'); timerElement.textContent = `Next in: $countdowns`; if (countdown <= 5) timerElement.style.background = 'rgba(255,0,0,0.8)'; else timerElement.style.background = 'rgba(0,0,0,0.7)'; async function rotateQR() newQR.id !== currentQR.id)) updateDisplay(newQR); // Countdown timer setInterval(() => if (countdown > 0) countdown--; updateCountdownDisplay(); if (countdown === 0) rotateQR(); , 1000); // Initial load rotateQR(); // Refresh every 30 seconds as backup setInterval(rotateQR, 30000); // Optional: Track scan when user clicks on QR (for touch screens) document.getElementById('qrImage').addEventListener('click', () => if (currentQR) trackScan(currentQR.id); // Open URL in new tab window.open(currentQR.url, '_blank'); ); </script> </body> </html> <!DOCTYPE html> <!-- admin_dashboard.html --> <html lang="en"> <head> <meta charset="UTF-8"> <title>QR Signage Admin Dashboard</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> body font-family: 'Segoe UI', sans-serif; background: #f0f2f5; margin: 0; padding: 20px; .container max-width: 1200px; margin: 0 auto; .header background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; .stats-grid display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; .stat-card background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); .stat-number font-size: 2.5rem; font-weight: bold; color: #667eea; .form-section background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px; input, textarea, button width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; button background: #667eea; color: white; border: none; cursor: pointer; button:hover background: #5a67d8; table width: 100%; background: white; border-radius: 10px; overflow: hidden; th, td padding: 12px; text-align: left; border-bottom: 1px solid #ddd; th background: #667eea; color: white; </style> </head> <body> <div class="container"> <div class="header"> <h1>📊 QR Signage Analytics Dashboard</h1> <p>Track QR code performance and manage content</p> </div> <div class="stats-grid"> <div class="stat-card"> <h3>Total Scans</h3> <div class="stat-number" id="totalScans">0</div> </div> <div class="stat-card"> <h3>Scans (Last Hour)</h3> <div class="stat-number" id="scansLastHour">0</div> </div> <div class="stat-card"> <h3>Active QR Codes</h3> <div class="stat-number" id="activeCount">0</div> </div> </div> <div class="form-section"> <h2>➕ Add New QR Content</h2> <input type="text" id="qrName" placeholder="Name (e.g., Wi-Fi Access)"> <input type="url" id="qrUrl" placeholder="URL (e.g., https://example.com)"> <textarea id="qrDesc" placeholder="Description (optional)"></textarea> <input type="number" id="qrDuration" placeholder="Display duration (seconds)" value="30"> <button onclick="addQRContent()">Add QR Code</button> </div> <div class="form-section"> <h2>📈 QR Performance</h2> <canvas id="performanceChart" width="400" height="200"></canvas> </div> <div class="form-section"> <h2>📋 QR Content List</h2> <table id="qrTable"> <thead> <tr><th>Name</th><th>URL</th><th>Scans</th><th>Status</th></tr> </thead> <tbody id="qrTableBody"></tbody> </table> </div> </div>
scan = QRScan( qr_content_id=qr_id, ip_address=request.remote_addr, user_agent=request.headers.get('User-Agent') ) db.session.add(scan) db.session.commit()
Shopping Cart
3D box, book cover mockup generator... Free icon sets, image to icon converter, favicon generator... Need a custom design? Icons, websites, boxshots, logotypes...
Copyright © 2000-2025 Lokas Software. All rights reserved. Terms of use and privacy policy info.