Barcode Integration Tutorial
Several generators are provided for different barcode types.
- Extract the files from the installation package.
- Several generator files are provided for different barcode types (Symbologies)
and purposes. Use the file that represents
the symbology that is needed. This tutorial will use the Code 128 symbology
which is in the file named
HTML example files are also provided and may be referred to as necessary.
Additional files are also
provided for various purposes:
- symbology.js - the primary compressed file to use in production
that generates several image types including SVG, BMP and HTML5 and offers
several symbology options.
- symbology.uncompressed.js - the uncompressed source
code of the primary file.
- symbology.svg.js - this is
a compressed file to use in production when only SVG is required.
- the uncompressed source code of the SVG generation file.
- Open the application or IDE where the barcode is to be integrated.
- Add the following line at the top of the file just before the
- Add a script where the barcode is to appear, which is the file name
without the ".js":
- Modify "DataToEncode" to equal
what is to be encoded in the barcode. This may be accomplished with a variable,
dynamically generated webpage or another product such as
JQuery which is used in this code example:
<div id="SVG_Barcode"> </div>
barcodetext = $("#datatoencode").val();
JQuery is also used with
the HRI object from this product in the
GS1 Element String HRI Verification Tool.
- If the default image type of SVG is not supported well within the application,
the ReturnType parameter may be changed to try
other images. Other
such as the bar height and X dimension may be changed if necessary.
- Print or display the result to verify that the barcode is generated.
If a scanner is needed to verify barcodes, IDAutomation offers several
barcode scanner kits.
It is normal to view some distortion of the barcode on the screen because
of low screen resolution. However, the barcodes should be accurate when
printed or viewed on high resolution screens.
properties may be modified within the top of the referenced .js file or by a
Function Parameter Example:
Top of the .js file Example:
The following is an explanation of popular properties:
- XDimensionPoints - This
is the X dimension in pixels. Because the barcode is drawn in HTML5, each
pixel is about 10 mils or .026 cm. Refer to the
Barcode Resolution FAQ for more information and how to achieve a precise
X dimension that is not in increments of 10 mils or .026 cm.
- BarHeight - The height of the bars
Each pixel is about 10 mils or .026 cm.
- ReturnType - The ReturnType
parameter may be changed to return images other then the default of SVG.
This may be necessary if the SVG image does not produce the desired result.
- 0 = SVG (Default).
- 1 = BMP Image; when the X Dimension is set to 1, the BMP images
may appear to have clearer HR text.
- 2 = HTML5 Canvas; HTML5 images may appear blurry on some devices
when XDimensionPoints is a number less
- 3 = Font Image; generates a symbol from text using a mono-spaced
system font. This may be necessary when the other image options do not
work. XDimensionPoints will need to
be increased to about 6 or 8 when using this option.
- ApplyTilde - Processes the tilde character for special
functions such as encoding functions, encoding ASCII characters directly
- IDElement - is an optional parameter that can place the
returned image into the referenced div id element.
, , , , , 'html5_barcode'));
Free product support may be obtained by reviewing
the knowledgebase articles documented below and by searching the resolved
threads. Priority phone, email and forum support is also provided via
methods within 30 days of purchase. Support after this complimentary period
may be received with an active one year
Level 2 Support & Upgrade Subscription.
Problems and Solutions:
If scanning problems are encountered with printed output, verify the barcode
symbol is not truncated and that a printer of 600 DPI or greater is being
used. A larger X dimension may be used with
low-resolution printers to create more accurate symbols. If the proper resolution
cannot be achieved, IDAutomation also offers many barcode fonts that
print well to
The Font Image option may be
use to display a barcode image in a text box or field. In this case, the
font selected for the text object should be "Courier New", "Lucida
Console" or another mono-spaced unicode
Additionally, ensure the barcode can fit in the object. If the width
of the barcode is larger than the object, several white lines may appear.
Barcode Software Products:
IDAutomation.com also provides several other
barcode products for easy integration with Web Applications. A few of these
Back to Top