J4L Barcodes for Javascript,
User Guide
Copyright J4L (http://www.java4less.com)
2008
- Introduction
- Barcode 1D
- Introduction
- How to use the Javascript
- Properties and methods
of the class
- Datamatrix
- Introduction
- How to use the Javascript
- Properties and methods
of the class
- QRCode
- Introduction
- How to use the Javascript
- Properties and methods
of the class
- PDF417
- Introduction
- How to use the Javascript
- Properties and methods
of the class
Introduction
J4L Barcoding javascripts are
100% standalone javascripts which run in the browser and do not required
any programing in the server side. The scripts will be download from the
server together with your HTML pages and will locally calculate and render
the barcode.
The scripts do not create images,
instead they create the barcodes using standard HTML component like tables
or IMG tags.
There are currently 2 approaches
for rendering the barcodes:
- table:
the barcode will be rendered as a html table where some cells in the
table have a black background and others have a white background. This
approach executes very fast but if you want to print the barcode you
need to enable background color printing in your browser (this is disabled
by default in most browsers). In order to enable background color printing
in must:
- In Internet Explorer,
select tools-> options -> advanced -> printing -> print background
colors and images
- In Firefox with File
-> page setup -> print background (colors & images)
- table with images:
the barcode will be rendered as a html table where the some cells will
be empty and other contain an image (which is the barcode module, a
black dot). There are module images for different sizes ranging from
1 to 6 pixels which are available in the server and will be download
by the browser. This approach is slower since the images need to be
downloaded but you can print the barcode without enabling the background
color printing.
Installation of the javascript
Before you use the javascript
in your html pages you have to upload the scripts to your web server.
The delivered files must be uploaded in the following way::
- create subdirectory called
js in your server. You will place the scripts in this directory.
- upload the content of the
obfuscated subdirectory in our delivery to the js
directory in the server.
- create subdirectory called
images in your server. You will place the module images in this
directory.
- upload the content of the
images subdirectory in our delivery to the images
directory in the server.
Barcode
1D
Introduction
The J4L Barcode 1D javascript
includes the following 1D symbologies:
- Code 128
- Code 39 (regular and extended)
- Code 11
- Codabar
- Code 93 (regular and extended)
- EAN 128
- EAN 13
- EAN 8
- UPC E and UPC A
- Interleaved 2 of 5
- Industrial 2 of 5
- Postnet
- MSI
- Matrix 2 of 5
How to use the javascript
The following steps must be
performed for creating a barcode 1D in your HTML page:
- import the barcode scripts
with the following code in your html header. Note the example assumes
the scripts are located in the js subdirectory.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript" src="js/J4LBarcode1D.js">
</script>
- in your HTML body you create
an element with the DIV tag. Note we use an id called barcode in
this example:
<body>
....
<div id="barcode">
</div>
...
- your create a javascript
function in the html header which will write the barcode into the DIV
tag you have created:
<html>
<head>
<script type="text/javascript" src="js/J4LBarcode1D.js">
</script>
<script type="text/javascript"
>
function updateBarcode() {
var bc=new J4LBarcode(); // create Barcode object
bc.code='123456789012'; // THIS IS THE VALUE TO BE ENCODED
bc.barType=J4LBarcode.CODE128; //
create a 128 barcode
bc.barHeightPixels=30; // height of bars
bc.X=1; // width of narrow bars
bc.Code128Set='B'; // A, B or C
bc.renderUsingImages=false;
//
create barcode bitmap
var m=bc.paint();
// create barcode html code
var s=bc.renderCode(m);
// update barcode DIV element
document.getElementById("barcode").innerHTML=s;
}
</script>
</head>
- Execute the previous function
whenever you want to create the barcode.
Properties of the Javascript
class
The J4LBarcode class supports
the following properties an methods:Properties
- barType:
Symbology to be used, valid values are: J4LBarcode.BAR39, J4LBarcode.BAR39EXT,
J4LBarcode.INTERLEAVED25, J4LBarcode.CODE11, J4LBarcode.CODABAR, J4LBarcode.MSI,
J4LBarcode.UPCA, J4LBarcode.IND25, J4LBarcode.MAT25, J4LBarcode.CODE93,
J4LBarcode.EAN13, J4LBarcode.EAN8, J4LBarcode.UPCE, J4LBarcode.CODE128
, J4LBarcode.CODE93EXT, J4LBarcode.POSTNET and J4LBarcode.EAN128.
- supplement:
user defined 2 or 5 digit supplement for EAN or UPC codes.
- checkCharacter:
if true, the checksum character will be calculated and appended to the
code. Default value is true.
- codeText: text
after encoding. It will contain the appenden checksum, if calculated.
- barHeightPixels:
bar height in pixels. If 0 it will be calculated using H.
- textFont: font of
the text. The default is "Arial". Set it to null to remove the text
below the barcode.
- textFontSize: default
is 1.
- UPCESytem: system
to be used in UPCE. It can be "0" or "1". The default is "1".
- CODABARStartChar:
start character for CODABAR. The default is A.
- CODABARStopChar:
stop character for CODABAR. The default is B.
- UPCEANSupplement2:
(default false) add 2 digit supplement for EAN or UPC codes.
- UPCEANSupplement5:
(default false) add 5 digit supplement for EAN or UPC codes.
- Code128Set:
set of character to be used in code 128. Possible values are 'A', 'B'
or 'C' (only for numeric codes). The default is 'B'.
- X: size in
pixels of modules (narrow bars or spaces). The resolution is used to
converto to pixels.
- N: multiplicator
value for width bars. A value of 2 (default) means that wide bars will
be 2*N wide.
- I: space
between 2 characters (code 39). This a multiplicator of X. The default
is 1.
- H: height
of bars. This a multiplicator of X. The default is 0.45.
- supSeparation:
Separation in pixels between the barcode and the supplement.
- processTilde:
process ~ in code?, if so the var ~dNNN will be replaced by the character
for the ascii value NNN. For example d065 stands for A
- supHeight: height
of the supplement. This is a multiplicator of the height of the code.
The default is 0.8 (80%).
- renderUsingImages:
(default false) set it to true to render the bars using images instead
of colors.
.
Methods
- paint(): create
the barcode and return the barcode bitmap. Additionally you must to
execute the renderCode() function to render the output of the
paint() function. The example above shows how to use it.
- renderCode():
creates the HTML code which renders the barcode.
Datamatrix
Introduction
Data Matrix is a two-dimensional
(2D) matrix symbology which is made up of square modules arranged within
a perimeter finder pattern. It can encode up to 3116 characters from the
entire 256 byte ASCII character set. The symbol consists of data regions
which contain square modules set out in a regular array. Large ECC 200
symbols contain several regions. Each data region is delimited by a finder
pattern, and this is surrounded on all four sides by a quiet zone border
(margin).
ECC 200 symbols have an even
number of rows and an even number of columns. Most of the symbols are
square with sizes from 10 x 10 to 144 x 144. Some symbols however are
rectangular with sizes from 8 x 18 to 16 x 48. All ECC 200 symbols can
be recognized by the upper right corner module being light (binary 0).
ECC200 is the newest version
of data matrix and supports advanced encoding error checking and correction
algorithms (reed-solomon). This algorithms allow the recognition of barcodes
that are up to 60% damaged.
The barcode supports two optional
mechanisms:
- The "Extended Channel
Interpretation" (ECI) mechanism enables characters from other character
sets (e.g. Arabic, Cyrillic ..) and other data interpretations or industry-specific
requirements to be represented.
- The "Structured append"
allows files of data to be represented as a secuence of up to 16 Data
Matrix symbols. The original data or file can be reconstructed regardless
of the order of the symbols.
J4L DataMatrix supports:
- All sizes and formats (from
10x10 till 144x144)
- Ascii, text , C40 and Base256
(for binary data) encoding.
- The "Extended Channel
Interpretation and Structured append
Formats
RDataMatrix supports all data
matrix formats. The following table contains the size , the capacity and
the correction error features of each format
|
Size
|
Numeric Capacity
|
Alphanumeric capacity
|
Binary capacity
|
Max Correctable
Error/Erasure
|
| 10 x 10 |
6
|
3
|
1
|
2
|
| 12 x 12 |
10 |
6 |
3 |
3 |
| 14 x 14 |
16 |
10 |
6 |
5/7 |
| 16 x 16 |
24 |
16 |
10 |
6/9 |
|
18 x 18
|
36
|
25
|
16
|
7/11
|
| 20 x 20 |
44 |
31 |
20 |
9/15 |
|
22 x 22
|
60
|
43
|
28
|
10/17
|
|
24 x 24
|
72
|
52
|
34
|
12/21
|
|
26 x 26
|
88
|
64
|
42
|
14/25
|
| 32 x 32 |
124 |
91 |
60 |
18/33 |
| 36 x 36 |
172 |
127 |
84 |
21/39 |
| 40 x 40 |
228 |
169 |
112 |
24/45 |
| 44 x 44 |
288 |
214 |
142 |
28/53 |
| 48 x 48 |
348 |
259 |
172 |
34/65 |
| 52 x 52 |
408 |
304 |
202 |
42/78 |
| 64 x 64 |
560 |
418 |
278 |
56/106 |
| 72 x 72 |
736 |
550 |
366 |
72/132 |
| 80 x 80 |
912 |
682 |
454 |
96/180 |
| 88 x 88 |
1152 |
862 |
574 |
112/212 |
| 96 x 96 |
1392 |
1042 |
694 |
136/260 |
| 104 x 104 |
1632 |
1222 |
814 |
168/318 |
| 120 x 120 |
2100 |
1573 |
1048 |
204/390 |
| 132 x 132 |
2608 |
1954 |
1302 |
248/472 |
| 144 x 144 |
3116 |
2335 |
1556 |
310/590 |
| 8 x 18 |
10 |
6 |
3 |
3 |
| 8 x 32 |
20 |
13 |
8 |
5 |
| 12 x 26 |
32 |
22 |
14 |
7/11 |
| 12 x 36 |
44 |
31 |
20 |
9/15 |
| 16 x 36 |
64 |
46 |
30 |
12/21 |
| 16 x 48 |
98 |
72 |
47 |
14/25 |
Encoding
The data represented in the
symbol is can be compressed using one or several of the following algorithms:
- ASCII: it is used to encode
data that mainly contains ascii characters (0-127). It encodes one alphanumeric
or two numeric characters per byte.
- C40: it is used to encode
data that mainly contains numeric and upper case characters. C40 encodes
three alphanumeric data characters into two bytes.
- TEXT: it is used to encode
data that mainly contains numeric and lowercase characters. TEXT encodes
three alphanumeric data characters into two bytes.
- BASE256: it is used
to encode 8 bit values.
All encoding systems can be
used to encode any data, but for example, encoding binary data with C40
generates much more overhead (longer symbol) than with BASE256.
Control characters
J4L DataMatrix uses the character
~ (tilde) to recognize some special characters in the input data. The
following possibilities are available:
- ~X is used to represent
character values from 0 to 26. Replace the X like in the following
example ~@ = means character ascii 0, ~A= means character 1, ~B=means
character 2, ~C=means character 3 ...
- ~1: represents the character
FNC1. When FNC1 appears in the first position (or in the fifth position
of the first symbol of a Structured Append), it will indicate that the
data conforms to the UCC/EAN Application Identifier standard format.
- ~2: It is used to represent
Structured Append. Structured Append is used to link information from
several symbols in a secuence. The ~2 must be followed by 3 additional
bytes. The first 4 bits of thie first byte identify the position of
the particular symbol in the secuence . The last 4 bits identify the
total number of symbols in the secuence. The second and third byte are
used as a file identifier are can have a value between 1 and 254 (up
to 254*254=64516 identifiers). See Data Matrix Specification for more
information about this (ISO 16022).
- ~3: This character are only
allowed in the first position of the symbol. It indicates that the data
contains commands for the barcode reader.
- ~4: not allowed.
- ~5 and ~6: These characters
are only allowed in the first position of the symbol. If ~5 is used
the header [)> ascii30 ascii05 ascii29 will
be transmitted by the barcode reader before the data in the symbol and
the trailer ascii30 ascii04 will be transmitted after
the data. If a ~6 is used , the header [)> ascii30 ascii05
ascii29 will be transmittedby the reader before the data and
the trailer ascii30 ascii04 will be transmitted afterwards.
- ~7NNNNNN specifies the Extended
Channel to be used, where NNNNNN is a value between and 000000 - 999999.
For example: ~7000010 means Extended Channel 10 . Extended channel is
used for using other character sets other than ascii. See Data Matrix
Specification for more information about this (ISO 16022).
- ~dNNN represents the ascii
character encoded by the 3 digits NNN. For exmaple, ~d065 represents
the character 'A'.
How to use the javascript
The following steps must be
performed for creating a datamatrix in your HTML page:
- import the datamatrix scripts
with the following code in your html header. Note the example assumes
the scripts are located in the js subdirectory.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript" src="js/J4LDatamatrix.js">
</script>
- in your HTML body you create
an element with the DIV tag. Note we use an id called datamatrix
in this example:
<body>
....
<div id="datamatrix">
</div>
...
- your create a javascript
function in the html header which will write the barcode into the DIV
tag you have created:
<html>
<head>
<script type="text/javascript" src="js/J4LDatamatrix.js">
</script>
<script type="text/javascript"
>
function updateBarcode() {
var dm=new J4LDatamatrix(); // create Datamatrix object
dm.code='THIS IS THE VALUE TO BE ENCODED';
dm.encoding=J4LDatamatrix.E_AUTO; // automatic encoding mode
dm.preferredFormat=-1; // automatic selection of the format
dm.processTilde=false;
// example how to encode binary data
// bytes=[1,2,3,4,5,6,7,8];
// dm.codeBinary=bytes;
var
bitmap=dm.paint(); // create barcode bitmap
// create barcode html code from the bitmap
// parameters of the renderDatamatrix() function
// 1. the bitmap
// 2. use images (true) or background colors (false)
// 3. size in pixels of the modules (1 to 6)
var s=renderDatamatrix(bitmap,false,3);
// update datamatrix DIV element
document.getElementById("datamatrix").innerHTML=s;
}
</script>
</head>
- Execute the previous function
whenever you want to create the barcode.
Properties of the Javascript
class
The J4LDatamatrix class
supports the following properties an methods:
Properties
- processTilde:
if true (default is false) the class will process the ~ character in
the input data (see help file for more information ).
- encoding:
selects the encoding you want to use: J4LDatamatrix.E_AUTO, J4LDatamatrix.E_ASCII
(default), J4LDatamatrix.E_C40, J4LDatamatrix.E_TEXT or J4LDatamatrix.E_BASE256.
- preferredFormat:
if -1 (default) , the class wil automatically select the format of the
symbol. Otherwise you must specify a value (J4LDatamatrix.C10X10
till J4LDatamatrix.C144X144).
- code: text
to be encoded
- codeBinary:
if you want to encode binary data, use this property which must be set
to an array of bytes (integer values between 0 and 255) .
Methods
- paint(): create
the barcode and return the barcode bitmap. Additionally you must to
execute the renderDatamatrix() function to render the output
of the paint() function. The example above shows how to use it.
QRCode
Introduction
QR Code is a matrix symbology
which includes a finder pattern located at three corners of the symbol
used to locate the symbol and figure out its size and orientation.
The main features of QRCode
symbols are:
- There are 40 sizes of QR
Code symbols (called Version 1, Version 2 till Version 40). Version
1 measures 21 modules * 21 modules, Version 2 measures 25 modules *
25 modules and so on. Version 40 measures 177 modules * 177 modules.
- The following data can be
encoded:
- Numeric data (digits
0-9).
- Alphanumeric characters
, digits 0 - 9; upper case letters A -Z and nine other characters:
space, $ % * + - . / :
- Byte data (bytes 0-255)
- Kanji characters (
hexadecimal values 8140 -9FFC and E040 - EBBF )
- Symbol size is 21 * 21 modules
to 177 * 177 modules (Versions 1 to 40, increasing in steps of 4 modules
per side).
- The maximum number of characters
encoded in one symbol (without structured append) is:
- Numeric data: 7089 characters
- Alphanumeric data: 4296
characters
- Byte data: 2953 characters
- Kanji data: 1817 characters
- Supports 4 error correction
levels:
- L ( 7% of the symbol
codewords).
- M ( 15% of the symbol
codewords).
- Q ( 25% of the symbol
codewords).
- H ( 30% of the symbol
codewords).
- Structured append (optional)
This allows files of data to be represented logically in up to 16 QR
Code symbols.
- Extended Channel Interpretation
(optional): enables data using character sets other than the default
set (e.g. Arabic, Cyrillic, Greek).
- FNC1 indicators: FNC1 mode
is used for messages containing data formatted either in accordance
with the UCC/EAN Application Identifiers standard or in accordance with
a specific industry standard previously agreed with AIM International.
J4L-QRCode supports:
- QRCode mode 2 symbols (not
mode 1)
- All versions 1-40. Automatic
selection of the version is also supported.
- All encoding method (numeric,
alphanumeric, byte and kanji). Automatic selection of the encoding method
is also supported.
- Structured append.
- Extended Channel Interpretation
(only 1 per symbol, no nesting supported).
- All 4 error correction levels.
- FNC1 indicators.
Table — Data
capacity for QRCode versions
|
Version
|
Error
Correction Level
|
Numeric
|
Alphanumeric
|
Byte
|
Kanji
|
|
1
|
L
M
Q
H
|
41
34
27
17
|
25
20
16
10
|
17
14
11
7
|
10
8
7
4
|
|
2
|
L
M
Q
H
|
77
63
48
34
|
47
38
29
20
|
32
26
20
14
|
20
16
12
8
|
|
3
|
L
M
Q
H
|
127
101
77
58
|
77
61
47
35
|
53
42
32
24
|
32
26
20
15
|
|
4
|
L
M
Q
H
|
187
149
111
82
|
114
90
67
50
|
78
62
46
34
|
48
38
28
21
|
|
5
|
L
M
Q
H
|
255
202
144
106
|
154
122
87
64
|
106
84
60
44
|
65
52
37
27
|
|
6
|
L
M
Q
H
|
322
255
178
139
|
195
154
108
84
|
134
106
74
58
|
82
65
45
36
|
|
7
|
L
M
Q
H
|
370
293
207
154
|
224
178
125
93
|
154
122
86
64
|
95
75
53
39
|
|
8
|
L
M
Q
H
|
461
365
259
202
|
279
221
157
122
|
192
152
108
84
|
118
93
66
52
|
|
9
|
L
M
Q
H
|
552
432
312
235
|
335
262
189
143
|
230
180
130
98
|
141
111
80
60
|
|
10
|
L
M
Q
H
|
652
513
364
288
|
395
311
221
174
|
271
213
151
119
|
167
131
93
74
|
|
11
|
L
M
Q
H
|
772
604
427
331
|
468
366
259
200
|
321
251
177
137
|
198
155
109
85
|
|
12
|
L
M
Q
H
|
883
691
489
374
|
535
419
296
227
|
367
287
203
155
|
226
177
125
96
|
|
13
|
L
M
Q
H
|
1022
796
580
427
|
619
483
352
259
|
425
331
241
177
|
262
204
149
109
|
|
14
|
L
M
Q
H
|
1101
871
621
468
|
667
528
376
283
|
458
362
258
194
|
282
223
159
120
|
|
15
|
L
M
Q
H
|
1250
991
703
530
|
758
600
426
321
|
520
412
292
220
|
320
254
180
136
|
|
16
|
L
M
Q
H
|
1408
1082
775
602
|
854
656
470
365
|
586
450
322
250
|
361
277
198
154
|
|
17
|
L
M
Q
H
|
1548
1212
876
674
|
938
734
531
408
|
644
504
364
280
|
397
310
224
173
|
|
18
|
L
M
Q
H
|
1725
1346
948
746
|
1046
816
574
452
|
718
560
394
310
|
442
345
243
191
|
|
19
|
L
M
Q
H
|
1903
1500
1063
813
|
1153
909
644
493
|
792
624
442
338
|
488
384
272
208
|
|
20
|
L
M
Q
H
|
2061
1600
1159
919
|
1249
970
702
557
|
858
666
482
382
|
528
410
297
235
|
|
21
|
L
M
Q
H
|
2232
1708
1224
969
|
1352
1035
742
587
|
929
711
509
403
|
572
438
314
248
|
|
22
|
L
M
Q
H
|
2409
1872
1358
1056
|
1460
1134
823
640
|
1003
779
565
439
|
618
480
348
270
|
|
23
|
L
M
Q
H
|
2620
2059
1468
1108
|
1588
1248
890
672
|
1091
857
611
461
|
672
528
376
284
|
|
24
|
L
M
Q
H
|
2812
2188
1588
1228
|
1704
1326
963
744
|
1171
911
661
511
|
721
561
407
315
|
|
25
|
L
M
Q
H
|
3057
2395
1718
1286
|
1853
1451
1041
779
|
1273
997
715
535
|
784
614
440
330
|
|
26
|
L
M
Q
H
|
3283
2544
1804
1425
|
1990
1542
1094
864
|
1367
1059
751
593
|
842
652
462
365
|
|
27
|
L
M
Q
H
|
3517
2701
1933
1501
|
2132
1637
1172
910
|
1465
1125
805
625
|
902
692
496
385
|
|
28
|
L
M
Q
H
|
3669
2857
2085
1581
|
2223
1732
1263
958
|
1528
1190
868
658
|
940
732
534
405
|
|
29
|
L
M
Q
H
|
3909
3035
2181
1677
|
2369
1839
1322
1016
|
1628
1264
908
698
|
1002
778
559
430
|
|
30
|
L
M
Q
H
|
4158
3289
2358
1782
|
2520
1994
1429
1080
|
1732
1370
982
742
|
1066
843
604
457
|
|
31
|
L
M
Q
H
|
4417
3486
2473
1897
|
2677
2113
1499
1150
|
1840
1452
1030
790
|
1132
894
634
486
|
|
32
|
L
M
Q
H
|
4686
3693
2670
2022
|
2840
2238
1618
1226
|
1952
1538
1112
842
|
1201
947
684
518
|
|
33
|
L
M
Q
H
|
4965
3909
2805
2157
|
3009
2369
1700
1307
|
2068
1628
1168
898
|
1273
1002
719
553
|
|
34
|
L
M
Q
H
|
5253
4134
2949
2301
|
3183
2506
1787
1394
|
2188
1722
1228
958
|
1347
1060
756
590
|
|
35
|
L
M
Q
H
|
5529
4343
3081
2361
|
3351
2632
1867
1431
|
2303
1809
1283
983
|
1417
1113
790
605
|
|
36
|
L
M
Q
H
|
5836
4588
3244
2524
|
3537
2780
1966
1530
|
2431
1911
1351
1051
|
1496
1176
832
647
|
|
37
|
L
M
Q
H
|
6153
4775
3417
2625
|
3729
2894
2071
1591
|
2563
1989
1423
1093
|
1577
1224
876
673
|
|
38
|
L
M
Q
H
|
6479
5039
3599
2735
|
3927
3054
2181
1658
|
2699
2099
1499
1139
|
1661
1292
923
701
|
|
39
|
L
M
Q
H
|
6743
5313
3791
2927
|
4087
3220
2298
1774
|
2809
2213
1579
1219
|
1729
1362
972
750
|
|
40
|
L
M
Q
H
|
7089
5596
3993
3057
|
4296
3391
2420
1852
|
2953
2331
1663
1273
|
1817
1435
1024
784
|
How to use
the javascript
The following
steps must be performed for creating a QR Code in your HTML page:
- import the QR Code scripts
with the following code in your html header. Note the example assumes
the scripts are located in the js subdirectory.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript" src="js/J4LQRCode.js">
</script>
- in your HTML body you
create an element with the DIV tag. Note we use an id called qrcode
in this example:
<body>
....
<div id="qrcode">
</div>
...
- you create a javascript
function in the html header which will write the barcode into the
DIV tag you have created in the previous step:
<html>
<head>
<script type="text/javascript"
src="js/J4LQRCode.js">
</script>
<script type="text/javascript"
>
function updateBarcode() {
var bc=new J4LQRCode(); // create barcode object
bc.setCode("Value to be encoded"); // set value to be
encoded
bc.setEncoding(J4LQRCode.ENC_AUTO); // set encoding mode
/* example how to encode encode Kanji data
bc.setEncoding(J4LQRCode.ENC_KANJI);
bc.setCodeBinary([0x8140,0x8141,0x8143,0x8140]);
*/
// example how to change error correction level:
// bc.setCorrectionLevel(J4LQRCode.CORRECTION_LEVEL_H);
// create barcode bitmap
var m=bc.paint();
// create barcode html code from the bitmap
// parameters of the renderQRCode() function
// 1. the bitmap
// 2. use images (true) or background colors (false)
// 3. size in pixels of the modules (1 to 6)
var s=renderQRCode(m,false,3);
// update qrcode DIV element
document.getElementById("qrcode").innerHTML=s;
}
</script>
</head>
- Execute the previous
function whenever you want to create the barcode.
Properties
of the Javascript class
The J4LQRCode
class supports the following properties an methods:
Methods
- setPreferredVersion():
use this configuration if possible. Valid values are 1 to 40.
- setCode():
text to be painted as barcode.
- setCodeBinary():
if you want to encode binary or Kanji data use this method to pass
an array of integer values.
- setECI():
Extended Channel Interpretation. The default value is -1 (disabled).
- setEncoding():
Encoding mode (default is J4LQRCode.ENC_AUTO). Valid values
are:
- J4LQRCode.ENC_AUTO:
Automatic selecting of the encoding method.
- J4LQRCode.ENC_ALPHA:
encode alpahnumeric characters only (upper case letter plus
9 additional characters).
- J4LQRCode.ENC_NUMERIC:
encode alpahnumeric digits only.
- J4LQRCode.ENC_BYTE:
use this mode to encode binary data.
- J4LQRCode.ENC_KANJI:
encodes Kanji characters only.
- setErrorCorrectionLevel():
Error correction level. Valid values are:
- J4LQRCode.CORRECTION_LEVEL_L
(default). About 7% recovery capacity.
- J4LQRCode.CORRECTION_LEVEL_M:
About 15% recovery capacity.
- J4LQRCode.CORRECTION_LEVEL_Q:
About 25% recovery capacity.
- J4LQRCode.CORRECTION_LEVEL_H:
About 30% recovery capacity.
- setProcessTilde():process
tilde. if true (default) the tilde character (~) will be processed
like this:
- ~~: will be replaced
with ~
- ~dxxx: will be
replaced by the character whose ascii code is xxx. For example
~d065 will be replaced with A.
- setFnc1Mode():
sets the FNC1 mode ( J4LQRCode.FNC1_MODE_NO, J4LQRCode. FNC1_MODE_FIRST
or J4LQRCode.FNC1_MODE_SECOND)
- setApplicationIndicator():
application indicator if Fnc1Mode is FNC1_MODE_SECOND.
- setAutoConfigurate():
allow automatic selection of a larger configuration (than the preferred)
if code is too large.
- setStructuredAppend():
activate structured append.
- setStructuredAppendCounter():
number of symbols in structured append (value 1 to 16).
- setStructuredAppendIndex():
current symbol in structured append (value 1 to 16) .
- paint(): create
the barcode and return the barcode matrix. Additionally you have
to execute the renderQRCode() function to render the output of the
paint() function. The example above shows how to use it.
PDF
417 and Macro PDF 417
Introduction
PDF stands for
“Portable Data File.” A two-dimensional symbology (2D), a single PDF417
symbol carries up to 1.1 kilobytes of machine-readable data in a space
no larger than a standard bar code. And, unlike one-dimensional bar
codes (1D), which are just a key linked to a database, PDF417 symbols
contain the database itself. That means, you don't have to store an
article number in the barcode but you can also store the name , the
size , the color, the name of the manufacturer etc...
The basic characteristics
are:
- Each PDF417 symbol consists
of a stack of vertically aligned rows with a minimum of 3 rows (maximum
90 rows). Each row can have 1 to 30 columns.
- Three compaction modes:
- Text Compaction
mode allows all printable ASCII characters to be encoded (i.e.
values 32 to126 and some additional control characters)
- Byte Compaction
mode allows any byte values to be encoded.
- Numeric Compaction
is a more efficient mode for encoding numeric data
- The maximum capacity
is (at error correction level 0):
- Text Compaction
mode: 1 850 characters
- Byte Compaction
mode: 1 108 characters
- Numeric Compaction
mode: 2 710 characters
- Macro PDF417: this feature
allows large amount of data to be encoded in a secuence of linked
PDF417 symbols. Up to 99 999 different PDF417 symbols can be concatenated
using this mechanism.
- Compact PDF417: In clean
environments, it is possible to reduce the size of the symbol by
removing some non-data bars.Parameters
How to use
the javascript
The following
steps must be performed for creating a PDF417 in your HTML page:
- import the PDF417 scripts
with the following code in your html header. Note the example assumes
the scripts are located in the js subdirectory.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<script type="text/javascript"
src="js/J4LPDF417.js">
</script>
- in your HTML body you
create an element with the DIV tag. Note we use an id called
pdf417 in this example:
<body>
....
<div id="pdf417">
</div>
...
- your create a javascript
function in the html header which will write the barcode into the
DIV tag you have created:
<html>
<head>
<script type="text/javascript"
src="js/J4LPDF417.js">
</script>
<script type="text/javascript"
>
function updateBarcode() {
var bc=new J4LPDF417(); // create PDF417 object
bc.code="Value to be encoded";
bc.PDFColumns=6;
bc.PDFECLevel=3;
bc.PDFMode=J4LPDF417.PDF_BINARY;
var
bitmap=bc.paint(); // create barcode bitmap
// create barcode html code from the bitmap
// parameters of the renderPDF417Code() function
// 1. the bitmap
// 2. width of barcode
// 3. height of bars
var s=renderPDF417Code(bitmap,1,4);
// update pdf417 DIV element
document.getElementById("pdf417").innerHTML=s;
}
</script>
</head>
- Execute the previous
function whenever you want to create the barcode.
Properties
of the Javascript class
The properties
of the J4LPDF417 class are:
- PDFColumns: number
of columns for PDF417 (value between 3 and 30).
- PDFECLevel: error
correction level for PDF417 (value between 0 and 8).
- PDFMode : mode
can be J4LPDF417.NUMERIC, J4LPDF417.TEXT or J4LPDF417.BINARY.
- PDFRows: number
of rows for PDF417 (value between 3 and 90 where number of rows
* number of columns should be less than 928).
- PDFMaxRows: maximum
number of rows for PDF417 (optional).
the Macro PDF417 properties
are:
-
PDFMacroFileId:
file identifier. This id must be the same for all segments belonging
to the same barcode.
-
PDFMacroSegment:
current segment to be printed. Set it to -1 to disable the Macro
PDF feature.
-
PDFMacroAddresse:
(optional) Addresse field of the macro pdf barcode.
-
PDFMacroSender:
(optional) Sender field of the macro pdf barcode.
-
PDFMacroFileName:
(optional) File name field of the macro pdf barcode.
-
PDFMacroFileSize:
(optional) total number of bytes encoded.
-
PDFMacroLastSegment:
(optional) you must set this propery to true in the last segment
if you are manually creating the barcode (see below).
-
PDFMacroTimestamp:
(optional) timestamp (this number be a numeric value) field of the
macro pdf barcode .
-
PDFMacroSegmentCount:
(optional) total number of segments.
Macro PDF
barcodes can be created in 2 ways:
Automatic creation. You
let the control calculate the number of segments:
barcode.code="valuetoencode";
barcode.PDFMacroFileId = "abc";
barcode.PDFRows = 5;
barcode.PDFMaxRows = 30;
barcode.resetMacroPDF();
//
calculate number of segments and split the value
barcode.prepareMacroPDF();
// paint each
segment
for (var i=0 ; i < barcode.PDFMacroSegmentCount; i++) {
barcode.PDFMacroSegment =i;
//paint
var bitmap=barcode.paint();
var s=renderPDF417Code(bitmap,1,4);
// now output the html code s somewhere in you html page
}
Manual creation. If you know the number of segments you need you
can split the data yourself:
barcode.PDFMacroFileId = "abc";
barcode.PDFRows = 5;
barcode.PDFMaxRows = 30;
barcode.PDFMacroSegmentCount=2; //
we will create 2 segments
//paint segment 1
barcode.pdfcode="valuetoencode_part1"; //the value to
encode must be splitted in 2 parts
barcode.PDFMacroSegment =0;
//first segment
var bitmap1=barcode.paint();
// paint segment 2
barcode.pdfcode="valuetoencode_part2";
barcode.PDFMacroSegment =1; //second and last segment
barcode.PDFMacroLastSegment =true;
var bitmap2=barcode.paint();
:
|
