Home Page Barcodes for AJAX and Javascript
Home
Javascript Barcodes
Introduction
Demos
Documentation
Pricing & Purchase
License

For other languages
.NET
ActiveX
AJAX/Javascript
C++
Delphi
Java
PHP
XOJO & Realbasic
Ruby

Related products
RBarcode Vision
Documentation
J4L Barcodes for Javascript

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::

  1. create subdirectory called js in your server. You will place the scripts in this directory.
  2. upload the content of the obfuscated subdirectory in our delivery to the js directory in the server.
  3. create subdirectory called images in your server. You will place the module images in this directory.
  4. 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:

  1. 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>



  2. 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>
    ...

  3. 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>

  4. 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:

  1. 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>



  2. 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>
    ...

  3. 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>

  4. 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:

  1. 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>



  2. 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>
    ...

  3. 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>


  4. 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:

  1. 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>



  2. 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>
    ...

  3. 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>

  4. 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();

: