Initial project
This commit is contained in:
275
static/script.js
Normal file
275
static/script.js
Normal file
@@ -0,0 +1,275 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
cheangpage();
|
||||
// References to all the element we will need.
|
||||
var video = document.querySelector('#camera-stream'),
|
||||
image = document.querySelector('#snap'),
|
||||
start_camera = document.querySelector('#start-camera'),
|
||||
controls = document.querySelector('.controls'),
|
||||
take_photo_btn = document.querySelector('#take-photo'),
|
||||
delete_photo_btn = document.querySelector('#delete-photo'),
|
||||
error_message = document.querySelector('#error-message');
|
||||
|
||||
|
||||
// The getUserMedia interface is used for handling camera input.
|
||||
// Some browsers need a prefix so here we're covering all the options
|
||||
navigator.getMedia = ( navigator.getUserMedia ||
|
||||
navigator.webkitGetUserMedia ||
|
||||
navigator.mozGetUserMedia ||
|
||||
navigator.msGetUserMedia);
|
||||
|
||||
|
||||
if(!navigator.getMedia){
|
||||
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
|
||||
}
|
||||
else{
|
||||
|
||||
// Request the camera.
|
||||
navigator.getMedia(
|
||||
{
|
||||
video: true
|
||||
},
|
||||
// Success Callback
|
||||
function(stream){
|
||||
|
||||
// Create an object URL for the video stream and
|
||||
// set it as src of our HTLM video element.
|
||||
//video.src = window.URL.createObjectURL(stream);
|
||||
video.srcObject = stream
|
||||
|
||||
// Play the video element to start the stream.
|
||||
video.play();
|
||||
video.onplay = function() {
|
||||
showVideo();
|
||||
};
|
||||
|
||||
},
|
||||
// Error Callback
|
||||
function(err){
|
||||
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Mobile browsers cannot play video without user input,
|
||||
// so here we're using a button to start it manually.
|
||||
start_camera.addEventListener("click", function(e){
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Start video playback manually.
|
||||
video.play();
|
||||
showVideo();
|
||||
|
||||
});
|
||||
|
||||
|
||||
take_photo_btn.addEventListener("click", function(e){
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
var snap = takeSnapshot();
|
||||
|
||||
// Show image.
|
||||
image.setAttribute('src', snap);
|
||||
image.classList.add("visible");
|
||||
|
||||
// Enable delete and save buttons
|
||||
delete_photo_btn.classList.remove("disabled");
|
||||
|
||||
// Pause video playback of stream.
|
||||
video.pause();
|
||||
search(snap);
|
||||
|
||||
});
|
||||
|
||||
|
||||
delete_photo_btn.addEventListener("click", function(e){
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// Hide image.
|
||||
image.setAttribute('src', "");
|
||||
image.classList.remove("visible");
|
||||
|
||||
// Disable delete and save buttons
|
||||
delete_photo_btn.classList.add("disabled");
|
||||
|
||||
// Resume playback of stream.
|
||||
video.play();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
function showVideo(){
|
||||
// Display the video stream and the controls.
|
||||
|
||||
hideUI();
|
||||
video.classList.add("visible");
|
||||
controls.classList.add("visible");
|
||||
}
|
||||
|
||||
|
||||
function takeSnapshot(){
|
||||
// Here we're using a trick that involves a hidden canvas element.
|
||||
|
||||
var hidden_canvas = document.querySelector('canvas'),
|
||||
context = hidden_canvas.getContext('2d');
|
||||
|
||||
var width = video.videoWidth,
|
||||
height = video.videoHeight;
|
||||
|
||||
if (width && height) {
|
||||
|
||||
// Setup a canvas with the same dimensions as the video.
|
||||
hidden_canvas.width = width;
|
||||
hidden_canvas.height = height;
|
||||
|
||||
// Make a copy of the current frame in the video on the canvas.
|
||||
context.drawImage(video, 0, 0, width, height);
|
||||
|
||||
// Turn the canvas image into a dataURL that can be used as a src for our photo.
|
||||
return hidden_canvas.toDataURL('image/png');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function displayErrorMessage(error_msg, error){
|
||||
error = error || "";
|
||||
if(error){
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
error_message.innerText = error_msg;
|
||||
|
||||
hideUI();
|
||||
error_message.classList.add("visible");
|
||||
}
|
||||
|
||||
|
||||
function hideUI(){
|
||||
// Helper function for clearing the app UI.
|
||||
|
||||
controls.classList.remove("visible");
|
||||
start_camera.classList.remove("visible");
|
||||
video.classList.remove("visible");
|
||||
snap.classList.remove("visible");
|
||||
error_message.classList.remove("visible");
|
||||
}
|
||||
|
||||
});
|
||||
function cheangpage(){
|
||||
var add_page = document.getElementById('add_page');
|
||||
var search_page = document.getElementById('search_page');
|
||||
var add_icon = document.getElementsByClassName('add_icon')[0];
|
||||
|
||||
if (add_icon.innerHTML == "add")
|
||||
{
|
||||
add_icon.innerHTML = "search";
|
||||
add_page.style.display = "";
|
||||
search_page.style.display = "none";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/add', true);
|
||||
var formData = new FormData();
|
||||
xhr.onload = function(e) { };
|
||||
xhr.send(formData);
|
||||
}else{
|
||||
add_icon.innerHTML = "add";
|
||||
add_page.style.display = "none";
|
||||
search_page.style.display = "";
|
||||
|
||||
}
|
||||
};
|
||||
function setinit(typ, pid){
|
||||
if (pid != "0"){
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '/' + typ + '/' + pid, true);
|
||||
xhr.onload = function(e) {
|
||||
document.getElementById("plast" + pid).innerHTML = "آخرین حضور: " + xhr.response;
|
||||
};
|
||||
xhr.send();
|
||||
}};
|
||||
function cer_per (name, nave, last, pid) {
|
||||
var per = document.createElement("DIV");
|
||||
var pname = document.createElement("P");
|
||||
var pnave = document.createElement("P");
|
||||
var plast = document.createElement("P");
|
||||
var lex = document.createElement("DIV");
|
||||
var ini = document.createElement("A");
|
||||
var out = document.createElement("A");
|
||||
|
||||
pname.innerHTML = "نام: " + name;
|
||||
pnave.innerHTML = "کد ملی: " + nave;
|
||||
plast.innerHTML = "آخرین حضور: " + last;
|
||||
plast.id = "plast" + pid;
|
||||
|
||||
lex.className = "flex";
|
||||
lex.dir = "ltr";
|
||||
|
||||
var aa = '<a class="btn effect01" onclick="setinit(\'out\', ' + pid + ')"><span>ثبت خروج</span></a>';
|
||||
aa = aa + '<a class="btn effect01" onclick="setinit(\'ini\', ' + pid + ')"><span>ثبت ورود</span></a>';
|
||||
|
||||
lex.innerHTML = aa;
|
||||
per.appendChild(pname);
|
||||
per.appendChild(pnave);
|
||||
per.appendChild(plast);
|
||||
|
||||
lex.appendChild(out);
|
||||
lex.appendChild(ini);
|
||||
|
||||
per.appendChild(lex);
|
||||
Persons.appendChild(per);
|
||||
};
|
||||
function search (data) {
|
||||
Persons.innerHTML = "<h4>مشخصات فرد</h4>";
|
||||
// define data and connections
|
||||
var blob = new Blob([data]);
|
||||
var url = URL.createObjectURL(blob);
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/search', true);
|
||||
|
||||
// define new form
|
||||
var formData = new FormData();
|
||||
formData.append('image', data);
|
||||
|
||||
// action after uploading happens
|
||||
xhr.onload = function(e) {
|
||||
var text = xhr.response;
|
||||
if (text == "0" || text == ""){return;}
|
||||
var users = JSON.parse(text);
|
||||
var img = users.pop();
|
||||
snap.src = img;
|
||||
for (index in users){
|
||||
var user = users[index];
|
||||
if (user == "0") {cer_per("یافت نشد.", "", "00:00", "0");}
|
||||
else {cer_per(user[1], user[2], user[3], user[0]);}
|
||||
}
|
||||
};
|
||||
|
||||
// do the uploading
|
||||
xhr.send(formData);
|
||||
|
||||
};
|
||||
function savenew(){
|
||||
var fname = document.getElementById("fname");
|
||||
var fnav = document.getElementById("fnav");
|
||||
var add_result = document.getElementById("add_result");
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
var formData = new FormData();
|
||||
formData.append('name', fname.value);
|
||||
formData.append('nav', fnav.value);
|
||||
|
||||
|
||||
xhr.onload = function(e) {
|
||||
var text = xhr.response;
|
||||
if (text == "1") {add_result.innerHTML = "با موفقیت ثبت شد.";add_result.style.color = "green";}
|
||||
else if (text == "0") {add_result.innerHTML = "مشکلی پیش آمد دوبار امتحان کنید.";add_result.style.color = "red";}
|
||||
else {add_result.innerHTML = text;add_result.style.color = "red";}
|
||||
};
|
||||
xhr.open('POST', '/savenew', true);
|
||||
xhr.send(formData);
|
||||
};
|
||||
Reference in New Issue
Block a user