About WebAssemblyWebAssembly is a web standard, developed by the World Wide Web Consortium (W3C), that defines an assembly-like binary code format (wasm) for execution in web pages. The executing code runs nearly as fast as native machine code and is meant to speed up performance of web applications significantly.
Since 2007, WebAssembly has been natively supported by all major browsers including Firefox, Chrome, Safari and Edge.
ConnectCode WebAssembly Barcode (wasmBarcode)ConnectCode WebAssembly Barcode is a package that generates industry compliant barcodes on web pages or applications using WebAssembly (wasm) modules and Web Fonts (WOFF - Web Open Font Format).
The wasm barcode module encodes the input data (validates input data, adds check characters, adds start/stop characters) and generates output characters to be displayed as barcodes with the Web Fonts.
PerformanceBarcode generation using WebAssembly is fast and runs at near native performance. This is due to a wasm module being compiled and optimized ahead of time instead of being interpreted real time. This improved performance is especially important in order to achieve high-performance web pages, applications or reports that need to generate multiple barcodes in one go.
Furthermore, ConnectCode WebAssembly Barcodes uses WOFF fonts to display the barcodes. Once a font is downloaded by the browser, it is cached and can be applied to display different barcodes, eliminating redundant graphical rendering and rastering. This further speeds up the performance and improves the response time to display barcodes.
Using Fonts to Display and Print barcodesUsing fonts to display and print barcodes is well known and widely adopted in the auto-id industry. As a font raster to the output device and are not limited to DPI (Dots per Inch) of the computer screen, a barcode generated using fonts is of the highest quality and can meet the strictest requirements required by the industry.
WebAssembly is a new standard and is supported by modern browsers. ConnectCode WebAssembly Barcode (wasmBarcode) has been tested and certified to run on the following browsers.
- Microsoft Edge 42.17134.1.0 (or above)
- Google Chrome 65.0.3325.181 (or above)
- Android Chromium v64.0.3282.137 (or above)
- macOS Safari 11.1 (or above)
- iOS Safari 11.3 (or above)
- Mozilla Firefox Quantum 59.0.2 (or above)
Application Programming Interface (API)
The "Resource" subfolder of ConnectCode Barcode Fonts and Software contains a “WebAssembly” subfolder that includes samples for generating all the different types of linear 1D barcodes.
For our registered users, if you do not see the "WebAssembly" folder, please contact us for your free upgrade under your Software Maintenance License.
- ConnectCode Barcode Fonts and Software is installed.
- A browser that supports WebAssembly and the File URI scheme. A browser that supports the File URI scheme is not required if you are using a web server to test your web pages.
2. Using "Windows Explorer", navigate to the "Resource\WebAssembly\Code128Auto" subfolder. If you want to generate other types of barcodes e.g. EAN13 barcode, simply navigate to the "Resource\WebAssembly\EAN13" folder.
3. The "Code128Auto" folder contains several files. We are going to use the following:
- fonts folder
- code128auto.js file
- code128auto.wasm file
Create a NEW "code128auto" folder on your desktop and copy the above folder and files into the "code128auto" folder. Please note we do not copy the "index.html" file as we are going to create one from scratch.
4. Launch "Microsoft Notepad" and enter the following:
This is a HTML5 compliant web page which includes the "code128auto.js" file. Remember we have previously mentioned that the “code128auto.js” helps load and instantiate the WebAssembly module. We have also created two "div" elements. The "barcode" element supplies the input data and once the WebAssembly module encodes the input data, the output will be placed into this element.
The "barcode_text" element is a place holder for the Human Readable Text of the barcode, the text characters that we commonly see below a barcode. We recommend using the returned value provided by the wasm module as it displays the value encoded into the barcode. In some circumstances, mandatory check characters will be automatically added into your input data and the returned Human Readable Text value will reflect this. Some barcodes such as GS1 128 also have requirements on how to display the Human Readable Text which is strictly adhered to by the returned value of the wasm module.
5. Click on "File->Save as" in "Notepad". Save the file as "index.html" into the "code128auto" folder on your Windows Desktop as shown below.
Remember to save the file with a ".html" suffix.
You can place the contents as shown above below the following line.
What the script does is to define a callback function for "onRuntimeInitialized" which will be called only when the WebAssembly Barcode module has been loaded (by “code128auto.js”) completely. If your network is slow in loading the wasm module, you can be assured that the codes in the script will not be executed on an incomplete module.
The first two lines of the script gets the "barcode" and "barcode_text" DOM (Document Object Model) objects from the HTML page. Remember that the "barcode" div element contains our input data.
7. Save the "index.html" file. Upload the "code128auto" folder to your web server to test out the page with the different browsers. You can also use the "emrun" command (from Emscripten) or other tools to view the HTML page via locally launched web server.
You should see the following output:
If you see other output, you are either using a browser that does not support wasm modules or the “file://” protocol.
The first line contains the encoded output of the barcode. The second line contains the Human Readable Text of the barcode.
8. Our final step is to apply the WOFF barcode font on the encoded output. Enter the following into "Notepad".
You can place the contents above just below the following line and before the script entered in step 6.
The "style" element specifies a "@font-face" tag to use the "ConnectCode128_S3_Trial.woff" web font. The font is then applied to the "barcode" object.
9. Launch the "index.html" file in your browser again. You should see something similar to the screenshot below.
This is a Code 128 Auto generated with a wasm barcode module and displayed with a WOFF Barcode Font. If you are using the trial version, you may see horizontal lines markings in the barcode. Please be assured that the horizontal lines do not affect the scanning of the barcode for testing purposes. Also, the fonts in the registered version do not contain the horizontal lines.
There are other things that may be of concern to you, for example, the centering of the Human Readable Text. You can now go back to open the "index.html" in the "C:\Program Files (x86)\ConnectCode\WebAssembly\Code128Auto" folder (or "C:\Program Files (x86)\ConnectCodeTrial\WebAssembly\Code128Auto").
This HTML file illustrates how to center the Human Readable Text and define the barcode in a fixed width "div" element.
You may have noticed that the HTML includes an additional "connectcode.js" file. This file implements the "onRuntimeInitialized" function that you have implemented in step 6 with some enhancements. The changes are highlighted below.
The "connectcode.js" file looks like the following:
The code above loops through all "div" elements with the "class=barcode" attribute and then use the wasm module to generate the encoded barcode output for each of them.
The following shows how the HTML file looks like with multiple “barcode” div elements:
The “style” element defines a font with a “font-size” of 32. You can easily change the size of the barcode by changing the “font-size”. Most of barcode fonts provided in ConnectCode Barcode Fonts and Software package also come with different font heights. With this 2 parameters and configuration, you will be able to generate barcodes that meet all the different requirements required by the auto-id industry.