sigs/search

2021-03-22 07:53:02 -06:00
parent 209477d1d8
commit b99e033860
4 changed files with 545 additions and 0 deletions
--- a/qr_search.html
+++ b/qr_search.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+
+
+		<!- QR code scan -->
+		<script src="js/html5-qrcode.min.js"></script>
+	</head>
+
+
+
+	<!-- Begin Page Content -->
+	<div class="container-fluid">
+		<!-- Breadcrumbs-->
+		<!--<ol class="breadcrumb">
+		<li class="breadcrumb-item active">
+			Sites
+		</li>
+		</ol>-->
+		<div class="row">
+		<div class="col-12">
+
+			<p><button id="scanButton" class="btn btn-primary" onClick="scanQR()">Scan code</button></p>
+			<div id="reader" width="0px"></div>
+
+
+
+
+
+
+
+
+
+
+	<script type="text/javascript">
+		var cameraId = "";
+		var currentlyScanning = false;
+		var html5QrCode;
+		function scanQR(){
+			if(currentlyScanning){
+				stopScan("");
+			}else{
+				$("#scanButton").html("Stop scanning");
+				currentlyScanning = true;
+				if(cameraId==""){
+					html5QrCode = Html5Qrcode.getCameras().then(devices => {
+						if (devices && devices.length) {
+							if(devices.length > 1){
+								var options_list = "";
+								for (i = 0; i < devices.length; i++) {
+									if(devices[i].label.indexOf("front") !== -1){
+										options_list = options_list + '<option value="'+devices[i].id+'">Front</option>';
+									}else if(devices[i].label.indexOf("back") !== -1){
+										options_list = options_list + '<option value="'+devices[i].id+'">Back</option>';
+									}else{
+										options_list = options_list + '<option value="'+devices[i].id+'">'+devices[i].label+'</option>';
+									}
+								}
+
+								vex.dialog.open({
+									message: "Which camera would you like to use?",
+									input: [
+										'<style>',
+											'.vex-custom-field-wrapper {',
+												'margin: 1em 0;',
+											'}',
+											'.vex-custom-field-wrapper > label {',
+												'display: inline-block;',
+												'margin-bottom: .2em;',
+											'}',
+										'</style>',
+										'<div class="vex-custom-field-wrapper">',
+											'<label for="camera_id">Cameras available:</label>',
+											'<div class="vex-custom-input-wrapper">',
+												'<select name="camera_id" id="camera_id">',
+												options_list,
+												'</select>',
+											'</div>',
+										'</div>',
+
+									].join(''),
+									callback: function (data) {
+										if (!data) {
+											$("#scanButton").html("Scan code");
+											currentlyScanning = false;
+										}else{
+											cameraId = data.camera_id;
+											readQR();
+										}
+									}
+								});
+							}else{
+								cameraId = devices[0].id;
+								readQR();
+							}
+						}
+					}).catch(err => {
+						console.log(err);
+					});
+				}else{
+					readQR();
+				}
+			}
+		}
+
+		function readQR(){
+			html5QrCode = new Html5Qrcode("reader");
+			html5QrCode.start(
+				cameraId,
+				{
+					fps: 10,    // Optional frame per seconds for qr code scanning
+					qrbox: 250  // Optional if you want bounded box UI
+				},
+				qrCodeMessage => {
+					// do something when code is read
+					stopScan(qrCodeMessage);
+				},
+				errorMessage => {
+					console.log(errorMessage);
+			 	})
+			.catch(err => {
+			 	console.log(err);
+			});
+		}
+
+		function stopScan(message){
+			html5QrCode.stop().then(ignore => {
+				// QR Code scanning is stopped.
+			}).catch(err => {
+				console.log(err);
+			});
+
+			currentlyScanning = false;
+			$("#scanButton").html("Scan code");
+
+			if(message!=""){
+				var table = $('#dataTable').DataTable();
+				table.search( message ).draw();
+			}
+		}
+
+	</script>