[TUTORIAL] BARCODE SCANNING

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
D Oliveira
Veteran Member
Posts: 167
Joined: 2018-03-04 09:30
Location: Orlando, FL

[TUTORIAL] BARCODE SCANNING

Post by D Oliveira » 2020-03-10 15:41

Works on mobile ;) both iOS and Android

(had to make mods because standard version has several bugs, so use my files

official link -> https://github.com/EddieLa/JOB/tree/gh-pages
my files -> https://gofile.io/?c=YadAvk
demo -> http://eddiela.github.io/JOB/

1 - unzip the src folder inside your appfolder
2- place this code in your home.php

Code: Select all

<style type="text/css">
			
			#bgl{
				width: 250px;
				height: 50px;
				background-image: url('scan.png?r=123456');
				background-size: contain;
				background-repeat: no-repeat;

				
			}				

</style>

 <p style="display:none;font-size: 20px;color: white;" id="textbit"></p>

		<label id="bgl" class="btn custom-input-btn">
		    <input id="Take-Picture" style="display: none;"  type="file" accept="image/*;capture=camera" />
		</label>
				         

<div style="margin:0 auto;width: 250px;" id="containerx">
<canvas width="250" height="240" id="picture"></canvas>

<input  readonly style="text-align: center;font-size: 22px;color:black;font-size: 20px;text-align: center;" id="scan-input2" type="text" placeholder="Scan Product">
			
			
		</div>
		<script type="text/javascript" src="src/JOB.js"></script>
		<script type="text/javascript">
			var takePicture = document.querySelector("#Take-Picture"),
			showPicture = document.createElement("img");
			Result = document.querySelector("#textbit");
			Result2 = document.querySelector("#scan-input2");
			var canvas =document.getElementById("picture");
			var ctx = canvas.getContext("2d");
			JOB.Init();
			JOB.SetImageCallback(function(result) {
				if(result.length > 0){
					var tempArray = [];
					var tempArray2 = [];
					for(var i = 0; i < result.length; i++) {
						tempArray.push(result[i].Format+" : "+result[i].Value);
						tempArray2.push(result[i].Value);
					}
					Result.innerHTML=tempArray.join("<br />");
					document.getElementById("scan-input2").value = tempArray2.join("<br />");
					window.location.assign('code.php?code='+document.getElementById("scan-input2").value);
				}else{
					if(result.length === 0) {
						document.getElementById("scan-input2").value = 'SCAN FAILED';
					}
				}
			});
			JOB.PostOrientation = true;
			JOB.OrientationCallback = function(result) {
				canvas.width = result.width;
				canvas.height = result.height;
				var data = ctx.getImageData(0,0,canvas.width,canvas.height);
				for(var i = 0; i < data.data.length; i++) {
					data.data[i] = result.data[i];
				}
				ctx.putImageData(data,0,0);
			};
			JOB.SwitchLocalizationFeedback(true);
			JOB.SetLocalizationCallback(function(result) {
				ctx.beginPath();
				ctx.lineWIdth = "2";
				ctx.strokeStyle="red";
				for(var i = 0; i < result.length; i++) {
					ctx.rect(result[i].x,result[i].y,result[i].width,result[i].height); 
				}
				ctx.stroke();
			});
			if(takePicture && showPicture) {
				takePicture.onchange = function (event) {
					var files = event.target.files;
					if (files && files.length > 0) {
						file = files[0];
						try {
							var URL = window.URL || window.webkitURL;
							showPicture.onload = function(event) {
								Result.innerHTML="";
								JOB.DecodeImage(showPicture);
								URL.revokeObjectURL(showPicture.src);
							};
							showPicture.src = URL.createObjectURL(file);
						}
						catch (e) {
							try {
								var fileReader = new FileReader();
								fileReader.onload = function (event) {
									showPicture.onload = function(event) {
										Result.innerHTML="";
										JOB.DecodeImage(showPicture);
									};
									showPicture.src = event.target.result;
								};
								fileReader.readAsDataURL(file);
							}
							catch (e) {
								document.getElementById("scan-input2").value = 'SCAN FAILED';
							}
						}
					}
				};
			}
		</script>

3- As you can see we are passing the decoded string val to the file code.php , thats when you have to develop your own code depending on what you're reading and the functionality around it. To check if your code is working remove display:none; from your inputs.

Hope yall like it =)

Cheers!

David O.

User avatar
D Oliveira
Veteran Member
Posts: 167
Joined: 2018-03-04 09:30
Location: Orlando, FL

Re: [TUTORIAL] BARCODE SCANNING

Post by D Oliveira » 2020-03-10 17:03


onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 475
Joined: 2019-05-21 22:42
Contact:

Re: [TUTORIAL] BARCODE SCANNING

Post by onoehring » 2020-03-23 09:46

Hi D Oliveivra,

thanks for sharing. I had a similar request an I recommended another keyboard. This can a) read barcodes and b) do OCR on images (taken directly from the "keyboard"). So I highly recommend (I am not sure, nut I think it's android only): https://play.google.com/store/apps/deta ... dekbd.demo

Olaf
Some postings I was involved, you might find useful:
Backup your database (viewtopic.php?f=4&t=3341); Improve security (viewtopic.php?f=4&t=3168); Field Permissions (viewtopic.php?f=4&t=3308); Custom (error) message (viewtopic.php?f=7&t=1740&p=10871#p10906); Audit Log (viewtopic.php?f=4&t=1369&p=10407); Two Factor Authentication (viewtopic.php?f=7&t=3306&p=11478); Add 2nd SAVE CHANGES button (viewtopic.php?f=2&t=3242&p=11104); Place a search on details view (viewtopic.php?f=2&t=3479&p=12484#p12484); Column-Value-Based-Permissions (viewtopic.php?f=4&t=3498)

Alisson
Veteran Member
Posts: 39
Joined: 2017-02-25 20:32

Re: [TUTORIAL] BARCODE SCANNING

Post by Alisson » 2020-03-23 13:49

Thanks. D Oliveira. Works very well.

Post Reply