Skip to content

Commit 0e3c301

Browse files
author
Pranav Veeraghanta
committed
fresh
0 parents  commit 0e3c301

File tree

8 files changed

+307
-0
lines changed

8 files changed

+307
-0
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.postCommitCommand": "push"
3+
}

‎Readme.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Hello There.
2+
3+
This is an application designed to create a library of you books just by scanning the barcodes on them.\
4+
Check it out on https://Mylibrary.life
5+
6+
This currently works only on devies with a rear camera.
7+
8+
Changelog:
9+
10+
## V 0.1 :
11+
17/02/2024:
12+
-> First commit
13+
-> created Start Scan button, Take Photo button and Extract Code button
14+
-> Can only be used on devices with back facing cameras
15+
16+
## V 0.2:
17+
17/02/2024 :
18+
-> removed Start Scan button, Take Photo button and Extract Code button.
19+
-> when the site is launched the scanning starts happenning. i.e scanning
20+
happens automatically for the first time
21+
-> added a scan again button that will scan a new barcode once the button is clicked
22+

‎book.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
}
7+
8+
#buttons {
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
}
13+
14+
#scanButton{
15+
width: 43vh;
16+
height: 10vh;
17+
font-size: 6vh;
18+
19+
border: 0;
20+
21+
background-color: dodgerblue;
22+
23+
border-radius: 30px;
24+
25+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
26+
27+
font-family: "Khand", sans-serif;
28+
font-weight: 600;
29+
font-style: normal;
30+
31+
}
32+
33+
#confirm{
34+
width: 40vh;
35+
height: 6vh;
36+
font-size: 4vh;
37+
text-align: center;
38+
39+
border: 0;
40+
41+
background-color: dodgerblue;
42+
43+
border-radius: 30px;
44+
45+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
46+
47+
font-family: "Khand", sans-serif;
48+
font-weight: 600;
49+
font-style: normal;
50+
}
51+
52+
#scanbuttom:active{
53+
transform: translateY(2px);
54+
}
55+
#confirm:active{
56+
transform: translateY(2px);
57+
}
58+
59+
#bartext {
60+
font-family: "Khand", sans-serif;
61+
font-size: 3vh;
62+
}
63+
64+
#barcoderesult{
65+
font-family: "Khand", sans-serif;
66+
font-size: 6vh;
67+
}

‎book.js

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
let thecode
2+
3+
document.addEventListener('DOMContentLoaded', () => {
4+
let scanButton = document.querySelector('#scanButton');
5+
let video = document.querySelector('#vid');
6+
let barcodeResult = document.querySelector('#barcodeResult');
7+
let mediaDevices = navigator.mediaDevices;
8+
9+
mediaDevices.getUserMedia({
10+
video: {
11+
facingMode: { exact: 'environment' },
12+
width: { ideal: 1280 },
13+
height: { ideal: 980 },
14+
zoom: 1.0 // Set initial zoom level to 1.0
15+
}, audio: false,
16+
}).then((stream) => {
17+
video.srcObject = stream;
18+
video.addEventListener("loadedmetadata", () => {
19+
video.play()
20+
})
21+
}).catch(alert)
22+
23+
// Configure QuaggaJS
24+
25+
function quaggajss() {
26+
Quagga.init({
27+
inputStream: {
28+
name: "Live",
29+
type: "LiveStream",
30+
target: video
31+
},
32+
decoder: {
33+
readers: ["ean_reader", "ean_8_reader", "upc_reader", "upc_e_reader"] // List of barcode formats to scan
34+
}
35+
}, function (err) {
36+
if (err) {
37+
console.error("Quagga initialization failed: ", err);
38+
return;
39+
}
40+
console.log("Quagga initialization succeeded");
41+
42+
// Start QuaggaJS when the "Scan Barcode" button is clicked
43+
function startcan() {
44+
Quagga.start();
45+
}
46+
47+
setInterval(startcan, 3000)
48+
49+
// Detect barcode
50+
Quagga.onDetected(function (result) {
51+
console.log("Barcode detected and decoded: ", result.codeResult.code);
52+
barcodeResult.textContent = result.codeResult.code;
53+
54+
var p = document.createElement('p')
55+
p.id = ('barcoderesult')
56+
barcodeResult.appendChild(p)
57+
58+
// Perform actions based on the detected barcode
59+
// Example: Redirect to a URL based on the barcode value
60+
// if (result.codeResult.code === "SOME_BARCODE_VALUE") {
61+
// window.location.href = "https://example.com/" + result.codeResult.code;
62+
// }
63+
64+
// Stop QuaggaJS after a barcode is detected
65+
Quagga.stop();
66+
});
67+
68+
});
69+
}
70+
quaggajss()
71+
scanButton.addEventListener('click', () => {
72+
quaggajss()
73+
})
74+
75+
76+
// Stop QuaggaJS and release camera when leaving the page
77+
window.addEventListener('beforeunload', function () {
78+
Quagga.stop();
79+
});
80+
});
81+
82+
var confirm = document.querySelector('#confirm')
83+
84+
confirm.addEventListener('click', () => {
85+
86+
var node = document.getElementById('barcodeResult')
87+
codess = node.textContent
88+
var apiUrl = 'https://www.googleapis.com/books/v1/volumes?q=isbn:' + codess + '&key=' + apiKey;
89+
alert(codess);
90+
alert(apiUrl);
91+
92+
fetch(apiUrl)
93+
.then(response => {
94+
if (!response.ok) {
95+
alert('Network response was not ok');
96+
throw new Error('Network response was not ok');
97+
}
98+
return response.json();
99+
})
100+
.then(data => {
101+
const book = data.items[0];
102+
barcodeResult.textContent = book.volumeInfo.title;
103+
})
104+
.catch(error => {
105+
alert('There was a problem with the fetch operation');
106+
console.error('Fetch error:', error);
107+
});
108+
});

