Skip to content

Commit 63f94a5

Browse files
CodingWithTashiCodingWithTashi
authored
Merge pull request #21 from massmarz/main
Removed the inline script in barcode.html file and added two properties to set qrbox width and height in web apps
2 parents 2249102 + 7bc4c18 commit 63f94a5

File tree

7 files changed

+90
-47
lines changed

7 files changed

+90
-47
lines changed

‎lib/assets/barcode.html‎

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -20,50 +20,6 @@
2020
<body>
2121
<!-- Div to show the scanner -->
2222
<div id="reader" ></div>
23-
<script>
24-
//refer doc here https://github.com/mebjas/html5-qrcode
25-
const html5QrCode = new Html5Qrcode("reader");
26-
console.log("Starting SCANNING CODE");
27-
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
28-
html5QrCode.stop();
29-
/* handle success for web */
30-
window.parent.postMessage(decodedText, "*");
31-
32-
/* handle success for window */
33-
if (window.chrome.webview != "undefined") {
34-
var param = {
35-
"methodName": "successCallback",
36-
"data": decodedText
37-
}
38-
window.chrome.webview.postMessage(param);
39-
}
40-
41-
};
42-
const config = {
43-
fps: 10,
44-
qrbox: {
45-
width: 280,
46-
height: 120,
47-
aspectRatio: 1.7777778
48-
}
49-
};
50-
51-
// If you want to prefer back camera
52-
html5QrCode.start({
53-
facingMode: "environment"
54-
}, config, qrCodeSuccessCallback);
55-
//html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
56-
57-
//Window event listener
58-
if (window.chrome.webview != undefined) {
59-
window.chrome.webview.addEventListener('message', function(e) {
60-
let data = JSON.parse(JSON.stringify(e.data));
61-
if (data.event === "close") {
62-
html5QrCode.stop();
63-
}
64-
65-
});
66-
}
67-
</script>
23+
<script src="reader.js"></script>
6824
</body>
6925
</html>

‎lib/assets/reader.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
window.parent.addEventListener('reader', (e) => {
2+
const qrBoxWidth = e.detail.qrBoxWidth;
3+
const qrBoxHeight = e.detail.qrBoxHeight;
4+
jsCreateReader(qrBoxWidth, qrBoxHeight);
5+
6+
});
7+
8+
jsCreateReader = (qrBoxWidth, qrBoxHeight) => {
9+
//refer doc here https://github.com/mebjas/html5-qrcode
10+
const html5QrCode = new Html5Qrcode("reader");
11+
console.log("Starting SCANNING CODE");
12+
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
13+
html5QrCode.stop();
14+
/* handle success for web */
15+
window.parent.postMessage(decodedText, "*");
16+
17+
/* handle success for window */
18+
if (window.chrome.webview != "undefined") {
19+
var param = {
20+
"methodName": "successCallback",
21+
"data": decodedText
22+
}
23+
window.chrome.webview.postMessage(param);
24+
}
25+
26+
};
27+
const config = {
28+
fps: 10,
29+
qrbox: {
30+
width: qrBoxWidth,
31+
height: qrBoxHeight,
32+
//aspectRatio: 1.7777778
33+
}
34+
};
35+
36+
// If you want to prefer back camera
37+
html5QrCode.start({
38+
facingMode: "environment"
39+
}, config, qrCodeSuccessCallback);
40+
//html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
41+
42+
//Window event listener
43+
if (window.chrome.webview != undefined) {
44+
window.chrome.webview.addEventListener('message', function (e) {
45+
let data = JSON.parse(JSON.stringify(e.data));
46+
47+
if (data.cmd === undefined)
48+
return;
49+
50+
if (data.event === "close") {
51+
html5QrCode.stop();
52+
}
53+
});
54+
}
55+
56+
};

