<!DOCTYPE html>
<html>
<head>
<title>QR Scanner</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
<script src="https://kit.fontawesome.com/de23248495.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.grid-container{
display: grid;
grid-template-columns: auto 30%;
padding: 10px;
grid-gap: 10px;
}
.container{
width: 300px;}
.room{
background-color:lightgrey;
color:white;
font-size:180px;
padding-top:10px;
padding-bottom:10px;
width:380px;
margin: auto;
}
</style>
</head>
<body>
<h1 id="title" style="font-size: 50px;color: steelblue; margin-top:50px;" align="center"><div style="margin-bottom:20px;"><img src="windsorLogo.png"/></div>
<div class="room" id="roomNumber">102</div><div style="margin-top:20px">Scanning</div></h1>
<h5 id="scanAnimation" style="font-size: 30px;color: gray;" align="center"></h5>
<h6 align="center"><canvas id="canvas" width="320" height="240"></canvas></h6>
<video id="video" height="0"></video>
<h2 id="status" style="font-size: 25px;color: steelblue;" align="center"></h2>
<h3 id="student" style="font-size: 25px;color: steelblue;" align="center"></h3>
<img id="img" width="0" height="0" src=""></img>
<script>
// var video = document.createElement('video');
var video=document.getElementById("video");
var canvas=document.getElementById("canvas").getContext('2d');
var parameters = new URLSearchParams(window.location.search);
var classInfo = parameters.get('class');
var gClassInfo = parameters.get('gClass');
var crdID = "";
var timer = 0;
var initialTime = 0;
var dataReceived = true;
var textRead = "";
navigator.mediaDevices.getUserMedia({video: {facingMode: 'user',width: {ideal: 360}}}).then(function (stream) {
video.srcObject = stream;
video.play();
});
const codeReader = new ZXing.BrowserQRCodeReader();
document.getElementById("roomNumber").innerHTML=classInfo;
repeat();
function repeat() {
if (timer % 20 == 0) {
document.getElementById("scanAnimation").innerHTML = ".";
}
if (timer % 20 == 4) {
document.getElementById("scanAnimation").innerHTML = ". .";
}
if (timer % 20 == 8) {
document.getElementById("scanAnimation").innerHTML = ". . .";
}
if (timer % 20 == 12) {
document.getElementById("scanAnimation").innerHTML = ". . . .";
}
if (timer % 20 == 16) {
document.getElementById("scanAnimation").innerHTML = ". . . . .";
}
if (initialTime > 1) {
document.getElementById("status").innerHTML = " ";
document.getElementById("student").innerHTML = " ";
}
timer++;
initialTime++;
canvas.drawImage(video,0,0);
var x=document.getElementById("canvas").toDataURL();
document.getElementById("img").src=x;
codeReader.decodeFromImage(undefined,x).then((result, err) => {
if (result) {
// document.getElementById("status").innerHTML = " ";
// document.getElementById("student").innerHTML = " ";
textRead = result.text;
try {
crdID = textRead ;
if (crdID == null) {
document.getElementById("status").innerHTML = "Card Invalid";
document.getElementById("student").innerHTML = " ";
initialTime = 0;
} else {
if (dataReceived) {
dataReceived = !dataReceived;
sendDataToRegister();initialTime = -60;
}
document.getElementById("status").innerHTML = "Processing ID";
}
} catch (err) {
document.getElementById("status").innerHTML = " ";
document.getElementById("student").innerHTML = " ";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
}
}
});
canvas.lineJoin="round";
canvas.lineWidth="7";
canvas.strokeStyle="rgba(70,130,180,0.5)";
//canvas.strokeRect((320-150)/2,(240-150)/2,150,150);
drawTarget();
canvas.stroke();
setTimeout(repeat, 33);
}
function sendDataToRegister() {
jQuery.post('https://script.google.com/macros/s/AKfycbztDJpQpBTdJY_Cl_rJDmnJEKHKZnJzErNCWmjrmJdl_p4dBLle/exec', {
cardID: crdID,
class: classInfo,
email: '',
instruction: 'login'
}
).done(function (data) {
var dataAsArray=data.split(",");
if (dataAsArray[0]=== "Approved") {
initialTime = 0;
document.getElementById("status").innerHTML = "Approved";
document.getElementById("student").innerHTML = dataAsArray[1]+ ", " + dataAsArray[2];
initialTime=-10;
dataReceived=true;
} else {
document.getElementById("status").innerHTML = " ";
document.getElementById("student").innerHTML = " ";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
dataReceived = true
document.getElementById("submitButton").disabled = false;
}
})
}
function drawTarget(){
canvas.beginPath();
canvas.moveTo((320-150)/2, (240-150)/2+50);
canvas.lineTo((320-150)/2, (240-150)/2+50-30);
canvas.arc((320-150)/2+20,(240-150)/2+20,20,Math.PI,-Math.PI/2);
canvas.moveTo((320-150)/2+20, (240-150)/2);
canvas.lineTo((320-150)/2+50, (240-150)/2);
canvas.moveTo((320-150)/2+150, (240-150)/2+50);
canvas.lineTo((320-150)/2+150, (240-150)/2+50-30);
canvas.moveTo((320-150)/2+100, (240-150)/2);
canvas.lineTo((320-150)/2+130, (240-150)/2);
canvas.arc((320-150)/2+110+20,(240-150)/2+20,20,Math.PI/-2,0);
canvas.moveTo((320-150)/2, (240-150)/2+100);
canvas.lineTo((320-150)/2, (240-150)/2+100+30);
canvas.arc((320-150)/2+20,(240-150)/2+110+20,20,Math.PI,Math.PI/2,true);
canvas.moveTo((320-150)/2+20, (240-150)/2+150);
canvas.lineTo((320-150)/2+50, (240-150)/2+150);
canvas.moveTo((320-150)/2+150, (240-150)/2+100);
canvas.lineTo((320-150)/2+150, (240-150)/2+100+30);
canvas.moveTo((320-150)/2+100, (240-150)/2+150);
canvas.lineTo((320-150)/2+130, (240-150)/2+150);
canvas.arc((320-150)/2+110+20,(240-150)/2+110+20,20,Math.PI/2,0,true);
}
function redirect() {
if(gClassInfo.length>6){
window.location.assign("https://meet.google.com/" + gClassInfo);}
}
function send() {
crdID = document.getElementById("cid").value
document.getElementById("submitButton").disabled = true;
document.getElementById("status").innerHTML = "Processing ID";
initialTime = -30;
sendDataToRegister();
}
</script>
</body>
</html>