โค้ด: เลือกทั้งหมด
<script src="./jsQR.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<style>
/*body {
font-family: 'Ropa Sans', sans-serif;
color: #333;
max-width: 640px;
margin: 0 auto;
position: relative;
}
*/
/*#githubLink {
position: absolute;
right: 0;
top: 12px;
color: #2D99FF;
}*/
h1 {
margin: 10px 0;
font-size: 40px;
}
#loadingMessage {
text-align: center;
padding: 40px;
background-color: #eee;
width: 100%;
}
#canvas {
width: 300px;
margin-top: 30px;
}
#output {
margin-top: 20px;
background: #eee;
padding: 10px;
padding-bottom: 0;
}
#output div {
padding-bottom: 10px;
word-wrap: break-word;
}
#noQRFound {
text-align: center;
}
@media only screen and (max-width: 768px) {
#top img{
height: 100px;
width: 100px;
}
#top {
background-image: none !important;
height: 100px;
width: 100%;
background-color: #993333;
}
#check{
border: 2px solid black;
}
input[type=submit] {
width: 50px;
background-color: #DCDCDC;
color: black;
/*padding: 14px 20px;
margin: 8px 0;*/
border: none;
border-radius: 4px;
cursor: pointer;
}
}
</style>
<div id="camera">
<div id="loadingMessage"> Unable to access video stream (please make sure you have a webcam enabled)</div>
<input type="hidden" name="action" value="camara">
<center>
<canvas id="canvas" hidden></canvas></center>
<div id="output" hidden style="display: none;">
<div id="outputMessage">No QR code detected.</div>
<div hidden><b>Data:</b> <span id="outputData"></span></div>
</div>
</div>
<script>
var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");
var latitude = 0;
var longitude = 0;
getLocation();
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.play();
requestAnimationFrame(tick);
});
function tick() {
loadingMessage.innerText = "⌛ Loading video..."
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
outputContainer.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
outputMessage.hidden = true;
outputData.parentElement.hidden = false;
// alert(code.data);
$.post('checkIn.php',{
place_id : code.data,
latitude : latitude,
longitude : longitude,
},function(data){
var result = JSON.parse(data);
var gps1 = new GPS(result[0].latitude,result[0].longtitude);
var gps2 = new GPS(result[1].latitude,result[1].longitude);
// if (parseInt(findDistance(gps1, gps2)) < 10) {
$('#camera').hide();
startTime();
$('#check').show();
$('#check input[name="name"]').val(result[0].name);
$('#check input[name="id_place"]').val(result[0].id_place);
$('#check input[name="address"]').val(result[0].address);
// }
});
} else {
outputMessage.hidden = false;
outputData.parentElement.hidden = true;
}
}
requestAnimationFrame(tick);
}
/**
* code for compute distance of GPS 2 points
*
* @author redcorw
* create 01/12/2013
* link http://na5cent.blogspot.com/2011/07/gps-2-javascript.html
*/
var BETWEEN_DEGREE = 15;
var THOUSAND_METER = 1000;
/**
* define surface distance per 1 degree change
*/
var SURFACE_DISTANCE_PER_ONE_DEGREE = [
{ latitude : 110.574, longitude : 111.320 }, //0 degree
{ latitude : 110.649, longitude : 107.551 }, //15 degree
{ latitude : 110.852, longitude : 96.486 }, //30 degree
{ latitude : 111.132, longitude : 78.847 }, //45 degree
{ latitude : 111.412, longitude : 55.800 }, //60 degree
{ latitude : 111.618, longitude : 28.902 }, //75 degree
{ latitude : 111.694, longitude : 0.000 } //90 degree
];
/**
* define class GPS for keep latitude and longitude
*/
var GPS = function(lat, lnt){
this.latitude = lat || 0;
this.longitude = lnt || 0;
};
function getSurfaceDistance(gps){
return SURFACE_DISTANCE_PER_ONE_DEGREE[parseInt(gps.latitude / BETWEEN_DEGREE)]; //depend on latitude
}
function getLatitudeDistance(gps){
return getSurfaceDistance(gps).latitude * THOUSAND_METER;
}
function getLongitudeDistance(gps){
return getSurfaceDistance(gps).longitude * THOUSAND_METER;
}
function findDistance(gps1, gps2){
var latitudeDistance1 = getLatitudeDistance(gps1); //a1
var latitudeDistance2 = getLatitudeDistance(gps2); //a2
var longitudeDistance1 = getLongitudeDistance(gps1); //b1
var longitudeDistance2 = getLongitudeDistance(gps2); //b2
// (X2 * a2 - X1 * a1) ^ 2
var power1 = Math.pow((gps2.latitude * latitudeDistance2) - (gps1.latitude * latitudeDistance1), 2);
// (Y2 * b2 - Y1 * b1) ^ 2$('#check').serialize()$('#check').serialize()
var power2 = Math.pow((gps2.longitude * longitudeDistance2) - (gps1.longitude * longitudeDistance1), 2);
return Math.sqrt(power1 + power2);
};
</script>
<div id="check" style="display: none;">
<form id="checkIn">
<table>
<tr>
<td>ชื่อร้าน</td>
<td>
<input type="text" name="name" readonly>
<input type="hidden" name="id_place" readonly>
</td>
</tr>
<tr>
<td>ที่อยู่</td>
<td><input type="text" name="address" readonly></td>
</tr>
<tr>
<td>เวลา</td>
<td id="time"></td>
</tr>
<tr>
<td >หมายเหตุ</td>
<td><textarea name="description" style="margin: 10px;"></textarea></td>
</tr>
</table>
<input type="button" value="บันทึก" id="save" onclick="myfunction()">
</form>
</div>
<script>
function myfunction(){
alert("ตรวจเรียบร้อย");
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
// add a zero in front of numbers<10
m = checkTime(m);
s = checkTime(s);
document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTime()
}, 500);
}
$('#check input[type="button"]').click(function(){
$.post('add_checkIn.php',$('#checkIn').serialize(),function(data){
console.log(data);
})
});
</script>
</body>
</html>