Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

nuToys - ZXing barcode reader and fpdf

Questions related to using nuBuilder Forte.
Post Reply
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

nuToys - ZXing barcode reader and fpdf

Unread post by Janusz »

Hi,
Another example of potential new features which might be implemented in nuBuilder.
I call it nuToys :-) - because it's an option I developed but it's not really much used so far in production :-(
But anyway it shows some possibilities.

In the video you can see barcode reader implementation with ZXing library (1D and some 2D barcodes).
You can use Quagga as well and is working fine in nuBuilder (1D barcodes only).
As camera for barcode reader I use old smartphone connected to my PC via Wifi.
You can start as well nuBuilder on the smartphone and use it's camera to read barcode.
As you will see - the barcode scanner is working very fast - but the key player here is just the camera used and how quick it can focus on the barcode.

Addiitonal option is the implementation of fpdf where in the attached example I export separate fotos to one pdf file.

so if someone would be iterested to see these nuToys - it's in the link belowe:
https://drive.google.com/file/d/1xeetEb ... sp=sharing
If you like nuBuilder, please leave a review on SourceForge
Top
apmuthu
Posts: 249
Joined: Sun Dec 06, 2020 6:50 am
Location: Chennai, India, Singapore

Re: nuToys - ZXing barcode reader and fpdf

Unread post by apmuthu »

That's very nice indeed!. Maybe another field type in the offing.
Attached the video in smal 1.8 MB 49 sec mp4 format.
Takes 8 secs to load in VLC player.
You do not have the required permissions to view the files attached to this post.
Top
miasoft
Posts: 156
Joined: Wed Dec 23, 2020 12:28 pm
Location: Russia, Volgograd
Has thanked: 32 times
Been thanked: 7 times
Contact:
Contact miasoft

Re: nuToys - ZXing barcode reader and fpdf

Unread post by miasoft »

Very interesting. Can we hope to get the source code of the example?
Wbr, miasoft.
Top
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

Re: nuToys - ZXing barcode reader and fpdf

Unread post by Janusz »

Hi,
Yes - I can share the nuBuilder implementation code. During next days I will prepare some description how to implement ZXing bar code reader in nuBuilder.
The implementation I did is based on the following code and example:
https://zxing-js.github.io/library/
If you like nuBuilder, please leave a review on SourceForge
Top
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

Re: nuToys - ZXing barcode reader and fpdf

Unread post by Janusz »

Hi,
The example of ZXing bar code reader implementation for nuBuilder is already on the blogspot:
https://nubuilderforte.blogspot.com/202 ... ation.html

The original copy/paste code from my implementation attached.

Code: Select all

// ************************* HTML object ************************************

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" target="_blank" href="core/libs/zxing/bootstrap.min.css">
        <style>
            #* { -webkit-box-sizing: ''; box-sizing: ''; }
        </style>
</head>

 <body>
   <div class="row">
	<div class="col-lg-6">
		<div class="input-group"> <br> . .
			<input id="scanner_result" class="form-control" placeholder="Click button to scan..." type="text" size="30"/> 
			<span class="input-group-btn"> 
				<button class="btn btn-default" type="button" data-toggle="modal" data-target="#livestream_scanner">scan
					<i class="fa fa-barcode"></i>
				</button>
	</span> <br><br>
		</div>  <!-- /input-group -->
	</div>  <!-- /.col-lg-6 -->
</div>  <!-- /.row -->

<style>
    #interactive-video {width: 100%; height: auto}
</style>

<script>
    zxing_main_block();
</script>

<div class="modal" id="livestream_scanner">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">Barcode Scanner</h4>
			</div>
			<div class="modal-body" style="position: static">
        <div id="interactive" class="viewport">
    <video  id="interactive-video" ></video>
</div>
		<div class="error"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
			</div>
		</div> <!-- /.modal-content -->
	</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</body>
</html>


//**********************SETUP HEADER**********************************

<!-- ZXING Bar code reader -->

<script src="core/libs/zxing/zxing.js"></script>
<script src="core/libs/zxing/bootstrap.min.js"></script>

<script>

const codeReader = new ZXing.BrowserMultiFormatReader();
    //const codeReader = new ZXing.BrowserQRCodeReader();

function zxing_main_block() {
$('#livestream_scanner').on('shown.bs.modal', function (e) {
$('#scanner_result').val('Click button to scan...');
    codeReader.decodeFromVideoDevice('', 'interactive-video', (result, err) => {
if (result) {
codeReader.reset();
$('#scanner_result').val(result);
$('#livestream_scanner').modal('hide');
 }
            if (err && !(err instanceof ZXing.NotFoundException)) { $('#scanner_result').val(err); }
 })
     });
$('#livestream_scanner').on('hide.bs.modal', function(e){
codeReader.reset(); 
    });
};

</script>
If you like nuBuilder, please leave a review on SourceForge
Top
miasoft
Posts: 156
Joined: Wed Dec 23, 2020 12:28 pm
Location: Russia, Volgograd
Has thanked: 32 times
Been thanked: 7 times
Contact:
Contact miasoft

Re: nuToys - ZXing barcode reader and fpdf

Unread post by miasoft »

Where can I search this js-files?

Code: Select all

<script src="core/libs/zxing/zxing.js"></script>
<script src="core/libs/zxing/bootstrap.min.js"></script>
Wbr, miasoft.
Top
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

Re: nuToys - ZXing barcode reader and fpdf

Unread post by Janusz »

Hi,
zxing: https://unpkg.com/@zxing/library@latest (and rename after download to zxing.js)
bootstrap: you can take the ones (js and css) from nuBuilder core/libs/bootstrap
and adjust appropriatelly the link/name in the code for example like:

Code: Select all

<script src="core/libs/barcodes/zxing.js"></script>
<script src="core/libs/bootstrap/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" target="_blank" href="core/libs/bootstrap/bootstrap.min.css">
In my case I use sligtly modified older version of bootstrap - but configuration as above is OK as well - but you need to fine tune the css.
As well in the zxing code I removed some logs generating messages to console (but it's not necessary).

and then in html object with configuration as above just use this code:

Code: Select all

<!DOCTYPE html>/
<html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" target="_blank" href="core/libs/bootstrap/bootstrap.min.css">

        <style>
            *, ::after, ::before { box-sizing: unset;}
            .modal-header { display: unset;}
            .btn {background-color: lightgrey;}
            body {font-family: unset;}
        </style>

     </head>

  <body>


<div>
    <br><br> . .
 				<button type="button" data-toggle="modal" style="height:35px;" data-target="#livestream_scanner">Scan
					<i class="fa fa-barcode"></i>
				</button>
				<br><br>
			<input id="scanner_result" placeholder="Click button to scan..." style="width:230px;" type="text"/> 

 </div>


<script>
    zxing_main_block();
</script>



<style>
	#interactive.viewport {position: relative; width: 100%; height: auto; overflow: hidden; text-align: center; }
	#interactive.viewport > canvas, #interactive.viewport > video {max-width: 100%;width: 100%; }
	canvas.drawing, canvas.drawingBuffer {position: absolute; left: 0; top: 0; }
</style>

<style>
#interactive-video {
    width: 100%;
   height: auto;
}
</style>


<div class="modal" id="livestream_scanner">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
 <h2 class="modal-title" id="myModalLabel">ZXing BarCode Reader</h2>
			</div>
			<div class="modal-body" style="position: static">
<div id="interactive" class="viewport">
    <video  id="interactive-video" ></video>
    </div>
</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
			</div>
			
		</div>
	</div> 
</div> 

</body>
</html>
So good luck and let us know if it's working.
If you like nuBuilder, please leave a review on SourceForge
Top
miasoft
Posts: 156
Joined: Wed Dec 23, 2020 12:28 pm
Location: Russia, Volgograd
Has thanked: 32 times
Been thanked: 7 times
Contact:
Contact miasoft

Re: nuToys - ZXing barcode reader and fpdf

Unread post by miasoft »

Thanks Janusz! I did all as above: download, rename,insert code in NU-header, put to directory and etc.
Then I create html-obj, in HTML-tab insert code:
27.01_3.png
I open form and see:
27.01_4.png
Click Button do nothing.
P.S. I see only one error:
Uncaught SyntaxError: expected expression, got '<' index.php:202
27.01_6.png
You do not have the required permissions to view the files attached to this post.
Wbr, miasoft.
Top
kev1n
nuBuilder Team
Posts: 4288
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 442 times
Contact:
Contact kev1n

Re: nuToys - ZXing barcode reader and fpdf

Unread post by kev1n »

Remove this slash <!DOCTYPE html>/
Top
Janusz
nuBuilder Team
Posts: 506
Joined: Fri Dec 28, 2018 1:41 pm
Location: Krakow, Poland
Has thanked: 8 times
Been thanked: 18 times

Re: nuToys - ZXing barcode reader and fpdf

Unread post by Janusz »

and check if the links are properly assigned for the files on your computer (adjust approprautielly):

Code: Select all

<script src="core/libs/barcodes/zxing.js"></script>
<script src="core/libs/bootstrap/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" target="_blank" href="core/libs/bootstrap/bootstrap.min.css">
If you like nuBuilder, please leave a review on SourceForge
Top
Post Reply

Return to “General”