[TUTORIAL] BARCODE SCANNING

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

[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
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: [TUTORIAL] BARCODE SCANNING

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


User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
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

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

Re: [TUTORIAL] BARCODE SCANNING

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

Thanks. D Oliveira. Works very well.

jkeble
Posts: 2
Joined: 2020-08-15 18:48

Re: [TUTORIAL] BARCODE SCANNING

Post by jkeble » 2020-08-15 18:56

Hey D oliveira,

I wanted to try this out however your "my files" link does not work anymore? Would you mind sharing your files?

Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Re: [TUTORIAL] BARCODE SCANNING

Post by Moh Youba » 2022-04-21 10:59

Hey sir

I wanted to try this out however your "my files" link does not work anymore? Would you mind sharing your files?

Thank you

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: [TUTORIAL] BARCODE SCANNING

Post by D Oliveira » 2022-04-21 16:59


Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Re: [TUTORIAL] BARCODE SCANNING

Post by Moh Youba » 2022-04-21 21:32

unfortunately, file deleted
deleted.jpg
deleted.jpg (25.9 KiB) Viewed 3972 times

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: [TUTORIAL] BARCODE SCANNING

Post by D Oliveira » 2022-04-22 02:06

Attachments
src.zip
(41.5 KiB) Downloaded 192 times

Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Re: [TUTORIAL] BARCODE SCANNING

Post by Moh Youba » 2022-04-22 14:06

Thank you sir, got it from attachemen, link do now work

best regards,

ecantabra
Posts: 2
Joined: 2022-10-26 06:46

Re: [TUTORIAL] BARCODE SCANNING

Post by ecantabra » 2022-11-11 14:14

Hello,
Thanks for so great contribution D. Oliveira. I have installed it and its working fine in my appgini project.

I have found some issues that i dont know if is possible to fix. Issues are:
1)Barcodes need to be scanned in a vertical possition (like "ladder orientation")
2)Firefox browser (in android version), can´t access to camera in mobile phones, only files.

If you have some information about how to fix them, wil be great.

Thanks in advance for your help.

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: [TUTORIAL] BARCODE SCANNING

Post by D Oliveira » 2022-11-12 20:37

Hello,

There are modern more viable options nowadays, even though I don't use scanning in my workflow anymore, I would look at:

https://github.com/mubaidr/Javascript-Barcode-Reader

ecantabra
Posts: 2
Joined: 2022-10-26 06:46

Re: [TUTORIAL] BARCODE SCANNING

Post by ecantabra » 2022-12-16 12:59

Thank you very much D. Oliveira,

I am testing with your option and others. Also, I found here some interesting alternatives to work with ocr and other IA elements: https://www.edenai.co/

All the Best

Post Reply