‎lib/screens/io_device.dart‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ class BarcodeScanner extends StatelessWidget {
1414
final Function(String) onScanned;
1515
final String? appBarTitle;
1616
final bool? centerTitle;
17+
/// Properties only added to standardize the implementation of the BarcodeScanner class
18+
final int scanWidth;
19+
final int scanHeight;
20+
1721
const BarcodeScanner({
1822
Key? key,
1923
required this.lineColor,
@@ -23,6 +27,8 @@ class BarcodeScanner extends StatelessWidget {
2327
required this.onScanned,
2428
this.appBarTitle,
2529
this.centerTitle,
30+
this.scanWidth = 0,
31+
this.scanHeight = 0
2632
}) : super(key: key);
2733

2834
@override

‎lib/screens/unsupported.dart‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ class BarcodeScanner extends StatelessWidget {
99
final Function(String) onScanned;
1010
final String? appBarTitle;
1111
final bool? centerTitle;
12+
/// Properties only added to standardize the implementation of the BarcodeScanner class
13+
final int scanWidth;
14+
final int scanHeight;
15+
1216
const BarcodeScanner(
1317
{Key? key,
1418
this.lineColor = "#ff6666",
@@ -17,7 +21,9 @@ class BarcodeScanner extends StatelessWidget {
1721
this.scanType = ScanType.barcode,
1822
required this.onScanned,
1923
this.appBarTitle,
20-
this.centerTitle})
24+
this.centerTitle,
25+
this.scanWidth = 0,
26+
this.scanHeight= 0})
2127
: super(key: key);
2228

2329
@override

‎lib/screens/web.dart‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// ignore: avoid_web_libraries_in_flutter
22
import 'dart:html' as html;
33
import 'dart:ui' as ui;
4+
import 'dart:js' as js;
45

56
import 'package:flutter/material.dart';
67
import 'package:simple_barcode_scanner/constant.dart';
@@ -15,6 +16,8 @@ class BarcodeScanner extends StatelessWidget {
1516
final Function(String) onScanned;
1617
final String? appBarTitle;
1718
final bool? centerTitle;
19+
final int scanWidth;
20+
final int scanHeight;
1821

1922
const BarcodeScanner({
2023
Key? key,
@@ -25,6 +28,8 @@ class BarcodeScanner extends StatelessWidget {
2528
required this.onScanned,
2629
this.appBarTitle,
2730
this.centerTitle,
31+
this.scanWidth = 288,
32+
this.scanHeight = 120
2833
}) : super(key: key);
2934

3035
@override
@@ -36,8 +41,15 @@ class BarcodeScanner extends StatelessWidget {
3641
..src = PackageConstant.barcodeFileWebPath
3742
..style.border = 'none'
3843
..onLoad.listen((event) async {
39-
/// Barcode listener on success barcode scanned
4044
html.window.onMessage.listen((event) {
45+
/// Create reader setting qrBox width and height
46+
html.CustomEvent event = new html.CustomEvent("reader", detail : {
47+
"qrBoxWidth": scanWidth,
48+
"qrBoxHeight": scanHeight
49+
});
50+
html.window.document.dispatchEvent(event);
51+
52+
/// Barcode listener on success barcode scanned
4153
/// If barcode is null then assign scanned barcode
4254
/// and close the screen otherwise keep scanning
4355
if (barcodeNumber == null) {

‎lib/simple_barcode_scanner.dart‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ class SimpleBarcodeScannerPage extends StatelessWidget {
2525
///center Title
2626
final bool? centerTitle;
2727

28+
/// Only for web apps, set qrBox width and height
29+
final int scanWidth;
30+
final int scanHeight;
31+
2832
/// appBatTitle and centerTitle support in web and window only
2933
/// Remaining field support in only mobile devices
3034
const SimpleBarcodeScannerPage({
@@ -35,6 +39,8 @@ class SimpleBarcodeScannerPage extends StatelessWidget {
3539
this.scanType = ScanType.barcode,
3640
this.appBarTitle,
3741
this.centerTitle,
42+
this.scanWidth = 280,
43+
this.scanHeight = 120
3844
}) : super(key: key);
3945

4046
@override

‎pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ flutter:
3939
assets:
4040
- packages/simple_barcode_scanner/assets/barcode.html
4141
- packages/simple_barcode_scanner/assets/html5-qrcode.min.js
42+
- packages/simple_barcode_scanner/assets/reader.js
4243
#
4344
# For details regarding assets in packages, see
4445
# https://flutter.dev/assets-and-images/#from-packages

0 commit comments

Comments
 (0)