kevinowino869/mitrobill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Barcode Scan UI

Browse Source
This commit is contained in:
Ahmad Husein 2025-02-05 15:29:26 +07:00 committed by iBNu Maksum
parent 9cc7c0c811
commit 85c5441934
No known key found for this signature in database
GPG Key ID: 7FC82848810579E5
1 changed files with 68 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
scan/index.php
View File

@ -6,23 +6,64 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QR Code Scanner</title> <title>QR Code Scanner</title>
<style> <style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
#qr-reader {
width: 100%;
height: auto;
margin-bottom: 20px;
}
#qr-reader-results {
padding: 10px;
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 5px;
}
button { button {
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="qr-reader" style="width:100%; height:auto"></div> <div id="container">
<h2>QR Code Scanner</h2>
<div id="qr-reader"></div>
<div id="qr-reader-results"></div> <div id="qr-reader-results"></div>
<button id="camera-button">Open Camera</button>
</div>
<script src="qrcode.min.js"></script> <script src="qrcode.min.js"></script>
<script> <script>
function docReady(fn) { function docReady(fn) {
// see if DOM is already available // lihat apakah DOM sudah tersedia
if (document.readyState === "complete" || if (document.readyState === "complete" ||
document.readyState === "interactive") { document.readyState === "interactive") {
// call on next available tick // panggil di detik berikutnya yang tersedia
setTimeout(fn, 1); setTimeout(fn, 1);
} else { } else {
document.addEventListener("DOMContentLoaded", fn); document.addEventListener("DOMContentLoaded", fn);
@ -51,6 +92,9 @@
docReady(function() { docReady(function() {
var resultContainer = document.getElementById('qr-reader-results'); var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0; var lastResult, countResults = 0;
var html5QrcodeScanner;
var isCameraOpen = false;
function onScanSuccess(decodedText, decodedResult) { function onScanSuccess(decodedText, decodedResult) {
if (decodedText !== lastResult) { if (decodedText !== lastResult) {
++countResults; ++countResults;
@ -67,12 +111,24 @@
} }
} }
var html5QrcodeScanner = new Html5QrcodeScanner( function toggleCamera() {
if (isCameraOpen) {
html5QrcodeScanner.clear();
document.getElementById('camera-button').textContent = "Open Camera";
isCameraOpen = false;
} else {
html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { "qr-reader", {
fps: 10, fps: 10,
qrbox: 250 qrbox: 250
}); });
html5QrcodeScanner.render(onScanSuccess); html5QrcodeScanner.render(onScanSuccess);
document.getElementById('camera-button').textContent = "Close Camera";
isCameraOpen = true;
}
}
document.getElementById('camera-button').addEventListener('click', toggleCamera);
}); });
</script> </script>
</body> </body>