alvin/Spik-en-span
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Spik-en-span.git synced 2026-03-06 13:26:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhance QR code generation and scanner UI: increase QR code size, improve scanner layout, and add video element styling

Browse Source
This commit is contained in:
vista-man
2025-04-10 20:15:56 +02:00
parent dac3e925c0
commit f4cc70f5bb
4 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
php/process_ticket.php
View File

@@ -44,7 +44,7 @@ $qrCodes = []; // Array to store QR code URLs for email attachment
// Insert one ticket per row and generate QR codes // Insert one ticket per row and generate QR codes
for ($i = 0; $i < $quantity; $i++) { for ($i = 0; $i < $quantity; $i++) {
$ticket_id = bin2hex(random_bytes(16)); // Generate a 32-character unique ticket ID $ticket_id = bin2hex(random_bytes(16)); // Generate a 32-character unique ticket ID
$qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=" . urlencode($ticket_id); // Generate QR code link $qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=" . urlencode($ticket_id); // Generate QR code link
$one_ticket_quantity = 1; // Each row represents one ticket $one_ticket_quantity = 1; // Each row represents one ticket
$stmt->bind_param("ssssss", $ticket_id, $name, $email, $category, $one_ticket_quantity, $qrCodeUrl); $stmt->bind_param("ssssss", $ticket_id, $name, $email, $category, $one_ticket_quantity, $qrCodeUrl);
if (!$stmt->execute()) { if (!$stmt->execute()) {

11
qr/qr.html
View File

@@ -9,13 +9,14 @@
<script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script> <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
</head> </head>
<body> <body>
<div class="container mt-5"> <div class="container mt-5 text-center">
<h1 class="text-center">QR Scanner Page</h1> <h1 class="text-center">QR Scanner</h1>
<a id="btn-scan-qr"> <a id="btn-scan-qr">
<img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg" alt="QR Icon">
</a> </a>
<canvas hidden="" id="qr-canvas"></canvas> <video id="video" hidden autoplay playsinline></video>
<div id="qr-result" hidden=""> <canvas hidden id="qr-canvas"></canvas>
<div id="qr-result" hidden>
<b>Data:</b> <span id="outputData"></span> <b>Data:</b> <span id="outputData"></span>
</div> </div>
</div> </div>

5
qr/qrCodeScanner.js
View File

@@ -2,15 +2,17 @@ const btnScanQR = document.getElementById('btn-scan-qr');
const qrCanvas = document.getElementById('qr-canvas'); const qrCanvas = document.getElementById('qr-canvas');
const qrResult = document.getElementById('qr-result'); const qrResult = document.getElementById('qr-result');
const outputData = document.getElementById('outputData'); const outputData = document.getElementById('outputData');
const video = document.getElementById('video');
btnScanQR.addEventListener('click', () => { btnScanQR.addEventListener('click', () => {
btnScanQR.hidden = true; // Hide the QR code icon
video.hidden = false; // Show the video element
qrCanvas.hidden = false; qrCanvas.hidden = false;
qrResult.hidden = true; qrResult.hidden = true;
const context = qrCanvas.getContext('2d'); const context = qrCanvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }) navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then((stream) => { .then((stream) => {
const video = document.createElement('video');
video.srcObject = stream; video.srcObject = stream;
video.setAttribute('playsinline', true); // Required to work on iOS video.setAttribute('playsinline', true); // Required to work on iOS
video.play(); video.play();
@@ -26,6 +28,7 @@ btnScanQR.addEventListener('click', () => {
outputData.innerText = qrCodeData; outputData.innerText = qrCodeData;
qrResult.hidden = false; qrResult.hidden = false;
qrCanvas.hidden = true; qrCanvas.hidden = true;
video.hidden = true; // Hide the video element after scanning
stream.getTracks().forEach(track => track.stop()); stream.getTracks().forEach(track => track.stop());
} catch (e) { } catch (e) {
requestAnimationFrame(scan); requestAnimationFrame(scan);

10
qr/styles.css
View File

@@ -50,3 +50,13 @@ html {
max-width: 700px; max-width: 700px;
background-color: white; background-color: white;
} }
#video {
display: block;
margin: 0 auto;
width: 100%;
max-width: 400px;
border: 2px solid white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}