Barcode Fonts, Components, ActiveX and .NET Windows Forms Controls, Java Servlets, 
DLLs and Barcode Scanners. This site chose the Norton Secured Seal to promote trust online with consumers. IDAutomation.com, Inc., Computers Hardware, Software & Services, Tampa, FL View your cart in the IDAutomation Store
       
Menu

Home > Barcode Components > JavaScript Barcode Generator > User Manual

JavaScript Barcode Generator User Manual

Order the AJAX JavaScript Bar Code Generator Download Demo of AJAX JavaScript Bar Code Generator View the release log for the JavaScript Native Generator Support for the AJAX JavaScript Bar Code Generator

JavaScript Integration Tutorial

The Native JavaScript Barcode Generator may be utilized in any environment supporting JavaScript or HTML5.

  1. Extract the files from the installation package.
  2. 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 IDAutomation_JavaScriptBarcode_C128.js. HTML example files are also provided and may be referred to as necessary.
    Additional files are also provided for various purposes:
    1. 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.
    2. symbology.uncompressed.js - the uncompressed source code of the primary file.
    3. symbology.svg.js - this is a compressed file to use in production when only SVG is required.
    4. symbology.svg.uncompressed.js - the uncompressed source code of the SVG generation file.
  3. Open the application or IDE where the barcode is to be integrated.
  4. Add the following line at the top of the file just before the </head> line to load the appropriate JavaScript file:
    <script language="JavaScript" src="IDAutomation_JavaScriptBarcode_C128.js"></script>
  5. Add a script where the barcode is to appear, which is the file name without the ".js":
    <script type="text/javascript">
       document.write(IDAutomation_JavaScriptBarcode_C128(DataToEncode))
    </script>
  6. Modify "DataToEncode" to equal what is to be encoded in the barcode. This may be accomplished with a variable, a dynamically generated webpage or another product such as JQuery which is used in this code example:
    <div id="SVG_Barcode"> </div>
    <script type="">
       $(document).ready(function() {
          $("#encode").click(function(e) {
             barcodetext = $("#datatoencode").val();
             $("#SVG_Barcode").html(IDAutomation_JavaScriptBarcode_C128(barcodetext));
          });
       });
    </script>

    JQuery is also used with the HRI object from this product in the GS1 Element String HRI Verification Tool.
  7. 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 Barcode properties such as the bar height and X dimension may be changed if necessary.
  8. 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.

Example for Apache Cordova | Adobe PhoneGap

The Native JavaScript Barcode Generator is fully compatible with Apache Cordova and Adobe PhoneGap, including use of Apache Cordova in Visual Studio. The following is an example utilizing Adobe PhoneGap.

  1. Download and install PhoneGap desktop.
  2. Create a new project or open and existing project.
    Apache Cordova PhoneGap New Project
  3. After a working project is created, the barcode generator may be integrated within the app.
    Note: IDAutomation does not support installation and set up of PhoneGap, please use the tutorials provided by Adobe choosing Help - Tutorials.
  4. Copy the symbology-specific barcode generation JavaScript file to the \project\www\lib folder. In this example IDAutomation_JavaScriptBarcode_QRCode.js is used.
  5. Edit the appropriate HTML file where the barcode is needed. In this example \project\www\index.html is edited.
  6. Follow the JavaScript Integration Tutorial above from step 4, which will add the generator to the HTML file. In this example, the following lines of code are used to integrate JQuery with the barcode component to place an SVG image in the id element:
    <script src="lib/jquery.min.js" type="text/javascript"></script>
    <script language="JavaScript" src="lib/IDAutomation_JavaScriptBarcode_QRCode.js"></script>
    ...
    <div id="qrcode1">
    ...
    <script src="cordova.js" type="text/javascript"></script>
    <script>
       $(document).ready(function() {
          $("#encode").click(function(e) {
             barcodetext = $("#datatoencode").val();
             $("#qrcode1").html('');
             IDAutomation_JavaScriptBarcode_QRCode(barcodetext, null, null, null, null, null, null, null, null, "qrcode1");
          });
       });
    </script>
  7. Install the PhoneGap Developer App on a mobile device and verify the app works as intended.
    Barcode Generator within the PhoneGap Developer App

Barcode Properties

Barcode properties may be modified within the top of the referenced .js file or by a function parameter.

Function Parameter Example:
Function Parameters

Top of the .js file Example:
Options at the top of the referenced .js file.

The following is an explanation of popular properties:

Support

Support for the JavaScript Bar Code Generator

View the release log for the JavaScript Native Generator

Free product support may be obtained by reviewing the knowledgebase articles documented below and by searching the resolved public forum threads. Priority phone, email and forum support is also provided via several contact methods within 30 days of purchase. Support after this complimentary period may be received with an active one year Level 2 Support & Upgrade Subscription.

Common Problems and Solutions:
Related Barcode Software Products:

IDAutomation.com also provides several other barcode products for easy integration with Web Applications. A few of these products include:

Back to Top

 ©Copyright 2017 IDAutomation.com, All Rights Reserved. Legal Notices.

 Barcode Fonts | Components | Scanners | Support | Contact Us

Loading
Training Videos on YouTube  Join us on Google Plus  Join us on LinkedIn  Follow us on Twitter  Like us on Facebook
Over 70% of Fortune 100 companies use IDAutomation's products to automate their businesses.