Page 1 of 2
nuToys - ZXing barcode reader and fpdf
Posted: Fri Jan 22, 2021 10:35 am
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
Re: nuToys - ZXing barcode reader and fpdf
Posted: Fri Jan 22, 2021 11:18 am
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.
Re: nuToys - ZXing barcode reader and fpdf
Posted: Sun Jan 24, 2021 11:06 pm
by miasoft
Very interesting. Can we hope to get the source code of the example?
Re: nuToys - ZXing barcode reader and fpdf
Posted: Mon Jan 25, 2021 3:15 am
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/
Re: nuToys - ZXing barcode reader and fpdf
Posted: Mon Jan 25, 2021 9:34 pm
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">×</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>
Re: nuToys - ZXing barcode reader and fpdf
Posted: Wed Jan 27, 2021 7:09 am
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>
Re: nuToys - ZXing barcode reader and fpdf
Posted: Wed Jan 27, 2021 7:58 am
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">×</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.
Re: nuToys - ZXing barcode reader and fpdf
Posted: Wed Jan 27, 2021 10:01 am
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
Re: nuToys - ZXing barcode reader and fpdf
Posted: Wed Jan 27, 2021 10:38 am
by kev1n
Remove this slash <!DOCTYPE html>/
Re: nuToys - ZXing barcode reader and fpdf
Posted: Wed Jan 27, 2021 11:00 am
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">