‎index.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
body {
2+
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
3+
margin: 0;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
}
8+
9+
#welcome {
10+
font-size: 80px;
11+
font-family: "Farsan", cursive;
12+
font-weight: 400;
13+
font-style: normal;
14+
position: relative;
15+
text-align: center;
16+
padding: 50px;
17+
18+
}
19+
#startit{
20+
font-size: 40px;
21+
border-radius: 20px;
22+
padding: 15px;
23+
24+
background-color: lightblue;
25+
border: 1px solid grey;
26+
box-shadow: 5px 5px 5px lightblue;
27+
font-family: "Farsan", cursive;
28+
font-weight: 400;
29+
font-style: normal;
30+
cursor: pointer;
31+
32+
margin-bottom: 40px;
33+
34+
}
35+
36+
#startit:active {
37+
transform: translateY(2px);
38+
}
39+
40+
#note{
41+
font-family: "Farsan", cursive;
42+
font-weight: 400;
43+
font-style: normal;
44+
font-size: 25px;
45+
text-align: center;
46+
47+
48+
}
49+

‎index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
3+
<head>
4+
<title>My Library</title>
5+
<meta name="My Library" description="An online library log">
6+
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Farsan&display=swap" rel="stylesheet">
11+
12+
<link rel="stylesheet" href="index.css">
13+
14+
15+
</head>
16+
17+
<body>
18+
19+
20+
<div id="welcome">Welcome to<br>My Library</div>
21+
<button id="startit">Start Scanning</button>
22+
<div id="note">Note : To run the application you need a handheld device with a rear camera</div>
23+
24+
25+
26+
<script src="index.js" type="text/javascript"></script>
27+
</body>
28+
29+
30+
</html>

‎index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
var startit = document.querySelector('#startit')
2+
3+
startit.addEventListener('click',()=>{
4+
window.location.href = "https://mylibrary.life/scanner.html";
5+
})

‎scanner.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<html>
2+
3+
<head>
4+
<script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>
5+
<link rel="preconnect" href="https://fonts.googleapis.com">
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7+
<link href="https://fonts.googleapis.com/css2?family=Khand:wght@600&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="book.css">
9+
</head>
10+
11+
<body>
12+
13+
<div id="buttons">
14+
<video id="vid" autoplay></video>
15+
<button id="scanButton">Scan Again</button><br>
16+
<div id="bartext">The Barcode is :</div>
17+
<div id="barcodeResult"></div>
18+
<buttom id="confirm">Confirm ISBN</buttom>
19+
</div>
20+
<script src="book.js" type="text/javascript"></script>
21+
</body>
22+
23+
</html>

0 commit comments

Comments
 (0)