amar
/
eSPJ
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

main
marszayn 2025-08-04 13:42:39 +07:00
parent d3b2df416c
commit b701c86656
1 changed files with 18 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
Views/Admin/Transport/SpjDriver/Scan/Index.cshtml
View File

@ -9,14 +9,8 @@
/* Html5-QRCode specific styles */ /* Html5-QRCode specific styles */
#scanner-container video { #scanner-container video {
width: 100% !important; width: 100% !important;
height: 100% !impo if (this.html5QrCode && this.isScanning) { height: 100% !important;
try { object-fit: cover !important;
await this.html5QrCode.stop();
} catch (error) {
// Error stopping scanner
}
this.isScanning = false;
} object-fit: cover !important;
border-radius: 8px; border-radius: 8px;
} }
@ -34,21 +28,6 @@
#scanner-container button { #scanner-container button {
display: none !important; display: none !important;
} }
/* Custom scanner box overlay */
#scanner-container::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 150px;
border: 2px dashed rgba(255, 255, 255, 0.7);
border-radius: 8px;
pointer-events: none;
z-index: 5;
}
</style> </style>
} }
@ -153,10 +132,10 @@
<div class="text-gray-700"> <div class="text-gray-700">
<p class="font-medium mb-1">Tips Scanning:</p> <p class="font-medium mb-1">Tips Scanning:</p>
<ul class="text-xs space-y-1"> <ul class="text-xs space-y-1">
<li>• Pastikan barcode dalam pencahayaan yang cukup</li> <li>• Pastikan QR code dalam pencahayaan yang cukup</li>
<li>• Jaga jarak 15-30cm dari kamera</li> <li>• Jaga jarak 15-30cm dari kamera</li>
<li>• Arahkan kamera secara tegak lurus ke barcode</li> <li>• Arahkan kamera secara tegak lurus ke QR code</li>
<li>• Pastikan barcode tidak buram atau rusak</li> <li>• Pastikan QR code tidak buram atau rusak</li>
<li>• <strong>Klik "Izinkan/Allow" saat browser meminta akses kamera</strong></li> <li>• <strong>Klik "Izinkan/Allow" saat browser meminta akses kamera</strong></li>
</ul> </ul>
</div> </div>
@ -185,7 +164,7 @@
<div id="scan-result" class="hidden mt-4 p-4 bg-green-50 border border-green-200 rounded-lg scan-result-card"> <div id="scan-result" class="hidden mt-4 p-4 bg-green-50 border border-green-200 rounded-lg scan-result-card">
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<i class="w-5 h-5 text-green-600 mr-2" data-lucide="check-circle"></i> <i class="w-5 h-5 text-green-600 mr-2" data-lucide="check-circle"></i>
<span class="text-green-800 font-medium">Barcode terdeteksi!</span> <span class="text-green-800 font-medium">QR Code terdeteksi!</span>
</div> </div>
<p class="text-green-700 mb-3">Kode: <span id="detected-code" class="font-mono font-bold"></span></p> <p class="text-green-700 mb-3">Kode: <span id="detected-code" class="font-mono font-bold"></span></p>
<div class="flex gap-2"> <div class="flex gap-2">
@ -335,13 +314,22 @@
cameraId = backCamera.id; cameraId = backCamera.id;
} }
// Start scanning // Start scanning with square QR code focus
await this.html5QrCode.start( await this.html5QrCode.start(
cameraId, cameraId,
{ {
fps: 10, // Frame per second fps: 10, // Frame per second
qrbox: { width: 250, height: 150 }, // Scanning area qrbox: function(viewfinderWidth, viewfinderHeight) {
aspectRatio: 1.7, // Width/height ratio // Make it square - use the smaller dimension
let minEdgePercentage = 0.7; // 70% of the smaller edge
let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
return {
width: qrboxSize,
height: qrboxSize
};
},
aspectRatio: 1.0, // Square ratio for QR codes
rememberLastUsedCamera: true rememberLastUsedCamera: true
}, },
(decodedText, decodedResult) => { (decodedText, decodedResult) => {